@actuate-media/cms-admin 0.63.2 → 0.65.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/Dashboard.tsx

@@ -567,7 +567,7 @@ export function Dashboard({ config, session, onNavigate }: DashboardProps) {
           consistent across navigation. The on-page secondary action row
           below covers the same creation paths plus authoring shortcuts. */}
       <div className="flex flex-col gap-1 sm:gap-0.5">
-        <h1 className="text-foreground text-xl font-medium tracking-tight sm:text-2xl">
+        <h1 className="text-foreground">
           {greeting}, {userName} <span aria-hidden>👋</span>
         </h1>
         <p className="text-muted-foreground text-sm">

package/src/views/FormEditor.tsx

@@ -16,6 +16,7 @@ import {
 } from 'lucide-react'
 import { useApiData } from '../lib/useApiData.js'
 import { cmsApi } from '../lib/api.js'
+import { Toggle } from '../components/ui/Toggle.js'
 
 interface FormField {
   id: string
@@ -463,15 +464,11 @@ export function FormEditor({ formId, onNavigate }: FormEditorProps) {
         {expandedSection === 'analytics' && (
           <div className="border-border border-t p-4">
             <div className="mb-4 flex items-center gap-3">
-              <label className="relative inline-flex cursor-pointer items-center">
-                <input
-                  type="checkbox"
-                  checked={analytics.enabled}
-                  onChange={(e) => setAnalytics((a) => ({ ...a, enabled: e.target.checked }))}
-                  className="peer sr-only"
-                />
-                <div className="bg-muted peer peer-checked:bg-primary peer-focus:ring-ring/50 after:border-border after:bg-card h-5 w-9 rounded-full peer-focus:ring-2 peer-focus:outline-none after:absolute after:top-[2px] after:left-[2px] after:h-4 after:w-4 after:rounded-full after:border after:transition-all after:content-[''] peer-checked:after:translate-x-full peer-checked:after:border-white" />
-              </label>
+              <Toggle
+                checked={analytics.enabled}
+                onCheckedChange={(v) => setAnalytics((a) => ({ ...a, enabled: v }))}
+                aria-label="Push events to Google Analytics 4"
+              />
               <span className="text-foreground text-sm font-medium">
                 Push events to Google Analytics 4
               </span>

package/src/views/FormEntries.tsx

@@ -234,7 +234,7 @@ export function FormEntries({ onNavigate }: FormEntriesProps) {
     <div className="space-y-5 p-6">
       <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
         <div>
-          <h1 className="text-foreground text-2xl font-medium">All Entries</h1>
+          <h1 className="text-foreground">All Entries</h1>
           <p className="text-muted-foreground mt-1 text-sm">
             {total} {total === 1 ? 'submission' : 'submissions'} across your forms
           </p>

package/src/views/FormSubmissions.tsx

@@ -254,7 +254,7 @@ export function FormSubmissions({ formId, onNavigate }: FormSubmissionsProps) {
         </button>
         <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
           <div>
-            <h1 className="text-foreground text-2xl font-medium">
+            <h1 className="text-foreground">
               {formName ? `${formName} — Submissions` : 'Submissions'}
             </h1>
             <p className="text-muted-foreground mt-1 text-sm">

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'
@@ -158,7 +158,7 @@ export function Forms({ onNavigate }: FormsProps) {
     <div className="space-y-5 p-6">
       <header className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
         <div>
-          <h1 className="text-foreground text-2xl font-medium">Forms</h1>
+          <h1 className="text-foreground">Forms</h1>
           <p className="text-muted-foreground mt-1 text-sm">
             Manage forms and view incoming submissions
           </p>
@@ -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/MediaBrowser.tsx

@@ -30,6 +30,7 @@ import { sortByRelevance, type SortConfig, toggleSort } from '../lib/search.js'
 import { useApiData } from '../lib/useApiData.js'
 import { cmsApi } from '../lib/api.js'
 import { FolderTree, type FolderSelection } from '../components/FolderTree.js'
+import { StatusBadge } from '../components/ui/StatusBadge.js'
 
 interface MediaItem {
   id: number | string
@@ -411,7 +412,7 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
             <FolderInput className="text-muted-foreground h-5 w-5" />
           </button>
           <div>
-            <h1 className="text-foreground mb-1 text-xl font-medium sm:text-2xl">Media Library</h1>
+            <h1 className="text-foreground mb-1">Media Library</h1>
             <p className="text-muted-foreground text-sm">{filteredAndSorted.length} files</p>
           </div>
         </div>
@@ -722,13 +723,9 @@ export function MediaBrowser({ onNavigate }: MediaBrowserProps) {
                               </td>
                               <td className="px-3 py-2">
                                 {hasIssues ? (
-                                  <span className="bg-warning/15 text-warning inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium">
-                                    <AlertTriangle className="h-3 w-3" /> Needs attention
-                                  </span>
+                                  <StatusBadge tone="warning">Needs attention</StatusBadge>
                                 ) : (
-                                  <span className="bg-success/15 text-success inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium">
-                                    Complete
-                                  </span>
+                                  <StatusBadge tone="success">Complete</StatusBadge>
                                 )}
                               </td>
                             </tr>

package/src/views/Pages/PageTagManager.tsx

@@ -85,9 +85,7 @@ export function PageTagManager({ onNavigate, startCreating = false }: PageTagMan
 
       <div className="mb-5 flex items-center justify-between">
         <div>
-          <h1 className="text-foreground mb-1 text-xl font-medium tracking-tight sm:text-2xl">
-            Page Tags
-          </h1>
+          <h1 className="text-foreground mb-1">Page Tags</h1>
           <p className="text-muted-foreground text-sm">
             Organize pages with reusable, color-coded labels.
           </p>

package/src/views/Pages/PagesListView.tsx

@@ -290,7 +290,7 @@ export function PagesListView({ onNavigate }: PagesListViewProps) {
     <div className="flex h-full flex-col gap-4 p-4 sm:p-6">
       {/* Header */}
       <div className="flex flex-col gap-1">
-        <h1 className="text-foreground text-xl font-medium tracking-tight sm:text-2xl">Pages</h1>
+        <h1 className="text-foreground">Pages</h1>
         <p className="text-muted-foreground text-sm">
           {grandTotal} page{grandTotal === 1 ? '' : 's'} · organized by tags
         </p>

package/src/views/Pages.tsx

@@ -276,7 +276,7 @@ export function Pages({ onNavigate }: PagesProps) {
             <FolderInput className="text-muted-foreground h-5 w-5" />
           </button>
           <div>
-            <h1 className="text-foreground text-xl font-medium sm:text-2xl">Pages</h1>
+            <h1 className="text-foreground">Pages</h1>
             <p className="text-muted-foreground text-sm">
               {totalCount} page{totalCount !== 1 ? 's' : ''}
             </p>

package/src/views/Posts/NewPostPicker.tsx

@@ -62,9 +62,7 @@ export function NewPostPicker({ onNavigate }: { onNavigate: (path: string) => vo
       </button>
 
       <div className="flex flex-col gap-1">
-        <h1 className="text-foreground text-xl font-medium tracking-tight sm:text-2xl">
-          Choose a Post Type
-        </h1>
+        <h1 className="text-foreground">Choose a Post Type</h1>
         <p className="text-muted-foreground text-sm">
           Pick which content model you want to use for this post. Each type has its own fields, URL
           base, and SEO defaults.

package/src/views/Posts/NewPostTypeInstructions.tsx

@@ -114,9 +114,7 @@ export function NewPostTypeInstructions({ onNavigate }: { onNavigate: (p: string
       </button>
 
       <div className="flex flex-col gap-1">
-        <h1 className="text-foreground text-xl font-medium tracking-tight sm:text-2xl">
-          Add a Post Type
-        </h1>
+        <h1 className="text-foreground">Add a Post Type</h1>
         <p className="text-muted-foreground text-sm">
           Post Types are content models defined in{' '}
           <code className="font-mono">actuate.config.ts</code>. Start from a quick template or fill

package/src/views/Posts/PostTypesView.tsx

@@ -61,9 +61,7 @@ export function PostTypesView({ onNavigate }: PostTypesViewProps) {
   return (
     <div className="flex h-full flex-col gap-6 p-4 sm:p-6">
       <div className="flex flex-col gap-1">
-        <h1 className="text-foreground text-xl font-medium tracking-tight sm:text-2xl">
-          Post Types
-        </h1>
+        <h1 className="text-foreground">Post Types</h1>
         <p className="text-muted-foreground text-sm">
           Define content models and their fields. All types share the same default fields.
         </p>

package/src/views/Posts/PostsListView.tsx

@@ -216,7 +216,7 @@ export function PostsListView({ onNavigate }: PostsListViewProps) {
     <div className="flex h-full flex-col gap-4 p-4 sm:p-6">
       {/* Header */}
       <div className="flex flex-col gap-1">
-        <h1 className="text-foreground text-xl font-medium tracking-tight sm:text-2xl">Posts</h1>
+        <h1 className="text-foreground">Posts</h1>
         <p className="text-muted-foreground text-sm">
           {totalAll} total post{totalAll === 1 ? '' : 's'} across all types
         </p>

package/src/views/Profile.tsx

@@ -21,7 +21,7 @@ export function Profile({ session }: ProfileProps = {}) {
   return (
     <div className="p-3 pr-6 sm:p-4 sm:pr-8">
       <div className="mb-4">
-        <h1 className="text-foreground mb-1 text-2xl font-medium">Your profile</h1>
+        <h1 className="text-foreground mb-1">Your profile</h1>
         <p className="text-muted-foreground text-sm">
           Manage your account details and sign-in security.
         </p>

package/src/views/Redirects.tsx

@@ -143,7 +143,7 @@ export function Redirects({ onNavigate }: RedirectsProps) {
 
       <div className="mb-4 flex items-center justify-between">
         <div>
-          <h1 className="text-foreground mb-1 text-xl font-medium sm:text-2xl">Redirects</h1>
+          <h1 className="text-foreground mb-1">Redirects</h1>
           <p className="text-muted-foreground text-sm">
             {filteredAndSorted.length} total redirects
           </p>

package/src/views/SEO.tsx

@@ -138,7 +138,7 @@ export function SEO({ onNavigate, initialTab = 'overview' }: SEOProps) {
     <div className="space-y-6 p-6">
       <header className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <div>
-          <h1 className="text-foreground text-2xl font-medium">SEO Operations Center</h1>
+          <h1 className="text-foreground">SEO Operations Center</h1>
           <p className="text-muted-foreground mt-1 text-sm">
             Monitor, fix, and automate SEO across your content, redirects, and technical setup.
           </p>

package/src/views/ScriptTagEditor.tsx

@@ -135,9 +135,7 @@ export function ScriptTagEditor({ tagId, onNavigate }: ScriptTagEditorProps) {
           <ArrowLeft className="h-4 w-4" />
           Back to Script Tags
         </button>
-        <h1 className="text-foreground text-2xl font-medium">
-          {isNew ? 'New Script Tag' : 'Edit Script Tag'}
-        </h1>
+        <h1 className="text-foreground">{isNew ? 'New Script Tag' : 'Edit Script Tag'}</h1>
       </div>
 
       <div className="border-warning/30 bg-warning/10 mb-6 rounded-lg border p-3">

package/src/views/ScriptTags.tsx

@@ -4,6 +4,7 @@ import { useMemo, useState } from 'react'
 import { Code2, Plus, Loader2, AlertTriangle } from 'lucide-react'
 import { toast } from 'sonner'
 import { EnabledSwitch } from '../components/EnabledSwitch.js'
+import { StatPill } from '../components/ui/StatPill.js'
 import { useApiData } from '../lib/useApiData.js'
 import { cmsApi } from '../lib/api.js'
 
@@ -123,10 +124,25 @@ export function ScriptTags({ onNavigate }: ScriptTagsProps) {
 
       <div className="mb-4 flex items-center justify-between">
         <div>
-          <h1 className="text-foreground mb-1 text-2xl font-medium">Script Tags</h1>
+          <h1 className="text-foreground mb-1">Script Tags</h1>
           <p className="text-muted-foreground text-sm">
             Manage tracking codes, analytics, and custom scripts injected into your site
           </p>
+          {tags.length > 0 && (
+            <div className="mt-3 flex flex-wrap gap-1.5">
+              <StatPill value={tags.length} label="Total" />
+              <StatPill
+                value={tags.filter((t) => t.enabled).length}
+                label="Active"
+                valueClassName="text-[var(--suc)]"
+              />
+              <StatPill
+                value={tags.filter((t) => !t.enabled).length}
+                label="Inactive"
+                valueClassName="text-[var(--muted)]"
+              />
+            </div>
+          )}
         </div>
         <button
           type="button"

package/src/views/Settings.tsx

@@ -179,7 +179,7 @@ export function Settings({
       )}
 
       <div className="mb-4">
-        <h1 className="text-foreground mb-1 text-2xl font-medium">Settings</h1>
+        <h1 className="text-foreground mb-1">Settings</h1>
         <p className="text-muted-foreground text-sm">Manage your CMS configuration</p>
       </div>