@stonecrop/desktop 0.33.0 → 0.35.0

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 (22) hide show
  1. package/README.md +4 -2
  2. package/dist/assets/index.css +321 -220
  3. package/dist/desktop.js +502 -196
  4. package/dist/desktop.js.map +1 -1
  5. package/dist/src/components/ActionSet.vue.d.ts +6 -1
  6. package/dist/src/components/ActionSet.vue.d.ts.map +1 -1
  7. package/dist/src/components/CommandPalette.vue.d.ts.map +1 -1
  8. package/dist/src/components/Desktop.vue.d.ts +9 -3
  9. package/dist/src/components/Desktop.vue.d.ts.map +1 -1
  10. package/dist/src/components/SheetNav.vue.d.ts.map +1 -1
  11. package/dist/src/composables/useActionSet.d.ts +23 -0
  12. package/dist/src/composables/useActionSet.d.ts.map +1 -0
  13. package/dist/src/icons/index.d.ts +22 -0
  14. package/dist/src/icons/index.d.ts.map +1 -0
  15. package/dist/src/index.d.ts +4 -3
  16. package/dist/src/index.d.ts.map +1 -1
  17. package/dist/src/plugins/index.d.ts.map +1 -1
  18. package/dist/src/sheet-nav-toolbar.d.ts +4 -1
  19. package/dist/src/sheet-nav-toolbar.d.ts.map +1 -1
  20. package/dist/src/types/index.d.ts +27 -0
  21. package/dist/src/types/index.d.ts.map +1 -1
  22. package/package.json +5 -5
package/dist/assets/index.css CHANGED
@@ -1,125 +1,4 @@
1
1
 
2
- #cross[data-v-8e18f635] {
3
- position: relative;
4
- transform: rotate(45deg);
5
- cursor: pointer;
6
- transition: all 0.2s ease-in-out;
7
- user-select: none;
8
- line-height: 1rem;
9
- }
10
- #cross.rotated[data-v-8e18f635],
11
- .cross.rotated[data-v-8e18f635] {
12
- transform: rotate(0deg);
13
- }
14
- #cross svg[data-v-8e18f635] {
15
- width: 1.5em;
16
- height: 1.5em;
17
- }
18
- .action-set[data-v-8e18f635] {
19
- position: fixed;
20
- top: 300px;
21
- right: 10px;
22
- padding: 10px;
23
- display: flex;
24
- flex-direction: column;
25
- align-items: flex-end;
26
- background: var(--sc-form-background);
27
- border: 1px solid var(--sc-gray-20);
28
- border-left: 4px solid var(--sc-gray-20);
29
- border-radius: 0;
30
- overflow: hidden;
31
- z-index: 1001; /* Above SheetNav (100) and operation log button (999) */
32
- -webkit-transition: all 0.5s ease-in-out;
33
- -moz-transition: all 0.5s ease-in-out;
34
- -o-transition: all 0.5s ease-in-out;
35
- transition: all 0.5s ease-in-out;
36
- }
37
- .action-menu-icon[data-v-8e18f635] {
38
- position: relative;
39
- font-size: 2rem;
40
- display: inline-block;
41
- color: var(--sc-gray-60);
42
- transition: all 0.2s ease-in-out;
43
- }
44
- .action-set.collapsed[data-v-8e18f635] {
45
- max-width: 46px;
46
- max-height: 40px;
47
- overflow: hidden;
48
- }
49
- .action-set.collapsed .action-element[data-v-8e18f635] {
50
- opacity: 0;
51
- -webkit-transition: opacity 0.25s ease-in-out;
52
- -moz-transition: opacity 0.25s ease-in-out;
53
- -o-transition: opacity 0.25s ease-in-out;
54
- transition: opacity 0.25s ease-in-out;
55
- }
56
- .action-element[data-v-8e18f635] {
57
- width: 100%;
58
- text-align: right;
59
- border: 1px solid var(--sc-gray-20);
60
- background: none;
61
- font-size: 1.5rem;
62
- font-family: var(--sc-font-family);
63
- font-weight: 600;
64
- margin-top: 10px;
65
- position: relative; /* Make this the positioning context for absolute children */
66
- }
67
- .action-element-header[data-v-8e18f635] {
68
- display: flex;
69
- justify-content: end;
70
- }
71
- button.button-default[data-v-8e18f635] {
72
- background-color: transparent;
73
- padding: 5px 12px;
74
- border-radius: 0px;
75
- box-shadow: none;
76
- border: none;
77
- cursor: pointer;
78
- white-space: nowrap;
79
- font-weight: bold;
80
- font-size: 1rem;
81
- text-align: right;
82
- color: var(--sc-gray-80);
83
- padding-left: 50px;
84
- font-family: var(--sc-font-family);
85
- }
86
- .dropdown-header:hover button.button-default[data-v-8e18f635],
87
- .dropdown-header[data-v-8e18f635]:hover,
88
- .action-element-header[data-v-8e18f635]:hover {
89
- background-color: #f2f2f2;
90
- }
91
- .dropdown-title[data-v-8e18f635] {
92
- position: relative;
93
- }
94
- .dropdown-header[data-v-8e18f635] {
95
- display: flex;
96
- align-items: center;
97
- }
98
- .cross[data-v-8e18f635] {
99
- pointer-events: all;
100
- margin-left: 5px;
101
- font-family: var(--sc-font-family);
102
- color: var(--sc-gray-60);
103
- cursor: pointer;
104
- transform: rotate(45deg);
105
- user-select: none;
106
- transition: all 0.2s ease-in-out;
107
- line-height: 1rem;
108
- }
109
- button.dropdown-item[data-v-8e18f635] {
110
- width: 100%;
111
- padding: 5px 12px;
112
- text-align: right;
113
- border: none;
114
- background-color: #ffffff;
115
- cursor: pointer;
116
- border-radius: 5px;
117
- font-size: 1rem;
118
- }
119
- button.dropdown-item[data-v-8e18f635]:hover {
120
- background-color: #f2f2f2;
121
- }
122
-
123
2
  .fade-enter-active,
