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

src/components/design-system/Byline.tsx

@@ -1,5 +1,5 @@
 import React, { Children, isValidElement } from 'react'
-import { Text } from '../../ink.js'
+import { Text } from '@anthropic/ink'
 
 type Props = {
   /** The items to join with a middot separator */

src/components/design-system/Dialog.tsx

@@ -3,7 +3,7 @@ import {
   type ExitState,
   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 { Theme } from '../../utils/theme.js'
 import { ConfigurableShortcutHint } from '../ConfigurableShortcutHint.js'

src/components/design-system/Divider.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import { useTerminalSize } from '../../hooks/useTerminalSize.js'
-import { stringWidth } from '../../ink/stringWidth.js'
-import { Ansi, Text } from '../../ink.js'
+import { Ansi, Text, stringWidth } from '@anthropic/ink'
 import type { Theme } from '../../utils/theme.js'
 
 type DividerProps = {

src/components/design-system/FuzzyPicker.tsx

@@ -2,9 +2,7 @@ import * as React from 'react'
 import { useEffect, useState } from 'react'
 import { useSearchInput } from '../../hooks/useSearchInput.js'
 import { useTerminalSize } from '../../hooks/useTerminalSize.js'
-import type { KeyboardEvent } from '../../ink/events/keyboard-event.js'
-import { clamp } from '../../ink/layout/geometry.js'
-import { Box, Text, useTerminalFocus } from '../../ink.js'
+import { type KeyboardEvent, Box, clamp, Text, useTerminalFocus } from '@anthropic/ink'
 import { SearchBox } from '../SearchBox.js'
 import { Byline } from './Byline.js'
 import { KeyboardShortcutHint } from './KeyboardShortcutHint.js'

src/components/design-system/KeyboardShortcutHint.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Text from '../../ink/components/Text.js'
+import { Text } from '@anthropic/ink'
 
 type Props = {
   /** The key or chord to display (e.g., "ctrl+o", "Enter", "↑/↓") */

src/components/design-system/ListItem.tsx

@@ -1,8 +1,7 @@
 import figures from 'figures'
 import type { ReactNode } from 'react'
 import React from 'react'
-import { useDeclaredCursor } from '../../ink/hooks/use-declared-cursor.js'
-import { Box, Text } from '../../ink.js'
+import { useDeclaredCursor, Box, Text } from '@anthropic/ink'
 
 type ListItemProps = {
   /**

src/components/design-system/LoadingState.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Box, Text } from '../../ink.js'
+import { Box, Text } from '@anthropic/ink'
 import { Spinner } from '../Spinner.js'
 
 type LoadingStateProps = {

src/components/design-system/Pane.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { useIsInsideModal } from '../../context/modalContext.js'
-import { Box } from '../../ink.js'
+import { Box } from '@anthropic/ink'
 import type { Theme } from '../../utils/theme.js'
 import { Divider } from './Divider.js'
 

src/components/design-system/ProgressBar.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Text } from '../../ink.js'
+import { Text } from '@anthropic/ink'
 import type { Theme } from '../../utils/theme.js'
 
 type Props = {

src/components/design-system/Ratchet.tsx

@@ -1,7 +1,6 @@
 import React, { useCallback, useLayoutEffect, useRef, useState } from 'react'
 import { useTerminalSize } from '../../hooks/useTerminalSize.js'
-import { useTerminalViewport } from '../../ink/hooks/use-terminal-viewport.js'
-import { Box, type DOMElement, measureElement } from '../../ink.js'
+import { useTerminalViewport, Box, type DOMElement, measureElement } from '@anthropic/ink'
 
 type Props = {
   children: React.ReactNode

src/components/design-system/StatusIcon.tsx

@@ -1,6 +1,6 @@
 import figures from 'figures'
 import React from 'react'
-import { Text } from '../../ink.js'
+import { Text } from '@anthropic/ink'
 
 type Status = 'success' | 'error' | 'warning' | 'info' | 'pending' | 'loading'
 

src/components/design-system/Tabs.tsx

@@ -10,10 +10,7 @@ import {
   useModalScrollRef,
 } from '../../context/modalContext.js'
 import { useTerminalSize } from '../../hooks/useTerminalSize.js'
-import ScrollBox from '../../ink/components/ScrollBox.js'
-import type { KeyboardEvent } from '../../ink/events/keyboard-event.js'
-import { stringWidth } from '../../ink/stringWidth.js'
-import { Box, Text } from '../../ink.js'
+import { Box, ScrollBox, Text, stringWidth, type KeyboardEvent } from '@anthropic/ink'
 import { useKeybindings } from '../../keybindings/useKeybinding.js'
 import type { Theme } from '../../utils/theme.js'
 

src/components/design-system/ThemeProvider.tsx

@@ -6,7 +6,7 @@ import React, {
   useMemo,
   useState,
 } from 'react'
-import useStdin from '../../ink/hooks/use-stdin.js'
+import { useStdin } from '@anthropic/ink'
 import { getGlobalConfig, saveGlobalConfig } from '../../utils/config.js'
 import {
   getSystemThemeName,

src/components/design-system/ThemedBox.tsx

@@ -1,10 +1,5 @@
 import React, { type PropsWithChildren, type Ref } from 'react'
-import Box from '../../ink/components/Box.js'
-import type { DOMElement } from '../../ink/dom.js'
-import type { ClickEvent } from '../../ink/events/click-event.js'
-import type { FocusEvent } from '../../ink/events/focus-event.js'
-import type { KeyboardEvent } from '../../ink/events/keyboard-event.js'
-import type { Color, Styles } from '../../ink/styles.js'
+import { type ClickEvent, DOMElement, type FocusEvent, type KeyboardEvent, Color, type Styles, Box as BaseBox } from '@anthropic/ink'
 import { getTheme, type Theme } from '../../utils/theme.js'
 import { useTheme } from './ThemeProvider.js'
 

src/components/design-system/ThemedText.tsx

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react'
 import React, { useContext } from 'react'
-import Text from '../../ink/components/Text.js'
-import type { Color, Styles } from '../../ink/styles.js'
+import { Text } from '@anthropic/ink'
+import type { Color, Styles } from '@anthropic/ink'
 import { getTheme, type Theme } from '../../utils/theme.js'
 import { useTheme } from './ThemeProvider.js'
 

src/components/design-system/color.ts

@@ -1,5 +1,4 @@
-import { type ColorType, colorize } from '../../ink/colorize.js'
-import type { Color } from '../../ink/styles.js'
+import { type ColorType, colorize, type Color } from '@anthropic/ink'
 import { getTheme, type Theme, type ThemeName } from '../../utils/theme.js'
 
 /**