@brimveyn/aimux 1.9.3 → 1.9.6

package/src/ui/components/modals/sessions/session-picker-modal.tsx

@@ -4,7 +4,7 @@ import { dispatchGlobal, runSideEffectGlobal } from '../../../../state/dispatch-
 import { filterSessions } from '../../../../state/selectors'
 import { abbreviatePath } from '../../../path-format'
 import { orderSessionsForDisplay } from '../../../session-ordering'
-import { useTokens } from '../../../theme'
+import { useTheme } from '../../../theme'
 import { uiTokens } from '../../../ui-tokens'
 import { Picker, type PickerItem } from '../shared/picker'
 
@@ -43,7 +43,7 @@ export function SessionPickerModal({
   selectedIndex,
   sessions,
 }: SessionPickerModalProps) {
-  const t = useTokens()
+  const t = useTheme()
   const ordered = orderSessionsForDisplay(sessions)
   const baselineOrder = ordered.map((s) => s.id)
   const filtered = filterSessions(ordered, filter)
@@ -57,10 +57,10 @@ export function SessionPickerModal({
       onClick: () => runSideEffectGlobal({ type: 'confirm-selected-session' }),
       onDelete: () => runSideEffectGlobal({ type: 'delete-selected-session' }),
       subtitle: session.projectPath ? (
-        <text fg={t.muted}>{abbreviatePath(session.projectPath)}</text>
+        <text fg={t.textMuted}>{abbreviatePath(session.projectPath)}</text>
       ) : undefined,
       title: (
-        <text fg={active ? t.palette.ink : t.muted}>
+        <text fg={active ? t.text : t.textMuted}>
           {formatSessionLine(session, currentSessionId, currentTabCount, displayIndex)}
         </text>
       ),
@@ -71,7 +71,7 @@ export function SessionPickerModal({
     key: '__create-new__',
     onClick: () => runSideEffectGlobal({ type: 'confirm-selected-session' }),
     title: (
-      <text fg={selectedIndex === filtered.length ? t.palette.ink : t.muted}>
+      <text fg={selectedIndex === filtered.length ? t.text : t.textMuted}>
         Create new workspace
       </text>
     ),
@@ -91,7 +91,7 @@ export function SessionPickerModal({
       selectedIndex={selectedIndex}
       emptyState={
         filtered.length === 0 ? (
-          <text fg={t.muted}>{getEmptyStateMessage(hasFilter)}</text>
+          <text fg={t.textMuted}>{getEmptyStateMessage(hasFilter)}</text>
         ) : undefined
       }
       onHover={(index) => dispatchGlobal({ index, type: 'set-modal-selection-index' })}

package/src/ui/components/modals/shared/form.tsx

@@ -2,7 +2,7 @@ import type { ModeId } from '@brimveyn/aimux-config'
 
 import { type ReactNode } from 'react'
 
-import { useTokens } from '../../../theme'
+import { useTheme } from '../../../theme'
 import { InputField } from '../../primitives/input-field'
 import { ListItem } from '../../primitives/list-item'
 import { ModalShell } from './modal-shell'
@@ -81,11 +81,11 @@ export function Form({
 }
 
 export function FieldLabel({ active = false, children, description }: FieldLabelProps) {
-  const t = useTokens()
+  const t = useTheme()
   return (
     <box flexDirection="column">
-      {children ? <text fg={active ? t.palette.ink : t.muted}>{children}</text> : null}
-      {description ? <text fg={t.muted}>{description}</text> : null}
+      {children ? <text fg={active ? t.text : t.textMuted}>{children}</text> : null}
+      {description ? <text fg={t.textMuted}>{description}</text> : null}
     </box>
   )
 }

package/src/ui/components/modals/shared/modal-keybinds-overlay.tsx

@@ -2,7 +2,7 @@ import type { ModeId } from '@brimveyn/aimux-config'
 
 import { describeBindings } from '../../../../input/keymap/describe-bindings'
 import { useKeymap } from '../../../keymap-context'
-import { useTokens } from '../../../theme'
+import { useTheme } from '../../../theme'
 import { Surface } from '../../primitives/surface'
 
 const KEYS_COLUMN_WIDTH = 12
@@ -13,7 +13,7 @@ interface ModalKeybindsOverlayProps {
 }
 
 export function ModalKeybindsOverlay({ limit, modeId }: ModalKeybindsOverlayProps) {
-  const t = useTokens()
+  const t = useTheme()
   const config = useKeymap()
   const bindings = describeBindings(config, modeId, {
     mergeAlternativesByDescription: true,
@@ -29,9 +29,9 @@ export function ModalKeybindsOverlay({ limit, modeId }: ModalKeybindsOverlayProp
         {entries.map((binding) => (
           <box key={binding.description ?? binding.keys} flexDirection="row">
             <box width={KEYS_COLUMN_WIDTH}>
-              <text fg={t.accent}>{binding.keysDisplay}</text>
+              <text fg={t.textMuted}>{binding.keysDisplay}</text>
             </box>
-            <text fg={t.muted}>{binding.description ?? ''}</text>
+            <text fg={t.textMuted}>{binding.description ?? ''}</text>
           </box>
         ))}
       </Surface>

package/src/ui/components/modals/shared/modal-shell.tsx

@@ -3,7 +3,7 @@ import type { ModeId } from '@brimveyn/aimux-config'
 import { type BoxRenderable, type OptimizedBuffer, RGBA } from '@opentui/core'
 import { type ReactNode } from 'react'
 
-import { useTokens, useTransparent } from '../../../theme'
+import { useTheme, useTransparent } from '../../../theme'
 import { ModalKeybindsOverlay } from './modal-keybinds-overlay'
 
 interface ModalShellProps {
@@ -57,9 +57,9 @@ export function ModalShell({
   title,
   width,
 }: ModalShellProps) {
-  const t = useTokens()
+  const t = useTheme()
   const transparent = useTransparent()
-  const bg = transparent ? 'transparent' : t.elevated
+  const bg = transparent ? 'transparent' : t.backgroundPanel
   return (
     <box
       position="absolute"
@@ -72,7 +72,7 @@ export function ModalShell({
     >
       <box
         border
-        borderColor={t.palette.primary}
+        borderColor={t.border}
         backgroundColor={bg}
         padding={1}
         width={width}
@@ -80,8 +80,8 @@ export function ModalShell({
       >
         <box width="100%" flexDirection="column" gap={listGap}>
           <box flexDirection="column">
-            <text fg={t.accent}>{title}</text>
-            {subtitle ? <text fg={t.muted}>{subtitle}</text> : null}
+            <text fg={t.text}>{title}</text>
+            {subtitle ? <text fg={t.textMuted}>{subtitle}</text> : null}
           </box>
           {children}
           {footer ? <box>{footer}</box> : null}

package/src/ui/components/modals/shared/picker.tsx

@@ -4,7 +4,7 @@ import type { ScrollBoxRenderable } from '@opentui/core'
 import { useTerminalDimensions } from '@opentui/react'
 import { type ReactNode, useLayoutEffect, useRef } from 'react'
 
-import { useTokens } from '../../../theme'
+import { useTheme } from '../../../theme'
 import { BareInput } from '../../primitives/bare-input'
 import { ListItem } from '../../primitives/list-item'
 import { ModalShell } from './modal-shell'
@@ -39,7 +39,7 @@ const VIEWPORT_HEIGHT_RATIO = 0.6
 const MODAL_CHROME_ROWS = 6
 
 function PickerItemCtas({ onDelete, onEdit }: { onEdit?: () => void; onDelete?: () => void }) {
-  const t = useTokens()
+  const t = useTheme()
   return (
     <box flexDirection="row" gap={1}>
       {onEdit ? (
@@ -49,7 +49,7 @@ function PickerItemCtas({ onDelete, onEdit }: { onEdit?: () => void; onDelete?:
             onEdit()
           }}
         >
-          <text fg={t.palette.primary}>[edit]</text>
+          <text fg={t.primary}>[edit]</text>
         </box>
       ) : null}
       {onDelete ? (
@@ -59,7 +59,7 @@ function PickerItemCtas({ onDelete, onEdit }: { onEdit?: () => void; onDelete?:
             onDelete()
           }}
         >
-          <text fg={t.palette.error}>[del]</text>
+          <text fg={t.error}>[del]</text>
         </box>
       ) : null}
     </box>
@@ -80,7 +80,7 @@ export function Picker({
   title,
   width,
 }: PickerProps) {
-  const t = useTokens()
+  const t = useTheme()
   const dimensions = useTerminalDimensions()
   const maxHeight = Math.max(6, Math.floor(dimensions.height * VIEWPORT_HEIGHT_RATIO))
   const listHeight = Math.max(1, maxHeight - MODAL_CHROME_ROWS)
@@ -140,7 +140,7 @@ export function Picker({
             if (item.group && item.group !== prevGroup) {
               nodes.push(
                 <box key={`group::${item.group}`} paddingLeft={1} paddingTop={index === 0 ? 0 : 1}>
-                  <text fg={t.palette.warning} wrapMode="none">
+                  <text fg={t.textMuted} wrapMode="none">
                     {item.group}
                   </text>
                 </box>

package/src/ui/components/modals/snippets/snippet-picker-modal.tsx

@@ -2,7 +2,7 @@ import type { SnippetRecord } from '../../../../state/types'
 
 import { dispatchGlobal, runSideEffectGlobal } from '../../../../state/dispatch-ref'
 import { filterSnippets } from '../../../../state/selectors'
-import { useTokens } from '../../../theme'
+import { useTheme } from '../../../theme'
 import { uiTokens } from '../../../ui-tokens'
 import { Picker, type PickerItem } from '../shared/picker'
 
@@ -27,7 +27,7 @@ export function SnippetPickerModal({
   selectedIndex,
   snippets,
 }: SnippetPickerModalProps) {
-  const t = useTokens()
+  const t = useTheme()
   const filtered = filterSnippets(snippets, filter)
 
   const items: PickerItem[] = filtered.map((snippet, index) => {
@@ -40,9 +40,9 @@ export function SnippetPickerModal({
       },
       onDelete: () => runSideEffectGlobal({ type: 'delete-selected-snippet' }),
       onEdit: () => runSideEffectGlobal({ type: 'edit-selected-snippet' }),
-      subtitle: <text fg={t.muted}>{truncateContent(snippet.content)}</text>,
+      subtitle: <text fg={t.textMuted}>{truncateContent(snippet.content)}</text>,
       title: (
-        <text fg={active ? t.palette.ink : t.muted}>
+        <text fg={active ? t.text : t.textMuted}>
           <strong>{snippet.name}</strong>
         </text>
       ),
@@ -60,7 +60,7 @@ export function SnippetPickerModal({
       items={items}
       selectedIndex={selectedIndex}
       emptyState={
-        <text fg={t.muted}>
+        <text fg={t.textMuted}>
           {filter ? 'No matching snippets.' : 'No snippets yet. Press n to create one.'}
         </text>
       }

package/src/ui/components/modals/tabs/new-tab-modal.tsx

@@ -3,7 +3,7 @@ import type { AssistantId } from '../../../../state/types'
 import { getAllAssistantOptions, getAssistantOption } from '../../../../pty/command-registry'
 import { dispatchGlobal, runSideEffectGlobal } from '../../../../state/dispatch-ref'
 import { filterAssistants } from '../../../../state/selectors'
-import { useTokens } from '../../../theme'
+import { useTheme } from '../../../theme'
 import { uiTokens } from '../../../ui-tokens'
 import { Form, TextField } from '../shared/form'
 import { Picker, type PickerItem } from '../shared/picker'
@@ -25,7 +25,7 @@ export function NewTabModal({
   filter,
   selectedIndex,
 }: NewTabModalProps) {
-  const t = useTokens()
+  const t = useTheme()
 
   if (editingCommand !== null) {
     const option =
@@ -60,11 +60,11 @@ export function NewTabModal({
       onEdit: () => dispatchGlobal({ assistantId: option.id, type: 'open-edit-custom-command' }),
       subtitle: (
         <box flexDirection="column">
-          <text fg={t.muted}>{option.description}</text>
-          {customCmd ? <text fg={t.palette.primary}>{customCmd}</text> : null}
+          <text fg={t.textMuted}>{option.description}</text>
+          {customCmd ? <text fg={t.primary}>{customCmd}</text> : null}
         </box>
       ),
-      title: <text fg={active ? t.palette.ink : t.muted}>{option.label}</text>,
+      title: <text fg={active ? t.text : t.textMuted}>{option.label}</text>,
     }
   })
 
@@ -78,7 +78,7 @@ export function NewTabModal({
       cursorPos={cursorPos}
       items={items}
       selectedIndex={selectedIndex}
-      emptyState={<text fg={t.muted}>No matching assistants.</text>}
+      emptyState={<text fg={t.textMuted}>No matching assistants.</text>}
       onHover={(index) => dispatchGlobal({ index, type: 'set-modal-selection-index' })}
     />
   )

package/src/ui/components/modals/themes/theme-picker-modal.tsx

@@ -1,9 +1,10 @@
 import { useLayoutEffect, useMemo } from 'react'
 
+import type { ThemeId } from '../../../themes'
+
 import { dispatchGlobal, runSideEffectGlobal } from '../../../../state/dispatch-ref'
-import { filterThemeIds } from '../../../filter-themes'
-import { useTokens, useTransparent } from '../../../theme'
-import { type ThemeId, THEMES } from '../../../themes'
+import { filterThemeIds, themeDisplayName } from '../../../filter-themes'
+import { useTheme, useTransparent } from '../../../theme'
 import { uiTokens } from '../../../ui-tokens'
 import { Picker, type PickerItem } from '../shared/picker'
 
@@ -25,7 +26,7 @@ export function ThemePickerModal({
   filter,
   selectedIndex,
 }: ThemePickerModalProps) {
-  const t = useTokens()
+  const t = useTheme()
   const transparent = useTransparent()
   const filtered = useMemo(() => filterThemeIds(filter), [filter])
 
@@ -35,22 +36,18 @@ export function ThemePickerModal({
 
   const effectiveIndex = clampSelection(selectedIndex, filtered.length)
 
-  const items: PickerItem[] = filtered.flatMap((id, rowIndex) => {
-    const entry = THEMES[id]
-    if (!entry) return []
+  const items: PickerItem[] = filtered.map((id, rowIndex) => {
     const active = rowIndex === effectiveIndex
     const isCurrent = id === currentThemeId
-    return [
-      {
-        key: id,
-        onClick: () => {
-          dispatchGlobal({ type: 'close-modal' })
-          runSideEffectGlobal({ action: 'confirm', type: 'apply-theme' })
-        },
-        title: <text fg={active ? t.palette.ink : t.muted}>{entry.displayName}</text>,
-        trailing: isCurrent ? <text fg={t.palette.primary}>current</text> : undefined,
+    return {
+      key: id,
+      onClick: () => {
+        dispatchGlobal({ type: 'close-modal' })
+        runSideEffectGlobal({ action: 'confirm', type: 'apply-theme' })
       },
-    ]
+      title: <text fg={active ? t.text : t.textMuted}>{themeDisplayName(id)}</text>,
+      trailing: isCurrent ? <text fg={t.primary}>current</text> : undefined,
+    }
   })
 
   return (
@@ -62,15 +59,15 @@ export function ThemePickerModal({
       cursorPos={cursorPos}
       footer={
         <box flexDirection="column" gap={0}>
-          <text fg={t.hover}>
+          <text fg={t.textMuted}>
             {filtered.length === 0 ? '' : ` ${effectiveIndex + 1} / ${filtered.length}`}
           </text>
-          <text fg={t.muted}>{` transparent: ${transparent ? 'on' : 'off'} (ctrl-t)`}</text>
+          <text fg={t.textMuted}>{` transparent: ${transparent ? 'on' : 'off'} (ctrl-t)`}</text>
         </box>
       }
       items={items}
       selectedIndex={effectiveIndex}
-      emptyState={<text fg={t.muted}>No themes available.</text>}
+      emptyState={<text fg={t.textMuted}>No themes available.</text>}
       onHover={(index) => dispatchGlobal({ index, type: 'set-modal-selection-index' })}
     />
   )

package/src/ui/components/overlays/ai-usage/ai-usage-indicator.tsx

@@ -2,7 +2,7 @@ import type { AIUsageTool } from '@brimveyn/aimux-config'
 
 import { useAIUsageStore } from '../../../../state/ai-usage-store'
 import { dispatchGlobal } from '../../../../state/dispatch-ref'
-import { useBg, useTokens } from '../../../theme'
+import { useTheme } from '../../../theme'
 
 const TOOL_ICON: Record<AIUsageTool, string> = {
   claude: 'CC',
@@ -47,8 +47,8 @@ function formatResetIn(snap: {
 }
 
 export function AIUsageIndicator() {
-  const t = useTokens()
-  const bg = useBg('elevated')
+  const t = useTheme()
+  const bg = t.backgroundPanel
   const enabled = useAIUsageStore((s) => s.enabled)
   const snapshots = useAIUsageStore((s) => s.snapshots)
 
@@ -74,7 +74,7 @@ export function AIUsageIndicator() {
         backgroundColor={bg}
         onMouseDown={openModal}
       >
-        <text fg={t.muted}>…</text>
+        <text fg={t.textMuted}>…</text>
       </box>
     )
   }
@@ -95,7 +95,7 @@ export function AIUsageIndicator() {
               backgroundColor={bg}
               onMouseDown={openModal}
             >
-              <text fg={t.palette.error} selectable={false}>
+              <text fg={t.error} selectable={false}>
                 {`${icon} —`}
               </text>
             </box>
@@ -104,11 +104,11 @@ export function AIUsageIndicator() {
 
         if (snap.percent !== null) {
           const p = Math.round(snap.percent)
-          let color = t.palette.success
+          let color = t.success
           if (p >= 85) {
-            color = t.palette.error
+            color = t.error
           } else if (p >= 60) {
-            color = t.palette.warning
+            color = t.warning
           }
           const { empty, filled } = buildBar(snap.percent)
           const reset = formatResetIn(snap)
@@ -128,14 +128,14 @@ export function AIUsageIndicator() {
               <text fg={color} selectable={false}>
                 {filled}
               </text>
-              <text fg={t.muted} selectable={false}>
+              <text fg={t.textMuted} selectable={false}>
                 {empty}
               </text>
-              <text fg={t.palette.ink} selectable={false}>
+              <text fg={t.text} selectable={false}>
                 {` ${pctText}`}
               </text>
               {reset ? (
-                <text fg={t.muted} selectable={false}>
+                <text fg={t.textMuted} selectable={false}>
                   {` · ${reset}`}
                 </text>
               ) : null}
@@ -152,7 +152,7 @@ export function AIUsageIndicator() {
             backgroundColor={bg}
             onMouseDown={openModal}
           >
-            <text fg={t.muted} selectable={false}>
+            <text fg={t.textMuted} selectable={false}>
               {`${icon} ${formatTokens(snap.tokens.total)}`}
             </text>
           </box>

package/src/ui/components/overlays/context-menu/context-menu-overlay.tsx

@@ -7,12 +7,12 @@ import {
   type ContextMenuState,
   subscribeContextMenu,
 } from '../../../context-menu/controller'
-import { useTokens } from '../../../theme'
+import { useTheme } from '../../../theme'
 
 export function ContextMenuOverlay() {
   const [menu, setMenu] = useState<ContextMenuState | null>(null)
   const [selected, setSelected] = useState(0)
-  const t = useTokens()
+  const t = useTheme()
   const terminalCols = useAppStore((s) => s.layout.terminalCols)
   const terminalRows = useAppStore((s) => s.layout.terminalRows)
 
@@ -79,8 +79,8 @@ export function ContextMenuOverlay() {
         width={width}
         flexDirection="column"
         border
-        borderColor={t.palette.primary}
-        backgroundColor={t.elevated}
+        borderColor={t.border}
+        backgroundColor={t.backgroundPanel}
         onMouseDown={(e) => {
           e.stopPropagation()
         }}
@@ -94,7 +94,7 @@ export function ContextMenuOverlay() {
               flexShrink={0}
               paddingLeft={1}
               paddingRight={1}
-              backgroundColor={active ? t.selected : undefined}
+              backgroundColor={active ? t.backgroundElement : undefined}
               onMouseOver={() => setSelected(index)}
               onMouseDown={(e) => {
                 e.preventDefault()
@@ -104,7 +104,7 @@ export function ContextMenuOverlay() {
                 onSelect()
               }}
             >
-              <text fg={active ? t.palette.ink : t.muted} selectable={false}>
+              <text fg={active ? t.text : t.textMuted} selectable={false}>
                 {label}
               </text>
             </box>

package/src/ui/components/overlays/pending-chord-overlay.tsx

@@ -2,11 +2,11 @@ import { parseKeyNotation } from '../../../input/keymap/key-chord'
 import { formatChord } from '../../../input/keymap/key-format'
 import { useAppStore } from '../../../state/app-store'
 import { useKeymap } from '../../keymap-context'
-import { useTokens } from '../../theme'
+import { useTheme } from '../../theme'
 import { Surface } from '../primitives/surface'
 
 export function PendingChordOverlay() {
-  const t = useTokens()
+  const t = useTheme()
   const pendingChords = useAppStore((s) => s.pendingChords)
   const modalOpen = useAppStore((s) => s.modal.type !== null)
   const config = useKeymap()
@@ -20,9 +20,9 @@ export function PendingChordOverlay() {
     <box position="absolute" bottom={modalOpen ? 10 : 2} right={1}>
       <Surface tone="elevated" paddingLeft={1} paddingRight={1}>
         <box flexDirection="row">
-          <text fg={t.muted}>pending: </text>
-          <text fg={t.palette.primary}>{display}</text>
-          <text fg={t.muted}> …</text>
+          <text fg={t.textMuted}>pending: </text>
+          <text fg={t.primary}>{display}</text>
+          <text fg={t.textMuted}> …</text>
         </box>
       </Surface>
     </box>

package/src/ui/components/primitives/bare-input.tsx

@@ -1,4 +1,4 @@
-import { useTokens } from '../../theme'
+import { useTheme } from '../../theme'
 
 interface BareInputProps {
   value: string
@@ -7,10 +7,10 @@ interface BareInputProps {
 }
 
 export function BareInput({ cursorPos, placeholder = '', value }: BareInputProps) {
-  const t = useTokens()
-  const fg = t.palette.ink
-  const bg = t.bg
-  const placeholderFg = t.faint
+  const t = useTheme()
+  const fg = t.text
+  const bg = t.background
+  const placeholderFg = t.textMuted
 
   if (!value) {
     const firstChar = placeholder.charAt(0) || ' '

package/src/ui/components/primitives/input-field.tsx

@@ -1,4 +1,4 @@
-import { useTokens } from '../../theme'
+import { useTheme } from '../../theme'
 import { Surface } from './surface'
 
 interface InputFieldProps {
@@ -9,13 +9,13 @@ interface InputFieldProps {
 }
 
 export function InputField({ active, cursorPos, placeholder, value }: InputFieldProps) {
-  const t = useTokens()
-  const fg = active ? t.palette.ink : t.muted
+  const t = useTheme()
+  const fg = active ? t.text : t.textMuted
   if (!active) {
     const showPlaceholder = !value && !!placeholder
     return (
       <Surface tone="input" padding={1}>
-        <text fg={showPlaceholder ? t.faint : fg}>{showPlaceholder ? placeholder : value}</text>
+        <text fg={showPlaceholder ? t.textMuted : fg}>{showPlaceholder ? placeholder : value}</text>
       </Surface>
     )
   }
@@ -32,7 +32,7 @@ export function InputField({ active, cursorPos, placeholder, value }: InputField
     <Surface tone="inputActive" padding={1}>
       <text fg={fg}>
         {before}
-        <span bg={t.palette.ink} fg={t.bg}>
+        <span bg={t.text} fg={t.background}>
           {cursorDisplay}
         </span>
         {trailing}

package/src/ui/components/primitives/list-item.tsx

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react'
 
-import { useTokens } from '../../theme'
+import { useTheme } from '../../theme'
 import { Surface } from './surface'
 
 export type ListItemDirection = 'row' | 'column'
@@ -28,31 +28,36 @@ export function ListItem({
   title,
   trailing,
 }: ListItemProps) {
-  const t = useTokens()
+  const t = useTheme()
   const isRow = direction === 'row'
+  const inner = (
+    <box flexDirection="column">
+      <box flexDirection="row">
+        {isRow ? null : (
+          <>
+            <text fg={active ? t.primary : t.textMuted}>{active ? '›' : '·'}</text>
+            <text> </text>
+          </>
+        )}
+        {leading}
+        {leading ? <text> </text> : null}
+        <box flexGrow={isRow ? 0 : 1}>{title}</box>
+        {trailing ? <box>{trailing}</box> : null}
+      </box>
+      {subtitle ? <box paddingLeft={2}>{subtitle}</box> : null}
+    </box>
+  )
   return (
     <box id={id} onMouseOver={onHover} onMouseDown={onClick}>
-      <Surface
-        tone={active ? 'selected' : 'elevated'}
-        paddingLeft={isRow ? 2 : 1}
-        paddingRight={isRow ? 2 : 1}
-      >
-        <box flexDirection="column">
-          <box flexDirection="row">
-            {isRow ? null : (
-              <>
-                <text fg={active ? t.palette.primary : t.hover}>{active ? '›' : '·'}</text>
-                <text> </text>
-              </>
-            )}
-            {leading}
-            {leading ? <text> </text> : null}
-            <box flexGrow={isRow ? 0 : 1}>{title}</box>
-            {trailing ? <box>{trailing}</box> : null}
-          </box>
-          {subtitle ? <box paddingLeft={2}>{subtitle}</box> : null}
+      {active ? (
+        <Surface tone="selected" paddingLeft={isRow ? 2 : 1} paddingRight={isRow ? 2 : 1}>
+          {inner}
+        </Surface>
+      ) : (
+        <box paddingLeft={isRow ? 2 : 1} paddingRight={isRow ? 2 : 1}>
+          {inner}
         </box>
-      </Surface>
+      )}
     </box>
   )
 }