@actuate-media/cms-admin 0.78.0 → 0.79.1

package/src/components/forms/ShortcodeGlossary.tsx

@@ -0,0 +1,146 @@
+'use client'
+
+/**
+ * Copy-paste glossary of notification shortcodes (built-ins + form field keys).
+ * Used by the Notifications panel so admins never have to guess `{{token}}` names.
+ *
+ * Built-in keys must stay in sync with `FORM_NOTIFICATION_SHORTCODES` in
+ * `packages/cms-core/src/forms/notify.ts`.
+ */
+import { useState } from 'react'
+import { Check, Copy } from 'lucide-react'
+import { toast } from 'sonner'
+import type { FormField } from '../../lib/forms-service.js'
+
+/** Mirrors cms-core `FORM_NOTIFICATION_SHORTCODES`. */
+const BUILTIN_SHORTCODES = [
+  { key: 'formName', description: 'Form name' },
+  { key: 'siteName', description: 'Website name (SEO settings)' },
+  { key: 'siteUrl', description: 'Website URL (SEO settings)' },
+  { key: 'entryNumber', description: 'Submission number (e.g. #00042)' },
+  { key: 'senderName', description: 'Derived submitter name' },
+  { key: 'senderEmail', description: 'Derived submitter email' },
+  { key: 'submittedAt', description: 'Submission timestamp (ISO)' },
+] as const
+
+function token(key: string): string {
+  return `{{${key}}}`
+}
+
+async function copyText(value: string, label: string) {
+  try {
+    await navigator.clipboard.writeText(value)
+    toast.success(`Copied ${label}`)
+    return true
+  } catch {
+    toast.error('Copy failed — your browser blocked clipboard access.')
+    return false
+  }
+}
+
+export function ShortcodeGlossary({ fields = [] }: { fields?: FormField[] }) {
+  const fieldTokens = fields.filter(
+    (f) => f.type !== 'honeypot' && f.type !== 'divider' && f.type !== 'richtext',
+  )
+
+  const allTokens = [
+    ...BUILTIN_SHORTCODES.map((s) => token(s.key)),
+    ...fieldTokens.map((f) => token(f.key)),
+  ].join('\n')
+
+  return (
+    <div className="border-border bg-muted/40 space-y-3 rounded-md border p-3">
+      <div className="flex items-start justify-between gap-3">
+        <div className="min-w-0">
+          <p className="text-foreground text-sm font-medium">Shortcode glossary</p>
+          <p className="text-muted-foreground text-xs">
+            Paste these into subject or message templates. Leave templates blank to use the built-in
+            email (all fields + attribution).
+          </p>
+        </div>
+        <CopyButton
+          label="Copy all"
+          ariaLabel="Copy all shortcodes"
+          value={allTokens}
+          successLabel="all shortcodes"
+        />
+      </div>
+
+      <ShortcodeGroup title="Built-in">
+        {BUILTIN_SHORTCODES.map((s) => (
+          <ShortcodeRow key={s.key} code={token(s.key)} description={s.description} />
+        ))}
+      </ShortcodeGroup>
+
+      {fieldTokens.length > 0 && (
+        <ShortcodeGroup title="Form fields">
+          {fieldTokens.map((f) => (
+            <ShortcodeRow key={f.id || f.key} code={token(f.key)} description={f.label || f.key} />
+          ))}
+        </ShortcodeGroup>
+      )}
+    </div>
+  )
+}
+
+function ShortcodeGroup({ title, children }: { title: string; children: React.ReactNode }) {
+  return (
+    <div>
+      <p className="text-muted-foreground mb-1.5 text-xs font-medium tracking-wide uppercase">
+        {title}
+      </p>
+      <ul className="border-border divide-border bg-background divide-y overflow-hidden rounded-md border">
+        {children}
+      </ul>
+    </div>
+  )
+}
+
+function ShortcodeRow({ code, description }: { code: string; description: string }) {
+  return (
+    <li className="flex items-center justify-between gap-2 px-2.5 py-1.5">
+      <div className="min-w-0">
+        <code className="text-foreground font-mono text-xs">{code}</code>
+        <span className="text-muted-foreground ml-2 text-xs">{description}</span>
+      </div>
+      <CopyButton label="Copy" ariaLabel={`Copy ${code}`} value={code} successLabel={code} />
+    </li>
+  )
+}
+
+function CopyButton({
+  label,
+  ariaLabel,
+  value,
+  successLabel,
+}: {
+  label: string
+  ariaLabel: string
+  value: string
+  successLabel: string
+}) {
+  const [copied, setCopied] = useState(false)
+
+  async function onCopy() {
+    const ok = await copyText(value, successLabel)
+    if (!ok) return
+    setCopied(true)
+    setTimeout(() => setCopied(false), 1500)
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={() => void onCopy()}
+      className="text-muted-foreground hover:text-foreground focus-visible:ring-ring inline-flex shrink-0 items-center gap-1 rounded px-1.5 py-0.5 text-xs font-medium focus-visible:ring-2 focus-visible:outline-none"
+      aria-label={ariaLabel}
+    >
+      {copied ? (
+        <Check className="h-3.5 w-3.5" aria-hidden />
+      ) : (
+        <Copy className="h-3.5 w-3.5" aria-hidden />
+      )}
+      {copied ? 'Copied' : label}
+    </button>
+  )
+}

