@jonsoc/console-app 1.1.34 → 1.1.46

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 (83) hide show
  1. package/package.json +5 -1
  2. package/public/robots.txt +5 -5
  3. package/script/generate-sitemap.ts +0 -0
  4. package/src/app.css +1 -1
  5. package/src/asset/brand/opencode-logo-dark.svg +16 -16
  6. package/src/asset/brand/opencode-logo-light.svg +16 -16
  7. package/src/asset/brand/opencode-wordmark-dark.svg +30 -30
  8. package/src/asset/brand/opencode-wordmark-light.svg +30 -30
  9. package/src/asset/brand/opencode-wordmark-simple-dark.svg +22 -22
  10. package/src/asset/brand/opencode-wordmark-simple-light.svg +22 -22
  11. package/src/asset/lander/brand-assets-dark.svg +10 -10
  12. package/src/asset/lander/brand-assets-light.svg +10 -10
  13. package/src/asset/lander/check.svg +3 -3
  14. package/src/asset/lander/copy.svg +3 -3
  15. package/src/asset/lander/logo-dark.svg +11 -11
  16. package/src/asset/lander/logo-light.svg +11 -11
  17. package/src/asset/lander/opencode-logo-dark.svg +11 -11
  18. package/src/asset/lander/opencode-logo-light.svg +11 -11
  19. package/src/asset/lander/opencode-wordmark-dark.svg +25 -25
  20. package/src/asset/lander/opencode-wordmark-light.svg +25 -25
  21. package/src/asset/lander/wordmark-dark.svg +3 -3
  22. package/src/asset/lander/wordmark-light.svg +3 -3
  23. package/src/asset/logo-ornate-dark.svg +18 -18
  24. package/src/asset/logo-ornate-light.svg +18 -18
  25. package/src/asset/logo.svg +18 -18
  26. package/src/asset/zen-ornate-dark.svg +8 -8
  27. package/src/asset/zen-ornate-light.svg +8 -8
  28. package/src/component/dropdown.css +80 -80
  29. package/src/component/header-context-menu.css +63 -63
  30. package/src/component/modal.css +66 -66
  31. package/src/component/spotlight.css +15 -15
  32. package/src/routes/[...404].css +130 -130
  33. package/src/routes/black/workspace.css +214 -214
  34. package/src/routes/black.css +828 -828
  35. package/src/routes/brand/index.css +555 -555
  36. package/src/routes/changelog/index.css +477 -477
  37. package/src/routes/download/index.css +750 -750
  38. package/src/routes/enterprise/index.css +578 -578
  39. package/src/routes/index.css +1251 -1251
  40. package/src/routes/legal/privacy-policy/index.css +343 -343
  41. package/src/routes/legal/terms-of-service/index.css +254 -254
  42. package/src/routes/user-menu.css +18 -18
  43. package/src/routes/workspace/[id]/billing/billing-section.module.css +185 -185
  44. package/src/routes/workspace/[id]/billing/black-section.module.css +142 -142
  45. package/src/routes/workspace/[id]/billing/black-waitlist-section.module.css +23 -23
  46. package/src/routes/workspace/[id]/billing/monthly-limit-section.module.css +96 -96
  47. package/src/routes/workspace/[id]/billing/payment-section.module.css +93 -93
  48. package/src/routes/workspace/[id]/billing/reload-section.module.css +261 -261
  49. package/src/routes/workspace/[id]/graph-section.module.css +145 -145
  50. package/src/routes/workspace/[id]/keys/key-section.module.css +197 -197
  51. package/src/routes/workspace/[id]/members/member-section.module.css +249 -249
  52. package/src/routes/workspace/[id]/members/role-dropdown.css +72 -72
  53. package/src/routes/workspace/[id]/model-section.module.css +173 -173
  54. package/src/routes/workspace/[id]/new-user-section.module.css +143 -143
  55. package/src/routes/workspace/[id]/provider-section.module.css +138 -138
  56. package/src/routes/workspace/[id]/settings/settings-section.module.css +94 -94
  57. package/src/routes/workspace/[id]/usage-section.module.css +185 -185
  58. package/src/routes/workspace/[id].css +308 -308
  59. package/src/routes/workspace-picker.css +74 -74
  60. package/src/routes/workspace.css +107 -107
  61. package/src/routes/zen/index.css +866 -866
  62. package/src/style/base.css +21 -21
  63. package/src/style/component/button.css +102 -102
  64. package/src/style/index.css +8 -8
  65. package/src/style/reset.css +76 -76
  66. package/src/style/token/color.css +91 -91
  67. package/src/style/token/font.css +21 -21
  68. package/src/style/token/space.css +46 -46
  69. package/public/apple-touch-icon-v3.png +0 -1
  70. package/public/apple-touch-icon.png +0 -1
  71. package/public/email +0 -1
  72. package/public/favicon-96x96-v3.png +0 -1
  73. package/public/favicon-96x96.png +0 -1
  74. package/public/favicon-v3.ico +0 -1
  75. package/public/favicon-v3.svg +0 -1
  76. package/public/favicon.ico +0 -1
  77. package/public/favicon.svg +0 -1
  78. package/public/site.webmanifest +0 -1
  79. package/public/social-share-black.png +0 -1
  80. package/public/social-share-zen.png +0 -1
  81. package/public/social-share.png +0 -1
  82. package/public/web-app-manifest-192x192.png +0 -1
  83. package/public/web-app-manifest-512x512.png +0 -1
