@brimveyn/aimux 1.7.0 → 1.7.2

package/src/ui/components/diff-renderer/fold-strip.tsx

@@ -1,4 +1,4 @@
-import { useBg, useTheme } from '../../theme'
+import { useBg, useTokens } from '../../theme'
 import { FOLD_STEP, type FoldInfo } from './build-rows'
 import { type FoldDispatch } from './pierre-diff'
 
@@ -8,11 +8,11 @@ interface Props {
 }
 
 function Button({ label, onPress }: { label: string; onPress: () => void }) {
-  const theme = useTheme()
-  const bg = useBg('sideBar.background')
+  const t = useTokens()
+  const bg = useBg('elevated')
   return (
     <box paddingLeft={1} paddingRight={1} backgroundColor={bg} onMouseDown={onPress}>
-      <text fg={theme.colors['textLink.foreground']}>{label}</text>
+      <text fg={t.palette.primary}>{label}</text>
     </box>
   )
 }
@@ -22,8 +22,8 @@ function Spacer() {
 }
 
 export function FoldStrip({ dispatch, fold }: Props) {
-  const theme = useTheme()
-  const headerBg = useBg('sideBarSectionHeader.background')
+  const t = useTokens()
+  const headerBg = useBg('elevated')
   const { bottomExpanded, foldId, hidden, topExpanded, total } = fold
   const stepUp = Math.min(FOLD_STEP, hidden)
   const stepDown = Math.min(FOLD_STEP, hidden)
@@ -71,7 +71,7 @@ export function FoldStrip({ dispatch, fold }: Props) {
 
   return (
     <box flexDirection="row" backgroundColor={headerBg} paddingLeft={1} paddingRight={1}>
-      <text fg={theme.colors['descriptionForeground']}>{`⋯ ${hidden} hidden `}</text>
+      <text fg={t.muted}>{`⋯ ${hidden} hidden `}</text>
       {controls}
     </box>
   )

package/src/ui/components/diff-renderer/highlight.ts

@@ -1,6 +1,6 @@
 import type { ThemedToken } from 'shiki'
 
-import { ensureShikiLang, ensureShikiTheme, getShikiHighlighter } from '../../shiki'
+import { ensureActiveShikiTheme, ensureShikiLang, getShikiHighlighter } from '../../shiki'
 
 export interface HighlightSpan {
   bold?: boolean
@@ -22,24 +22,20 @@ export function tokenToSpan(token: ThemedToken): HighlightSpan {
   }
 }
 
-export async function tokenizeSide(
-  lines: string[],
-  lang: string,
-  theme: string
-): Promise<ThemedToken[][]> {
+export async function tokenizeSide(lines: string[], lang: string): Promise<ThemedToken[][]> {
   if (lines.length === 0) return []
   const highlighter = await getShikiHighlighter()
-  const [langOk, themeOk] = await Promise.all([
+  const [langOk, themeName] = await Promise.all([
     ensureShikiLang(highlighter, lang),
-    ensureShikiTheme(highlighter, theme),
+    ensureActiveShikiTheme(highlighter),
   ])
-  if (!langOk || !themeOk) return []
+  if (!langOk) return []
   try {
     const result = highlighter.codeToTokens(lines.join(''), {
       // eslint-disable-next-line typescript/no-explicit-any
       lang: lang as any,
       // eslint-disable-next-line typescript/no-explicit-any
-      theme: theme as any,
+      theme: themeName as any,
     })
     return result.tokens
   } catch {

package/src/ui/components/diff-renderer/pierre-diff.tsx

@@ -8,7 +8,7 @@ import type { ThemeId } from '../../themes'
 import { useAppStore } from '../../../state/app-store'
 import { dispatchGlobal } from '../../../state/dispatch-ref'
 import { type FoldState } from '../../../state/types'
-import { useTheme } from '../../theme'
+import { useTokens } from '../../theme'
 import { buildSplitRows, buildUnifiedRows, firstChangeRowOffset, gutterWidth } from './build-rows'
 import { SplitView, type SplitViewHandle } from './split-view'
 import { StackedView, type StackedViewHandle } from './stacked-view'
@@ -45,7 +45,7 @@ export const PierreDiff = forwardRef<PierreDiffHandle, Props>(function PierreDif
   { cacheKey, diff, path, themeId, view },
   ref
 ) {
-  const theme = useTheme()
+  const t = useTokens()
   const preparation = useDiffPreparation(cacheKey, diff, path, themeId)
   const file = preparation.file ?? undefined
   const highlights: DiffHighlights = preparation.highlights
@@ -117,7 +117,7 @@ export const PierreDiff = forwardRef<PierreDiffHandle, Props>(function PierreDif
   if (!file) {
     return (
       <box flexGrow={1} padding={1}>
-        <text fg={theme.colors['descriptionForeground']}>
+        <text fg={t.muted}>
           {preparation.preparing ? 'Preparing diff…' : '(could not parse diff)'}
         </text>
       </box>

package/src/ui/components/diff-renderer/prepare-diff.ts

@@ -14,7 +14,6 @@ export interface PreparedDiff {
 
 interface PrepareOptions {
   signal?: AbortSignal
-  themeId: string
   /** Skip Shiki for big files to keep prepare under a few tens of ms. */
   skipHighlightThreshold?: number
 }
@@ -55,11 +54,11 @@ export async function prepareDiff(
 
   await yieldToEventLoop()
   throwIfAborted(opts.signal)
-  const add = await tokenizeSide(file.additionLines, filetype, opts.themeId)
+  const add = await tokenizeSide(file.additionLines, filetype)
   throwIfAborted(opts.signal)
   await yieldToEventLoop()
   throwIfAborted(opts.signal)
-  const del = await tokenizeSide(file.deletionLines, filetype, opts.themeId)
+  const del = await tokenizeSide(file.deletionLines, filetype)
   throwIfAborted(opts.signal)
 
   return { file, filetype, hash, highlights: { add, del } }

package/src/ui/components/diff-renderer/split-view.tsx

@@ -13,14 +13,11 @@ import type { DiffHighlights, FoldDispatch } from './pierre-diff'
 
 import { getScrollViewportDelta } from '../../../app-runtime/terminal-mouse-adapter'
 import { scrollGitDiff } from '../../git-view-controls'
-import { useBg, useTheme, useTransparent } from '../../theme'
+import { useBg, useTokens, useTransparent } from '../../theme'
 import { buildSplitRows, gutterWidth, type SplitCell, type SplitRowOrHeader } from './build-rows'
 import { FoldStrip } from './fold-strip'
 import { tokenToSpan } from './highlight'
 
-// Cap DOM size for extreme diffs. Rows beyond this are hidden behind a banner;
-// users scroll within the visible window. Shiki highlighting is already skipped
-// upstream in prepare-diff for similarly large diffs.
 const LARGE_ROW_CAP = 5000
 
 export interface SplitViewHandle {
@@ -48,7 +45,7 @@ export const SplitView = forwardRef<SplitViewHandle, Props>(function SplitView(
   { contentWidth, file, foldDispatch, folds, highlights },
   ref
 ) {
-  const separatorBg = useBg('editor.background')
+  const separatorBg = useBg('base')
   const leftRef = useRef<ScrollBoxRenderable | null>(null)
   const rightRef = useRef<ScrollBoxRenderable | null>(null)
 
@@ -121,13 +118,11 @@ export const SplitView = forwardRef<SplitViewHandle, Props>(function SplitView(
 })
 
 function TruncationNotice({ hidden }: { hidden: number }) {
-  const theme = useTheme()
-  const headerBg = useBg('sideBarSectionHeader.background')
+  const t = useTokens()
+  const headerBg = useBg('elevated')
   return (
     <box flexDirection="row" backgroundColor={headerBg} paddingLeft={1} paddingRight={1}>
-      <text fg={theme.colors['editorWarning.foreground']}>
-        …diff truncated — {hidden} more rows hidden
-      </text>
+      <text fg={t.palette.warning}>…diff truncated — {hidden} more rows hidden</text>
     </box>
   )
 }
@@ -154,14 +149,12 @@ function SideRow({
 }
 
 function HunkHeaderRow({ row }: { row: Extract<SplitRowOrHeader, { type: 'hunk-header' }> }) {
-  const theme = useTheme()
-  const headerBg = useBg('sideBarSectionHeader.background')
+  const t = useTokens()
+  const headerBg = useBg('elevated')
   return (
     <box flexDirection="row" backgroundColor={headerBg} paddingLeft={1} paddingRight={1}>
-      <text fg={theme.colors['descriptionForeground']}>{row.spec}</text>
-      {row.context ? (
-        <text fg={theme.colors['editor.lineHighlightBackground']}> {row.context}</text>
-      ) : null}
+      <text fg={t.muted}>{row.spec}</text>
+      {row.context ? <text fg={t.hover}> {row.context}</text> : null}
     </box>
   )
 }
@@ -177,29 +170,29 @@ function HalfRow({
   height: number
   tokens: ThemedToken[][]
 }) {
-  const theme = useTheme()
-  const headerBg = useBg('sideBarSectionHeader.background')
+  const t = useTokens()
+  const headerBg = useBg('elevated')
   const transparent = useTransparent()
   if (cell.type === 'filler') {
     return <box backgroundColor={headerBg} height={height} />
   }
   let bg: string | undefined
   let sign = ' '
-  let signColor = theme.colors['descriptionForeground']
+  let signColor = t.muted
   if (cell.type === 'addition') {
-    bg = theme.colors['diffEditor.insertedLineBackground']
+    bg = t.diffAddBg
     sign = '+'
-    signColor = theme.colors['gitDecoration.addedResourceForeground']
+    signColor = t.palette.success
   } else if (cell.type === 'deletion') {
-    bg = theme.colors['diffEditor.removedLineBackground']
+    bg = t.diffDeleteBg
     sign = '-'
-    signColor = theme.colors['editorError.foreground']
+    signColor = t.palette.error
   }
   const num = String(cell.lineNumber).padStart(gw, ' ')
   const lineTokens = tokens[cell.lineIdx]
   return (
     <box flexDirection="row" backgroundColor={transparent ? undefined : bg} height={height}>
-      <text fg={theme.colors['descriptionForeground']}>{` ${num} `}</text>
+      <text fg={t.muted}>{` ${num} `}</text>
       <text fg={signColor}>{`${sign} `}</text>
       <LineContent content={cell.content} tokens={lineTokens} />
     </box>
@@ -207,20 +200,20 @@ function HalfRow({
 }
 
 function LineContent({ content, tokens }: { content: string; tokens: ThemedToken[] | undefined }) {
-  const theme = useTheme()
+  const t = useTokens()
   if (!tokens || tokens.length === 0) {
-    return <text fg={theme.colors['editor.foreground']}>{content}</text>
+    return <text fg={t.palette.ink}>{content}</text>
   }
   return (
     <text>
-      {tokens.map((t, i) => {
-        const s = tokenToSpan(t)
+      {tokens.map((tok, i) => {
+        const s = tokenToSpan(tok)
         let attributes = 0
         if (s.bold) attributes |= TextAttributes.BOLD
         if (s.italic) attributes |= TextAttributes.ITALIC
         if (s.underline) attributes |= TextAttributes.UNDERLINE
         return (
-          <span key={i} fg={s.fg ?? theme.colors['editor.foreground']} attributes={attributes}>
+          <span key={i} fg={s.fg ?? t.palette.ink} attributes={attributes}>
             {s.text}
           </span>
         )

package/src/ui/components/diff-renderer/stacked-view.tsx

@@ -13,12 +13,11 @@ import type { DiffHighlights, FoldDispatch } from './pierre-diff'
 
 import { getScrollViewportDelta } from '../../../app-runtime/terminal-mouse-adapter'
 import { scrollGitDiff } from '../../git-view-controls'
-import { useBg, useTheme, useTransparent } from '../../theme'
+import { useBg, useTokens, useTransparent } from '../../theme'
 import { buildUnifiedRows, gutterWidth, type UnifiedRowOrHeader } from './build-rows'
 import { FoldStrip } from './fold-strip'
 import { tokenToSpan } from './highlight'
 
-// Same cap as split-view — keeps the React child count bounded.
 const LARGE_ROW_CAP = 5000
 
 export interface StackedViewHandle {
@@ -89,13 +88,11 @@ export const StackedView = forwardRef<StackedViewHandle, Props>(function Stacked
 })
 
 function TruncationNotice({ hidden }: { hidden: number }) {
-  const theme = useTheme()
-  const headerBg = useBg('sideBarSectionHeader.background')
+  const t = useTokens()
+  const headerBg = useBg('elevated')
   return (
     <box flexDirection="row" backgroundColor={headerBg} paddingLeft={1} paddingRight={1}>
-      <text fg={theme.colors['editorWarning.foreground']}>
-        …diff truncated — {hidden} more rows hidden
-      </text>
+      <text fg={t.palette.warning}>…diff truncated — {hidden} more rows hidden</text>
     </box>
   )
 }
@@ -111,16 +108,14 @@ function UnifiedRowRender({
   highlights: DiffHighlights
   row: UnifiedRowOrHeader
 }) {
-  const theme = useTheme()
-  const headerBg = useBg('sideBarSectionHeader.background')
+  const t = useTokens()
+  const headerBg = useBg('elevated')
   const transparent = useTransparent()
   if (row.type === 'hunk-header') {
     return (
       <box flexDirection="row" backgroundColor={headerBg} paddingLeft={1} paddingRight={1}>
-        <text fg={theme.colors['descriptionForeground']}>{row.spec}</text>
-        {row.context ? (
-          <text fg={theme.colors['editor.lineHighlightBackground']}> {row.context}</text>
-        ) : null}
+        <text fg={t.muted}>{row.spec}</text>
+        {row.context ? <text fg={t.hover}> {row.context}</text> : null}
       </box>
     )
   }
@@ -133,29 +128,21 @@ function UnifiedRowRender({
     const tokens = highlights.add[row.lineIdx]
     return (
       <box flexDirection="row" height={row.height}>
-        <text
-          fg={theme.colors['descriptionForeground']}
-        >{` ${pad(row.delLineNumber)} ${pad(row.addLineNumber)} `}</text>
-        <text fg={theme.colors['editor.foreground']}> </text>
+        <text fg={t.muted}>{` ${pad(row.delLineNumber)} ${pad(row.addLineNumber)} `}</text>
+        <text fg={t.palette.ink}> </text>
         <LineContent content={row.content} tokens={tokens} />
       </box>
     )
   }
-  const bg =
-    row.type === 'addition'
-      ? theme.colors['diffEditor.insertedLineBackground']
-      : theme.colors['diffEditor.removedLineBackground']
+  const bg = row.type === 'addition' ? t.diffAddBg : t.diffDeleteBg
   const sign = row.type === 'addition' ? '+' : '-'
-  const signColor =
-    row.type === 'addition'
-      ? theme.colors['gitDecoration.addedResourceForeground']
-      : theme.colors['editorError.foreground']
+  const signColor = row.type === 'addition' ? t.palette.success : t.palette.error
   const delNum = row.type === 'deletion' ? row.lineNumber : undefined
   const addNum = row.type === 'addition' ? row.lineNumber : undefined
   const tokens = row.type === 'addition' ? highlights.add[row.lineIdx] : highlights.del[row.lineIdx]
   return (
     <box flexDirection="row" backgroundColor={transparent ? undefined : bg} height={row.height}>
-      <text fg={theme.colors['descriptionForeground']}>{` ${pad(delNum)} ${pad(addNum)} `}</text>
+      <text fg={t.muted}>{` ${pad(delNum)} ${pad(addNum)} `}</text>
       <text fg={signColor}>{`${sign} `}</text>
       <LineContent content={row.content} tokens={tokens} />
     </box>
@@ -163,20 +150,20 @@ function UnifiedRowRender({
 }
 
 function LineContent({ content, tokens }: { content: string; tokens: ThemedToken[] | undefined }) {
-  const theme = useTheme()
+  const t = useTokens()
   if (!tokens || tokens.length === 0) {
-    return <text fg={theme.colors['editor.foreground']}>{content}</text>
+    return <text fg={t.palette.ink}>{content}</text>
   }
   return (
     <text>
-      {tokens.map((t, i) => {
-        const s = tokenToSpan(t)
+      {tokens.map((tok, i) => {
+        const s = tokenToSpan(tok)
         let attributes = 0
         if (s.bold) attributes |= TextAttributes.BOLD
         if (s.italic) attributes |= TextAttributes.ITALIC
         if (s.underline) attributes |= TextAttributes.UNDERLINE
         return (
-          <span key={i} fg={s.fg ?? theme.colors['editor.foreground']} attributes={attributes}>
+          <span key={i} fg={s.fg ?? t.palette.ink} attributes={attributes}>
             {s.text}
           </span>
         )

package/src/ui/components/diff-renderer/use-diff-prefetch.ts

@@ -108,7 +108,6 @@ export function useDiffPrefetch(
       dispatchGlobal({ diff, hash, key: task.key, type: 'git-mode-set-diff' })
       const prep = await prepareDiff(diff.rawDiff, task.file.path, {
         signal: task.controller.signal,
-        themeId,
       })
       if (task.controller.signal.aborted) return
       dispatchGlobal({

package/src/ui/components/diff-renderer/use-diff-preparation.ts

@@ -68,7 +68,7 @@ export function useDiffPreparation(
 
     const controller = new AbortController()
     setPreparing(true)
-    void prepareDiff(diff, path, { signal: controller.signal, themeId })
+    void prepareDiff(diff, path, { signal: controller.signal })
       .then((result) => {
         if (controller.signal.aborted) return
         setLocalFile(result.file)

package/src/ui/components/git-commit-modal.tsx

@@ -1,4 +1,4 @@
-import { useTheme } from '../theme'
+import { useTokens } from '../theme'
 import { uiTokens } from '../ui-tokens'
 import { InputField } from './input-field'
 import { ModalShell } from './modal-shell'
@@ -11,20 +11,14 @@ interface GitCommitModalProps {
 }
 
 export function GitCommitModal({ activeField, body, cursorPos, title }: GitCommitModalProps) {
-  const theme = useTheme()
+  const t = useTokens()
   const titleActive = activeField === 'title'
   const bodyActive = activeField === 'body'
 
   return (
     <ModalShell title="Commit" keybindsModeId="modal.git-commit" width={uiTokens.modalWidth.xl}>
       <box flexDirection="column">
-        <text
-          fg={
-            titleActive ? theme.colors['editor.foreground'] : theme.colors['descriptionForeground']
-          }
-        >
-          Title
-        </text>
+        <text fg={titleActive ? t.palette.ink : t.muted}>Title</text>
         <InputField
           active={titleActive}
           cursorPos={titleActive ? cursorPos : undefined}
@@ -33,13 +27,7 @@ export function GitCommitModal({ activeField, body, cursorPos, title }: GitCommi
       </box>
 
       <box flexDirection="column">
-        <text
-          fg={
-            bodyActive ? theme.colors['editor.foreground'] : theme.colors['descriptionForeground']
-          }
-        >
-          Body (optional)
-        </text>
+        <text fg={bodyActive ? t.palette.ink : t.muted}>Body (optional)</text>
         <InputField
           active={bodyActive}
           cursorPos={bodyActive ? cursorPos : undefined}