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

src/components/LogoV2/AnimatedAsterisk.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { useEffect, useRef, useState } from 'react'
 import { TEARDROP_ASTERISK } from '../../constants/figures.js'
-import { Box, Text, useAnimationFrame } from '../../ink.js'
+import { Box, Text, useAnimationFrame } from '@anthropic/ink'
 import { getInitialSettings } from '../../utils/settings/settings.js'
 import { hueToRgb, toRGBColor } from '../Spinner/utils.js'
 

src/components/LogoV2/AnimatedClawd.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { useEffect, useRef, useState } from 'react'
-import { Box } from '../../ink.js'
+import { Box } from '@anthropic/ink'
 import { getInitialSettings } from '../../utils/settings/settings.js'
 import { Clawd, type ClawdPose } from './Clawd.js'
 

src/components/LogoV2/ChannelsNotice.tsx

@@ -11,7 +11,7 @@ import {
   getAllowedChannels,
   getHasDevChannels,
 } from '../../bootstrap/state.js'
-import { Box, Text } from '../../ink.js'
+import { Box, Text } from '@anthropic/ink'
 import { isChannelsEnabled } from '../../services/mcp/channelAllowlist.js'
 import { getEffectiveChannelAllowlist } from '../../services/mcp/channelNotification.js'
 import { getMcpConfigsByScope } from '../../services/mcp/config.js'

src/components/LogoV2/Clawd.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Box, Text } from '../../ink.js'
+import { Box, Text } from '@anthropic/ink'
 import { env } from '../../utils/env.js'
 
 export type ClawdPose =

src/components/LogoV2/CondensedLogo.tsx

@@ -2,8 +2,7 @@ import * as React from 'react'
 import { type ReactNode, useEffect } from 'react'
 import { useMainLoopModel } from '../../hooks/useMainLoopModel.js'
 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 { useAppState } from '../../state/AppState.js'
 import { getEffortSuffix } from '../../utils/effort.js'
 import { truncate } from '../../utils/format.js'

src/components/LogoV2/EmergencyTip.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { useEffect, useMemo } from 'react'
-import { Box, Text } from 'src/ink.js'
+import { Box, Text } from '@anthropic/ink'
 import { getDynamicConfig_CACHED_MAY_BE_STALE } from 'src/services/analytics/growthbook.js'
 import { getGlobalConfig, saveGlobalConfig } from 'src/utils/config.js'
 

src/components/LogoV2/Feed.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 { truncate } from '../../utils/format.js'
 
 export type FeedLine = {

src/components/LogoV2/FeedColumn.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
-import { Box } from '../../ink.js'
-import { Divider } from '../design-system/Divider.js'
+import { Box } from '@anthropic/ink'
+import { Divider } from '@anthropic/ink'
 import type { FeedConfig } from './Feed.js'
 import { calculateFeedWidth, Feed } from './Feed.js'
 

src/components/LogoV2/GuestPassesUpsell.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { useState } from 'react'
-import { Text } from '../../ink.js'
+import { Text } from '@anthropic/ink'
 import { logEvent } from '../../services/analytics/index.js'
 import {
   checkCachedPassesEligibility,

src/components/LogoV2/LogoV2.tsx

@@ -1,8 +1,7 @@
 // biome-ignore-all assist/source/organizeImports: ANT-ONLY import markers must not be reordered
 import * as React from 'react'
-import { Box, Text, color } from '../../ink.js'
+import { Box, Text, color, stringWidth } from '@anthropic/ink'
 import { useTerminalSize } from '../../hooks/useTerminalSize.js'
-import { stringWidth } from '../../ink/stringWidth.js'
 import {
   getLayoutMode,
   calculateLayoutDimensions,

src/components/LogoV2/Opus1mMergeNotice.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { useEffect, useState } from 'react'
 import { UP_ARROW } from '../../constants/figures.js'
-import { Box, Text } from '../../ink.js'
+import { Box, Text } from '@anthropic/ink'
 import { getGlobalConfig, saveGlobalConfig } from '../../utils/config.js'
 import { isOpus1mMergeEnabled } from '../../utils/model/model.js'
 import { AnimatedAsterisk } from './AnimatedAsterisk.js'

src/components/LogoV2/OverageCreditUpsell.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { useState } from 'react'
-import { Text } from '../../ink.js'
+import { Text } from '@anthropic/ink'
 import { logEvent } from '../../services/analytics/index.js'
 import {
   formatGrantAmount,

src/components/LogoV2/VoiceModeNotice.tsx

@@ -1,7 +1,7 @@
 import { feature } from 'bun:bundle'
 import * as React from 'react'
 import { useEffect, useState } from 'react'
-import { Box, Text } from '../../ink.js'
+import { Box, Text } from '@anthropic/ink'
 import { getGlobalConfig, saveGlobalConfig } from '../../utils/config.js'
 import { getInitialSettings } from '../../utils/settings/settings.js'
 import { isVoiceModeEnabled } from '../../voice/voiceModeEnabled.js'

src/components/LogoV2/WelcomeV2.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Box, Text, useTheme } from 'src/ink.js'
+import { Box, Text, useTheme } from '@anthropic/ink'
 import { env } from '../../utils/env.js'
 
 const WELCOME_V2_WIDTH = 58

src/components/LogoV2/feedConfigs.tsx

@@ -1,7 +1,7 @@
 import figures from 'figures'
 import { homedir } from 'os'
 import * as React from 'react'
-import { Box, Text } from '../../ink.js'
+import { Box, Text } from '@anthropic/ink'
 import type { Step } from '../../projectOnboardingState.js'
 import {
   formatCreditAmount,