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

src/hooks/notifs/useCanSwitchToExistingSubscription.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { getOauthProfileFromApiKey } from 'src/services/oauth/getOauthProfile.js'
 import { isClaudeAISubscriber } from 'src/utils/auth.js'
-import { Text } from '../../ink.js'
+import { Text } from '@anthropic/ink'
 import { logEvent } from '../../services/analytics/index.js'
 import { getGlobalConfig, saveGlobalConfig } from '../../utils/config.js'
 import { useStartupNotification } from './useStartupNotification.js'

src/hooks/notifs/useIDEStatusIndicator.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef } from 'react'
 import { useNotifications } from 'src/context/notifications.js'
-import { Text } from 'src/ink.js'
+import { Text } from '@anthropic/ink'
 import type { MCPServerConnection } from 'src/services/mcp/types.js'
 import { getGlobalConfig, saveGlobalConfig } from 'src/utils/config.js'
 import {

src/hooks/notifs/useLspInitializationNotification.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 import { useInterval } from 'usehooks-ts'
 import { getIsRemoteMode, getIsScrollDraining } from '../../bootstrap/state.js'
 import { useNotifications } from '../../context/notifications.js'
-import { Text } from '../../ink.js'
+import { Text } from '@anthropic/ink'
 import {
   getInitializationStatus,
   getLspServerManager,

src/hooks/notifs/useMcpConnectivityStatus.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 import { useEffect } from 'react'
 import { useNotifications } from 'src/context/notifications.js'
 import { getIsRemoteMode } from '../../bootstrap/state.js'
-import { Text } from '../../ink.js'
+import { Text } from '@anthropic/ink'
 import { hasClaudeAiMcpEverConnected } from '../../services/mcp/claudeai.js'
 import type { MCPServerConnection } from '../../services/mcp/types.js'
 

src/hooks/notifs/usePluginAutoupdateNotification.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 import { useEffect, useState } from 'react'
 import { getIsRemoteMode } from '../../bootstrap/state.js'
 import { useNotifications } from '../../context/notifications.js'
-import { Text } from '../../ink.js'
+import { Text } from '@anthropic/ink'
 import { logForDebugging } from '../../utils/debug.js'
 import { onPluginsAutoUpdated } from '../../utils/plugins/pluginAutoupdate.js'
 

src/hooks/notifs/usePluginInstallationStatus.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 import { useEffect, useMemo } from 'react'
 import { getIsRemoteMode } from '../../bootstrap/state.js'
 import { useNotifications } from '../../context/notifications.js'
-import { Text } from '../../ink.js'
+import { Text } from '@anthropic/ink'
 import { useAppState } from '../../state/AppState.js'
 import { logForDebugging } from '../../utils/debug.js'
 import { plural } from '../../utils/stringUtils.js'

src/hooks/notifs/useRateLimitWarningNotification.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { useNotifications } from 'src/context/notifications.js'
-import { Text } from 'src/ink.js'
+import { Text } from '@anthropic/ink'
 import {
   getRateLimitWarning,
   getUsingOverageText,

src/hooks/toolPermission/handlers/interactiveHandler.ts

@@ -4,7 +4,7 @@ import { randomUUID } from 'crypto'
 import { logForDebugging } from 'src/utils/debug.js'
 import { getAllowedChannels } from '../../../bootstrap/state.js'
 import type { BridgePermissionCallbacks } from '../../../bridge/bridgePermissionCallbacks.js'
-import { getTerminalFocused } from '../../../ink/terminal-focus-state.js'
+import { getTerminalFocused } from '@anthropic/ink'
 import {
   CHANNEL_PERMISSION_REQUEST_METHOD,
   type ChannelPermissionRequestParams,

src/hooks/useArrowKeyHistory.tsx

@@ -4,7 +4,7 @@ import { useNotifications } from 'src/context/notifications.js'
 import { ConfigurableShortcutHint } from '../components/ConfigurableShortcutHint.js'
 import { FOOTER_TEMPORARY_STATUS_TIMEOUT } from '../components/PromptInput/Notifications.js'
 import { getHistory } from '../history.js'
-import { Text } from '../ink.js'
+import { Text } from '@anthropic/ink'
 import type { PromptInputMode } from '../types/textInputTypes.js'
 import type { HistoryEntry, PastedContent } from '../utils/config.js'
 

src/hooks/useAssistantHistory.ts

@@ -13,7 +13,7 @@ import {
   type HistoryAuthCtx,
   type HistoryPage,
 } from '../assistant/sessionHistory.js'
-import type { ScrollBoxHandle } from '../ink/components/ScrollBox.js'
+import type { ScrollBoxHandle } from '@anthropic/ink'
 import type { RemoteSessionConfig } from '../remote/RemoteSessionManager.js'
 import { convertSDKMessage } from '../remote/sdkMessageAdapter.js'
 import type { Message, SystemInformationalMessage } from '../types/message.js'

src/hooks/useAwaySummary.ts

@@ -1,9 +1,6 @@
 import { feature } from 'bun:bundle'
 import { useEffect, useRef } from 'react'
-import {
-  getTerminalFocusState,
-  subscribeTerminalFocus,
-} from '../ink/terminal-focus-state.js'
+import { getTerminalFocusState, subscribeTerminalFocus } from '@anthropic/ink'
 import { getFeatureValue_CACHED_MAY_BE_STALE } from '../services/analytics/growthbook.js'
 import { generateAwaySummary } from '../services/awaySummary.js'
 import type { Message } from '../types/message.js'

src/hooks/useBackgroundTaskNavigation.ts

@@ -1,7 +1,6 @@
 import { useEffect, useRef } from 'react'
-import { KeyboardEvent } from '../ink/events/keyboard-event.js'
-// eslint-disable-next-line custom-rules/prefer-use-keybindings -- backward-compat bridge until REPL wires handleKeyDown to <Box onKeyDown>
-import { useInput } from '../ink.js'
+import { KeyboardEvent, useInput } from '@anthropic/ink'
+// backward-compat bridge until REPL wires handleKeyDown to <Box onKeyDown>
 import {
   type AppState,
   useAppState,

src/hooks/useBlink.ts

@@ -1,4 +1,4 @@
-import { type DOMElement, useAnimationFrame, useTerminalFocus } from '../ink.js'
+import { type DOMElement, useAnimationFrame, useTerminalFocus } from '@anthropic/ink'
 
 const BLINK_INTERVAL_MS = 600
 

src/hooks/useCanUseTool.tsx

@@ -8,7 +8,7 @@ import {
 } from 'src/services/analytics/index.js'
 import { sanitizeToolNameForAnalytics } from 'src/services/analytics/metadata.js'
 import type { ToolUseConfirm } from '../components/permissions/PermissionRequest.js'
-import { Text } from '../ink.js'
+import { Text } from '@anthropic/ink'
 import type {
   ToolPermissionContext,
   Tool as ToolType,

src/hooks/useChromeExtensionNotification.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Text } from '../ink.js'
+import { Text } from '@anthropic/ink'
 import { isClaudeAISubscriber } from '../utils/auth.js'
 import {
   isChromeExtensionInstalled,

src/hooks/useCopyOnSelect.ts

@@ -1,6 +1,6 @@
 import { useEffect, useRef } from 'react'
-import { useTheme } from '../components/design-system/ThemeProvider.js'
-import type { useSelection } from '../ink/hooks/use-selection.js'
+import { useTheme } from '@anthropic/ink'
+import type { useSelection } from '@anthropic/ink'
 import { getGlobalConfig } from '../utils/config.js'
 import { getTheme } from '../utils/theme.js'
 

src/hooks/useExitOnCtrlCD.ts

@@ -1,5 +1,5 @@
 import { useCallback, useMemo, useState } from 'react'
-import useApp from '../ink/hooks/use-app.js'
+import { useApp } from '@anthropic/ink'
 import type { KeybindingContextName } from '../keybindings/types.js'
 import { useDoublePress } from './useDoublePress.js'
 

src/hooks/useGlobalKeybindings.tsx

@@ -6,7 +6,7 @@
  */
 import { feature } from 'bun:bundle'
 import { useCallback } from 'react'
-import instances from '../ink/instances.js'
+import { instances } from '@anthropic/ink'
 import { useKeybinding } from '../keybindings/useKeybinding.js'
 import type { Screen } from '../screens/REPL.js'
 import { getFeatureValue_CACHED_MAY_BE_STALE } from '../services/analytics/growthbook.js'

src/hooks/useHistorySearch.ts

@@ -5,9 +5,8 @@ import {
   getValueFromInput,
 } from '../components/PromptInput/inputModes.js'
 import { makeHistoryReader } from '../history.js'
-import { KeyboardEvent } from '../ink/events/keyboard-event.js'
-// eslint-disable-next-line custom-rules/prefer-use-keybindings -- backward-compat bridge until consumers wire handleKeyDown to <Box onKeyDown>
-import { useInput } from '../ink.js'
+import { KeyboardEvent, useInput } from '@anthropic/ink'
+// backward-compat bridge until consumers wire handleKeyDown to <Box onKeyDown>
 import { useKeybinding, useKeybindings } from '../keybindings/useKeybinding.js'
 import type { PromptInputMode } from '../types/textInputTypes.js'
 import type { HistoryEntry } from '../utils/config.js'

src/hooks/useInboxPoller.ts

@@ -3,7 +3,7 @@ import { useCallback, useEffect, useRef } from 'react'
 import { useInterval } from 'usehooks-ts'
 import type { ToolUseConfirm } from '../components/permissions/PermissionRequest.js'
 import { TEAMMATE_MESSAGE_TAG } from '../constants/xml.js'
-import { useTerminalNotification } from '../ink/useTerminalNotification.js'
+import { useTerminalNotification } from '@anthropic/ink'
 import { sendNotification } from '../services/notifier.js'
 import {
   type AppState,

src/hooks/useNotifyAfterTimeout.ts

@@ -3,7 +3,7 @@ import {
   getLastInteractionTime,
   updateLastInteractionTime,
 } from '../bootstrap/state.js'
-import { useTerminalNotification } from '../ink/useTerminalNotification.js'
+import { useTerminalNotification } from '@anthropic/ink'
 import { sendNotification } from '../services/notifier.js'
 // The time threshold in milliseconds for considering an interaction "recent" (6 seconds)
 export const DEFAULT_INTERACTION_THRESHOLD_MS = 6000

src/hooks/useOfficialMarketplaceNotification.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import type { Notification } from '../context/notifications.js'
-import { Text } from '../ink.js'
+import { Text } from '@anthropic/ink'
 import { logForDebugging } from '../utils/debug.js'
 import { checkAndInstallOfficialMarketplace } from '../utils/plugins/officialMarketplaceStartupCheck.js'
 import { useStartupNotification } from './notifs/useStartupNotification.js'

src/hooks/usePasteHandler.ts

@@ -2,7 +2,7 @@ import { basename } from 'path'
 import React from 'react'
 import { logError } from 'src/utils/log.js'
 import { useDebounceCallback } from 'usehooks-ts'
-import type { InputEvent, Key } from '../ink.js'
+import type { InputEvent, Key } from '@anthropic/ink'
 import {
   getImageFromClipboard,
   isImageFilePath,

src/hooks/usePluginRecommendationBase.tsx

@@ -8,7 +8,7 @@ import figures from 'figures'
 import * as React from 'react'
 import { getIsRemoteMode } from '../bootstrap/state.js'
 import type { useNotifications } from '../context/notifications.js'
-import { Text } from '../ink.js'
+import { Text } from '@anthropic/ink'
 import { logError } from '../utils/log.js'
 import { getPluginById } from '../utils/plugins/marketplaceManager.js'
 

src/hooks/usePromptSuggestion.ts

@@ -1,5 +1,5 @@
 import { useCallback, useRef } from 'react'
-import { useTerminalFocus } from '../ink/hooks/use-terminal-focus.js'
+import { useTerminalFocus } from '@anthropic/ink'
 import {
   type AnalyticsMetadata_I_VERIFIED_THIS_IS_NOT_CODE_OR_FILEPATHS,
   logEvent,

src/hooks/useReplBridge.tsx

@@ -19,7 +19,7 @@ import type {
   SDKMessage,
 } from '../entrypoints/agentSdkTypes.js'
 import type { SDKControlResponse } from '../entrypoints/sdk/controlTypes.js'
-import { Text } from '../ink.js'
+import { Text } from '@anthropic/ink'
 import { getFeatureValue_CACHED_MAY_BE_STALE } from '../services/analytics/growthbook.js'
 import {
   useAppState,

src/hooks/useSearchInput.ts

@@ -1,7 +1,6 @@
 import { useCallback, useState } from 'react'
-import { KeyboardEvent } from '../ink/events/keyboard-event.js'
-// eslint-disable-next-line custom-rules/prefer-use-keybindings -- backward-compat bridge until consumers wire handleKeyDown to <Box onKeyDown>
-import { useInput } from '../ink.js'
+import { KeyboardEvent, useInput } from '@anthropic/ink'
+// backward-compat bridge until consumers wire handleKeyDown to <Box onKeyDown>
 import {
   Cursor,
   getLastKill,

src/hooks/useTerminalSize.ts

@@ -1,8 +1,5 @@
 import { useContext } from 'react'
-import {
-  type TerminalSize,
-  TerminalSizeContext,
-} from 'src/ink/components/TerminalSizeContext.js'
+import { type TerminalSize, TerminalSizeContext } from '@anthropic/ink'
 
 export function useTerminalSize(): TerminalSize {
   const size = useContext(TerminalSizeContext)

src/hooks/useTextInput.ts

@@ -3,7 +3,7 @@ import { useNotifications } from 'src/context/notifications.js'
 import stripAnsi from 'strip-ansi'
 import { markBackslashReturnUsed } from '../commands/terminalSetup/terminalSetup.js'
 import { addToHistory } from '../history.js'
-import type { Key } from '../ink.js'
+import type { Key } from '@anthropic/ink'
 import type {
   InlineGhostText,
   TextInputState,

src/hooks/useTypeahead.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useNotifications } from 'src/context/notifications.js'
-import { Text } from 'src/ink.js'
+import { Text } from '@anthropic/ink'
 import { logEvent } from 'src/services/analytics/index.js'
 import { useDebounceCallback } from 'usehooks-ts'
 import { type Command, getCommandName } from '../commands.js'
@@ -17,9 +17,8 @@ import {
   useIsModalOverlayActive,
   useRegisterOverlay,
 } from '../context/overlayContext.js'
-import { KeyboardEvent } from '../ink/events/keyboard-event.js'
-// eslint-disable-next-line custom-rules/prefer-use-keybindings -- backward-compat bridge until consumers wire handleKeyDown to <Box onKeyDown>
-import { useInput } from '../ink.js'
+import { KeyboardEvent, useInput } from '@anthropic/ink'
+// backward-compat bridge until consumers wire handleKeyDown to <Box onKeyDown>
 import {
   useOptionalKeybindingContext,
   useRegisterKeybindingContext,

src/hooks/useVimInput.ts

@@ -1,5 +1,5 @@
 import React, { useCallback, useState } from 'react'
-import type { Key } from '../ink.js'
+import type { Key } from '@anthropic/ink'
 import type { VimInputState, VimMode } from '../types/textInputTypes.js'
 import { Cursor } from '../utils/Cursor.js'
 import { lastGrapheme } from '../utils/intl.js'

src/hooks/useVirtualScroll.ts

@@ -7,8 +7,7 @@ import {
   useRef,
   useSyncExternalStore,
 } from 'react'
-import type { ScrollBoxHandle } from '../ink/components/ScrollBox.js'
-import type { DOMElement } from '../ink/dom.js'
+import type { ScrollBoxHandle, DOMElement } from '@anthropic/ink'
 
 /**
  * Estimated height (rows) for items not yet measured. Intentionally LOW:

src/hooks/useVoice.ts

@@ -8,7 +8,7 @@
 
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useSetVoiceState } from '../context/voice.js'
-import { useTerminalFocus } from '../ink/hooks/use-terminal-focus.js'
+import { useTerminalFocus } from '@anthropic/ink'
 import {
   type AnalyticsMetadata_I_VERIFIED_THIS_IS_NOT_CODE_OR_FILEPATHS,
   logEvent,

src/hooks/useVoiceIntegration.tsx

@@ -8,9 +8,8 @@ import {
   useSetVoiceState,
   useVoiceState,
 } from '../context/voice.js'
-import { KeyboardEvent } from '../ink/events/keyboard-event.js'
-// eslint-disable-next-line custom-rules/prefer-use-keybindings -- backward-compat bridge until REPL wires handleKeyDown to <Box onKeyDown>
-import { useInput } from '../ink.js'
+import { KeyboardEvent, useInput } from '@anthropic/ink'
+// backward-compat bridge until REPL wires handleKeyDown to <Box onKeyDown>
 import { useOptionalKeybindingContext } from '../keybindings/KeybindingContext.js'
 import { keystrokesEqual } from '../keybindings/resolver.js'
 import type { ParsedKeystroke } from '../keybindings/types.js'