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

src/bridge/bridgeStatusUtil.ts

@@ -2,7 +2,7 @@ import {
   getClaudeAiBaseUrl,
   getRemoteSessionUrl,
 } from '../constants/product.js'
-import { stringWidth } from '../ink/stringWidth.js'
+import { stringWidth } from '@anthropic/ink'
 import { formatDuration, truncateToWidth } from '../utils/format.js'
 import { getGraphemeSegmenter } from '../utils/intl.js'
 

src/bridge/bridgeUI.ts

@@ -5,7 +5,7 @@ import {
   BRIDGE_READY_INDICATOR,
   BRIDGE_SPINNER_FRAMES,
 } from '../constants/figures.js'
-import { stringWidth } from '../ink/stringWidth.js'
+import { stringWidth } from '@anthropic/ink'
 import { logForDebugging } from '../utils/debug.js'
 import {
   buildActiveFooterText,

src/buddy/CompanionCard.tsx

@@ -3,8 +3,8 @@
  * Mirrors official vc8 component: bordered box with sprite, stats, last reaction.
  */
 import React from 'react';
-import { Box, Text } from '../ink.js';
-import { useInput } from '../ink.js';
+import { Box, Text } from '@anthropic/ink';
+import { useInput } from '@anthropic/ink';
 import { renderSprite } from './sprites.js';
 import { RARITY_COLORS, RARITY_STARS, STAT_NAMES, type Companion } from './types.js';
 

src/buddy/CompanionSprite.tsx

@@ -2,8 +2,7 @@ import { feature } from 'bun:bundle'
 import figures from 'figures'
 import React, { useEffect, useRef, useState } 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 { useAppState, useSetAppState } from '../state/AppState.js'
 import type { AppState } from '../state/AppStateStore.js'
 import { getGlobalConfig } from '../utils/config.js'

src/buddy/useBuddyNotification.tsx

@@ -1,7 +1,7 @@
 import { feature } from 'bun:bundle'
 import React, { useEffect } from 'react'
 import { useNotifications } from '../context/notifications.js'
-import { Text } from '../ink.js'
+import { Text } from '@anthropic/ink'
 import { getGlobalConfig } from '../utils/config.js'
 import { getRainbowColor } from '../utils/thinking.js'
 

src/cli/handlers/mcp.tsx

@@ -8,7 +8,7 @@ import pMap from 'p-map'
 import { cwd } from 'process'
 import React from 'react'
 import { MCPServerDesktopImportDialog } from '../../components/MCPServerDesktopImportDialog.js'
-import { render } from '../../ink.js'
+import { wrappedRender as render } from '@anthropic/ink'
 import { KeybindingSetup } from '../../keybindings/KeybindingProviderSetup.js'
 import {
   type AnalyticsMetadata_I_VERIFIED_THIS_IS_NOT_CODE_OR_FILEPATHS,

src/cli/handlers/util.tsx

@@ -8,8 +8,8 @@ import { cwd } from 'process'
 import React from 'react'
 import { WelcomeV2 } from '../../components/LogoV2/WelcomeV2.js'
 import { useManagePlugins } from '../../hooks/useManagePlugins.js'
-import type { Root } from '../../ink.js'
-import { Box, Text } from '../../ink.js'
+import type { Root } from '@anthropic/ink'
+import { Box, Text } from '@anthropic/ink'
 import { KeybindingSetup } from '../../keybindings/KeybindingProviderSetup.js'
 import { logEvent } from '../../services/analytics/index.js'
 import { MCPConnectionManager } from '../../services/mcp/MCPConnectionManager.js'

src/commands/add-dir/add-dir.tsx

@@ -8,7 +8,7 @@ import {
 import type { LocalJSXCommandContext } from '../../commands.js'
 import { MessageResponse } from '../../components/MessageResponse.js'
 import { AddWorkspaceDirectory } from '../../components/permissions/rules/AddWorkspaceDirectory.js'
-import { Box, Text } from '../../ink.js'
+import { Box, Text } from '@anthropic/ink'
 import type { LocalJSXCommandOnDone } from '../../types/command.js'
 import {
   applyPermissionUpdate,

src/commands/bridge/bridge.tsx

@@ -13,11 +13,10 @@ import {
   BRIDGE_LOGIN_INSTRUCTION,
   REMOTE_CONTROL_DISCONNECTED_MSG,
 } from '../../bridge/types.js'
-import { Dialog } from '../../components/design-system/Dialog.js'
-import { ListItem } from '../../components/design-system/ListItem.js'
+import { Dialog, ListItem } from '@anthropic/ink'
 import { shouldShowRemoteCallout } from '../../components/RemoteCallout.js'
 import { useRegisterOverlay } from '../../context/overlayContext.js'
-import { Box, Text } from '../../ink.js'
+import { Box, Text } from '@anthropic/ink'
 import { useKeybindings } from '../../keybindings/useKeybinding.js'
 import {
   type AnalyticsMetadata_I_VERIFIED_THIS_IS_NOT_CODE_OR_FILEPATHS,

src/commands/btw/btw.tsx

@@ -9,11 +9,8 @@ import { getSystemPrompt } from '../../constants/prompts.js'
 import { useModalOrTerminalSize } from '../../context/modalContext.js'
 import { getSystemContext, getUserContext } from '../../context.js'
 import { useTerminalSize } from '../../hooks/useTerminalSize.js'
-import ScrollBox, {
-  type ScrollBoxHandle,
-} from '../../ink/components/ScrollBox.js'
-import type { KeyboardEvent } from '../../ink/events/keyboard-event.js'
-import { Box, Text } from '../../ink.js'
+import { type KeyboardEvent, type ScrollBoxHandle, ScrollBox } from '@anthropic/ink'
+import { Box, Text } from '@anthropic/ink'
 import type { LocalJSXCommandOnDone } from '../../types/command.js'
 import type { Message } from '../../types/message.js'
 import { createAbortController } from '../../utils/abortController.js'

src/commands/chrome/chrome.tsx

@@ -3,8 +3,8 @@ import {
   type OptionWithDescription,
   Select,
 } from '../../components/CustomSelect/select.js'
-import { Dialog } from '../../components/design-system/Dialog.js'
-import { Box, Text } from '../../ink.js'
+import { Dialog } from '@anthropic/ink'
+import { Box, Text } from '@anthropic/ink'
 import { useAppState } from '../../state/AppState.js'
 import { isClaudeAISubscriber } from '../../utils/auth.js'
 import { openBrowser } from '../../utils/browser.js'

src/commands/copy/copy.tsx

@@ -6,13 +6,8 @@ import React, { useRef } from 'react'
 import type { CommandResultDisplay } from '../../commands.js'
 import type { OptionWithDescription } from '../../components/CustomSelect/select.js'
 import { Select } from '../../components/CustomSelect/select.js'
-import { Byline } from '../../components/design-system/Byline.js'
-import { KeyboardShortcutHint } from '../../components/design-system/KeyboardShortcutHint.js'
-import { Pane } from '../../components/design-system/Pane.js'
-import type { KeyboardEvent } from '../../ink/events/keyboard-event.js'
-import { stringWidth } from '../../ink/stringWidth.js'
-import { setClipboard } from '../../ink/termio/osc.js'
-import { Box, Text } from '../../ink.js'
+import { Byline, KeyboardShortcutHint, Pane } from '@anthropic/ink'
+import { Box, setClipboard, Text, stringWidth, type KeyboardEvent } from '@anthropic/ink'
 import { logEvent } from '../../services/analytics/index.js'
 import type { LocalJSXCommandCall } from '../../types/command.js'
 import type { AssistantMessage, Message } from '../../types/message.js'

src/commands/fast/fast.tsx

@@ -4,9 +4,9 @@ import type {
   CommandResultDisplay,
   LocalJSXCommandContext,
 } from '../../commands.js'
-import { Dialog } from '../../components/design-system/Dialog.js'
+import { Dialog } from '@anthropic/ink'
 import { FastIcon, getFastIconString } from '../../components/FastIcon.js'
-import { Box, Link, Text } from '../../ink.js'
+import { Box, Link, Text } from '@anthropic/ink'
 import { useKeybindings } from '../../keybindings/useKeybinding.js'
 import {
   type AnalyticsMetadata_I_VERIFIED_THIS_IS_NOT_CODE_OR_FILEPATHS,

src/commands/ide/ide.tsx

@@ -7,14 +7,14 @@ import type {
   LocalJSXCommandContext,
 } from '../../commands.js'
 import { Select } from '../../components/CustomSelect/index.js'
-import { Dialog } from '../../components/design-system/Dialog.js'
+import { Dialog } from '@anthropic/ink'
 import {
   IdeAutoConnectDialog,
   IdeDisableAutoConnectDialog,
   shouldShowAutoConnectDialog,
   shouldShowDisableAutoConnectDialog,
 } from '../../components/IdeAutoConnectDialog.js'
-import { Box, Text } from '../../ink.js'
+import { Box, Text } from '@anthropic/ink'
 import { clearServerCache } from '../../services/mcp/client.js'
 import type { ScopedMcpServerConfig } from '../../services/mcp/types.js'
 import { useAppState, useSetAppState } from '../../state/AppState.js'

src/commands/install-github-app/ApiKeyStep.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useState } from 'react'
 import TextInput from '../../components/TextInput.js'
 import { useTerminalSize } from '../../hooks/useTerminalSize.js'
-import { Box, color, Text, useTheme } from '../../ink.js'
+import { Box, color, Text, useTheme } from '@anthropic/ink'
 import { useKeybindings } from '../../keybindings/useKeybinding.js'
 
 interface ApiKeyStepProps {

src/commands/install-github-app/CheckExistingSecretStep.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useState } from 'react'
 import TextInput from '../../components/TextInput.js'
 import { useTerminalSize } from '../../hooks/useTerminalSize.js'
-import { Box, color, Text, useTheme } from '../../ink.js'
+import { Box, color, Text, useTheme } from '@anthropic/ink'
 import { useKeybindings } from '../../keybindings/useKeybinding.js'
 
 interface CheckExistingSecretStepProps {

src/commands/install-github-app/CheckGitHubStep.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Text } from '../../ink.js'
+import { Text } from '@anthropic/ink'
 
 export function CheckGitHubStep() {
   return <Text>Checking GitHub CLI installation…</Text>

src/commands/install-github-app/ChooseRepoStep.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useState } from 'react'
 import TextInput from '../../components/TextInput.js'
 import { useTerminalSize } from '../../hooks/useTerminalSize.js'
-import { Box, Text } from '../../ink.js'
+import { Box, Text } from '@anthropic/ink'
 import { useKeybindings } from '../../keybindings/useKeybinding.js'
 
 interface ChooseRepoStepProps {

src/commands/install-github-app/CreatingStep.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Box, Text } from '../../ink.js'
+import { Box, Text } from '@anthropic/ink'
 import type { Workflow } from './types.js'
 
 interface CreatingStepProps {

src/commands/install-github-app/ErrorStep.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { GITHUB_ACTION_SETUP_DOCS_URL } from '../../constants/github-app.js'
-import { Box, Text } from '../../ink.js'
+import { Box, Text } from '@anthropic/ink'
 
 interface ErrorStepProps {
   error: string | undefined

src/commands/install-github-app/ExistingWorkflowStep.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Select } from 'src/components/CustomSelect/index.js'
-import { Box, Text } from '../../ink.js'
+import { Box, Text } from '@anthropic/ink'
 
 interface ExistingWorkflowStepProps {
   repoName: string

src/commands/install-github-app/InstallAppStep.tsx

@@ -1,7 +1,7 @@
 import figures from 'figures'
 import React from 'react'
 import { GITHUB_ACTION_SETUP_DOCS_URL } from '../../constants/github-app.js'
-import { Box, Text } from '../../ink.js'
+import { Box, Text } from '@anthropic/ink'
 import { useKeybinding } from '../../keybindings/useKeybinding.js'
 
 interface InstallAppStepProps {

src/commands/install-github-app/OAuthFlowStep.tsx

@@ -3,13 +3,11 @@ import {
   type AnalyticsMetadata_I_VERIFIED_THIS_IS_NOT_CODE_OR_FILEPATHS,
   logEvent,
 } from 'src/services/analytics/index.js'
-import { KeyboardShortcutHint } from '../../components/design-system/KeyboardShortcutHint.js'
+import { KeyboardShortcutHint } from '@anthropic/ink'
 import { Spinner } from '../../components/Spinner.js'
 import TextInput from '../../components/TextInput.js'
 import { useTerminalSize } from '../../hooks/useTerminalSize.js'
-import type { KeyboardEvent } from '../../ink/events/keyboard-event.js'
-import { setClipboard } from '../../ink/termio/osc.js'
-import { Box, Link, Text } from '../../ink.js'
+import { type KeyboardEvent, setClipboard, Box, Link, Text } from '@anthropic/ink'
 import { OAuthService } from '../../services/oauth/index.js'
 import { saveOAuthTokensIfNeeded } from '../../utils/auth.js'
 import { logError } from '../../utils/log.js'

src/commands/install-github-app/SuccessStep.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Box, Text } from '../../ink.js'
+import { Box, Text } from '@anthropic/ink'
 
 type SuccessStepProps = {
   secretExists: boolean

src/commands/install-github-app/WarningsStep.tsx

@@ -1,7 +1,7 @@
 import figures from 'figures'
 import React from 'react'
 import { GITHUB_ACTION_SETUP_DOCS_URL } from '../../constants/github-app.js'
-import { Box, Text } from '../../ink.js'
+import { Box, Text } from '@anthropic/ink'
 import { useKeybinding } from '../../keybindings/useKeybinding.js'
 import type { Warning } from './types.js'
 

src/commands/install-github-app/install-github-app.tsx

@@ -7,8 +7,7 @@ import {
 import { WorkflowMultiselectDialog } from '../../components/WorkflowMultiselectDialog.js'
 import { GITHUB_ACTION_SETUP_DOCS_URL } from '../../constants/github-app.js'
 import { useExitOnCtrlCDWithKeybindings } from '../../hooks/useExitOnCtrlCDWithKeybindings.js'
-import type { KeyboardEvent } from '../../ink/events/keyboard-event.js'
-import { Box } from '../../ink.js'
+import { type KeyboardEvent, Box } from '@anthropic/ink'
 import type { LocalJSXCommandOnDone } from '../../types/command.js'
 import { getAnthropicApiKey, isAnthropicAuthEnabled } from '../../utils/auth.js'
 import { openBrowser } from '../../utils/browser.js'

src/commands/install.tsx

@@ -3,8 +3,8 @@ import { join } from 'node:path'
 import React, { useEffect, useState } from 'react'
 import type { CommandResultDisplay } from 'src/commands.js'
 import { logEvent } from 'src/services/analytics/index.js'
-import { StatusIcon } from '../components/design-system/StatusIcon.js'
-import { Box, render, Text } from '../ink.js'
+import { StatusIcon } from '@anthropic/ink'
+import { Box, wrappedRender as render, Text } from '@anthropic/ink'
 import { logForDebugging } from '../utils/debug.js'
 import { env } from '../utils/env.js'
 import { errorMessage } from '../utils/errors.js'

src/commands/login/login.tsx

@@ -8,9 +8,9 @@ import {
 import type { LocalJSXCommandContext } from '../../commands.js'
 import { ConfigurableShortcutHint } from '../../components/ConfigurableShortcutHint.js'
 import { ConsoleOAuthFlow } from '../../components/ConsoleOAuthFlow.js'
-import { Dialog } from '../../components/design-system/Dialog.js'
+import { Dialog } from '@anthropic/ink'
 import { useMainLoopModel } from '../../hooks/useMainLoopModel.js'
-import { Text } from '../../ink.js'
+import { Text } from '@anthropic/ink'
 import { refreshGrowthBookAfterAuthChange } from '../../services/analytics/growthbook.js'
 import { refreshPolicyLimits } from '../../services/policyLimits/index.js'
 import { refreshRemoteManagedSettings } from '../../services/remoteManagedSettings/index.js'

src/commands/logout/logout.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { clearTrustedDeviceTokenCache } from '../../bridge/trustedDevice.js'
-import { Text } from '../../ink.js'
+import { Text } from '@anthropic/ink'
 import { refreshGrowthBookAfterAuthChange } from '../../services/analytics/growthbook.js'
 import {
   getGroveNoticeConfig,

src/commands/memory/memory.tsx

@@ -1,10 +1,10 @@
 import { mkdir, writeFile } from 'fs/promises'
 import * as React from 'react'
 import type { CommandResultDisplay } from '../../commands.js'
-import { Dialog } from '../../components/design-system/Dialog.js'
+import { Dialog } from '@anthropic/ink'
 import { MemoryFileSelector } from '../../components/memory/MemoryFileSelector.js'
 import { getRelativeMemoryPath } from '../../components/memory/MemoryUpdateNotification.js'
-import { Box, Link, Text } from '../../ink.js'
+import { Box, Link, Text } from '@anthropic/ink'
 import type { LocalJSXCommandCall } from '../../types/command.js'
 import { clearMemoryFileCaches, getMemoryFiles } from '../../utils/claudemd.js'
 import { getClaudeConfigHomeDir } from '../../utils/envUtils.js'

src/commands/mobile/mobile.tsx

@@ -1,9 +1,8 @@
 import { toString as qrToString } from 'qrcode'
 import * as React from 'react'
 import { useCallback, useEffect, useState } from 'react'
-import { Pane } from '../../components/design-system/Pane.js'
-import type { KeyboardEvent } from '../../ink/events/keyboard-event.js'
-import { Box, Text } from '../../ink.js'
+import { Pane } from '@anthropic/ink'
+import { type KeyboardEvent, Box, Text } from '@anthropic/ink'
 import { useKeybinding } from '../../keybindings/useKeybinding.js'
 import type { LocalJSXCommandOnDone } from '../../types/command.js'
 

src/commands/plan/plan.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { handlePlanModeTransition } from '../../bootstrap/state.js'
 import type { LocalJSXCommandContext } from '../../commands.js'
-import { Box, Text } from '../../ink.js'
+import { Box, Text } from '@anthropic/ink'
 import type { LocalJSXCommandOnDone } from '../../types/command.js'
 import { getExternalEditor } from '../../utils/editor.js'
 import { toIDEDisplayName } from '../../utils/ide.js'

src/commands/plugin/AddMarketplace.tsx

@@ -5,11 +5,10 @@ import {
   logEvent,
 } from 'src/services/analytics/index.js'
 import { ConfigurableShortcutHint } from '../../components/ConfigurableShortcutHint.js'
-import { Byline } from '../../components/design-system/Byline.js'
-import { KeyboardShortcutHint } from '../../components/design-system/KeyboardShortcutHint.js'
+import { Byline, KeyboardShortcutHint } from '@anthropic/ink'
 import { Spinner } from '../../components/Spinner.js'
 import TextInput from '../../components/TextInput.js'
-import { Box, Text } from '../../ink.js'
+import { Box, Text } from '@anthropic/ink'
 import { toError } from '../../utils/errors.js'
 import { logError } from '../../utils/log.js'
 import { clearAllCaches } from '../../utils/plugins/cacheUtils.js'

src/commands/plugin/BrowseMarketplace.tsx

@@ -2,8 +2,7 @@ import figures from 'figures'
 import * as React from 'react'
 import { useEffect, useState } from 'react'
 import { ConfigurableShortcutHint } from '../../components/ConfigurableShortcutHint.js'
-import { Byline } from '../../components/design-system/Byline.js'
-import { Box, Text } from '../../ink.js'
+import { Box, Byline, Text } from '@anthropic/ink'
 import {
   useKeybinding,
   useKeybindings,

src/commands/plugin/DiscoverPlugins.tsx

@@ -2,12 +2,12 @@ import figures from 'figures'
 import * as React from 'react'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { ConfigurableShortcutHint } from '../../components/ConfigurableShortcutHint.js'
-import { Byline } from '../../components/design-system/Byline.js'
 import { SearchBox } from '../../components/SearchBox.js'
+import { Byline } from '@anthropic/ink'
 import { useSearchInput } from '../../hooks/useSearchInput.js'
 import { useTerminalSize } from '../../hooks/useTerminalSize.js'
 // eslint-disable-next-line custom-rules/prefer-use-keybindings -- useInput needed for raw search mode text input
-import { Box, Text, useInput, useTerminalFocus } from '../../ink.js'
+import { Box, Text, useInput, useTerminalFocus } from '@anthropic/ink'
 import {
   useKeybinding,
   useKeybindings,

src/commands/plugin/ManageMarketplaces.tsx

@@ -6,10 +6,9 @@ import {
   logEvent,
 } from 'src/services/analytics/index.js'
 import { ConfigurableShortcutHint } from '../../components/ConfigurableShortcutHint.js'
-import { Byline } from '../../components/design-system/Byline.js'
-import { KeyboardShortcutHint } from '../../components/design-system/KeyboardShortcutHint.js'
+import { Byline, KeyboardShortcutHint } from '@anthropic/ink'
 // eslint-disable-next-line custom-rules/prefer-use-keybindings -- useInput needed for marketplace-specific u/r shortcuts and y/n confirmation not in keybinding schema
-import { Box, Text, useInput } from '../../ink.js'
+import { Box, Text, useInput } from '@anthropic/ink'
 import {
   useKeybinding,
   useKeybindings,

src/commands/plugin/ManagePlugins.tsx

@@ -5,7 +5,7 @@ import * as path from 'path'
 import * as React from 'react'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { ConfigurableShortcutHint } from '../../components/ConfigurableShortcutHint.js'
-import { Byline } from '../../components/design-system/Byline.js'
+import { Byline } from '@anthropic/ink'
 import { MCPRemoteServerMenu } from '../../components/mcp/MCPRemoteServerMenu.js'
 import { MCPStdioServerMenu } from '../../components/mcp/MCPStdioServerMenu.js'
 import { MCPToolDetailView } from '../../components/mcp/MCPToolDetailView.js'
@@ -20,7 +20,7 @@ import { SearchBox } from '../../components/SearchBox.js'
 import { useSearchInput } from '../../hooks/useSearchInput.js'
 import { useTerminalSize } from '../../hooks/useTerminalSize.js'
 // eslint-disable-next-line custom-rules/prefer-use-keybindings -- useInput needed for raw search mode text input
-import { Box, Text, useInput, useTerminalFocus } from '../../ink.js'
+import { Box, Text, useInput, useTerminalFocus } from '@anthropic/ink'
 import {
   useKeybinding,
   useKeybindings,

src/commands/plugin/PluginOptionsDialog.tsx

@@ -1,9 +1,8 @@
 import figures from 'figures'
 import React, { useCallback, useState } from 'react'
-import { Dialog } from '../../components/design-system/Dialog.js'
-import { stringWidth } from '../../ink/stringWidth.js'
+import { Dialog } from '@anthropic/ink'
 // eslint-disable-next-line custom-rules/prefer-use-keybindings -- raw text input for config dialog
-import { Box, Text, useInput } from '../../ink.js'
+import { Box, Text, useInput, stringWidth } from '@anthropic/ink'
 import {
   useKeybinding,
   useKeybindings,

src/commands/plugin/PluginSettings.tsx

@@ -2,11 +2,10 @@ import figures from 'figures'
 import * as React from 'react'
 import { useCallback, useEffect, useState } from 'react'
 import { ConfigurableShortcutHint } from '../../components/ConfigurableShortcutHint.js'
-import { Byline } from '../../components/design-system/Byline.js'
-import { Pane } from '../../components/design-system/Pane.js'
-import { Tab, Tabs } from '../../components/design-system/Tabs.js'
+import { Byline, Pane, Tabs } from '@anthropic/ink'
+import { Tab } from '../../components/design-system/Tabs.js'
 import { useExitOnCtrlCDWithKeybindings } from '../../hooks/useExitOnCtrlCDWithKeybindings.js'
-import { Box, Text } from '../../ink.js'
+import { Box, Text } from '@anthropic/ink'
 import {
   useKeybinding,
   useKeybindings,

src/commands/plugin/PluginTrustWarning.tsx

@@ -1,6 +1,6 @@
 import figures from 'figures'
 import * as React from 'react'
-import { Box, Text } from '../../ink.js'
+import { Box, Text } from '@anthropic/ink'
 import { getPluginTrustMessage } from '../../utils/plugins/marketplaceHelpers.js'
 
 export function PluginTrustWarning(): React.ReactNode {

src/commands/plugin/UnifiedInstalledCell.tsx

@@ -1,6 +1,6 @@
 import figures from 'figures'
 import * as React from 'react'
-import { Box, color, Text, useTheme } from '../../ink.js'
+import { Box, color, Text, useTheme } from '@anthropic/ink'
 import { plural } from '../../utils/stringUtils.js'
 import type { UnifiedInstalledItem } from './unifiedTypes.js'
 

src/commands/plugin/ValidatePlugin.tsx

@@ -1,7 +1,7 @@
 import figures from 'figures'
 import * as React from 'react'
 import { useEffect } from 'react'
-import { Box, Text } from '../../ink.js'
+import { Box, Text } from '@anthropic/ink'
 import { errorMessage } from '../../utils/errors.js'
 import { logError } from '../../utils/log.js'
 import { validateManifest } from '../../utils/plugins/validatePlugin.js'

src/commands/plugin/pluginDetailsHelpers.tsx

@@ -6,8 +6,7 @@
 
 import * as React from 'react'
 import { ConfigurableShortcutHint } from '../../components/ConfigurableShortcutHint.js'
-import { Byline } from '../../components/design-system/Byline.js'
-import { Box, Text } from '../../ink.js'
+import { Box, Byline, Text } from '@anthropic/ink'
 import type { PluginMarketplaceEntry } from '../../utils/plugins/schemas.js'
 
 /**

src/commands/rate-limit-options/rate-limit-options.tsx

@@ -7,7 +7,7 @@ import {
   type OptionWithDescription,
   Select,
 } from '../../components/CustomSelect/select.js'
-import { Dialog } from '../../components/design-system/Dialog.js'
+import { Dialog } from '@anthropic/ink'
 import { getFeatureValue_CACHED_MAY_BE_STALE } from '../../services/analytics/growthbook.js'
 import { logEvent } from '../../services/analytics/index.js'
 import { useClaudeAiLimits } from '../../services/claudeAiLimitsHook.js'

src/commands/remote-setup/remote-setup.tsx

@@ -2,9 +2,7 @@ import { execa } from 'execa'
 import * as React from 'react'
 import { useEffect, useState } from 'react'
 import { Select } from '../../components/CustomSelect/index.js'
-import { Dialog } from '../../components/design-system/Dialog.js'
-import { LoadingState } from '../../components/design-system/LoadingState.js'
-import { Box, Text } from '../../ink.js'
+import { Box, Dialog, LoadingState, Text } from '@anthropic/ink'
 import {
   logEvent,
   type AnalyticsMetadata_I_VERIFIED_THIS_IS_NOT_CODE_OR_FILEPATHS as SafeString,

src/commands/resume/resume.tsx

@@ -9,8 +9,8 @@ import { MessageResponse } from '../../components/MessageResponse.js'
 import { Spinner } from '../../components/Spinner.js'
 import { useIsInsideModal } from '../../context/modalContext.js'
 import { useTerminalSize } from '../../hooks/useTerminalSize.js'
-import { setClipboard } from '../../ink/termio/osc.js'
-import { Box, Text } from '../../ink.js'
+import { setClipboard } from '@anthropic/ink'
+import { Box, Text } from '@anthropic/ink'
 import type { LocalJSXCommandCall } from '../../types/command.js'
 import type { LogOption } from '../../types/logs.js'
 import { agenticSessionSearch } from '../../utils/agenticSessionSearch.js'

src/commands/review/UltrareviewOverageDialog.tsx

@@ -1,7 +1,6 @@
 import React, { useCallback, useRef, useState } from 'react'
 import { Select } from '../../components/CustomSelect/select.js'
-import { Dialog } from '../../components/design-system/Dialog.js'
-import { Box, Text } from '../../ink.js'
+import { Box, Dialog, Text } from '@anthropic/ink'
 
 type Props = {
   onProceed: (signal: AbortSignal) => Promise<void>

src/commands/sandbox-toggle/sandbox-toggle.tsx

@@ -2,7 +2,7 @@ import { relative } from 'path'
 import React from 'react'
 import { getCwdState } from '../../bootstrap/state.js'
 import { SandboxSettings } from '../../components/sandbox/SandboxSettings.js'
-import { color } from '../../ink.js'
+import { color } from '@anthropic/ink'
 import { getPlatform } from '../../utils/platform.js'
 import {
   addToExcludedCommands,

src/commands/session/session.tsx

@@ -1,8 +1,7 @@
 import { toString as qrToString } from 'qrcode'
 import * as React from 'react'
 import { useEffect, useState } from 'react'
-import { Pane } from '../../components/design-system/Pane.js'
-import { Box, Text } from '../../ink.js'
+import { Box, Pane, Text } from '@anthropic/ink'
 import { useKeybinding } from '../../keybindings/useKeybinding.js'
 import { useAppState } from '../../state/AppState.js'
 import type { LocalJSXCommandCall } from '../../types/command.js'

src/commands/tag/tag.tsx

@@ -4,9 +4,9 @@ import * as React from 'react'
 import { getSessionId } from '../../bootstrap/state.js'
 import type { CommandResultDisplay } from '../../commands.js'
 import { Select } from '../../components/CustomSelect/select.js'
-import { Dialog } from '../../components/design-system/Dialog.js'
+import { Dialog } from '@anthropic/ink'
 import { COMMON_HELP_ARGS, COMMON_INFO_ARGS } from '../../constants/xml.js'
-import { Box, Text } from '../../ink.js'
+import { Box, Text } from '@anthropic/ink'
 import { logEvent } from '../../services/analytics/index.js'
 import type { LocalJSXCommandOnDone } from '../../types/command.js'
 import { recursivelySanitizeUnicode } from '../../utils/sanitization.js'

src/commands/terminalSetup/terminalSetup.tsx

@@ -5,8 +5,8 @@ import { homedir, platform } from 'os'
 import { dirname, join } from 'path'
 import type { ThemeName } from 'src/utils/theme.js'
 import { pathToFileURL } from 'url'
-import { supportsHyperlinks } from '../../ink/supports-hyperlinks.js'
-import { color } from '../../ink.js'
+import { supportsHyperlinks } from '@anthropic/ink'
+import { color } from '@anthropic/ink'
 import { maybeMarkProjectOnboardingComplete } from '../../projectOnboardingState.js'
 import type { ToolUseContext } from '../../Tool.js'
 import type {

src/commands/theme/theme.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react'
 import type { CommandResultDisplay } from '../../commands.js'
-import { Pane } from '../../components/design-system/Pane.js'
+import { Pane } from '@anthropic/ink'
 import { ThemePicker } from '../../components/ThemePicker.js'
-import { useTheme } from '../../ink.js'
+import { useTheme } from '@anthropic/ink'
 import type { LocalJSXCommandCall } from '../../types/command.js'
 
 type Props = {

src/commands/thinkback/thinkback.tsx

@@ -5,10 +5,9 @@ import * as React from 'react'
 import { useCallback, useEffect, useState } from 'react'
 import type { CommandResultDisplay } from '../../commands.js'
 import { Select } from '../../components/CustomSelect/select.js'
-import { Dialog } from '../../components/design-system/Dialog.js'
+import { Dialog } from '@anthropic/ink'
 import { Spinner } from '../../components/Spinner.js'
-import instances from '../../ink/instances.js'
-import { Box, Text } from '../../ink.js'
+import { Box, Text, instances } from '@anthropic/ink'
 import { enablePluginOp } from '../../services/plugins/pluginOperations.js'
 import { logForDebugging } from '../../utils/debug.js'
 import { isENOENT, toError } from '../../utils/errors.js'

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'