@opencode/ui 2.0.28 → 2.0.30

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.
Files changed (14) hide show
  1. package/dist/data-display/badge/badge.d.ts +1 -1
  2. package/dist/i18n/en.d.ts +5 -0
  3. package/dist/icons/catalog.d.ts +4 -0
  4. package/package.json +1 -1
  5. package/src/actions/button/button.css +260 -243
  6. package/src/actions/icon-button/icon-button.css +125 -117
  7. package/src/actions/submit.css +58 -53
  8. package/src/context/dialog.tsx +3 -0
  9. package/src/data-display/badge/badge.css +5 -0
  10. package/src/data-display/badge/badge.tsx +1 -1
  11. package/src/forms/text-input/text-input.css +185 -180
  12. package/src/i18n/en.ts +5 -0
  13. package/src/icons/catalog.ts +4 -0
  14. package/src/styles/tailwind/index.css +0 -1
package/src/forms/text-input/text-input.css CHANGED
@@ -1,181 +1,186 @@
1
- [data-component="text-input-v2"] {
2
- box-sizing: border-box;
3
- display: flex;
4
- flex-direction: row;
5
- align-items: stretch;
6
- padding-block: 0;
7
- padding-inline: 0 8px;
8
- gap: 8px;
9
- width: 280px;
10
- height: 28px;
11
- border: 0;
12
- border-radius: 6px;
13
- outline: 1px solid transparent;
14
- outline-offset: 0;
15
- background:
16
- linear-gradient(180deg, var(--v2-alpha-light-6) 0%, var(--v2-alpha-light-2) 100%), var(--v2-background-bg-base);
17
- box-shadow: var(--v2-elevation-button-neutral);
18
- flex: none;
19
- align-self: stretch;
20
- transition:
21
- background 85ms ease-out,
22
- outline-color 85ms ease-out,
23
- box-shadow 85ms ease-out;
24
- }
25
-
26
- [data-component="text-input-v2"][data-appearance="large"] {
27
- height: 32px;
28
- }
29
-
30
- [data-component="text-input-v2"]:where(:hover):not([data-disabled], [data-invalid]):not(:focus-within) {
31
- background:
32
- linear-gradient(0deg, var(--v2-overlay-simple-overlay-hover), var(--v2-overlay-simple-overlay-hover)),
33
- linear-gradient(180deg, var(--v2-alpha-light-6) 0%, var(--v2-alpha-light-2) 100%), var(--v2-background-bg-base);
34
- }
35
-
36
- [data-component="text-input-v2"]:where(:focus-within):not([data-disabled], [data-invalid]) {
37
- outline-color: var(--v2-border-border-focus);
38
- box-shadow: none;
39
- }
40
-
41
- [data-component="text-input-v2"]:where([data-invalid]):not([data-disabled]) {
42
- outline-color: var(--v2-state-fg-danger);
43
- box-shadow: none;
44
- }
45
-
46
- [data-component="text-input-v2"]:where([data-disabled]) {
47
- opacity: 0.5;
48
- cursor: not-allowed;
49
- }
50
-
51
- [data-component="text-input-v2"] [data-slot="text-input-v2-value"] {
52
- display: flex;
53
- flex-direction: row;
54
- align-items: center;
55
- align-self: stretch;
56
- padding: 0;
57
- gap: 6px;
58
- min-width: 0;
59
- flex: 1 1 auto;
60
- min-height: 0;
61
- }
62
-
63
- [data-component="text-input-v2"] [data-slot="text-input-v2-leading-icon"] {
64
- display: flex;
65
- flex: none;
66
- align-items: center;
67
- justify-content: center;
68
- padding-inline-start: 8px;
69
- color: var(--v2-icon-icon-muted);
70
- }
71
-
72
- [data-component="text-input-v2"] [data-slot="text-input-v2-leading-icon"] :is(svg, [data-slot="icon-svg"]) {
73
- display: block;
74
- flex: none;
75
- }
76
-
77
- [data-component="text-input-v2"][data-leading-icon] [data-slot="text-input-v2-input"] {
78
- padding-inline-start: 0;
79
- }
80
-
81
- [data-component="text-input-v2"] [data-slot="text-input-v2-input"] {
82
- display: block;
83
- width: 100%;
84
- min-width: 0;
85
- height: 100%;
86
- padding-block: 0;
87
- padding-inline: 8px 0;
88
- margin: 0;
89
- border: 0;
90
- background: transparent;
91
- outline: none;
92
- font-style: normal;
93
- font-weight: 440;
94
- font-size: 13px;
95
- line-height: var(--line-height-compact);
96
- letter-spacing: -0.04px;
97
- color: var(--v2-text-text-base);
98
- font-variation-settings: "slnt" 0;
99
- }
100
-
101
- [data-component="text-input-v2"] [data-slot="text-input-v2-input"]::placeholder {
102
- color: var(--v2-text-text-faint);
103
- user-select: none;
104
- }
105
-
106
- [data-component="text-input-v2"] [data-slot="text-input-v2-input"][type="search"]::-webkit-search-cancel-button {
107
- -webkit-appearance: none;
108
- appearance: none;
109
- display: none;
110
- }
111
-
112
- [data-component="text-input-v2"][data-numeric] [data-slot="text-input-v2-input"] {
113
- font-variant-numeric: tabular-nums;
114
- }
115
-
116
- [data-component="text-input-v2"] [data-slot="text-input-v2-icon-button"] {
117
- display: flex;
118
- flex-direction: row;
119
- justify-content: center;
120
- align-items: center;
121
- align-self: center;
122
- flex: none;
123
- width: 20px;
124
- height: 20px;
125
- padding: 2px;
126
- gap: 3px;
127
- border: 0;
128
- border-radius: 4px;
129
- background: transparent;
130
- color: var(--v2-icon-icon-muted);
131
- cursor: pointer;
132
- outline: none;
133
- }
134
-
135
- [data-component="text-input-v2"]
136
- [data-slot="text-input-v2-icon-button"]:is(:hover, [data-state="hover"]):not(:disabled) {
137
- background-color: var(--v2-overlay-simple-overlay-hover);
138
- }
139
-
140
- [data-component="text-input-v2"]
141
- [data-slot="text-input-v2-icon-button"]:is(:active, [data-state="pressed"]):not(:disabled) {
142
- background-color: var(--v2-overlay-simple-overlay-pressed);
143
- }
144
-
145
- [data-component="text-input-v2"] [data-slot="text-input-v2-icon-button"]:focus {
146
- outline: none;
147
- }
148
-
149
- [data-component="text-input-v2"] [data-slot="text-input-v2-icon-button"]:focus-visible {
150
- outline: 2px solid var(--v2-border-border-focus);
151
- outline-offset: 1px;
152
- }
153
-
154
- [data-component="text-input-v2"]:where([data-disabled]) [data-slot="text-input-v2-icon-button"] {
155
- cursor: not-allowed;
156
- pointer-events: none;
157
- }
158
-
159
- [data-component="text-input-v2"] [data-slot="text-input-v2-icon-button"] [data-slot="icon-svg"] {
160
- display: block;
161
- flex: none;
162
- color: currentColor;
163
- }
164
-
165
- [data-component="text-input-v2"] [data-slot="text-input-v2-icon-button"][data-variant="clear"] {
166
- width: 28px;
167
- height: 28px;
168
- padding: 0;
169
- border-radius: 6px;
170
- margin-inline-end: -8px;
171
- }
172
-
173
- [data-component="text-input-v2"][data-invalid]:not([data-disabled]) [data-slot="text-input-v2-input"] {
174
- color: var(--v2-state-fg-danger);
175
- caret-color: var(--v2-state-fg-danger);
176
- }
177
-
178
- [data-component="text-input-v2"][data-invalid]:not([data-disabled]) [data-slot="text-input-v2-input"]::placeholder {
179
- color: var(--v2-state-fg-danger);
180
- opacity: 1;
1
+ /* Vite can link this before the app entry CSS, so name every layer here or `components` ranks below Tailwind's base reset. */
2
+ @layer properties, theme, base, components, utilities;
3
+
4
+ @layer components {
5
+ [data-component="text-input-v2"] {
6
+ box-sizing: border-box;
7
+ display: flex;
8
+ flex-direction: row;
9
+ align-items: stretch;
10
+ padding-block: 0;
11
+ padding-inline: 0 8px;
12
+ gap: 8px;
13
+ width: 280px;
14
+ height: 28px;
15
+ border: 0;
16
+ border-radius: 6px;
17
+ outline: 1px solid transparent;
18
+ outline-offset: 0;
19
+ background:
20
+ linear-gradient(180deg, var(--v2-alpha-light-6) 0%, var(--v2-alpha-light-2) 100%), var(--v2-background-bg-base);
21
+ box-shadow: var(--v2-elevation-button-neutral);
22
+ flex: none;
23
+ align-self: stretch;
24
+ transition:
25
+ background 85ms ease-out,
26
+ outline-color 85ms ease-out,
27
+ box-shadow 85ms ease-out;
28
+ }
29
+
30
+ [data-component="text-input-v2"][data-appearance="large"] {
31
+ height: 32px;
32
+ }
33
+
34
+ [data-component="text-input-v2"]:where(:hover):not([data-disabled], [data-invalid]):not(:focus-within) {
35
+ background:
36
+ linear-gradient(0deg, var(--v2-overlay-simple-overlay-hover), var(--v2-overlay-simple-overlay-hover)),
37
+ linear-gradient(180deg, var(--v2-alpha-light-6) 0%, var(--v2-alpha-light-2) 100%), var(--v2-background-bg-base);
38
+ }
39
+
40
+ [data-component="text-input-v2"]:where(:focus-within):not([data-disabled], [data-invalid]) {
41
+ outline-color: var(--v2-border-border-focus);
42
+ box-shadow: none;
43
+ }
44
+
45
+ [data-component="text-input-v2"]:where([data-invalid]):not([data-disabled]) {
46
+ outline-color: var(--v2-state-fg-danger);
47
+ box-shadow: none;
48
+ }
49
+
50
+ [data-component="text-input-v2"]:where([data-disabled]) {
51
+ opacity: 0.5;
52
+ cursor: not-allowed;
53
+ }
54
+
55
+ [data-component="text-input-v2"] [data-slot="text-input-v2-value"] {
56
+ display: flex;
57
+ flex-direction: row;
58
+ align-items: center;
59
+ align-self: stretch;
60
+ padding: 0;
61
+ gap: 6px;
62
+ min-width: 0;
63
+ flex: 1 1 auto;
64
+ min-height: 0;
65
+ }
66
+
67
+ [data-component="text-input-v2"] [data-slot="text-input-v2-leading-icon"] {
68
+ display: flex;
69
+ flex: none;
70
+ align-items: center;
71
+ justify-content: center;
72
+ padding-inline-start: 8px;
73
+ color: var(--v2-icon-icon-muted);
74
+ }
75
+
76
+ [data-component="text-input-v2"] [data-slot="text-input-v2-leading-icon"] :is(svg, [data-slot="icon-svg"]) {
77
+ display: block;
78
+ flex: none;
79
+ }
80
+
81
+ [data-component="text-input-v2"][data-leading-icon] [data-slot="text-input-v2-input"] {
82
+ padding-inline-start: 0;
83
+ }
84
+
85
+ [data-component="text-input-v2"] [data-slot="text-input-v2-input"] {
86
+ display: block;
87
+ width: 100%;
88
+ min-width: 0;
89
+ height: 100%;
90
+ padding-block: 0;
91
+ padding-inline: 8px 0;
92
+ margin: 0;
93
+ border: 0;
94
+ background: transparent;
95
+ outline: none;
96
+ font-style: normal;
97
+ font-weight: 440;
98
+ font-size: 13px;
99
+ line-height: var(--line-height-compact);
100
+ letter-spacing: -0.04px;
101
+ color: var(--v2-text-text-base);
102
+ font-variation-settings: "slnt" 0;
103
+ }
104
+
105
+ [data-component="text-input-v2"] [data-slot="text-input-v2-input"]::placeholder {
106
+ color: var(--v2-text-text-faint);
107
+ user-select: none;
108
+ }
109
+
110
+ [data-component="text-input-v2"] [data-slot="text-input-v2-input"][type="search"]::-webkit-search-cancel-button {
111
+ -webkit-appearance: none;
112
+ appearance: none;
113
+ display: none;
114
+ }
115
+
116
+ [data-component="text-input-v2"][data-numeric] [data-slot="text-input-v2-input"] {
117
+ font-variant-numeric: tabular-nums;
118
+ }
119
+
120
+ [data-component="text-input-v2"] [data-slot="text-input-v2-icon-button"] {
121
+ display: flex;
122
+ flex-direction: row;
123
+ justify-content: center;
124
+ align-items: center;
125
+ align-self: center;
126
+ flex: none;
127
+ width: 20px;
128
+ height: 20px;
129
+ padding: 2px;
130
+ gap: 3px;
131
+ border: 0;
132
+ border-radius: 4px;
133
+ background: transparent;
134
+ color: var(--v2-icon-icon-muted);
135
+ cursor: pointer;
136
+ outline: none;
137
+ }
138
+
139
+ [data-component="text-input-v2"]
140
+ [data-slot="text-input-v2-icon-button"]:is(:hover, [data-state="hover"]):not(:disabled) {
141
+ background-color: var(--v2-overlay-simple-overlay-hover);
142
+ }
143
+
144
+ [data-component="text-input-v2"]
145
+ [data-slot="text-input-v2-icon-button"]:is(:active, [data-state="pressed"]):not(:disabled) {
146
+ background-color: var(--v2-overlay-simple-overlay-pressed);
147
+ }
148
+
149
+ [data-component="text-input-v2"] [data-slot="text-input-v2-icon-button"]:focus {
150
+ outline: none;
151
+ }
152
+
153
+ [data-component="text-input-v2"] [data-slot="text-input-v2-icon-button"]:focus-visible {
154
+ outline: 2px solid var(--v2-border-border-focus);
155
+ outline-offset: 1px;
156
+ }
157
+
158
+ [data-component="text-input-v2"]:where([data-disabled]) [data-slot="text-input-v2-icon-button"] {
159
+ cursor: not-allowed;
160
+ pointer-events: none;
161
+ }
162
+
163
+ [data-component="text-input-v2"] [data-slot="text-input-v2-icon-button"] [data-slot="icon-svg"] {
164
+ display: block;
165
+ flex: none;
166
+ color: currentColor;
167
+ }
168
+
169
+ [data-component="text-input-v2"] [data-slot="text-input-v2-icon-button"][data-variant="clear"] {
170
+ width: 28px;
171
+ height: 28px;
172
+ padding: 0;
173
+ border-radius: 6px;
174
+ margin-inline-end: -8px;
175
+ }
176
+
177
+ [data-component="text-input-v2"][data-invalid]:not([data-disabled]) [data-slot="text-input-v2-input"] {
178
+ color: var(--v2-state-fg-danger);
179
+ caret-color: var(--v2-state-fg-danger);
180
+ }
181
+
182
+ [data-component="text-input-v2"][data-invalid]:not([data-disabled]) [data-slot="text-input-v2-input"]::placeholder {
183
+ color: var(--v2-state-fg-danger);
184
+ opacity: 1;
185
+ }
181
186
  }
package/src/i18n/en.ts CHANGED
@@ -241,10 +241,12 @@ const source = {
241
241
  "ui.message.collapse": "Collapse message",
242
242
  "ui.message.copy": "Copy",
243
243
  "ui.message.copyMessage": "Copy message",
244
+ "ui.message.copyFullMessage": "Copy full message",
244
245
  "ui.message.forkMessage": "Fork to new session",
245
246
  "ui.message.revertMessage": "Revert message",
246
247
  "ui.message.moveToQueue": "Move to queue",
247
248
  "ui.message.pending": "Pending",
249
+ "ui.message.voice": "Voice",
248
250
  "ui.message.deletePending": "Delete",
249
251
  "ui.message.copyResponse": "Copy response",
250
252
  "ui.message.copied": "Copied",
@@ -255,6 +257,8 @@ const source = {
255
257
  "ui.message.modelVariant": "{{model}} ({{variant}})",
256
258
  "ui.sessionTimeline.notice.model": "Model",
257
259
  "ui.sessionTimeline.notice.modelSwitched": "Switched to {{model}}",
260
+ "ui.sessionTimeline.notice.variantSwitched": "Switched variant to {{variant}}",
261
+ "ui.sessionTimeline.notice.variantDefault": "Switched variant to Default",
258
262
  "ui.sessionTimeline.notice.agentChanged": "Agent changed",
259
263
  "ui.sessionTimeline.notice.movedTo": "Moved to",
260
264
  "ui.sessionTimeline.notice.movedTooltip": "Session working directory changed",
@@ -277,6 +281,7 @@ const source = {
277
281
  "ui.question.multiHint": "Select all answers that apply",
278
282
  "ui.question.singleHint": "Select one answer",
279
283
  "ui.question.custom.placeholder": "Type your answer…",
284
+ "ui.question.custom.answerPlaceholder": "Type your own answer…",
280
285
  } satisfies Record<string, string>
281
286
 
282
287
  export type Key = keyof typeof source
package/src/icons/catalog.ts CHANGED
@@ -266,6 +266,10 @@ const icons = {
266
266
  viewBox: "0 0 16 16",
267
267
  body: `<path d="M5.37624 6.75194C5.18184 6.41861 5.42224 6 5.80814 6H10.1921C10.578 6 10.8184 6.41861 10.624 6.75194L8.43203 10.5096C8.23909 10.8404 7.76119 10.8404 7.56825 10.5096L5.37624 6.75194Z" fill="currentColor"/>`,
268
268
  },
269
+ waveform: {
270
+ viewBox: "0 0 16 16",
271
+ body: `<path d="M2 7V9M4.5 5V11M7 2.5V13.5M9.5 4.5V11.5M12 6V10M14.5 7.25V8.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>`,
272
+ },
269
273
  archive: {
270
274
  viewBox: "0 0 16 16",
271
275
  body: `<path d="M13.1112 13.5555V14.0555H13.6112V13.5555H13.1112ZM2.889 13.5555H2.389L2.389 14.0555H2.889V13.5555ZM3.38901 5.55546L3.38901 5.05546L2.38901 5.05546L2.38901 5.55546L2.88901 5.55546L3.38901 5.55546ZM14.4446 2.44434H14.9446V1.94434L14.4446 1.94434L14.4446 2.44434ZM14.4446 5.55545L14.4446 6.05545L14.9446 6.05545V5.55545H14.4446ZM1.55566 5.55546L1.05566 5.55545L1.05566 6.05546L1.55566 6.05546L1.55566 5.55546ZM1.5557 2.44436L1.5557 1.94436L1.05571 1.94436L1.0557 2.44435L1.5557 2.44436ZM13.1112 5.55546H12.6112V13.5555H13.1112H13.6112V5.55546H13.1112ZM2.889 13.5555H3.389L3.38901 5.55546L2.88901 5.55546L2.38901 5.55546L2.389 13.5555H2.889ZM14.4446 2.44434H13.9446V5.55545H14.4446H14.9446V2.44434H14.4446ZM1.55566 5.55546L2.05566 5.55547L2.0557 2.44436L1.5557 2.44436L1.0557 2.44435L1.05566 5.55545L1.55566 5.55546ZM6.22234 8.22213V8.72213H9.7779V8.22213V7.72213H6.22234V8.22213ZM13.1112 13.5555V13.0555H2.889V13.5555V14.0555H13.1112V13.5555ZM1.5557 2.44436L1.5557 2.94436L14.4446 2.94434L14.4446 2.44434L14.4446 1.94434L1.5557 1.94436L1.5557 2.44436ZM14.4446 5.55545L14.4446 5.05545L1.55566 5.05546L1.55566 5.55546L1.55566 6.05546L14.4446 6.05545L14.4446 5.55545Z" fill="currentColor"/>`,
package/src/styles/tailwind/index.css CHANGED
@@ -8,7 +8,6 @@
8
8
  @source not "../../../../app/src/**/*.test.{ts,tsx}";
9
9
  @source "../../../../desktop/src/renderer";
10
10
  @source not "../../../../desktop/src/renderer/**/*.test.{ts,tsx}";
11
- @source "../../../../enterprise/src";
12
11
  @source "../../../../session-ui/src";
13
12
  @source "../../../../gui-extensions/src";
14
13
  @source not "../../../../session-ui/src/**/*.test.{ts,tsx}";