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

src/components/AgentProgressLine.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Box, Text } from '../ink.js'
+import { Box, Text } from '@anthropic/ink'
 import { formatNumber } from '../utils/format.js'
 import type { Theme } from '../utils/theme.js'
 

src/components/ApproveApiKey.tsx

@@ -1,8 +1,7 @@
 import React from 'react'
-import { Text } from '../ink.js'
+import { Text, Dialog } from '@anthropic/ink'
 import { saveGlobalConfig } from '../utils/config.js'
 import { Select } from './CustomSelect/index.js'
-import { Dialog } from './design-system/Dialog.js'
 
 type Props = {
   customApiKeyTruncated: string

src/components/AutoModeOptInDialog.tsx

@@ -1,9 +1,8 @@
 import React from 'react'
 import { logEvent } from 'src/services/analytics/index.js'
-import { Box, Link, Text } from '../ink.js'
+import { Box, Dialog, Link, Text } from '@anthropic/ink'
 import { updateSettingsForSource } from '../utils/settings/settings.js'
 import { Select } from './CustomSelect/index.js'
-import { Dialog } from './design-system/Dialog.js'
 
 // NOTE: This copy is legally reviewed — do not modify without Legal team approval.
 export const AUTO_MODE_DESCRIPTION =

src/components/AutoUpdater.tsx

@@ -6,7 +6,7 @@ import {
 } from 'src/services/analytics/index.js'
 import { useInterval } from 'usehooks-ts'
 import { useUpdateNotification } from '../hooks/useUpdateNotification.js'
-import { Box, Text } from '../ink.js'
+import { Box, Text } from '@anthropic/ink'
 import {
   type AutoUpdaterResult,
   getLatestVersion,

src/components/AwsAuthStatusBox.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react'
-import { Box, Link, Text } from '../ink.js'
+import { Box, Link, Text } from '@anthropic/ink'
 import {
   type AwsAuthStatus,
   AwsAuthStatusManager,

src/components/BaseTextInput.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import { renderPlaceholder } from '../hooks/renderPlaceholder.js'
 import { usePasteHandler } from '../hooks/usePasteHandler.js'
-import { useDeclaredCursor } from '../ink/hooks/use-declared-cursor.js'
-import { Ansi, Box, Text, useInput } from '../ink.js'
+import { useDeclaredCursor } from '@anthropic/ink'
+import { Ansi, Box, Text, useInput } from '@anthropic/ink'
 import type {
   BaseInputState,
   BaseTextInputProps,

src/components/BashModeProgress.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Box } from '../ink.js'
+import { Box } from '@anthropic/ink'
 import { BashTool } from '../tools/BashTool/BashTool.js'
 import type { ShellProgress } from '../types/tools.js'
 import { UserBashInputMessage } from './messages/UserBashInputMessage.js'

src/components/BridgeDialog.tsx

@@ -15,12 +15,12 @@ import {
 } from '../constants/figures.js'
 import { useRegisterOverlay } from '../context/overlayContext.js'
 // eslint-disable-next-line custom-rules/prefer-use-keybindings -- raw 'd' key for disconnect, not a configurable keybinding action
-import { Box, Text, useInput } from '../ink.js'
+import { Box, Text, useInput } from '@anthropic/ink'
 import { useKeybindings } from '../keybindings/useKeybinding.js'
 import { useAppState, useSetAppState } from '../state/AppState.js'
 import { saveGlobalConfig } from '../utils/config.js'
 import { getBranch } from '../utils/git.js'
-import { Dialog } from './design-system/Dialog.js'
+import { Dialog } from '@anthropic/ink'
 
 type Props = {
   onDone: () => void

src/components/BuiltinStatusLine.tsx

@@ -1,8 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { formatCost } from '../cost-tracker.js';
-import { Box, Text } from '../ink.js';
+import { Box, Text, ProgressBar } from '@anthropic/ink';
 import { formatTokens } from '../utils/format.js';
-import { ProgressBar } from './design-system/ProgressBar.js';
 import { useTerminalSize } from '../hooks/useTerminalSize.js';
 
 type RateLimitBucket = {

src/components/BypassPermissionsModeDialog.tsx

@@ -1,10 +1,10 @@
 import React, { useCallback } from 'react'
 import { logEvent } from 'src/services/analytics/index.js'
-import { Box, Link, Newline, Text } from '../ink.js'
+import { Box, Link, Newline, Text } from '@anthropic/ink'
 import { gracefulShutdownSync } from '../utils/gracefulShutdown.js'
 import { updateSettingsForSource } from '../utils/settings/settings.js'
 import { Select } from './CustomSelect/index.js'
-import { Dialog } from './design-system/Dialog.js'
+import { Dialog } from '@anthropic/ink'
 
 type Props = {
   onAccept(): void

src/components/ChannelDowngradeDialog.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
-import { Text } from '../ink.js'
+import { Text } from '@anthropic/ink'
 import { Select } from './CustomSelect/index.js'
-import { Dialog } from './design-system/Dialog.js'
+import { Dialog } from '@anthropic/ink'
 
 export type ChannelDowngradeChoice = 'downgrade' | 'stay' | 'cancel'
 

src/components/ClaudeCodeHint/PluginHintMenu.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Box, Text } from '../../ink.js'
+import { Box, Text } from '@anthropic/ink'
 import { Select } from '../CustomSelect/select.js'
 import { PermissionDialog } from '../permissions/PermissionDialog.js'
 

src/components/ClaudeInChromeOnboarding.tsx

@@ -1,10 +1,9 @@
 import React from 'react'
 import { logEvent } from 'src/services/analytics/index.js'
 // eslint-disable-next-line custom-rules/prefer-use-keybindings -- enter to continue
-import { Box, Link, Newline, Text, useInput } from '../ink.js'
+import { Box, Dialog, Link, Newline, Text, useInput } from '@anthropic/ink'
 import { isChromeExtensionInstalled } from '../utils/claudeInChrome/setup.js'
 import { saveGlobalConfig } from '../utils/config.js'
-import { Dialog } from './design-system/Dialog.js'
 
 const CHROME_EXTENSION_URL = 'https://claude.ai/chrome'
 const CHROME_PERMISSIONS_URL = 'https://clau.de/chrome/permissions'

src/components/ClaudeMdExternalIncludesDialog.tsx

@@ -1,10 +1,9 @@
 import React, { useCallback } from 'react'
 import { logEvent } from 'src/services/analytics/index.js'
-import { Box, Link, Text } from '../ink.js'
+import { Box, Dialog, Link, Text } from '@anthropic/ink'
 import type { ExternalClaudeMdInclude } from '../utils/claudemd.js'
 import { saveCurrentProjectConfig } from '../utils/config.js'
 import { Select } from './CustomSelect/index.js'
-import { Dialog } from './design-system/Dialog.js'
 
 type Props = {
   onDone(): void

src/components/ClickableImageRef.tsx

@@ -1,8 +1,6 @@
 import * as React from 'react'
 import { pathToFileURL } from 'url'
-import Link from '../ink/components/Link.js'
-import { supportsHyperlinks } from '../ink/supports-hyperlinks.js'
-import { Text } from '../ink.js'
+import { Link, supportsHyperlinks, Text } from '@anthropic/ink'
 import { getStoredImagePath } from '../utils/imageStore.js'
 import type { Theme } from '../utils/theme.js'
 

src/components/CompactSummary.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { BLACK_CIRCLE } from '../constants/figures.js'
-import { Box, Text } from '../ink.js'
+import { Box, Text } from '@anthropic/ink'
 import type { Screen } from '../screens/REPL.js'
 import type { NormalizedUserMessage } from '../types/message.js'
 import { getUserMessageText } from '../utils/messages.js'

src/components/ConfigurableShortcutHint.tsx

@@ -4,7 +4,7 @@ import type {
   KeybindingContextName,
 } from '../keybindings/types.js'
 import { useShortcutDisplay } from '../keybindings/useShortcutDisplay.js'
-import { KeyboardShortcutHint } from './design-system/KeyboardShortcutHint.js'
+import { KeyboardShortcutHint } from '@anthropic/ink'
 
 type Props = {
   /** The keybinding action (e.g., 'app:toggleTranscript') */

src/components/ConsoleOAuthFlow.tsx

@@ -5,9 +5,7 @@ import {
 } from 'src/services/analytics/index.js'
 import { installOAuthTokens } from '../cli/handlers/auth.js'
 import { useTerminalSize } from '../hooks/useTerminalSize.js'
-import { setClipboard } from '../ink/termio/osc.js'
-import { useTerminalNotification } from '../ink/useTerminalNotification.js'
-import { Box, Link, Text } from '../ink.js'
+import { setClipboard, useTerminalNotification, Box, Link, Text, KeyboardShortcutHint } from '@anthropic/ink'
 import { useKeybinding } from '../keybindings/useKeybinding.js'
 import { getSSLErrorHint } from '../services/api/errorUtils.js'
 import { sendNotification } from '../services/notifier.js'
@@ -16,7 +14,6 @@ import { getOauthAccountInfo, validateForceLoginOrg } from '../utils/auth.js'
 import { logError } from '../utils/log.js'
 import { getSettings_DEPRECATED, updateSettingsForSource } from '../utils/settings/settings.js'
 import { Select } from './CustomSelect/select.js'
-import { KeyboardShortcutHint } from './design-system/KeyboardShortcutHint.js'
 import { Spinner } from './Spinner.js'
 import TextInput from './TextInput.js'
 import { fi } from 'zod/v4/locales'

src/components/ContextSuggestions.tsx

@@ -1,9 +1,8 @@
 import figures from 'figures'
 import * as React from 'react'
-import { Box, Text } from '../ink.js'
+import { Box, Text, StatusIcon } from '@anthropic/ink'
 import type { ContextSuggestion } from '../utils/contextSuggestions.js'
 import { formatTokens } from '../utils/format.js'
-import { StatusIcon } from './design-system/StatusIcon.js'
 
 type Props = {
   suggestions: ContextSuggestion[]

src/components/ContextVisualization.tsx

@@ -1,6 +1,6 @@
 import { feature } from 'bun:bundle'
 import * as React from 'react'
-import { Box, Text } from '../ink.js'
+import { Box, Text } from '@anthropic/ink'
 import type { ContextData } from '../utils/analyzeContext.js'
 import { generateContextSuggestions } from '../utils/contextSuggestions.js'
 import { getDisplayPath } from '../utils/file.js'

src/components/CoordinatorAgentStatus.tsx

@@ -10,8 +10,7 @@ import figures from 'figures'
 import * as React from 'react'
 import { BLACK_CIRCLE, PAUSE_ICON, PLAY_ICON } from '../constants/figures.js'
 import { useTerminalSize } from '../hooks/useTerminalSize.js'
-import { stringWidth } from '../ink/stringWidth.js'
-import { Box, Text, wrapText } from '../ink.js'
+import { Box, Text, stringWidth, wrapText } from '@anthropic/ink'
 import {
   type AppState,
   useAppState,

src/components/CostThresholdDialog.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
-import { Box, Link, Text } from '../ink.js'
+import { Box, Dialog, Link, Text } from '@anthropic/ink'
 import { Select } from './CustomSelect/index.js'
-import { Dialog } from './design-system/Dialog.js'
 
 type Props = {
   onDone: () => void

src/components/CtrlOToExpand.tsx

@@ -1,9 +1,9 @@
 import chalk from 'chalk'
 import React, { useContext } from 'react'
-import { Text } from '../ink.js'
+import { Text } from '@anthropic/ink'
 import { getShortcutDisplay } from '../keybindings/shortcutFormat.js'
 import { useShortcutDisplay } from '../keybindings/useShortcutDisplay.js'
-import { KeyboardShortcutHint } from './design-system/KeyboardShortcutHint.js'
+import { KeyboardShortcutHint } from '@anthropic/ink'
 import { InVirtualListContext } from './messageActions.js'
 
 // Context to track if we're inside a sub agent

src/components/CustomSelect/SelectMulti.tsx

@@ -1,6 +1,6 @@
 import figures from 'figures'
 import React from 'react'
-import { Box, Text } from '../../ink.js'
+import { Box, Text } from '@anthropic/ink'
 import type { PastedContent } from '../../utils/config.js'
 import type { ImageDimensions } from '../../utils/imageResizer.js'
 import type { OptionWithDescription } from './select.js'

src/components/CustomSelect/select-input-option.tsx

@@ -1,6 +1,6 @@
 import React, { type ReactNode, useEffect, useRef, useState } from 'react'
 // eslint-disable-next-line custom-rules/prefer-use-keybindings -- UP arrow exit not in Attachments bindings
-import { Box, Text, useInput } from '../../ink.js'
+import { Box, Text, useInput } from '@anthropic/ink'
 import {
   useKeybinding,
   useKeybindings,
@@ -10,7 +10,7 @@ import { getImageFromClipboard } from '../../utils/imagePaste.js'
 import type { ImageDimensions } from '../../utils/imageResizer.js'
 import { ClickableImageRef } from '../ClickableImageRef.js'
 import { ConfigurableShortcutHint } from '../ConfigurableShortcutHint.js'
-import { Byline } from '../design-system/Byline.js'
+import { Byline } from '@anthropic/ink'
 import TextInput from '../TextInput.js'
 import type { OptionWithDescription } from './select.js'
 import { SelectOption } from './select-option.js'

src/components/CustomSelect/select-option.tsx

@@ -1,5 +1,5 @@
 import React, { type ReactNode } from 'react'
-import { ListItem } from '../design-system/ListItem.js'
+import { ListItem } from '@anthropic/ink'
 
 export type SelectOptionProps = {
   /**

src/components/CustomSelect/select.tsx

@@ -1,8 +1,6 @@
 import figures from 'figures'
 import React, { type ReactNode, useEffect, useRef, useState } from 'react'
-import { useDeclaredCursor } from '../../ink/hooks/use-declared-cursor.js'
-import { stringWidth } from '../../ink/stringWidth.js'
-import { Ansi, Box, Text } from '../../ink.js'
+import { Ansi, Box, Text, stringWidth, useDeclaredCursor } from '@anthropic/ink'
 import { count } from '../../utils/array.js'
 import type { PastedContent } from '../../utils/config.js'
 import type { ImageDimensions } from '../../utils/imageResizer.js'

src/components/CustomSelect/use-multi-select-state.ts

@@ -1,9 +1,7 @@
 import { useCallback, useState } from 'react'
 import { isDeepStrictEqual } from 'util'
 import { useRegisterOverlay } from '../../context/overlayContext.js'
-import type { InputEvent } from '../../ink/events/input-event.js'
-// eslint-disable-next-line custom-rules/prefer-use-keybindings -- raw space/arrow multiselect input
-import { useInput } from '../../ink.js'
+import { type InputEvent, useInput } from '@anthropic/ink'
 import {
   normalizeFullWidthDigits,
   normalizeFullWidthSpace,

src/components/CustomSelect/use-select-input.ts

@@ -1,7 +1,6 @@
 import { useMemo } from 'react'
 import { useRegisterOverlay } from '../../context/overlayContext.js'
-import type { InputEvent } from '../../ink/events/input-event.js'
-import { useInput } from '../../ink.js'
+import { type InputEvent, useInput } from '@anthropic/ink'
 import { useKeybindings } from '../../keybindings/useKeybinding.js'
 import {
   normalizeFullWidthDigits,

src/components/DesktopHandoff.tsx

@@ -1,16 +1,13 @@
 import React, { useEffect, useState } from 'react'
 import type { CommandResultDisplay } from '../commands.js'
 // eslint-disable-next-line custom-rules/prefer-use-keybindings -- raw input for "any key" dismiss and y/n prompt
-import { Box, Text, useInput } from '../ink.js'
+import { Box, Text, useInput, LoadingState } from '@anthropic/ink'
+import { getDesktopInstallStatus, openCurrentSessionInDesktop } from '../utils/desktopDeepLink.js'
 import { openBrowser } from '../utils/browser.js'
-import {
-  getDesktopInstallStatus,
-  openCurrentSessionInDesktop,
-} from '../utils/desktopDeepLink.js'
+
 import { errorMessage } from '../utils/errors.js'
 import { gracefulShutdown } from '../utils/gracefulShutdown.js'
 import { flushSessionStorage } from '../utils/sessionStorage.js'
-import { LoadingState } from './design-system/LoadingState.js'
 
 const DESKTOP_DOCS_URL = 'https://clau.de/desktop'
 

src/components/DesktopUpsell/DesktopUpsellStartup.tsx

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

src/components/DevBar.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { useState } from 'react'
 import { getSlowOperations } from '../bootstrap/state.js'
-import { Text, useInterval } from '../ink.js'
+import { Text, useInterval } from '@anthropic/ink'
 
 // Show DevBar for dev builds or all ants
 function shouldShowDevBar(): boolean {

src/components/DevChannelsDialog.tsx

@@ -1,9 +1,8 @@
 import React, { useCallback } from 'react'
 import type { ChannelEntry } from '../bootstrap/state.js'
-import { Box, Text } from '../ink.js'
+import { Box, Text, Dialog } from '@anthropic/ink'
 import { gracefulShutdownSync } from '../utils/gracefulShutdown.js'
 import { Select } from './CustomSelect/index.js'
-import { Dialog } from './design-system/Dialog.js'
 
 type Props = {
   channels: ChannelEntry[]

src/components/DiagnosticsDisplay.tsx

@@ -1,6 +1,6 @@
 import { relative } from 'path'
 import React from 'react'
-import { Box, Text } from '../ink.js'
+import { Box, Text } from '@anthropic/ink'
 import { DiagnosticTrackingService } from '../services/diagnosticTracking.js'
 import type { Attachment } from '../utils/attachments.js'
 import { getCwd } from '../utils/cwd.js'

src/components/EffortCallout.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useRef } from 'react'
-import { Box, Text } from '../ink.js'
+import { Box, Text } from '@anthropic/ink'
 import {
   isMaxSubscriber,
   isProSubscriber,

src/components/ExportDialog.tsx

@@ -2,16 +2,12 @@ import { join } from 'path'
 import React, { useCallback, useState } from 'react'
 import type { ExitState } from '../hooks/useExitOnCtrlCDWithKeybindings.js'
 import { useTerminalSize } from '../hooks/useTerminalSize.js'
-import { setClipboard } from '../ink/termio/osc.js'
-import { Box, Text } from '../ink.js'
+import { setClipboard, Box, Text, Byline, Dialog, KeyboardShortcutHint } from '@anthropic/ink'
 import { useKeybinding } from '../keybindings/useKeybinding.js'
 import { getCwd } from '../utils/cwd.js'
 import { writeFileSync_DEPRECATED } from '../utils/slowOperations.js'
 import { ConfigurableShortcutHint } from './ConfigurableShortcutHint.js'
 import { Select } from './CustomSelect/select.js'
-import { Byline } from './design-system/Byline.js'
-import { Dialog } from './design-system/Dialog.js'
-import { KeyboardShortcutHint } from './design-system/KeyboardShortcutHint.js'
 import TextInput from './TextInput.js'
 
 type ExportDialogProps = {

src/components/FallbackToolUseErrorMessage.tsx

@@ -3,7 +3,7 @@ import * as React from 'react'
 import { stripUnderlineAnsi } from 'src/components/shell/OutputLine.js'
 import { extractTag } from 'src/utils/messages.js'
 import { removeSandboxViolationTags } from 'src/utils/sandbox/sandbox-ui-utils.js'
-import { Box, Text } from '../ink.js'
+import { Box, Text } from '@anthropic/ink'
 import { useShortcutDisplay } from '../keybindings/useShortcutDisplay.js'
 import { countCharInString } from '../utils/stringUtils.js'
 import { MessageResponse } from './MessageResponse.js'

src/components/FastIcon.tsx

@@ -1,10 +1,9 @@
 import chalk from 'chalk'
 import * as React from 'react'
 import { LIGHTNING_BOLT } from '../constants/figures.js'
-import { Text } from '../ink.js'
+import { Text, color } from '@anthropic/ink'
 import { getGlobalConfig } from '../utils/config.js'
 import { resolveThemeSetting } from '../utils/systemTheme.js'
-import { color } from './design-system/color.js'
 
 type Props = {
   cooldown?: boolean

src/components/Feedback.tsx

@@ -14,7 +14,7 @@ import {
 } from 'src/utils/messages.js'
 import type { CommandResultDisplay } from '../commands.js'
 import { useTerminalSize } from '../hooks/useTerminalSize.js'
-import { Box, Text, useInput } from '../ink.js'
+import { Box, Text, useInput } from '@anthropic/ink'
 import { useKeybinding } from '../keybindings/useKeybinding.js'
 import { queryHaiku } from '../services/api/claude.js'
 import { startsWithApiErrorPrefix } from '../services/api/errors.js'
@@ -36,9 +36,7 @@ import {
 import { jsonStringify } from '../utils/slowOperations.js'
 import { asSystemPrompt } from '../utils/systemPromptType.js'
 import { ConfigurableShortcutHint } from './ConfigurableShortcutHint.js'
-import { Byline } from './design-system/Byline.js'
-import { Dialog } from './design-system/Dialog.js'
-import { KeyboardShortcutHint } from './design-system/KeyboardShortcutHint.js'
+import { Byline, Dialog, KeyboardShortcutHint } from '@anthropic/ink'
 import TextInput from './TextInput.js'
 
 // This value was determined experimentally by testing the URL length limit

src/components/FeedbackSurvey/FeedbackSurvey.tsx

@@ -3,7 +3,7 @@ import {
   type AnalyticsMetadata_I_VERIFIED_THIS_IS_NOT_CODE_OR_FILEPATHS,
   logEvent,
 } from 'src/services/analytics/index.js'
-import { Box, Text } from '../../ink.js'
+import { Box, Text } from '@anthropic/ink'
 import {
   FeedbackSurveyView,
   isValidResponseInput,

src/components/FeedbackSurvey/FeedbackSurveyView.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Box, Text } from '../../ink.js'
+import { Box, Text } from '@anthropic/ink'
 import { useDebouncedDigitInput } from './useDebouncedDigitInput.js'
 import type { FeedbackSurveyResponse } from './utils.js'
 

src/components/FeedbackSurvey/TranscriptSharePrompt.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { BLACK_CIRCLE } from '../../constants/figures.js'
-import { Box, Text } from '../../ink.js'
+import { Box, Text } from '@anthropic/ink'
 import { useDebouncedDigitInput } from './useDebouncedDigitInput.js'
 
 export type TranscriptShareResponse = 'yes' | 'no' | 'dont_ask_again'

src/components/FileEditToolDiff.tsx

@@ -2,7 +2,7 @@ import type { StructuredPatchHunk } from 'diff'
 import * as React from 'react'
 import { Suspense, use, useState } from 'react'
 import { useTerminalSize } from '../hooks/useTerminalSize.js'
-import { Box, Text } from '../ink.js'
+import { Box, Text } from '@anthropic/ink'
 import type { FileEdit } from '../tools/FileEditTool/types.js'
 import {
   findActualString,

src/components/FileEditToolUpdatedMessage.tsx

@@ -1,7 +1,7 @@
 import type { StructuredPatchHunk } from 'diff'
 import * as React from 'react'
 import { useTerminalSize } from '../hooks/useTerminalSize.js'
-import { Box, Text } from '../ink.js'
+import { Box, Text } from '@anthropic/ink'
 import { count } from '../utils/array.js'
 import { MessageResponse } from './MessageResponse.js'
 import { StructuredDiffList } from './StructuredDiffList.js'

src/components/FileEditToolUseRejectedMessage.tsx

@@ -3,7 +3,7 @@ import { relative } from 'path'
 import * as React from 'react'
 import { useTerminalSize } from 'src/hooks/useTerminalSize.js'
 import { getCwd } from 'src/utils/cwd.js'
-import { Box, Text } from '../ink.js'
+import { Box, Text } from '@anthropic/ink'
 import { HighlightedCode } from './HighlightedCode.js'
 import { MessageResponse } from './MessageResponse.js'
 import { StructuredDiffList } from './StructuredDiffList.js'

src/components/FilePathLink.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { pathToFileURL } from 'url'
-import Link from '../ink/components/Link.js'
+import { Link } from '@anthropic/ink'
 
 type Props = {
   /** The absolute file path */

src/components/FullscreenLayout.tsx

@@ -19,9 +19,7 @@ import {
   usePromptOverlayDialog,
 } from '../context/promptOverlayContext.js'
 import { useTerminalSize } from '../hooks/useTerminalSize.js'
-import ScrollBox, { type ScrollBoxHandle } from '../ink/components/ScrollBox.js'
-import instances from '../ink/instances.js'
-import { Box, Text } from '../ink.js'
+import { Box, ScrollBox, type ScrollBoxHandle, Text, instances } from '@anthropic/ink'
 import type { Message } from '../types/message.js'
 import { openBrowser, openPath } from '../utils/browser.js'
 import { isFullscreenEnvEnabled } from '../utils/fullscreen.js'

src/components/GlobalSearchDialog.tsx

@@ -3,7 +3,7 @@ import * as React from 'react'
 import { useEffect, useRef, useState } from 'react'
 import { useRegisterOverlay } from '../context/overlayContext.js'
 import { useTerminalSize } from '../hooks/useTerminalSize.js'
-import { Text } from '../ink.js'
+import { Text } from '@anthropic/ink'
 import { logEvent } from '../services/analytics/index.js'
 import { getCwd } from '../utils/cwd.js'
 import { openFileInExternalEditor } from '../utils/editor.js'
@@ -12,8 +12,7 @@ import { highlightMatch } from '../utils/highlightMatch.js'
 import { relativePath } from '../utils/permissions/filesystem.js'
 import { readFileInRange } from '../utils/readFileInRange.js'
 import { ripGrepStream } from '../utils/ripgrep.js'
-import { FuzzyPicker } from './design-system/FuzzyPicker.js'
-import { LoadingState } from './design-system/LoadingState.js'
+import { FuzzyPicker, LoadingState } from '@anthropic/ink'
 
 type Props = {
   onDone: () => void

src/components/HelpV2/Commands.tsx

@@ -1,9 +1,7 @@
 import * as React from 'react'
 import { useMemo } from 'react'
 import { type Command, formatDescriptionWithSource } from '../../commands.js'
-import { Box, Text } from '../../ink.js'
-import { truncate } from '../../utils/format.js'
-import { Select } from '../CustomSelect/select.js'
+import { Box, Text } from '@anthropic/ink'
 import { useTabHeaderFocus } from '../design-system/Tabs.js'
 
 type Props = {

src/components/HelpV2/General.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Box, Text } from '../../ink.js'
+import { Box, Text } from '@anthropic/ink'
 import { PromptInputHelpMenu } from '../PromptInput/PromptInputHelpMenu.js'
 
 export function General(): React.ReactNode {

src/components/HelpV2/HelpV2.tsx

@@ -9,10 +9,10 @@ import {
 } from '../../commands.js'
 import { useIsInsideModal } from '../../context/modalContext.js'
 import { useTerminalSize } from '../../hooks/useTerminalSize.js'
-import { Box, Link, Text } from '../../ink.js'
+import { Box, Link, Text } from '@anthropic/ink'
 import { useKeybinding } from '../../keybindings/useKeybinding.js'
-import { Pane } from '../design-system/Pane.js'
-import { Tab, Tabs } from '../design-system/Tabs.js'
+import { Pane, Tabs } from '@anthropic/ink'
+import { Tab } from '../design-system/Tabs.js'
 import { Commands } from './Commands.js'
 import { General } from './General.js'
 

src/components/HighlightedCode.tsx

@@ -1,15 +1,7 @@
 import * as React from 'react'
 import { memo, useEffect, useMemo, useRef, useState } from 'react'
 import { useSettings } from '../hooks/useSettings.js'
-import {
-  Ansi,
-  Box,
-  type DOMElement,
-  measureElement,
-  NoSelect,
-  Text,
-  useTheme,
-} from '../ink.js'
+import { Ansi, Box, type DOMElement, measureElement, NoSelect, Text, useTheme } from '@anthropic/ink'
 import { isFullscreenEnvEnabled } from '../utils/fullscreen.js'
 import sliceAnsi from '../utils/sliceAnsi.js'
 import { countCharInString } from '../utils/stringUtils.js'

src/components/HighlightedCode/Fallback.tsx

@@ -1,6 +1,6 @@
 import { extname } from 'path'
 import React, { Suspense, use, useMemo } from 'react'
-import { Ansi, Text } from '../../ink.js'
+import { Ansi, Text } from '@anthropic/ink'
 import { getCliHighlightPromise } from '../../utils/cliHighlight.js'
 import { logForDebugging } from '../../utils/debug.js'
 import { convertLeadingTabsToSpaces } from '../../utils/file.js'

src/components/HistorySearchDialog.tsx

@@ -6,13 +6,11 @@ import {
   type TimestampedHistoryEntry,
 } from '../history.js'
 import { useTerminalSize } from '../hooks/useTerminalSize.js'
-import { stringWidth } from '../ink/stringWidth.js'
-import { wrapAnsi } from '../ink/wrapAnsi.js'
-import { Box, Text } from '../ink.js'
+import { Box, Text, stringWidth, wrapAnsi } from '@anthropic/ink'
 import { logEvent } from '../services/analytics/index.js'
 import type { HistoryEntry } from '../utils/config.js'
 import { formatRelativeTimeAgo, truncateToWidth } from '../utils/format.js'
-import { FuzzyPicker } from './design-system/FuzzyPicker.js'
+import { FuzzyPicker } from '@anthropic/ink'
 
 type Props = {
   initialQuery?: string

src/components/IdeAutoConnectDialog.tsx

@@ -1,9 +1,8 @@
 import React, { useCallback } from 'react'
-import { Text } from '../ink.js'
+import { Text, Dialog } from '@anthropic/ink'
 import { getGlobalConfig, saveGlobalConfig } from '../utils/config.js'
 import { isSupportedTerminal } from '../utils/ide.js'
 import { Select } from './CustomSelect/index.js'
-import { Dialog } from './design-system/Dialog.js'
 
 type IdeAutoConnectDialogProps = {
   onComplete: () => void

src/components/IdeOnboardingDialog.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { envDynamic } from 'src/utils/envDynamic.js'
-import { Box, Text } from '../ink.js'
+import { Box, Text } from '@anthropic/ink'
 import { useKeybindings } from '../keybindings/useKeybinding.js'
 import { getGlobalConfig, saveGlobalConfig } from '../utils/config.js'
 import { env } from '../utils/env.js'
@@ -10,7 +10,7 @@ import {
   isJetBrainsIde,
   toIDEDisplayName,
 } from '../utils/ide.js'
-import { Dialog } from './design-system/Dialog.js'
+import { Dialog } from '@anthropic/ink'
 
 interface Props {
   onDone: () => void

src/components/IdeStatusIndicator.tsx

@@ -2,7 +2,7 @@ import { basename } from 'path'
 import * as React from 'react'
 import { useIdeConnectionStatus } from '../hooks/useIdeConnectionStatus.js'
 import type { IDESelection } from '../hooks/useIdeSelection.js'
-import { Text } from '../ink.js'
+import { Text } from '@anthropic/ink'
 import type { MCPServerConnection } from '../services/mcp/types.js'
 
 type IdeStatusIndicatorProps = {

src/components/IdleReturnDialog.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
-import { Box, Text } from '../ink.js'
+import { Box, Text } from '@anthropic/ink'
 import { formatTokens } from '../utils/format.js'
 import { Select } from './CustomSelect/index.js'
-import { Dialog } from './design-system/Dialog.js'
+import { Dialog } from '@anthropic/ink'
 
 type IdleReturnAction = 'continue' | 'clear' | 'dismiss' | 'never'
 

src/components/InterruptedByUser.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Text } from '../ink.js'
+import { Text } from '@anthropic/ink'
 
 export function InterruptedByUser(): React.ReactNode {
   return (

src/components/InvalidConfigDialog.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Box, render, Text } from '../ink.js'
+import { Box, Dialog, wrappedRender as render, Text } from '@anthropic/ink'
 import { KeybindingSetup } from '../keybindings/KeybindingProviderSetup.js'
 import { AppStateProvider } from '../state/AppState.js'
 import type { ConfigParseError } from '../utils/errors.js'
@@ -10,7 +10,6 @@ import {
 } from '../utils/slowOperations.js'
 import type { ThemeName } from '../utils/theme.js'
 import { Select } from './CustomSelect/index.js'
-import { Dialog } from './design-system/Dialog.js'
 
 interface InvalidConfigHandlerProps {
   error: ConfigParseError

src/components/InvalidSettingsDialog.tsx

@@ -1,8 +1,7 @@
 import React from 'react'
-import { Text } from '../ink.js'
+import { Text, Dialog } from '@anthropic/ink'
 import type { ValidationError } from '../utils/settings/validation.js'
 import { Select } from './CustomSelect/index.js'
-import { Dialog } from './design-system/Dialog.js'
 import { ValidationErrorsList } from './ValidationErrorsList.js'
 
 type Props = {

src/components/KeybindingWarnings.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Box, Text } from '../ink.js'
+import { Box, Text } from '@anthropic/ink'
 import {
   getCachedKeybindingWarnings,
   getKeybindingsPath,

src/components/LanguagePicker.tsx

@@ -1,6 +1,6 @@
 import figures from 'figures'
 import React, { useState } from 'react'
-import { Box, Text } from '../ink.js'
+import { Box, Text } from '@anthropic/ink'
 import { useKeybinding } from '../keybindings/useKeybinding.js'
 import TextInput from './TextInput.js'
 

src/components/LogSelector.tsx

@@ -6,9 +6,7 @@ import { getOriginalCwd, getSessionId } from '../bootstrap/state.js'
 import { useExitOnCtrlCDWithKeybindings } from '../hooks/useExitOnCtrlCDWithKeybindings.js'
 import { useSearchInput } from '../hooks/useSearchInput.js'
 import { useTerminalSize } from '../hooks/useTerminalSize.js'
-import { applyColor } from '../ink/colorize.js'
-import type { Color } from '../ink/styles.js'
-import { Box, Text, useInput, useTerminalFocus, useTheme } from '../ink.js'
+import { applyColor, Box, Text, useInput, useTerminalFocus, useTheme, type Color, Byline, Divider, KeyboardShortcutHint } from '@anthropic/ink'
 import { useKeybinding } from '../keybindings/useKeybinding.js'
 import { logEvent } from '../services/analytics/index.js'
 import type { LogOption, SerializedMessage } from '../types/logs.js'
@@ -25,9 +23,6 @@ import {
 import { getTheme } from '../utils/theme.js'
 import { ConfigurableShortcutHint } from './ConfigurableShortcutHint.js'
 import { Select } from './CustomSelect/select.js'
-import { Byline } from './design-system/Byline.js'
-import { Divider } from './design-system/Divider.js'
-import { KeyboardShortcutHint } from './design-system/KeyboardShortcutHint.js'
 import { SearchBox } from './SearchBox.js'
 import { SessionPreview } from './SessionPreview.js'
 import { Spinner } from './Spinner.js'

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,

src/components/LspRecommendation/LspRecommendationMenu.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Box, Text } from '../../ink.js'
+import { Box, Text } from '@anthropic/ink'
 import { Select } from '../CustomSelect/select.js'
 import { PermissionDialog } from '../permissions/PermissionDialog.js'
 

src/components/MCPServerApprovalDialog.tsx

@@ -8,7 +8,7 @@ import {
   updateSettingsForSource,
 } from '../utils/settings/settings.js'
 import { Select } from './CustomSelect/index.js'
-import { Dialog } from './design-system/Dialog.js'
+import { Dialog } from '@anthropic/ink'
 import { MCPServerDialogCopy } from './MCPServerDialogCopy.js'
 
 type Props = {

src/components/MCPServerDesktopImportDialog.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useState } from 'react'
 import { gracefulShutdown } from 'src/utils/gracefulShutdown.js'
 import { writeToStdout } from 'src/utils/process.js'
-import { Box, color, Text, useTheme } from '../ink.js'
+import { Box, color, Text, useTheme, Byline, Dialog, KeyboardShortcutHint } from '@anthropic/ink'
 import { addMcpConfig, getAllMcpConfigs } from '../services/mcp/config.js'
 import type {
   ConfigScope,
@@ -11,9 +11,6 @@ import type {
 import { plural } from '../utils/stringUtils.js'
 import { ConfigurableShortcutHint } from './ConfigurableShortcutHint.js'
 import { SelectMulti } from './CustomSelect/SelectMulti.js'
-import { Byline } from './design-system/Byline.js'
-import { Dialog } from './design-system/Dialog.js'
-import { KeyboardShortcutHint } from './design-system/KeyboardShortcutHint.js'
 
 type Props = {
   servers: Record<string, McpServerConfig>

src/components/MCPServerDialogCopy.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Link, Text } from '../ink.js'
+import { Link, Text } from '@anthropic/ink'
 
 export function MCPServerDialogCopy(): React.ReactNode {
   return (

src/components/MCPServerMultiselectDialog.tsx

@@ -1,16 +1,14 @@
 import partition from 'lodash-es/partition.js'
 import React, { useCallback } from 'react'
 import { logEvent } from 'src/services/analytics/index.js'
-import { Box, Text } from '../ink.js'
+import { Box, Text } from '@anthropic/ink'
 import {
   getSettings_DEPRECATED,
   updateSettingsForSource,
 } from '../utils/settings/settings.js'
 import { ConfigurableShortcutHint } from './ConfigurableShortcutHint.js'
 import { SelectMulti } from './CustomSelect/SelectMulti.js'
-import { Byline } from './design-system/Byline.js'
-import { Dialog } from './design-system/Dialog.js'
-import { KeyboardShortcutHint } from './design-system/KeyboardShortcutHint.js'
+import { Byline, Dialog, KeyboardShortcutHint } from '@anthropic/ink'
 import { MCPServerDialogCopy } from './MCPServerDialogCopy.js'
 
 type Props = {

src/components/ManagedSettingsSecurityDialog/ManagedSettingsSecurityDialog.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { useExitOnCtrlCDWithKeybindings } from '../../hooks/useExitOnCtrlCDWithKeybindings.js'
-import { Box, Text } from '../../ink.js'
+import { Box, Text } from '@anthropic/ink'
 import { useKeybinding } from '../../keybindings/useKeybinding.js'
 import type { SettingsJson } from '../../utils/settings/types.js'
 import { Select } from '../CustomSelect/index.js'

src/components/Markdown.tsx

@@ -1,7 +1,7 @@
 import { marked, type Token, type Tokens } from 'marked'
 import React, { Suspense, use, useMemo, useRef } from 'react'
 import { useSettings } from '../hooks/useSettings.js'
-import { Ansi, Box, useTheme } from '../ink.js'
+import { Ansi, Box, useTheme } from '@anthropic/ink'
 import {
   type CliHighlight,
   getCliHighlightPromise,

src/components/MarkdownTable.tsx

@@ -2,9 +2,7 @@ import type { Token, Tokens } from 'marked'
 import React from 'react'
 import stripAnsi from 'strip-ansi'
 import { useTerminalSize } from '../hooks/useTerminalSize.js'
-import { stringWidth } from '../ink/stringWidth.js'
-import { wrapAnsi } from '../ink/wrapAnsi.js'
-import { Ansi, useTheme } from '../ink.js'
+import { Ansi, stringWidth, useTheme, wrapAnsi } from '@anthropic/ink'
 import type { CliHighlight } from '../utils/cliHighlight.js'
 import { formatToken, padAligned } from '../utils/markdown.js'
 

src/components/MemoryUsageIndicator.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { useMemoryUsage } from '../hooks/useMemoryUsage.js'
-import { Box, Text } from '../ink.js'
+import { Box, Text } from '@anthropic/ink'
 import { formatFileSize } from '../utils/format.js'
 
 export function MemoryUsageIndicator(): React.ReactNode {

src/components/Message.tsx

@@ -10,7 +10,7 @@ import type {
 import * as React from 'react'
 import type { Command } from '../commands.js'
 import { useTerminalSize } from '../hooks/useTerminalSize.js'
-import { Box } from '../ink.js'
+import { Box } from '@anthropic/ink'
 import type { Tools } from '../Tool.js'
 import {
   type ConnectorTextBlock,

src/components/MessageModel.tsx

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

src/components/MessageResponse.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react'
 import { useContext } from 'react'
-import { Box, NoSelect, Text } from '../ink.js'
-import { Ratchet } from './design-system/Ratchet.js'
+import { Box, NoSelect, Text, Ratchet } from '@anthropic/ink'
 
 type Props = {
   children: React.ReactNode

src/components/MessageRow.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import type { Command } from '../commands.js'
-import { Box } from '../ink.js'
+import { Box } from '@anthropic/ink'
 import type { Screen } from '../screens/REPL.js'
 import type { Tools } from '../Tool.js'
 import type { RenderableMessage } from '../types/message.js'

src/components/MessageSelector.tsx

@@ -19,7 +19,7 @@ import {
 } from 'src/utils/fileHistory.js'
 import { logError } from 'src/utils/log.js'
 import { useExitOnCtrlCDWithKeybindings } from '../hooks/useExitOnCtrlCDWithKeybindings.js'
-import { Box, Text } from '../ink.js'
+import { Box, Text, Divider } from '@anthropic/ink'
 import { useKeybinding, useKeybindings } from '../keybindings/useKeybinding.js'
 import type {
   Message,
@@ -58,8 +58,6 @@ import {
 import { count } from '../utils/array.js'
 import { formatRelativeTimeAgo, truncate } from '../utils/format.js'
 import type { Theme } from '../utils/theme.js'
-import { Divider } from './design-system/Divider.js'
-
 type RestoreOption =
   | 'both'
   | 'conversation'

src/components/MessageTimestamp.tsx

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

src/components/Messages.tsx

@@ -9,9 +9,9 @@ import { getIsRemoteMode } from '../bootstrap/state.js'
 import type { Command } from '../commands.js'
 import { BLACK_CIRCLE } from '../constants/figures.js'
 import { useTerminalSize } from '../hooks/useTerminalSize.js'
-import type { ScrollBoxHandle } from '../ink/components/ScrollBox.js'
-import { useTerminalNotification } from '../ink/useTerminalNotification.js'
-import { Box, Text } from '../ink.js'
+import type { ScrollBoxHandle } from '@anthropic/ink'
+import { useTerminalNotification } from '@anthropic/ink'
+import { Box, Text } from '@anthropic/ink'
 import { useShortcutDisplay } from '../keybindings/useShortcutDisplay.js'
 import type { Screen } from '../screens/REPL.js'
 import type { Tools } from '../Tool.js'
@@ -49,7 +49,7 @@ import {
 } from '../utils/messages.js'
 import { plural } from '../utils/stringUtils.js'
 import { renderableSearchText } from '../utils/transcriptSearch.js'
-import { Divider } from './design-system/Divider.js'
+import { Divider } from '@anthropic/ink'
 import type { UnseenDivider } from './FullscreenLayout.js'
 import { LogoV2 } from './LogoV2/LogoV2.js'
 import { StreamingMarkdown } from './Markdown.js'
@@ -291,13 +291,13 @@ type Props = {
   /** Paint an existing DOM subtree to fresh Screen, scan. Element comes
    *  from the main tree (all real providers). Message-relative positions. */
   scanElement?: (
-    el: import('../ink/dom.js').DOMElement,
-  ) => import('../ink/render-to-screen.js').MatchPosition[]
+    el: import('@anthropic/ink').DOMElement,
+  ) => import('@anthropic/ink').MatchPosition[]
   /** Position-based CURRENT highlight. positions stable (msg-relative),
    *  rowOffset tracks scroll. null clears. */
   setPositions?: (
     state: {
-      positions: import('../ink/render-to-screen.js').MatchPosition[]
+      positions: import('@anthropic/ink').MatchPosition[]
       rowOffset: number
       currentIdx: number
     } | null,

src/components/ModelPicker.tsx

@@ -12,7 +12,7 @@ import {
   isFastModeCooldown,
   isFastModeEnabled,
 } from 'src/utils/fastMode.js'
-import { Box, Text } from '../ink.js'
+import { Box, Text } from '@anthropic/ink'
 import { useKeybindings } from '../keybindings/useKeybinding.js'
 import { useAppState, useSetAppState } from '../state/AppState.js'
 import {
@@ -37,9 +37,7 @@ import {
 } from '../utils/settings/settings.js'
 import { ConfigurableShortcutHint } from './ConfigurableShortcutHint.js'
 import { Select } from './CustomSelect/index.js'
-import { Byline } from './design-system/Byline.js'
-import { KeyboardShortcutHint } from './design-system/KeyboardShortcutHint.js'
-import { Pane } from './design-system/Pane.js'
+import { Byline, KeyboardShortcutHint, Pane } from '@anthropic/ink'
 import { effortLevelToSymbol } from './EffortIndicator.js'
 
 export type Props = {

src/components/NativeAutoUpdater.tsx

@@ -5,7 +5,7 @@ import { logForDebugging } from 'src/utils/debug.js'
 import { logError } from 'src/utils/log.js'
 import { useInterval } from 'usehooks-ts'
 import { useUpdateNotification } from '../hooks/useUpdateNotification.js'
-import { Box, Text } from '../ink.js'
+import { Box, Text } from '@anthropic/ink'
 import type { AutoUpdaterResult } from '../utils/autoUpdater.js'
 import { getMaxVersion, getMaxVersionMessage } from '../utils/autoUpdater.js'
 import { isAutoUpdaterDisabled } from '../utils/config.js'

src/components/NotebookEditToolUseRejectedMessage.tsx

@@ -1,7 +1,7 @@
 import { relative } from 'path'
 import * as React from 'react'
 import { getCwd } from 'src/utils/cwd.js'
-import { Box, Text } from '../ink.js'
+import { Box, Text } from '@anthropic/ink'
 import { HighlightedCode } from './HighlightedCode.js'
 import { MessageResponse } from './MessageResponse.js'
 

src/components/OffscreenFreeze.tsx

@@ -1,6 +1,5 @@
 import React, { useContext, useRef } from 'react'
-import { useTerminalViewport } from '../ink/hooks/use-terminal-viewport.js'
-import { Box } from '../ink.js'
+import { useTerminalViewport, Box } from '@anthropic/ink'
 import { InVirtualListContext } from './messageActions.js'
 
 type Props = {

src/components/Onboarding.tsx

@@ -8,7 +8,7 @@ import {
   shouldOfferTerminalSetup,
 } from '../commands/terminalSetup/terminalSetup.js'
 import { useExitOnCtrlCDWithKeybindings } from '../hooks/useExitOnCtrlCDWithKeybindings.js'
-import { Box, Link, Newline, Text, useTheme } from '../ink.js'
+import { Box, Link, Newline, Text, useTheme } from '@anthropic/ink'
 import { useKeybindings } from '../keybindings/useKeybinding.js'
 import { isAnthropicAuthEnabled } from '../utils/auth.js'
 import { normalizeApiKeyForConfig } from '../utils/authPortable.js'