@actuate-media/cms-admin 0.63.2 → 0.65.0

package/src/components/ui/SearchInput.tsx

@@ -1,5 +1,7 @@
 'use client'
 
+import { inputVariants } from './Input.js'
+
 export interface SearchInputProps {
   value: string
   onChange: (value: string) => void
@@ -10,11 +12,12 @@ export function SearchInput({ value, onChange, placeholder = 'Search...' }: Sear
   return (
     <div className="relative flex-1">
       <svg
-        className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-[var(--muted-foreground)]"
+        className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-[var(--muted)]"
         fill="none"
         viewBox="0 0 24 24"
         stroke="currentColor"
         strokeWidth={2}
+        aria-hidden
       >
         <path
           strokeLinecap="round"
@@ -27,12 +30,13 @@ export function SearchInput({ value, onChange, placeholder = 'Search...' }: Sear
         value={value}
         onChange={(e) => onChange(e.target.value)}
         placeholder={placeholder}
-        className="w-full rounded-md border border-[var(--border)] bg-[var(--input-background)] py-2 pr-8 pl-9 text-sm outline-none focus:ring-2 focus:ring-[var(--ring)]"
+        className={inputVariants({ class: 'py-2 pr-8 pl-9' })}
       />
       {value && (
         <button
+          type="button"
           onClick={() => onChange('')}
-          className="absolute top-1/2 right-2 -translate-y-1/2 rounded p-0.5 text-[var(--muted-foreground)] hover:text-[var(--foreground)]"
+          className="absolute top-1/2 right-2 -translate-y-1/2 rounded p-0.5 text-[var(--muted)] hover:text-[var(--txt)]"
           aria-label="Clear search"
         >
           <svg
@@ -41,12 +45,13 @@ export function SearchInput({ value, onChange, placeholder = 'Search...' }: Sear
             viewBox="0 0 24 24"
             stroke="currentColor"
             strokeWidth={2}
+            aria-hidden
           >
             <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
           </svg>
         </button>
       )}
-      <kbd className="pointer-events-none absolute top-1/2 right-8 hidden -translate-y-1/2 rounded border border-[var(--border)] px-1.5 py-0.5 text-[10px] text-[var(--muted-foreground)] sm:inline-block">
+      <kbd className="pointer-events-none absolute top-1/2 right-8 hidden -translate-y-1/2 rounded border border-[var(--bdr)] px-1.5 py-0.5 text-[10px] text-[var(--muted)] sm:inline-block">
         ⌘K
       </kbd>
     </div>

package/src/components/ui/Select.tsx

@@ -1,25 +1,22 @@
 import { forwardRef, type SelectHTMLAttributes, type ReactNode } from 'react'
 import { cv, type VariantProps } from '../../lib/cv.js'
+import { formControlBase, formControlState } from './form-control.js'
 
-const select = cv(
-  // Shares geometry with Input so they line up in forms.
-  'focus-visible:ring-offset-background flex w-full appearance-none rounded-[var(--radius)] border bg-[var(--background)] pr-8 text-[var(--foreground)] focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
-  {
-    variants: {
-      size: {
-        sm: 'h-8 pr-7 pl-2.5 text-xs',
-        md: 'h-9 pr-8 pl-3 text-sm',
-        lg: 'h-10 pr-9 pl-4 text-base',
-      },
-      state: {
-        default: 'border-[var(--border)]',
-        invalid: 'border-[var(--destructive)] focus-visible:ring-[var(--destructive)]',
-        valid: 'border-emerald-500 focus-visible:ring-emerald-500',
-      },
+const select = cv(`${formControlBase} appearance-none pr-8`, {
+  variants: {
+    size: {
+      sm: 'py-1.5 pr-7 pl-3 text-[length:var(--fs-sub)]',
+      md: '',
+      lg: 'py-2.5 pr-9 pl-3',
+    },
+    state: {
+      default: formControlState.default,
+      invalid: formControlState.invalid,
+      valid: formControlState.valid,
     },
-    defaultVariants: { size: 'md', state: 'default' },
   },
-)
+  defaultVariants: { size: 'md', state: 'default' },
+})
 
 export type SelectVariants = VariantProps<typeof select>
 
@@ -39,7 +36,7 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select
       </select>
       <svg
         aria-hidden
-        className="pointer-events-none absolute top-1/2 right-2 h-4 w-4 -translate-y-1/2 text-[var(--muted-foreground)]"
+        className="pointer-events-none absolute top-1/2 right-2 h-4 w-4 -translate-y-1/2 text-[var(--muted)]"
         viewBox="0 0 20 20"
         fill="currentColor"
       >

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/Toggle.tsx

@@ -0,0 +1,85 @@
+'use client'
+
+import * as Switch from '@radix-ui/react-switch'
+import { cv, type VariantProps } from '../../lib/cv.js'
+
+const toggleTrack = cv(
+  'relative inline-flex shrink-0 cursor-pointer rounded-[var(--r-pill)] transition-colors duration-[var(--motion-base)] focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        /** Design system default — accent when on. */
+        accent: 'bg-[var(--bdr)] data-[state=checked]:bg-[var(--acc)]',
+        /** Semantic enable/disable — success green when on (tables, script tags). */
+        enabled: 'bg-[var(--bdr)] data-[state=checked]:bg-[var(--suc)]',
+      },
+      size: {
+        /** Matches `.tog-track` in the design system handoff (38×21). */
+        md: 'h-[21px] w-[38px]',
+      },
+    },
+    defaultVariants: {
+      variant: 'accent',
+      size: 'md',
+    },
+  },
+)
+
+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)]',
+  {
+    variants: {
+      size: {
+        md: 'h-4 w-4 translate-x-0.5 data-[state=checked]:translate-x-[17.5px]',
+      },
+    },
+    defaultVariants: {
+      size: 'md',
+    },
+  },
+)
+
+export type ToggleVariants = VariantProps<typeof toggleTrack>
+
+export interface ToggleProps extends ToggleVariants {
+  checked: boolean
+  onCheckedChange: (checked: boolean) => void
+  disabled?: boolean
+  id?: string
+  'aria-label'?: string
+  'aria-labelledby'?: string
+  'aria-describedby'?: string
+}
+
+/**
+ * Design-system toggle (`.tog-track` / `.tog-thumb`). Use `variant="enabled"`
+ * for on/off tables where green communicates active state.
+ */
+export function Toggle({
+  checked,
+  onCheckedChange,
+  disabled,
+  variant,
+  size,
+  id,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledBy,
+  'aria-describedby': ariaDescribedBy,
+}: ToggleProps) {
+  return (
+    <Switch.Root
+      id={id}
+      checked={checked}
+      onCheckedChange={onCheckedChange}
+      disabled={disabled}
+      aria-label={ariaLabel}
+      aria-labelledby={ariaLabelledBy}
+      aria-describedby={ariaDescribedBy}
+      className={toggleTrack({ variant, size })}
+    >
+      <Switch.Thumb className={toggleThumb({ size })} />
+    </Switch.Root>
+  )
+}
+
+export { toggleTrack as toggleTrackVariants, toggleThumb as toggleThumbVariants }

package/src/components/ui/form-control.ts

@@ -0,0 +1,12 @@
+/**
+ * Shared form-control surface styles (`.inp` in the design system handoff).
+ * Imported by Input and Select so geometry stays aligned.
+ */
+export const formControlBase =
+  'w-full rounded-[var(--r-control)] border border-[var(--bdr)] bg-[var(--bg)] px-3 py-[9px] text-[length:var(--fs-body)] text-[var(--txt)] outline-none transition-[border-color] duration-150 placeholder:text-[var(--muted)] focus:border-[var(--acc-m)] focus-visible:border-[var(--acc-m)] disabled:cursor-not-allowed disabled:opacity-50'
+
+export const formControlState = {
+  default: '',
+  invalid: 'border-[var(--err)] focus:border-[var(--err)] focus-visible:border-[var(--err)]',
+  valid: 'border-[var(--suc)] focus:border-[var(--suc)] focus-visible:border-[var(--suc)]',
+} as const

package/src/components/ui/index.ts

@@ -34,5 +34,14 @@ export { Pagination } from './Pagination.js'
 export type { PaginationProps } from './Pagination.js'
 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/Header.tsx

@@ -8,6 +8,7 @@ import { CommandPalette } from '../components/CommandPalette.js'
 import { NotificationBell } from '../components/NotificationBell.js'
 import { useTheme } from '../components/ThemeProvider.js'
 import { LocaleSwitcher } from '../components/LocaleSwitcher.js'
+import { inputVariants } from '../components/ui/Input.js'
 
 export interface HeaderProps {
   onToggleSidebar: () => void
@@ -51,7 +52,7 @@ export function Header({
 
   return (
     <>
-      <header className="border-border bg-background flex h-14 items-center gap-3 border-b px-4">
+      <header className="border-sidebar-border bg-sidebar flex h-[var(--tbh)] items-center gap-3 border-b px-4">
         <button
           onClick={onToggleSidebar}
           className="hover:bg-accent rounded-lg p-2 transition-colors md:hidden"
@@ -77,7 +78,10 @@ export function Header({
             onKeyDown={(e) => {
               if (e.key === 'Escape') (e.target as HTMLInputElement).blur()
             }}
-            className="border-border bg-input-background text-foreground placeholder:text-muted-foreground focus:ring-ring h-9 w-full max-w-md rounded-lg border py-1.5 pr-14 pl-9 text-sm focus:border-transparent focus:ring-2 focus:outline-none"
+            className={inputVariants({
+              class:
+                'h-9 w-full max-w-md py-1.5 pr-14 pl-9 focus-visible:ring-0 focus-visible:ring-offset-0',
+            })}
           />
           {/* Keyboard hint pill. Hidden on narrow widths to avoid overlap. */}
           <span

package/src/layout/Sidebar.tsx

@@ -253,13 +253,13 @@ export function Sidebar({
 
   return (
     <aside
-      className={`bg-sidebar border-sidebar-border flex h-full flex-col border-r transition-all duration-200 ${
-        collapsed ? 'w-20' : 'w-64'
+      className={`bg-sidebar border-sidebar-border flex h-full flex-col border-r transition-[width] duration-[var(--motion-layout)] ${
+        collapsed ? 'w-[var(--sbw-col)]' : 'w-[var(--sbw)]'
       }`}
     >
       {/* Brand header — no toggle button here anymore; it now lives in the footer. */}
       <div
-        className={`border-sidebar-border flex h-14 shrink-0 items-center border-b px-4 ${
+        className={`border-sidebar-border flex h-[var(--tbh)] shrink-0 items-center border-b px-4 ${
           collapsed ? 'justify-center' : ''
         }`}
       >

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/layout/primitives/tokens.ts

@@ -49,13 +49,20 @@ export const tokens = {
 
   radius: {
     none: 0,
-    sm: 2,
-    md: 6,
-    lg: 8,
+    sm: 6,
+    md: 8,
+    lg: 10,
     xl: 12,
-    full: 9999,
+    full: 99,
   } as const satisfies Record<RadiusToken, number>,
 
+  /** Layout dimensions from the design system (px). */
+  layout: {
+    sidebarWidth: 224,
+    sidebarWidthCollapsed: 60,
+    topbarHeight: 56,
+  } as const,
+
   // Breakpoints mirror Tailwind defaults so primitives can compose with
   // utility classes without surprises. Use `matchMedia(`(min-width: …`)` to
   // sync JS-driven layout decisions with these values.

package/src/styles/actuate-tokens.css

@@ -0,0 +1,97 @@
+/*
+ * ActuateCMS design tokens — scoped to the admin root.
+ * Source: design-system/tokens.json (v1.0).
+ * Appearance accent overrides set --acc / --primary at runtime.
+ */
+
+.actuate-admin {
+  /* Surfaces */
+  --bg: #f5f4fa;
+  --sb: #ffffff;
+  --card: #ffffff;
+  --bdr: #e8e6f2;
+
+  /* Text */
+  --txt: #1a1827;
+  --sub: #6b6878;
+  --muted: #b0adbe;
+
+  /* Accent */
+  --acc: #7c3aed;
+  --acc-l: #ede9fe;
+  --acc-m: #c4b5fd;
+
+  /* Semantic */
+  --suc: #059669;
+  --suc-l: #ecfdf5;
+  --warn: #d97706;
+  --warn-l: #fffbeb;
+  --err: #dc2626;
+  --err-l: #fef2f2;
+  --info: #0891b2;
+  --info-l: #e0f7fa;
+
+  /* AI */
+  --ai1: #7c3aed;
+  --ai2: #c026d3;
+  --ai-soft: linear-gradient(135deg, rgba(124, 58, 237, 0.09), rgba(192, 38, 211, 0.07));
+
+  /* Layout */
+  --sbw: 224px;
+  --sbw-col: 60px;
+  --tbh: 56px;
+  --r: 10px;
+  --r-control: 8px;
+  --r-sm: 6px;
+  --r-pill: 99px;
+
+  /* Elevation */
+  --shd: 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 4px rgba(0, 0, 0, 0.04);
+  --shd2: 0 4px 16px rgba(0, 0, 0, 0.1);
+
+  /* Typography */
+  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --font-mono: 'DM Mono', ui-monospace, 'SFMono-Regular', monospace;
+  --fs-page: 21px;
+  --fs-card: 14px;
+  --fs-body: 13px;
+  --fs-sub: 12px;
+  --fs-hint: 11.5px;
+  --fs-label: 10px;
+
+  /* Motion */
+  --motion-fast: 0.12s;
+  --motion-base: 0.18s;
+  --motion-layout: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.dark .actuate-admin,
+.actuate-admin.dark,
+.actuate-admin[data-theme='dark'] {
+  --bg: #0d0c18;
+  --sb: #141222;
+  --card: #1c1a2e;
+  --bdr: #2c2a42;
+
+  --txt: #eae8f5;
+  --sub: #8e8ba8;
+  --muted: #504e68;
+
+  --acc: #9d71f0;
+  --acc-l: #231950;
+  --acc-m: #5e3eaa;
+
+  --suc: #10b981;
+  --suc-l: #022c22;
+  --warn: #fbbf24;
+  --warn-l: #1a1000;
+  --err: #f87171;
+  --err-l: #200808;
+  --info: #38bdf8;
+  --info-l: #0a2838;
+
+  --ai-soft: linear-gradient(135deg, rgba(157, 113, 240, 0.16), rgba(192, 38, 211, 0.12));
+
+  --shd: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 4px rgba(0, 0, 0, 0.2);
+  --shd2: 0 4px 20px rgba(0, 0, 0, 0.45);
+}