From 9b424f0c9f57231d40b9dd0efadf6d0ce464b64e Mon Sep 17 00:00:00 2001
From: Richard R <me@richardr.dev>
Date: Mon, 1 Jun 2026 05:42:52 -0600
Subject: [PATCH] Remove legacy UI shim imports

---
 eslint.config.mjs                            |  4 +-
 src/app/(public)/layout.tsx                  |  2 +-
 src/app/(public)/page.tsx                    |  2 +-
 src/app/(public)/privacy/page.tsx            |  2 +-
 src/components/AudiobookExportModal.tsx      | 74 +++++++++-----------
 src/components/CodeBlock.tsx                 |  2 +-
 src/components/CookieConsentBanner.tsx       |  2 +-
 src/components/ProgressCard.tsx              |  2 +-
 src/components/admin/AdminFeaturesPanel.tsx  |  4 +-
 src/components/admin/AdminProvidersPanel.tsx |  4 +-
 src/components/admin/ui.tsx                  | 23 ------
 src/components/formPrimitives.tsx            | 38 ----------
 src/components/player/VoicesControlBase.tsx  | 17 ++---
 src/components/ui/buttonPrimitives.ts        | 13 ----
 src/components/ui/select.tsx                 | 17 +++--
 15 files changed, 65 insertions(+), 141 deletions(-)
 delete mode 100644 src/components/admin/ui.tsx
 delete mode 100644 src/components/formPrimitives.tsx
 delete mode 100644 src/components/ui/buttonPrimitives.ts

