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

src/components/PromptInput/HistorySearchInput.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react'
-import { stringWidth } from '../../ink/stringWidth.js'
-import { Box, Text } from '../../ink.js'
+import { Box, Text, stringWidth } from '@anthropic/ink'
 import TextInput from '../TextInput.js'
 
 type Props = {

src/components/PromptInput/IssueFlagBanner.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { FLAG_ICON } from '../../constants/figures.js'
-import { Box, Text } from '../../ink.js'
+import { Box, Text } from '@anthropic/ink'
 
 /**
  * ANT-ONLY: Banner shown in the transcript that prompts users to report

src/components/PromptInput/Notifications.tsx

@@ -13,7 +13,7 @@ import { useIdeConnectionStatus } from '../../hooks/useIdeConnectionStatus.js'
 import type { IDESelection } from '../../hooks/useIdeSelection.js'
 import { useMainLoopModel } from '../../hooks/useMainLoopModel.js'
 import { useVoiceEnabled } from '../../hooks/useVoiceEnabled.js'
-import { Box, Text } from '../../ink.js'
+import { Box, Text } from '@anthropic/ink'
 import { useClaudeAiLimits } from '../../services/claudeAiLimitsHook.js'
 import { calculateTokenWarningState } from '../../services/compact/autoCompact.js'
 import type { MCPServerConnection } from '../../services/mcp/types.js'

src/components/PromptInput/PromptInput.tsx

@@ -63,9 +63,7 @@ import { useMainLoopModel } from '../../hooks/useMainLoopModel.js'
 import { usePromptSuggestion } from '../../hooks/usePromptSuggestion.js'
 import { useTerminalSize } from '../../hooks/useTerminalSize.js'
 import { useTypeahead } from '../../hooks/useTypeahead.js'
-import type { BorderTextOptions } from '../../ink/render-border.js'
-import { stringWidth } from '../../ink/stringWidth.js'
-import { Box, type ClickEvent, type Key, Text, useInput } from '../../ink.js'
+import { Box, type BorderTextOptions, type ClickEvent, type Key, stringWidth, Text, useInput } from '@anthropic/ink'
 import { useOptionalKeybindingContext } from '../../keybindings/KeybindingContext.js'
 import { getShortcutDisplay } from '../../keybindings/shortcutFormat.js'
 import {

src/components/PromptInput/PromptInputFooter.tsx

@@ -8,7 +8,7 @@ import type { VerificationStatus } from '../../hooks/useApiKeyVerification.js'
 import type { IDESelection } from '../../hooks/useIdeSelection.js'
 import { useSettings } from '../../hooks/useSettings.js'
 import { useTerminalSize } from '../../hooks/useTerminalSize.js'
-import { Box, Text } from '../../ink.js'
+import { Box, Text } from '@anthropic/ink'
 import type { MCPServerConnection } from '../../services/mcp/types.js'
 import { useAppState } from '../../state/AppState.js'
 import type { ToolPermissionContext } from '../../Tool.js'

src/components/PromptInput/PromptInputFooterLeftSide.tsx

@@ -6,7 +6,7 @@ const coordinatorModule = feature('COORDINATOR_MODE')
   ? (require('../../coordinator/coordinatorMode.js') as typeof import('../../coordinator/coordinatorMode.js'))
   : undefined
 /* eslint-enable @typescript-eslint/no-require-imports */
-import { Box, Text, Link } from '../../ink.js'
+import { Box, Text, Link } from '@anthropic/ink'
 import * as React from 'react'
 import figures from 'figures'
 import {
@@ -39,8 +39,7 @@ import { useAppState, useAppStateStore } from 'src/state/AppState.js'
 import { getIsRemoteMode } from '../../bootstrap/state.js'
 import HistorySearchInput from './HistorySearchInput.js'
 import { usePrStatus } from '../../hooks/usePrStatus.js'
-import { KeyboardShortcutHint } from '../design-system/KeyboardShortcutHint.js'
-import { Byline } from '../design-system/Byline.js'
+import { Byline, KeyboardShortcutHint } from '@anthropic/ink'
 import { useTerminalSize } from '../../hooks/useTerminalSize.js'
 import { useTasksV2 } from '../../hooks/useTasksV2.js'
 import { formatDuration } from '../../utils/format.js'
@@ -48,8 +47,7 @@ import { VoiceWarmupHint } from './VoiceIndicator.js'
 import { useVoiceEnabled } from '../../hooks/useVoiceEnabled.js'
 import { useVoiceState } from '../../context/voice.js'
 import { isFullscreenEnvEnabled } from '../../utils/fullscreen.js'
-import { isXtermJs } from '../../ink/terminal.js'
-import { useHasSelection, useSelection } from '../../ink/hooks/use-selection.js'
+import { isXtermJs, useHasSelection, useSelection } from '@anthropic/ink'
 import { getGlobalConfig, saveGlobalConfig } from '../../utils/config.js'
 import { getPlatform } from '../../utils/platform.js'
 import { PrBadge } from '../PrBadge.js'

src/components/PromptInput/PromptInputFooterSuggestions.tsx

@@ -1,8 +1,7 @@
 import * as React from 'react'
 import { memo, type ReactNode } from 'react'
 import { useTerminalSize } from '../../hooks/useTerminalSize.js'
-import { stringWidth } from '../../ink/stringWidth.js'
-import { Box, Text } from '../../ink.js'
+import { Box, Text, stringWidth } from '@anthropic/ink'
 import { truncatePathMiddle, truncateToWidth } from '../../utils/format.js'
 import type { Theme } from '../../utils/theme.js'
 

src/components/PromptInput/PromptInputHelpMenu.tsx

@@ -1,6 +1,6 @@
 import { feature } from 'bun:bundle'
 import * as React from 'react'
-import { Box, Text } from 'src/ink.js'
+import { Box, Text } from '@anthropic/ink'
 import { getPlatform } from 'src/utils/platform.js'
 import { isKeybindingCustomizationEnabled } from '../../keybindings/loadUserBindings.js'
 import { useShortcutDisplay } from '../../keybindings/useShortcutDisplay.js'

src/components/PromptInput/PromptInputModeIndicator.tsx

@@ -1,6 +1,6 @@
 import figures from 'figures'
 import * as React from 'react'
-import { Box, Text } from 'src/ink.js'
+import { Box, Text } from '@anthropic/ink'
 import {
   AGENT_COLOR_TO_THEME_COLOR,
   AGENT_COLORS,

src/components/PromptInput/PromptInputQueuedCommands.tsx

@@ -1,7 +1,7 @@
 import { feature } from 'bun:bundle'
 import * as React from 'react'
 import { useMemo } from 'react'
-import { Box } from 'src/ink.js'
+import { Box } from '@anthropic/ink'
 import { useAppState } from 'src/state/AppState.js'
 import {
   STATUS_TAG,

src/components/PromptInput/PromptInputStashNotice.tsx

@@ -1,6 +1,6 @@
 import figures from 'figures'
 import * as React from 'react'
-import { Box, Text } from 'src/ink.js'
+import { Box, Text } from '@anthropic/ink'
 
 type Props = {
   hasStash: boolean

src/components/PromptInput/SandboxPromptFooterHint.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { type ReactNode, useEffect, useRef, useState } from 'react'
-import { Box, Text } from '../../ink.js'
+import { Box, Text } from '@anthropic/ink'
 import { useShortcutDisplay } from '../../keybindings/useShortcutDisplay.js'
 import { SandboxManager } from '../../utils/sandbox/sandbox-adapter.js'
 

src/components/PromptInput/ShimmeredInput.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Ansi, Box, Text, useAnimationFrame } from '../../ink.js'
+import { Ansi, Box, Text, useAnimationFrame } from '@anthropic/ink'
 import {
   segmentTextByHighlights,
   type TextHighlight,

src/components/PromptInput/VoiceIndicator.tsx

@@ -1,7 +1,7 @@
 import { feature } from 'bun:bundle'
 import * as React from 'react'
 import { useSettings } from '../../hooks/useSettings.js'
-import { Box, Text, useAnimationFrame } from '../../ink.js'
+import { Box, Text, useAnimationFrame } from '@anthropic/ink'
 import { interpolateColor, toRGBColor } from '../Spinner/utils.js'
 
 type Props = {

src/components/PromptInput/utils.ts

@@ -2,7 +2,7 @@ import {
   hasUsedBackslashReturn,
   isShiftEnterKeyBindingInstalled,
 } from '../../commands/terminalSetup/terminalSetup.js'
-import type { Key } from '../../ink.js'
+import type { Key } from '@anthropic/ink'
 import { getGlobalConfig } from '../../utils/config.js'
 import { env } from '../../utils/env.js'
 /**