@prenta/admin 2.6.0 → 2.7.0

package/src/views/settings/components.tsx

@@ -1,9 +1,16 @@
 'use client'
 
 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 { AlertTriangle, Lock } from 'lucide-react'
+import { useEffect, useId, type ReactNode } from 'react'
+import { toast } from 'sonner'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '../../components/ui/Card.js'
 import { Toggle } from '../../components/ui/Toggle.js'
 import { adminPortalContainer } from '../../lib/portal-container.js'
 import type { SettingsSourceMetadata, ValidationIssue } from './useGeneralSettings.js'
@@ -14,8 +21,8 @@ import type { SettingsSourceMetadata, ValidationIssue } from './useGeneralSettin
  * slot. This is the single source of truth for the Settings design language —
  * every tab's sections render through it so spacing, padding, typography, and
  * the title/description rhythm stay identical across General, Appearance,
- * Security, SEO, AI, and beyond. Match the Appearance tab exactly: `p-6`,
- * `text-lg` medium title, `text-sm` muted description.
+ * Security, SEO, AI, and beyond. Chrome comes from the shared `Card`
+ * primitives (kit `.ap-card` / `.ap-ch`).
  */
 export function SettingsCard({
   title,
@@ -46,14 +53,11 @@ export function SettingsCard({
       role="region"
       className={className}
     >
-      <CardHeader className="flex items-start justify-between gap-3">
-        <div className="min-w-0">
-          <Heading
-            id={headingId}
-            className="text-[length:var(--fs-card)] font-semibold text-[var(--txt)]"
-          >
+      <CardHeader>
+        <div className="min-w-0 flex-1">
+          <CardTitle as={Heading} id={headingId}>
             {title}
-          </Heading>
+          </CardTitle>
           {description && <CardDescription>{description}</CardDescription>}
         </div>
         {actions && <div className="flex shrink-0 items-center gap-2">{actions}</div>}
@@ -212,7 +216,7 @@ export function SettingsValidationSummary({ issues }: { issues: ValidationIssue[
       className={`flex items-start gap-3 rounded-lg border p-4 text-sm ${
         isError
           ? 'border-destructive/30 bg-destructive/10 text-destructive'
-          : 'border-warning/30 bg-warning/10 text-warning'
+          : 'border-warning/30 bg-warn-l text-warning'
       }`}
     >
       <AlertTriangle size={16} className="mt-0.5 shrink-0" aria-hidden="true" />
@@ -225,54 +229,14 @@ export function SettingsValidationSummary({ issues }: { issues: ValidationIssue[
   )
 }
 
-/** Sticky footer with Reset + Save, gated on dirty state. */
-export function SettingsSaveBar({
-  dirty,
-  canEdit,
-  hasErrors,
-  saveState,
-  onSave,
-  onReset,
-}: {
-  dirty: boolean
-  canEdit: boolean
-  hasErrors: boolean
-  saveState: 'idle' | 'saving' | 'success' | 'error'
-  onSave: () => void
-  onReset: () => void
-}) {
-  const saving = saveState === 'saving'
-  return (
-    <div className="border-border bg-background/80 sticky bottom-0 z-10 flex items-center justify-end gap-4 border-t py-3 backdrop-blur">
-      {saveState === 'success' && !dirty && (
-        <span className="text-success flex items-center gap-1.5 text-sm" aria-live="polite">
-          <Check size={16} aria-hidden="true" /> Saved
-        </span>
-      )}
-      {dirty && !saving && (
-        <span className="text-muted-foreground text-sm" aria-live="polite">
-          Unsaved changes
-        </span>
-      )}
-      <button
-        type="button"
-        onClick={onReset}
-        disabled={!dirty || saving}
-        className="text-muted-foreground hover:text-foreground rounded-md px-3 py-2 text-base transition-colors disabled:cursor-not-allowed disabled:opacity-40"
-      >
-        Reset
-      </button>
-      <button
-        type="button"
-        onClick={onSave}
-        disabled={!canEdit || !dirty || hasErrors || saving}
-        className="bg-brand text-brand-foreground focus-visible:ring-ring inline-flex items-center gap-2 rounded-md px-5 py-2 text-base font-medium transition-opacity hover:opacity-90 focus-visible:ring-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
-      >
-        {saving && <Loader2 size={16} className="animate-spin" aria-hidden="true" />}
-        {saving ? 'Saving…' : 'Save Changes'}
-      </button>
-    </div>
-  )
+/**
+ * Confirms a finished save. The tabs' `UnsavedBar` renders only while the form
+ * is dirty, so it is already gone when the save lands; the toast says it worked.
+ */
+export function useSavedToast(saveState: 'idle' | 'saving' | 'success' | 'error') {
+  useEffect(() => {
+    if (saveState === 'success') toast.success('Saved')
+  }, [saveState])
 }
 
 /** Confirmation dialog for dangerous indexing changes. */
@@ -297,7 +261,7 @@ export function ConfirmDangerousSettingDialog({
         <Dialog.Overlay className="fixed inset-0 z-50 bg-black/50" />
         <Dialog.Content className="bg-card text-card-foreground fixed top-1/2 left-1/2 z-50 w-full max-w-md -translate-x-1/2 -translate-y-1/2 rounded-lg p-6 shadow-lg">
           <div className="mb-3 flex items-center gap-2">
-            <span className="bg-warning/15 text-warning flex h-9 w-9 items-center justify-center rounded-full">
+            <span className="bg-warn-l text-warning flex h-9 w-9 items-center justify-center rounded-full">
               <AlertTriangle size={20} aria-hidden="true" />
             </span>
             <Dialog.Title className="text-foreground text-lg font-medium">{title}</Dialog.Title>

package/src/views/settings/useAppearanceSettings.ts

@@ -13,6 +13,7 @@ import {
   type BrandAssetRole,
   type BrandSettings,
   type ColorMode,
+  type LightBase,
   type LogoShape,
   type ResolvedAdminBrand,
   type PublicTheme,
@@ -20,8 +21,14 @@ import {
   type SidebarDensity,
 } from '@prenta/core/appearance'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { toast } from 'sonner'
 
-import { useTheme } from '../../components/ThemeProvider.js'
+import {
+  useTheme,
+  usableAccentOverride,
+  type AppearanceSnapshot,
+  type ThemeBase,
+} from '../../components/ThemeProvider.js'
 import {
   adminBrandToCache,
   appearanceApiToSnapshot,
@@ -38,6 +45,7 @@ type SaveState = 'idle' | 'saving' | 'success' | 'error'
 /** Theme + typography + motion form (the `appearance` settings blob). */
 interface AppearanceForm {
   colorMode: ColorMode
+  lightBase: LightBase
   accent: string
   density: SidebarDensity
   font: string
@@ -136,6 +144,10 @@ export interface UseAppearanceSettings {
   showAdvanced: boolean
   setShowAdvanced: (v: boolean) => void
   setColorMode: (v: ColorMode) => void
+  /** Pick Porcelain, Linen or Graphite. Turns "Match operating system" off. */
+  setBase: (v: ThemeBase) => void
+  /** Follow the OS between the light base and Graphite. */
+  setMatchSystem: (on: boolean) => void
   setAccent: (v: string) => void
   setDensity: (v: SidebarDensity) => void
   setFont: (v: string) => void
@@ -163,9 +175,10 @@ const EMPTY_PUBLIC_THEME: Required<PublicTheme> = {
 
 const DEFAULT_FORM: AppearanceForm = {
   colorMode: 'system',
-  accent: 'purple',
+  lightBase: 'porcelain',
+  accent: 'cobalt',
   density: 'default',
-  font: 'System UI',
+  font: 'DM Sans',
   reduceMotion: false,
   publicTheme: EMPTY_PUBLIC_THEME,
 }
@@ -176,6 +189,24 @@ function snapshot(a: AppearanceForm, b: BrandForm): string {
   return JSON.stringify({ a, b })
 }
 
+/** What the ThemeProvider shows for a form state. */
+function themeSnapshot(
+  a: AppearanceForm,
+  b: BrandForm,
+  assetMap: Record<string, AssetPreview>,
+  siteTitle: string | null,
+): AppearanceSnapshot {
+  return {
+    theme: a.colorMode,
+    lightBase: a.lightBase,
+    accent: a.accent,
+    density: a.density,
+    font: a.font,
+    reduceMotion: a.reduceMotion,
+    adminBrand: adminBrandToCache(b as BrandSettings, assetMap, siteTitle),
+  }
+}
+
 /** Read an uploaded image's shape client-side (raster via Image, SVG via XML). */
 async function detectShape(file: File): Promise<LogoShape> {
   if (file.type === 'image/svg+xml') {
@@ -216,7 +247,7 @@ export function useAppearanceSettings(
   canEdit: boolean,
   config?: Record<string, unknown>,
 ): UseAppearanceSettings {
-  const { applyAppearance, setAdminBrand } = useTheme()
+  const { applyAppearance, setAdminBrand, resolvedTheme } = useTheme()
 
   const [loading, setLoading] = useState(true)
   const [loadError, setLoadError] = useState<string | null>(null)
@@ -229,6 +260,13 @@ export function useAppearanceSettings(
   const [showAdvanced, setShowAdvanced] = useState(false)
 
   const baselineRef = useRef<string>(snapshot(DEFAULT_FORM, DEFAULT_BRAND_FORM))
+  // `load` must run on mount and on an explicit reload only. Reading the
+  // provider's function through a ref keeps a new identity from refetching
+  // and overwriting unsaved edits.
+  const applyRef = useRef(applyAppearance)
+  useEffect(() => {
+    applyRef.current = applyAppearance
+  }, [applyAppearance])
   const siteTitleRef = useRef<string | null>(null)
 
   // Config-managed source detection (admin branding configured in prenta.config.ts).
@@ -237,7 +275,9 @@ export function useAppearanceSettings(
     | undefined
   const sources = useMemo<Record<string, SettingsSourceMetadata>>(() => {
     const out: Record<string, SettingsSourceMetadata> = {}
-    if (branding?.primaryColor) {
+    // Only a config color the ThemeProvider can actually apply locks the
+    // picker; otherwise it is ignored there (with a warning) and stays editable.
+    if (usableAccentOverride(branding?.primaryColor)) {
       out.accent = {
         source: 'config',
         editable: false,
@@ -256,14 +296,7 @@ export function useAppearanceSettings(
 
   const pushLive = useCallback(
     (a: AppearanceForm, b: BrandForm, assetMap: Record<string, AssetPreview>) => {
-      applyAppearance({
-        theme: a.colorMode,
-        accent: a.accent,
-        density: a.density,
-        font: a.font,
-        reduceMotion: a.reduceMotion,
-        adminBrand: adminBrandToCache(b as BrandSettings, assetMap, siteTitleRef.current),
-      })
+      applyAppearance(themeSnapshot(a, b, assetMap, siteTitleRef.current))
     },
     [applyAppearance],
   )
@@ -281,6 +314,7 @@ export function useAppearanceSettings(
     const storedTheme = d.appearance.publicTheme
     const nextAppearance: AppearanceForm = {
       colorMode: d.appearance.adminColorModeDefault,
+      lightBase: d.appearance.adminLightBase === 'linen' ? 'linen' : 'porcelain',
       accent: d.appearance.adminAccentColor,
       density: d.appearance.sidebarDensity,
       font: d.appearance.contentFont,
@@ -295,10 +329,10 @@ export function useAppearanceSettings(
     setAssets(nextAssets)
     if (nextBrand.adminLogoMarkAssetId || nextBrand.publicLogoMarkAssetId) setShowAdvanced(true)
     baselineRef.current = snapshot(nextAppearance, nextBrand)
-    applyAppearance(appearanceApiToSnapshot(d))
+    applyRef.current(appearanceApiToSnapshot(d))
     setSaveState('idle')
     setLoading(false)
-  }, [applyAppearance])
+  }, [])
 
   useEffect(() => {
     void load()
@@ -320,6 +354,23 @@ export function useAppearanceSettings(
     (v: ColorMode) => update({ ...appearance, colorMode: v }, brand, assets),
     [appearance, brand, assets, update],
   )
+  const setBase = useCallback(
+    (v: ThemeBase) =>
+      update(
+        v === 'graphite'
+          ? { ...appearance, colorMode: 'dark' }
+          : { ...appearance, colorMode: 'light', lightBase: v },
+        brand,
+        assets,
+      ),
+    [appearance, brand, assets, update],
+  )
+  // Turning it off keeps whatever is on screen, so nothing jumps.
+  const setMatchSystem = useCallback(
+    (on: boolean) =>
+      update({ ...appearance, colorMode: on ? 'system' : resolvedTheme }, brand, assets),
+    [appearance, brand, assets, update, resolvedTheme],
+  )
   const setAccent = useCallback(
     (v: string) => update({ ...appearance, accent: v }, brand, assets),
     [appearance, brand, assets, update],
@@ -498,29 +549,65 @@ export function useAppearanceSettings(
     }
   }, [brand, assets])
 
-  const dirty = useMemo(
-    () => snapshot(appearance, brand) !== baselineRef.current,
-    [appearance, brand],
-  )
+  // Not memoized on [appearance, brand]: a save moves the baseline (a ref)
+  // without changing either, and the dirty-only save bar must hide then.
+  const dirty = snapshot(appearance, brand) !== baselineRef.current
+
+  // Unsaved picks are only a live preview. Leaving the tab (Radix unmounts it)
+  // or Settings without saving puts the saved look back, cache included.
+  // Leaving while a save is in flight shows what is being saved instead; if
+  // that save then fails, the look goes back to the last saved snapshot.
+  const latestRef = useRef({ appearance, brand, assets })
+  useEffect(() => {
+    latestRef.current = { appearance, brand, assets }
+  }, [appearance, brand, assets])
+  const pendingSaveRef = useRef<string | null>(null)
+  const mountedRef = useRef(true)
+  const applySaved = useCallback((saved: string, assetMap: Record<string, AssetPreview>) => {
+    const { a, b } = JSON.parse(saved) as { a: AppearanceForm; b: BrandForm }
+    applyRef.current(themeSnapshot(a, b, assetMap, siteTitleRef.current))
+  }, [])
+  useEffect(() => {
+    mountedRef.current = true
+    return () => {
+      mountedRef.current = false
+      const { appearance: a, brand: b, assets: assetMap } = latestRef.current
+      const target = pendingSaveRef.current ?? baselineRef.current
+      if (snapshot(a, b) === target) return
+      applySaved(target, assetMap)
+    }
+  }, [applySaved])
 
   const save = useCallback(async () => {
     if (!canEdit) return
     if (issues.some((i) => i.severity === 'error')) return
     setSaveState('saving')
     setSaveError(null)
+    const saving = snapshot(appearance, brand)
+    pendingSaveRef.current = saving
+    const fail = (message: string) => {
+      pendingSaveRef.current = null
+      setSaveState('error')
+      setSaveError(message)
+      if (mountedRef.current) return
+      // The tab is gone, so nothing shows the error and the look shows the
+      // failed picks: put the saved look back and say so.
+      applySaved(baselineRef.current, assets)
+      toast.error(`Admin appearance wasn't saved: ${message}`)
+    }
 
     // Read-modify-write the settings global so we never clobber sibling keys
     // (siteTitle, SEO defaults, AI flags, …) written by other settings tabs.
     const current = await cmsApi<Record<string, unknown>>('/globals/settings')
     if (current.error) {
-      setSaveState('error')
-      setSaveError(current.error)
+      fail(current.error)
       return
     }
     const now = new Date().toISOString()
     const brandPayload: BrandSettings = { ...(brand as BrandSettings), updatedAt: now }
     const appearancePayload = {
       adminColorModeDefault: appearance.colorMode,
+      adminLightBase: appearance.lightBase,
       adminAccentColor: appearance.accent,
       sidebarDensity: appearance.density,
       contentFont: appearance.font,
@@ -535,11 +622,11 @@ export function useAppearanceSettings(
     }
     const res = await cmsApi('/globals/settings', { method: 'PUT', body: JSON.stringify(merged) })
     if (res.error) {
-      setSaveState('error')
-      setSaveError(res.error)
+      fail(res.error)
       return
     }
-    baselineRef.current = snapshot(appearance, brand)
+    baselineRef.current = saving
+    pendingSaveRef.current = null
     setAdminBrand(adminBrandToCache(brand as BrandSettings, assets, siteTitleRef.current))
     // Notify live surfaces (browser-tab favicon) to refresh from the saved
     // brand without a full reload.
@@ -547,7 +634,9 @@ export function useAppearanceSettings(
       window.dispatchEvent(new CustomEvent(BRAND_UPDATED_EVENT))
     }
     setSaveState('success')
-  }, [canEdit, issues, appearance, brand, assets, setAdminBrand])
+    // The tab's own "Saved" toast went with it.
+    if (!mountedRef.current) toast.success('Saved')
+  }, [canEdit, issues, appearance, brand, assets, setAdminBrand, applySaved])
 
   const reset = useCallback(() => {
     const base = JSON.parse(baselineRef.current) as { a: AppearanceForm; b: BrandForm }
@@ -570,6 +659,8 @@ export function useAppearanceSettings(
     showAdvanced,
     setShowAdvanced,
     setColorMode,
+    setBase,
+    setMatchSystem,
     setAccent,
     setDensity,
     setFont,

package/src/views/users/UserDetailDrawer.tsx

@@ -479,7 +479,7 @@ export function UserDetailDrawer({ userId, open, onOpenChange, onChanged }: User
                   </span>
                 )}
                 {u.externalDomain && (
-                  <span className="bg-warning/10 text-warning rounded px-1.5 py-0.5 text-xs">
+                  <span className="bg-warn-l text-warning rounded px-1.5 py-0.5 text-xs">
                     External domain
                   </span>
                 )}

package/dist/components/ui/StatPill.d.ts

@@ -1,18 +0,0 @@
-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 declare function StatPill({ value, label, icon, valueClassName, className, ...rest }: StatPillProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=StatPill.d.ts.map

package/dist/components/ui/StatPill.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"StatPill.d.ts","sourceRoot":"","sources":["../../../src/components/ui/StatPill.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtD;;;;GAIG;AACH,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,eAAe,CAAC;IACpE,qFAAqF;IACrF,KAAK,EAAE,SAAS,CAAA;IAChB,yCAAyC;IACzC,KAAK,EAAE,SAAS,CAAA;IAChB,6BAA6B;IAC7B,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,kFAAkF;IAClF,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB;AAED,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,KAAK,EACL,IAAI,EACJ,cAAc,EACd,SAAS,EACT,GAAG,IAAI,EACR,EAAE,aAAa,2CAWf"}

package/dist/components/ui/StatPill.js

@@ -1,5 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export function StatPill({ value, label, icon, valueClassName, className, ...rest }) {
-    return (_jsxs("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, children: [icon, _jsx("b", { className: `font-semibold text-[var(--txt)] ${valueClassName ?? ''}`, children: value }), label] }));
-}
-//# sourceMappingURL=StatPill.js.map

package/dist/components/ui/StatPill.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"StatPill.js","sourceRoot":"","sources":["../../../src/components/ui/StatPill.tsx"],"names":[],"mappings":";AAkBA,MAAM,UAAU,QAAQ,CAAC,EACvB,KAAK,EACL,KAAK,EACL,IAAI,EACJ,cAAc,EACd,SAAS,EACT,GAAG,IAAI,EACO;IACd,OAAO,CACL,gBACE,SAAS,EAAE,0JAA0J,SAAS,IAAI,EAAE,EAAE,KAClL,IAAI,aAEP,IAAI,EACL,YAAG,SAAS,EAAE,mCAAmC,cAAc,IAAI,EAAE,EAAE,YAAG,KAAK,GAAK,EACnF,KAAK,IACD,CACR,CAAA;AACH,CAAC"}

package/src/components/ui/StatPill.tsx

@@ -1,37 +0,0 @@
-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>
-  )
-}