@dsh-workbench/shared 0.1.2 → 0.1.3
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/api/workbench-contract.d.ts +1 -1
- package/dist/components/ApprovalDetail.css +4 -0
- package/dist/components/ApprovalDetail.d.ts +1 -0
- package/dist/components/ApprovalDetail.js +5 -1
- package/dist/components/CardHead.css +92 -0
- package/dist/components/CardHead.d.ts +1 -0
- package/dist/components/CardHead.js +9 -7
- package/dist/components/ChoiceGroup.css +75 -0
- package/dist/components/ChoiceGroup.d.ts +1 -0
- package/dist/components/ChoiceGroup.js +1 -0
- package/dist/components/LongTaskRow.css +53 -0
- package/dist/components/LongTaskRow.d.ts +3 -0
- package/dist/components/LongTaskRow.js +11 -11
- package/dist/components/MockStrip.css +39 -0
- package/dist/components/MockStrip.d.ts +1 -0
- package/dist/components/MockStrip.js +1 -0
- package/dist/components/ResourceStates.css +111 -0
- package/dist/components/ResourceStates.d.ts +2 -1
- package/dist/components/ResourceStates.js +1 -0
- package/dist/components/SaveBar.css +7 -0
- package/dist/components/SaveBar.d.ts +1 -0
- package/dist/components/SaveBar.js +4 -2
- package/dist/components/TextField.css +22 -0
- package/dist/components/TextField.d.ts +6 -0
- package/dist/components/TextField.js +5 -0
- package/dist/components/icons.d.ts +0 -12
- package/dist/components/icons.js +0 -61
- package/dist/host/http.js +5 -29
- package/dist/host/provision.d.ts +18 -1
- package/dist/host/provision.js +73 -0
- package/dist/host.d.ts +6 -0
- package/dist/host.js +6 -0
- package/dist/i18n/en.js +126 -1
- package/dist/i18n/index.d.ts +129 -4
- package/dist/i18n/zh.d.ts +128 -3
- package/dist/i18n/zh.js +128 -3
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1 -1
- package/package.json +5 -3
- package/src/api/workbench-contract.ts +5 -1
- package/src/components/ApprovalDetail.css +4 -0
- package/src/components/ApprovalDetail.tsx +11 -1
- package/src/components/CardHead.css +92 -0
- package/src/components/CardHead.tsx +43 -31
- package/src/components/ChoiceGroup.css +75 -0
- package/src/components/ChoiceGroup.tsx +1 -0
- package/src/components/LongTaskRow.css +53 -0
- package/src/components/LongTaskRow.tsx +52 -13
- package/src/components/MockStrip.css +39 -0
- package/src/components/MockStrip.tsx +1 -0
- package/src/components/ResourceStates.css +111 -0
- package/src/components/ResourceStates.tsx +2 -1
- package/src/components/SaveBar.css +7 -0
- package/src/components/SaveBar.tsx +8 -5
- package/src/components/TextField.css +22 -0
- package/src/components/TextField.tsx +17 -0
- package/src/components/icons.tsx +0 -164
- package/src/host/__tests__/provision.test.ts +90 -0
- package/src/host/http.ts +5 -33
- package/src/host/provision.ts +87 -0
- package/src/host.ts +6 -0
- package/src/i18n/en.ts +127 -1
- package/src/i18n/zh.ts +128 -4
- package/src/index.ts +1 -1
- package/dist/components/StateDot.d.ts +0 -5
- package/dist/components/StateDot.js +0 -10
- package/dist/host/__tests__/fakes.d.ts +0 -41
- package/dist/host/__tests__/fakes.js +0 -76
- package/dist/host/__tests__/preflight-fixtures.d.ts +0 -19
- package/dist/host/__tests__/preflight-fixtures.js +0 -47
- package/dist/host/context-inject.d.ts +0 -24
- package/dist/host/context-inject.js +0 -74
- package/dist/host/events.d.ts +0 -9
- package/dist/host/events.js +0 -70
- package/dist/host/mount-units.d.ts +0 -52
- package/dist/host/mount-units.js +0 -186
- package/dist/host/preflight.d.ts +0 -58
- package/dist/host/preflight.js +0 -233
- package/dist/host/probe-cache.d.ts +0 -6
- package/dist/host/probe-cache.js +0 -19
- package/dist/host/probe-libs.d.ts +0 -45
- package/dist/host/probe-libs.js +0 -61
- package/dist/host/probe-units.d.ts +0 -17
- package/dist/host/probe-units.js +0 -102
- package/dist/host/probe-verdict.d.ts +0 -7
- package/dist/host/probe-verdict.js +0 -143
- package/dist/host/tool-scope.d.ts +0 -32
- package/dist/host/tool-scope.js +0 -84
- package/dist/host/unit-readiness.d.ts +0 -7
- package/dist/host/unit-readiness.js +0 -5
- package/dist/host/unit-registry.d.ts +0 -9
- package/dist/host/unit-registry.js +0 -33
- package/dist/host/version-range.d.ts +0 -2
- package/dist/host/version-range.js +0 -73
- package/src/components/StateDot.tsx +0 -31
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
|
|
2
|
+
.wb-choiceMenu {
|
|
3
|
+
display: flex;
|
|
4
|
+
flex-direction: column;
|
|
5
|
+
gap: var(--wb-len-2);
|
|
6
|
+
padding: var(--wb-len-4);
|
|
7
|
+
border: 0.5px solid var(--dsw-alias-border-l3);
|
|
8
|
+
border-radius: var(--dsw-radius-md);
|
|
9
|
+
background: transparent;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.wb-choiceOption {
|
|
13
|
+
display: flex;
|
|
14
|
+
align-items: center;
|
|
15
|
+
gap: var(--wb-len-6);
|
|
16
|
+
min-height: var(--wb-len-30);
|
|
17
|
+
padding: var(--wb-len-6) var(--wb-len-8);
|
|
18
|
+
border-radius: var(--dsw-radius-md);
|
|
19
|
+
cursor: pointer;
|
|
20
|
+
font-size: var(--dsw-font-xs-13-font-size);
|
|
21
|
+
line-height: var(--wb-line-20);
|
|
22
|
+
color: var(--dsw-alias-label-primary);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.wb-choiceOption:hover {
|
|
26
|
+
background: var(--dsw-alias-interactive-bg-hover);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.wb-choiceLabel {
|
|
30
|
+
flex: 1;
|
|
31
|
+
min-width: 0;
|
|
32
|
+
overflow: hidden;
|
|
33
|
+
text-overflow: ellipsis;
|
|
34
|
+
white-space: nowrap;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.wb-radio {
|
|
38
|
+
appearance: none;
|
|
39
|
+
-webkit-appearance: none;
|
|
40
|
+
flex: none;
|
|
41
|
+
box-sizing: border-box;
|
|
42
|
+
width: var(--wb-len-12);
|
|
43
|
+
height: var(--wb-len-12);
|
|
44
|
+
margin: 0;
|
|
45
|
+
border: 1px solid var(--dsw-alias-border-l3);
|
|
46
|
+
border-radius: 50%;
|
|
47
|
+
corner-shape: round;
|
|
48
|
+
background-color: transparent;
|
|
49
|
+
cursor: pointer;
|
|
50
|
+
transition:
|
|
51
|
+
background-color var(--wb-dur-0-12) ease, border-color var(--wb-dur-0-12) ease;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.wb-radio:not(:checked):hover {
|
|
55
|
+
border-color: var(--dsw-alias-label-tertiary);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.wb-radio:checked {
|
|
59
|
+
border-color: var(--dsw-alias-brand-primary);
|
|
60
|
+
background-image: radial-gradient(
|
|
61
|
+
circle at center,
|
|
62
|
+
var(--dsw-alias-brand-primary) 0 3px,
|
|
63
|
+
transparent 3px
|
|
64
|
+
);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.wb-radio:disabled {
|
|
68
|
+
cursor: default;
|
|
69
|
+
opacity: 0.5;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.wb-radio:focus-visible {
|
|
73
|
+
outline: var(--dsw-focus-ring-width, var(--wb-len-2)) solid var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary));
|
|
74
|
+
outline-offset: 2px;
|
|
75
|
+
}
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
|
|
2
|
+
.wb-longTask {
|
|
3
|
+
padding-top: var(--wb-len-12);
|
|
4
|
+
border-top: 0.5px solid var(--dsw-alias-border-l2);
|
|
5
|
+
display: flex;
|
|
6
|
+
flex-direction: column;
|
|
7
|
+
gap: var(--wb-len-2);
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.wb-longTaskHead {
|
|
11
|
+
display: flex;
|
|
12
|
+
align-items: center;
|
|
13
|
+
gap: var(--wb-len-6);
|
|
14
|
+
margin: 0;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.wb-longTaskLink {
|
|
18
|
+
flex: none;
|
|
19
|
+
display: inline-flex;
|
|
20
|
+
align-items: center;
|
|
21
|
+
gap: var(--wb-len-2);
|
|
22
|
+
text-decoration: none;
|
|
23
|
+
white-space: nowrap;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.wb-longTaskHeadline {
|
|
27
|
+
margin: 0;
|
|
28
|
+
font-size: var(--dsw-font-xxs-12-font-size);
|
|
29
|
+
line-height: var(--wb-line-18);
|
|
30
|
+
white-space: pre-wrap;
|
|
31
|
+
overflow-wrap: anywhere;
|
|
32
|
+
color: var(--dsw-alias-label-secondary);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.wb-longTaskProblem {
|
|
36
|
+
margin: 0;
|
|
37
|
+
font-size: var(--dsw-font-xxxs-11-font-size);
|
|
38
|
+
line-height: var(--wb-line-16);
|
|
39
|
+
color: var(--dsw-alias-state-error-primary);
|
|
40
|
+
overflow-wrap: anywhere;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.wb-longTaskDump {
|
|
44
|
+
margin: var(--wb-len-2) 0 0;
|
|
45
|
+
font-size: var(--dsw-font-xxxs-11-font-size);
|
|
46
|
+
color: var(--dsw-alias-label-tertiary);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.wb-longTaskDump pre {
|
|
50
|
+
margin: var(--wb-len-4) 0 0;
|
|
51
|
+
max-height: var(--wb-len-220);
|
|
52
|
+
overflow: auto;
|
|
53
|
+
}
|
|
@@ -1,7 +1,14 @@
|
|
|
1
1
|
import { longTaskDot, type LongTaskStatus } from '../api/long-task.js';
|
|
2
|
-
import { Fragment, h } from '../lib/react.js';
|
|
3
|
-
import {
|
|
4
|
-
|
|
2
|
+
import { Fragment, h, useState } from '../lib/react.js';
|
|
3
|
+
import {
|
|
4
|
+
CodeBlock,
|
|
5
|
+
DisclosureRow,
|
|
6
|
+
IconCodeOutlineRegular,
|
|
7
|
+
IconFlatListOutlineRegular,
|
|
8
|
+
IconRightUpOutlineRegular,
|
|
9
|
+
StateDot,
|
|
10
|
+
} from '@deepseek-ai/dsh-client-ui-primitives';
|
|
11
|
+
import './LongTaskRow.css';
|
|
5
12
|
|
|
6
13
|
export interface LongTaskRowLink {
|
|
7
14
|
readonly href: string;
|
|
@@ -17,18 +24,22 @@ export interface LongTaskRowProps {
|
|
|
17
24
|
readonly raw?: string | undefined;
|
|
18
25
|
readonly stepsTitle?: string | undefined;
|
|
19
26
|
readonly rawTitle?: string | undefined;
|
|
27
|
+
readonly copyLabel?: string | undefined;
|
|
28
|
+
readonly copiedLabel?: string | undefined;
|
|
20
29
|
}
|
|
21
30
|
|
|
22
31
|
function RowLink({ href, text }: LongTaskRowLink) {
|
|
23
32
|
return (
|
|
24
|
-
<a className="wb-
|
|
33
|
+
<a className="wb-longTaskLink" href={href} target="_blank" rel="noreferrer noopener">
|
|
25
34
|
{text}
|
|
26
|
-
<
|
|
35
|
+
<IconRightUpOutlineRegular size={12} />
|
|
27
36
|
</a>
|
|
28
37
|
);
|
|
29
38
|
}
|
|
30
39
|
|
|
31
40
|
export function LongTaskRow(props: LongTaskRowProps) {
|
|
41
|
+
const [stepsOpen, setStepsOpen] = useState(false);
|
|
42
|
+
const [rawOpen, setRawOpen] = useState(false);
|
|
32
43
|
const failed = props.status === 'failed';
|
|
33
44
|
const problem = props.problem ?? '';
|
|
34
45
|
const raw = (props.raw ?? '').trim();
|
|
@@ -47,16 +58,44 @@ export function LongTaskRow(props: LongTaskRowProps) {
|
|
|
47
58
|
{!failed ? null : (
|
|
48
59
|
<Fragment>
|
|
49
60
|
{steps.length === 0 || props.stepsTitle === undefined ? null : (
|
|
50
|
-
<
|
|
51
|
-
|
|
52
|
-
<
|
|
53
|
-
|
|
61
|
+
<DisclosureRow
|
|
62
|
+
className="wb-longTaskDump"
|
|
63
|
+
icon={<IconFlatListOutlineRegular size={14} />}
|
|
64
|
+
title={props.stepsTitle}
|
|
65
|
+
open={stepsOpen}
|
|
66
|
+
expandable
|
|
67
|
+
expandOnRowClick
|
|
68
|
+
previewChevron
|
|
69
|
+
onToggle={() => setStepsOpen(!stepsOpen)}
|
|
70
|
+
>
|
|
71
|
+
<CodeBlock
|
|
72
|
+
code={steps.join('\n')}
|
|
73
|
+
className="wb-longTaskDump"
|
|
74
|
+
showHeader={props.copyLabel !== undefined}
|
|
75
|
+
copyLabel={props.copyLabel ?? ''}
|
|
76
|
+
copiedLabel={props.copiedLabel ?? ''}
|
|
77
|
+
/>
|
|
78
|
+
</DisclosureRow>
|
|
54
79
|
)}
|
|
55
80
|
{raw === '' || props.rawTitle === undefined ? null : (
|
|
56
|
-
<
|
|
57
|
-
|
|
58
|
-
<
|
|
59
|
-
|
|
81
|
+
<DisclosureRow
|
|
82
|
+
className="wb-longTaskDump"
|
|
83
|
+
icon={<IconCodeOutlineRegular size={14} />}
|
|
84
|
+
title={props.rawTitle}
|
|
85
|
+
open={rawOpen}
|
|
86
|
+
expandable
|
|
87
|
+
expandOnRowClick
|
|
88
|
+
previewChevron
|
|
89
|
+
onToggle={() => setRawOpen(!rawOpen)}
|
|
90
|
+
>
|
|
91
|
+
<CodeBlock
|
|
92
|
+
code={raw}
|
|
93
|
+
className="wb-longTaskDump"
|
|
94
|
+
showHeader={props.copyLabel !== undefined}
|
|
95
|
+
copyLabel={props.copyLabel ?? ''}
|
|
96
|
+
copiedLabel={props.copiedLabel ?? ''}
|
|
97
|
+
/>
|
|
98
|
+
</DisclosureRow>
|
|
60
99
|
)}
|
|
61
100
|
</Fragment>
|
|
62
101
|
)}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
|
|
2
|
+
.wb-mockStrip {
|
|
3
|
+
display: flex;
|
|
4
|
+
flex-wrap: wrap;
|
|
5
|
+
gap: var(--wb-len-4);
|
|
6
|
+
padding: var(--wb-len-8) var(--wb-len-12);
|
|
7
|
+
border-bottom: 0.5px solid var(--dsw-alias-border-l2);
|
|
8
|
+
flex: none;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.wb-mockNote {
|
|
12
|
+
flex: 1 0 100%;
|
|
13
|
+
font-size: var(--wb-font-10);
|
|
14
|
+
line-height: var(--wb-line-14);
|
|
15
|
+
color: var(--dsw-alias-label-tertiary);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.wb-mockChip {
|
|
19
|
+
flex: none;
|
|
20
|
+
padding: var(--wb-len-2) var(--wb-len-7);
|
|
21
|
+
border: 0.5px solid var(--dsw-alias-border-l2);
|
|
22
|
+
border-radius: var(--wb-radius-pill);
|
|
23
|
+
corner-shape: round;
|
|
24
|
+
background: transparent;
|
|
25
|
+
font-size: var(--wb-font-10);
|
|
26
|
+
line-height: var(--wb-line-14);
|
|
27
|
+
color: var(--dsw-alias-label-secondary);
|
|
28
|
+
cursor: pointer;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.wb-mockChip:hover {
|
|
32
|
+
color: var(--dsw-alias-label-primary);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.wb-mockChipOn {
|
|
36
|
+
border-color: transparent;
|
|
37
|
+
background: var(--dsw-alias-brand-primary);
|
|
38
|
+
color: var(--dsw-alias-label-primary-foreground);
|
|
39
|
+
}
|
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
|
|
2
|
+
.wb-centered.wb-centeredCompact {
|
|
3
|
+
flex: none;
|
|
4
|
+
min-height: 0;
|
|
5
|
+
gap: var(--wb-len-8);
|
|
6
|
+
padding: var(--wb-len-20) var(--wb-len-16);
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.wb-centered.wb-centeredCompact .wb-centeredHero {
|
|
10
|
+
margin-bottom: var(--wb-len-4);
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.wb-skeleton {
|
|
14
|
+
display: flex;
|
|
15
|
+
flex-direction: column;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.wb-skeletonRow {
|
|
19
|
+
display: flex;
|
|
20
|
+
flex-direction: column;
|
|
21
|
+
gap: var(--wb-len-8);
|
|
22
|
+
padding: var(--wb-len-8);
|
|
23
|
+
border-radius: var(--dsw-radius-md);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.wb-skeletonRow + .wb-skeletonRow::before {
|
|
27
|
+
content: '';
|
|
28
|
+
align-self: stretch;
|
|
29
|
+
height: var(--wb-len-0-5);
|
|
30
|
+
margin: 0 var(--wb-len-8) var(--wb-len-neg-0-5);
|
|
31
|
+
background: var(--dsw-alias-border-l2);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.wb-skeletonBar {
|
|
35
|
+
display: block;
|
|
36
|
+
height: var(--wb-len-13);
|
|
37
|
+
border-radius: var(--dsw-radius-xs);
|
|
38
|
+
background: var(--dsw-alias-bg-skeleton);
|
|
39
|
+
animation: wb-skeleton-pulse var(--wb-dur-1-4) var(--ds-ease-in-out) infinite;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.wb-skeletonBarTitle {
|
|
43
|
+
width: 62%;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.wb-skeletonBarMeta {
|
|
47
|
+
width: 32%;
|
|
48
|
+
height: var(--wb-len-10);
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.wb-skeletonRow:nth-child(2n) .wb-skeletonBarTitle {
|
|
52
|
+
width: 74%;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.wb-skeletonRow:nth-child(3n) .wb-skeletonBarTitle {
|
|
56
|
+
width: 52%;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
@keyframes wb-skeleton-pulse {
|
|
60
|
+
50% {
|
|
61
|
+
opacity: 0.45;
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.wb-centered {
|
|
66
|
+
box-sizing: border-box;
|
|
67
|
+
display: flex;
|
|
68
|
+
flex-direction: column;
|
|
69
|
+
justify-content: center;
|
|
70
|
+
align-items: center;
|
|
71
|
+
gap: var(--wb-len-14);
|
|
72
|
+
flex: 1;
|
|
73
|
+
min-height: var(--wb-len-240);
|
|
74
|
+
padding: 0 var(--wb-len-24) var(--wb-len-24);
|
|
75
|
+
text-align: center;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.wb-centeredHero {
|
|
79
|
+
display: flex;
|
|
80
|
+
margin-bottom: var(--wb-len-16);
|
|
81
|
+
color: var(--dsw-alias-label-dimmed);
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.wb-centeredTitle {
|
|
85
|
+
font-size: var(--dsw-font-s-14-font-size);
|
|
86
|
+
line-height: var(--wb-line-22);
|
|
87
|
+
color: var(--dsw-alias-label-primary);
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.wb-centeredHint {
|
|
91
|
+
max-width: var(--wb-len-300);
|
|
92
|
+
font-size: var(--dsw-font-xxs-12-font-size);
|
|
93
|
+
line-height: var(--wb-line-18);
|
|
94
|
+
color: var(--dsw-alias-label-tertiary);
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.wb-centeredDetail {
|
|
98
|
+
max-width: var(--wb-len-320);
|
|
99
|
+
font-family: var(--ds-font-family-code, monospace);
|
|
100
|
+
font-size: var(--dsw-font-xxxs-11-font-size);
|
|
101
|
+
line-height: var(--wb-line-16);
|
|
102
|
+
color: var(--dsw-alias-label-dimmed);
|
|
103
|
+
word-break: break-all;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.wb-centeredAction {
|
|
107
|
+
display: flex;
|
|
108
|
+
justify-content: center;
|
|
109
|
+
gap: var(--wb-len-8);
|
|
110
|
+
margin-top: var(--wb-len-2);
|
|
111
|
+
}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import type { ReactNode } from 'react';
|
|
2
2
|
import { h } from '../lib/react.js';
|
|
3
|
+
import './ResourceStates.css';
|
|
3
4
|
|
|
4
5
|
export function SkeletonRows({ rows = 4 }: { rows?: number }) {
|
|
5
6
|
return (
|
|
@@ -16,7 +17,7 @@ export function SkeletonRows({ rows = 4 }: { rows?: number }) {
|
|
|
16
17
|
|
|
17
18
|
export interface CenteredStateProps {
|
|
18
19
|
icon: ReactNode;
|
|
19
|
-
title:
|
|
20
|
+
title: ReactNode;
|
|
20
21
|
hint?: string;
|
|
21
22
|
detail?: string;
|
|
22
23
|
action?: ReactNode;
|
|
@@ -1,4 +1,6 @@
|
|
|
1
|
+
import { Button } from '@deepseek-ai/dsh-client-ui-primitives';
|
|
1
2
|
import { h } from '../lib/react.js';
|
|
3
|
+
import './SaveBar.css';
|
|
2
4
|
|
|
3
5
|
export interface SaveBarProps {
|
|
4
6
|
readonly busy: boolean;
|
|
@@ -15,17 +17,18 @@ export interface SaveBarProps {
|
|
|
15
17
|
export function SaveBar({ busy, disabled, labels, onCancel, onSave }: SaveBarProps) {
|
|
16
18
|
return (
|
|
17
19
|
<div className="wb-formActions">
|
|
18
|
-
<
|
|
20
|
+
<Button type="button" size="sm" variant="ghost" onClick={onCancel} disabled={busy}>
|
|
19
21
|
{labels.cancel}
|
|
20
|
-
</
|
|
21
|
-
<
|
|
22
|
+
</Button>
|
|
23
|
+
<Button
|
|
22
24
|
type="button"
|
|
23
|
-
|
|
25
|
+
size="sm"
|
|
26
|
+
variant="primary"
|
|
24
27
|
onClick={onSave}
|
|
25
28
|
disabled={busy || disabled === true}
|
|
26
29
|
>
|
|
27
30
|
{busy ? labels.saving : labels.save}
|
|
28
|
-
</
|
|
31
|
+
</Button>
|
|
29
32
|
</div>
|
|
30
33
|
);
|
|
31
34
|
}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
.wb-textField {
|
|
2
|
+
box-sizing: border-box;
|
|
3
|
+
border: 0.5px solid var(--dsw-alias-border-l4);
|
|
4
|
+
border-radius: var(--dsw-radius-md);
|
|
5
|
+
background: var(--dsw-alias-bg-layer-3);
|
|
6
|
+
font: var(--dsw-font-xs-13);
|
|
7
|
+
color: var(--dsw-alias-label-primary);
|
|
8
|
+
outline: none;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.wb-textField:focus {
|
|
12
|
+
border-color: var(--dsw-alias-state-business-primary);
|
|
13
|
+
box-shadow: inset 0 0 0 0.5px var(--dsw-alias-state-business-primary);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.wb-textField[aria-invalid='true'] {
|
|
17
|
+
border-color: var(--dsw-alias-state-error-primary);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.wb-textField[aria-invalid='true']:focus {
|
|
21
|
+
box-shadow: inset 0 0 0 0.5px var(--dsw-alias-state-error-primary);
|
|
22
|
+
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import type { InputHTMLAttributes } from 'react';
|
|
2
|
+
import './TextField.css';
|
|
3
|
+
import { h } from '../lib/react.js';
|
|
4
|
+
|
|
5
|
+
export interface TextFieldProps extends InputHTMLAttributes<HTMLInputElement> {
|
|
6
|
+
readonly invalid?: boolean;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
export function TextField({ invalid = false, className, ...rest }: TextFieldProps) {
|
|
10
|
+
return (
|
|
11
|
+
<input
|
|
12
|
+
{...rest}
|
|
13
|
+
className={className === undefined ? 'wb-textField' : `wb-textField ${className}`}
|
|
14
|
+
aria-invalid={invalid || undefined}
|
|
15
|
+
/>
|
|
16
|
+
);
|
|
17
|
+
}
|
package/src/components/icons.tsx
CHANGED
|
@@ -31,170 +31,6 @@ function Shell({
|
|
|
31
31
|
);
|
|
32
32
|
}
|
|
33
33
|
|
|
34
|
-
export function IconPanelLeft({ size = 16 }: IconProps) {
|
|
35
|
-
return (
|
|
36
|
-
<Shell size={size}>
|
|
37
|
-
<path
|
|
38
|
-
d="M13.5 1.5H2.5C1.94772 1.5 1.5 1.94772 1.5 2.5V13.5C1.5 14.0523 1.94772 14.5 2.5 14.5H13.5C14.0523 14.5 14.5 14.0523 14.5 13.5V2.5C14.5 1.94772 14.0523 1.5 13.5 1.5Z"
|
|
39
|
-
stroke="currentColor"
|
|
40
|
-
/>
|
|
41
|
-
<path d="M5.5 1.5V14.5" stroke="currentColor" />
|
|
42
|
-
</Shell>
|
|
43
|
-
);
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
export function IconFolder({ size = 16 }: IconProps) {
|
|
47
|
-
return (
|
|
48
|
-
<Shell size={size}>
|
|
49
|
-
<path
|
|
50
|
-
d="M1.50439 3.11059C1.50439 2.55831 1.95211 2.1106 2.50439 2.1106H5.43389C5.67773 2.1106 5.91318 2.19969 6.09593 2.36113L7.71649 3.79265C7.89924 3.95409 8.1347 4.04319 8.3785 4.04319H13.4958C14.0481 4.04319 14.4958 4.4909 14.4958 5.04319V12.8894C14.4958 13.4417 14.0481 13.8894 13.4958 13.8894H2.50439C1.95211 13.8894 1.50439 13.4417 1.50439 12.8894V4.04319V3.11059Z"
|
|
51
|
-
stroke="currentColor"
|
|
52
|
-
/>
|
|
53
|
-
<path d="M3.63501 7.66614H12.3647" stroke="currentColor" />
|
|
54
|
-
</Shell>
|
|
55
|
-
);
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
export function IconFolderOpen({ size = 16 }: IconProps) {
|
|
59
|
-
return (
|
|
60
|
-
<Shell size={size}>
|
|
61
|
-
<path
|
|
62
|
-
d="M2.55912 7.93683C2.67584 7.49906 3.0723 7.19446 3.52536 7.19446H13.6491C14.3061 7.19446 14.7846 7.81725 14.6153 8.45209L13.4411 12.856C13.3244 13.2938 12.9279 13.5984 12.4748 13.5984H2.35113C1.69411 13.5984 1.21562 12.9756 1.38489 12.3407L2.55912 7.93683Z"
|
|
63
|
-
fill="currentColor"
|
|
64
|
-
opacity={0.16}
|
|
65
|
-
/>
|
|
66
|
-
<path
|
|
67
|
-
d="M13.6491 6.69446C14.6346 6.69453 15.3522 7.62895 15.0983 8.58118L13.9245 12.9845C13.7494 13.6412 13.1539 14.0988 12.4743 14.0988H2.35126C1.36574 14.0988 0.648153 13.1643 0.902044 12.212L2.07587 7.80774C2.25102 7.15128 2.84567 6.69455 3.52509 6.69446H13.6491ZM3.52509 7.69446C3.29865 7.69455 3.10004 7.84674 3.04169 8.06555L1.86786 12.4698C1.78345 12.7872 2.02285 13.0988 2.35126 13.0988H12.4743C12.7007 13.0988 12.8992 12.9463 12.9577 12.7277L14.1325 8.32336C14.2171 8.00598 13.9776 7.69453 13.6491 7.69446H3.52509Z"
|
|
68
|
-
fill="currentColor"
|
|
69
|
-
/>
|
|
70
|
-
<path
|
|
71
|
-
d="M4.7666 1.90137C5.13227 1.90144 5.48571 2.03525 5.75977 2.27734L7.27246 3.61328C7.36379 3.69382 7.48174 3.73828 7.60352 3.73828H12.3994C13.2276 3.73841 13.8993 4.41005 13.8994 5.23828V6.7168C13.8183 6.70327 13.735 6.69436 13.6494 6.69434H12.8994V5.23828C12.8993 4.96233 12.6754 4.73841 12.3994 4.73828H7.60352C7.23781 4.73828 6.88446 4.60438 6.61035 4.3623L5.09766 3.02637C5.00636 2.94576 4.88838 2.90144 4.7666 2.90137H2.0498C1.77366 2.90137 1.5498 3.12523 1.5498 3.40137V9.78223L0.902344 12.2119C0.648452 13.1642 1.36604 14.0986 2.35156 14.0986H2.0498C1.2214 14.0986 0.549838 13.427 0.549805 12.5986V3.40137C0.549805 2.57294 1.22138 1.90137 2.0498 1.90137H4.7666Z"
|
|
72
|
-
fill="currentColor"
|
|
73
|
-
/>
|
|
74
|
-
</Shell>
|
|
75
|
-
);
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
export function IconChevronDown({ size = 14 }: IconProps) {
|
|
79
|
-
return (
|
|
80
|
-
<Shell size={size}>
|
|
81
|
-
<path
|
|
82
|
-
d="M4 6L7.29289 9.29289C7.68342 9.68342 8.31658 9.68342 8.70711 9.29289L12 6"
|
|
83
|
-
stroke="currentColor"
|
|
84
|
-
/>
|
|
85
|
-
</Shell>
|
|
86
|
-
);
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
export function IconPlus({ size = 16 }: IconProps) {
|
|
90
|
-
return (
|
|
91
|
-
<Shell size={size}>
|
|
92
|
-
<path d="M8 2V14" stroke="currentColor" />
|
|
93
|
-
<path d="M2 8H14" stroke="currentColor" />
|
|
94
|
-
</Shell>
|
|
95
|
-
);
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
export function IconEllipsis({ size = 16 }: IconProps) {
|
|
99
|
-
return (
|
|
100
|
-
<Shell size={size}>
|
|
101
|
-
<path
|
|
102
|
-
d="M3 9C3.55228 9 4 8.55228 4 8C4 7.44772 3.55228 7 3 7C2.44772 7 2 7.44772 2 8C2 8.55228 2.44772 9 3 9Z"
|
|
103
|
-
fill="currentColor"
|
|
104
|
-
/>
|
|
105
|
-
<path
|
|
106
|
-
d="M8 9C8.55228 9 9 8.55228 9 8C9 7.44772 8.55228 7 8 7C7.44772 7 7 7.44772 7 8C7 8.55228 7.44772 9 8 9Z"
|
|
107
|
-
fill="currentColor"
|
|
108
|
-
/>
|
|
109
|
-
<path
|
|
110
|
-
d="M13 9C13.5523 9 14 8.55228 14 8C14 7.44772 13.5523 7 13 7C12.4477 7 12 7.44772 12 8C12 8.55228 12.4477 9 13 9Z"
|
|
111
|
-
fill="currentColor"
|
|
112
|
-
/>
|
|
113
|
-
</Shell>
|
|
114
|
-
);
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
export function IconSettings({ size = 16 }: IconProps) {
|
|
118
|
-
return (
|
|
119
|
-
<Shell size={size}>
|
|
120
|
-
<path
|
|
121
|
-
d="M8 9.75012C8.9665 9.75012 9.75 8.96662 9.75 8.00012C9.75 7.03362 8.9665 6.25012 8 6.25012C7.0335 6.25012 6.25 7.03362 6.25 8.00012C6.25 8.96662 7.0335 9.75012 8 9.75012Z"
|
|
122
|
-
stroke="currentColor"
|
|
123
|
-
/>
|
|
124
|
-
<path
|
|
125
|
-
d="M13.0107 7.79377C12.9505 7.89401 12.9205 7.94413 12.9205 7.99951C12.9205 8.0549 12.9505 8.10502 13.0106 8.20528L13.9849 9.83006C14.045 9.93029 14.0751 9.9804 14.0751 10.0358C14.0751 10.0911 14.045 10.1413 13.9849 10.2415L13.0037 11.8777C12.9468 11.9726 12.9184 12.0201 12.8725 12.0461C12.8267 12.072 12.7713 12.072 12.6607 12.072H10.6704C10.5598 12.072 10.5045 12.072 10.4586 12.098C10.4128 12.1239 10.3843 12.1714 10.3274 12.2662L9.33825 13.9142C9.28133 14.009 9.25287 14.0564 9.20703 14.0823C9.16118 14.1083 9.10588 14.1083 8.99529 14.1083H7.00486C6.89426 14.1083 6.83896 14.1083 6.79312 14.0823C6.74727 14.0564 6.71881 14.009 6.6619 13.9142L5.67273 12.2662C5.61581 12.1714 5.58735 12.1239 5.54151 12.098C5.49566 12.072 5.44036 12.072 5.32977 12.072H3.33945C3.2288 12.072 3.17347 12.072 3.12761 12.0461C3.08176 12.0201 3.0533 11.9726 2.9964 11.8777L2.0152 10.2415C1.9551 10.1413 1.92505 10.0911 1.92505 10.0358C1.92505 9.9804 1.9551 9.93029 2.0152 9.83006L2.98951 8.20528C3.04963 8.10502 3.07969 8.0549 3.07969 7.99951C3.07968 7.94413 3.04961 7.89401 2.98946 7.79377L2.01529 6.17011C1.95514 6.06987 1.92507 6.01975 1.92507 5.96437C1.92506 5.90899 1.95512 5.85886 2.01524 5.7586L2.9964 4.1224C3.0533 4.0275 3.08176 3.98005 3.12761 3.95408C3.17347 3.92811 3.2288 3.92811 3.33945 3.92811H5.32977C5.44036 3.92811 5.49566 3.92811 5.54151 3.90216C5.58735 3.87621 5.61581 3.82879 5.67273 3.73397L6.6619 2.08599C6.71881 1.99116 6.74727 1.94375 6.79312 1.9178C6.83896 1.89185 6.89426 1.89185 7.00486 1.89185H8.99529C9.10588 1.89185 9.16118 1.89185 9.20703 1.9178C9.25287 1.94375 9.28133 1.99116 9.33825 2.08599L10.3274 3.73397C10.3843 3.82879 10.4128 3.87621 10.4586 3.90216C10.5045 3.92811 10.5598 3.92811 10.6704 3.92811H12.6607C12.7713 3.92811 12.8267 3.92811 12.8725 3.95408C12.9184 3.98005 12.9468 4.0275 13.0037 4.1224L13.9849 5.7586C14.045 5.85886 14.0751 5.90899 14.0751 5.96437C14.0751 6.01975 14.045 6.06987 13.9849 6.17011L13.0107 7.79377Z"
|
|
126
|
-
stroke="currentColor"
|
|
127
|
-
strokeMiterlimit={10}
|
|
128
|
-
/>
|
|
129
|
-
</Shell>
|
|
130
|
-
);
|
|
131
|
-
}
|
|
132
|
-
|
|
133
|
-
export function IconPin({ size = 16 }: IconProps) {
|
|
134
|
-
return (
|
|
135
|
-
<Shell size={size}>
|
|
136
|
-
<path
|
|
137
|
-
d="M9.96976 1.70572L13.1554 3.93629L10.9019 8.12317L11.5158 11.605L10.7192 12.7427L2.52767 7.00693L3.3243 5.86922L6.80612 5.25528L9.96976 1.70572Z"
|
|
138
|
-
fill="currentColor"
|
|
139
|
-
stroke="currentColor"
|
|
140
|
-
strokeLinejoin="round"
|
|
141
|
-
/>
|
|
142
|
-
<path
|
|
143
|
-
d="M6.05285 9.47511C6.27284 9.16094 6.70586 9.08458 7.02003 9.30457C7.3342 9.52455 7.41055 9.95757 7.19057 10.2717L3.98587 14.4708L3.21223 13.9291L6.05285 9.47511Z"
|
|
144
|
-
fill="currentColor"
|
|
145
|
-
/>
|
|
146
|
-
</Shell>
|
|
147
|
-
);
|
|
148
|
-
}
|
|
149
|
-
|
|
150
|
-
export function IconCheck({ size = 16 }: IconProps) {
|
|
151
|
-
return (
|
|
152
|
-
<Shell size={size}>
|
|
153
|
-
<path
|
|
154
|
-
d="M2.25 8.5L5.49732 11.7473C5.90519 12.1552 6.57263 12.1344 6.95426 11.7018L13.75 4"
|
|
155
|
-
stroke="currentColor"
|
|
156
|
-
/>
|
|
157
|
-
</Shell>
|
|
158
|
-
);
|
|
159
|
-
}
|
|
160
|
-
|
|
161
|
-
export function IconNewChat({ size = 14 }: IconProps) {
|
|
162
|
-
return (
|
|
163
|
-
<Shell size={size} strokeWidth={1.3}>
|
|
164
|
-
<path
|
|
165
|
-
d="M2.37091 11.2501C1.58745 9.89288 1.32067 8.29835 1.61969 6.76006C1.91872 5.22177 2.76342 3.8433 3.99826 2.87846C5.2331 1.91362 6.77494 1.42737 8.33988 1.50925C9.90482 1.59113 11.3875 2.23562 12.5149 3.32406C13.6425 4.41269 14.3387 5.87206 14.4754 7.4334C14.612 8.99474 14.18 10.5529 13.2587 11.8209C12.3375 13.0888 10.9891 13.9813 9.46194 14.3337C8.18691 14.628 6.85895 14.5294 5.64989 14.0605C5.1712 13.8748 4.76962 13.4932 4.26534 13.3967C3.67413 13.2835 2.95257 13.5598 2.03794 14.3337"
|
|
166
|
-
stroke="currentColor"
|
|
167
|
-
/>
|
|
168
|
-
<path d="M8 5V11" stroke="currentColor" />
|
|
169
|
-
<path d="M5 8H11" stroke="currentColor" />
|
|
170
|
-
</Shell>
|
|
171
|
-
);
|
|
172
|
-
}
|
|
173
|
-
|
|
174
|
-
export function IconRefresh({ size = 16 }: IconProps) {
|
|
175
|
-
return (
|
|
176
|
-
<Shell size={size}>
|
|
177
|
-
<path
|
|
178
|
-
d="M14.5001 8C14.5 9.28552 14.1188 10.5422 13.4045 11.611C12.6903 12.6799 11.6752 13.5129 10.4875 14.0049C9.29982 14.4968 7.99295 14.6255 6.73212 14.3747C5.4713 14.124 4.31314 13.505 3.4041 12.596C2.49514 11.687 1.87614 10.5288 1.62537 9.26798C1.37459 8.00716 1.50331 6.70028 1.99525 5.51261C2.48719 4.32494 3.32025 3.30981 4.3891 2.59557C5.45795 1.88134 6.71458 1.50008 8.0001 1.5C9.9001 1.5 11.7001 2.3 13.0001 3.6L14.5001 5.1"
|
|
179
|
-
stroke="currentColor"
|
|
180
|
-
/>
|
|
181
|
-
<path d="M14.4999 1.5V5.1H10.8999" stroke="currentColor" />
|
|
182
|
-
</Shell>
|
|
183
|
-
);
|
|
184
|
-
}
|
|
185
|
-
|
|
186
|
-
export function IconRightUp({ size = 14 }: IconProps) {
|
|
187
|
-
return (
|
|
188
|
-
<Shell size={size}>
|
|
189
|
-
<path
|
|
190
|
-
d="M11.7256 2.77441C12.5538 2.77469 13.2256 3.44616 13.2256 4.27441V10.1416H12.2256V4.27441C12.2256 3.99844 12.0015 3.77469 11.7256 3.77441H5.7207V2.77441H11.7256Z"
|
|
191
|
-
fill="currentColor"
|
|
192
|
-
/>
|
|
193
|
-
<path d="M2.77441 13.2255L12.3756 3.62427" stroke="currentColor" />
|
|
194
|
-
</Shell>
|
|
195
|
-
);
|
|
196
|
-
}
|
|
197
|
-
|
|
198
34
|
export function IconConversation({ size = 16 }: IconProps) {
|
|
199
35
|
return (
|
|
200
36
|
<Shell size={size} strokeWidth={1.3}>
|