@actuate-media/cms-admin 0.69.0 → 0.70.0

package/src/components/seo/RedirectEditorPane.tsx

@@ -0,0 +1,271 @@
+'use client'
+
+/**
+ * Inline redirect editor pane — design-parity replacement for the old
+ * `RedirectEditorDrawer` overlay. Rendered inside an `<InspectorPane>` beside
+ * the redirect rules table. Same fields, validation, and create/update save
+ * paths as the drawer; only the presentation pattern changed.
+ */
+import { useState } from 'react'
+import { Trash2 } from 'lucide-react'
+import { toast } from 'sonner'
+import {
+  createRedirectRule,
+  updateRedirectRule,
+  type RedirectRule,
+  type RedirectRulePayload,
+  type RedirectStatusCode,
+} from '../../lib/seo-service.js'
+import {
+  InspectorPaneBody,
+  InspectorPaneFooter,
+  InspectorPaneHeader,
+  InspectorPaneSection,
+} from '../ui/InspectorPane.js'
+import { Toggle } from '../ui/Toggle.js'
+
+const STATUS_CODES: { value: RedirectStatusCode; label: string }[] = [
+  { value: 301, label: '301 — Permanent' },
+  { value: 302, label: '302 — Temporary' },
+  { value: 307, label: '307 — Temporary (preserve method)' },
+  { value: 308, label: '308 — Permanent (preserve method)' },
+  { value: 410, label: '410 — Gone (no destination)' },
+]
+
+const inputCls =
+  'w-full rounded-[7px] border border-[var(--bdr)] bg-[var(--card)] px-2.5 py-1.5 text-[12.5px] text-[var(--txt)] placeholder:text-[var(--muted)] focus:border-[var(--acc)] focus:outline-none'
+
+const labelCls = 'mb-1 block text-[11.5px] font-medium text-[var(--sub)]'
+
+function normalizePath(p: string): string {
+  const t = p.trim()
+  if (!t) return ''
+  if (/^https?:\/\//i.test(t)) return t
+  return t.startsWith('/') ? t : `/${t}`
+}
+
+function PaneToggleRow({
+  label,
+  hint,
+  checked,
+  onCheckedChange,
+  variant,
+}: {
+  label: string
+  hint?: string
+  checked: boolean
+  onCheckedChange: (checked: boolean) => void
+  variant?: 'enabled'
+}) {
+  return (
+    <div className="flex items-center justify-between gap-3 py-1.5">
+      <div className="min-w-0">
+        <div className="text-[12.5px] font-medium text-[var(--txt)]">{label}</div>
+        {hint && <div className="text-[11px] text-[var(--muted)]">{hint}</div>}
+      </div>
+      <Toggle
+        checked={checked}
+        onCheckedChange={onCheckedChange}
+        variant={variant}
+        aria-label={label}
+      />
+    </div>
+  )
+}
+
+export interface RedirectEditorPaneProps {
+  /** null = create mode */
+  rule: RedirectRule | null
+  onClose: () => void
+  /** Called after a successful save so the list can refetch / close the pane. */
+  onSaved?: () => void
+  /** Ask the parent to confirm-and-delete this rule (edit mode only). */
+  onDelete?: (rule: RedirectRule) => void
+}
+
+export function RedirectEditorPane({ rule, onClose, onSaved, onDelete }: RedirectEditorPaneProps) {
+  // The parent keys this pane by rule id, so initializing from props is safe.
+  const [form, setForm] = useState<RedirectRulePayload>(() =>
+    rule
+      ? {
+          type: rule.type,
+          fromPath: rule.fromPath,
+          toPath: rule.toPath,
+          enabled: rule.enabled,
+          preserveQuery: rule.preserveQuery,
+          notes: rule.notes ?? '',
+        }
+      : {
+          type: 301,
+          fromPath: '',
+          toPath: '',
+          enabled: true,
+          preserveQuery: false,
+          notes: '',
+        },
+  )
+  const [saving, setSaving] = useState(false)
+  const [clientError, setClientError] = useState<string | null>(null)
+
+  const isGone = form.type === 410
+  const update = (patch: Partial<RedirectRulePayload>) => setForm((f) => ({ ...f, ...patch }))
+
+  async function handleSave() {
+    const fromPath = normalizePath(form.fromPath)
+    const toPath = isGone ? '' : normalizePath(form.toPath)
+    if (!fromPath) {
+      setClientError('Source path is required.')
+      return
+    }
+    if (!isGone && !toPath) {
+      setClientError('Destination is required for redirect status codes.')
+      return
+    }
+    if (!isGone && fromPath === toPath) {
+      setClientError('Source and destination cannot be identical (would create a loop).')
+      return
+    }
+    setClientError(null)
+    setSaving(true)
+    const payload: RedirectRulePayload = { ...form, fromPath, toPath }
+    const res = rule
+      ? await updateRedirectRule(rule.id, payload)
+      : await createRedirectRule(payload)
+    setSaving(false)
+    if (res.error) {
+      toast.error(res.error)
+      return
+    }
+    toast.success(rule ? 'Redirect updated.' : 'Redirect created.')
+    onSaved?.()
+  }
+
+  return (
+    <>
+      <InspectorPaneHeader onClose={onClose} closeLabel="Close redirect editor">
+        <div className="truncate text-[13.5px] font-semibold text-[var(--txt)]">
+          {rule ? 'Edit redirect' : 'New redirect'}
+        </div>
+        {rule && (
+          <div className="mt-0.5 truncate font-mono text-[11.5px] text-[var(--muted)]">
+            {rule.fromPath}
+          </div>
+        )}
+      </InspectorPaneHeader>
+
+      <InspectorPaneBody>
+        {clientError && (
+          <div className="px-4 pt-3.5">
+            <p
+              className="rounded-[7px] bg-[var(--err-l)] px-3 py-2 text-[12px] text-[var(--err)]"
+              role="alert"
+            >
+              {clientError}
+            </p>
+          </div>
+        )}
+
+        <InspectorPaneSection title="Rule">
+          <div className="mb-3">
+            <label className={labelCls} htmlFor="redir-type">
+              Status code
+            </label>
+            <select
+              id="redir-type"
+              className={inputCls}
+              value={form.type}
+              onChange={(e) => update({ type: Number(e.target.value) as RedirectStatusCode })}
+            >
+              {STATUS_CODES.map((s) => (
+                <option key={s.value} value={s.value}>
+                  {s.label}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          <div className="mb-3">
+            <label className={labelCls} htmlFor="redir-from">
+              Source path
+            </label>
+            <input
+              id="redir-from"
+              className={inputCls}
+              value={form.fromPath}
+              onChange={(e) => update({ fromPath: e.target.value })}
+              placeholder="/old-path"
+            />
+          </div>
+
+          {!isGone && (
+            <div className="mb-3 last:mb-0">
+              <label className={labelCls} htmlFor="redir-to">
+                Destination
+              </label>
+              <input
+                id="redir-to"
+                className={inputCls}
+                value={form.toPath}
+                onChange={(e) => update({ toPath: e.target.value })}
+                placeholder="/new-path or https://example.com/page"
+              />
+            </div>
+          )}
+        </InspectorPaneSection>
+
+        <InspectorPaneSection title="Options">
+          <PaneToggleRow
+            label="Enabled"
+            checked={!!form.enabled}
+            onCheckedChange={(v) => update({ enabled: v })}
+            variant="enabled"
+          />
+          {!isGone && (
+            <PaneToggleRow
+              label="Preserve query string"
+              hint="Append the original query params to the destination."
+              checked={!!form.preserveQuery}
+              onCheckedChange={(v) => update({ preserveQuery: v })}
+            />
+          )}
+          <div className="mt-2">
+            <label className={labelCls} htmlFor="redir-notes">
+              Notes <span className="font-normal text-[var(--muted)]">(optional)</span>
+            </label>
+            <input
+              id="redir-notes"
+              className={inputCls}
+              value={form.notes ?? ''}
+              onChange={(e) => update({ notes: e.target.value })}
+              placeholder="Why this redirect exists"
+            />
+          </div>
+        </InspectorPaneSection>
+      </InspectorPaneBody>
+
+      <InspectorPaneFooter>
+        <div className="flex items-center gap-2">
+          {rule && onDelete && (
+            <button
+              type="button"
+              onClick={() => onDelete(rule)}
+              disabled={saving}
+              aria-label={`Delete redirect ${rule.fromPath}`}
+              className="flex h-9 w-9 shrink-0 items-center justify-center rounded-[7px] border border-[var(--bdr)] 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-50"
+            >
+              <Trash2 size={16} aria-hidden />
+            </button>
+          )}
+          <button
+            type="button"
+            onClick={() => void handleSave()}
+            disabled={saving}
+            className="bg-primary text-primary-foreground min-w-0 flex-1 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…' : rule ? 'Save changes' : 'Create redirect'}
+          </button>
+        </div>
+      </InspectorPaneFooter>
+    </>
+  )
+}

package/src/components/seo/SeoEditorPane.tsx

@@ -523,7 +523,7 @@ export function SeoEditorPane({ entityType, entityId, onClose, onSaved }: SeoEdi
           type="button"
           onClick={() => void handleSave()}
           disabled={saving || loading || !!error}
-          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 Changes'}
         </button>

package/src/components/ui/DataTable.tsx

@@ -59,7 +59,7 @@ export function DataTable({
   return (
     <div className="overflow-x-auto rounded-lg border border-[var(--border)]">
       <table className="w-full text-left text-sm">
-        <thead className="border-b border-[var(--border)] bg-[var(--muted)]">
+        <thead className="bg-muted border-b border-[var(--border)]">
           <tr>
             <th className="w-10 px-4 py-3">
               <input
@@ -146,7 +146,7 @@ function RowActionsMenu({ actions, row }: { actions: RowAction[]; row: Row }) {
           <button
             key={action.key}
             onClick={() => action.onClick(row)}
-            className="rounded p-1 text-[var(--muted-foreground)] hover:bg-[var(--muted)] hover:text-[var(--foreground)]"
+            className="hover:bg-muted rounded p-1 text-[var(--muted-foreground)] hover:text-[var(--foreground)]"
             aria-label={action.label}
             title={action.label}
           >
@@ -155,7 +155,7 @@ function RowActionsMenu({ actions, row }: { actions: RowAction[]; row: Row }) {
         ))}
       <button
         onClick={() => setOpen((o) => !o)}
-        className="rounded p-1 hover:bg-[var(--muted)]"
+        className="hover:bg-muted rounded p-1"
         aria-label="More actions"
       >
         <MoreVerticalIcon />

package/src/components/ui/Skeleton.tsx

@@ -10,10 +10,10 @@ export function Skeleton({ variant = 'text', lines = 3, className = '' }: Skelet
   if (variant === 'card') {
     return (
       <div className={`animate-pulse rounded-lg border border-[var(--border)] p-5 ${className}`}>
-        <div className="mb-3 h-4 w-1/3 rounded bg-[var(--muted)]" />
+        <div className="bg-muted mb-3 h-4 w-1/3 rounded" />
         <div className="space-y-2">
-          <div className="h-3 w-full rounded bg-[var(--muted)]" />
-          <div className="h-3 w-2/3 rounded bg-[var(--muted)]" />
+          <div className="bg-muted h-3 w-full rounded" />
+          <div className="bg-muted h-3 w-2/3 rounded" />
         </div>
       </div>
     )
@@ -24,10 +24,10 @@ export function Skeleton({ variant = 'text', lines = 3, className = '' }: Skelet
       <div className={`animate-pulse ${className}`}>
         {Array.from({ length: lines }, (_, i) => (
           <div key={i} className="flex gap-4 border-b border-[var(--border)] px-4 py-3">
-            <div className="h-4 w-8 rounded bg-[var(--muted)]" />
-            <div className="h-4 flex-1 rounded bg-[var(--muted)]" />
-            <div className="h-4 w-20 rounded bg-[var(--muted)]" />
-            <div className="h-4 w-24 rounded bg-[var(--muted)]" />
+            <div className="bg-muted h-4 w-8 rounded" />
+            <div className="bg-muted h-4 flex-1 rounded" />
+            <div className="bg-muted h-4 w-20 rounded" />
+            <div className="bg-muted h-4 w-24 rounded" />
           </div>
         ))}
       </div>
@@ -39,7 +39,7 @@ export function Skeleton({ variant = 'text', lines = 3, className = '' }: Skelet
       {Array.from({ length: lines }, (_, i) => (
         <div
           key={i}
-          className="h-3 rounded bg-[var(--muted)]"
+          className="bg-muted h-3 rounded"
           style={{ width: `${Math.max(40, 100 - i * 15)}%` }}
         />
       ))}

package/src/components/ui/Toggle.tsx

@@ -26,7 +26,7 @@ const toggleTrack = cv(
 )
 
 const toggleThumb = cv(
-  'pointer-events-none block rounded-full bg-white shadow-[0_1px_3px_rgba(0,0,0,0.2)] transition-transform duration-[var(--motion-base)]',
+  'pointer-events-none block rounded-full bg-[var(--toggle-thumb)] shadow-[0_1px_3px_rgba(0,0,0,0.2)] transition-transform duration-[var(--motion-base)]',
   {
     variants: {
       size: {

package/src/fields/BlockBuilderField.tsx

@@ -114,7 +114,7 @@ function BlockField({ field, value, onChange }: BlockFieldProps) {
           {field.required && <span className="ml-0.5 text-[var(--destructive)]">*</span>}
         </label>
         <div className="flex items-center gap-3 rounded-md border border-dashed border-[var(--border)] p-3">
-          <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-md bg-[var(--muted)]">
+          <div className="bg-muted flex h-12 w-12 shrink-0 items-center justify-center rounded-md">
             <Image className="h-5 w-5 text-[var(--muted-foreground)]" />
           </div>
           <span className="text-sm text-[var(--muted-foreground)]">

package/src/fields/MediaField.tsx

@@ -18,7 +18,7 @@ export function MediaField({ label, value, onChange, required, helpText }: Media
 
       {value ? (
         <div className="flex items-center gap-3 rounded-md border border-[var(--border)] p-3">
-          <div className="h-16 w-16 shrink-0 rounded-md bg-[var(--muted)]" />
+          <div className="bg-muted h-16 w-16 shrink-0 rounded-md" />
           <div className="flex-1">
             <p className="text-sm font-medium">{value.filename}</p>
             <button

package/src/fields/PropInput.tsx

@@ -302,7 +302,7 @@ function LiteralDisplay({
   return (
     <div className="text-sm">
       <div className="mb-1">{label}</div>
-      <div className="rounded-md border border-dashed border-[var(--border)] bg-[var(--muted)] px-3 py-2 text-xs text-[var(--muted-foreground)]">
+      <div className="bg-muted rounded-md border border-dashed border-[var(--border)] px-3 py-2 text-xs text-[var(--muted-foreground)]">
         Fixed: <code>{String(literal)}</code>
       </div>
     </div>

package/src/index.ts

@@ -50,13 +50,16 @@ export type {
 } from './layout/primitives/index.js'
 
 export { Dashboard } from './views/Dashboard.js'
+/** @deprecated Superseded by `PagesListView` routing in `AdminRoot`; will be removed in the next major. */
 export { Pages } from './views/Pages.js'
+/** @deprecated Superseded by the visual page builder (`PageBuilder`); will be removed in the next major. */
 export { PageEditor } from './views/PageEditor.js'
 export { MediaBrowser } from './views/MediaBrowser.js'
 export { Forms } from './views/Forms.js'
 export { FormEditor } from './views/FormEditor.js'
 export type { FormEditorProps } from './views/FormEditor.js'
 export { FormSubmissions } from './views/FormSubmissions.js'
+/** @deprecated Superseded by the Redirects tab inside the `SEO` view; will be removed in the next major. */
 export { Redirects } from './views/Redirects.js'
 export { Users } from './views/Users.js'
 export { Settings } from './views/Settings.js'

package/src/layout/Header.tsx

@@ -127,8 +127,8 @@ export function Header({
                 className="hover:bg-accent flex items-center gap-1.5 rounded-lg p-1 transition-colors"
                 aria-label="Account menu"
               >
-                <div className="flex h-8 w-8 items-center justify-center rounded-full bg-[var(--acc)]">
-                  <span className="text-xs font-semibold text-white">{initial}</span>
+                <div className="bg-primary flex h-8 w-8 items-center justify-center rounded-full">
+                  <span className="text-primary-foreground text-xs font-semibold">{initial}</span>
                 </div>
                 <ChevronDown
                   className="text-muted-foreground hidden h-4 w-4 sm:block"

package/src/lib/pages-service.ts

@@ -520,6 +520,21 @@ export async function duplicatePage(id: string): Promise<{ id?: string; error?:
   return { id: res.data?.id }
 }
 
+/**
+ * Reparent a page in the tree. `parentPageId: null` makes it top-level.
+ * Document updates merge `data`, so only the parent link changes.
+ */
+export async function movePage(
+  id: string,
+  parentPageId: string | null,
+): Promise<{ error?: string }> {
+  const res = await cmsApi(`/collections/${PAGES_COLLECTION}/${encodeURIComponent(id)}`, {
+    method: 'PUT',
+    body: JSON.stringify({ data: { parentPageId } }),
+  })
+  return res.error ? { error: res.error } : {}
+}
+
 /** Soft-delete a single page. */
 export async function deletePage(id: string): Promise<{ error?: string }> {
   const res = await cmsApi(`/collections/${PAGES_COLLECTION}/${encodeURIComponent(id)}`, {

package/src/lib/pages-tree.ts

@@ -143,3 +143,57 @@ export function flattenPageTree(nodes: PageTreeNode[], expanded: Set<string>): P
 export function defaultExpandedIds(roots: PageTreeNode[]): Set<string> {
   return new Set(roots.filter((n) => n.children.length > 0).map((n) => n.page.id))
 }
+
+/** Ids of every page in `id`'s subtree (excluding `id` itself). */
+export function collectDescendantIds(roots: PageTreeNode[], id: string): Set<string> {
+  const out = new Set<string>()
+  const collect = (node: PageTreeNode) => {
+    for (const child of node.children) {
+      out.add(child.page.id)
+      collect(child)
+    }
+  }
+  const find = (nodes: PageTreeNode[]): PageTreeNode | undefined => {
+    for (const n of nodes) {
+      if (n.page.id === id) return n
+      const hit = find(n.children)
+      if (hit) return hit
+    }
+    return undefined
+  }
+  const node = find(roots)
+  if (node) collect(node)
+  return out
+}
+
+export type ReparentCheck = { ok: true } | { ok: false; reason: string }
+
+/**
+ * Validate a drag-reparent: `sourceId` becomes a child of `targetId`
+ * (or a root when `targetId` is null). Rejects self-drops, drops into the
+ * page's own subtree (would create a cycle), and no-op moves.
+ */
+export function checkReparent(
+  roots: PageTreeNode[],
+  sourceId: string,
+  targetId: string | null,
+): ReparentCheck {
+  if (targetId === sourceId) {
+    return { ok: false, reason: 'A page cannot be its own parent' }
+  }
+  if (targetId !== null && collectDescendantIds(roots, sourceId).has(targetId)) {
+    return { ok: false, reason: 'Cannot move a page into its own sub-pages' }
+  }
+  const parentOf = (nodes: PageTreeNode[], parent: string | null): string | null | undefined => {
+    for (const n of nodes) {
+      if (n.page.id === sourceId) return parent
+      const hit = parentOf(n.children, n.page.id)
+      if (hit !== undefined) return hit
+    }
+    return undefined
+  }
+  if ((parentOf(roots, null) ?? null) === targetId) {
+    return { ok: false, reason: 'Page is already there' }
+  }
+  return { ok: true }
+}

package/src/styles/actuate-tokens.css

@@ -63,6 +63,10 @@
   --motion-fast: 0.12s;
   --motion-base: 0.18s;
   --motion-layout: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* Controls — the toggle thumb stays white in both modes per the design
+     system (.tog-thumb { background: #fff }), tokenized for themeability. */
+  --toggle-thumb: #ffffff;
 }
 
 .dark .actuate-admin,

package/src/styles/theme.css

@@ -19,7 +19,13 @@
   --primary-foreground: #ffffff;
   --secondary: var(--acc-l);
   --secondary-foreground: var(--txt);
-  --muted: color-mix(in srgb, var(--bdr) 55%, var(--card));
+  /*
+   * IMPORTANT: never redefine --muted here. The raw design token --muted
+   * (actuate-tokens.css) is a faint TEXT color used by design-parity
+   * surfaces via text-[var(--muted)]. The muted SURFACE used by the
+   * Tailwind bg-muted utility is a separate private token below.
+   */
+  --surface-muted: color-mix(in srgb, var(--bdr) 55%, var(--card));
   --muted-foreground: var(--sub);
   --accent: var(--acc-l);
   --accent-foreground: var(--acc);
@@ -68,7 +74,7 @@
   --info-foreground: #0d0c18;
   --destructive-foreground: #0d0c18;
   --sidebar-primary-foreground: #0d0c18;
-  --muted: color-mix(in srgb, var(--bdr) 40%, var(--card));
+  --surface-muted: color-mix(in srgb, var(--bdr) 40%, var(--card));
 }
 
 @theme inline {
@@ -82,7 +88,7 @@
   --color-primary-foreground: var(--primary-foreground);
   --color-secondary: var(--secondary);
   --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
+  --color-muted: var(--surface-muted);
   --color-muted-foreground: var(--muted-foreground);
   --color-accent: var(--accent);
   --color-accent-foreground: var(--accent-foreground);

package/src/views/DocumentEdit.tsx

@@ -321,7 +321,7 @@ export function DocumentEdit({
         <div className="flex items-center gap-2">
           <button
             onClick={() => setShowPreview((v) => !v)}
-            className="inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm text-[var(--muted-foreground)] hover:bg-[var(--muted)] hover:text-[var(--foreground)]"
+            className="hover:bg-muted inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm text-[var(--muted-foreground)] hover:text-[var(--foreground)]"
             title={showPreview ? 'Hide preview' : 'Show preview'}
           >
             {showPreview ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
@@ -331,7 +331,7 @@ export function DocumentEdit({
             <>
               <button
                 onClick={() => setShowShareLink(true)}
-                className="inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm text-[var(--muted-foreground)] hover:bg-[var(--muted)] hover:text-[var(--foreground)]"
+                className="hover:bg-muted inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm text-[var(--muted-foreground)] hover:text-[var(--foreground)]"
                 title="Share a signed preview link for the current draft"
               >
                 <Share2 className="h-4 w-4" />
@@ -339,7 +339,7 @@ export function DocumentEdit({
               </button>
               <button
                 onClick={() => setShowVersions(true)}
-                className="inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm text-[var(--muted-foreground)] hover:bg-[var(--muted)] hover:text-[var(--foreground)]"
+                className="hover:bg-muted inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm text-[var(--muted-foreground)] hover:text-[var(--foreground)]"
                 title="Version history"
               >
                 <Clock className="h-4 w-4" />
@@ -347,7 +347,7 @@ export function DocumentEdit({
               </button>
               <button
                 onClick={handleDuplicate}
-                className="inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm text-[var(--muted-foreground)] hover:bg-[var(--muted)] hover:text-[var(--foreground)]"
+                className="hover:bg-muted inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm text-[var(--muted-foreground)] hover:text-[var(--foreground)]"
                 title="Duplicate this document"
               >
                 <Copy className="h-4 w-4" />

package/src/views/FormEditor.tsx

@@ -351,11 +351,11 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
               </label>
               <div className="flex gap-3">
                 <label
-                  className="hover:bg-muted flex cursor-pointer items-center gap-2 rounded-lg border px-4 py-2 transition-colors"
-                  style={{
-                    borderColor: confirmation.type === 'message' ? '#2563eb' : '#d1d5db',
-                    backgroundColor: confirmation.type === 'message' ? '#eff6ff' : 'transparent',
-                  }}
+                  className={`flex cursor-pointer items-center gap-2 rounded-lg border px-4 py-2 transition-colors ${
+                    confirmation.type === 'message'
+                      ? 'border-primary bg-accent'
+                      : 'border-border hover:bg-muted bg-transparent'
+                  }`}
                 >
                   <input
                     type="radio"
@@ -369,11 +369,11 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
                   <span className="text-sm">Show Message</span>
                 </label>
                 <label
-                  className="hover:bg-muted flex cursor-pointer items-center gap-2 rounded-lg border px-4 py-2 transition-colors"
-                  style={{
-                    borderColor: confirmation.type === 'redirect' ? '#2563eb' : '#d1d5db',
-                    backgroundColor: confirmation.type === 'redirect' ? '#eff6ff' : 'transparent',
-                  }}
+                  className={`flex cursor-pointer items-center gap-2 rounded-lg border px-4 py-2 transition-colors ${
+                    confirmation.type === 'redirect'
+                      ? 'border-primary bg-accent'
+                      : 'border-border hover:bg-muted bg-transparent'
+                  }`}
                 >
                   <input
                     type="radio"