@runtypelabs/ink-components 0.3.8 → 0.3.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +68 -63
- package/dist/index.js +205 -206
- package/package.json +5 -5
package/dist/index.d.ts
CHANGED
|
@@ -1,81 +1,86 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { ComponentProps, ReactNode } from
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
import InkSpinner from "ink-spinner";
|
|
2
|
+
import { ComponentProps, ReactNode } from "react";
|
|
3
|
+
//#region src/components/Spinner.d.ts
|
|
5
4
|
type InkSpinnerType = ComponentProps<typeof InkSpinner>['type'];
|
|
6
5
|
interface SpinnerProps {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
6
|
+
label?: string;
|
|
7
|
+
color?: string;
|
|
8
|
+
type?: InkSpinnerType;
|
|
10
9
|
}
|
|
11
|
-
declare function Spinner({ label, color, type
|
|
12
|
-
|
|
10
|
+
export declare function Spinner({ label, color, type }: SpinnerProps): import("react").JSX.Element;
|
|
11
|
+
//#endregion
|
|
12
|
+
//#region src/components/StatusBar.d.ts
|
|
13
13
|
interface StatusBarProps {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
14
|
+
left?: ReactNode;
|
|
15
|
+
center?: string;
|
|
16
|
+
right?: string;
|
|
17
17
|
}
|
|
18
|
-
declare function StatusBar({ left, center, right }: StatusBarProps): react.JSX.Element;
|
|
19
|
-
|
|
18
|
+
export declare function StatusBar({ left, center, right }: StatusBarProps): import("react").JSX.Element;
|
|
19
|
+
//#endregion
|
|
20
|
+
//#region src/components/StreamOutput.d.ts
|
|
20
21
|
interface StreamOutputProps {
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
22
|
+
content: string;
|
|
23
|
+
isStreaming: boolean;
|
|
24
|
+
enableMarkdown?: boolean;
|
|
25
|
+
maxVisibleLines?: number;
|
|
26
|
+
/** Lines to scroll up from the bottom (0 = follow latest) */
|
|
27
|
+
scrollOffset?: number;
|
|
27
28
|
}
|
|
28
29
|
/**
|
|
29
30
|
* Render raw markdown content to terminal-styled text with ANSI color codes.
|
|
30
31
|
* Uses the module-level `marked` + `marked-terminal` configuration.
|
|
31
32
|
*/
|
|
32
|
-
declare function renderMarkdownToTerminal(content: string): string;
|
|
33
|
-
declare const StreamOutput: react.MemoExoticComponent<({ content, isStreaming, enableMarkdown, maxVisibleLines, scrollOffset
|
|
34
|
-
|
|
33
|
+
export declare function renderMarkdownToTerminal(content: string): string;
|
|
34
|
+
export declare const StreamOutput: import("react").MemoExoticComponent<({ content, isStreaming, enableMarkdown, maxVisibleLines, scrollOffset }: StreamOutputProps) => import("react").JSX.Element>;
|
|
35
|
+
//#endregion
|
|
36
|
+
//#region src/components/ErrorDisplay.d.ts
|
|
35
37
|
interface ErrorDisplayProps {
|
|
36
|
-
|
|
37
|
-
|
|
38
|
+
error: Error | string;
|
|
39
|
+
context?: string;
|
|
38
40
|
}
|
|
39
|
-
declare function ErrorDisplay({ error, context }: ErrorDisplayProps): react.JSX.Element;
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
41
|
+
export declare function ErrorDisplay({ error, context }: ErrorDisplayProps): import("react").JSX.Element;
|
|
42
|
+
//#endregion
|
|
43
|
+
//#region src/theme.d.ts
|
|
44
|
+
export declare const theme: {
|
|
45
|
+
readonly backgroundDeep: "#000000";
|
|
46
|
+
readonly background: "#1b212b";
|
|
47
|
+
readonly surface: "#202733";
|
|
48
|
+
readonly surfaceMuted: "#1d2430";
|
|
49
|
+
readonly surfaceElevated: "#252d3b";
|
|
50
|
+
readonly text: "#d8d3c9";
|
|
51
|
+
readonly textMuted: "#918b84";
|
|
52
|
+
readonly textSubtle: "#66625d";
|
|
53
|
+
readonly accent: "#8fc4bf";
|
|
54
|
+
readonly accentActive: "#a7d8d2";
|
|
55
|
+
readonly success: "#8ecb73";
|
|
56
|
+
readonly warning: "#d8ae63";
|
|
57
|
+
readonly danger: "#c97b73";
|
|
58
|
+
readonly border: "#394252";
|
|
59
|
+
readonly borderActive: "#546077";
|
|
60
|
+
readonly error: "#c97b73";
|
|
61
|
+
readonly info: "#8fc4bf";
|
|
62
|
+
readonly muted: "#918b84";
|
|
63
|
+
readonly primary: "#8fc4bf";
|
|
64
|
+
readonly secondary: "#a7d8d2";
|
|
65
|
+
readonly spinner: "#8fc4bf";
|
|
66
|
+
readonly progress: "#8fc4bf";
|
|
67
|
+
readonly label: "#d8d3c9";
|
|
68
|
+
readonly dimLabel: "#66625d";
|
|
69
|
+
readonly highlight: "bold";
|
|
70
|
+
readonly separator: " · ";
|
|
71
|
+
readonly sectionGap: 1;
|
|
72
|
+
readonly panelPaddingX: 1;
|
|
73
|
+
readonly panelPaddingY: 0;
|
|
71
74
|
};
|
|
72
75
|
type Theme = typeof theme;
|
|
73
|
-
|
|
76
|
+
//#endregion
|
|
77
|
+
//#region src/types.d.ts
|
|
74
78
|
type StreamPhase = 'idle' | 'thinking' | 'streaming' | 'tool' | 'complete' | 'error';
|
|
75
79
|
interface ToolResult {
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
80
|
+
name: string;
|
|
81
|
+
status: 'running' | 'complete' | 'error';
|
|
82
|
+
duration?: number;
|
|
79
83
|
}
|
|
80
|
-
|
|
81
|
-
export {
|
|
84
|
+
//#endregion
|
|
85
|
+
export type { ErrorDisplayProps, SpinnerProps, StatusBarProps, StreamOutputProps, StreamPhase, Theme, ToolResult };
|
|
86
|
+
export {}
|
package/dist/index.js
CHANGED
|
@@ -1,219 +1,218 @@
|
|
|
1
|
-
// src/components/Spinner.tsx
|
|
2
1
|
import { Box, Text } from "ink";
|
|
3
2
|
import InkSpinner from "ink-spinner";
|
|
4
|
-
|
|
5
|
-
// src/theme.ts
|
|
6
|
-
var theme = {
|
|
7
|
-
backgroundDeep: "#000000",
|
|
8
|
-
background: "#1b212b",
|
|
9
|
-
surface: "#202733",
|
|
10
|
-
surfaceMuted: "#1d2430",
|
|
11
|
-
surfaceElevated: "#252d3b",
|
|
12
|
-
text: "#d8d3c9",
|
|
13
|
-
textMuted: "#918b84",
|
|
14
|
-
textSubtle: "#66625d",
|
|
15
|
-
accent: "#8fc4bf",
|
|
16
|
-
accentActive: "#a7d8d2",
|
|
17
|
-
success: "#8ecb73",
|
|
18
|
-
warning: "#d8ae63",
|
|
19
|
-
danger: "#c97b73",
|
|
20
|
-
border: "#394252",
|
|
21
|
-
borderActive: "#546077",
|
|
22
|
-
error: "#c97b73",
|
|
23
|
-
info: "#8fc4bf",
|
|
24
|
-
muted: "#918b84",
|
|
25
|
-
primary: "#8fc4bf",
|
|
26
|
-
secondary: "#a7d8d2",
|
|
27
|
-
spinner: "#8fc4bf",
|
|
28
|
-
progress: "#8fc4bf",
|
|
29
|
-
label: "#d8d3c9",
|
|
30
|
-
dimLabel: "#66625d",
|
|
31
|
-
highlight: "bold",
|
|
32
|
-
separator: " \xB7 ",
|
|
33
|
-
sectionGap: 1,
|
|
34
|
-
panelPaddingX: 1,
|
|
35
|
-
panelPaddingY: 0
|
|
36
|
-
};
|
|
37
|
-
|
|
38
|
-
// src/components/Spinner.tsx
|
|
39
3
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
40
|
-
|
|
41
|
-
label = "Loading...",
|
|
42
|
-
color = theme.spinner,
|
|
43
|
-
type = "dots"
|
|
44
|
-
}) {
|
|
45
|
-
return /* @__PURE__ */ jsxs(Box, { children: [
|
|
46
|
-
/* @__PURE__ */ jsx(Text, { color, children: /* @__PURE__ */ jsx(InkSpinner, { type }) }),
|
|
47
|
-
/* @__PURE__ */ jsxs(Text, { color: theme.textMuted, children: [
|
|
48
|
-
" ",
|
|
49
|
-
label
|
|
50
|
-
] })
|
|
51
|
-
] });
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
// src/components/StatusBar.tsx
|
|
55
|
-
import { Box as Box2, Text as Text2 } from "ink";
|
|
56
|
-
import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
57
|
-
function StatusBar({ left, center, right }) {
|
|
58
|
-
return /* @__PURE__ */ jsxs2(
|
|
59
|
-
Box2,
|
|
60
|
-
{
|
|
61
|
-
borderStyle: "single",
|
|
62
|
-
borderColor: theme.border,
|
|
63
|
-
backgroundColor: theme.background,
|
|
64
|
-
paddingX: theme.panelPaddingX,
|
|
65
|
-
paddingY: theme.panelPaddingY,
|
|
66
|
-
children: [
|
|
67
|
-
/* @__PURE__ */ jsx2(Box2, { flexGrow: 1, children: typeof left === "string" ? /* @__PURE__ */ jsx2(Text2, { color: theme.textMuted, children: left }) : left }),
|
|
68
|
-
center && /* @__PURE__ */ jsx2(Box2, { flexGrow: 1, justifyContent: "center", children: /* @__PURE__ */ jsx2(Text2, { color: theme.accent, children: center }) }),
|
|
69
|
-
right && /* @__PURE__ */ jsx2(Box2, { children: /* @__PURE__ */ jsx2(Text2, { color: theme.textSubtle, children: right }) })
|
|
70
|
-
]
|
|
71
|
-
}
|
|
72
|
-
);
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
// src/components/StreamOutput.tsx
|
|
76
|
-
import { useMemo, memo } from "react";
|
|
77
|
-
import { Box as Box3, Text as Text3 } from "ink";
|
|
4
|
+
import { memo, useMemo } from "react";
|
|
78
5
|
import chalk from "chalk";
|
|
79
|
-
import InkSpinner2 from "ink-spinner";
|
|
80
6
|
import { marked } from "marked";
|
|
81
7
|
import { markedTerminal } from "marked-terminal";
|
|
82
8
|
import stripAnsi from "strip-ansi";
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
name: accentActiveText,
|
|
115
|
-
"builtin-name": accentActiveText,
|
|
116
|
-
attr: accentText,
|
|
117
|
-
attribute: accentText,
|
|
118
|
-
variable: accentActiveText,
|
|
119
|
-
bullet: mutedText,
|
|
120
|
-
code: successText,
|
|
121
|
-
emphasis: accentText,
|
|
122
|
-
strong: accentActiveText,
|
|
123
|
-
formula: accentText,
|
|
124
|
-
link: accentActiveText,
|
|
125
|
-
quote: mutedText,
|
|
126
|
-
addition: successText,
|
|
127
|
-
deletion: dangerText
|
|
9
|
+
//#region src/theme.ts
|
|
10
|
+
const theme = {
|
|
11
|
+
backgroundDeep: "#000000",
|
|
12
|
+
background: "#1b212b",
|
|
13
|
+
surface: "#202733",
|
|
14
|
+
surfaceMuted: "#1d2430",
|
|
15
|
+
surfaceElevated: "#252d3b",
|
|
16
|
+
text: "#d8d3c9",
|
|
17
|
+
textMuted: "#918b84",
|
|
18
|
+
textSubtle: "#66625d",
|
|
19
|
+
accent: "#8fc4bf",
|
|
20
|
+
accentActive: "#a7d8d2",
|
|
21
|
+
success: "#8ecb73",
|
|
22
|
+
warning: "#d8ae63",
|
|
23
|
+
danger: "#c97b73",
|
|
24
|
+
border: "#394252",
|
|
25
|
+
borderActive: "#546077",
|
|
26
|
+
error: "#c97b73",
|
|
27
|
+
info: "#8fc4bf",
|
|
28
|
+
muted: "#918b84",
|
|
29
|
+
primary: "#8fc4bf",
|
|
30
|
+
secondary: "#a7d8d2",
|
|
31
|
+
spinner: "#8fc4bf",
|
|
32
|
+
progress: "#8fc4bf",
|
|
33
|
+
label: "#d8d3c9",
|
|
34
|
+
dimLabel: "#66625d",
|
|
35
|
+
highlight: "bold",
|
|
36
|
+
separator: " · ",
|
|
37
|
+
sectionGap: 1,
|
|
38
|
+
panelPaddingX: 1,
|
|
39
|
+
panelPaddingY: 0
|
|
128
40
|
};
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
41
|
+
//#endregion
|
|
42
|
+
//#region src/components/Spinner.tsx
|
|
43
|
+
function Spinner({ label = "Loading...", color = theme.spinner, type = "dots" }) {
|
|
44
|
+
return /* @__PURE__ */ jsxs(Box, { children: [/* @__PURE__ */ jsx(Text, {
|
|
45
|
+
color,
|
|
46
|
+
children: /* @__PURE__ */ jsx(InkSpinner, { type })
|
|
47
|
+
}), /* @__PURE__ */ jsxs(Text, {
|
|
48
|
+
color: theme.textMuted,
|
|
49
|
+
children: [" ", label]
|
|
50
|
+
})] });
|
|
51
|
+
}
|
|
52
|
+
//#endregion
|
|
53
|
+
//#region src/components/StatusBar.tsx
|
|
54
|
+
function StatusBar({ left, center, right }) {
|
|
55
|
+
return /* @__PURE__ */ jsxs(Box, {
|
|
56
|
+
borderStyle: "single",
|
|
57
|
+
borderColor: theme.border,
|
|
58
|
+
backgroundColor: theme.background,
|
|
59
|
+
paddingX: theme.panelPaddingX,
|
|
60
|
+
paddingY: theme.panelPaddingY,
|
|
61
|
+
children: [
|
|
62
|
+
/* @__PURE__ */ jsx(Box, {
|
|
63
|
+
flexGrow: 1,
|
|
64
|
+
children: typeof left === "string" ? /* @__PURE__ */ jsx(Text, {
|
|
65
|
+
color: theme.textMuted,
|
|
66
|
+
children: left
|
|
67
|
+
}) : left
|
|
68
|
+
}),
|
|
69
|
+
center && /* @__PURE__ */ jsx(Box, {
|
|
70
|
+
flexGrow: 1,
|
|
71
|
+
justifyContent: "center",
|
|
72
|
+
children: /* @__PURE__ */ jsx(Text, {
|
|
73
|
+
color: theme.accent,
|
|
74
|
+
children: center
|
|
75
|
+
})
|
|
76
|
+
}),
|
|
77
|
+
right && /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Text, {
|
|
78
|
+
color: theme.textSubtle,
|
|
79
|
+
children: right
|
|
80
|
+
}) })
|
|
81
|
+
]
|
|
82
|
+
});
|
|
83
|
+
}
|
|
84
|
+
//#endregion
|
|
85
|
+
//#region src/components/StreamOutput.tsx
|
|
86
|
+
const bodyText = chalk.hex(theme.text);
|
|
87
|
+
const mutedText = chalk.hex(theme.textMuted);
|
|
88
|
+
const subtleText = chalk.hex(theme.textSubtle);
|
|
89
|
+
const accentText = chalk.hex(theme.accent);
|
|
90
|
+
const accentActiveText = chalk.hex(theme.accentActive);
|
|
91
|
+
const successText = chalk.hex(theme.success);
|
|
92
|
+
const markdownHighlightTheme = {
|
|
93
|
+
default: bodyText,
|
|
94
|
+
keyword: accentText,
|
|
95
|
+
built_in: accentActiveText,
|
|
96
|
+
type: accentActiveText,
|
|
97
|
+
literal: accentText,
|
|
98
|
+
number: successText,
|
|
99
|
+
regexp: chalk.hex(theme.warning),
|
|
100
|
+
string: bodyText,
|
|
101
|
+
subst: accentText,
|
|
102
|
+
symbol: bodyText,
|
|
103
|
+
class: accentActiveText,
|
|
104
|
+
function: accentActiveText,
|
|
105
|
+
title: accentActiveText,
|
|
106
|
+
params: mutedText,
|
|
107
|
+
comment: subtleText,
|
|
108
|
+
doctag: subtleText,
|
|
109
|
+
meta: subtleText,
|
|
110
|
+
"meta-keyword": accentText,
|
|
111
|
+
"meta-string": mutedText,
|
|
112
|
+
section: accentText,
|
|
113
|
+
tag: accentText,
|
|
114
|
+
name: accentActiveText,
|
|
115
|
+
"builtin-name": accentActiveText,
|
|
116
|
+
attr: accentText,
|
|
117
|
+
attribute: accentText,
|
|
118
|
+
variable: accentActiveText,
|
|
119
|
+
bullet: mutedText,
|
|
120
|
+
code: successText,
|
|
121
|
+
emphasis: accentText,
|
|
122
|
+
strong: accentActiveText,
|
|
123
|
+
formula: accentText,
|
|
124
|
+
link: accentActiveText,
|
|
125
|
+
quote: mutedText,
|
|
126
|
+
addition: successText,
|
|
127
|
+
deletion: chalk.hex(theme.danger)
|
|
128
|
+
};
|
|
129
|
+
marked.use(markedTerminal({
|
|
130
|
+
code: successText,
|
|
131
|
+
blockquote: mutedText,
|
|
132
|
+
html: subtleText,
|
|
133
|
+
heading: accentText,
|
|
134
|
+
firstHeading: accentActiveText.bold,
|
|
135
|
+
hr: subtleText,
|
|
136
|
+
listitem: bodyText,
|
|
137
|
+
list: (body) => bodyText(body),
|
|
138
|
+
table: mutedText,
|
|
139
|
+
paragraph: bodyText,
|
|
140
|
+
strong: accentActiveText.bold,
|
|
141
|
+
em: accentText.italic,
|
|
142
|
+
codespan: successText,
|
|
143
|
+
del: subtleText.strikethrough,
|
|
144
|
+
link: accentActiveText,
|
|
145
|
+
href: mutedText.underline,
|
|
146
|
+
text: bodyText,
|
|
147
|
+
showSectionPrefix: false,
|
|
148
|
+
reflowText: false
|
|
149
|
+
}, {
|
|
150
|
+
ignoreIllegals: true,
|
|
151
|
+
theme: markdownHighlightTheme
|
|
152
|
+
}));
|
|
153
|
+
/**
|
|
154
|
+
* Render raw markdown content to terminal-styled text with ANSI color codes.
|
|
155
|
+
* Uses the module-level `marked` + `marked-terminal` configuration.
|
|
156
|
+
*/
|
|
158
157
|
function renderMarkdownToTerminal(content) {
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
158
|
+
const stripped = stripAnsi(content);
|
|
159
|
+
if (!stripped) return "";
|
|
160
|
+
return marked.parse(stripped).trimEnd();
|
|
162
161
|
}
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
})
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
162
|
+
const StreamOutput = memo(function StreamOutput({ content, isStreaming, enableMarkdown = true, maxVisibleLines, scrollOffset = 0 }) {
|
|
163
|
+
const rendered = useMemo(() => {
|
|
164
|
+
const stripped = stripAnsi(content);
|
|
165
|
+
if (!stripped) return "";
|
|
166
|
+
if (enableMarkdown) return marked.parse(stripped).trimEnd();
|
|
167
|
+
return stripped;
|
|
168
|
+
}, [content, enableMarkdown]);
|
|
169
|
+
const lines = useMemo(() => rendered.split("\n"), [rendered]);
|
|
170
|
+
const visible = useMemo(() => {
|
|
171
|
+
if (!maxVisibleLines) return rendered;
|
|
172
|
+
const totalLines = lines.length;
|
|
173
|
+
const end = totalLines - Math.min(scrollOffset, Math.max(0, totalLines - maxVisibleLines));
|
|
174
|
+
const start = Math.max(0, end - maxVisibleLines);
|
|
175
|
+
return lines.slice(start, end).join("\n");
|
|
176
|
+
}, [
|
|
177
|
+
rendered,
|
|
178
|
+
lines,
|
|
179
|
+
maxVisibleLines,
|
|
180
|
+
scrollOffset
|
|
181
|
+
]);
|
|
182
|
+
return /* @__PURE__ */ jsxs(Box, {
|
|
183
|
+
flexDirection: "column",
|
|
184
|
+
children: [visible && /* @__PURE__ */ jsx(Text, {
|
|
185
|
+
color: theme.text,
|
|
186
|
+
children: visible
|
|
187
|
+
}), isStreaming && /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Text, {
|
|
188
|
+
color: theme.textMuted,
|
|
189
|
+
children: /* @__PURE__ */ jsx(InkSpinner, { type: "dots" })
|
|
190
|
+
}) })]
|
|
191
|
+
});
|
|
191
192
|
});
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
import { Box as Box4, Text as Text4 } from "ink";
|
|
195
|
-
import { jsxs as jsxs4 } from "react/jsx-runtime";
|
|
193
|
+
//#endregion
|
|
194
|
+
//#region src/components/ErrorDisplay.tsx
|
|
196
195
|
function ErrorDisplay({ error, context }) {
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
196
|
+
const message = error instanceof Error ? error.message : error;
|
|
197
|
+
const cause = error instanceof Error && error.cause ? String(error.cause) : void 0;
|
|
198
|
+
return /* @__PURE__ */ jsxs(Box, {
|
|
199
|
+
flexDirection: "column",
|
|
200
|
+
marginTop: theme.sectionGap,
|
|
201
|
+
children: [/* @__PURE__ */ jsxs(Text, {
|
|
202
|
+
color: theme.danger,
|
|
203
|
+
bold: true,
|
|
204
|
+
children: [
|
|
205
|
+
"Error",
|
|
206
|
+
context ? ` ${context}` : "",
|
|
207
|
+
": ",
|
|
208
|
+
message
|
|
209
|
+
]
|
|
210
|
+
}), cause && /* @__PURE__ */ jsxs(Text, {
|
|
211
|
+
color: theme.textMuted,
|
|
212
|
+
children: ["Cause: ", cause]
|
|
213
|
+
})]
|
|
214
|
+
});
|
|
211
215
|
}
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
StatusBar,
|
|
216
|
-
StreamOutput,
|
|
217
|
-
renderMarkdownToTerminal,
|
|
218
|
-
theme
|
|
219
|
-
};
|
|
216
|
+
//#endregion
|
|
217
|
+
export { ErrorDisplay, Spinner, StatusBar, StreamOutput, renderMarkdownToTerminal, theme };
|
|
218
|
+
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@runtypelabs/ink-components",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.9",
|
|
4
4
|
"description": "Shared Ink (React for CLI) components for the Runtype CLI — spinners, status bars, streaming output, and error displays.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "Runtype",
|
|
@@ -29,9 +29,9 @@
|
|
|
29
29
|
"devDependencies": {
|
|
30
30
|
"@types/react": "^19.2.18",
|
|
31
31
|
"ink-testing-library": "4.0.0",
|
|
32
|
-
"
|
|
32
|
+
"tsdown": "^0.23.0",
|
|
33
33
|
"typescript": "^6.0.3",
|
|
34
|
-
"vitest": "^
|
|
34
|
+
"vitest": "^5.0.2"
|
|
35
35
|
},
|
|
36
36
|
"keywords": [
|
|
37
37
|
"runtype",
|
|
@@ -59,10 +59,10 @@
|
|
|
59
59
|
},
|
|
60
60
|
"sideEffects": false,
|
|
61
61
|
"scripts": {
|
|
62
|
-
"build": "
|
|
62
|
+
"build": "tsdown",
|
|
63
63
|
"test": "vitest run",
|
|
64
64
|
"type-check": "tsgo --noEmit",
|
|
65
|
-
"dev": "
|
|
65
|
+
"dev": "tsdown --watch",
|
|
66
66
|
"typecheck": "tsgo --noEmit",
|
|
67
67
|
"lint": "eslint ."
|
|
68
68
|
}
|