feat: 第一个可以用的 ink 组件抽象 (#158)

src/components/Settings/Config.tsx

@@ -1,13 +1,6 @@
 // biome-ignore-all assist/source/organizeImports: ANT-ONLY import markers must not be reordered
 import { feature } from 'bun:bundle'
-import {
-  Box,
-  Text,
-  useTheme,
-  useThemeSetting,
-  useTerminalFocus,
-} from '../../ink.js'
-import type { KeyboardEvent } from '../../ink/events/keyboard-event.js'
+import { type KeyboardEvent, Box, Text, useTheme, useThemeSetting, useTerminalFocus } from '@anthropic/ink'
 import * as React from 'react'
 import { useState, useCallback } from 'react'
 import {
@@ -67,7 +60,7 @@ import {
   ChannelDowngradeDialog,
   type ChannelDowngradeChoice,
 } from '../ChannelDowngradeDialog.js'
-import { Dialog } from '../design-system/Dialog.js'
+import { Dialog } from '@anthropic/ink'
 import { Select } from '../CustomSelect/index.js'
 import { OutputStylePicker } from '../OutputStylePicker.js'
 import { LanguagePicker } from '../LanguagePicker.js'
@@ -76,10 +69,9 @@ import {
   getMemoryFiles,
   hasExternalClaudeMdIncludes,
 } from 'src/utils/claudemd.js'
-import { KeyboardShortcutHint } from '../design-system/KeyboardShortcutHint.js'
-import { ConfigurableShortcutHint } from '../ConfigurableShortcutHint.js'
-import { Byline } from '../design-system/Byline.js'
+import { Byline, KeyboardShortcutHint } from '@anthropic/ink'
 import { useTabHeaderFocus } from '../design-system/Tabs.js'
+import { ConfigurableShortcutHint } from '../ConfigurableShortcutHint.js'
 import { useIsInsideModal } from '../../context/modalContext.js'
 import { SearchBox } from '../SearchBox.js'
 import {

src/components/Settings/Settings.tsx

@@ -8,8 +8,8 @@ import {
   useIsInsideModal,
   useModalOrTerminalSize,
 } from '../../context/modalContext.js'
-import { Pane } from '../design-system/Pane.js'
-import { Tabs, Tab } from '../design-system/Tabs.js'
+import { Pane, Tabs } from '@anthropic/ink'
+import { Tab } from '../design-system/Tabs.js'
 import { Status, buildDiagnostics } from './Status.js'
 import { Config } from './Config.js'
 import { Usage } from './Usage.js'

src/components/Settings/Status.tsx

@@ -4,7 +4,7 @@ import { Suspense, use } from 'react'
 import { getSessionId } from '../../bootstrap/state.js'
 import type { LocalJSXCommandContext } from '../../commands.js'
 import { useIsInsideModal } from '../../context/modalContext.js'
-import { Box, Text, useTheme } from '../../ink.js'
+import { Box, Text, useTheme } from '@anthropic/ink'
 import { type AppState, useAppState } from '../../state/AppState.js'
 import { getCwd } from '../../utils/cwd.js'
 import { getCurrentSessionTitle } from '../../utils/sessionStorage.js'

src/components/Settings/Usage.tsx

@@ -4,7 +4,7 @@ import { extraUsage as extraUsageCommand } from 'src/commands/extra-usage/index.
 import { formatCost } from 'src/cost-tracker.js'
 import { getSubscriptionType } from 'src/utils/auth.js'
 import { useTerminalSize } from '../../hooks/useTerminalSize.js'
-import { Box, Text } from '../../ink.js'
+import { Box, Text } from '@anthropic/ink'
 import { useKeybinding } from '../../keybindings/useKeybinding.js'
 import {
   type ExtraUsage,
@@ -16,8 +16,7 @@ import { formatResetText } from '../../utils/format.js'
 import { logError } from '../../utils/log.js'
 import { jsonStringify } from '../../utils/slowOperations.js'
 import { ConfigurableShortcutHint } from '../ConfigurableShortcutHint.js'
-import { Byline } from '../design-system/Byline.js'
-import { ProgressBar } from '../design-system/ProgressBar.js'
+import { Byline, ProgressBar } from '@anthropic/ink'
 import {
   isEligibleForOverageCreditGrant,
   OverageCreditUpsell,