@nextclaw/ui 0.14.2 → 0.14.3

package/src/shared/components/doc-browser/doc-browser-panel-parts.tsx

@@ -38,15 +38,15 @@ export function DocBrowserDocsToolbar({
   }
 
   return (
-    <div className="flex items-center gap-2 px-3.5 py-2 bg-white border-b border-gray-100 shrink-0">
+    <div className="flex items-center gap-2 border-b border-border/70 bg-card px-3.5 py-2 shrink-0">
       <form onSubmit={onSubmit} className="flex-1 relative">
-        <Search className="w-3.5 h-3.5 absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
+        <Search className="absolute left-3 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground/70" />
         <input
           type="text"
           value={urlInput}
           onChange={(e) => onUrlInputChange(e.target.value)}
           placeholder={t('docBrowserSearchPlaceholder')}
-          className="w-full h-8 pl-8 pr-3 rounded-lg bg-gray-50 border border-gray-200 text-xs text-gray-700 focus:outline-none focus:ring-1 focus:ring-primary/30 focus:border-primary/40 transition-colors placeholder:text-gray-400"
+          className="h-8 w-full rounded-lg border border-border bg-background pl-8 pr-3 text-xs text-foreground transition-colors placeholder:text-muted-foreground/55 focus:border-primary/40 focus:outline-none focus:ring-1 focus:ring-primary/30"
         />
       </form>
     </div>
@@ -91,7 +91,7 @@ export function DocBrowserExternalLink({ currentUrl, isDocsTab }: { currentUrl:
   }
 
   return (
-    <div className="flex items-center justify-between px-4 py-2 bg-gray-50 border-t border-gray-200 shrink-0">
+    <div className="flex items-center justify-between border-t border-border/70 bg-muted/55 px-4 py-2 shrink-0">
       <a
         href={currentUrl}
         target="_blank"

package/src/shared/components/doc-browser/doc-browser-tab-strip.tsx

@@ -111,16 +111,16 @@ export function DocBrowserTabStrip({
       tabs={compactTabs}
       actions={actions}
       className={cn(
-        "h-11 gap-2 px-2.5 bg-background border-[#f1e7d4] shrink-0 select-none",
+        "h-11 gap-2 border-border/70 bg-card px-2.5 shrink-0 select-none",
         isFullscreen && "h-[calc(env(safe-area-inset-top,0px)+2.75rem)] pt-[env(safe-area-inset-top,0px)]",
       )}
       scrollClassName="doc-browser-tab-scrollbar flex h-full items-center gap-1.5"
       tabsClassName="items-center gap-1.5"
       actionsClassName="h-full items-center gap-1"
-      actionButtonClassName="rounded-md p-1.5 hover:text-gray-700 disabled:opacity-60"
+      actionButtonClassName="rounded-md p-1.5 hover:text-foreground disabled:opacity-60"
       tabBaseClassName="group inline-flex min-w-0 items-center gap-1 h-7 px-1.5 rounded-lg text-xs border max-w-[220px] shrink-0 transition-colors"
-      activeTabClassName="bg-amber-50/80 border-amber-200 text-amber-900 shadow-[0_1px_2px_rgba(30,20,10,0.04)]"
-      inactiveTabClassName="bg-[#f9f8f5] border-[#eee3d1] text-[#78644d] hover:bg-[#fff7ea] hover:text-[#2f2212]"
+      activeTabClassName="border-primary/30 bg-primary-50/70 text-foreground shadow-[0_1px_2px_rgba(30,20,10,0.04)]"
+      inactiveTabClassName="border-border bg-muted/60 text-muted-foreground hover:bg-accent hover:text-accent-foreground"
       labelClassName="px-1 text-xs font-normal"
       onPointerDown={!isDocked && !isFullscreen ? onDragStart : undefined}
       onScrollPointerDown={(event) => event.stopPropagation()}

package/src/shared/components/doc-browser/doc-browser.tsx

@@ -359,10 +359,10 @@ export function DocBrowser({ customTabRenderers = {}, displayMode = 'desktop', d
     <div
       data-testid="doc-browser-panel"
       className={cn(
-        'flex flex-col bg-white overflow-hidden relative',
+        'relative flex flex-col overflow-hidden bg-card text-card-foreground',
         isFullscreen
           ? 'fixed inset-0 z-[9999] h-[100dvh] w-screen rounded-none border-0 shadow-2xl'
-          : 'rounded-2xl shadow-2xl border border-gray-200',
+          : 'rounded-2xl border border-border shadow-2xl',
       )}
       style={
         isFullscreen
@@ -398,7 +398,7 @@ export function DocBrowser({ customTabRenderers = {}, displayMode = 'desktop', d
             onPointerDown={startFloatResize('bottom')}
           />
           <div
-            className="absolute bottom-0 right-0 w-4 h-4 cursor-se-resize z-30 flex items-center justify-center text-gray-300 hover:text-gray-500 transition-colors"
+            className="absolute bottom-0 right-0 z-30 flex h-4 w-4 cursor-se-resize items-center justify-center text-muted-foreground/45 transition-colors hover:text-muted-foreground"
             data-testid="doc-browser-resize-bottom-right"
             onPointerDown={startFloatResize('bottom-right')}
           >

package/src/shared/components/resizable-right-panel/resizable-right-panel.tsx

@@ -36,7 +36,7 @@ export function ResizableRightPanel({ children, className, style, defaultWidth =
   return (
     <aside
       {...props}
-      className={cn("relative flex h-full min-h-0 shrink-0 overflow-hidden bg-white", overlay ? "fixed inset-0 z-40" : "border-l border-gray-200", className)}
+      className={cn("relative flex h-full min-h-0 shrink-0 overflow-hidden bg-card text-card-foreground", overlay ? "fixed inset-0 z-40" : "border-l border-border", className)}
       style={overlay ? style : { ...style, width }}
     >
       {!overlay ? (

package/src/shared/components/ui/actions/icon-action-button.tsx

@@ -27,7 +27,7 @@ const IconActionButton = React.forwardRef<HTMLButtonElement, IconActionButtonPro
         aria-label={label}
         className={cn(
           'inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 disabled:cursor-not-allowed',
-          'text-gray-500 hover:bg-gray-100 hover:text-gray-900 disabled:text-gray-300 disabled:hover:bg-transparent disabled:hover:text-gray-300',
+          'text-muted-foreground hover:bg-accent hover:text-accent-foreground disabled:text-muted-foreground/45 disabled:hover:bg-transparent disabled:hover:text-muted-foreground/45',
           className
         )}
       >

package/src/shared/components/ui/button.tsx

@@ -9,12 +9,12 @@ const buttonVariants = cva(
       variant: {
         default: 'bg-primary text-primary-foreground hover:bg-primary-600 active:bg-primary-700 shadow-sm',
         destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
-        outline: 'border border-gray-200 bg-white hover:bg-gray-50 hover:text-gray-800 text-gray-600',
-        secondary: 'bg-gray-100 text-gray-700 hover:bg-gray-200/80',
-        ghost: 'hover:bg-gray-100/80 hover:text-gray-800',
+        outline: 'border border-border bg-card text-muted-foreground hover:bg-accent hover:text-accent-foreground',
+        secondary: 'bg-muted text-foreground hover:bg-accent hover:text-accent-foreground',
+        ghost: 'text-muted-foreground hover:bg-accent hover:text-accent-foreground',
         link: 'text-primary underline-offset-4 hover:underline',
         primary: 'bg-primary text-primary-foreground hover:bg-primary-600 active:bg-primary-700 shadow-sm',
-        subtle: 'bg-gray-100 text-gray-600 hover:bg-gray-200/80',
+        subtle: 'bg-muted text-muted-foreground hover:bg-accent hover:text-accent-foreground',
         'primary-outline': 'border border-primary/30 text-primary hover:bg-primary hover:text-primary-foreground'
       },
       size: {

package/src/shared/components/ui/card.tsx

@@ -8,8 +8,8 @@ const Card = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      'rounded-2xl border border-gray-200/50 bg-white text-card-foreground shadow-card transition-all duration-base',
-      hover && 'hover:shadow-card-hover hover:border-gray-200',
+      'rounded-2xl border border-border bg-card text-card-foreground shadow-card transition-all duration-base',
+      hover && 'hover:border-primary/25 hover:shadow-card-hover',
       className
     )}
     {...props}
@@ -36,7 +36,7 @@ const CardTitle = React.forwardRef<
   <h3
     ref={ref}
     className={cn(
-      'text-[15px] font-semibold leading-tight tracking-tight text-gray-900',
+      'text-[15px] font-semibold leading-tight tracking-tight text-foreground',
       className
     )}
     {...props}
@@ -50,7 +50,7 @@ const CardDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <p
     ref={ref}
-    className={cn('text-[13px] text-gray-400 leading-relaxed', className)}
+    className={cn('text-[13px] text-muted-foreground leading-relaxed', className)}
     {...props}
   />
 ));

package/src/shared/components/ui/dialog.tsx

@@ -36,14 +36,14 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-gray-200/50 bg-white p-6 shadow-xl duration-base data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-2xl",
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 rounded-2xl border border-border bg-popover p-6 text-popover-foreground shadow-xl duration-base data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
         className
       )}
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-lg p-1 opacity-70 ring-offset-white transition-all duration-fast hover:opacity-100 hover:bg-gray-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:pointer-events-none">
-        <X className="h-4 w-4 text-gray-500" />
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-lg p-1 opacity-70 ring-offset-background transition-all duration-fast hover:bg-accent hover:text-accent-foreground hover:opacity-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:pointer-events-none">
+        <X className="h-4 w-4 text-muted-foreground" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
     </DialogPrimitive.Content>
@@ -86,7 +86,7 @@ const DialogTitle = React.forwardRef<
   <DialogPrimitive.Title
     ref={ref}
     className={cn(
-      "text-lg font-semibold leading-tight tracking-tight text-gray-900",
+      "text-lg font-semibold leading-tight tracking-tight text-foreground",
       className
     )}
     {...props}
@@ -100,7 +100,7 @@ const DialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Description
     ref={ref}
-    className={cn("text-sm text-gray-500 leading-relaxed", className)}
+    className={cn("text-sm text-muted-foreground leading-relaxed", className)}
     {...props}
   />
 ))

package/src/shared/components/ui/input.tsx

@@ -9,7 +9,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          'flex h-9 w-full rounded-xl border border-gray-200/80 bg-white px-3.5 py-2 text-sm text-gray-900 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-gray-300 placeholder:font-normal focus:outline-none focus:ring-1 focus:ring-primary/40 focus:border-primary/40 transition-colors disabled:cursor-not-allowed disabled:opacity-50',
+          'flex h-9 w-full rounded-xl border border-border bg-card px-3.5 py-2 text-sm text-foreground file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground/55 placeholder:font-normal focus:outline-none focus:ring-1 focus:ring-primary/40 focus:border-primary/50 transition-colors disabled:cursor-not-allowed disabled:opacity-50',
           className
         )}
         ref={ref}

package/src/shared/components/ui/label.tsx

@@ -8,7 +8,7 @@ const Label = React.forwardRef<HTMLLabelElement, LabelProps>(
     <label
       ref={ref}
       className={cn(
-        'text-sm font-medium leading-none text-gray-700 peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+        'text-sm font-medium leading-none text-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
         className
       )}
       {...props}

package/src/shared/components/ui/popover.tsx

@@ -28,7 +28,7 @@ const PopoverContent = React.forwardRef<
       align={align}
       collisionPadding={collisionPadding}
       className={cn(
-        'z-[var(--z-popover,50)] w-72 overflow-x-hidden overflow-y-auto rounded-2xl border border-gray-200/50 bg-white p-4 shadow-lg animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        'z-[var(--z-popover,50)] w-72 overflow-x-hidden overflow-y-auto rounded-2xl border border-border bg-popover p-4 text-popover-foreground shadow-lg animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
         className
       )}
       style={{ maxHeight: POPOVER_CONTENT_MAX_HEIGHT, ...style }}

package/src/shared/components/ui/select.tsx

@@ -25,7 +25,7 @@ const SelectTrigger = React.forwardRef<
     <SelectPrimitive.Trigger
         ref={ref}
         className={cn(
-            "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-xl border border-gray-200/80 bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-primary/40 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 bg-white",
+            "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-xl border border-border bg-card px-3 py-2 text-sm text-foreground shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-primary/40 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
             className
         )}
         {...props}
@@ -78,7 +78,7 @@ const SelectContent = React.forwardRef<
         <SelectPrimitive.Content
             ref={ref}
             className={cn(
-                "relative z-[var(--z-popover,50)] flex max-h-96 min-w-[8rem] flex-col overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 bg-white",
+                "relative z-[var(--z-popover,50)] flex max-h-96 min-w-[8rem] flex-col overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
                 position === "popper" &&
                 "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
                 className
@@ -119,7 +119,7 @@ const SelectItem = React.forwardRef<
     <SelectPrimitive.Item
         ref={ref}
         className={cn(
-            "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-gray-100 focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 hover:bg-gray-100",
+            "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 hover:bg-accent",
             className
         )}
         {...props}

package/src/shared/components/ui/switch.tsx

@@ -16,8 +16,8 @@ const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(
         aria-checked={checked}
         ref={ref}
         className={cn(
-          'peer inline-flex h-[22px] w-10 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors duration-fast focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-white disabled:cursor-not-allowed disabled:opacity-50',
-          checked ? 'bg-primary' : 'bg-gray-200/80 hover:bg-gray-300/80',
+          'peer inline-flex h-[22px] w-10 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors duration-fast focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50',
+          checked ? 'bg-primary' : 'bg-muted hover:bg-accent',
           className
         )}
         onClick={() => onCheckedChange?.(!checked)}
@@ -26,7 +26,7 @@ const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(
         <span
           data-state={checked ? 'checked' : 'unchecked'}
           className={cn(
-            'pointer-events-none block h-5 w-5 rounded-full bg-white shadow-md ring-0 transition-transform duration-fast',
+            'pointer-events-none block h-5 w-5 rounded-full bg-card shadow-md ring-0 transition-transform duration-fast',
             checked ? 'translate-x-5' : 'translate-x-0',
             thumbClassName
           )}

package/src/shared/components/ui/tabs.tsx

@@ -42,7 +42,7 @@ export function TabsList({ children, className }: TabsListProps) {
   return (
     <div
       className={cn(
-        'inline-flex h-9 items-center justify-center rounded-xl bg-gray-100/80 p-1 text-gray-500',
+        'inline-flex h-9 items-center justify-center rounded-xl bg-muted p-1 text-muted-foreground',
         className
       )}
     >
@@ -64,10 +64,10 @@ export function TabsTrigger({ value, children, className }: TabsTriggerProps) {
       aria-pressed={isActive}
       data-state={isActive ? 'active' : 'inactive'}
       className={cn(
-        'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-[13px] font-medium ring-offset-white transition-all duration-fast focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+        'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-[13px] font-medium ring-offset-background transition-all duration-fast focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
         isActive
-          ? 'bg-white text-gray-900 shadow-sm'
-          : 'hover:bg-white/50 hover:text-gray-800 text-gray-600',
+          ? 'bg-card text-foreground shadow-sm'
+          : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground',
         className
       )}
     >

package/src/shared/components/ui/textarea.tsx

@@ -7,7 +7,7 @@ export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
   ({ className, ...props }, ref) => (
     <textarea
       className={cn(
-        "flex min-h-28 w-full rounded-xl border border-gray-200/80 bg-white px-3.5 py-2.5 text-sm text-gray-900 placeholder:text-gray-300 placeholder:font-normal focus:outline-none focus:ring-1 focus:ring-primary/40 focus:border-primary/40 transition-colors disabled:cursor-not-allowed disabled:opacity-50",
+        "flex min-h-28 w-full rounded-xl border border-border bg-card px-3.5 py-2.5 text-sm text-foreground placeholder:text-muted-foreground/55 placeholder:font-normal focus:outline-none focus:ring-1 focus:ring-primary/40 focus:border-primary/50 transition-colors disabled:cursor-not-allowed disabled:opacity-50",
         className,
       )}
       ref={ref}

package/src/shared/lib/i18n/locales/en-US/core.json

@@ -39,8 +39,13 @@
   "noneOption": "None",
   "language": "Language",
   "theme": "Theme",
-  "themeWarm": "Warm",
-  "themeCool": "Cool",
+  "themeNatural": "Natural",
+  "themeMinimal": "Minimal",
+  "themeWarm": "Paper",
+  "themeCool": "Mist",
+  "themeDawn": "Dawn",
+  "themeGraphite": "Graphite",
+  "themeProbe": "Probe",
   "isRequired": "is required",
   "duplicate": "duplicate",
   "notFound": "not found",

package/src/shared/lib/i18n/locales/zh-CN/core.json

@@ -39,8 +39,13 @@
   "noneOption": "无",
   "language": "语言",
   "theme": "主题",
-  "themeWarm": "暖色",
-  "themeCool": "冷色",
+  "themeNatural": "自然",
+  "themeMinimal": "简白",
+  "themeWarm": "纸暖",
+  "themeCool": "雾蓝",
+  "themeDawn": "晨砂",
+  "themeGraphite": "石墨",
+  "themeProbe": "探针",
   "isRequired": "必填",
   "duplicate": "重复",
   "notFound": "未找到",

package/src/shared/lib/theme/index.ts

@@ -1,80 +1,122 @@
-export type UiTheme = 'warm' | 'cool';
+export type UiTheme = 'natural' | 'minimal' | 'warm' | 'cool' | 'dawn' | 'graphite' | 'probe';
 
 const THEME_STORAGE_KEY = 'nextclaw.ui.theme';
+const DEFAULT_THEME: UiTheme = 'natural';
+const THEME_VALUES: readonly UiTheme[] = ['natural', 'minimal', 'warm', 'cool', 'dawn', 'graphite', 'probe'];
 
 export const THEME_OPTIONS: Array<{ value: UiTheme; labelKey: string }> = [
+  { value: 'natural', labelKey: 'themeNatural' },
+  { value: 'minimal', labelKey: 'themeMinimal' },
   { value: 'warm', labelKey: 'themeWarm' },
-  { value: 'cool', labelKey: 'themeCool' }
+  { value: 'cool', labelKey: 'themeCool' },
+  { value: 'dawn', labelKey: 'themeDawn' },
+  { value: 'graphite', labelKey: 'themeGraphite' },
+  { value: 'probe', labelKey: 'themeProbe' }
 ];
 
-let activeTheme: UiTheme = 'warm';
-let initialized = false;
-const listeners = new Set<(theme: UiTheme) => void>();
-
-function isTheme(value: unknown): value is UiTheme {
-  return value === 'warm' || value === 'cool';
-}
+export function normalizeTheme(value: unknown): UiTheme | null {
+  if (typeof value !== 'string') {
+    return null;
+  }
 
-function applyThemeAttribute(theme: UiTheme): void {
-  if (typeof document === 'undefined') {
-    return;
+  if ((THEME_VALUES as readonly string[]).includes(value)) {
+    return value as UiTheme;
   }
-  document.documentElement.setAttribute('data-theme', theme);
+
+  return value === 'leaf' ? 'warm' : null;
 }
 
-export function resolveInitialTheme(): UiTheme {
-  if (typeof window === 'undefined') {
-    return 'warm';
-  }
+class UiThemeOwner {
+  private activeTheme: UiTheme = DEFAULT_THEME;
+  private initialized = false;
+  private readonly listeners = new Set<(theme: UiTheme) => void>();
 
-  try {
-    const saved = window.localStorage.getItem(THEME_STORAGE_KEY);
-    if (isTheme(saved)) {
-      return saved;
+  resolveInitialTheme = (): UiTheme => {
+    if (typeof window === 'undefined') {
+      return DEFAULT_THEME;
     }
-  } catch {
-    // ignore storage failures
-  }
 
-  return 'warm';
-}
+    try {
+      const saved = window.localStorage.getItem(THEME_STORAGE_KEY);
+      const theme = normalizeTheme(saved);
+      if (theme) {
+        return theme;
+      }
+    } catch {
+      // ignore storage failures
+    }
 
-export function initializeTheme(): UiTheme {
-  if (!initialized) {
-    activeTheme = resolveInitialTheme();
-    applyThemeAttribute(activeTheme);
-    initialized = true;
-  }
-  return activeTheme;
-}
+    return DEFAULT_THEME;
+  };
 
-export function getTheme(): UiTheme {
-  return initialized ? activeTheme : initializeTheme();
-}
+  initializeTheme = (): UiTheme => {
+    if (!this.initialized) {
+      this.activeTheme = this.resolveInitialTheme();
+      this.applyThemeAttribute(this.activeTheme);
+      this.initialized = true;
+    }
+    return this.activeTheme;
+  };
 
-export function setTheme(theme: UiTheme): void {
-  initializeTheme();
-  if (theme === activeTheme) {
-    return;
-  }
+  getTheme = (): UiTheme => this.initialized ? this.activeTheme : this.initializeTheme();
 
-  activeTheme = theme;
-  applyThemeAttribute(activeTheme);
+  setTheme = (theme: UiTheme): void => {
+    this.initializeTheme();
+    if (theme === this.activeTheme) {
+      return;
+    }
+
+    this.activeTheme = theme;
+    this.applyThemeAttribute(this.activeTheme);
+    this.saveTheme(this.activeTheme);
+    this.listeners.forEach((listener) => listener(this.activeTheme));
+  };
+
+  subscribeThemeChange = (listener: (theme: UiTheme) => void): (() => void) => {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  };
+
+  private applyThemeAttribute = (theme: UiTheme): void => {
+    if (typeof document === 'undefined') {
+      return;
+    }
+    document.documentElement.setAttribute('data-theme', theme);
+  };
+
+  private saveTheme = (theme: UiTheme): void => {
+    if (typeof window === 'undefined') {
+      return;
+    }
 
-  if (typeof window !== 'undefined') {
     try {
-      window.localStorage.setItem(THEME_STORAGE_KEY, activeTheme);
+      window.localStorage.setItem(THEME_STORAGE_KEY, theme);
     } catch {
       // ignore storage failures
     }
-  }
+  };
+}
+
+const uiThemeOwner = new UiThemeOwner();
 
-  listeners.forEach((listener) => listener(activeTheme));
+export function resolveInitialTheme(): UiTheme {
+  return uiThemeOwner.resolveInitialTheme();
+}
+
+export function initializeTheme(): UiTheme {
+  return uiThemeOwner.initializeTheme();
+}
+
+export function getTheme(): UiTheme {
+  return uiThemeOwner.getTheme();
+}
+
+export function setTheme(theme: UiTheme): void {
+  uiThemeOwner.setTheme(theme);
 }
 
 export function subscribeThemeChange(listener: (theme: UiTheme) => void): () => void {
-  listeners.add(listener);
-  return () => {
-    listeners.delete(listener);
-  };
+  return uiThemeOwner.subscribeThemeChange(listener);
 }