@actuate-media/cms-admin 0.63.1 → 0.64.0

package/src/styles/theme.css

@@ -1,113 +1,74 @@
 @custom-variant dark (&:is(.dark *));
 
+@import './actuate-tokens.css';
+
+/*
+ * Semantic Tailwind tokens mapped from the ActuateCMS design system.
+ * Raw tokens live in actuate-tokens.css; Appearance accent overrides
+ * mutate --acc, --primary, --sidebar-primary, etc. at runtime.
+ */
 .actuate-admin {
-  --font-size: 16px;
-  --background: #ffffff;
-  --foreground: oklch(0.145 0 0);
-  --card: #ffffff;
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: #030213;
-  --primary-foreground: oklch(1 0 0);
-  --secondary: oklch(0.95 0.0058 264.53);
-  --secondary-foreground: #030213;
-  --muted: #ececf0;
-  --muted-foreground: #717182;
-  --accent: #e9ebef;
-  --accent-foreground: #030213;
-  --destructive: #d4183d;
+  --font-size: var(--fs-body);
+  --background: var(--bg);
+  --foreground: var(--txt);
+  /* --card surface token is defined in actuate-tokens.css */
+  --card-foreground: var(--txt);
+  --popover: var(--card);
+  --popover-foreground: var(--txt);
+  --primary: var(--acc);
+  --primary-foreground: #ffffff;
+  --secondary: var(--acc-l);
+  --secondary-foreground: var(--txt);
+  --muted: color-mix(in srgb, var(--bdr) 55%, var(--card));
+  --muted-foreground: var(--sub);
+  --accent: var(--acc-l);
+  --accent-foreground: var(--acc);
+  --destructive: var(--err);
   --destructive-foreground: #ffffff;
-  /*
-   * Semantic status + brand tokens.
-   * ----------------------------------------------------------------
-   * `destructive` already covers the "error/danger" state; these add
-   * the remaining semantic states the admin needs (success / warning /
-   * info) plus the violet brand accent used for links and primary
-   * affordances. Values are tuned to read as TEXT on both the card
-   * surface and their own `/10` tint (badge backgrounds), and as a
-   * solid fill (dots, progress bars). The `*-foreground` variants are
-   * for text placed on a SOLID fill. Light values match the previous
-   * emerald/amber/blue/violet-600 palette so tokenizing is a no-op
-   * visually; dark values track the *-300/*-400 tints used before.
-   */
-  --success: oklch(0.5 0.13 155);
+  --success: var(--suc);
   --success-foreground: #ffffff;
-  --warning: oklch(0.52 0.13 73);
-  --warning-foreground: oklch(0.205 0 0);
-  --info: oklch(0.5 0.17 254);
+  --warning: var(--warn);
+  --warning-foreground: var(--txt);
+  --info: var(--info);
   --info-foreground: #ffffff;
-  --brand: oklch(0.54 0.23 293);
+  --brand: var(--acc);
   --brand-foreground: #ffffff;
-  --border: rgba(0, 0, 0, 0.1);
+  --border: var(--bdr);
   --input: transparent;
-  --input-background: #f3f3f5;
-  --switch-background: #cbced4;
+  --input-background: var(--card);
+  --switch-background: var(--bdr);
   --font-weight-medium: 500;
   --font-weight-normal: 400;
-  --ring: oklch(0.708 0 0);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --radius: 0.625rem;
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: #030213;
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
+  --ring: var(--acc-m);
+  --chart-1: var(--acc);
+  --chart-2: var(--info);
+  --chart-3: var(--suc);
+  --chart-4: var(--warn);
+  --chart-5: var(--err);
+  --radius: var(--r);
+  --sidebar: var(--sb);
+  --sidebar-foreground: var(--txt);
+  --sidebar-primary: var(--acc);
+  --sidebar-primary-foreground: #ffffff;
+  --sidebar-accent: var(--acc-l);
+  --sidebar-accent-foreground: var(--acc);
+  --sidebar-border: var(--bdr);
+  --sidebar-ring: var(--acc-m);
+  --shadow-card: var(--shd);
+  --shadow-elevated: var(--shd2);
 }
 
 .dark .actuate-admin,
 .actuate-admin.dark {
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.185 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.185 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.985 0 0);
-  --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.396 0.141 25.723);
-  --destructive-foreground: oklch(0.637 0.237 25.331);
-  --success: oklch(0.72 0.15 155);
-  --success-foreground: oklch(0.205 0 0);
-  --warning: oklch(0.8 0.13 80);
-  --warning-foreground: oklch(0.205 0 0);
-  --info: oklch(0.72 0.14 252);
-  --info-foreground: oklch(0.205 0 0);
-  --brand: oklch(0.72 0.18 293);
-  --brand-foreground: oklch(0.205 0 0);
-  --border: oklch(0.269 0 0);
-  --input: oklch(0.269 0 0);
-  --input-background: oklch(0.205 0 0);
-  --switch-background: oklch(0.35 0 0);
-  --ring: oklch(0.439 0 0);
-  --font-weight-medium: 500;
-  --font-weight-normal: 400;
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(0.269 0 0);
-  --sidebar-ring: oklch(0.439 0 0);
+  --primary-foreground: #0d0c18;
+  --secondary-foreground: var(--txt);
+  --warning-foreground: var(--txt);
+  --brand-foreground: #0d0c18;
+  --success-foreground: #0d0c18;
+  --info-foreground: #0d0c18;
+  --destructive-foreground: #0d0c18;
+  --sidebar-primary-foreground: #0d0c18;
+  --muted: color-mix(in srgb, var(--bdr) 40%, var(--card));
 }
 
 @theme inline {
@@ -145,10 +106,10 @@
   --color-chart-3: var(--chart-3);
   --color-chart-4: var(--chart-4);
   --color-chart-5: var(--chart-5);
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
+  --radius-sm: var(--r-sm);
+  --radius-md: var(--r-control);
+  --radius-lg: var(--r);
+  --radius-xl: calc(var(--r) + 2px);
   --color-sidebar: var(--sidebar);
   --color-sidebar-foreground: var(--sidebar-foreground);
   --color-sidebar-primary: var(--sidebar-primary);
@@ -157,6 +118,12 @@
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
+  --text-2xl: var(--fs-page);
+  --text-xl: calc(var(--fs-card) + 4px);
+  --text-lg: var(--fs-card);
+  --text-base: var(--fs-body);
+  --text-sm: var(--fs-sub);
+  --text-xs: var(--fs-hint);
 }
 
 @layer base {
@@ -166,102 +133,67 @@
 
   .actuate-admin {
     @apply bg-background text-foreground;
-    /*
-     * Content font is var-driven so the Appearance tab can switch it at
-     * runtime, but defaults to the system-ui stack. We do NOT load web fonts
-     * here (no Google Fonts / @font-face) — the chosen family is applied as a
-     * family string and falls back to system-ui when not installed, keeping
-     * the admin dependency-free per the design system. This is the single
-     * permitted `!important` (it must beat consumer global resets).
-     */
-    font-family: var(
-      --actuate-admin-font,
-      system-ui,
-      -apple-system,
-      BlinkMacSystemFont,
-      'Segoe UI',
-      Roboto,
-      sans-serif
-    ) !important;
+    font-family: var(--actuate-admin-font, var(--font-sans)) !important;
     font-size: var(--font-size);
     line-height: 1.5;
     isolation: isolate;
-    /*
-     * Use `contain: style` only — NOT `contain: layout`.
-     *
-     * `contain: layout` would make every `.actuate-admin` element a
-     * *containing block* for `position: fixed` descendants. That
-     * silently breaks <AdminRoot>'s own fixed overlay (`position: fixed;
-     * inset: 0`) whenever a consumer wraps AdminRoot in their own
-     * `<div className="actuate-admin">` for tailwind isolation — the
-     * inner fixed div resolves relative to the wrapper instead of the
-     * viewport, and if the wrapper is 0-height (because all its
-     * children are out-of-flow), every admin element renders offscreen
-     * while still reporting non-zero computed dimensions. The visible
-     * symptom is `<body> intercepts pointer events` on every click in
-     * Playwright; the user-visible symptom is a blank-looking admin.
-     *
-     * `contain: style` keeps the style-scoping benefit (e.g. counters
-     * don't leak out) without the positioning footgun.
-     */
     contain: style;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
 
   .actuate-admin h1 {
-    font-size: var(--text-2xl);
-    font-weight: var(--font-weight-medium);
+    font-size: var(--fs-page);
+    font-weight: 700;
+    letter-spacing: -0.5px;
     line-height: 1.5;
   }
 
   .actuate-admin h2 {
-    font-size: var(--text-xl);
-    font-weight: var(--font-weight-medium);
+    font-size: var(--fs-card);
+    font-weight: 600;
     line-height: 1.5;
   }
 
   .actuate-admin h3 {
-    font-size: var(--text-lg);
-    font-weight: var(--font-weight-medium);
+    font-size: var(--fs-card);
+    font-weight: 600;
     line-height: 1.5;
   }
 
   .actuate-admin h4 {
-    font-size: var(--text-base);
-    font-weight: var(--font-weight-medium);
+    font-size: var(--fs-body);
+    font-weight: 600;
     line-height: 1.5;
   }
 
   .actuate-admin label {
-    font-size: var(--text-base);
+    font-size: var(--fs-body);
     font-weight: var(--font-weight-medium);
     line-height: 1.5;
   }
 
   .actuate-admin button {
-    font-size: var(--text-base);
+    font-size: var(--fs-body);
     font-weight: var(--font-weight-medium);
     line-height: 1.5;
   }
 
   .actuate-admin input {
-    font-size: var(--text-base);
+    font-size: var(--fs-body);
     font-weight: var(--font-weight-normal);
     line-height: 1.5;
   }
+
+  .actuate-admin .actuate-section-label {
+    font-size: var(--fs-label);
+    font-weight: 600;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--sub);
+  }
 }
 