package/src/components/ui/ReauthDialog.tsx

@@ -0,0 +1,93 @@
+'use client'
+
+import { useState } from 'react'
+import { Modal } from './Modal.js'
+import { Button } from './Button.js'
+
+export interface ReauthDialogProps {
+  open: boolean
+  onClose: () => void
+  /** Called with the entered password. Resolve on success; throw or return without closing on failure. */
+  onSubmit: (password: string) => Promise<void>
+  title?: string
+  description?: string
+  confirmLabel?: string
+  /** When true, the confirm button uses the destructive (danger) variant. */
+  destructive?: boolean
+}
+
+/**
+ * Password re-auth modal for sensitive admin actions. Prefer this over
+ * `window.prompt()` so the flow stays in-theme and accessible.
+ */
+export function ReauthDialog({
+  open,
+  onClose,
+  onSubmit,
+  title = "Confirm it's you",
+  description = 'This is a sensitive action. Re-enter your password to continue.',
+  confirmLabel = 'Confirm',
+  destructive = false,
+}: ReauthDialogProps) {
+  const [password, setPassword] = useState('')
+  const [busy, setBusy] = useState(false)
+
+  const resetAndClose = () => {
+    setPassword('')
+    onClose()
+  }
+
+  const submit = async () => {
+    if (!password || busy) return
+    setBusy(true)
+    try {
+      await onSubmit(password)
+      setPassword('')
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <Modal
+      open={open}
+      onClose={resetAndClose}
+      title={title}
+      actions={
+        <>
+          <Button variant="ghost" onClick={resetAndClose} disabled={busy}>
+            Cancel
+          </Button>
+          <Button
+            variant={destructive ? 'danger' : 'primary'}
+            loading={busy}
+            disabled={!password || busy}
+            onClick={submit}
+          >
+            {confirmLabel}
+          </Button>
+        </>
+      }
+    >
+      <p className="text-muted-foreground mb-3 text-sm">{description}</p>
+      <label
+        htmlFor="reauth-password"
+        className="text-card-foreground mb-1 block text-sm font-medium"
+      >
+        Your password
+      </label>
+      <input
+        id="reauth-password"
+        type="password"
+        value={password}
+        onChange={(e) => setPassword(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') void submit()
+        }}
+        autoComplete="current-password"
+        autoFocus
+        className="border-border bg-input-background text-foreground focus:ring-brand w-full rounded-md border px-3 py-2 text-sm focus:ring-2 focus:outline-none"
+      />
+    </Modal>
+  )
+}

package/src/components/ui/index.ts

@@ -28,6 +28,8 @@ export { Modal } from './Modal.js'
 export type { ModalProps } from './Modal.js'
 export { ConfirmDialog } from './ConfirmDialog.js'
 export type { ConfirmDialogProps } from './ConfirmDialog.js'
+export { ReauthDialog } from './ReauthDialog.js'
+export type { ReauthDialogProps } from './ReauthDialog.js'
 export { DataTable } from './DataTable.js'
 export type { DataTableProps } from './DataTable.js'
 export { Pagination } from './Pagination.js'

package/src/index.ts

@@ -97,7 +97,7 @@ export type {
   SmartFolder,
 } from './components/FolderTree.js'
 export { TipTapEditor } from './components/TipTapEditor.js'
-export { SEOPanel } from './components/SEOPanel.js'
+export { SEOPanel, resolveFocusKeyword } from './components/SEOPanel.js'
 export type { SEOData, SEOPanelProps } from './components/SEOPanel.js'
 export { LivePreview } from './components/LivePreview.js'
 export { VersionHistory } from './components/VersionHistory.js'

package/src/lib/forms-service.ts

@@ -251,6 +251,18 @@ export async function setNotifyEnabled(
   return { data: res.data, error: res.error }
 }
 
+/** Send a sample notification email to the first configured recipient. */
+export async function testNotificationSettings(id: string): Promise<{
+  data?: { notified: number; autoresponded: boolean; skippedReason?: string }
+  error?: string
+}> {
+  const res = await cmsApi<{ notified: number; autoresponded: boolean; skippedReason?: string }>(
+    `/forms/${encodeURIComponent(id)}/notifications/test`,
+    { method: 'POST', body: '{}' },
+  )
+  return { data: res.data, error: res.error }
+}
+
 // ─── Embed ───────────────────────────────────────────────────────────────
 
 export async function fetchEmbedSettings(id: string): Promise<FormEmbedSettings> {

package/src/lib/pages-service.ts

@@ -528,9 +528,11 @@ export async function movePage(
   id: string,
   parentPageId: string | null,
 ): Promise<{ error?: string }> {
+  // Flat field map — nested `{ data: { parentPageId } }` is stripped by
+  // field-access (undeclared `data` key) and silently no-ops.
   const res = await cmsApi(`/collections/${PAGES_COLLECTION}/${encodeURIComponent(id)}`, {
     method: 'PUT',
-    body: JSON.stringify({ data: { parentPageId } }),
+    body: JSON.stringify({ parentPageId }),
   })
   return res.error ? { error: res.error } : {}
 }
@@ -573,7 +575,7 @@ export async function bulkChangePageTags(
       p.primaryTagId && next.has(p.primaryTagId) ? p.primaryTagId : (tags[0] ?? null)
     const res = await cmsApi(`/collections/${PAGES_COLLECTION}/${encodeURIComponent(p.id)}`, {
       method: 'PUT',
-      body: JSON.stringify({ data: { tags, primaryTag } }),
+      body: JSON.stringify({ tags, primaryTag }),
     })
     return !res.error
   })
@@ -607,12 +609,10 @@ export async function createPageTag(input: PageTagInput): Promise<{ error?: stri
       title: input.name,
       slug,
       status: 'PUBLISHED',
-      data: {
-        color: input.color ?? 'gray',
-        description: input.description ?? '',
-        sortOrder: input.sortOrder ?? 0,
-        active: input.active !== false,
-      },
+      color: input.color ?? 'gray',
+      description: input.description ?? '',
+      sortOrder: input.sortOrder ?? 0,
+      active: input.active !== false,
     }),
   })
   return res.error ? { error: res.error } : {}
