@actuate-media/cms-admin 0.64.0 → 0.65.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@actuate-media/cms-admin",
-  "version": "0.64.0",
+  "version": "0.65.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/actuate-media/actuatecms.git",
@@ -95,8 +95,8 @@
     "tailwindcss": "^4.0.0",
     "typescript": "^5.7.0",
     "vitest": "^4.1.0",
-    "@actuate-media/cms-core": "0.85.2",
-    "@actuate-media/component-blocks": "0.2.1"
+    "@actuate-media/component-blocks": "0.2.1",
+    "@actuate-media/cms-core": "0.85.3"
   },
   "scripts": {
     "build": "tsc --project tsconfig.json && npx @tailwindcss/cli -i src/styles/build-input.css -o dist/actuate-admin.css --minify",

package/src/__tests__/components/ui-primitives.test.tsx

@@ -0,0 +1,58 @@
+// @vitest-environment happy-dom
+import { describe, expect, it, vi } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { StatusBadge } from '../../components/ui/StatusBadge.js'
+import { FilterPill } from '../../components/ui/FilterPill.js'
+import { StatPill } from '../../components/ui/StatPill.js'
+
+describe('StatusBadge', () => {
+  it('renders the label with a leading dot by default', () => {
+    const { container } = render(<StatusBadge tone="success">Published</StatusBadge>)
+    expect(screen.getByText('Published')).toBeTruthy()
+    expect(container.querySelectorAll('[aria-hidden]')).toHaveLength(1)
+  })
+  it('omits the dot when dot={false}', () => {
+    const { container } = render(
+      <StatusBadge tone="neutral" dot={false}>
+        Draft
+      </StatusBadge>,
+    )
+    expect(container.querySelectorAll('[aria-hidden]')).toHaveLength(0)
+  })
+  it('forwards aria-label for screen readers', () => {
+    const { container } = render(
+      <StatusBadge tone="warning" aria-label="Status: Scheduled">
+        Scheduled
+      </StatusBadge>,
+    )
+    expect(container.querySelector('[aria-label="Status: Scheduled"]')).toBeTruthy()
+  })
+})
+
+describe('FilterPill', () => {
+  it('exposes active state via aria-pressed and fires onClick', () => {
+    const onClick = vi.fn()
+    render(
+      <FilterPill active onClick={onClick}>
+        All
+      </FilterPill>,
+    )
+    const btn = screen.getByRole('button', { name: 'All' })
+    expect(btn.getAttribute('aria-pressed')).toBe('true')
+    btn.click()
+    expect(onClick).toHaveBeenCalledTimes(1)
+  })
+  it('renders an optional count', () => {
+    render(<FilterPill count={12}>Admin</FilterPill>)
+    expect(screen.getByText('12')).toBeTruthy()
+    expect(screen.getByRole('button', { name: /Admin/ }).getAttribute('aria-pressed')).toBe('false')
+  })
+})
+
+describe('StatPill', () => {
+  it('renders value and label', () => {
+    render(<StatPill value={8} label="Active" />)
+    expect(screen.getByText('8')).toBeTruthy()
+    expect(screen.getByText('Active')).toBeTruthy()
+  })
+})

package/src/__tests__/views/updates-tab.render.test.tsx

@@ -54,7 +54,8 @@ function updateAvailable(overrides: Record<string, unknown> = {}) {
     pluginCompatibility: [
       { name: '@actuate-media/plugin-seo', compatible: true, minVersion: '0.46.0' },
     ],
-    updateCommand: 'npm update @actuate-media/cms-core',
+    updateCommand:
+      'npx actuate upgrade && npm install && npx actuate db:sync && npx prisma migrate deploy',
     canManage: true,
     hasGithubToken: false,
     githubRepo: '',

package/src/components/SEOPanel.tsx

@@ -22,6 +22,7 @@ import {
   Star,
 } from 'lucide-react'
 import { SEO_SCHEMA_TYPES } from '../lib/seo-service.js'
+import { Toggle } from './ui/Toggle.js'
 
 export interface SEOData {
   metaTitle?: string
@@ -469,17 +470,7 @@ function ToggleSwitch({
         <label className="text-sm font-medium text-[var(--foreground)]">{label}</label>
         <p className="mt-0.5 text-xs text-[var(--muted-foreground)]">{description}</p>
       </div>
-      <button
-        type="button"
-        role="switch"
-        aria-checked={checked}
-        onClick={() => onChange(!checked)}
-        className={`relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full transition-colors ${checked ? 'bg-[var(--primary)]' : 'bg-[var(--muted)]'}`}
-      >
-        <span
-          className={`bg-card pointer-events-none mt-0.5 block h-5 w-5 rounded-full shadow-sm transition-transform ${checked ? 'translate-x-[22px]' : 'translate-x-0.5'}`}
-        />
-      </button>
+      <Toggle checked={checked} onCheckedChange={onChange} aria-label={label} />
     </div>
   )
 }

package/src/components/forms/primitives.tsx

@@ -9,6 +9,7 @@
  */
 import type { ReactNode } from 'react'
 import { AlertTriangle, ChevronLeft, ChevronRight, Loader2 } from 'lucide-react'
+import { StatusBadge, type StatusBadgeTone } from '../ui/StatusBadge.js'
 import type { FormFieldType, FormStatus } from '../../lib/forms-service.js'
 
 // ─── Field-type badges ─────────────────────────────────────────────────────
@@ -70,26 +71,15 @@ export function FieldTypeBadge({ type }: { type: FormFieldType }) {
 
 // ─── Status badges ─────────────────────────────────────────────────────────
 
-const STATUS_META: Record<FormStatus, { label: string; cls: string; dot: string }> = {
-  active: { label: 'Active', cls: 'bg-success/10 text-success', dot: 'bg-success' },
-  draft: { label: 'Draft', cls: 'bg-warning/10 text-warning', dot: 'bg-warning' },
-  archived: {
-    label: 'Archived',
-    cls: 'bg-muted text-muted-foreground',
-    dot: 'bg-muted-foreground',
-  },
+const STATUS_META: Record<FormStatus, { label: string; tone: StatusBadgeTone }> = {
+  active: { label: 'Active', tone: 'success' },
+  draft: { label: 'Draft', tone: 'warning' },
+  archived: { label: 'Archived', tone: 'muted' },
 }
 
 export function FormStatusBadge({ status }: { status: FormStatus }) {
   const meta = STATUS_META[status] ?? STATUS_META.draft
-  return (
-    <span
-      className={`inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium ${meta.cls}`}
-    >
-      <span className={`h-1.5 w-1.5 rounded-full ${meta.dot}`} aria-hidden />
-      {meta.label}
-    </span>
-  )
+  return <StatusBadge tone={meta.tone}>{meta.label}</StatusBadge>
 }
 
 /** Small red count badge for unread submissions. Hidden when count is 0. */

package/src/components/posts/badges.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import type { ReactNode } from 'react'
+import { StatusBadge, type StatusBadgeTone } from '../ui/StatusBadge.js'
 import type { PostStatus } from '../../lib/posts-service.js'
 
 /**
@@ -65,32 +66,18 @@ const STATUS_LABEL: Record<PostStatus, string> = {
   ARCHIVED: 'Archived',
 }
 
-const STATUS_PALETTE: Record<PostStatus, string> = {
-  PUBLISHED: 'green',
-  DRAFT: 'gray',
-  SCHEDULED: 'orange',
-  ARCHIVED: 'gray',
-}
-
-const STATUS_GLYPH: Record<PostStatus, string> = {
-  PUBLISHED: '●',
-  DRAFT: '○',
-  SCHEDULED: '◐',
-  ARCHIVED: '◌',
+const STATUS_TONE: Record<PostStatus, StatusBadgeTone> = {
+  PUBLISHED: 'success',
+  DRAFT: 'neutral',
+  SCHEDULED: 'warning',
+  ARCHIVED: 'muted',
 }
 
 export function PostStatusBadge({ status }: { status: PostStatus }) {
-  const p = paletteFor(STATUS_PALETTE[status])
   return (
-    <span
-      className={`inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-xs font-medium ${p.bg} ${p.text}`}
-      aria-label={`Status: ${STATUS_LABEL[status]}`}
-    >
-      <span aria-hidden className="text-[10px] leading-none">
-        {STATUS_GLYPH[status]}
-      </span>
+    <StatusBadge tone={STATUS_TONE[status]} aria-label={`Status: ${STATUS_LABEL[status]}`}>
       {STATUS_LABEL[status]}
-    </span>
+    </StatusBadge>
   )
 }
 

package/src/components/seo/RedirectEditorDrawer.tsx

@@ -11,6 +11,7 @@ import {
 } from '../../lib/seo-service.js'
 import { Drawer } from './Drawer.js'
 import { btnPrimary, btnSecondary } from './primitives.js'
+import { Toggle } from '../ui/Toggle.js'
 
 const STATUS_CODES: { value: RedirectStatusCode; label: string }[] = [
   { value: 301, label: '301 — Permanent' },
@@ -197,19 +198,17 @@ export function RedirectEditorDrawer({
         </div>
 
         <div className="border-border space-y-3 rounded-lg border p-4">
-          <label className="flex items-center justify-between gap-3">
+          <div className="flex items-center justify-between gap-3">
             <span className="text-foreground text-sm font-medium">Enabled</span>
-            <input
-              type="checkbox"
-              role="switch"
-              aria-checked={!!form.enabled}
+            <Toggle
               checked={!!form.enabled}
-              onChange={(e) => update({ enabled: e.target.checked })}
-              className="accent-primary h-4 w-4"
+              onCheckedChange={(v) => update({ enabled: v })}
+              variant="enabled"
+              aria-label="Enabled"
             />
-          </label>
+          </div>
           {!isGone && (
-            <label className="flex items-center justify-between gap-3">
+            <div className="flex items-center justify-between gap-3">
               <span className="min-w-0">
                 <span className="text-foreground block text-sm font-medium">
                   Preserve query string
@@ -218,15 +217,12 @@ export function RedirectEditorDrawer({
                   Append the original query params to the destination.
                 </span>
               </span>
-              <input
-                type="checkbox"
-                role="switch"
-                aria-checked={!!form.preserveQuery}
+              <Toggle
                 checked={!!form.preserveQuery}
-                onChange={(e) => update({ preserveQuery: e.target.checked })}
-                className="accent-primary h-4 w-4 shrink-0"
+                onCheckedChange={(v) => update({ preserveQuery: v })}
+                aria-label="Preserve query string"
               />
-            </label>
+            </div>
           )}
         </div>
       </div>

package/src/components/seo/SeoEditorDrawer.tsx

@@ -17,6 +17,7 @@ import { fixBrandVoiceContent } from '../../lib/brand-voice-client.js'
 import { BrandVoiceAlignmentBadge } from '../BrandVoiceAlignmentBadge.js'
 import { Drawer } from './Drawer.js'
 import { SeoLoading, SeoErrorState, btnPrimary, btnSecondary, gradeMeta } from './primitives.js'
+import { Toggle } from '../ui/Toggle.js'
 
 const META_TITLE_MAX = 60
 const META_DESC_MAX = 160
@@ -422,38 +423,32 @@ export function SeoEditorDrawer({
 
           {/* Indexing toggles */}
           <div className="border-border space-y-3 rounded-lg border p-4">
-            <label className="flex items-center justify-between gap-3">
+            <div className="flex items-center justify-between gap-3">
               <span className="min-w-0">
                 <span className="text-foreground block text-sm font-medium">No-index</span>
                 <span className="text-muted-foreground block text-sm">
                   Hide this page from search engines.
                 </span>
               </span>
-              <input
-                type="checkbox"
-                role="switch"
-                aria-checked={!!form.noindex}
+              <Toggle
                 checked={!!form.noindex}
-                onChange={(e) => update({ noindex: e.target.checked })}
-                className="accent-primary h-4 w-4"
+                onCheckedChange={(v) => update({ noindex: v })}
+                aria-label="No-index"
               />
-            </label>
-            <label className="flex items-center justify-between gap-3">
+            </div>
+            <div className="flex items-center justify-between gap-3">
               <span className="min-w-0">
                 <span className="text-foreground block text-sm font-medium">No-follow</span>
                 <span className="text-muted-foreground block text-sm">
                   Tell crawlers not to follow links on this page.
                 </span>
               </span>
-              <input
-                type="checkbox"
-                role="switch"
-                aria-checked={!!form.nofollow}
+              <Toggle
                 checked={!!form.nofollow}
-                onChange={(e) => update({ nofollow: e.target.checked })}
-                className="accent-primary h-4 w-4"
+                onCheckedChange={(v) => update({ nofollow: v })}
+                aria-label="No-follow"
               />
-            </label>
+            </div>
           </div>
 
           {/* llms.txt curation */}
@@ -499,22 +494,19 @@ export function SeoEditorDrawer({
                 placeholder="Defaults to the content type"
               />
             </Field>
-            <label className="flex items-center justify-between gap-3">
+            <div className="flex items-center justify-between gap-3">
               <span className="min-w-0">
                 <span className="text-foreground block text-sm font-medium">Optional</span>
                 <span className="text-muted-foreground block text-sm">
                   Group under “Optional” — agents skip these first when context is tight.
                 </span>
               </span>
-              <input
-                type="checkbox"
-                role="switch"
-                aria-checked={!!form.llmsOptional}
+              <Toggle
                 checked={!!form.llmsOptional}
-                onChange={(e) => update({ llmsOptional: e.target.checked })}
-                className="accent-primary h-4 w-4"
+                onCheckedChange={(v) => update({ llmsOptional: v })}
+                aria-label="Optional in llms.txt"
               />
-            </label>
+            </div>
           </div>
 
           {/* Score summary */}

package/src/components/seo/primitives.tsx

@@ -8,6 +8,7 @@
 import type { ReactNode } from 'react'
 import { AlertTriangle, Loader2 } from 'lucide-react'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../ui/Card.js'
+import { StatusBadge, type StatusBadgeTone } from '../ui/StatusBadge.js'
 import type { SeoGrade, SeoSeverity } from '../../lib/seo-service.js'
 
 // ─── Grade + severity styling ────────────────────────────────────────
@@ -73,6 +74,14 @@ export function severityMeta(severity: SeoSeverity): GradeMeta {
 
 // ─── Badges + bars ───────────────────────────────────────────────────
 
+const SEO_TONE: Record<'good' | 'fair' | 'poor' | 'critical' | 'neutral', StatusBadgeTone> = {
+  good: 'success',
+  fair: 'warning',
+  poor: 'danger',
+  critical: 'danger',
+  neutral: 'neutral',
+}
+
 export function SeoStatusBadge({
   label,
   tone,
@@ -80,33 +89,7 @@ export function SeoStatusBadge({
   label: string
   tone: 'good' | 'fair' | 'poor' | 'critical' | 'neutral'
 }) {
-  const cls =
-    tone === 'good'
-      ? 'bg-success/10 text-success'
-      : tone === 'fair'
-        ? 'bg-warning/10 text-warning'
-        : tone === 'poor' || tone === 'critical'
-          ? 'bg-destructive/10 text-destructive'
-          : 'bg-muted text-muted-foreground'
-  return (
-    <span
-      className={`inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium ${cls}`}
-    >
-      <span
-        className={`h-1.5 w-1.5 rounded-full ${
-          tone === 'good'
-            ? 'bg-success'
-            : tone === 'fair'
-              ? 'bg-warning'
-              : tone === 'neutral'
-                ? 'bg-muted-foreground'
-                : 'bg-destructive'
-        }`}
-        aria-hidden
-      />
-      {label}
-    </span>
-  )
+  return <StatusBadge tone={SEO_TONE[tone]}>{label}</StatusBadge>
 }
 
 /** A horizontal score bar (0-100), coloured by grade. */

package/src/components/ui/FilterPill.tsx

@@ -0,0 +1,43 @@
+'use client'
+
+import type { ButtonHTMLAttributes, ReactNode } from 'react'
+
+/**
+ * Design-system filter pill (`.pill` / `.pill.act`): bordered card-surface
+ * chip that fills with the accent color when active. Used for status / role /
+ * category filter rows above list views.
+ */
+export interface FilterPillProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {
+  active?: boolean
+  /** Optional trailing count rendered in tabular numerals. */
+  count?: number
+  children: ReactNode
+}
+
+export function FilterPill({
+  active = false,
+  count,
+  className,
+  children,
+  ...rest
+}: FilterPillProps) {
+  return (
+    <button
+      type="button"
+      aria-pressed={active}
+      className={`inline-flex items-center gap-1.5 rounded-[7px] border px-3 py-1.5 text-[12.5px] font-medium transition-colors duration-[var(--motion-fast)] focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none ${
+        active
+          ? 'border-[var(--acc)] bg-[var(--acc)] text-white'
+          : 'border-[var(--bdr)] bg-[var(--card)] text-[var(--sub)] hover:border-[var(--acc-m)] hover:text-[var(--acc)]'
+      } ${className ?? ''}`}
+      {...rest}
+    >
+      {children}
+      {count !== undefined && (
+        <span className={`tabular-nums ${active ? 'text-white/80' : 'text-[var(--muted)]'}`}>
+          {count}
+        </span>
+      )}
+    </button>
+  )
+}

package/src/components/ui/StatPill.tsx

@@ -0,0 +1,37 @@
+import type { HTMLAttributes, ReactNode } from 'react'
+
+/**
+ * Design-system stat pill (`.stat-pill`): a compact card-surface chip with a
+ * bold count and a muted label, used in page headers to summarize list
+ * contents (e.g. "12 Total · 8 Active · 4 Inactive").
+ */
+export interface StatPillProps extends HTMLAttributes<HTMLSpanElement> {
+  /** The count/value, rendered bold in `--txt` (override color via valueClassName). */
+  value: ReactNode
+  /** Muted label shown after the value. */
+  label: ReactNode
+  /** Optional leading icon. */
+  icon?: ReactNode
+  /** Extra classes for the value (e.g. `text-[var(--suc)]` for an Active count). */
+  valueClassName?: string
+}
+
+export function StatPill({
+  value,
+  label,
+  icon,
+  valueClassName,
+  className,
+  ...rest
+}: StatPillProps) {
+  return (
+    <span
+      className={`inline-flex items-center gap-[5px] rounded-[6px] border border-[var(--bdr)] bg-[var(--card)] px-2.5 py-1 text-[length:var(--fs-sub)] text-[var(--sub)] ${className ?? ''}`}
+      {...rest}
+    >
+      {icon}
+      <b className={`font-semibold text-[var(--txt)] ${valueClassName ?? ''}`}>{value}</b>
+      {label}
+    </span>
+  )
+}

package/src/components/ui/StatusBadge.tsx

@@ -0,0 +1,66 @@
+import type { HTMLAttributes, ReactNode } from 'react'
+import { cv, type VariantProps } from '../../lib/cv.js'
+
+/**
+ * Canonical status chip from the design system (`.status` + `.status-dot`):
+ * a rectangular 5px-radius chip with a 5px dot, 11.5px medium text, and
+ * tint backgrounds per tone. This is the single source of truth for
+ * document / entity statuses across Posts, Pages, Forms, SEO, and tables —
+ * do not roll per-view status pills.
+ */
+const statusBadge = cv(
+  'inline-flex items-center gap-[5px] rounded-[5px] px-[9px] py-[3px] text-[length:var(--fs-hint)] font-medium whitespace-nowrap',
+  {
+    variants: {
+      tone: {
+        /** Published / Active — success tint (`.s-pub`). */
+        success: 'bg-[var(--suc-l)] text-[var(--suc)]',
+        /** Scheduled / Pending — warning tint (`.s-sch`). */
+        warning: 'bg-[var(--warn-l)] text-[var(--warn)]',
+        /** Errors / failing states. */
+        danger: 'bg-[var(--err-l)] text-[var(--err)]',
+        /** Informational states. */
+        info: 'bg-[var(--info-l)] text-[var(--info)]',
+        /** Draft — page background + border (`.s-dft`). */
+        neutral: 'border border-[var(--bdr)] bg-[var(--bg)] text-[var(--sub)]',
+        /** Archived — dimmest treatment (`.s-arc`). */
+        muted: 'border border-[var(--bdr)] bg-[var(--bg)] text-[var(--muted)]',
+      },
+    },
+    defaultVariants: { tone: 'neutral' },
+  },
+)
+
+const DOT_CLASS: Record<NonNullable<StatusBadgeVariants['tone']>, string> = {
+  success: 'bg-[var(--suc)]',
+  warning: 'bg-[var(--warn)]',
+  danger: 'bg-[var(--err)]',
+  info: 'bg-[var(--info)]',
+  neutral: 'bg-[var(--muted)]',
+  muted: 'bg-[var(--muted)]',
+}
+
+export type StatusBadgeVariants = VariantProps<typeof statusBadge>
+export type StatusBadgeTone = NonNullable<StatusBadgeVariants['tone']>
+
+export interface StatusBadgeProps extends HTMLAttributes<HTMLSpanElement>, StatusBadgeVariants {
+  /** Hide the leading dot (rare — e.g. numeric chips). */
+  dot?: boolean
+  children: ReactNode
+}
+
+export function StatusBadge({ tone, dot = true, className, children, ...rest }: StatusBadgeProps) {
+  return (
+    <span className={statusBadge({ tone, class: className })} {...rest}>
+      {dot && (
+        <span
+          aria-hidden
+          className={`h-[5px] w-[5px] shrink-0 rounded-full ${DOT_CLASS[tone ?? 'neutral']}`}
+        />
+      )}
+      {children}
+    </span>
+  )
+}
+
+export { statusBadge as statusBadgeVariants }

package/src/components/ui/index.ts

@@ -36,6 +36,12 @@ export { SearchInput } from './SearchInput.js'
 export type { SearchInputProps } from './SearchInput.js'
 export { Toggle, toggleTrackVariants, toggleThumbVariants } from './Toggle.js'
 export type { ToggleProps, ToggleVariants } from './Toggle.js'
+export { StatusBadge, statusBadgeVariants } from './StatusBadge.js'
+export type { StatusBadgeProps, StatusBadgeVariants, StatusBadgeTone } from './StatusBadge.js'
+export { FilterPill } from './FilterPill.js'
+export type { FilterPillProps } from './FilterPill.js'
+export { StatPill } from './StatPill.js'
+export type { StatPillProps } from './StatPill.js'
 export { formControlBase, formControlState } from './form-control.js'
 export { CommandPalette } from './CommandPalette.js'
 export type { CommandPaletteProps } from './CommandPalette.js'

package/src/fields/PropInput.tsx

@@ -38,6 +38,7 @@ import {
   safeJsonStringify,
   switchUnionVariant,
 } from './component-block-helpers.js'
+import { Toggle } from '../components/ui/Toggle.js'
 
 export { defaultForType }
 
@@ -249,21 +250,11 @@ function BooleanInput({
   return (
     <div className="flex items-center justify-between text-sm">
       <span>{label}</span>
-      <button
-        type="button"
-        role="switch"
-        aria-checked={boolVal}
-        onClick={() => onChange(!boolVal)}
-        className={`relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors ${
-          boolVal ? 'bg-[var(--primary)]' : 'bg-[var(--muted)]'
-        }`}
-      >
-        <span
-          className={`bg-card pointer-events-none inline-block h-5 w-5 rounded-full shadow-sm ring-0 transition-transform ${
-            boolVal ? 'translate-x-5' : 'translate-x-0'
-          }`}
-        />
-      </button>
+      <Toggle
+        checked={boolVal}
+        onCheckedChange={(v) => onChange(v)}
+        aria-label={typeof label === 'string' ? label : undefined}
+      />
     </div>
   )
 }

package/src/fields/ToggleField.tsx

@@ -1,5 +1,7 @@
 'use client'
 
+import { Toggle } from '../components/ui/Toggle.js'
+
 export interface ToggleFieldProps {
   label: string
   value?: boolean
@@ -14,21 +16,7 @@ export function ToggleField({ label, value = false, onChange, helpText }: Toggle
         <span className="text-sm font-medium">{label}</span>
         {helpText && <p className="text-xs text-[var(--muted-foreground)]">{helpText}</p>}
       </div>
-      <button
-        type="button"
-        role="switch"
-        aria-checked={value}
-        onClick={() => onChange(!value)}
-        className={`relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors ${
-          value ? 'bg-[var(--primary)]' : 'bg-[var(--muted)]'
-        }`}
-      >
-        <span
-          className={`bg-card pointer-events-none inline-block h-5 w-5 rounded-full shadow-sm ring-0 transition-transform ${
-            value ? 'translate-x-5' : 'translate-x-0'
-          }`}
-        />
-      </button>
+      <Toggle checked={value} onCheckedChange={onChange} aria-label={label} />
     </div>
   )
 }

package/src/layout/primitives/PageContainer.tsx

@@ -78,11 +78,7 @@ export function PageContainer({
           <header className="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
             {(title || description) && (
               <div className="min-w-0">
-                {title && (
-                  <h1 className="text-foreground truncate text-2xl font-medium tracking-tight">
-                    {title}
-                  </h1>
-                )}
+                {title && <h1 className="text-foreground truncate">{title}</h1>}
                 {description && <p className="text-muted-foreground mt-1 text-sm">{description}</p>}
               </div>
             )}

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">