-/*
- * Reduce-motion (admin-level Appearance toggle).
- *
- * Intentionally UNLAYERED: unlayered rules beat Tailwind's `@layer utilities`
- * transition/animation classes without needing `!important`, so the toggle can
- * neutralize utility-driven motion. We shorten (not delete) durations and never
- * touch outlines/focus rings, so state changes and focus visibility remain
- * intact. The OS `prefers-reduced-motion` is still respected app-wide via
- * `motion-safe:`/`motion-reduce:`; this class lets users opt in regardless.
- */
 .actuate-admin.reduce-motion,
 .actuate-admin.reduce-motion *,
 .actuate-admin.reduce-motion *::before,

package/src/views/Forms.tsx

@@ -8,7 +8,7 @@
  * opens the right-side `FormSchemaDrawer`.
  */
 import { ChevronRight, ClipboardList, Plus, Search, Settings2 } from 'lucide-react'
-import * as Switch from '@radix-ui/react-switch'
+import { Toggle } from '../components/ui/Toggle.js'
 import { useCallback, useEffect, useMemo, useState, type ReactNode } from 'react'
 import { toast } from 'sonner'
 import { sortByRelevance } from '../lib/search.js'
@@ -382,14 +382,12 @@ function FormsTable({
                     {formatRelative(form.lastEntryAt)}
                   </td>
                   <td className="px-4 py-3 text-center">
-                    <Switch.Root
+                    <Toggle
                       checked={form.notifyEnabled ?? false}
                       onCheckedChange={(v) => onNotifyToggle(form, v)}
                       aria-label={`Notifications for ${form.name}`}
-                      className="bg-destructive data-[state=checked]:bg-success focus-visible:ring-ring relative inline-flex h-[18px] w-8 shrink-0 rounded-full transition-colors focus-visible:ring-2 focus-visible:outline-none"
-                    >
-                      <Switch.Thumb className="bg-background block h-3.5 w-3.5 translate-x-0.5 rounded-full shadow-sm transition-transform data-[state=checked]:translate-x-[14px]" />
-                    </Switch.Root>
+                      variant="enabled"
+                    />
                   </td>
                   <td className="px-4 py-3 text-right">
                     <button

package/src/views/ScriptTagEditor.tsx

@@ -3,6 +3,7 @@
 import { useState, useEffect } from 'react'
 import { ArrowLeft, Loader2, AlertTriangle, Trash2, X, Plus } from 'lucide-react'
 import { toast } from 'sonner'
+import { EnabledSwitch } from '../components/EnabledSwitch.js'
 import { useApiData } from '../lib/useApiData.js'
 import { cmsApi } from '../lib/api.js'
 
@@ -284,18 +285,11 @@ export function ScriptTagEditor({ tagId, onNavigate }: ScriptTagEditorProps) {
             <div>
               <label className="text-foreground mb-1 block text-sm font-medium">Enabled</label>
               <div className="pt-2">
-                <button
-                  type="button"
-                  onClick={() => setEnabled(!enabled)}
-                  className={`relative h-6 w-11 shrink-0 rounded-full transition-colors ${enabled ? 'bg-primary' : 'bg-switch-background'}`}
-                  aria-pressed={enabled}
-                >
-                  <span
-                    className={`bg-card absolute top-0.5 block h-5 w-5 rounded-full transition-transform ${
-                      enabled ? 'translate-x-[22px]' : 'translate-x-0.5'
-                    }`}
-                  />
-                </button>
+                <EnabledSwitch
+                  checked={enabled}
+                  onCheckedChange={setEnabled}
+                  aria-label={enabled ? 'Disable script tag' : 'Enable script tag'}
+                />
               </div>
             </div>
           </div>

package/src/views/ScriptTags.tsx

@@ -1,8 +1,9 @@
 'use client'
 
-import { useState } from 'react'
+import { useMemo, useState } from 'react'
 import { Code2, Plus, Loader2, AlertTriangle } from 'lucide-react'
 import { toast } from 'sonner'
+import { EnabledSwitch } from '../components/EnabledSwitch.js'
 import { useApiData } from '../lib/useApiData.js'
 import { cmsApi } from '../lib/api.js'
 
@@ -35,6 +36,13 @@ const PLACEMENT_COLORS: Record<string, string> = {
   body_close: 'bg-success/15 text-success',
 }
 
+function normalizeEnabled(value: unknown): boolean {
+  if (typeof value === 'boolean') return value
+  if (value === 'true' || value === 1) return true
+  if (value === 'false' || value === 0 || value === null) return false
+  return true
+}
+
 function scopeLabel(tag: ScriptTag): string {
   const scope = String(tag.scope ?? '')
   const targetPaths = Array.isArray(tag.targetPaths) ? tag.targetPaths : []
@@ -53,21 +61,41 @@ function scopeLabel(tag: ScriptTag): string {
 export function ScriptTags({ onNavigate }: ScriptTagsProps) {
   const { data, loading, error, refetch } = useApiData<ScriptTag[]>('/script-tags')
   const [togglingId, setTogglingId] = useState<string | null>(null)
+  const [enabledOverrides, setEnabledOverrides] = useState<Record<string, boolean>>({})
 
-  const tags = data ?? []
+  const tags = useMemo(
+    () =>
+      (data ?? []).map((tag) => ({
+        ...tag,
+        enabled: enabledOverrides[tag.id] ?? normalizeEnabled(tag.enabled),
+      })),
+    [data, enabledOverrides],
+  )
 
-  const toggleEnabled = async (tag: ScriptTag) => {
+  const toggleEnabled = async (tag: ScriptTag, nextEnabled: boolean) => {
+    setEnabledOverrides((prev) => ({ ...prev, [tag.id]: nextEnabled }))
     setTogglingId(tag.id)
-    const res = await cmsApi(`/script-tags/${tag.id}`, {
+
+    const res = await cmsApi<{ enabled?: boolean }>(`/script-tags/${tag.id}`, {
       method: 'PUT',
-      body: JSON.stringify({ enabled: !tag.enabled }),
+      body: JSON.stringify({ enabled: nextEnabled }),
     })
+
     setTogglingId(null)
+
     if (res.error) {
+      setEnabledOverrides((prev) => {
+        const { [tag.id]: _, ...rest } = prev
+        return rest
+      })
       toast.error(res.error)
-    } else {
-      refetch()
+      return
     }
+
+    const saved = normalizeEnabled(res.data?.enabled ?? nextEnabled)
+    setEnabledOverrides((prev) => ({ ...prev, [tag.id]: saved }))
+    refetch()
+    toast.success(saved ? 'Tag enabled' : 'Tag disabled')
   }
 
   if (loading) {
@@ -167,19 +195,12 @@ export function ScriptTags({ onNavigate }: ScriptTagsProps) {
                     {tag.priority}
                   </td>
                   <td className="px-4 py-3 text-center">
-                    <button
-                      type="button"
-                      onClick={() => toggleEnabled(tag)}
+                    <EnabledSwitch
+                      checked={tag.enabled}
                       disabled={togglingId === tag.id}
-                      className={`relative h-6 w-11 shrink-0 rounded-full transition-colors ${tag.enabled ? 'bg-primary' : 'bg-switch-background'}`}
-                      aria-pressed={tag.enabled}
-                    >
-                      <span
-                        className={`bg-card absolute top-0.5 block h-5 w-5 rounded-full transition-transform ${
-                          tag.enabled ? 'translate-x-[22px]' : 'translate-x-0.5'
-                        }`}
-                      />
-                    </button>
+                      onCheckedChange={(next) => void toggleEnabled(tag, next)}
+                      aria-label={`${tag.enabled ? 'Disable' : 'Enable'} ${tag.name}`}
+                    />
                   </td>
                 </tr>
               ))}

package/src/views/page-builder/BottomBar.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { Plus, Grid3X3 } from 'lucide-react'
-import * as Switch from '@radix-ui/react-switch'
+import { Toggle } from '../../components/ui/Toggle.js'
 import type { DeviceMode } from '../../hooks/useBuilderState.js'
 
 export interface BottomBarProps {
@@ -45,14 +45,11 @@ export function BottomBar({
       {/* Grid overlay toggle */}
       <label className="flex cursor-pointer items-center gap-2">
         <Grid3X3 size={14} className="text-muted-foreground" />
-        <Switch.Root
+        <Toggle
           checked={showGridOverlay}
           onCheckedChange={onToggleGrid}
-          className="bg-input-background data-[state=checked]:bg-primary relative h-[18px] w-8 rounded-full transition-colors"
           aria-label="Toggle grid overlay"
-        >
-          <Switch.Thumb className="bg-background block h-3.5 w-3.5 translate-x-0.5 rounded-full shadow-sm transition-transform data-[state=checked]:translate-x-[14px]" />
-        </Switch.Root>
+        />
         <span className="text-muted-foreground text-xs">Grid</span>
       </label>
 

package/src/views/seo/TechnicalTab.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useId, useState } from 'react'
 import { RefreshCw, Map, AlertTriangle, CheckCircle2, ExternalLink, Bot } from 'lucide-react'
-import * as Switch from '@radix-ui/react-switch'
+import { Toggle as UiToggle } from '../../components/ui/Toggle.js'
 import { toast } from 'sonner'
 import {
   fetchSitemapStatus,
@@ -67,16 +67,13 @@ function Toggle({
           {help}
         </span>
       </span>
-      <Switch.Root
+      <UiToggle
         checked={checked}
         onCheckedChange={onChange}
         disabled={disabled}
         aria-labelledby={labelId}
         aria-describedby={helpId}
-        className="bg-input-background data-[state=checked]:bg-primary focus-visible:ring-ring relative h-[18px] w-8 shrink-0 rounded-full transition-colors focus-visible:ring-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
-      >
-        <Switch.Thumb className="bg-background block h-3.5 w-3.5 translate-x-0.5 rounded-full shadow-sm transition-transform data-[state=checked]:translate-x-[14px]" />
-      </Switch.Root>
+      />
     </div>
   )
 }

package/src/views/settings/components.tsx

@@ -3,6 +3,7 @@
 import * as Dialog from '@radix-ui/react-dialog'
 import { AlertTriangle, Check, Loader2, Lock } from 'lucide-react'
 import { useId, type ReactNode } from 'react'
+import { Card, CardContent, CardDescription, CardHeader } from '../../components/ui/Card.js'
 import { adminPortalContainer } from '../../lib/portal-container.js'
 import type { SettingsSourceMetadata, ValidationIssue } from './useGeneralSettings.js'
 
@@ -34,21 +35,21 @@ export function SettingsCard({
 }) {
   const headingId = useId()
   return (
-    <section
-      aria-labelledby={headingId}
-      className={`border-border bg-card rounded-lg border p-6 ${className ?? ''}`}
-    >
-      <header className="mb-4 flex items-start justify-between gap-3">
+    <Card padding="none" aria-labelledby={headingId} role="region" className={className}>
+      <CardHeader className="flex items-start justify-between gap-3">
         <div className="min-w-0">
-          <Heading id={headingId} className="text-foreground text-lg font-medium">
+          <Heading
+            id={headingId}
+            className="text-[length:var(--fs-card)] font-semibold text-[var(--txt)]"
+          >
             {title}
           </Heading>
-          {description && <p className="text-muted-foreground mt-0.5 text-sm">{description}</p>}
+          {description && <CardDescription>{description}</CardDescription>}
         </div>
         {actions && <div className="flex shrink-0 items-center gap-2">{actions}</div>}
-      </header>
-      {children}
-    </section>
+      </CardHeader>
+      <CardContent className="pt-0 text-[var(--txt)]">{children}</CardContent>
+    </Card>
   )
 }