@@ -622,12 +622,11 @@ export async function updatePageTag(
   tagDocId: string,
   input: Partial<PageTagInput>,
 ): Promise<{ error?: string }> {
-  const data: Record<string, unknown> = {}
-  if (input.color !== undefined) data.color = input.color
-  if (input.description !== undefined) data.description = input.description
-  if (input.sortOrder !== undefined) data.sortOrder = input.sortOrder
-  if (input.active !== undefined) data.active = input.active
-  const body: Record<string, unknown> = { data }
+  const body: Record<string, unknown> = {}
+  if (input.color !== undefined) body.color = input.color
+  if (input.description !== undefined) body.description = input.description
+  if (input.sortOrder !== undefined) body.sortOrder = input.sortOrder
+  if (input.active !== undefined) body.active = input.active
   if (input.name !== undefined) body.title = input.name
   const res = await cmsApi(`/collections/${PAGE_TAGS_COLLECTION}/${encodeURIComponent(tagDocId)}`, {
     method: 'PUT',
@@ -677,7 +676,7 @@ export async function mergePageTags(source: PageTag, target: PageTag): Promise<{
     const primaryTag = p.primaryTagId === source.slug ? target.slug : p.primaryTagId
     const put = await cmsApi(`/collections/${PAGES_COLLECTION}/${encodeURIComponent(p.id)}`, {
       method: 'PUT',
-      body: JSON.stringify({ data: { tags, primaryTag } }),
+      body: JSON.stringify({ tags, primaryTag }),
     })
     if (put.error) return { error: put.error }
   }

package/src/lib/post-editor-service.ts

@@ -202,6 +202,22 @@ function dataStr(data: Record<string, unknown>, key: string): string {
   return typeof v === 'string' ? v : ''
 }
 
+/**
+ * Media fields are stored denormalized as `{ id, url, alt, … }` after headless
+ * writes / admin picker. The editor state is a string (id or URL). Never coerce
+ * an object to `""` — that wiped featured images on the next save (#671).
+ */
+export function parseFeaturedImage(raw: unknown): string {
+  if (typeof raw === 'string') return raw.trim()
+  if (raw && typeof raw === 'object' && !Array.isArray(raw)) {
+    const obj = raw as Record<string, unknown>
+    if (typeof obj.id === 'string' && obj.id.trim()) return obj.id.trim()
+    const url = obj.url ?? obj.publicUrl ?? obj.src
+    if (typeof url === 'string' && url.trim()) return url.trim()
+  }
+  return ''
+}
+
 /**
  * Read stored tags into plain strings. The `tagsField` preset stores
  * `[{ tag: 'AI' }]` rows; older/hand-rolled configs may store `['AI']`
@@ -233,7 +249,7 @@ function rowToEditorPost(postType: string, doc: DocumentApiRow): EditorPost {
     title: dataTitle || (doc.title ?? ''),
     slug: doc.slug ?? dataStr(data, 'slug'),
     excerpt: dataStr(data, 'excerpt'),
-    featuredImage: dataStr(data, 'featuredImage'),
+    featuredImage: parseFeaturedImage(data.featuredImage),
     body: dataStr(data, 'body'),
     category: dataStr(data, 'category'),
     tags: parseTags(data.tags),

package/src/lib/seo-service.ts

@@ -776,6 +776,9 @@ export interface RedirectRule {
   preserveQuery: boolean
   hits: number
   lastHitAt: string | null
+  /** True when lastHitAt is null — never recorded a public hit. */
+  neverHit: boolean
+  /** True when last hit was more than 60 days ago (never-hit is not stale). */
   stale: boolean
   source: string
   notes: string | null
@@ -786,6 +789,7 @@ export interface RedirectRule {
 export interface RedirectOverview {
   activeRedirects: number
   staleRedirects: number
+  neverHitRedirects: number
   notFoundCount: number
   notFoundHits: number
   chainsAndLoops: number
@@ -825,6 +829,7 @@ export async function fetchRedirectOverview(): Promise<RedirectOverview> {
     res.data ?? {
       activeRedirects: 0,
       staleRedirects: 0,
+      neverHitRedirects: 0,
       notFoundCount: 0,
       notFoundHits: 0,
       chainsAndLoops: 0,

package/src/views/ApiKeys.tsx

@@ -17,6 +17,7 @@ import { type FormEvent, useState } from 'react'
 import { toast } from 'sonner'
 import { useApiData } from '../lib/useApiData.js'
 import { cmsApi } from '../lib/api.js'
+import { ReauthDialog } from '../components/ui/ReauthDialog.js'
 import { SettingsCard } from './settings/components.js'
 
 const DIALOG_INPUT_CLASS =
@@ -80,26 +81,11 @@ export function ApiKeys({ embedded = false }: ApiKeysProps = {}) {
   const { data, loading, error, refetch } = useApiData<ApiKeyRecord[]>('/api-keys')
   const [showCreate, setShowCreate] = useState(false)
   const [createdKey, setCreatedKey] = useState<{ key: string; record: ApiKeyRecord } | null>(null)
+  const [pendingDelete, setPendingDelete] = useState<{ id: string; name: string } | null>(null)
 
   const keys = data ?? []
   const rootPadding = embedded ? '' : 'p-4 sm:p-6'
 
-  const handleRevoke = async (id: string, name: string) => {
-    if (!confirm(`Revoke API key "${name}"? This cannot be undone.`)) return
-    const password = prompt('Confirm your password to revoke this API key:')
-    if (!password) return
-    const res = await cmsApi(`/api-keys/${id}`, {
-      method: 'DELETE',
-      headers: { 'x-reauth-password': password },
-    })
-    if (res.error) {
-      toast.error(res.error)
-    } else {
-      toast.success('API key revoked')
-      refetch()
-    }
-  }
-
   if (loading) {
     return (
       <div className={`flex h-64 items-center justify-center ${embedded ? '' : 'p-4 sm:p-6'}`}>
@@ -193,10 +179,9 @@ export function ApiKeys({ embedded = false }: ApiKeysProps = {}) {
                 </thead>
                 <tbody className="divide-border divide-y">
                   {keys.map((k) => {
-                    const revoked = !!k.revokedAt
                     const expired = k.expiresAt && new Date(k.expiresAt).getTime() < Date.now()
                     return (
-                      <tr key={k.id} className={revoked || expired ? 'opacity-60' : undefined}>
+                      <tr key={k.id} className={expired ? 'opacity-60' : undefined}>
                         <td className="px-4 py-3 text-sm">
                           <div className="text-foreground font-medium">{k.name}</div>
                           {k.user && (
@@ -218,11 +203,7 @@ export function ApiKeys({ embedded = false }: ApiKeysProps = {}) {
                           {formatDate(k.expiresAt)}
                         </td>
                         <td className="px-4 py-3">
-                          {revoked ? (
-                            <span className="bg-destructive/10 text-destructive inline-flex rounded-full px-2 py-0.5 text-xs font-medium">
-                              Revoked
-                            </span>
-                          ) : expired ? (
+                          {expired ? (
                             <span className="bg-warning/10 text-warning inline-flex rounded-full px-2 py-0.5 text-xs font-medium">
                               Expired
                             </span>
@@ -233,17 +214,15 @@ export function ApiKeys({ embedded = false }: ApiKeysProps = {}) {
                           )}
                         </td>
                         <td className="px-4 py-3 text-right">
-                          {!revoked && (
-                            <button
-                              type="button"
-                              onClick={() => handleRevoke(k.id, k.name)}
-                              className="hover:bg-destructive/10 rounded p-1.5 transition-colors"
-                              aria-label={`Revoke ${k.name}`}
-                              title="Revoke"
-                            >
-                              <Trash2 className="text-destructive h-4 w-4" aria-hidden="true" />
-                            </button>
-                          )}
+                          <button
+                            type="button"
+                            onClick={() => setPendingDelete({ id: k.id, name: k.name })}
+                            className="hover:bg-destructive/10 rounded p-1.5 transition-colors"
+                            aria-label={`Delete ${k.name}`}
+                            title="Delete"
+                          >
+                            <Trash2 className="text-destructive h-4 w-4" aria-hidden="true" />
+                          </button>
                         </td>
                       </tr>
                     )
@@ -266,6 +245,33 @@ export function ApiKeys({ embedded = false }: ApiKeysProps = {}) {
       />
 
       {createdKey && <RevealKeyDialog created={createdKey} onClose={() => setCreatedKey(null)} />}
+
+      <ReauthDialog
+        open={!!pendingDelete}
+        onClose={() => setPendingDelete(null)}
+        title="Delete API key"
+        description={
+          pendingDelete
+            ? `Permanently delete “${pendingDelete.name}”? Clients using this key will fail immediately. This cannot be undone.`
+            : 'Permanently delete this API key? This cannot be undone.'
+        }
+        confirmLabel="Delete key"
+        destructive
+        onSubmit={async (password) => {
+          if (!pendingDelete) return
+          const res = await cmsApi(`/api-keys/${pendingDelete.id}`, {
+            method: 'DELETE',
+            headers: { 'x-reauth-password': password },
+          })
+          if (res.error) {
+            toast.error(res.error)
+            return
+          }
+          toast.success('API key deleted')
+          setPendingDelete(null)
+          refetch()
+        }}
+      />
     </div>
   )
 }
@@ -442,24 +448,25 @@ function CreateApiKeyDialog({ open, onClose, onCreated }: CreateApiKeyDialogProp
               />
             </div>
 
-            <div>
+            <div className="border-border bg-muted/30 space-y-2 rounded-md border p-3">
               <label
                 htmlFor="apikey-password"
-                className="text-foreground mb-1 block text-sm font-medium"
+                className="text-foreground block text-sm font-medium"
               >
-                Confirm password
+                Confirm it&apos;s you
               </label>
+              <p className="text-muted-foreground text-sm">
+                Creating an API key is a sensitive action. Re-enter your password to continue.
+              </p>
               <input
                 id="apikey-password"
                 type="password"
                 value={password}
                 onChange={(e) => setPassword(e.target.value)}
+                autoComplete="current-password"
                 className={DIALOG_INPUT_CLASS}
                 required
               />
-              <p className="text-muted-foreground mt-1 text-sm">
-                Creating an API key is a sensitive action and requires re-authentication.
-              </p>
             </div>
 
             <div className="flex items-center justify-end gap-2 pt-2">
@@ -509,7 +516,7 @@ function RevealKeyDialog({
           <div className="border-warning/30 bg-warning/10 mb-4 flex items-start gap-2 rounded-lg border p-4">
             <AlertTriangle className="text-warning mt-0.5 h-4 w-4 shrink-0" aria-hidden="true" />
             <p className="text-foreground text-xs">
-              We only store a hash of this key. If you lose it, you&apos;ll need to revoke and
+              We only store a hash of this key. If you lose it, you&apos;ll need to delete it and
               create a new one.
             </p>
           </div>

package/src/views/DocumentEdit.tsx

@@ -109,7 +109,7 @@ export function DocumentEdit({
   const SEO_FIELDS: (keyof SEOData)[] = [
     'metaTitle',
     'metaDescription',
-    'focusKeyphrase',
+    'focusKeyword',
     'keyTakeaway',
     'canonical',
     'robotsPolicy',
@@ -148,6 +148,10 @@ export function DocumentEdit({
           ;(loadedSeo as any)[key] = docData[key]
         }
       }
+      // Legacy docs may only have `focusKeyphrase` — promote on load.
+      if (!loadedSeo.focusKeyword && typeof docData.focusKeyphrase === 'string') {
+        loadedSeo.focusKeyword = docData.focusKeyphrase
+      }
       setSeoData(loadedSeo)
       setInitialSeoData(loadedSeo)
 

package/src/views/FormEditor.tsx

@@ -314,7 +314,7 @@ function ExistingFormEditor({
 
         <Tabs.Content value="notifications" tabIndex={-1}>
           <div className="border-border bg-card rounded-lg border p-4">
-            <NotificationsPanel formId={formId} />
+            <NotificationsPanel formId={formId} fields={fields} />
           </div>
         </Tabs.Content>
 

package/src/views/seo/RedirectsTab.tsx

@@ -53,12 +53,13 @@ function OverviewCards({ onRefetchKey }: { onRefetchKey: number }) {
   if (!data) return null
   const cards = [
     { label: 'Active redirects', value: data.activeRedirects },
+    { label: 'Never hit', value: data.neverHitRedirects },
     { label: 'Stale redirects', value: data.staleRedirects },
     { label: '404s tracked', value: data.notFoundCount },
     { label: 'Chains & loops', value: data.chainsAndLoops },
   ]
   return (
-    <div className="grid grid-cols-2 gap-4 lg:grid-cols-4">
+    <div className="grid grid-cols-2 gap-4 lg:grid-cols-3 xl:grid-cols-5">
       {cards.map((c) => (
         <div key={c.label} className="border-border bg-card rounded-lg border p-4">
           <p className="text-muted-foreground text-sm">{c.label}</p>
@@ -470,6 +471,7 @@ export function RedirectsTab() {
                                 label={r.enabled ? 'Enabled' : 'Disabled'}
                                 tone={r.enabled ? 'good' : 'neutral'}
                               />
+                              {r.neverHit && <SeoStatusBadge label="Never hit" tone="neutral" />}
                               {r.stale && <SeoStatusBadge label="Stale" tone="fair" />}
                             </span>
                           </td>