124
3
  .fade-leave-active {
125
4
  transition: opacity 0.2s ease;
@@ -144,8 +23,8 @@ button.dropdown-item[data-v-8e18f635]:hover {
144
23
  .command-palette {
145
24
  width: 600px;
146
25
  max-width: 90%;
147
- background-color: white;
148
- border-radius: 8px;
26
+ background-color: var(--sc-overlay-background);
27
+ border-radius: var(--sc-border-radius);
149
28
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
150
29
  overflow: hidden;
151
30
  max-height: 80vh;
@@ -154,7 +33,7 @@ button.dropdown-item[data-v-8e18f635]:hover {
154
33
  }
155
34
  .command-palette-header {
156
35
  display: flex;
157
- border-bottom: 1px solid #eaeaea;
36
+ border-bottom: 1px solid var(--sc-gray-10);
158
37
  padding: 12px;
159
38
  }
160
39
  .command-palette-input {
@@ -170,11 +49,11 @@ button.dropdown-item[data-v-8e18f635]:hover {
170
49
  border: none;
171
50
  font-size: 24px;
172
51
  cursor: pointer;
173
- color: #666;
52
+ color: var(--sc-input-label-color);
174
53
  padding: 0 8px;
175
54
  }
176
55
  .command-palette-close:hover {
177
- color: #333;
56
+ color: var(--sc-gray-80);
178
57
  }
179
58
  .command-palette-results {
180
59
  overflow-y: auto;
@@ -183,23 +62,23 @@ button.dropdown-item[data-v-8e18f635]:hover {
183
62
  .command-palette-result {
184
63
  padding: 12px 16px;
185
64
  cursor: pointer;
186
- border-bottom: 1px solid #f0f0f0;
65
+ border-bottom: 1px solid var(--sc-gray-10);
187
66
  }
188
67
  .command-palette-result:hover,
189
68
  .command-palette-result.selected {
190
- background-color: #f5f5f5;
69
+ background-color: var(--sc-row-hover-color);
191
70
  }
192
71
  .command-palette-result.selected {
193
- background-color: rgba(132, 60, 3, 0.1);
72
+ background-color: var(--sc-color-changed);
194
73
  }
195
74
  .result-title {
196
75
  font-weight: 500;
197
76
  margin-bottom: 4px;
198
- color: #333;
77
+ color: var(--sc-gray-80);
199
78
  }
200
79
  .result-content {
201
80
  font-size: 14px;
202
- color: #666;
81
+ color: var(--sc-input-label-color);
203
82
  white-space: nowrap;
204
83
  overflow: hidden;
205
84
  text-overflow: ellipsis;
@@ -207,12 +86,208 @@ button.dropdown-item[data-v-8e18f635]:hover {
207
86
  .command-palette-no-results {
208
87
  padding: 20px 16px;
209
88
  text-align: center;
210
- color: #666;
89
+ color: var(--sc-input-label-color);
90
+ }
91
+
92
+ .action-set[data-v-40295597] {
93
+ /* Right offset + tile column width + gap: the strip the drawer keeps clear for the tile column. */
94
+ --action-set-rail-inset: calc(10px + 2.75rem + 18px + 8px);
95
+ position: fixed;
96
+ top: var(--sc-action-set-offset-top);
97
+ right: 10px;
98
+ z-index: 1001;
99
+ display: flex;
100
+ flex-direction: row-reverse;
101
+ align-items: flex-start;
102
+ gap: 0;
103
+ }
104
+
105
+ /* Positioned above the drawer, which is a later sibling in the same stacking context. */
106
+ .action-set__tile[data-v-40295597] {
107
+ position: relative;
108
+ z-index: 1;
109
+ display: flex;
110
+ flex-direction: column;
111
+ align-items: center;
112
+ padding: 8px;
113
+ background: var(--sc-form-background);
114
+ border: 1px solid var(--sc-gray-20);
115
+ }
116
+ .action-set__toggle[data-v-40295597] {
117
+ display: flex;
118
+ align-items: center;
119
+ justify-content: center;
120
+ width: 2.75rem;
121
+ height: 2.75rem;
122
+ padding: 0;
123
+ border: none;
124
+ background: transparent;
125
+ font-size: 1.5rem;
126
+ font-weight: 300;
127
+ line-height: 1;
128
+ color: var(--sc-gray-60);
129
+ cursor: pointer;
130
+ transition: transform 0.2s ease-in-out;
131
+ }
132
+ @media (prefers-reduced-motion: reduce) {
133
+ .action-set__toggle[data-v-40295597] {
134
+ transition: none;
135
+ }
136
+ }
137
+ .action-set__toggle--expanded[data-v-40295597] {
138
+ transform: rotate(45deg);
139
+ }
140
+ .action-set__toggle[data-v-40295597]:focus-visible,
141
+ .action-set__item[data-v-40295597]:focus-visible,
142
+ .action-set__drawer-close[data-v-40295597]:focus-visible,
143
+ .action-set__actions-list-item[data-v-40295597]:focus-visible {
144
+ outline: 2px solid var(--sc-primary-color);
145
+ outline-offset: 2px;
146
+ }
147
+ .action-set__item[data-v-40295597] {
148
+ position: relative;
149
+ display: flex;
150
+ align-items: center;
151
+ justify-content: center;
152
+ width: 2.75rem;
153
+ height: 2.75rem;
154
+ margin-top: 8px;
155
+ padding: 0;
156
+ border: 1px solid var(--sc-gray-20);
157
+ background: transparent;
158
+ cursor: pointer;
159
+ font-family: var(--sc-font-family);
160
+ color: var(--sc-gray-80);
161
+ }
162
+ .action-set__item[data-v-40295597]:hover,
163
+ .action-set__item--active[data-v-40295597] {
164
+ background: var(--sc-btn-hover);
165
+ }
166
+ .action-set__item-icon[data-v-40295597] {
167
+ display: block;
168
+ width: 1rem;
169
+ height: 1rem;
170
+ flex-shrink: 0;
171
+ }
172
+ .action-set__item-fallback[data-v-40295597] {
173
+ font-size: 0.85rem;
174
+ font-weight: 600;
175
+ line-height: 1;
176
+ }
177
+ .action-set__item-badge[data-v-40295597] {
178
+ position: absolute;
179
+ top: 2px;
180
+ right: 2px;
181
+ min-width: 14px;
182
+ height: 14px;
183
+ padding: 0 3px;
184
+ border-radius: 7px;
185
+ background: var(--sc-badge-danger-accent);
186
+ color: var(--sc-primary-text-color);
187
+ font-size: 10px;
188
+ font-weight: 600;
189
+ line-height: 14px;
190
+ text-align: center;
191
+ pointer-events: none;
192
+ }
193
+ .action-set__drawer[data-v-40295597] {
194
+ position: fixed;
195
+ top: 0;
196
+ right: 0;
197
+ bottom: 0;
198
+ box-sizing: border-box;
199
+ width: var(--sc-action-set-drawer-width);
200
+ padding-right: var(--action-set-rail-inset);
201
+ background: var(--sc-form-background);
202
+ border-left: 1px solid var(--sc-gray-20);
203
+ display: flex;
204
+ flex-direction: column;
205
+ z-index: 0;
206
+ }
207
+ .action-set__drawer-header[data-v-40295597] {
208
+ display: flex;
209
+ align-items: center;
210
+ justify-content: flex-end;
211
+ padding: 8px 12px;
212
+ flex-shrink: 0;
213
+ }
214
+ .action-set__drawer-close[data-v-40295597] {
215
+ flex-shrink: 0;
216
+ border: none;
217
+ background: transparent;
218
+ font-size: 1.25rem;
219
+ line-height: 1;
220
+ cursor: pointer;
221
+ color: var(--sc-gray-60);
222
+ padding: 0.5rem;
223
+ min-width: 2.75rem;
224
+ min-height: 2.75rem;
225
+ }
226
+ .action-set__drawer-body[data-v-40295597] {
227
+ flex: 1;
228
+ min-height: 0;
229
+ overflow: auto;
230
+ }
231
+ .action-set__drawer-empty[data-v-40295597] {
232
+ padding: 16px 12px;
233
+ margin: 0;
234
+ color: var(--sc-gray-60);
235
+ font-style: italic;
236
+ }
237
+ .action-set__actions-list[data-v-40295597] {
238
+ padding: 8px;
239
+ }
240
+ .action-set__actions-list-item[data-v-40295597] {
241
+ display: block;
242
+ box-sizing: border-box;
243
+ width: 100%;
244
+ padding: 10px 12px;
245
+ margin-bottom: 4px;
246
+ border: 1px solid var(--sc-gray-20);
247
+ background: transparent;
248
+ text-align: left;
249
+ font-size: 0.9rem;
250
+ font-family: var(--sc-font-family);
251
+ font-weight: 500;
252
+ color: var(--sc-gray-80);
253
+ text-decoration: none;
254
+ cursor: pointer;
255
+ }
256
+ .action-set__actions-list-item[data-v-40295597]:hover {
257
+ background: var(--sc-btn-hover);
258
+ }
259
+ .action-set__actions-list-item[data-v-40295597]:disabled {
260
+ opacity: 0.5;
261
+ cursor: not-allowed;
262
+ }
263
+ .action-set__actions-list-item--nested[data-v-40295597] {
264
+ margin-left: 0;
265
+ width: 100%;
266
+ font-weight: 400;
267
+ }
268
+ .action-set__actions-group[data-v-40295597] {
269
+ margin-bottom: 8px;
270
+ }
271
+ .action-set__actions-group-label[data-v-40295597] {
272
+ margin: 4px 0 6px;
273
+ padding: 0 2px;
274
+ font-family: var(--sc-font-family);
275
+ font-size: 0.75rem;
276
+ font-weight: 600;
277
+ letter-spacing: 0.04em;
278
+ text-transform: uppercase;
279
+ color: var(--sc-gray-60);
280
+ }
281
+ .action-set__actions-empty[data-v-40295597] {
282
+ padding: 16px 12px;
283
+ margin: 0;
284
+ color: var(--sc-gray-60);
285
+ font-style: italic;
211
286
  }
212
287
 
213
288
  /* Pinned to both edges: without `left`, a fixed box takes its container's offset and overflows the
214
289
  viewport. Only the toolbar and the tabs take pointer events; the empty strip passes clicks through. */
215
- footer[data-v-7c905747] {
290
+ footer[data-v-cdbbd2a0] {
216
291
  position: fixed;
217
292
  right: 0;
218
293
  bottom: 0;
@@ -225,12 +300,12 @@ footer[data-v-7c905747] {
225
300
  display: flex;
226
301
  justify-content: flex-end;
227
302
  align-items: flex-end;
228
- padding: 0 0.75rem 0 0;
303
+ padding: 0 1px 0 0;
229
304
  box-sizing: border-box;
230
305
  }
231
306
 
232
307
  /* When the toolbar and the tabs do not fit on one row, the toolbar wraps onto its own row above. */
233
- .sheetnav-footer-cluster[data-v-7c905747] {
308
+ .sheetnav-footer-cluster[data-v-cdbbd2a0] {
234
309
  display: flex;
235
310
  flex-wrap: wrap;
236
311
  justify-content: flex-end;
@@ -239,7 +314,7 @@ footer[data-v-7c905747] {
239
314
  max-width: 100%;
240
315
  min-width: 0;
241
316
  }
242
- .sheetnav-toolbar[data-v-7c905747] {
317
+ .sheetnav-toolbar[data-v-cdbbd2a0] {
243
318
  pointer-events: auto;
244
319
  min-width: 0;
245
320
  min-height: 2.4rem;
@@ -248,7 +323,7 @@ footer[data-v-7c905747] {
248
323
  justify-content: flex-end;
249
324
  align-items: center;
250
325
  }
251
- .tabs[data-v-7c905747] {
326
+ .tabs[data-v-cdbbd2a0] {
252
327
  pointer-events: auto;
253
328
  flex: 0 0 auto;
254
329
  display: flex;
@@ -259,16 +334,15 @@ footer[data-v-7c905747] {
259
334
  padding: 0;
260
335
  list-style: none;
261
336
  }
262
- .tabs li[data-v-7c905747] {
337
+ .tabs li[data-v-cdbbd2a0] {
263
338
  display: flex;
264
339
  align-items: stretch;
265
340
  list-style-type: none;
266
341
  position: relative;
267
342
  margin-left: -1px;
268
343
  }
269
-
270
- /* Base tab styling */
271
- .tabs a[data-v-7c905747] {
344
+ .tabs a[data-v-cdbbd2a0],
345
+ .hidebreadcrumbs-btn[data-v-cdbbd2a0] {
272
346
  height: 100%;
273
347
  min-height: 2.4rem;
274
348
  padding: 0 1rem;
@@ -279,37 +353,38 @@ footer[data-v-7c905747] {
279
353
  text-decoration: none;
280
354
  color: var(--sc-gray-60);
281
355
  background: var(--sc-btn-color);
282
- border: 1px solid var(--sc-btn-border);
356
+ border: 1px solid var(--sc-form-border);
357
+ border-radius: var(--sc-border-radius);
283
358
  font-size: 0.85rem;
284
359
  font-family: var(--sc-font-family);
285
- transition: all 0.15s ease;
360
+ transition:
361
+ background 0.15s ease,
362
+ border-color 0.15s ease;
363
+ }
286
364
 
287
- /* Minimal ornamentation - subtle top radius only */
288
- border-top-left-radius: 2px;
289
- border-top-right-radius: 2px;
365
+ /* row-reverse: the last li is the left edge of the strip. */
366
+ .tabs li:last-child a[data-v-cdbbd2a0],
367
+ .tabs li:last-child .hidebreadcrumbs-btn[data-v-cdbbd2a0] {
368
+ border-left-width: 4px;
290
369
  }
291
- .tabs a[data-v-7c905747]:hover {
370
+ .tabs a[data-v-cdbbd2a0]:hover,
371
+ .hidebreadcrumbs-btn[data-v-cdbbd2a0]:hover {
292
372
  background: var(--sc-btn-hover);
293
373
  }
294
- .tabs .router-link-active[data-v-7c905747] {
374
+ .tabs .router-link-exact-active[data-v-cdbbd2a0] {
295
375
  z-index: 3;
296
- background: var(--sc-primary-color) !important;
297
- border-color: var(--sc-primary-color) !important;
298
- color: var(--sc-primary-text-color) !important;
376
+ background: var(--sc-gray-5);
377
+ color: var(--sc-gray-80);
299
378
  }
300
-
301
- /* Pseudo-elements removed - minimal ornamentation style */
302
-
303
- /* Hide breadcrumbs tab */
304
- .hidebreadcrumbs a[data-v-7c905747] {
379
+ .hidebreadcrumbs-btn[data-v-cdbbd2a0] {
305
380
  min-width: 2.4rem;
306
381
  width: 2.4rem;
307
382
  padding: 0.5rem;
308
- }
309
- .hidebreadcrumbs a div[data-v-7c905747] {
383
+ cursor: pointer;
310
384
  font-size: 1.2rem;
385
+ line-height: 1;
311
386
  }
312
- .rotated[data-v-7c905747] {
387
+ .rotated[data-v-cdbbd2a0] {
313
388
  transform: rotate(45deg);
314
389
  -webkit-transform: rotate(45deg);
315
390
  -moz-transform: rotate(45deg);
@@ -317,7 +392,7 @@ footer[data-v-7c905747] {
317
392
  -o-transform: rotate(45deg);
318
393
  transition: transform 250ms ease;
319
394
  }
320
- .unrotated[data-v-7c905747] {
395
+ .unrotated[data-v-cdbbd2a0] {
321
396
  transform: rotate(0deg);
322
397
  -webkit-transform: rotate(0deg);
323
398
  -moz-transform: rotate(0deg);
@@ -325,86 +400,112 @@ footer[data-v-7c905747] {
325
400
  -o-transform: rotate(0deg);
326
401
  transition: transform 250ms ease;
327
402
  }
328
- li[data-v-7c905747]:active,
329
- li[data-v-7c905747]:hover,
330
- li[data-v-7c905747]:focus,
331
- li > a[data-v-7c905747]:active,
332
- li > a[data-v-7c905747]:hover,
333
- li > a[data-v-7c905747]:focus {
403
+ li[data-v-cdbbd2a0]:active,
404
+ li[data-v-cdbbd2a0]:hover,
405
+ li[data-v-cdbbd2a0]:focus,
406
+ li > a[data-v-cdbbd2a0]:active,
407
+ li > a[data-v-cdbbd2a0]:hover,
408
+ li > a[data-v-cdbbd2a0]:focus,
409
+ .hidebreadcrumbs-btn[data-v-cdbbd2a0]:hover,
410
+ .hidebreadcrumbs-btn[data-v-cdbbd2a0]:focus {
334
411
  z-index: 3;
335
412
  }
336
- a[data-v-7c905747]:active,
337
- a[data-v-7c905747]:hover,
338
- a[data-v-7c905747]:focus {
339
- outline: 2px solid var(--sc-input-active-border-color);
413
+ a[data-v-cdbbd2a0]:focus,
414
+ .hidebreadcrumbs-btn[data-v-cdbbd2a0]:focus {
415
+ outline: none;
416
+ }
417
+ a[data-v-cdbbd2a0]:focus-visible,
418
+ .hidebreadcrumbs-btn[data-v-cdbbd2a0]:focus-visible {
419
+ outline: 1px solid var(--sc-input-active-border-color);
420
+ outline-offset: -1px;
340
421
  z-index: 3;
341
422
  }
342
-
343
- /* Home tab */
344
- .hometab a[data-v-7c905747] {
423
+ .hometab a[data-v-cdbbd2a0] {
345
424
  min-width: 2.4rem;
346
425
  width: 2.4rem;
347
426
  padding: 0.5rem;
348
427
  }
349
-
350
- /* SVG icon styling */
351
- .icon[data-v-7c905747] {
428
+ .icon[data-v-cdbbd2a0] {
352
429
  width: 1rem;
353
430
  height: 1rem;
354
431
  stroke: currentColor;
355
432
  flex-shrink: 0;
356
433
  }
357
434
 
358
- /* Search tab with animation */
359
- .searchtab[data-v-7c905747] {
435
+ .desktop[data-v-378bae6b] {
436
+ position: relative;
437
+ height: 100%;
438
+ display: flex;
439
+ flex-direction: column;
440
+ min-height: 0;
360
441
  overflow: hidden;
361
442
  }
362
- .searchtab a[data-v-7c905747] {
363
- min-width: 2.4rem;
364
- padding: 0.5rem;
365
- overflow: hidden;
366
- /* Animation for smooth expand/collapse */
367
- max-width: 2.4rem;
368
- transition:
369
- max-width 0.35s ease-in-out,
370
- padding 0.35s ease-in-out,
371
- background 0.2s ease;
443
+ .desktop__workspace[data-v-378bae6b] {
444
+ display: flex;
445
+ flex: 1;
446
+ min-height: 0;
447
+ min-width: 0;
448
+ margin-right: 0;
449
+ transition: margin-right 0.25s ease-out;
372
450
  }
373
- .searchtab .search-icon[data-v-7c905747] {
374
- cursor: pointer;
451
+ .desktop--action-set-open .desktop__workspace[data-v-378bae6b] {
452
+ margin-right: var(--sc-action-set-drawer-width);
375
453
  }
376
- .searchtab input[data-v-7c905747] {
377
- outline: none;
378
- border: 1px solid var(--sc-input-border-color);
379
- border-radius: 0.25rem;
380
- background-color: var(--sc-form-background);
381
- color: var(--sc-gray-80);
382
- text-align: left;
383
- font-size: 0.875rem;
384
- padding: 0.25rem 0.5rem;
385
- width: 180px;
386
- height: 1.5rem;
454
+
455
+ /* SheetNav is fixed to the viewport, so the workspace margin does not move it clear of the drawer. */
456
+ .desktop__sheetnav[data-v-378bae6b] {
457
+ transition: right 0.25s ease-out;
458
+ }
459
+ .desktop--action-set-open .desktop__sheetnav[data-v-378bae6b] {
460
+ right: var(--sc-action-set-drawer-width);
461
+ }
462
+ .desktop__main[data-v-378bae6b] {
463
+ flex: 1;
464
+ min-width: 0;
465
+ min-height: 0;
466
+ overflow: auto;
467
+ }
468
+ .desktop--preview-open .desktop__main[data-v-378bae6b] {
469
+ flex: 0 0 calc(50% - 10px);
470
+ max-width: calc(50% - 10px);
471
+ }
472
+ .desktop__preview[data-v-378bae6b] {
473
+ flex: 0 0 50%;
474
+ max-width: 50%;
475
+ min-width: 0;
476
+ min-height: 0;
477
+ display: flex;
478
+ flex-direction: column;
479
+ border-left: 1px solid var(--sc-gray-20);
480
+ background: var(--sc-form-background);
481
+ overflow: hidden;
482
+ }
483
+ .desktop__preview-header[data-v-378bae6b] {
484
+ display: flex;
485
+ justify-content: flex-end;
486
+ align-items: center;
487
+ height: 40px;
488
+ padding: 0 8px;
489
+ border-bottom: 1px solid var(--sc-gray-20);
387
490
  flex-shrink: 0;
388
- opacity: 0;
389
- transition: opacity 0.2s ease-in-out;
390
- transition-delay: 0s;
391
491
  }
392
- .searchtab input[data-v-7c905747]:focus {
393
- border-color: var(--sc-input-active-border-color);
394
- outline: none;
492
+ .desktop__preview-close[data-v-378bae6b] {
493
+ border: none;
494
+ background: transparent;
495
+ font-size: 1.25rem;
496
+ line-height: 1;
497
+ cursor: pointer;
498
+ color: var(--sc-gray-60);
395
499
  }
396
- .searchtab input[data-v-7c905747]::placeholder {
397
- color: var(--sc-input-label-color);
500
+ .desktop__preview-body[data-v-378bae6b] {
501
+ flex: 1;
502
+ min-height: 0;
503
+ overflow: auto;
398
504
  }
399
-
400
- /* Search active state - expanded with animation */
401
- .searchtab.search-active a[data-v-7c905747] {
402
- max-width: 200px;
403
- min-width: auto;
404
- width: auto;
405
- padding: 0.5rem 0.75rem;
406
- }
407
- .searchtab.search-active input[data-v-7c905747] {
408
- opacity: 1;
409
- transition-delay: 0.15s;
505
+ .loading[data-v-378bae6b] {
506
+ display: flex;
507
+ align-items: center;
508
+ justify-content: center;
509
+ min-height: 50vh;
510
+ color: var(--sc-gray-60);
410
511
  }