@cluesmith/codev 1.4.1 → 1.4.2

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,149 @@
1
+ /* Dialogs, Modals, Context Menus, Toasts */
2
+
3
+ /* Dialog overlay */
4
+ .dialog-overlay {
5
+ position: fixed;
6
+ top: 0;
7
+ left: 0;
8
+ right: 0;
9
+ bottom: 0;
10
+ background: rgba(0, 0, 0, 0.6);
11
+ display: flex;
12
+ align-items: center;
13
+ justify-content: center;
14
+ z-index: 1000;
15
+ }
16
+
17
+ .dialog-overlay.hidden {
18
+ display: none;
19
+ }
20
+
21
+ .dialog {
22
+ background: var(--bg-secondary);
23
+ border: 1px solid var(--border);
24
+ border-radius: 8px;
25
+ padding: 20px;
26
+ min-width: 320px;
27
+ max-width: 90%;
28
+ }
29
+
30
+ .dialog h3 {
31
+ margin-bottom: 16px;
32
+ font-size: 16px;
33
+ font-weight: 500;
34
+ }
35
+
36
+ .dialog input {
37
+ width: 100%;
38
+ padding: 8px 12px;
39
+ border-radius: 4px;
40
+ border: 1px solid var(--border);
41
+ background: var(--bg-tertiary);
42
+ color: var(--text-primary);
43
+ font-size: 14px;
44
+ margin-bottom: 16px;
45
+ }
46
+
47
+ .dialog input:focus {
48
+ outline: none;
49
+ border-color: var(--accent);
50
+ }
51
+
52
+ .dialog-actions {
53
+ display: flex;
54
+ justify-content: flex-end;
55
+ gap: 8px;
56
+ }
57
+
58
+ .quick-paths {
59
+ display: flex;
60
+ flex-wrap: wrap;
61
+ gap: 8px;
62
+ margin-bottom: 12px;
63
+ }
64
+
65
+ .quick-path {
66
+ padding: 4px 8px;
67
+ border-radius: 4px;
68
+ background: var(--bg-tertiary);
69
+ border: 1px solid var(--border);
70
+ color: var(--text-secondary);
71
+ cursor: pointer;
72
+ font-size: 12px;
73
+ }
74
+
75
+ .quick-path:hover {
76
+ background: var(--tab-hover);
77
+ border-color: var(--accent);
78
+ }
79
+
80
+ /* Toast notifications */
81
+ .toast-container {
82
+ position: fixed;
83
+ bottom: 60px;
84
+ right: 16px;
85
+ z-index: 2000;
86
+ display: flex;
87
+ flex-direction: column;
88
+ gap: 8px;
89
+ }
90
+
91
+ .toast {
92
+ padding: 12px 16px;
93
+ background: var(--bg-secondary);
94
+ border: 1px solid var(--border);
95
+ border-radius: 6px;
96
+ font-size: 13px;
97
+ display: flex;
98
+ align-items: center;
99
+ gap: 8px;
100
+ animation: toast-in 0.3s ease-out;
101
+ }
102
+
103
+ .toast.error {
104
+ border-color: #ef4444;
105
+ }
106
+
107
+ .toast.success {
108
+ border-color: #22c55e;
109
+ }
110
+
111
+ @keyframes toast-in {
112
+ from {
113
+ opacity: 0;
114
+ transform: translateY(10px);
115
+ }
116
+ to {
117
+ opacity: 1;
118
+ transform: translateY(0);
119
+ }
120
+ }
121
+
122
+ /* Context menu */
123
+ .context-menu {
124
+ position: fixed;
125
+ background: var(--bg-secondary);
126
+ border: 1px solid var(--border);
127
+ border-radius: 4px;
128
+ padding: 4px 0;
129
+ min-width: 150px;
130
+ z-index: 1000;
131
+ }
132
+
133
+ .context-menu.hidden {
134
+ display: none;
135
+ }
136
+
137
+ .context-menu-item {
138
+ padding: 8px 12px;
139
+ cursor: pointer;
140
+ font-size: 13px;
141
+ }
142
+
143
+ .context-menu-item:hover {
144
+ background: var(--tab-hover);
145
+ }
146
+
147
+ .context-menu-item.danger {
148
+ color: #ef4444;
149
+ }
@@ -0,0 +1,530 @@
1
+ /* File Tree, File Search, Cmd+P Palette */
2
+
3
+ /* Tree Styles (used by dashboard file browser) */
4
+ .tree-item {
5
+ display: flex;
6
+ align-items: center;
7
+ padding: 4px 8px;
8
+ cursor: pointer;
9
+ user-select: none;
10
+ }
11
+
12
+ .tree-item:hover {
13
+ background: var(--bg-secondary);
14
+ }
15
+
16
+ .tree-item.selected {
17
+ background: var(--tab-active);
18
+ }
19
+
20
+ .tree-item-icon {
21
+ width: 16px;
22
+ height: 16px;
23
+ margin-right: 4px;
24
+ display: flex;
25
+ align-items: center;
26
+ justify-content: center;
27
+ font-size: 10px;
28
+ color: var(--text-muted);
29
+ }
30
+
31
+ .tree-item-icon.folder-toggle {
32
+ cursor: pointer;
33
+ }
34
+
35
+ .tree-item-icon.folder-toggle:hover {
36
+ color: var(--text-secondary);
37
+ }
38
+
39
+ .tree-item-name {
40
+ font-size: 13px;
41
+ color: var(--text-secondary);
42
+ overflow: hidden;
43
+ text-overflow: ellipsis;
44
+ white-space: nowrap;
45
+ }
46
+
47
+ .tree-item:hover .tree-item-name {
48
+ color: var(--text-primary);
49
+ }
50
+
51
+ .tree-item[data-type="dir"] .tree-item-name {
52
+ color: var(--text-primary);
53
+ }
54
+
55
+ .tree-item[data-type="file"]:hover .tree-item-name {
56
+ color: var(--accent);
57
+ }
58
+
59
+ .tree-children {
60
+ overflow: hidden;
61
+ }
62
+
63
+ .tree-children.collapsed {
64
+ display: none;
65
+ }
66
+
67
+ /* Dashboard Tab Styles (Spec 0057) */
68
+ .dashboard-container {
69
+ flex: 1;
70
+ overflow-y: auto;
71
+ display: flex;
72
+ flex-direction: column;
73
+ }
74
+
75
+ .dashboard-header {
76
+ display: flex;
77
+ gap: 16px;
78
+ padding: 16px;
79
+ flex-shrink: 0;
80
+ }
81
+
82
+ @media (max-width: 900px) {
83
+ .dashboard-header {
84
+ flex-direction: column;
85
+ }
86
+ }
87
+
88
+ /* Collapsible section styles */
89
+ .dashboard-section {
90
+ background: var(--bg-secondary);
91
+ border: 1px solid var(--border);
92
+ border-radius: 8px;
93
+ overflow: hidden;
94
+ display: flex;
95
+ flex-direction: column;
96
+ }
97
+
98
+ .dashboard-section.section-tabs,
99
+ .dashboard-section.section-files {
100
+ flex: 1;
101
+ max-height: 280px;
102
+ }
103
+
104
+ .dashboard-section.section-projects {
105
+ flex: 0 0 auto;
106
+ margin: 0 16px 16px 16px;
107
+ max-height: 50%;
108
+ overflow-y: auto;
109
+ }
110
+
111
+ .dashboard-section.section-projects .dashboard-section-content {
112
+ flex: 0 0 auto;
113
+ }
114
+
115
+ /* Tabs/Files expand to fill remaining space above Projects */
116
+ .dashboard-header {
117
+ flex: 1;
118
+ min-height: 0;
119
+ }
120
+
121
+ .dashboard-section.section-tabs,
122
+ .dashboard-section.section-files {
123
+ max-height: none;
124
+ }
125
+
126
+ .dashboard-section-header {
127
+ display: flex;
128
+ justify-content: space-between;
129
+ align-items: center;
130
+ padding: 8px 12px;
131
+ cursor: pointer;
132
+ user-select: none;
133
+ flex-shrink: 0;
134
+ border-bottom: 1px solid var(--border);
135
+ }
136
+
137
+ .dashboard-section-header:hover {
138
+ background: var(--bg-tertiary);
139
+ }
140
+
141
+ .dashboard-section-header h3 {
142
+ font-size: 12px;
143
+ text-transform: uppercase;
144
+ color: var(--text-muted);
145
+ letter-spacing: 0.5px;
146
+ margin: 0;
147
+ display: flex;
148
+ align-items: center;
149
+ gap: 6px;
150
+ }
151
+
152
+ .dashboard-section-header .collapse-icon {
153
+ font-size: 10px;
154
+ transition: transform 0.2s;
155
+ }
156
+
157
+ .dashboard-section.collapsed .collapse-icon {
158
+ transform: rotate(-90deg);
159
+ }
160
+
161
+ .dashboard-section.collapsed .dashboard-section-header {
162
+ border-bottom: none;
163
+ }
164
+
165
+ .dashboard-section-header .header-actions {
166
+ display: flex;
167
+ gap: 4px;
168
+ }
169
+
170
+ .dashboard-section-header .header-actions button {
171
+ padding: 4px 8px;
172
+ border-radius: 4px;
173
+ border: 1px solid var(--border);
174
+ background: var(--bg-tertiary);
175
+ color: var(--text-secondary);
176
+ cursor: pointer;
177
+ font-size: 11px;
178
+ }
179
+
180
+ .dashboard-section-header .header-actions button:hover {
181
+ background: var(--tab-hover);
182
+ color: var(--text-primary);
183
+ }
184
+
185
+ .dashboard-section-content {
186
+ flex: 1;
187
+ overflow-y: auto;
188
+ padding: 8px 12px;
189
+ }
190
+
191
+ .dashboard-section.collapsed .dashboard-section-content {
192
+ display: none;
193
+ }
194
+
195
+ /* Legacy support */
196
+ .dashboard-column {
197
+ background: var(--bg-secondary);
198
+ border: 1px solid var(--border);
199
+ border-radius: 8px;
200
+ padding: 12px;
201
+ overflow: hidden;
202
+ display: flex;
203
+ flex-direction: column;
204
+ max-height: 280px;
205
+ }
206
+
207
+ .dashboard-column-header {
208
+ display: flex;
209
+ justify-content: space-between;
210
+ align-items: center;
211
+ margin-bottom: 8px;
212
+ flex-shrink: 0;
213
+ }
214
+
215
+ .dashboard-column-header h3 {
216
+ font-size: 12px;
217
+ text-transform: uppercase;
218
+ color: var(--text-muted);
219
+ letter-spacing: 0.5px;
220
+ margin: 0;
221
+ }
222
+
223
+ .dashboard-column-header .header-actions {
224
+ display: flex;
225
+ gap: 4px;
226
+ }
227
+
228
+ .dashboard-column-header .header-actions button {
229
+ padding: 4px 8px;
230
+ border-radius: 4px;
231
+ border: 1px solid var(--border);
232
+ background: var(--bg-tertiary);
233
+ color: var(--text-secondary);
234
+ cursor: pointer;
235
+ font-size: 11px;
236
+ }
237
+
238
+ .dashboard-column-header .header-actions button:hover {
239
+ background: var(--tab-hover);
240
+ color: var(--text-primary);
241
+ }
242
+
243
+ .dashboard-tabs-list {
244
+ flex: 1;
245
+ overflow-y: auto;
246
+ margin-bottom: 8px;
247
+ }
248
+
249
+ .dashboard-tab-item {
250
+ display: flex;
251
+ align-items: center;
252
+ gap: 8px;
253
+ padding: 6px 8px;
254
+ border-radius: 4px;
255
+ cursor: pointer;
256
+ font-size: 13px;
257
+ color: var(--text-secondary);
258
+ }
259
+
260
+ .dashboard-tab-item:hover {
261
+ background: var(--bg-tertiary);
262
+ }
263
+
264
+ .dashboard-tab-item.active {
265
+ background: var(--accent);
266
+ color: white;
267
+ }
268
+
269
+ .dashboard-tab-item .tab-icon {
270
+ font-size: 14px;
271
+ flex-shrink: 0;
272
+ }
273
+
274
+ .dashboard-tab-item .tab-name {
275
+ flex: 1;
276
+ overflow: hidden;
277
+ text-overflow: ellipsis;
278
+ white-space: nowrap;
279
+ }
280
+
281
+ .dashboard-actions {
282
+ flex-shrink: 0;
283
+ display: flex;
284
+ gap: 8px;
285
+ }
286
+
287
+ .dashboard-actions .btn-action {
288
+ flex: 1;
289
+ padding: 8px 12px;
290
+ border-radius: 4px;
291
+ border: 1px dashed var(--border);
292
+ background: transparent;
293
+ color: var(--text-muted);
294
+ cursor: pointer;
295
+ font-size: 12px;
296
+ display: flex;
297
+ align-items: center;
298
+ justify-content: center;
299
+ gap: 4px;
300
+ }
301
+
302
+ .dashboard-actions .btn-action:hover {
303
+ border-style: solid;
304
+ color: var(--text-secondary);
305
+ background: var(--bg-tertiary);
306
+ }
307
+
308
+ .dashboard-files-list {
309
+ flex: 1;
310
+ overflow-y: auto;
311
+ }
312
+
313
+ .dashboard-files-list .tree-item {
314
+ padding: 3px 6px;
315
+ font-size: 12px;
316
+ }
317
+
318
+ .dashboard-files-list .tree-item-name {
319
+ font-size: 12px;
320
+ }
321
+
322
+ /* File search styles (Spec 0058) */
323
+ .files-search-container {
324
+ display: flex;
325
+ align-items: center;
326
+ padding: 6px 8px;
327
+ gap: 6px;
328
+ border-bottom: 1px solid var(--border);
329
+ }
330
+
331
+ .files-search-input {
332
+ flex: 1;
333
+ background: var(--bg-tertiary);
334
+ border: 1px solid var(--border);
335
+ border-radius: 4px;
336
+ padding: 6px 10px;
337
+ font-size: 12px;
338
+ color: var(--text-primary);
339
+ outline: none;
340
+ }
341
+
342
+ .files-search-input:focus {
343
+ border-color: var(--accent);
344
+ }
345
+
346
+ .files-search-input::placeholder {
347
+ color: var(--text-muted);
348
+ }
349
+
350
+ .files-search-clear {
351
+ background: transparent;
352
+ border: none;
353
+ color: var(--text-muted);
354
+ cursor: pointer;
355
+ font-size: 14px;
356
+ padding: 2px 6px;
357
+ border-radius: 4px;
358
+ line-height: 1;
359
+ }
360
+
361
+ .files-search-clear:hover {
362
+ color: var(--text-primary);
363
+ background: var(--bg-tertiary);
364
+ }
365
+
366
+ .files-search-clear.hidden {
367
+ display: none;
368
+ }
369
+
370
+ .files-search-results {
371
+ flex: 1;
372
+ overflow-y: auto;
373
+ }
374
+
375
+ .files-search-result {
376
+ padding: 6px 12px;
377
+ cursor: pointer;
378
+ display: flex;
379
+ flex-direction: column;
380
+ gap: 2px;
381
+ }
382
+
383
+ .files-search-result:hover,
384
+ .files-search-result.selected {
385
+ background: var(--bg-tertiary);
386
+ }
387
+
388
+ .files-search-result-name {
389
+ font-size: 12px;
390
+ color: var(--text-primary);
391
+ }
392
+
393
+ .files-search-result-path {
394
+ font-size: 11px;
395
+ color: var(--text-muted);
396
+ overflow: hidden;
397
+ text-overflow: ellipsis;
398
+ white-space: nowrap;
399
+ }
400
+
401
+ .files-search-highlight {
402
+ color: var(--accent);
403
+ font-weight: 500;
404
+ }
405
+
406
+ /* Cmd+P Palette styles (Spec 0058) */
407
+ .file-palette {
408
+ position: fixed;
409
+ inset: 0;
410
+ z-index: 1000;
411
+ display: flex;
412
+ justify-content: center;
413
+ padding-top: 80px;
414
+ }
415
+
416
+ .file-palette.hidden {
417
+ display: none;
418
+ }
419
+
420
+ .file-palette-backdrop {
421
+ position: absolute;
422
+ inset: 0;
423
+ background: rgba(0, 0, 0, 0.5);
424
+ }
425
+
426
+ .file-palette-container {
427
+ position: relative;
428
+ width: 500px;
429
+ max-width: 90vw;
430
+ max-height: 450px;
431
+ background: var(--bg-secondary);
432
+ border: 1px solid var(--border);
433
+ border-radius: 8px;
434
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
435
+ display: flex;
436
+ flex-direction: column;
437
+ overflow: hidden;
438
+ }
439
+
440
+ .file-palette-input {
441
+ width: 100%;
442
+ padding: 14px 16px;
443
+ background: var(--bg-tertiary);
444
+ border: none;
445
+ border-bottom: 1px solid var(--border);
446
+ font-size: 14px;
447
+ color: var(--text-primary);
448
+ outline: none;
449
+ }
450
+
451
+ .file-palette-input::placeholder {
452
+ color: var(--text-muted);
453
+ }
454
+
455
+ .file-palette-results {
456
+ flex: 1;
457
+ overflow-y: auto;
458
+ max-height: 380px;
459
+ }
460
+
461
+ .file-palette-result {
462
+ padding: 10px 16px;
463
+ cursor: pointer;
464
+ display: flex;
465
+ flex-direction: column;
466
+ gap: 2px;
467
+ }
468
+
469
+ .file-palette-result:hover,
470
+ .file-palette-result.selected {
471
+ background: var(--bg-tertiary);
472
+ }
473
+
474
+ .file-palette-result-name {
475
+ font-size: 13px;
476
+ color: var(--text-primary);
477
+ }
478
+
479
+ .file-palette-result-path {
480
+ font-size: 12px;
481
+ color: var(--text-muted);
482
+ overflow: hidden;
483
+ text-overflow: ellipsis;
484
+ white-space: nowrap;
485
+ }
486
+
487
+ .file-palette-empty {
488
+ padding: 16px;
489
+ text-align: center;
490
+ color: var(--text-muted);
491
+ font-size: 13px;
492
+ }
493
+
494
+ .dashboard-empty-state {
495
+ color: var(--text-muted);
496
+ font-size: 13px;
497
+ padding: 12px;
498
+ text-align: center;
499
+ }
500
+
501
+ /* Status indicators in dashboard tab list */
502
+ .dashboard-status-indicator {
503
+ width: 8px;
504
+ height: 8px;
505
+ border-radius: 50%;
506
+ flex-shrink: 0;
507
+ }
508
+
509
+ .dashboard-status-working {
510
+ background: var(--status-active);
511
+ animation: status-pulse 2s ease-in-out infinite;
512
+ }
513
+
514
+ .dashboard-status-idle {
515
+ background: var(--status-waiting);
516
+ animation: status-blink-slow 3s ease-in-out infinite;
517
+ }
518
+
519
+ .dashboard-status-blocked {
520
+ background: var(--status-error);
521
+ animation: status-blink-fast 0.8s ease-in-out infinite;
522
+ }
523
+
524
+ @media (prefers-reduced-motion: reduce) {
525
+ .dashboard-status-working,
526
+ .dashboard-status-idle,
527
+ .dashboard-status-blocked {
528
+ animation: none;
529
+ }
530
+ }