@@ -1,249 +1,249 @@
1
- .root {
2
- [data-slot="title-row"] {
3
- display: flex;
4
- justify-content: space-between;
5
- align-items: center;
6
- gap: var(--space-4);
7
- }
8
-
9
- [data-component="empty-state"] {
10
- padding: var(--space-20) var(--space-6);
11
- text-align: center;
12
- border: 1px dashed var(--color-border);
13
- border-radius: var(--border-radius-sm);
14
- display: flex;
15
- flex-direction: column;
16
- gap: var(--space-2);
17
-
18
- p {
19
- line-height: 1.5;
20
- font-size: var(--font-size-sm);
21
- color: var(--color-text-muted);
22
- }
23
- }
24
-
25
- [data-slot="beta-notice"] {
26
- padding: var(--space-3) var(--space-4);
27
- border: 1px solid var(--color-border);
28
- border-radius: var(--border-radius-sm);
29
- background-color: var(--color-bg-surface);
30
- font-size: var(--font-size-sm);
31
- color: var(--color-text-secondary);
32
- line-height: 1.5;
33
- margin-bottom: var(--space-3);
34
-
35
- a {
36
- color: var(--color-accent);
37
- text-decoration: none;
38
- }
39
- }
40
-
41
- [data-slot="create-form"] {
42
- display: flex;
43
- flex-direction: column;
44
- gap: var(--space-3);
45
- padding: var(--space-4);
46
- border: 1px solid var(--color-border);
47
- border-radius: var(--border-radius-sm);
48
-
49
- [data-slot="input-row"] {
50
- display: flex;
51
- flex-direction: row;
52
- gap: var(--space-3);
53
-
54
- @media (max-width: 40rem) {
55
- flex-direction: column;
56
- gap: var(--space-2);
57
- }
58
- }
59
-
60
- [data-slot="input-field"] {
61
- display: flex;
62
- flex-direction: column;
63
- gap: var(--space-1);
64
- flex: 1;
65
-
66
- p {
67
- line-height: 1.2;
68
- margin: 0;
69
- color: var(--color-text-muted);
70
- font-size: var(--font-size-sm);
71
- }
72
-
73
- input {
74
- flex: 1;
75
- padding: var(--space-2) var(--space-3);
76
- border: 1px solid var(--color-border);
77
- border-radius: var(--border-radius-sm);
78
- background-color: var(--color-bg);
79
- color: var(--color-text);
80
- font-size: var(--font-size-sm);
81
- line-height: 1.5;
82
- min-width: 0;
83
-
84
- &:focus {
85
- outline: none;
86
- border-color: var(--color-accent);
87
- box-shadow: 0 0 0 3px var(--color-accent-alpha);
88
- }
89
-
90
- &::placeholder {
91
- color: var(--color-text-disabled);
92
- }
93
- }
94
- }
95
-
96
- [data-slot="form-actions"] {
97
- display: flex;
98
- gap: var(--space-2);
99
-
100
- > button[type="reset"] {
101
- align-self: flex-start;
102
- }
103
- }
104
-
105
- [data-slot="form-error"] {
106
- color: var(--color-danger);
107
- font-size: var(--font-size-sm);
108
- line-height: 1.4;
109
- margin-top: calc(var(--space-1) * -1);
110
- }
111
- }
112
-
113
- [data-slot="members-table"] {
114
- overflow-x: auto;
115
- padding-bottom: 200px;
116
- margin-bottom: -200px;
117
- }
118
-
119
- [data-slot="members-table-element"] {
120
- width: 100%;
121
- border-collapse: collapse;
122
- font-size: var(--font-size-sm);
123
-
124
- thead {
125
- border-bottom: 1px solid var(--color-border);
126
- }
127
-
128
- th {
129
- padding: var(--space-3) var(--space-4);
130
- text-align: left;
131
- font-weight: normal;
132
- color: var(--color-text-muted);
133
- text-transform: uppercase;
134
-
135
- &:nth-child(2) {
136
- width: 180px;
137
- }
138
-
139
- &:nth-child(3) {
140
- width: 200px;
141
- }
142
- }
143
-
144
- td {
145
- padding: var(--space-3) var(--space-4);
146
- border-bottom: 1px solid var(--color-border-muted);
147
- color: var(--color-text-muted);
148
- font-family: var(--font-mono);
149
-
150
- &[data-slot="member-email"] {
151
- color: var(--color-text);
152
- font-family: var(--font-sans);
153
- font-weight: 500;
154
- }
155
-
156
- &[data-slot="member-role"] {
157
- font-family: var(--font-mono);
158
- text-transform: capitalize;
159
- }
160
-
161
- &[data-slot="member-usage"] {
162
- input {
163
- width: 100%;
164
- padding: var(--space-2) var(--space-3);
165
- border: 1px solid var(--color-border);
166
- border-radius: var(--border-radius-sm);
167
- background-color: var(--color-bg);
168
- color: var(--color-text);
169
- font-size: var(--font-size-sm);
170
- line-height: 1.5;
171
- font-family: var(--font-mono);
172
-
173
- &:focus {
174
- outline: none;
175
- border-color: var(--color-accent);
176
- box-shadow: 0 0 0 3px var(--color-accent-alpha);
177
- }
178
-
179
- &::placeholder {
180
- color: var(--color-text-disabled);
181
- }
182
- }
183
- }
184
-
185
- &[data-slot="member-date"] {
186
- color: var(--color-text);
187
- }
188
-
189
- &[data-slot="member-actions"] {
190
- font-family: var(--font-sans);
191
- display: flex;
192
- gap: var(--space-2);
193
-
194
- [data-slot="inline-edit-form"] {
195
- display: flex;
196
- gap: var(--space-2);
197
-
198
- button {
199
- opacity: 1;
200
- pointer-events: auto;
201
- }
202
- }
203
-
204
- form:not([data-slot="inline-edit-form"]) button {
205
- opacity: 0;
206
- pointer-events: none;
207
- transition: opacity 0.15s ease;
208
- }
209
- }
210
- }
211
-
212
- tbody tr {
213
- &:hover {
214
- [data-slot="member-actions"] form:not([data-slot="inline-edit-form"]) button {
215
- opacity: 1;
216
- pointer-events: auto;
217
- }
218
- }
219
-
220
- &:last-child td {
221
- border-bottom: none;
222
- }
223
- }
224
-
225
- @media (max-width: 40rem) {
226
- th,
227
- td {
228
- padding: var(--space-2) var(--space-3);
229
- font-size: var(--font-size-xs);
230
- }
231
-
232
- th {
233
- &:nth-child(3)
234
-
235
- /* Date */ {
236
- display: none;
237
- }
238
- }
239
-
240
- td {
241
- &:nth-child(3)
242
-
243
- /* Date */ {
244
- display: none;
245
- }
246
- }
247
- }
248
- }
249
- }
1
+ .root {
2
+ [data-slot="title-row"] {
3
+ display: flex;
4
+ justify-content: space-between;
5
+ align-items: center;
6
+ gap: var(--space-4);
7
+ }
8
+
9
+ [data-component="empty-state"] {
10
+ padding: var(--space-20) var(--space-6);
11
+ text-align: center;
12
+ border: 1px dashed var(--color-border);
13
+ border-radius: var(--border-radius-sm);
14
+ display: flex;
15
+ flex-direction: column;
16
+ gap: var(--space-2);
17
+
18
+ p {
19
+ line-height: 1.5;
20
+ font-size: var(--font-size-sm);
21
+ color: var(--color-text-muted);
22
+ }
23
+ }
24
+
25
+ [data-slot="beta-notice"] {
26
+ padding: var(--space-3) var(--space-4);
27
+ border: 1px solid var(--color-border);
28
+ border-radius: var(--border-radius-sm);
29
+ background-color: var(--color-bg-surface);
30
+ font-size: var(--font-size-sm);
31
+ color: var(--color-text-secondary);
32
+ line-height: 1.5;
33
+ margin-bottom: var(--space-3);
34
+
35
+ a {
36
+ color: var(--color-accent);
37
+ text-decoration: none;
38
+ }
39
+ }
40
+
41
+ [data-slot="create-form"] {
42
+ display: flex;
43
+ flex-direction: column;
44
+ gap: var(--space-3);
45
+ padding: var(--space-4);
46
+ border: 1px solid var(--color-border);
47
+ border-radius: var(--border-radius-sm);
48
+
49
+ [data-slot="input-row"] {
50
+ display: flex;
51
+ flex-direction: row;
52
+ gap: var(--space-3);
53
+
54
+ @media (max-width: 40rem) {
55
+ flex-direction: column;
56
+ gap: var(--space-2);
57
+ }
58
+ }
59
+
60
+ [data-slot="input-field"] {
61
+ display: flex;
62
+ flex-direction: column;
63
+ gap: var(--space-1);
64
+ flex: 1;
65
+
66
+ p {
67
+ line-height: 1.2;
68
+ margin: 0;
69
+ color: var(--color-text-muted);
70
+ font-size: var(--font-size-sm);
71
+ }
72
+
73
+ input {
74
+ flex: 1;
75
+ padding: var(--space-2) var(--space-3);
76
+ border: 1px solid var(--color-border);
77
+ border-radius: var(--border-radius-sm);
78
+ background-color: var(--color-bg);
79
+ color: var(--color-text);
80
+ font-size: var(--font-size-sm);
81
+ line-height: 1.5;
82
+ min-width: 0;
83
+
84
+ &:focus {
85
+ outline: none;
86
+ border-color: var(--color-accent);
87
+ box-shadow: 0 0 0 3px var(--color-accent-alpha);
88
+ }
89
+
90
+ &::placeholder {
91
+ color: var(--color-text-disabled);
92
+ }
93
+ }
94
+ }
95
+
96
+ [data-slot="form-actions"] {
97
+ display: flex;
98
+ gap: var(--space-2);
99
+
100
+ > button[type="reset"] {
101
+ align-self: flex-start;
102
+ }
103
+ }
104
+
105
+ [data-slot="form-error"] {
106
+ color: var(--color-danger);
107
+ font-size: var(--font-size-sm);
108
+ line-height: 1.4;
109
+ margin-top: calc(var(--space-1) * -1);
110
+ }
111
+ }
112
+
113
+ [data-slot="members-table"] {
114
+ overflow-x: auto;
115
+ padding-bottom: 200px;
116
+ margin-bottom: -200px;
117
+ }
118
+
119
+ [data-slot="members-table-element"] {
120
+ width: 100%;
121
+ border-collapse: collapse;
122
+ font-size: var(--font-size-sm);
123
+
124
+ thead {
125
+ border-bottom: 1px solid var(--color-border);
126
+ }
127
+
128
+ th {
129
+ padding: var(--space-3) var(--space-4);
130
+ text-align: left;
131
+ font-weight: normal;
132
+ color: var(--color-text-muted);
133
+ text-transform: uppercase;
134
+
135
+ &:nth-child(2) {
136
+ width: 180px;
137
+ }
138
+
139
+ &:nth-child(3) {
140
+ width: 200px;
141
+ }
142
+ }
143
+
144
+ td {
145
+ padding: var(--space-3) var(--space-4);
146
+ border-bottom: 1px solid var(--color-border-muted);
147
+ color: var(--color-text-muted);
148
+ font-family: var(--font-mono);
149
+
150
+ &[data-slot="member-email"] {
151
+ color: var(--color-text);
152
+ font-family: var(--font-sans);
153
+ font-weight: 500;
154
+ }
155
+
156
+ &[data-slot="member-role"] {
157
+ font-family: var(--font-mono);
158
+ text-transform: capitalize;
159
+ }
160
+
161
+ &[data-slot="member-usage"] {
162
+ input {
163
+ width: 100%;
164
+ padding: var(--space-2) var(--space-3);
165
+ border: 1px solid var(--color-border);
166
+ border-radius: var(--border-radius-sm);
167
+ background-color: var(--color-bg);
168
+ color: var(--color-text);
169
+ font-size: var(--font-size-sm);
170
+ line-height: 1.5;
171
+ font-family: var(--font-mono);
172
+
173
+ &:focus {
174
+ outline: none;
175
+ border-color: var(--color-accent);
176
+ box-shadow: 0 0 0 3px var(--color-accent-alpha);
177
+ }
178
+
179
+ &::placeholder {
180
+ color: var(--color-text-disabled);
181
+ }
182
+ }
183
+ }
184
+
185
+ &[data-slot="member-date"] {
186
+ color: var(--color-text);
187
+ }
188
+
189
+ &[data-slot="member-actions"] {
190
+ font-family: var(--font-sans);
191
+ display: flex;
192
+ gap: var(--space-2);
193
+
194
+ [data-slot="inline-edit-form"] {
195
+ display: flex;
196
+ gap: var(--space-2);
197
+
198
+ button {
199
+ opacity: 1;
200
+ pointer-events: auto;
201
+ }
202
+ }
203
+
204
+ form:not([data-slot="inline-edit-form"]) button {
205
+ opacity: 0;
206
+ pointer-events: none;
207
+ transition: opacity 0.15s ease;
208
+ }
209
+ }
210
+ }
211
+
212
+ tbody tr {
213
+ &:hover {
214
+ [data-slot="member-actions"] form:not([data-slot="inline-edit-form"]) button {
215
+ opacity: 1;
216
+ pointer-events: auto;
217
+ }
218
+ }
219
+
220
+ &:last-child td {
221
+ border-bottom: none;
222
+ }
223
+ }
224
+
225
+ @media (max-width: 40rem) {
226
+ th,
227
+ td {
228
+ padding: var(--space-2) var(--space-3);
229
+ font-size: var(--font-size-xs);
230
+ }
231
+
232
+ th {
233
+ &:nth-child(3)
234
+
235
+ /* Date */ {
236
+ display: none;
237
+ }
238
+ }
239
+
240
+ td {
241
+ &:nth-child(3)
242
+
243
+ /* Date */ {
244
+ display: none;
245
+ }
246
+ }
247
+ }
248
+ }
249
+ }
@@ -1,72 +1,72 @@
1
- .role-dropdown {
2
- [data-slot="trigger"] {
3
- border: 1px solid var(--color-border);
4
- background-color: var(--color-bg);
5
- width: 100%;
6
- text-transform: capitalize;
7
- padding: var(--space-2) var(--space-3);
8
- border-radius: var(--border-radius-sm);
9
- color: var(--color-text);
10
- font-size: var(--font-size-sm);
11
- line-height: 1.5;
12
- min-width: 0;
13
-
14
- &:hover {
15
- border-color: var(--color-accent);
16
- background-color: var(--color-bg);
17
- }
18
-
19
- &:focus {
20
- outline: none;
21
- border-color: var(--color-accent);
22
- box-shadow: 0 0 0 3px var(--color-accent-alpha);
23
- }
24
- }
25
-
26
- [data-slot="chevron"] {
27
- opacity: 0.6;
28
- }
29
-
30
- [data-slot="dropdown"] {
31
- padding: var(--space-1);
32
- min-width: 280px;
33
- width: max-content;
34
- }
35
-
36
- [data-slot="role-item"] {
37
- display: block;
38
- width: 100%;
39
- padding: var(--space-2) var(--space-3);
40
- border: none;
41
- background-color: transparent;
42
- color: var(--color-text);
43
- font-size: var(--font-size-sm);
44
- text-align: left;
45
- cursor: pointer;
46
- border-radius: var(--border-radius-sm);
47
- transition: background-color 0.15s ease;
48
-
49
- &:hover {
50
- background-color: var(--color-bg-surface);
51
- }
52
-
53
- &[data-selected="true"] {
54
- background-color: var(--color-accent-alpha);
55
- }
56
-
57
- div {
58
- strong {
59
- display: block;
60
- color: var(--color-text);
61
- margin-bottom: var(--space-1);
62
- text-transform: capitalize;
63
- }
64
-
65
- p {
66
- font-size: var(--font-size-xs);
67
- color: var(--color-text-muted);
68
- margin: 0;
69
- }
70
- }
71
- }
72
- }
1
+ .role-dropdown {
2
+ [data-slot="trigger"] {
3
+ border: 1px solid var(--color-border);
4
+ background-color: var(--color-bg);
5
+ width: 100%;
6
+ text-transform: capitalize;
7
+ padding: var(--space-2) var(--space-3);
8
+ border-radius: var(--border-radius-sm);
9
+ color: var(--color-text);
10
+ font-size: var(--font-size-sm);
11
+ line-height: 1.5;
12
+ min-width: 0;
13
+
14
+ &:hover {
15
+ border-color: var(--color-accent);
16
+ background-color: var(--color-bg);
17
+ }
18
+
19
+ &:focus {
20
+ outline: none;
21
+ border-color: var(--color-accent);
22
+ box-shadow: 0 0 0 3px var(--color-accent-alpha);
23
+ }
24
+ }
25
+
26
+ [data-slot="chevron"] {
27
+ opacity: 0.6;
28
+ }
29
+
30
+ [data-slot="dropdown"] {
31
+ padding: var(--space-1);
32
+ min-width: 280px;
33
+ width: max-content;
34
+ }
35
+
36
+ [data-slot="role-item"] {
37
+ display: block;
38
+ width: 100%;
39
+ padding: var(--space-2) var(--space-3);
40
+ border: none;
41
+ background-color: transparent;
42
+ color: var(--color-text);
43
+ font-size: var(--font-size-sm);
44
+ text-align: left;
45
+ cursor: pointer;
46
+ border-radius: var(--border-radius-sm);
47
+ transition: background-color 0.15s ease;
48
+
49
+ &:hover {
50
+ background-color: var(--color-bg-surface);
51
+ }
52
+
53
+ &[data-selected="true"] {
54
+ background-color: var(--color-accent-alpha);
55
+ }
56
+
57
+ div {
58
+ strong {
59
+ display: block;
60
+ color: var(--color-text);
61
+ margin-bottom: var(--space-1);
62
+ text-transform: capitalize;
63
+ }
64
+
65
+ p {
66
+ font-size: var(--font-size-xs);
67
+ color: var(--color-text-muted);
68
+ margin: 0;
69
+ }
70
+ }
71
+ }
72
+ }