diff --git a/eslint.config.mjs b/eslint.config.mjs
index ab1841c..2a0310d 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -50,12 +50,12 @@ const UI_ARCHITECTURE_IMPORT_PATHS = [
   {
     name: "@/components/formPrimitives",
     message:
-      "Use '@/components/ui' primitives in migrated app surfaces; formPrimitives is a compatibility shim.",
+      "Use '@/components/ui' primitives; formPrimitives has been removed.",
   },
   {
     name: "@/components/ui/buttonPrimitives",
     message:
-      "Use '@/components/ui' button exports in migrated app surfaces; buttonPrimitives is a compatibility shim.",
+      "Use '@/components/ui' button exports; buttonPrimitives has been removed.",
   },
   {
     name: "@headlessui/react",
diff --git a/src/app/(public)/layout.tsx b/src/app/(public)/layout.tsx
index 7cc7024..4b08f30 100644
--- a/src/app/(public)/layout.tsx
+++ b/src/app/(public)/layout.tsx
@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react';
 import Link from 'next/link';
 import { getResolvedRuntimeConfigForRsc } from '@/lib/server/runtime-config-rsc';
-import { buttonClass } from '@/components/ui/buttonPrimitives';
+import { buttonClass } from '@/components/ui';
 import './public.css';
 
 export default async function PublicLayout({ children }: { children: ReactNode }) {
diff --git a/src/app/(public)/page.tsx b/src/app/(public)/page.tsx
index f995997..49ead03 100644
--- a/src/app/(public)/page.tsx
+++ b/src/app/(public)/page.tsx
@@ -2,7 +2,7 @@ import type { CSSProperties } from 'react';
 import type { Metadata } from 'next';
 import Link from 'next/link';
 import { getResolvedRuntimeConfigForRsc } from '@/lib/server/runtime-config-rsc';
-import { buttonClass } from '@/components/ui/buttonPrimitives';
+import { buttonClass } from '@/components/ui';
 
 export const metadata: Metadata = {
   title: 'Open Source Read-Along Workspace',
diff --git a/src/app/(public)/privacy/page.tsx b/src/app/(public)/privacy/page.tsx
index 644ade8..30818b5 100644
--- a/src/app/(public)/privacy/page.tsx
+++ b/src/app/(public)/privacy/page.tsx
@@ -1,7 +1,7 @@
 import type { Metadata } from 'next';
 import Link from 'next/link';
 import { headers } from 'next/headers';
-import { buttonClass } from '@/components/ui/buttonPrimitives';
+import { buttonClass } from '@/components/ui';
 
 export const metadata: Metadata = {
   title: 'Privacy & Data Usage',
diff --git a/src/components/AudiobookExportModal.tsx b/src/components/AudiobookExportModal.tsx
index 945f006..ead5815 100644
--- a/src/components/AudiobookExportModal.tsx
+++ b/src/components/AudiobookExportModal.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { Fragment, useState, useRef, useCallback, useEffect, useMemo } from 'react';
-import { Transition, Button, Listbox, ListboxButton, ListboxOptions, ListboxOption, Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/react';
+import { Transition, Listbox, ListboxButton, ListboxOptions, ListboxOption, Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/react';
 import { useTimeEstimation } from '@/hooks/useTimeEstimation';
 import { ProgressPopup } from '@/components/ProgressPopup';
 import { ProgressCard } from '@/components/ProgressCard';
@@ -13,6 +13,7 @@ import { VoicesControlBase } from '@/components/player/VoicesControlBase';
 import { ReaderSidebarShell } from '@/components/reader/ReaderSidebarShell';
 import { resolveTtsProviderModelPolicy } from '@/lib/shared/tts-provider-policy';
 import type { TTSAudiobookChapter, TTSAudiobookFormat } from '@/types/tts';
+import { Button, IconButton, MenuItemClass, cn, listboxButtonClass, listboxOptionClass, listboxPanelClass, menuPanelClass, rangeInputClass } from '@/components/ui';
 import { 
   getAudiobookStatus, 
   deleteAudiobookChapter, 
@@ -560,7 +561,7 @@ export function AudiobookExportModal({
 			                                          disabled={chapters.length > 0 || settingsLocked}
 			                                        >
 			                                          <div className="relative">
-			                                            <ListboxButton className="relative cursor-pointer rounded-lg bg-surface py-1.5 pl-3 pr-10 text-left text-foreground focus:outline-none focus:ring-2 focus:ring-accent-line transform transition-transform duration-base ease-standard hover:text-accent w-full">
+			                                            <ListboxButton className={cn(listboxButtonClass, 'bg-surface')}>
 			                                              <span className="block truncate text-sm font-medium">{format.toUpperCase()}</span>
 			                                              <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
 			                                                <ChevronUpDownIcon className="h-4 w-4 text-soft" />
@@ -572,12 +573,10 @@ export function AudiobookExportModal({
 			                                              leaveFrom="opacity-100"
 			                                              leaveTo="opacity-0"
 			                                            >
-			                                              <ListboxOptions className="absolute left-0 mt-1 max-h-60 w-full overflow-auto rounded-lg bg-surface py-1 shadow-elev-2 ring-1 ring-line-soft focus:outline-none z-10">
+			                                              <ListboxOptions className={cn(listboxPanelClass, 'absolute left-0 mt-1 w-full')}>
 			                                                <ListboxOption
 			                                                  value="m4b"
-			                                                  className={({ active }) =>
-			                                                    `relative cursor-pointer select-none py-2 pl-3 pr-4 ${active ? 'bg-surface-sunken text-accent' : 'text-foreground'}`
-			                                                  }
+			                                                  className={({ active, selected }) => cn(listboxOptionClass(active, selected, 'none'), 'py-2')}
 			                                                >
 			                                                  {({ selected }) => (
 			                                                    <span className={`block truncate text-sm ${selected ? 'font-medium' : 'font-normal'}`}>
@@ -587,9 +586,7 @@ export function AudiobookExportModal({
 			                                                </ListboxOption>
 			                                                <ListboxOption
 			                                                  value="mp3"
-			                                                  className={({ active }) =>
-			                                                    `relative cursor-pointer select-none py-2 pl-3 pr-4 ${active ? 'bg-surface-sunken text-accent' : 'text-foreground'}`
-			                                                  }
+			                                                  className={({ active, selected }) => cn(listboxOptionClass(active, selected, 'none'), 'py-2')}
 			                                                >
 			                                                  {({ selected }) => (
 			                                                    <span className={`block truncate text-sm ${selected ? 'font-medium' : 'font-normal'}`}>
@@ -629,7 +626,7 @@ export function AudiobookExportModal({
                                             step="0.1"
                                             value={nativeSpeed}
                                             onChange={(e) => setNativeSpeed(parseFloat(e.target.value))}
-                                            className="w-full h-1.5 bg-surface-sunken rounded-full appearance-none cursor-pointer [&::-webkit-slider-runnable-track]:bg-surface-sunken [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:h-1.5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-accent [&::-webkit-slider-thumb]:-mt-[5px] [&::-webkit-slider-thumb]:shadow-elev-1 [&::-moz-range-track]:bg-surface-sunken [&::-moz-range-track]:rounded-full [&::-moz-range-track]:h-1.5 [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-accent [&::-moz-range-thumb]:border-0"
+                                            className={rangeInputClass}
                                           />
                                           <div className="flex justify-between text-[10px] text-soft">
                                             <span>0.5x</span>
@@ -653,7 +650,7 @@ export function AudiobookExportModal({
 			                                        step="0.1"
 			                                        value={postSpeed}
 			                                        onChange={(e) => setPostSpeed(parseFloat(e.target.value))}
-			                                        className="w-full h-1.5 bg-surface-sunken rounded-full appearance-none cursor-pointer [&::-webkit-slider-runnable-track]:bg-surface-sunken [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:h-1.5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-accent [&::-webkit-slider-thumb]:-mt-[5px] [&::-webkit-slider-thumb]:shadow-elev-1 [&::-moz-range-track]:bg-surface-sunken [&::-moz-range-track]:rounded-full [&::-moz-range-track]:h-1.5 [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-accent [&::-moz-range-thumb]:border-0"
+			                                        className={rangeInputClass}
 			                                      />
 			                                      <div className="flex justify-between text-[10px] text-soft">
 			                                        <span>0.5x</span>
@@ -670,10 +667,9 @@ export function AudiobookExportModal({
 			                                  <Button
 			                                    onClick={handleStartGeneration}
 			                                    disabled={!canGenerate}
-			                                    className="flex-1 inline-flex justify-center rounded-lg bg-accent px-3 py-2 text-sm
-			                                            font-medium text-background hover:bg-secondary-accent focus:outline-none
-			                                            focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2
-			                                            transform transition-transform duration-base ease-standard disabled:opacity-50 disabled:cursor-not-allowed"
+			                                    variant="primary"
+			                                    size="md"
+			                                    className="flex-1"
 			                                  >
 			                                    Start Generation
 			                                  </Button>
@@ -682,10 +678,9 @@ export function AudiobookExportModal({
 			                                  <Button
 			                                    onClick={handleStartGeneration}
 			                                    disabled={!canGenerate}
-			                                    className="flex-1 inline-flex justify-center rounded-lg bg-accent px-3 py-2 text-sm
-			                                            font-medium text-background hover:bg-secondary-accent focus:outline-none
-			                                            focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2
-			                                            transform transition-transform duration-base ease-standard disabled:opacity-50 disabled:cursor-not-allowed"
+			                                    variant="primary"
+			                                    size="md"
+			                                    className="flex-1"
 			                                  >
 			                                    Resume
 			                                  </Button>
@@ -694,10 +689,8 @@ export function AudiobookExportModal({
 			                                  <Button
 			                                    onClick={() => setShowResetConfirm(true)}
 			                                    disabled={isGenerating}
-			                                    className="inline-flex justify-center rounded-lg border border-danger bg-transparent px-3 py-2 text-sm
-			                                           font-medium text-danger hover:bg-danger-wash hover:text-background focus:outline-none
-			                                           focus-visible:ring-2 focus-visible:ring-danger focus-visible:ring-offset-2
-			                                           transform transition-transform duration-base ease-standard"
+			                                    variant="danger"
+			                                    size="md"
 			                                    title="Delete all generated chapters/pages for this document"
 			                                  >
 			                                    Reset
@@ -714,15 +707,15 @@ export function AudiobookExportModal({
                               <br />
                               Change the TTS playback options or restart the server to force uncached regeneration
                             </p>
-                            <Button
+                            <IconButton
                               onClick={() => setShowRegenerateHint(false)}
-                              className="ml-3 p-1 rounded-md hover:bg-surface hover:text-accent transition-colors"
+                              className="ml-3"
                               aria-label="Dismiss regenerate hint"
                             >
                               <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
                               </svg>
-                            </Button>
+                            </IconButton>
                           </div>
                         )}
                         {/* Progress Info */}
@@ -757,14 +750,16 @@ export function AudiobookExportModal({
                                     {chapter.status === 'completed' ? (
                                       <CheckCircleIcon className="h-5 w-5 text-accent" />
                                     ) : onRegenerateChapter ? (
-                                      <Button
+                                      <IconButton
                                         onClick={() => handleRegenerateChapter(chapter)}
                                         disabled={regeneratingChapter !== null || chapter.status === 'generating' || isGenerating}
-                                        className="inline-flex items-center justify-center rounded-full bg-surface-sunken text-accent hover:bg-accent-wash p-1.5 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent transform transition-transform duration-base ease-standard disabled:opacity-50 disabled:cursor-not-allowed"
+                                        tone="ghost"
+                                        size="sm"
+                                        className="rounded-full bg-surface-sunken text-accent"
                                         title={chapter.status === 'generating' ? 'Generating...' : 'Regenerate this chapter'}
                                       >
                                         <RefreshIcon className={`h-4 w-4 ${regeneratingChapter === chapter.index || chapter.status === 'generating' ? 'animate-spin' : ''}`} />
-                                      </Button>
+                                      </IconButton>
                                     ) : (
                                       <ClockIcon className="h-5 w-5 text-soft" />
                                     )}
@@ -782,7 +777,8 @@ export function AudiobookExportModal({
                                     {((onRegenerateChapter && !isGenerating) || chapter.status === 'completed') && (
                                       <Menu as="div" className="relative inline-block text-left">
                                         <MenuButton
-                                          className="inline-flex items-center justify-center rounded-md p-1.5 hover:bg-background focus:outline-none focus-visible:ring-2 focus-visible:ring-accent text-soft hover:text-foreground transform transition-transform duration-base ease-standard"
+                                          as={IconButton}
+                                          size="sm"
                                           title="Chapter actions"
                                         >
                                           <DotsVerticalIcon className="h-5 w-5" />
@@ -799,7 +795,7 @@ export function AudiobookExportModal({
                                           <MenuItems
                                             anchor={{ to: 'bottom end', gap: '8px', padding: '12px' }}
                                             portal
-                                            className="w-44 rounded-md bg-background shadow-elev-2 ring-1 ring-line-soft focus:outline-none z-[70] p-1 origin-top-right"
+                                            className={cn(menuPanelClass, 'z-[70] w-44 origin-top-right bg-background focus:outline-none')}
                                           >
                                             {chapter.status === 'completed' && (
                                               <>
@@ -807,7 +803,7 @@ export function AudiobookExportModal({
                                                   {({ active }) => (
                                                     <button
                                                       onClick={() => setPendingDeleteChapter(chapter)}
-                                                      className={`${active ? 'bg-surface-sunken' : ''} text-danger group flex w-full items-center gap-2 rounded px-2 py-2 text-sm`}
+                                                      className={MenuItemClass(active, 'danger')}
                                                       title="Delete this chapter"
                                                     >
                                                       <XCircleIcon className="h-4 w-4" />
@@ -819,7 +815,7 @@ export function AudiobookExportModal({
                                                   {({ active }) => (
                                                     <button
                                                       onClick={() => handleDownloadChapter(chapter)}
-                                                      className={`${active ? 'bg-surface-sunken text-accent' : 'text-foreground'} group flex w-full items-center gap-2 rounded px-2 py-2 text-sm`}
+                                                      className={MenuItemClass(active)}
                                                     >
                                                       <DownloadIcon className="h-4 w-4" />
                                                       <span>Download</span>
@@ -833,7 +829,7 @@ export function AudiobookExportModal({
                                                 {({ active }) => (
                                                   <button
                                                     onClick={handleCancel}
-                                                    className={`${active ? 'bg-surface-sunken text-danger' : 'text-danger'} group flex w-full items-center gap-2 rounded px-2 py-2 text-sm`}
+                                                    className={MenuItemClass(active, 'danger')}
                                                     title="Cancel this chapter regeneration"
                                                   >
                                                     <XCircleIcon className="h-4 w-4" />
@@ -848,7 +844,7 @@ export function AudiobookExportModal({
                                                   <button
                                                     onClick={() => handleRegenerateChapter(chapter)}
                                                     disabled={disabled}
-                                                    className={`${active ? 'bg-surface-sunken text-accent' : 'text-foreground'} group flex w-full items-center gap-2 rounded px-2 py-2 text-sm disabled:opacity-50 disabled:cursor-not-allowed`}
+                                                    className={cn(MenuItemClass(active), 'disabled:cursor-not-allowed disabled:opacity-50')}
                                                     title="Regenerate this chapter"
                                                   >
                                                     <RefreshIcon className={`h-4 w-4 ${regeneratingChapter === chapter.index ? 'animate-spin' : ''}`} />
@@ -872,11 +868,9 @@ export function AudiobookExportModal({
                                 <Button
                                   onClick={handleDownloadComplete}
                                   disabled={isCombining}
-                                  className="w-full inline-flex justify-center items-center space-x-2 rounded-lg bg-accent px-3 py-1.5 text-sm
-                                        disabled:opacity-50 disabled:cursor-not-allowed
-                                        font-medium text-background hover:bg-secondary-accent focus:outline-none 
-                                        focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2
-                                        transform transition-transform duration-base ease-standard hover:text-background"
+                                  variant="primary"
+                                  size="md"
+                                  className="w-full space-x-2"
                                 >
                                   <DownloadIcon className="h-5 w-5" />
                                   <span>{isCombining ? 'Combining chapters...' : `Full Download (${format.toUpperCase()})`}</span>
diff --git a/src/components/CodeBlock.tsx b/src/components/CodeBlock.tsx
index f8eb86d..f2d327c 100644
--- a/src/components/CodeBlock.tsx
+++ b/src/components/CodeBlock.tsx
@@ -2,7 +2,7 @@
 
 import { useState } from 'react';
 import { CopyIcon, CheckIcon } from '@/components/icons/Icons';
-import { buttonClass } from '@/components/ui/buttonPrimitives';
+import { buttonClass } from '@/components/ui';
 
 export function CodeBlock({ children }: { children: string }) {
   const [copied, setCopied] = useState(false);
diff --git a/src/components/CookieConsentBanner.tsx b/src/components/CookieConsentBanner.tsx
index ea1f180..3e1a278 100644
--- a/src/components/CookieConsentBanner.tsx
+++ b/src/components/CookieConsentBanner.tsx
@@ -4,7 +4,7 @@ import { useState, useEffect } from 'react';
 import Link from 'next/link';
 import { getConsentState, setConsentState } from '@/lib/client/analytics';
 import { Transition } from '@headlessui/react';
-import { buttonClass } from '@/components/ui/buttonPrimitives';
+import { buttonClass } from '@/components/ui';
 
 export function CookieConsentBanner() {
   const [show, setShow] = useState(false);
diff --git a/src/components/ProgressCard.tsx b/src/components/ProgressCard.tsx
index 618974f..380a45a 100644
--- a/src/components/ProgressCard.tsx
+++ b/src/components/ProgressCard.tsx
@@ -1,4 +1,4 @@
-import { buttonClass } from '@/components/ui/buttonPrimitives';
+import { buttonClass } from '@/components/ui';
 
 interface ProgressCardProps {
   progress: number;
diff --git a/src/components/admin/AdminFeaturesPanel.tsx b/src/components/admin/AdminFeaturesPanel.tsx
index 14d3072..4ca0fa4 100644
--- a/src/components/admin/AdminFeaturesPanel.tsx
+++ b/src/components/admin/AdminFeaturesPanel.tsx
@@ -13,8 +13,8 @@ import {
   listboxButtonClass,
   listboxOptionClass,
   listboxOptionsClass,
-} from '@/components/formPrimitives';
-import { buttonClass } from '@/components/ui/buttonPrimitives';
+  buttonClass,
+} from '@/components/ui';
 import { type TtsProviderId } from '@/lib/shared/tts-provider-catalog';
 import { useSharedProviders, type SharedProviderEntry } from '@/hooks/useSharedProviders';
 
diff --git a/src/components/admin/AdminProvidersPanel.tsx b/src/components/admin/AdminProvidersPanel.tsx
index 8b53cf5..09c07da 100644
--- a/src/components/admin/AdminProvidersPanel.tsx
+++ b/src/components/admin/AdminProvidersPanel.tsx
@@ -17,8 +17,8 @@ import {
   listboxButtonClass,
   listboxOptionClass,
   listboxOptionsClass,
-} from '@/components/formPrimitives';
-import { buttonClass } from '@/components/ui/buttonPrimitives';
+  buttonClass,
+} from '@/components/ui';
 
 type ProviderType = TtsProviderId;
 
diff --git a/src/components/admin/ui.tsx b/src/components/admin/ui.tsx
deleted file mode 100644
index fdf6fa5..0000000
--- a/src/components/admin/ui.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-export {
-  Badge,
-  Card,
-  Field,
-  Section,
-  ToggleRow,
-  inputClass,
-  listboxButtonClass,
-  listboxOptionClass,
-  listboxOptionsClass,
-  segmentedButtonClass,
-  segmentedGroupClass,
-} from '@/components/formPrimitives';
-
-export {
-  buttonClass,
-  btnBase,
-  btnDanger,
-  btnGhost,
-  btnOutline,
-  btnPrimary,
-  btnSecondary,
-} from '@/components/ui/buttonPrimitives';
diff --git a/src/components/formPrimitives.tsx b/src/components/formPrimitives.tsx
deleted file mode 100644
index e9c3a2e..0000000
--- a/src/components/formPrimitives.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-'use client';
-
-/**
- * Compatibility shim for older settings/admin imports.
- * New UI work should import from `@/components/ui/*` or `@/components/ui`.
- */
-export {
-  Badge,
-  Button,
-  Card,
-  CheckItem,
-  Divider,
-  Field,
-  IconButton,
-  Menu,
-  Panel,
-  Section,
-  Sidebar,
-  Surface,
-  Switch,
-  ToggleRow,
-  btnBase,
-  btnDanger,
-  btnGhost,
-  btnOutline,
-  btnPrimary,
-  btnSecondary,
-  buttonClass,
-  inputClass,
-  listboxButtonClass,
-  listboxOptionClass,
-  listboxOptionsClass,
-  segmentedButtonClass,
-  segmentedGroupClass,
-  type ButtonSize,
-  type ButtonVariant,
-  type SwitchSize,
-} from '@/components/ui';
diff --git a/src/components/player/VoicesControlBase.tsx b/src/components/player/VoicesControlBase.tsx
index 48a86e2..75aaf57 100644
--- a/src/components/player/VoicesControlBase.tsx
+++ b/src/components/player/VoicesControlBase.tsx
@@ -11,6 +11,7 @@ import { useEffect, useMemo, useState } from 'react';
 import { buildKokoroVoiceString, parseKokoroVoiceNames } from '@/lib/shared/kokoro';
 import { type TtsProviderType } from '@/lib/shared/tts-provider-catalog';
 import { resolveTtsProviderModelPolicy } from '@/lib/shared/tts-provider-policy';
+import { cn, listboxButtonClass, listboxOptionClass, listboxPanelClass, popoverTriggerClass } from '@/components/ui';
 
 export function VoicesControlBase({
   availableVoices,
@@ -34,8 +35,8 @@ export function VoicesControlBase({
     : 'bottom-full right-0 mb-1';
 
   const buttonClass = variant === 'field'
-    ? 'relative cursor-pointer rounded-lg bg-surface py-1.5 pl-3 pr-10 text-left text-foreground focus:outline-none focus:ring-2 focus:ring-accent-line transform transition-transform duration-base ease-standard hover:text-accent w-full'
-    : 'flex items-center space-x-0.5 sm:space-x-1 bg-transparent text-foreground text-xs sm:text-sm focus:outline-none cursor-pointer hover:bg-accent-wash rounded pl-1.5 sm:pl-2 pr-0.5 sm:pr-1 py-0.5 sm:py-1 transform transition-transform duration-base ease-standard hover:text-accent';
+    ? cn(listboxButtonClass, 'bg-surface pr-10')
+    : cn(popoverTriggerClass, 'space-x-0.5 px-1.5 py-0.5 text-xs sm:space-x-1 sm:px-2 sm:py-1 sm:text-sm');
 
   const iconClass = variant === 'field'
     ? 'h-3.5 w-3.5 shrink-0'
@@ -140,14 +141,12 @@ export function VoicesControlBase({
               </>
             )}
           </ListboxButton>
-          <ListboxOptions className={`absolute ${dropdownPosition} z-50 ${dropdownWidth} !h-auto !min-h-0 !max-h-[50vh] overflow-y-auto overscroll-contain rounded-lg bg-surface shadow-elev-2 ring-1 ring-line-soft focus:outline-none`}>
+          <ListboxOptions className={cn(listboxPanelClass, 'absolute !h-auto !min-h-0 !max-h-[50vh]', dropdownPosition, dropdownWidth)}>
             {availableVoices.map((voiceId) => (
               <ListboxOption
                 key={voiceId}
                 value={voiceId}
-                className={({ active, selected }) =>
-                  `relative cursor-pointer select-none py-1 px-2 sm:py-2 sm:px-3 flex items-center gap-2 ${active ? 'bg-surface-sunken' : ''} ${selected ? 'font-medium bg-accent text-background' : ''} ${selected && active ? 'text-foreground' : ''}`
-                }
+                className={({ active, selected }) => cn(listboxOptionClass(active, selected, 'none'), 'flex items-center gap-2 py-1 sm:py-2')}
               >
                 {({ selected }) => (
                   <>
@@ -184,14 +183,12 @@ export function VoicesControlBase({
               </>
             )}
           </ListboxButton>
-          <ListboxOptions className={`absolute ${dropdownPosition} z-50 ${dropdownWidth} !h-auto !min-h-0 !max-h-[50vh] overflow-y-auto overscroll-contain rounded-lg bg-surface shadow-elev-2 ring-1 ring-line-soft focus:outline-none`}>
+          <ListboxOptions className={cn(listboxPanelClass, 'absolute !h-auto !min-h-0 !max-h-[50vh]', dropdownPosition, dropdownWidth)}>
             {availableVoices.map((voiceId) => (
               <ListboxOption
                 key={voiceId}
                 value={voiceId}
-                className={({ active, selected }) =>
-                  `relative cursor-pointer select-none py-1 px-2 sm:py-2 sm:px-3 ${active ? 'bg-surface-sunken' : ''} ${selected ? 'font-medium bg-accent text-background' : ''} ${selected && active ? 'text-foreground' : ''}`
-                }
+                className={({ active, selected }) => cn(listboxOptionClass(active, selected, 'none'), 'py-1 sm:py-2')}
               >
                 <span className="text-xs sm:text-sm">{voiceId}</span>
               </ListboxOption>
diff --git a/src/components/ui/buttonPrimitives.ts b/src/components/ui/buttonPrimitives.ts
deleted file mode 100644
index e66a015..0000000
--- a/src/components/ui/buttonPrimitives.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-export {
-  Button,
-  btnBase,
-  btnDanger,
-  btnGhost,
-  btnOutline,
-  btnPrimary,
-  btnSecondary,
-  buttonClass,
-  buttonStyles,
-  type ButtonSize,
-  type ButtonVariant,
-} from './button';
diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx
index 7fd1826..03742f3 100644
--- a/src/components/ui/select.tsx
+++ b/src/components/ui/select.tsx
@@ -7,11 +7,18 @@ export { segmentedButtonClass, segmentedGroupClass } from './segmented-control';
 export const listboxButtonClass =
   'relative w-full cursor-pointer rounded-md bg-surface-sunken border border-line py-1.5 pl-2.5 pr-9 text-left text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-accent-line hover:bg-accent-wash transition-colors duration-fast ease-standard';
 
-export const listboxOptionsClass =
-  'z-50 w-[var(--button-width)] max-h-60 overflow-y-auto overscroll-contain rounded-md bg-surface p-1 shadow-elev-2 ring-1 ring-line focus:outline-none [--anchor-gap:0.25rem]';
+export const listboxPanelClass =
+  'z-50 max-h-60 overflow-y-auto overscroll-contain rounded-md bg-surface p-1 shadow-elev-2 ring-1 ring-line focus:outline-none';
 
-export const listboxOptionClass = (active: boolean) =>
-  cn('relative cursor-pointer select-none rounded-sm py-1.5 pl-9 pr-3 text-sm', active ? 'bg-accent-wash text-foreground' : 'text-foreground');
+export const listboxOptionsClass =
+  cn(listboxPanelClass, 'w-[var(--button-width)] [--anchor-gap:0.25rem]');
+
+export const listboxOptionClass = (active: boolean, selected = false, inset: 'check' | 'none' = 'check') =>
+  cn(
+    'relative cursor-pointer select-none rounded-sm py-1.5 text-sm',
+    inset === 'check' ? 'pl-9 pr-3' : 'px-2.5',
+    selected ? 'bg-accent text-background font-medium' : active ? 'bg-accent-wash text-foreground' : 'text-foreground',
+  );
 
 export function Select({
   value,
@@ -32,7 +39,7 @@ export function Select({
       </ListboxButton>
       <ListboxOptions anchor="bottom" className={listboxOptionsClass}>
         {options.map((option) => (
-          <ListboxOption key={option.value} value={option.value} className={({ active }) => listboxOptionClass(active)}>
+          <ListboxOption key={option.value} value={option.value} className={({ active, selected }) => listboxOptionClass(active, selected)}>
             {({ selected }) => (
               <>
                 <span className="absolute left-2 text-accent">{selected ? '*' : ''}</span>