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

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'