@brimveyn/aimux 1.23.7 → 1.24.0

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

@@ -9,6 +9,7 @@ import {
   type ContextMenuState,
   subscribeContextMenu,
 } from '../../../context-menu/controller'
+import { useSelectionInk } from '../../../selection-ink'
 import { useTheme, useTransparent } from '../../../theme'
 import { fillBorderedBoxInterior } from '../../../transparent-fill'
 
@@ -28,6 +29,7 @@ const MenuItem = memo(function MenuItem({
   width: number
 }) {
   const t = useTheme()
+  const ink = useSelectionInk()
   const handleMouseOver = useCallback(() => onHover(index), [index, onHover])
   const handleMouseDown = useCallback(
     (e: OtuiMouseEvent) => {
@@ -45,11 +47,11 @@ const MenuItem = memo(function MenuItem({
       flexShrink={0}
       paddingLeft={1}
       paddingRight={1}
-      backgroundColor={active ? t.backgroundElement : undefined}
+      backgroundColor={active ? t.primary : undefined}
       onMouseOver={handleMouseOver}
       onMouseDown={handleMouseDown}
     >
-      <text fg={active ? t.text : t.textMuted} selectable={false}>
+      <text fg={active ? ink : t.textMuted} selectable={false}>
         {label}
       </text>
     </box>
@@ -131,9 +133,13 @@ export function ContextMenuOverlay() {
         left={left}
         width={width}
         flexDirection="column"
-        border
+        // backgroundElement, not backgroundPanel: this pops up over the bars as
+        // often as over the terminal, and the bars are panel — a panel menu on a
+        // panel bar has no edge. Transparent mode keeps the border for the same
+        // reason the modal does: there is no background there to stand on.
+        border={transparent}
         borderColor={t.border}
-        backgroundColor={transparent ? 'transparent' : t.backgroundPanel}
+        backgroundColor={transparent ? 'transparent' : t.backgroundElement}
         renderAfter={transparent ? fillBorderedBoxInterior : undefined}
         onMouseDown={handleMenuMouseDown}
       >

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

@@ -1,13 +1,23 @@
 import { memo, type ReactNode, useMemo } from 'react'
 
+import { useSelectionInk } from '../../selection-ink'
 import { useTheme } from '../../theme'
 import { Surface } from './surface'
 
 export type ListItemDirection = 'row' | 'column'
 
+/**
+ * How the selected row is filled. `primary` by default — the accent fill every
+ * picker and nav list wants. `elevated` is for a row that carries a colour scale
+ * of its own (the settings rows and their gauges): an accent behind those would
+ * swallow the very thing the row is there to show.
+ */
+export type ListItemFill = 'primary' | 'elevated'
+
 interface ListItemProps {
   active: boolean
   direction?: ListItemDirection
+  fill?: ListItemFill
   id?: string
   index?: number
   leading?: ReactNode
@@ -23,6 +33,7 @@ interface ListItemProps {
 export const ListItem = memo(function ListItem({
   active,
   direction = 'column',
+  fill = 'primary',
   id,
   index,
   leading,
@@ -35,7 +46,14 @@ export const ListItem = memo(function ListItem({
   trailing,
 }: ListItemProps) {
   const t = useTheme()
+  const ink = useSelectionInk()
   const isRow = direction === 'row'
+  const filled = active && fill === 'primary'
+  // The cursor glyph: the selection ink on a filled row, the accent on a row
+  // that only lifts, muted on the rest.
+  let markerFg = t.textMuted
+  if (filled) markerFg = ink
+  else if (active) markerFg = t.primary
   // Build per-item handlers from the stable index-based callbacks so callers can
   // avoid creating fresh closures inside their list `.map()`.
   const handleHover = useMemo<(() => void) | undefined>(() => {
@@ -51,7 +69,7 @@ export const ListItem = memo(function ListItem({
       <box flexDirection="row">
         {isRow ? null : (
           <>
-            <text fg={active ? t.primary : t.textMuted}>{active ? '›' : '·'}</text>
+            <text fg={markerFg}>{active ? '›' : '·'}</text>
             <text> </text>
           </>
         )}
@@ -66,7 +84,11 @@ export const ListItem = memo(function ListItem({
   return (
     <box id={id} onMouseOver={handleHover} onMouseDown={handleClick}>
       {active ? (
-        <Surface tone="selected" paddingLeft={isRow ? 2 : 1} paddingRight={isRow ? 2 : 1}>
+        <Surface
+          tone={fill === 'primary' ? 'selected' : 'elevated'}
+          paddingLeft={isRow ? 2 : 1}
+          paddingRight={isRow ? 2 : 1}
+        >
           {inner}
         </Surface>
       ) : (

package/src/ui/components/primitives/surface.tsx

@@ -10,8 +10,11 @@ function toneToToken(tone: SurfaceTone): TuiColorToken {
   switch (tone) {
     case 'elevated':
       return 'backgroundElement'
+    // Filled with the theme's own accent, not another step of grey: a
+    // selection is the one thing on the screen you always need to find without
+    // reading. Everything drawn on it uses `useSelectionInk`.
     case 'selected':
-      return 'backgroundElement'
+      return 'primary'
     case 'input':
       return 'backgroundElement'
     case 'inputActive':

package/src/ui/components/settings/row-value.tsx

@@ -74,9 +74,16 @@ function valueColor(row: SettingRow, value: SettingValue, t: ResolvedTuiTheme):
  * list would repaint it at the rate the terminals print.
  */
 export const RowValue = memo(function RowValue({
+  fg,
   maxWidth,
   row,
 }: {
+  /**
+   * Overrides the value's own colour. A row filled with `primary` has room for
+   * one ink, so the search results hand theirs down rather than let a green
+   * toggle sit on the accent.
+   */
+  fg?: string
   /** Cropped rather than wrapped: a row that grows a line shifts the list. */
   maxWidth?: number
   row: SettingRow
@@ -86,7 +93,7 @@ export const RowValue = memo(function RowValue({
   const value = useAppStore((s) => readRow(row, { state: s, values }))
   const text = formatValue(row, value)
   return (
-    <text fg={valueColor(row, value, t)} wrapMode="none">
+    <text fg={fg ?? valueColor(row, value, t)} wrapMode="none">
       {maxWidth === undefined ? text : truncate(text, maxWidth)}
     </text>
   )

package/src/ui/components/settings/settings-footer.tsx

@@ -7,7 +7,6 @@ import { useAppStore } from '../../../state/app-store'
 import { dispatchGlobal } from '../../../state/dispatch-ref'
 import { useTheme } from '../../theme'
 import { truncate } from '../../truncate'
-import { Rule } from '../stats/shared'
 import { describeValue } from './row-value'
 
 /**
@@ -121,7 +120,9 @@ export const SettingsFooter = memo(function SettingsFooter({
 
   return (
     <box flexDirection="column" flexShrink={0} paddingLeft={pad} paddingRight={pad}>
-      <Rule width={width} />
+      {/* A blank row, not a rule: the footer is set off from the list by the gap,
+          the same way the sidebar's is. */}
+      <box height={1} flexShrink={0} />
       <box width={width} flexDirection="row" flexShrink={0}>
         <box flexGrow={1} flexShrink={1}>
           <text fg={t.textMuted} selectable={false} wrapMode="none">

package/src/ui/components/settings/settings-row.tsx

@@ -119,6 +119,9 @@ export const SettingsRow = memo(function SettingsRow({
     <ListItem
       id={`setting-row-${row.id}`}
       active={active}
+      // Lifted, not filled: the gauge is drawn in `primary` and the value's
+      // colour is its state, both of which an accent fill would swallow.
+      fill="elevated"
       index={index}
       onClickIndex={onSelect}
       leading={<text fg={fromConfigFile ? t.warning : t.secondary}>{mark}</text>}

package/src/ui/components/settings/settings-search-bar.tsx

@@ -22,14 +22,12 @@ export const SettingsSearchBar = memo(function SettingsSearchBar({ width }: { wi
     dispatchGlobal({ type: 'open-settings-search' })
   }, [])
 
-  // Filled, bordered in the active colour, and the prompt at full strength: it
-  // is the one control on a read-mostly screen, and a control drawn like the
-  // text around it is a control nobody sees.
+  // Filled, and the prompt at full strength: it is the one control on a
+  // read-mostly screen, and a control drawn like the text around it is a control
+  // nobody sees. The fill is enough to say so — the frame it used to wear cost
+  // two rows to repeat what the fill already said.
   return (
     <box
-      border
-      borderStyle="rounded"
-      borderColor={t.borderActive}
       backgroundColor={t.backgroundElement}
       width={width}
       flexShrink={0}

package/src/ui/components/settings/settings-view.tsx

@@ -10,9 +10,10 @@ import { useAppStore } from '../../../state/app-store'
 import { clampBarWidth } from '../../../state/bars'
 import { dispatchGlobal, runSideEffectGlobal } from '../../../state/dispatch-ref'
 import { useScrollActiveIntoView } from '../../hooks/use-scroll-active-into-view'
+import { useSelectionInk } from '../../selection-ink'
 import { useTheme } from '../../theme'
 import { ListItem } from '../primitives/list-item'
-import { Muted, Rule, Section, TileRow } from '../stats/shared'
+import { Muted, Section, TileRow } from '../stats/shared'
 import { SettingsFooter } from './settings-footer'
 import { CONFIG_FILE_MARK, SettingsRow, TOUCHED_MARK } from './settings-row'
 import { SettingsSearchBar } from './settings-search-bar'
@@ -23,6 +24,8 @@ const SETTINGS_GLYPH = '\u{2699}'
 
 /** One padding column either side, the same inset the stats pages sit in. */
 const PAGE_PAD = 1
+/** Matches the bar's own gutter, so the nav and a bar line up to the column. */
+const NAV_GUTTER = 2
 
 /** A section and the rows it owns, each keeping the index the cursor holds. */
 interface Group {
@@ -71,6 +74,7 @@ function groupBySection(hits: SettingSearchHit[]): Group[] {
  */
 export const SettingsView = memo(function SettingsView() {
   const t = useTheme()
+  const ink = useSelectionInk()
   // The cursor is all this component needs from the app state. Rows read their
   // own values, so nothing here re-renders at the rate the terminals print.
   const rowIndex = useAppStore((s) => s.settings.rowIndex)
@@ -146,14 +150,21 @@ export const SettingsView = memo(function SettingsView() {
     [hits.length, touchedCount, configCount]
   )
 
-  // Same 1-cell seam the bar draws between itself and the terminal, so the two
+  // The same gutter the bar draws between itself and the terminal, so the two
   // views line up to the column.
-  const navContentWidth = Math.max(1, navWidth - 1)
+  const navContentWidth = Math.max(1, navWidth - NAV_GUTTER)
   const usable = Math.max(24, dimensions.width - navWidth - 2 - PAGE_PAD * 2)
 
   return (
     <box flexDirection="row" flexGrow={1} overflow="hidden">
-      <box width={navWidth} flexDirection="row" overflow="hidden" backgroundColor={t.background}>
+      {/* The nav is this screen's bar, so it wears the bar's surface: panel
+          against the page the content pane keeps. */}
+      <box
+        width={navWidth}
+        flexDirection="row"
+        overflow="hidden"
+        backgroundColor={t.backgroundPanel}
+      >
         <box width={navContentWidth} flexDirection="column" overflow="hidden">
           <box paddingLeft={1} paddingRight={1}>
             <text fg={t.textMuted}>Settings</text>
@@ -169,12 +180,12 @@ export const SettingsView = memo(function SettingsView() {
                 index={index}
                 onClickIndex={handleSectionClick}
                 title={
-                  <text fg={group.sectionId === current?.sectionId ? t.text : t.textMuted}>
+                  <text fg={group.sectionId === current?.sectionId ? ink : t.textMuted}>
                     {`${group.glyph} ${group.label}`}
                   </text>
                 }
                 trailing={
-                  group.sectionId === current?.sectionId ? <text fg={t.primary}>›</text> : undefined
+                  group.sectionId === current?.sectionId ? <text fg={ink}>›</text> : undefined
                 }
               />
             ))}
@@ -185,19 +196,13 @@ export const SettingsView = memo(function SettingsView() {
             </text>
           </box>
         </box>
-        <box width={1} flexShrink={0} backgroundColor={t.border} />
+        <box width={NAV_GUTTER} flexShrink={0} backgroundColor={t.backgroundPanel} />
       </box>
-      {/* The pane the terminal would be in, with the same border — the content
-          keeps the inset it had instead of jumping to the edge of the screen. */}
-      <box
-        border
-        borderColor={t.borderActive}
-        title={`${SETTINGS_GLYPH} Settings`}
-        padding={0}
-        flexDirection="column"
-        flexGrow={1}
-        backgroundColor={t.background}
-      >
+      {/* The pane the terminal would be in, with the same inset — padding where
+          that one has padding, and no frame, for the same reason. The titled
+          border said "Settings" a third time, after the nav heading and the
+          section header. */}
+      <box padding={1} flexDirection="column" flexGrow={1} backgroundColor={t.background}>
         {/* Outside the scroll: the way to find a setting should not be a thing
             you have to scroll back up to. */}
         <box flexShrink={0} paddingLeft={PAGE_PAD} paddingRight={PAGE_PAD} paddingTop={1}>
@@ -212,14 +217,13 @@ export const SettingsView = memo(function SettingsView() {
         >
           <box flexDirection="column" paddingLeft={PAGE_PAD} paddingRight={PAGE_PAD}>
             <TileRow tiles={tiles} usable={usable} />
-            <box paddingTop={1} paddingBottom={1} flexShrink={0}>
-              <Rule width={usable} />
-            </box>
+            <box height={1} flexShrink={0} />
             {current === undefined ? (
               <Muted>Nothing to configure here yet.</Muted>
             ) : (
               <Section
                 glyph={current.glyph}
+                rule={false}
                 title={current.label}
                 // Pinned to the same right edge every note on the screen lands on.
                 note={String(current.rows.length)}

package/src/ui/components/stats/stats-view.tsx

@@ -7,6 +7,7 @@ import { useAppStore } from '../../../state/app-store'
 import { clampBarWidth } from '../../../state/bars'
 import { dispatchGlobal } from '../../../state/dispatch-ref'
 import { STATS_PAGES, statsPageAt } from '../../../state/stats-pages'
+import { useSelectionInk } from '../../selection-ink'
 import { useTheme } from '../../theme'
 import { ListItem } from '../primitives/list-item'
 import { AimuxPage } from './aimux-page'
@@ -26,6 +27,7 @@ const COLUMN_CONTENT_OPTIONS = { flexDirection: 'column' as const, gap: 0 }
  */
 export const StatsView = memo(function StatsView() {
   const t = useTheme()
+  const ink = useSelectionInk()
   const stats = useAppStore((s) => s.stats)
   const navWidth = useAppStore((s) => clampBarWidth(s.bars.left.width))
   const dimensions = useTerminalDimensions()
@@ -104,11 +106,11 @@ export const StatsView = memo(function StatsView() {
                 index={index}
                 onClickIndex={handlePageClick}
                 title={
-                  <text fg={index === stats.pageIndex ? t.text : t.textMuted}>
+                  <text fg={index === stats.pageIndex ? ink : t.textMuted}>
                     {`${entry.glyph} ${entry.label}`}
                   </text>
                 }
-                trailing={index === stats.pageIndex ? <text fg={t.primary}>›</text> : undefined}
+                trailing={index === stats.pageIndex ? <text fg={ink}>›</text> : undefined}
               />
             ))}
           </box>

package/src/ui/selection-ink.ts

@@ -0,0 +1,20 @@
+import { useBaseTheme } from './theme'
+
+/**
+ * The one legible colour on a selected list row.
+ *
+ * A selected row is filled with `primary`, so everything drawn on it has to read
+ * against that rather than against the modal behind it — the page background
+ * does, which is the same trick the status bar's accent tiles already use for
+ * their mode and version badges. Every tone the caller would otherwise use on
+ * that row (muted subtitle, warning mark, accent badge) collapses to this one:
+ * a fill that strong leaves room for exactly one ink.
+ *
+ * Always the opaque base, never the live theme. In transparent mode
+ * `t.background` resolves to 'transparent' and the text would be painted away,
+ * while the fill itself stays opaque — `primary` is not one of the chrome
+ * background tokens the transparent overlay rewrites.
+ */
+export function useSelectionInk(): string {
+  return useBaseTheme().background
+}