@vivix-labs/studio-asset-list 0.0.0-stage → 1.0.0-beta

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.
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2026 VIVIX
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
@@ -0,0 +1,7 @@
1
+ <svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <g id="16*16/assets">
3
+ <path id="Vector" d="M2.5 2.5H17.5C17.9602 2.5 18.3333 2.8731 18.3333 3.33333V5.83333C18.3333 6.29357 17.9602 6.66667 17.5 6.66667H2.5C2.03976 6.66667 1.66667 6.29357 1.66667 5.83333V3.33333C1.66667 2.8731 2.03976 2.5 2.5 2.5Z" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke="#1C1C1C"/>
4
+ <path id="Vector_2" d="M3.33333 6.66667V15.8333C3.33333 16.2754 3.50893 16.6993 3.82149 17.0118C4.13405 17.3244 4.55797 17.5 5 17.5H15C15.442 17.5 15.866 17.3244 16.1785 17.0118C16.4911 16.6993 16.6667 16.2754 16.6667 15.8333V6.66667" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke="#1C1C1C"/>
5
+ <path id="Vector_3" d="M8.33333 10H11.6667" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke="#1C1C1C"/>
6
+ </g>
7
+ </svg>
@@ -0,0 +1,5 @@
1
+ <svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <g id="16*16/home">
3
+ <path id="Union" d="M9.99927 0.916097C10.5702 0.916097 11.1227 1.11891 11.5588 1.48739L11.5627 1.49032L17.3967 6.49032H17.3958C17.6625 6.71664 17.8773 6.99817 18.0247 7.31551C18.1726 7.63426 18.2493 7.98171 18.2493 8.33309V15.8331C18.2493 16.474 17.9945 17.0889 17.5413 17.5421C17.0881 17.9952 16.4731 18.2501 15.8323 18.2501H4.16626C3.5255 18.25 2.9104 17.9951 2.45728 17.5421C2.00423 17.0889 1.74927 16.4739 1.74927 15.8331V8.33309C1.74925 7.98171 1.82598 7.63426 1.97388 7.31551C2.12108 6.99833 2.33528 6.7166 2.60181 6.49032L8.43579 1.49032L8.4397 1.48739C8.8758 1.11883 9.42829 0.916174 9.99927 0.916097ZM9.99927 2.4161C9.78275 2.41617 9.57284 2.49313 9.40747 2.63289L9.40649 2.63192L3.57837 7.62899L3.57446 7.63289C3.47267 7.71894 3.39034 7.82644 3.33423 7.94735C3.27826 8.06813 3.24927 8.19997 3.24927 8.33309V15.8331C3.24927 16.0761 3.34608 16.3096 3.51782 16.4815C3.68964 16.6533 3.92332 16.75 4.16626 16.7501H6.74927V10.8331C6.74935 10.4134 6.91639 10.0108 7.21313 9.71395C7.50991 9.41717 7.91258 9.25025 8.33228 9.25008H11.6663C12.086 9.25017 12.4886 9.41719 12.7854 9.71395C13.0823 10.0108 13.2492 10.4133 13.2493 10.8331V16.7501H15.8323C16.0753 16.7501 16.3088 16.6533 16.4807 16.4815C16.6526 16.3096 16.7493 16.0762 16.7493 15.8331V8.33309L16.7434 8.23348C16.7326 8.13473 16.7063 8.03787 16.6643 7.94735C16.6082 7.82651 16.5258 7.7189 16.4241 7.63289L16.4202 7.62899L10.5911 2.63192V2.63289C10.4257 2.49322 10.2158 2.4161 9.99927 2.4161ZM8.33228 10.7501C8.31041 10.7503 8.28916 10.759 8.27368 10.7745C8.25824 10.79 8.24935 10.8112 8.24927 10.8331V16.7501H11.7493V10.8331C11.7492 10.8111 11.7404 10.79 11.7249 10.7745C11.7093 10.759 11.6882 10.7502 11.6663 10.7501H8.33228Z" fill="#0F0C0C"/>
4
+ </g>
5
+ </svg>
@@ -0,0 +1,6 @@
1
+ <svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <g id="folder-management">
3
+ <path id="Vector" d="M6.66803 5.83333H10.0023M10.0023 5.83333H13.9617C15.7177 5.83333 16.5958 5.83333 17.2265 6.25466C17.4995 6.43706 17.734 6.67143 17.9164 6.94441C18.2448 7.43568 18.3173 8.07703 18.3333 9.16667M10.0023 5.83333L9.47426 4.7776C9.03683 3.90298 8.63709 3.0226 7.66768 2.65917C7.2431 2.5 6.75807 2.5 5.78802 2.5C4.27388 2.5 3.51681 2.5 2.94874 2.81693C2.54379 3.04285 2.20966 3.37689 1.98368 3.78172C1.66667 4.34964 1.66667 5.1065 1.66667 6.62023V9.16667C1.66667 13.095 1.66667 15.0592 2.88739 16.2796C4.10811 17.5 6.07283 17.5 10.0023 17.5" stroke-width="1.5" stroke-linecap="round" stroke="#0F0C0C"/>
4
+ <path id="Vector_2" d="M15 16.4773C16.4728 16.4773 17.6667 15.2562 17.6667 13.75C17.6667 12.2438 16.4728 11.0227 15 11.0227M15 16.4773C13.5272 16.4773 12.3333 15.2562 12.3333 13.75C12.3333 12.2438 13.5272 11.0227 15 11.0227M15 16.4773V17.5M15 11.0227V10M12.5761 12.2624L11.667 11.7045M18.3333 15.7955L17.4243 15.2376M17.4239 12.2624L18.333 11.7045M11.6667 15.7955L12.5757 15.2376" stroke-width="1.5" stroke-linecap="round" stroke="#0F0C0C"/>
5
+ </g>
6
+ </svg>
@@ -0,0 +1,8 @@
1
+ <svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="16.5" height="11.5" viewBox="0 0 16.5 11.5" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <g id="elements">
3
+ <path id="Vector 8035" d="M15.75 7.41667C15.75 8.58344 15.75 9.16683 15.5229 9.61248C15.3232 10.0045 15.0045 10.3232 14.6125 10.5229C14.1668 10.75 13.5834 10.75 12.4167 10.75H4.08333C2.91656 10.75 2.33317 10.75 1.88752 10.5229C1.49552 10.3232 1.17681 10.0045 0.977071 9.61248C0.750001 9.16683 0.750001 8.58344 0.750001 7.41667" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke="#0F0C0C"/>
4
+ <path id="Vector 8032" d="M3.25 7.41667H13.25" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke="#0F0C0C"/>
5
+ <path id="Vector 8033" d="M3.25 4.08333H13.25" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke="#0F0C0C"/>
6
+ <path id="Vector 8034" d="M3.25 0.75H13.25" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" stroke="#0F0C0C"/>
7
+ </g>
8
+ </svg>
@@ -0,0 +1,896 @@
1
+ /* packages/studio-workbench/src/global-workbench.css */
2
+ body:has(.studio-global) {
3
+ margin: 0;
4
+ }
5
+ .studio-global {
6
+ min-height: 100dvh;
7
+ background: var(--vx-background-page);
8
+ }
9
+ .studio-global *,
10
+ .studio-global *::before,
11
+ .studio-global *::after {
12
+ box-sizing: border-box;
13
+ }
14
+ .studio-global h1,
15
+ .studio-global h2,
16
+ .studio-global p {
17
+ margin: 0;
18
+ }
19
+ .studio-shell {
20
+ display: flex;
21
+ height: 100dvh;
22
+ min-width: 0;
23
+ color: var(--vx-text-primary);
24
+ font: var(--vx-typography-inter-14-regular);
25
+ }
26
+ .studio-glyph {
27
+ flex: none;
28
+ width: 20px;
29
+ height: 20px;
30
+ }
31
+ .studio-sidebar {
32
+ display: flex;
33
+ flex-direction: column;
34
+ gap: 16px;
35
+ width: 240px;
36
+ flex: none;
37
+ border-right: var(--vx-divider-width) solid var(--vx-border-secondary);
38
+ background: var(--vx-background-page);
39
+ }
40
+ .studio-logo {
41
+ display: flex;
42
+ align-items: center;
43
+ justify-content: space-between;
44
+ gap: 4px;
45
+ padding: 16px 12px 0 16px;
46
+ white-space: nowrap;
47
+ }
48
+ .studio-logo strong {
49
+ font: var(--vx-typography-inter-16-semi-bold);
50
+ letter-spacing: -0.6px;
51
+ }
52
+ .studio-logo button,
53
+ .studio-sidebar :is(nav, .studio-project-row, .studio-project-pages) > button {
54
+ appearance: none;
55
+ border: 0;
56
+ background: transparent;
57
+ color: inherit;
58
+ cursor: pointer;
59
+ }
60
+ .studio-logo button {
61
+ display: grid;
62
+ place-items: center;
63
+ padding: 0;
64
+ width: 24px;
65
+ height: 24px;
66
+ color: var(--vx-icon-secondary);
67
+ }
68
+ .studio-sidebar nav {
69
+ display: flex;
70
+ flex-direction: column;
71
+ gap: 2px;
72
+ padding: 0 12px;
73
+ flex: 1;
74
+ min-height: 0;
75
+ overflow: auto;
76
+ }
77
+ .studio-sidebar :is(nav, .studio-project-row, .studio-project-pages) > button {
78
+ display: flex;
79
+ align-items: center;
80
+ gap: 8px;
81
+ min-height: 32px;
82
+ height: 32px;
83
+ flex: none;
84
+ padding: 4px;
85
+ border-radius: 8px;
86
+ text-align: left;
87
+ font: var(--vx-typography-inter-14-medium);
88
+ }
89
+ .studio-sidebar :is(nav, .studio-project-row, .studio-project-pages) > button > .studio-glyph {
90
+ margin: 2px;
91
+ }
92
+ .studio-sidebar :is(nav, .studio-project-row, .studio-project-pages) > button > span:last-child {
93
+ overflow: hidden;
94
+ white-space: nowrap;
95
+ text-overflow: ellipsis;
96
+ }
97
+ .studio-sidebar :is(nav, .studio-project-row, .studio-project-pages) > button[aria-current=page] {
98
+ background: var(--vx-surface-selected);
99
+ }
100
+ .studio-sidebar :is(nav, .studio-project-row, .studio-project-pages) > button:hover:not(:disabled) {
101
+ background: var(--vx-surface-hover);
102
+ }
103
+ .studio-sidebar :is(nav, .studio-project-row, .studio-project-pages) > button:disabled {
104
+ opacity: 0.5;
105
+ cursor: default;
106
+ }
107
+ .studio-sidebar h2 {
108
+ padding: 16px 4px 6px;
109
+ font: var(--vx-typography-inter-12-medium);
110
+ color: var(--vx-text-secondary-readable);
111
+ }
112
+ .studio-project-thumbnail {
113
+ display: grid;
114
+ place-items: center;
115
+ width: 24px;
116
+ height: 24px;
117
+ flex: none;
118
+ background: var(--vx-surface-input);
119
+ color: var(--vx-text-secondary-readable);
120
+ border-radius: 6px;
121
+ overflow: hidden;
122
+ }
123
+ .studio-project-thumbnail > svg {
124
+ width: 16px;
125
+ height: 16px;
126
+ }
127
+ .studio-project-thumbnail > :is(img, video) {
128
+ width: 100%;
129
+ height: 100%;
130
+ display: block;
131
+ object-fit: cover;
132
+ }
133
+ .studio-account {
134
+ display: flex;
135
+ align-items: center;
136
+ gap: 8px;
137
+ padding: 12px 16px;
138
+ min-height: 56px;
139
+ font: var(--vx-typography-inter-14-medium);
140
+ }
141
+ .studio-user-mark {
142
+ display: grid;
143
+ place-items: center;
144
+ width: 32px;
145
+ height: 32px;
146
+ border-radius: 50%;
147
+ background: var(--vx-surface-input) url("./assets/local-user-MIBWBA6X.png") center / cover no-repeat;
148
+ }
149
+ .studio-sidebar[data-collapsed=true] {
150
+ width: 56px;
151
+ }
152
+ .studio-sidebar[data-collapsed=true] .studio-logo {
153
+ justify-content: center;
154
+ padding-inline: 0;
155
+ }
156
+ .studio-sidebar[data-collapsed=true] :is(.studio-logo strong, nav > button > span:last-child, .studio-project-row > button > span:last-child, .studio-account > span:last-child) {
157
+ display: none;
158
+ }
159
+ .studio-sidebar[data-collapsed=true] nav h2 {
160
+ height: 24px;
161
+ padding: 4px;
162
+ font-size: 0;
163
+ border-bottom: var(--vx-divider-width) solid var(--vx-border-secondary);
164
+ }
165
+ .studio-sidebar[data-collapsed=true] .studio-account {
166
+ padding-inline: 12px;
167
+ }
168
+ .studio-content {
169
+ display: flex;
170
+ flex: 1;
171
+ flex-direction: column;
172
+ gap: 8px;
173
+ min-width: 0;
174
+ min-height: 0;
175
+ max-width: 1920px;
176
+ margin-inline: auto;
177
+ padding: 8px;
178
+ overflow: hidden;
179
+ }
180
+ .studio-page-header {
181
+ display: flex;
182
+ align-items: center;
183
+ gap: 10px;
184
+ height: 40px;
185
+ min-height: 40px;
186
+ padding: 4px 4px 4px 16px;
187
+ }
188
+ .studio-page-header h1 {
189
+ flex: 1;
190
+ min-width: 0;
191
+ overflow: hidden;
192
+ white-space: nowrap;
193
+ text-overflow: ellipsis;
194
+ font: var(--vx-typography-inter-18-semi-bold);
195
+ }
196
+ .studio-create-view.vx-button {
197
+ background: transparent;
198
+ color: var(--vx-state-success);
199
+ height: 28px;
200
+ padding: 4px 12px;
201
+ }
202
+ .studio-mobile-nav {
203
+ display: none;
204
+ }
205
+ .studio-page-panel {
206
+ display: flex;
207
+ flex-direction: column;
208
+ flex: 1;
209
+ min-height: 0;
210
+ min-width: 0;
211
+ border-radius: 16px;
212
+ overflow: hidden;
213
+ background: var(--vx-background-dialog);
214
+ }
215
+ .studio-toolbar {
216
+ display: flex;
217
+ align-items: center;
218
+ gap: 8px;
219
+ min-height: 56px;
220
+ padding: 0 16px;
221
+ border-bottom: var(--vx-divider-width) solid var(--vx-border-secondary);
222
+ flex: none;
223
+ }
224
+ .studio-view-tabs {
225
+ display: flex;
226
+ align-items: stretch;
227
+ flex: 1;
228
+ align-self: stretch;
229
+ min-width: 0;
230
+ overflow-x: auto;
231
+ gap: 4px;
232
+ }
233
+ .studio-view-tabs > .vx-button {
234
+ flex: none;
235
+ height: 100%;
236
+ padding: 0 12px;
237
+ border-radius: 0;
238
+ background: transparent;
239
+ border-bottom: 2px solid transparent;
240
+ color: var(--vx-text-secondary-readable);
241
+ }
242
+ .studio-view-tabs > .vx-button.active {
243
+ border-bottom-color: var(--vx-text-primary);
244
+ color: var(--vx-text-primary);
245
+ }
246
+ .studio-toolbar-controls,
247
+ .studio-bulk {
248
+ display: flex;
249
+ align-items: center;
250
+ gap: 8px;
251
+ flex: none;
252
+ }
253
+ .studio-toolbar-controls > .vx-button,
254
+ .studio-bulk > .vx-button {
255
+ background: transparent;
256
+ }
257
+ .studio-bulk > span {
258
+ color: var(--vx-text-secondary-readable);
259
+ white-space: nowrap;
260
+ }
261
+ .studio-results {
262
+ display: flex;
263
+ flex-direction: column;
264
+ flex: 1;
265
+ min-height: 0;
266
+ min-width: 0;
267
+ }
268
+ .studio-table-scroll {
269
+ display: flex;
270
+ flex-direction: column;
271
+ flex: 1;
272
+ overflow: auto;
273
+ min-height: 0;
274
+ }
275
+ .studio-table {
276
+ width: 100%;
277
+ min-width: 690px;
278
+ table-layout: fixed;
279
+ border-collapse: collapse;
280
+ }
281
+ .studio-table-assets {
282
+ min-width: 1200px;
283
+ }
284
+ .studio-table th,
285
+ .studio-table td {
286
+ padding: 12px 8px;
287
+ text-align: left;
288
+ border-bottom: var(--vx-divider-width) solid var(--vx-border-secondary);
289
+ vertical-align: middle;
290
+ overflow-wrap: anywhere;
291
+ }
292
+ .studio-table th {
293
+ height: 44px;
294
+ padding-block: 8px;
295
+ color: var(--vx-text-secondary-readable);
296
+ font: var(--vx-typography-inter-12-regular);
297
+ }
298
+ .studio-table :is(th, td):first-child {
299
+ padding-left: 16px;
300
+ }
301
+ .studio-table :is(th, td):last-child {
302
+ padding-right: 16px;
303
+ }
304
+ .studio-table tr:focus-within,
305
+ .studio-table tbody tr:hover {
306
+ background: var(--vx-surface-hover);
307
+ }
308
+ .studio-row-name.vx-button {
309
+ height: auto;
310
+ padding: 0;
311
+ background: transparent;
312
+ max-width: 100%;
313
+ text-align: left;
314
+ }
315
+ .studio-row-name .vx-button-label {
316
+ white-space: normal;
317
+ font: var(--vx-typography-inter-14-regular);
318
+ }
319
+ .studio-cell-text {
320
+ display: -webkit-box;
321
+ -webkit-line-clamp: 2;
322
+ -webkit-box-orient: vertical;
323
+ overflow: hidden;
324
+ }
325
+ .studio-cover {
326
+ position: relative;
327
+ }
328
+ .studio-table .studio-cover {
329
+ width: 114px;
330
+ height: 64px;
331
+ max-width: 100%;
332
+ }
333
+ .studio-cover > .vx-media {
334
+ width: 100%;
335
+ height: 100%;
336
+ border-radius: 8px;
337
+ }
338
+ .studio-cover-video {
339
+ position: absolute;
340
+ inset: 0;
341
+ width: 100%;
342
+ height: 100%;
343
+ object-fit: contain;
344
+ border-radius: 8px;
345
+ pointer-events: none;
346
+ }
347
+ .studio-cover[data-kind=video] > .vx-media {
348
+ position: relative;
349
+ z-index: 1;
350
+ background: transparent;
351
+ }
352
+ .studio-cover-placeholder {
353
+ position: absolute;
354
+ inset: 0;
355
+ display: grid;
356
+ place-items: center;
357
+ pointer-events: none;
358
+ color: var(--vx-icon-secondary);
359
+ }
360
+ .studio-cover-placeholder > .studio-glyph {
361
+ width: 24px;
362
+ height: 24px;
363
+ }
364
+ .studio-categories {
365
+ display: flex;
366
+ gap: 4px;
367
+ flex-wrap: wrap;
368
+ }
369
+ .studio-task-state {
370
+ display: inline-flex;
371
+ align-items: center;
372
+ gap: 4px;
373
+ white-space: nowrap;
374
+ }
375
+ .studio-task-state::before {
376
+ content: "";
377
+ width: 8px;
378
+ height: 8px;
379
+ border-radius: 50%;
380
+ background: var(--vx-text-secondary);
381
+ }
382
+ .studio-task-state[data-state=succeeded] {
383
+ color: var(--vx-state-success);
384
+ }
385
+ .studio-task-state[data-state=succeeded]::before {
386
+ background: var(--vx-state-success);
387
+ }
388
+ .studio-task-state:is([data-state=failed], [data-state=save_failed]) {
389
+ color: var(--vx-state-danger);
390
+ }
391
+ .studio-task-state:is([data-state=failed], [data-state=save_failed])::before {
392
+ background: var(--vx-state-danger);
393
+ }
394
+ .studio-task-state:is([data-state=running], [data-state=queued], [data-state=saving])::before {
395
+ background: var(--vx-state-assistance);
396
+ }
397
+ .studio-grid {
398
+ display: grid;
399
+ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
400
+ align-content: start;
401
+ gap: 16px;
402
+ padding: 16px;
403
+ overflow: auto;
404
+ min-height: 0;
405
+ flex: 1;
406
+ }
407
+ .studio-card {
408
+ display: flex;
409
+ flex-direction: column;
410
+ gap: 8px;
411
+ min-width: 0;
412
+ padding: 4px 4px 10px;
413
+ border-radius: 12px;
414
+ background: var(--vx-background-dialog);
415
+ }
416
+ .studio-card-heading {
417
+ display: flex;
418
+ align-items: center;
419
+ gap: 8px;
420
+ padding: 0 8px;
421
+ }
422
+ .studio-card-heading > .studio-row-name {
423
+ flex: 1;
424
+ min-width: 0;
425
+ }
426
+ .studio-card-heading .studio-row-name .vx-button-label {
427
+ font: var(--vx-typography-inter-14-semi-bold);
428
+ white-space: nowrap;
429
+ overflow: hidden;
430
+ text-overflow: ellipsis;
431
+ }
432
+ .studio-card-subtitle {
433
+ min-height: 16px;
434
+ padding: 0 8px;
435
+ margin-top: -6px;
436
+ color: var(--vx-text-secondary);
437
+ font: var(--vx-typography-inter-12-regular);
438
+ }
439
+ .studio-card-heading > .vx-action-menu > .vx-button,
440
+ .studio-table td:last-child > .vx-action-menu > .vx-button {
441
+ width: 24px;
442
+ height: 24px;
443
+ padding: 0;
444
+ background: transparent;
445
+ }
446
+ .studio-card-heading > .vx-action-menu > .vx-button .vx-button-label,
447
+ .studio-card-heading > .vx-action-menu > .vx-button .vx-button-trailing,
448
+ .studio-table td:last-child > .vx-action-menu > .vx-button .vx-button-label,
449
+ .studio-table td:last-child > .vx-action-menu > .vx-button .vx-button-trailing {
450
+ display: none;
451
+ }
452
+ .studio-card-heading > .vx-action-menu > .vx-button::after,
453
+ .studio-table td:last-child > .vx-action-menu > .vx-button::after {
454
+ content: "\b7\b7\b7";
455
+ position: absolute;
456
+ font-size: 18px;
457
+ line-height: 1;
458
+ }
459
+ .studio-table td:last-child {
460
+ text-align: right;
461
+ }
462
+ @media (hover: hover) {
463
+ .studio-card:not(:hover):not(:focus-within) .studio-card-heading > .vx-action-menu:not(:has([aria-expanded=true])) {
464
+ opacity: 0;
465
+ }
466
+ }
467
+ .studio-card > .studio-cover {
468
+ aspect-ratio: 16/9;
469
+ }
470
+ .studio-card dl {
471
+ display: flex;
472
+ flex-direction: column;
473
+ gap: 6px;
474
+ margin: 0;
475
+ }
476
+ .studio-card dl > div {
477
+ display: flex;
478
+ gap: 8px;
479
+ font: var(--vx-typography-inter-12-regular);
480
+ }
481
+ .studio-card dt {
482
+ color: var(--vx-text-secondary-readable);
483
+ flex: 0 0 34%;
484
+ }
485
+ .studio-card dd {
486
+ margin: 0;
487
+ overflow: hidden;
488
+ overflow-wrap: anywhere;
489
+ }
490
+ .studio-card > .vx-action-menu {
491
+ align-self: flex-end;
492
+ }
493
+ .studio-empty {
494
+ display: grid;
495
+ place-items: center;
496
+ flex: 1;
497
+ width: 100%;
498
+ min-height: 160px;
499
+ color: var(--vx-text-secondary-readable);
500
+ text-align: center;
501
+ }
502
+ .studio-grid > .studio-empty {
503
+ grid-column: 1/-1;
504
+ min-height: 200px;
505
+ }
506
+ .studio-feedback {
507
+ display: flex;
508
+ align-items: center;
509
+ justify-content: space-between;
510
+ gap: 12px;
511
+ padding: 8px 16px;
512
+ background: var(--vx-surface-input);
513
+ border-radius: 8px;
514
+ overflow-wrap: anywhere;
515
+ flex: none;
516
+ }
517
+ .studio-error {
518
+ color: var(--vx-state-danger);
519
+ }
520
+ .studio-pagination {
521
+ display: flex;
522
+ align-items: center;
523
+ justify-content: center;
524
+ gap: 16px;
525
+ border-top: var(--vx-divider-width) solid var(--vx-border-secondary);
526
+ padding: 8px;
527
+ flex: none;
528
+ }
529
+ .studio-shell[data-detail] > .studio-sidebar,
530
+ .studio-shell[data-detail] > .studio-content > .studio-page-header,
531
+ .studio-shell[data-detail] > .studio-content > .studio-mobile-nav {
532
+ display: none;
533
+ }
534
+ .studio-shell[data-detail] > .studio-content {
535
+ padding: 0;
536
+ gap: 0;
537
+ }
538
+ .studio-shell[data-detail] .studio-asset-detail {
539
+ border-radius: 0;
540
+ }
541
+ .studio-asset-detail {
542
+ display: flex;
543
+ flex: 1;
544
+ min-width: 0;
545
+ min-height: 0;
546
+ border-radius: 16px;
547
+ overflow: hidden;
548
+ background: var(--vx-background-dialog);
549
+ }
550
+ .studio-preview-stage {
551
+ display: flex;
552
+ flex: 1;
553
+ position: relative;
554
+ min-width: 0;
555
+ min-height: 0;
556
+ align-items: center;
557
+ justify-content: center;
558
+ padding: 64px 24px;
559
+ }
560
+ .studio-preview-stage > img,
561
+ .studio-preview-stage > video {
562
+ object-fit: contain;
563
+ max-width: 100%;
564
+ max-height: 100%;
565
+ width: min(960px, 100%);
566
+ border-radius: 4px;
567
+ }
568
+ .studio-preview-stage > audio {
569
+ max-width: 100%;
570
+ }
571
+ .studio-detail-back.vx-button {
572
+ position: absolute;
573
+ top: 12px;
574
+ left: 15px;
575
+ background: var(--vx-background-dialog);
576
+ color: var(--vx-text-primary);
577
+ }
578
+ .studio-preview-actions {
579
+ display: flex;
580
+ align-items: center;
581
+ gap: 8px;
582
+ position: absolute;
583
+ top: 12px;
584
+ right: 12px;
585
+ }
586
+ .studio-preview-actions > .vx-button {
587
+ background: var(--vx-background-dialog);
588
+ color: var(--vx-text-primary);
589
+ }
590
+ .studio-favorite {
591
+ display: grid;
592
+ place-items: center;
593
+ width: 32px;
594
+ height: 32px;
595
+ border: 0;
596
+ border-radius: 50%;
597
+ background: var(--vx-background-dialog);
598
+ color: var(--vx-text-primary);
599
+ cursor: pointer;
600
+ }
601
+ .studio-favorite .studio-glyph {
602
+ width: 14px;
603
+ height: 16px;
604
+ }
605
+ .studio-favorite[aria-pressed=true] {
606
+ color: var(--vx-state-success);
607
+ background: var(--vx-surface-selected);
608
+ }
609
+ .studio-preview-details {
610
+ width: 320px;
611
+ flex: none;
612
+ display: flex;
613
+ flex-direction: column;
614
+ gap: 24px;
615
+ padding: 24px 16px;
616
+ border-left: var(--vx-divider-width) solid var(--vx-border-secondary);
617
+ overflow-y: auto;
618
+ overflow-wrap: anywhere;
619
+ }
620
+ .studio-preview-details h2 {
621
+ font: var(--vx-typography-inter-16-semi-bold);
622
+ }
623
+ .studio-detail-group {
624
+ display: flex;
625
+ flex-direction: column;
626
+ gap: 8px;
627
+ }
628
+ .studio-detail-group > span:first-child {
629
+ color: var(--vx-text-secondary-readable);
630
+ }
631
+ .studio-detail-group p {
632
+ white-space: pre-wrap;
633
+ }
634
+ .studio-detail-group pre {
635
+ margin: 0;
636
+ white-space: pre-wrap;
637
+ overflow-wrap: anywhere;
638
+ font: var(--vx-typography-inter-12-regular);
639
+ }
640
+ .studio-detail-group > .vx-button {
641
+ align-self: flex-start;
642
+ padding: 0;
643
+ height: auto;
644
+ color: var(--vx-state-success);
645
+ }
646
+ .studio-prompt {
647
+ display: -webkit-box;
648
+ -webkit-line-clamp: 4;
649
+ -webkit-box-orient: vertical;
650
+ overflow: hidden;
651
+ }
652
+ .studio-prompt[data-expanded=true] {
653
+ display: block;
654
+ }
655
+ .studio-text-preview {
656
+ white-space: pre-wrap;
657
+ overflow-wrap: anywhere;
658
+ max-width: 100%;
659
+ max-height: 100%;
660
+ overflow: auto;
661
+ margin: 0;
662
+ }
663
+ .studio-reference-list {
664
+ display: flex;
665
+ flex-direction: column;
666
+ align-items: flex-start;
667
+ gap: 8px;
668
+ }
669
+ .studio-reference-list .vx-button {
670
+ max-width: 100%;
671
+ }
672
+ .studio-view-form {
673
+ display: flex;
674
+ flex-direction: column;
675
+ gap: 16px;
676
+ }
677
+ .studio-view-form fieldset {
678
+ display: grid;
679
+ grid-template-columns: repeat(auto-fit, minmax(min(100%, 132px), 1fr));
680
+ gap: 10px 16px;
681
+ margin: 0;
682
+ padding: 12px;
683
+ border: 1px solid var(--vx-border-secondary);
684
+ border-radius: 8px;
685
+ min-width: 0;
686
+ }
687
+ .studio-view-form legend {
688
+ padding-inline: 4px;
689
+ }
690
+ .studio-view-form p {
691
+ margin: 0;
692
+ color: var(--vx-text-secondary-readable);
693
+ }
694
+ .studio-view-form [role=alert] {
695
+ color: var(--vx-state-danger);
696
+ }
697
+ .studio-global :is(button, a, textarea, summary):focus-visible {
698
+ outline: 2px solid var(--vx-state-assistance);
699
+ outline-offset: 2px;
700
+ }
701
+ @media (max-width: 1100px) {
702
+ .studio-toolbar {
703
+ flex-wrap: wrap;
704
+ gap: 8px;
705
+ padding-block: 8px;
706
+ }
707
+ .studio-view-tabs {
708
+ min-height: 40px;
709
+ }
710
+ .studio-toolbar-controls,
711
+ .studio-bulk {
712
+ flex-wrap: wrap;
713
+ }
714
+ .studio-page-header h1 {
715
+ font: var(--vx-typography-inter-14-semi-bold);
716
+ }
717
+ }
718
+ @media (max-width: 760px) {
719
+ .studio-shell {
720
+ min-height: 100dvh;
721
+ height: auto;
722
+ }
723
+ .studio-sidebar {
724
+ display: none;
725
+ }
726
+ .studio-content {
727
+ overflow: visible;
728
+ padding: 8px 16px;
729
+ }
730
+ .studio-mobile-nav {
731
+ display: block;
732
+ }
733
+ .studio-page-header {
734
+ padding-left: 4px;
735
+ flex-wrap: wrap;
736
+ height: auto;
737
+ min-height: 40px;
738
+ }
739
+ .studio-page-header h1 {
740
+ flex: 1 1 120px;
741
+ }
742
+ .studio-create-view.vx-button {
743
+ padding-inline: 4px;
744
+ }
745
+ .studio-toolbar {
746
+ padding: 0 12px 8px;
747
+ }
748
+ .studio-view-tabs {
749
+ flex-basis: 100%;
750
+ min-height: 56px;
751
+ }
752
+ .studio-toolbar-controls,
753
+ .studio-bulk {
754
+ flex-wrap: wrap;
755
+ width: 100%;
756
+ gap: 6px;
757
+ }
758
+ .studio-page-panel {
759
+ min-height: 60dvh;
760
+ }
761
+ .studio-table-scroll {
762
+ max-height: 70dvh;
763
+ }
764
+ .studio-grid {
765
+ grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
766
+ }
767
+ .studio-asset-detail {
768
+ flex-direction: column;
769
+ overflow: visible;
770
+ }
771
+ .studio-preview-stage {
772
+ height: 45dvh;
773
+ min-height: 280px;
774
+ padding: 64px 16px 24px;
775
+ flex: none;
776
+ }
777
+ .studio-preview-details {
778
+ width: 100%;
779
+ overflow: visible;
780
+ border-left: 0;
781
+ border-top: var(--vx-divider-width) solid var(--vx-border-secondary);
782
+ }
783
+ }
784
+ @media (prefers-reduced-motion: reduce) {
785
+ .studio-global * {
786
+ scroll-behavior: auto;
787
+ }
788
+ }
789
+ .studio-shell[data-project] > .studio-content {
790
+ padding: 0;
791
+ gap: 0;
792
+ }
793
+ .studio-project-frame {
794
+ flex: 1;
795
+ width: 100%;
796
+ min-height: 0;
797
+ border: 0;
798
+ color-scheme: normal;
799
+ }
800
+ .studio-project-group,
801
+ .studio-project-pages {
802
+ display: grid;
803
+ gap: 2px;
804
+ }
805
+ .studio-project-row {
806
+ position: relative;
807
+ display: grid;
808
+ grid-template-columns: minmax(0, 1fr);
809
+ }
810
+ .studio-sidebar .studio-project-row:has(.studio-project-actions) > button {
811
+ padding-inline-end: var(--vx-space-32);
812
+ }
813
+ .studio-project-actions {
814
+ position: absolute;
815
+ inset-inline-end: var(--vx-space-4);
816
+ inset-block-start: 50%;
817
+ translate: 0 -50%;
818
+ opacity: 0;
819
+ pointer-events: none;
820
+ }
821
+ .studio-project-row:is(:hover, :focus-within, [data-active]) .studio-project-actions {
822
+ opacity: 1;
823
+ pointer-events: auto;
824
+ }
825
+ @media (hover: none) {
826
+ .studio-project-actions {
827
+ opacity: 1;
828
+ pointer-events: auto;
829
+ }
830
+ }
831
+ .studio-project-pages {
832
+ margin-inline-start: var(--vx-space-16);
833
+ padding-inline-start: var(--vx-space-12);
834
+ border-inline-start: var(--vx-divider-width) solid var(--vx-border-secondary);
835
+ }
836
+ .studio-sidebar .studio-project-pages > .studio-project-tab {
837
+ padding-inline: var(--vx-space-8);
838
+ font: var(--vx-typography-inter-14-regular);
839
+ color: var(--vx-text-secondary-readable);
840
+ }
841
+ .studio-sidebar .studio-project-pages > .studio-project-tab[aria-current=page] {
842
+ color: var(--vx-text-primary);
843
+ font: var(--vx-typography-inter-14-medium);
844
+ }
845
+ @media (max-width: 760px) {
846
+ .studio-shell[data-project] {
847
+ height: 100dvh;
848
+ }
849
+ .studio-shell[data-project] .studio-mobile-nav {
850
+ padding: 8px 12px;
851
+ }
852
+ }
853
+ .studio-sidebar nav > button > .studio-nav-icon {
854
+ display: grid;
855
+ place-items: center;
856
+ flex: 0 0 24px;
857
+ inline-size: 24px;
858
+ block-size: 24px;
859
+ }
860
+ .studio-nav-icon::before {
861
+ content: "";
862
+ inline-size: 20px;
863
+ block-size: 20px;
864
+ background: currentColor;
865
+ mask: var(--studio-nav-mask) center / contain no-repeat;
866
+ }
867
+ .studio-nav-icon[data-icon=home] {
868
+ --studio-nav-mask: url("./assets/nav-home-BMDOUQGN.svg");
869
+ }
870
+ .studio-nav-icon[data-icon=projects] {
871
+ --studio-nav-mask: url("./assets/nav-projects-N5UV3GAG.svg");
872
+ }
873
+ .studio-nav-icon[data-icon=assets] {
874
+ --studio-nav-mask: url("./assets/nav-assets-35EAQZQX.svg");
875
+ }
876
+ .studio-nav-icon[data-icon=tasks] {
877
+ --studio-nav-mask: url("./assets/nav-queue-2I5E65F4.svg");
878
+ }
879
+ .studio-project-caption {
880
+ display: flex;
881
+ align-items: center;
882
+ gap: var(--vx-space-8);
883
+ min-inline-size: 0;
884
+ }
885
+ .studio-project-caption > span {
886
+ overflow: hidden;
887
+ text-overflow: ellipsis;
888
+ }
889
+ .studio-sample-label {
890
+ flex: none;
891
+ border-radius: 3px;
892
+ padding: 1px 4px;
893
+ background: var(--vx-surface-input);
894
+ color: var(--vx-text-secondary-readable);
895
+ font: var(--vx-typography-inter-12-medium);
896
+ }
@@ -0,0 +1,272 @@
1
+ // packages/studio-workbench/src/query-results.tsx
2
+ import * as React from "react";
3
+
4
+ // packages/ui-system/dist/button.js
5
+ import { jsx as _jsx2, jsxs as _jsxs } from "react/jsx-runtime";
6
+
7
+ // packages/ui-system/dist/icon.js
8
+ import { jsx as _jsx } from "react/jsx-runtime";
9
+ function Icon({ name, size }) {
10
+ return _jsx("span", { "aria-hidden": "true", className: "vx-icon", "data-icon": name, style: size === void 0 ? void 0 : { "--vx-icon-size": `${size}px` } });
11
+ }
12
+
13
+ // packages/ui-system/dist/button-variants.js
14
+ var buttonVariants = {
15
+ "text-filled-sm": { size: 32, appearance: "filled", shape: "text", width: 215 },
16
+ "text-filled-leading-sm": { size: 32, appearance: "filled", shape: "text" },
17
+ "text-ghost-sm": { size: 32, appearance: "ghost", shape: "text" },
18
+ "text-on-content-sm": { size: 32, appearance: "on-content", shape: "text" },
19
+ "text-tonal-sm": { size: 32, appearance: "tonal", shape: "text" },
20
+ // The medium recipes are shared by all dialog footer actions.
21
+ "text-filled-md": { size: 40, appearance: "filled", shape: "text" },
22
+ "text-tonal-md": { size: 40, appearance: "tonal", shape: "text" },
23
+ "text-ghost-md": { size: 40, appearance: "ghost", shape: "text" },
24
+ "icon-ghost-md": { size: 40, appearance: "ghost", shape: "icon" },
25
+ "text-filled-lg": { size: 44, appearance: "filled", shape: "text", width: 412 },
26
+ "text-tonal-lg": { size: 44, appearance: "tonal", shape: "text", width: 412 },
27
+ "text-outline-lg": {
28
+ size: 44,
29
+ appearance: "outline",
30
+ shape: "text",
31
+ width: 412
32
+ },
33
+ "pill-filled": { size: 44, appearance: "filled", shape: "pill" },
34
+ "pill-plain": { size: 48, appearance: "plain", shape: "pill" },
35
+ "pill-small": { size: 32, appearance: "plain", shape: "pill" },
36
+ "icon-outline-sm": { size: 32, appearance: "outline", shape: "icon" },
37
+ "icon-on-content": { size: 24, appearance: "on-content", shape: "icon" },
38
+ "icon-outline-lg": { size: 48, appearance: "outline", shape: "icon" },
39
+ // Compact bare action: reuse the transparent/default and surface-hover ghost treatment.
40
+ "icon-bare-xs": { size: 24, appearance: "ghost", shape: "icon" },
41
+ "icon-ghost-sm": { size: 32, appearance: "ghost", shape: "icon" },
42
+ "icon-ghost-lg": { size: 48, appearance: "ghost", shape: "icon" },
43
+ "icon-circle-sm": { size: 32, appearance: "filled", shape: "circle" },
44
+ "icon-circle-lg": { size: 44, appearance: "filled", shape: "circle" }
45
+ };
46
+
47
+ // packages/ui-system/dist/button.js
48
+ function ButtonFrame({ label, variant, loading = false, width, children, disabled, type = "button", style, className, ...props }) {
49
+ const spec = buttonVariants[variant];
50
+ const buttonStyle = "width" in spec ? { ...style, "--vx-button-width": `${spec.width}px` } : style;
51
+ return _jsxs("button", { ...props, type, className: className ? `vx-button ${className}` : "vx-button", "data-variant": variant, "data-appearance": spec.appearance, "data-shape": spec.shape, "data-size": spec.size, "data-width": width, "data-state": loading ? "loading" : disabled ? "disabled" : "default", style: buttonStyle, disabled: disabled || loading, "aria-label": label, "aria-busy": loading || void 0, children: [_jsx2("span", { className: "vx-button-content", children }), loading && _jsx2("span", { className: "vx-button-loading", "aria-hidden": "true" })] });
52
+ }
53
+ function Button({ variant = "text-filled-sm", leadingIcon, trailingIcon, ...props }) {
54
+ return _jsxs(ButtonFrame, { ...props, variant, children: [leadingIcon && _jsx2(Icon, { name: leadingIcon }), _jsx2("span", { className: "vx-button-label", children: props.label }), trailingIcon && _jsx2("span", { className: "vx-button-trailing", children: _jsx2(Icon, { name: trailingIcon }) })] });
55
+ }
56
+
57
+ // packages/ui-system/dist/checkbox.js
58
+ import { jsx as _jsx3, jsxs as _jsxs2 } from "react/jsx-runtime";
59
+ function Checkbox({ label, checked, onCheckedChange, hideLabel = false, appearance = "default", ...props }) {
60
+ return _jsxs2("label", { className: "vx-checkbox", "data-appearance": appearance, "data-label-hidden": hideLabel || void 0, children: [_jsx3("input", { ...props, className: "vx-checkbox-input", type: "checkbox", "aria-label": hideLabel ? label : void 0, checked, onChange: (event) => onCheckedChange(event.currentTarget.checked) }), _jsx3("span", { className: "vx-checkbox-mark", "aria-hidden": "true", children: _jsx3(Icon, { name: appearance === "on-content" ? "check-on-content" : "check" }) }), !hideLabel && label] });
61
+ }
62
+
63
+ // packages/studio-workbench/src/query-view.ts
64
+ import { z } from "vivix-studio/sdk/shared";
65
+ var pageSources = ["projects", "assets", "tasks"];
66
+ var pageTitles = {
67
+ projects: "Manage Projects",
68
+ assets: "Global Asset",
69
+ tasks: "Generation Queue"
70
+ };
71
+ var columnName = z.string().min(1).max(200).refine((value) => !/[\u0000-\u001f]/.test(value));
72
+ var scalar = z.union([z.null(), z.string(), z.number().finite()]);
73
+ var customViewSchema = z.object({
74
+ source: z.enum(pageSources),
75
+ projectId: z.uuid().optional(),
76
+ name: z.string().trim().min(1).max(120),
77
+ sql: z.string().trim().min(1).max(32e3),
78
+ params: z.union([z.array(scalar), z.record(z.string(), scalar)]).default([]),
79
+ columns: z.array(
80
+ z.object({
81
+ path: columnName,
82
+ label: z.string().min(1).max(120).optional(),
83
+ width: z.number().int().min(80).max(600).default(140),
84
+ visible: z.boolean().default(true),
85
+ format: z.enum(["text", "categories", "date", "json"]).default("text"),
86
+ role: z.enum(["name", "preview", "state", "project"]).optional()
87
+ }).strict()
88
+ ).min(1).max(60).refine(
89
+ (columns) => new Set(columns.map((c) => c.path)).size === columns.length,
90
+ "Column names must be unique."
91
+ ),
92
+ identity: z.object({
93
+ row: columnName.default("rowId"),
94
+ project: columnName.default("projectId"),
95
+ ref: columnName.default("ref"),
96
+ outputs: columnName.default("outputRefs")
97
+ }).strict().default({ row: "rowId", project: "projectId", ref: "ref", outputs: "outputRefs" })
98
+ }).strict();
99
+ function decodeRef(value) {
100
+ let item = value;
101
+ if (typeof item === "string") {
102
+ try {
103
+ item = JSON.parse(item);
104
+ } catch {
105
+ return null;
106
+ }
107
+ }
108
+ if (!item || typeof item !== "object" || Array.isArray(item)) return null;
109
+ const ref = item;
110
+ return ["storeId", "objectId", "versionId"].every(
111
+ (key) => typeof ref[key] === "string" && /^[0-9a-f-]{36}$/i.test(ref[key])
112
+ ) ? {
113
+ storeId: ref.storeId,
114
+ objectId: ref.objectId,
115
+ versionId: ref.versionId
116
+ } : null;
117
+ }
118
+ function rowRef(row, view) {
119
+ return decodeRef(row[view.identity.ref]);
120
+ }
121
+ function rowKey(row, view) {
122
+ const id = row[view.identity.row];
123
+ return (typeof id === "string" || typeof id === "number") && id !== "" ? JSON.stringify([view.source, id]) : null;
124
+ }
125
+ function presentationRows(rows, view) {
126
+ const occurrences = /* @__PURE__ */ new Map();
127
+ return rows.map((row) => {
128
+ const content = JSON.stringify(row);
129
+ const occurrence = occurrences.get(content) ?? 0;
130
+ occurrences.set(content, occurrence + 1);
131
+ return { row, renderKey: `${rowKey(row, view) ?? content}:${occurrence}` };
132
+ });
133
+ }
134
+ function rowTitle(row, view) {
135
+ const field = view.columns.find((c) => c.role === "name")?.path ?? "name";
136
+ return String(row[field] ?? row[view.identity.row] ?? "Untitled");
137
+ }
138
+ function columnText(value, format = "text") {
139
+ if (value === null || value === void 0) return "\u2014";
140
+ if (format === "date") {
141
+ const date = new Date(String(value));
142
+ return Number.isNaN(date.getTime()) ? String(value) : date.toLocaleString("en-US", {
143
+ year: "numeric",
144
+ month: "short",
145
+ day: "numeric",
146
+ hour: "2-digit",
147
+ minute: "2-digit"
148
+ });
149
+ }
150
+ return typeof value === "object" ? JSON.stringify(value) : String(value);
151
+ }
152
+
153
+ // packages/studio-workbench/src/query-results.tsx
154
+ import { jsx, jsxs } from "react/jsx-runtime";
155
+ function QueryResults({
156
+ route,
157
+ active,
158
+ rows,
159
+ queryLoading,
160
+ failure,
161
+ selecting,
162
+ visibleColumns,
163
+ annotationProject,
164
+ selectionKey,
165
+ isSelected,
166
+ toggle,
167
+ cover,
168
+ canOpen,
169
+ openRow,
170
+ renderCell,
171
+ rowActions
172
+ }) {
173
+ return /* @__PURE__ */ jsx("div", { className: "studio-results", "aria-busy": queryLoading, children: route.layout === "list" ? /* @__PURE__ */ jsxs("div", { className: "studio-table-scroll", children: [
174
+ /* @__PURE__ */ jsxs(
175
+ "table",
176
+ {
177
+ className: `studio-table studio-table-${route.page}`,
178
+ "aria-label": pageTitles[route.page],
179
+ children: [
180
+ /* @__PURE__ */ jsxs("colgroup", { children: [
181
+ selecting && /* @__PURE__ */ jsx("col", { style: { width: 48 } }),
182
+ visibleColumns.map((column) => /* @__PURE__ */ jsx("col", { style: { width: column.width } }, column.path)),
183
+ /* @__PURE__ */ jsx("col", { style: { width: 100 } })
184
+ ] }),
185
+ /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
186
+ selecting && /* @__PURE__ */ jsx("th", { scope: "col", children: "Select" }),
187
+ visibleColumns.map((column) => /* @__PURE__ */ jsx("th", { scope: "col", children: column.label ?? column.path }, column.path)),
188
+ /* @__PURE__ */ jsx("th", { scope: "col", children: "Action" })
189
+ ] }) }),
190
+ /* @__PURE__ */ jsx("tbody", { children: presentationRows(rows, active.view).map(({ row, renderKey }) => /* @__PURE__ */ jsxs(
191
+ "tr",
192
+ {
193
+ "data-row-id": rowKey(row, active.view) ?? void 0,
194
+ "data-magic-edit-project": annotationProject(row),
195
+ children: [
196
+ selecting && /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx(
197
+ Checkbox,
198
+ {
199
+ label: `Select ${rowTitle(row, active.view)}`,
200
+ disabled: !selectionKey(row),
201
+ hideLabel: true,
202
+ checked: isSelected(row),
203
+ onCheckedChange: () => toggle(row)
204
+ }
205
+ ) }),
206
+ visibleColumns.map((column) => /* @__PURE__ */ jsx("td", { children: column.role === "preview" ? cover(row) : column.role === "name" ? /* @__PURE__ */ jsx(
207
+ Button,
208
+ {
209
+ className: "studio-row-name",
210
+ label: rowTitle(row, active.view),
211
+ variant: "text-tonal-sm",
212
+ disabled: selecting ? !selectionKey(row) : !canOpen(row),
213
+ onClick: () => selecting ? toggle(row) : openRow(row)
214
+ }
215
+ ) : renderCell(row, column) }, column.path)),
216
+ /* @__PURE__ */ jsx("td", { children: !selecting && rowActions(row) })
217
+ ]
218
+ },
219
+ renderKey
220
+ )) })
221
+ ]
222
+ }
223
+ ),
224
+ !rows.length && /* @__PURE__ */ jsx("div", { className: "studio-empty", role: "status", children: queryLoading ? "Loading\u2026" : failure ? "The query could not be loaded." : route.page === "projects" ? "No matching projects." : route.page === "tasks" ? "No matching tasks." : "No assets." })
225
+ ] }) : /* @__PURE__ */ jsxs("div", { className: "studio-grid", children: [
226
+ presentationRows(rows, active.view).map(({ row, renderKey }) => /* @__PURE__ */ jsxs(
227
+ "article",
228
+ {
229
+ "data-row-id": rowKey(row, active.view) ?? void 0,
230
+ "data-magic-edit-project": annotationProject(row),
231
+ className: "studio-card",
232
+ children: [
233
+ cover(row),
234
+ /* @__PURE__ */ jsxs("div", { className: "studio-card-heading", children: [
235
+ /* @__PURE__ */ jsx(
236
+ Button,
237
+ {
238
+ className: "studio-row-name",
239
+ label: rowTitle(row, active.view),
240
+ variant: "text-tonal-sm",
241
+ disabled: selecting ? !selectionKey(row) : !canOpen(row),
242
+ onClick: () => selecting ? toggle(row) : openRow(row)
243
+ }
244
+ ),
245
+ !selecting && rowActions(row)
246
+ ] }),
247
+ route.page === "assets" && rowRef(row, active.view) ? /* @__PURE__ */ jsx("div", { className: "studio-card-subtitle", children: visibleColumns.some((column) => column.format === "categories") ? visibleColumns.filter((column) => column.format === "categories").map((column) => /* @__PURE__ */ jsx(React.Fragment, { children: renderCell(row, column) }, column.path)) : columnText(row.kind) }) : /* @__PURE__ */ jsx("dl", { children: visibleColumns.filter(
248
+ (column) => !column.role || column.role === "state" || column.role === "project"
249
+ ).map((column) => /* @__PURE__ */ jsxs("div", { children: [
250
+ /* @__PURE__ */ jsx("dt", { children: column.label ?? column.path }),
251
+ /* @__PURE__ */ jsx("dd", { children: renderCell(row, column) })
252
+ ] }, column.path)) })
253
+ ]
254
+ },
255
+ renderKey
256
+ )),
257
+ !rows.length && /* @__PURE__ */ jsx("div", { className: "studio-empty", role: "status", children: queryLoading ? "Loading\u2026" : failure ? "The query could not be loaded." : route.page === "projects" ? "No matching projects." : route.page === "tasks" ? "No matching tasks." : "No assets." })
258
+ ] }) });
259
+ }
260
+
261
+ // packages/studio-asset-list/src/client.tsx
262
+ function activate(client) {
263
+ client.registerUI({
264
+ id: "asset-list",
265
+ title: "Asset List",
266
+ kind: "component",
267
+ component: QueryResults
268
+ });
269
+ }
270
+ export {
271
+ activate as default
272
+ };
package/dist/client.js ADDED
@@ -0,0 +1,3 @@
1
+ import './client-code.css';
2
+ export { default } from './client-code.js';
3
+ export * from './client-code.js';
package/package.json CHANGED
@@ -1,6 +1,21 @@
1
1
  {
2
2
  "name": "@vivix-labs/studio-asset-list",
3
- "version": "0.0.0-stage",
4
- "stub": true,
5
- "description": "Temporary package placeholder for staged publishing"
3
+ "version": "1.0.0-beta",
4
+ "type": "module",
5
+ "publishConfig": {
6
+ "access": "public",
7
+ "registry": "https://registry.npmjs.org/",
8
+ "tag": "beta"
9
+ },
10
+ "files": [
11
+ "dist",
12
+ "studio-plugin.json"
13
+ ],
14
+ "exports": {
15
+ "./client": "./dist/client.js"
16
+ },
17
+ "peerDependencies": {
18
+ "react": "^19.0.0",
19
+ "react-dom": "^19.0.0"
20
+ }
6
21
  }
@@ -0,0 +1,8 @@
1
+ {
2
+ "manifestVersion": "0.2",
3
+ "id": "vivix.studio-asset-list",
4
+ "requirements": {
5
+ "studioPluginApi": "^0.2.1"
6
+ },
7
+ "requestedAccess": []
8
+ }
package/README.md DELETED
@@ -1,3 +0,0 @@
1
- # Temporary Holding Version
2
-
3
- This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.