@compose-market/theme 0.0.93 → 0.0.95
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.
- package/dist/css/session.css +12 -10
- package/dist/css/shell.css +110 -12
- package/dist/session/styles.d.ts +1 -1
- package/dist/session/styles.d.ts.map +1 -1
- package/dist/session/styles.js +12 -10
- package/dist/session/styles.js.map +1 -1
- package/dist/shell/styles.d.ts +1 -1
- package/dist/shell/styles.d.ts.map +1 -1
- package/dist/shell/styles.js +110 -12
- package/dist/shell/styles.js.map +1 -1
- package/package.json +2 -2
package/dist/css/session.css
CHANGED
|
@@ -9,8 +9,14 @@
|
|
|
9
9
|
|
|
10
10
|
.cm-session-trigger {
|
|
11
11
|
border-color: hsl(var(--primary) / 0.35);
|
|
12
|
-
background:
|
|
12
|
+
background:
|
|
13
|
+
radial-gradient(circle at 18% 0%, hsl(var(--primary) / 0.16), transparent 38%),
|
|
14
|
+
radial-gradient(circle at 82% 100%, hsl(var(--accent) / 0.12), transparent 42%),
|
|
15
|
+
linear-gradient(145deg, hsl(226 21% 22% / 0.56), hsl(221 50% 8% / 0.48));
|
|
13
16
|
color: hsl(var(--primary));
|
|
17
|
+
box-shadow:
|
|
18
|
+
inset 0 1px 0 hsl(0 0% 100% / 0.07),
|
|
19
|
+
0 0 22px hsl(var(--primary) / 0.11);
|
|
14
20
|
}
|
|
15
21
|
|
|
16
22
|
.cm-app-chrome__hud .cm-session-menu,
|
|
@@ -21,10 +27,11 @@
|
|
|
21
27
|
.cm-app-chrome__hud .cm-session-trigger,
|
|
22
28
|
.cm-app-chrome__hud-popover .cm-session-trigger {
|
|
23
29
|
width: auto;
|
|
24
|
-
min-width:
|
|
30
|
+
min-width: max-content;
|
|
31
|
+
max-width: min(13.5rem, 52vw);
|
|
25
32
|
min-height: var(--cm-hud-size, 2.75rem);
|
|
26
33
|
height: var(--cm-hud-size, 2.75rem);
|
|
27
|
-
padding-inline: clamp(0.
|
|
34
|
+
padding-inline: clamp(0.78rem, 1.35vw, 1rem);
|
|
28
35
|
border-radius: 999px;
|
|
29
36
|
white-space: nowrap;
|
|
30
37
|
}
|
|
@@ -274,19 +281,14 @@
|
|
|
274
281
|
|
|
275
282
|
.cm-app-chrome__hud .cm-session-trigger {
|
|
276
283
|
width: auto;
|
|
277
|
-
min-width:
|
|
284
|
+
min-width: max-content;
|
|
278
285
|
padding-inline: 0.72rem;
|
|
279
286
|
}
|
|
280
287
|
}
|
|
281
288
|
|
|
282
289
|
@media (max-width: 380px) {
|
|
283
290
|
.cm-app-chrome__hud .cm-session-trigger {
|
|
284
|
-
width:
|
|
285
|
-
padding-inline: 0;
|
|
286
|
-
}
|
|
287
|
-
|
|
288
|
-
.cm-app-chrome__hud .cm-session-trigger__mobile {
|
|
289
|
-
display: none;
|
|
291
|
+
max-width: min(10.5rem, 58vw);
|
|
290
292
|
}
|
|
291
293
|
}
|
|
292
294
|
|
package/dist/css/shell.css
CHANGED
|
@@ -206,9 +206,9 @@
|
|
|
206
206
|
min-width: 0;
|
|
207
207
|
min-height: 100dvh;
|
|
208
208
|
padding:
|
|
209
|
-
calc(env(safe-area-inset-top) + clamp(4.
|
|
210
|
-
clamp(
|
|
211
|
-
calc(env(safe-area-inset-bottom) + clamp(5.
|
|
209
|
+
calc(env(safe-area-inset-top) + clamp(4.8rem, 7vw, 5.9rem))
|
|
210
|
+
clamp(5.25rem, 6vw, 7rem)
|
|
211
|
+
calc(env(safe-area-inset-bottom) + clamp(5.35rem, 7.4vw, 6.35rem));
|
|
212
212
|
}
|
|
213
213
|
|
|
214
214
|
.cm-app-chrome__navdock {
|
|
@@ -358,27 +358,38 @@
|
|
|
358
358
|
.cm-app-chrome__hud-group {
|
|
359
359
|
container-type: inline-size;
|
|
360
360
|
display: flex;
|
|
361
|
-
|
|
361
|
+
width: min(100%, 68rem);
|
|
362
362
|
min-width: 0;
|
|
363
363
|
align-items: center;
|
|
364
364
|
justify-content: flex-end;
|
|
365
365
|
gap: var(--cm-chrome-gap);
|
|
366
|
+
flex-wrap: nowrap;
|
|
366
367
|
pointer-events: auto;
|
|
367
368
|
}
|
|
368
369
|
|
|
369
370
|
.cm-app-chrome__hud-item,
|
|
370
|
-
.cm-app-chrome__hud-fold
|
|
371
|
+
.cm-app-chrome__hud-fold,
|
|
372
|
+
.cm-app-chrome__search {
|
|
371
373
|
position: relative;
|
|
372
|
-
min-width:
|
|
373
|
-
flex: 0
|
|
374
|
+
min-width: max-content;
|
|
375
|
+
flex: 0 0 auto;
|
|
376
|
+
}
|
|
377
|
+
|
|
378
|
+
.cm-app-chrome__search {
|
|
379
|
+
display: inline-flex;
|
|
380
|
+
min-width: var(--cm-hud-size);
|
|
381
|
+
align-items: center;
|
|
382
|
+
justify-content: flex-end;
|
|
383
|
+
gap: var(--cm-chrome-gap);
|
|
374
384
|
}
|
|
375
385
|
|
|
376
386
|
.cm-app-chrome__hud-item[data-priority="low"] {
|
|
377
|
-
flex-shrink:
|
|
387
|
+
flex-shrink: 0;
|
|
378
388
|
}
|
|
379
389
|
|
|
380
390
|
.cm-hud-button {
|
|
381
391
|
display: inline-flex;
|
|
392
|
+
align-items: center;
|
|
382
393
|
width: auto;
|
|
383
394
|
max-width: min(15.5rem, 52vw);
|
|
384
395
|
justify-content: center;
|
|
@@ -418,6 +429,35 @@
|
|
|
418
429
|
max-width: 8.8rem;
|
|
419
430
|
}
|
|
420
431
|
|
|
432
|
+
.cm-hud-wallet {
|
|
433
|
+
min-width: min(13.75rem, 42vw);
|
|
434
|
+
justify-content: flex-start;
|
|
435
|
+
padding-inline: 0.82rem 0.74rem;
|
|
436
|
+
background:
|
|
437
|
+
radial-gradient(circle at 14% 50%, hsl(var(--primary) / 0.18), transparent 34%),
|
|
438
|
+
radial-gradient(circle at 86% 100%, hsl(var(--accent) / 0.12), transparent 40%),
|
|
439
|
+
linear-gradient(145deg, hsl(226 21% 22% / 0.58), hsl(221 50% 8% / 0.48));
|
|
440
|
+
}
|
|
441
|
+
|
|
442
|
+
.cm-hud-wallet__icon {
|
|
443
|
+
color: hsl(var(--primary));
|
|
444
|
+
opacity: 0.92;
|
|
445
|
+
}
|
|
446
|
+
|
|
447
|
+
.cm-hud-wallet .cm-hud-value {
|
|
448
|
+
color: hsl(var(--foreground));
|
|
449
|
+
font-family: var(--font-display), sans-serif;
|
|
450
|
+
font-size: 0.76rem;
|
|
451
|
+
letter-spacing: 0.05em;
|
|
452
|
+
}
|
|
453
|
+
|
|
454
|
+
.cm-hud-wallet .cm-hud-address {
|
|
455
|
+
color: hsl(var(--primary) / 0.9);
|
|
456
|
+
font-size: 0.68rem;
|
|
457
|
+
font-weight: 650;
|
|
458
|
+
letter-spacing: 0.04em;
|
|
459
|
+
}
|
|
460
|
+
|
|
421
461
|
.cm-hud-status {
|
|
422
462
|
width: 0.48rem;
|
|
423
463
|
height: 0.48rem;
|
|
@@ -533,6 +573,34 @@
|
|
|
533
573
|
box-shadow: inset 0 0 20px hsl(var(--primary) / 0.04);
|
|
534
574
|
}
|
|
535
575
|
|
|
576
|
+
.cm-search--hud {
|
|
577
|
+
width: 0;
|
|
578
|
+
max-width: min(24rem, calc(100vw - var(--cm-chrome-safe) * 2 - var(--cm-hud-size)));
|
|
579
|
+
min-height: var(--cm-hud-size);
|
|
580
|
+
padding-inline: 0;
|
|
581
|
+
border-width: 0;
|
|
582
|
+
opacity: 0;
|
|
583
|
+
overflow: hidden;
|
|
584
|
+
pointer-events: none;
|
|
585
|
+
transform: scaleX(0.92);
|
|
586
|
+
transform-origin: right center;
|
|
587
|
+
transition:
|
|
588
|
+
width 180ms ease,
|
|
589
|
+
padding-inline 180ms ease,
|
|
590
|
+
opacity 150ms ease,
|
|
591
|
+
transform 180ms ease,
|
|
592
|
+
border-color 180ms ease;
|
|
593
|
+
}
|
|
594
|
+
|
|
595
|
+
.cm-app-chrome__search[data-open="true"] .cm-search--hud {
|
|
596
|
+
width: clamp(13rem, 29vw, 24rem);
|
|
597
|
+
padding-inline: 0.85rem;
|
|
598
|
+
border-width: 1px;
|
|
599
|
+
opacity: 1;
|
|
600
|
+
pointer-events: auto;
|
|
601
|
+
transform: scaleX(1);
|
|
602
|
+
}
|
|
603
|
+
|
|
536
604
|
.cm-search input,
|
|
537
605
|
.cm-search__input {
|
|
538
606
|
min-width: 0;
|
|
@@ -842,17 +910,27 @@
|
|
|
842
910
|
}
|
|
843
911
|
|
|
844
912
|
@container (max-width: 31rem) {
|
|
845
|
-
.cm-app-chrome__hud-item[data-priority="medium"] .cm-hud-value,
|
|
846
913
|
.cm-app-chrome__hud-item[data-priority="medium"] .cm-hud-address,
|
|
847
914
|
.cm-app-chrome__hud-item[data-priority="medium"] .cm-hud-label {
|
|
848
915
|
display: none;
|
|
849
916
|
}
|
|
850
917
|
|
|
851
|
-
.cm-app-chrome__hud-item[data-priority="medium"] .cm-hud-
|
|
852
|
-
|
|
918
|
+
.cm-app-chrome__hud-item[data-priority="medium"] .cm-hud-wallet .cm-hud-value {
|
|
919
|
+
display: none;
|
|
920
|
+
}
|
|
921
|
+
|
|
922
|
+
.cm-app-chrome__hud-item[data-priority="medium"] .cm-hud-wallet {
|
|
853
923
|
width: var(--cm-hud-size);
|
|
924
|
+
min-width: var(--cm-hud-size);
|
|
854
925
|
padding-inline: 0;
|
|
855
926
|
}
|
|
927
|
+
|
|
928
|
+
.cm-app-chrome__hud-item[data-priority="medium"] .cm-session-trigger {
|
|
929
|
+
width: auto;
|
|
930
|
+
min-width: max-content;
|
|
931
|
+
max-width: min(12rem, 58vw);
|
|
932
|
+
padding-inline: 0.72rem;
|
|
933
|
+
}
|
|
856
934
|
}
|
|
857
935
|
|
|
858
936
|
@media (max-width: 820px) {
|
|
@@ -883,7 +961,13 @@
|
|
|
883
961
|
}
|
|
884
962
|
|
|
885
963
|
.cm-app-chrome__hud-group {
|
|
886
|
-
|
|
964
|
+
width: min(100%, calc(100vw - var(--cm-chrome-safe) * 2));
|
|
965
|
+
}
|
|
966
|
+
|
|
967
|
+
.cm-app-chrome__hud-item,
|
|
968
|
+
.cm-app-chrome__hud-fold,
|
|
969
|
+
.cm-app-chrome__search {
|
|
970
|
+
min-width: auto;
|
|
887
971
|
}
|
|
888
972
|
|
|
889
973
|
.cm-app-chrome__navdock {
|
|
@@ -935,6 +1019,20 @@
|
|
|
935
1019
|
.cm-hud-overflow {
|
|
936
1020
|
display: inline-flex;
|
|
937
1021
|
}
|
|
1022
|
+
|
|
1023
|
+
.cm-app-chrome__hud-group[data-search-open="true"] .cm-app-chrome__hud-item,
|
|
1024
|
+
.cm-app-chrome__hud-group[data-search-open="true"] .cm-app-chrome__hud-fold {
|
|
1025
|
+
display: none;
|
|
1026
|
+
}
|
|
1027
|
+
|
|
1028
|
+
.cm-app-chrome__search[data-open="true"] {
|
|
1029
|
+
flex: 1 1 auto;
|
|
1030
|
+
min-width: 0;
|
|
1031
|
+
}
|
|
1032
|
+
|
|
1033
|
+
.cm-app-chrome__search[data-open="true"] .cm-search--hud {
|
|
1034
|
+
width: min(100%, calc(100vw - var(--cm-chrome-safe) * 2 - var(--cm-hud-size) - var(--cm-chrome-gap)));
|
|
1035
|
+
}
|
|
938
1036
|
}
|
|
939
1037
|
|
|
940
1038
|
/* ── Form Controls ── */
|
package/dist/session/styles.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export declare const sessionCss = "/**\n * Compose.Market Session Shell\n * @compose-market/theme/css/session\n */\n\n.cm-session-menu {\n position: relative;\n}\n\n.cm-session-trigger {\n border-color: hsl(var(--primary) / 0.35);\n background
|
|
1
|
+
export declare const sessionCss = "/**\n * Compose.Market Session Shell\n * @compose-market/theme/css/session\n */\n\n.cm-session-menu {\n position: relative;\n}\n\n.cm-session-trigger {\n border-color: hsl(var(--primary) / 0.35);\n background:\n radial-gradient(circle at 18% 0%, hsl(var(--primary) / 0.16), transparent 38%),\n radial-gradient(circle at 82% 100%, hsl(var(--accent) / 0.12), transparent 42%),\n linear-gradient(145deg, hsl(226 21% 22% / 0.56), hsl(221 50% 8% / 0.48));\n color: hsl(var(--primary));\n box-shadow:\n inset 0 1px 0 hsl(0 0% 100% / 0.07),\n 0 0 22px hsl(var(--primary) / 0.11);\n}\n\n.cm-app-chrome__hud .cm-session-menu,\n.cm-app-chrome__hud-popover .cm-session-menu {\n min-width: 0;\n}\n\n.cm-app-chrome__hud .cm-session-trigger,\n.cm-app-chrome__hud-popover .cm-session-trigger {\n width: auto;\n min-width: max-content;\n max-width: min(13.5rem, 52vw);\n min-height: var(--cm-hud-size, 2.75rem);\n height: var(--cm-hud-size, 2.75rem);\n padding-inline: clamp(0.78rem, 1.35vw, 1rem);\n border-radius: 999px;\n white-space: nowrap;\n}\n\n.cm-session-trigger--active {\n background: hsl(var(--primary) / 0.12);\n}\n\n.cm-session-trigger__mobile {\n display: none;\n}\n\n.cm-session-menu__dropdown {\n position: absolute;\n top: calc(100% + 0.5rem);\n right: 0;\n width: 14.5rem;\n z-index: 60;\n overflow: hidden;\n}\n\n.cm-app-chrome__hud .cm-session-menu__dropdown,\n.cm-app-chrome__hud-popover .cm-session-menu__dropdown {\n z-index: 95;\n border-radius: 18px;\n width: min(17rem, calc(100vw - 1.5rem));\n}\n\n.cm-session-menu__header {\n display: grid;\n gap: 0.35rem;\n padding: 0.8rem 0.9rem;\n border-bottom: 1px solid hsl(var(--border) / 0.55);\n}\n\n.cm-session-menu__row,\n.cm-session-summary__row {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: 1rem;\n font-size: 0.72rem;\n}\n\n.cm-session-menu__row span,\n.cm-session-summary__row span,\n.cm-session-current__cell span,\n.cm-session-key__cell span {\n color: hsl(var(--muted-foreground));\n}\n\n.cm-session-menu__row strong,\n.cm-session-summary__row strong,\n.cm-session-current__cell strong,\n.cm-session-key__cell strong {\n color: hsl(var(--foreground));\n overflow-wrap: anywhere;\n text-align: right;\n}\n\n.cm-session-menu__item {\n width: 100%;\n display: flex;\n align-items: center;\n gap: 0.55rem;\n padding: 0.8rem 0.9rem;\n border: 0;\n background: transparent;\n color: hsl(var(--foreground));\n font-family: var(--font-mono), monospace;\n font-size: 0.72rem;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n cursor: pointer;\n transition: background-color 180ms ease, color 180ms ease;\n}\n\n.cm-session-menu__item:hover {\n background: hsl(var(--muted) / 0.45);\n}\n\n.cm-session-modal {\n max-width: 34rem;\n border-radius: max(var(--radius, 0.25rem), 0.3rem);\n}\n\n.cm-session-modal__title-wrap,\n.cm-session-section__label,\n.cm-session-current__title {\n display: inline-flex;\n align-items: center;\n gap: 0.55rem;\n}\n\n.cm-session-modal__body {\n display: grid;\n gap: 1rem;\n}\n\n.cm-session-section {\n display: grid;\n gap: 0.55rem;\n}\n\n.cm-session-section__label,\n.cm-session-manage__header {\n color: hsl(var(--muted-foreground));\n font-family: var(--font-mono), monospace;\n font-size: 0.68rem;\n font-weight: 700;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n}\n\n.cm-session-choice-grid {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: 0.55rem;\n}\n\n.cm-session-choice {\n min-height: 2.3rem;\n padding: 0.45rem 0.6rem;\n border-radius: var(--radius, 0.25rem);\n border: 1px solid hsl(var(--border));\n background: hsl(var(--muted));\n color: hsl(var(--foreground));\n font-family: var(--font-mono), monospace;\n font-size: 0.72rem;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n cursor: pointer;\n transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease;\n}\n\n.cm-session-choice.active {\n border-color: hsl(var(--primary));\n background: hsl(var(--primary));\n color: hsl(var(--primary-foreground));\n}\n\n.cm-session-budget-input {\n display: grid;\n gap: 0.45rem;\n}\n\n.cm-session-budget-input__row {\n display: flex;\n align-items: center;\n gap: 0.55rem;\n}\n\n.cm-session-budget-input__row .cm-form-input {\n flex: 1 1 auto;\n min-width: 0;\n}\n\n.cm-session-budget-input__prefix,\n.cm-session-budget-input__suffix,\n.cm-session-budget-input__description {\n color: hsl(var(--muted-foreground));\n font-family: var(--font-mono), monospace;\n font-size: 0.72rem;\n}\n\n.cm-session-budget-input__description {\n line-height: 1.5;\n}\n\n.cm-session-summary,\n.cm-session-usage {\n display: grid;\n gap: 0.45rem;\n padding: 0.9rem 1rem;\n border-radius: var(--radius, 0.25rem);\n border: 1px solid hsl(var(--border));\n background: hsl(var(--muted) / 0.45);\n}\n\n.cm-session-modal__footer {\n display: flex;\n justify-content: flex-end;\n gap: 0.75rem;\n padding-top: 0.2rem;\n}\n\n.cm-session-current {\n background: linear-gradient(135deg, hsl(var(--primary) / 0.12), transparent 72%);\n border-color: hsl(var(--primary) / 0.35);\n}\n\n.cm-session-current__title {\n color: hsl(var(--primary));\n font-size: 0.82rem;\n font-weight: 700;\n margin-bottom: 0.85rem;\n}\n\n.cm-session-current__grid,\n.cm-session-key__grid {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: 0.75rem;\n}\n\n.cm-session-current__cell,\n.cm-session-key__cell {\n display: grid;\n gap: 0.2rem;\n}\n\n.cm-session-manage__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 1rem;\n}\n\n.cm-session-empty {\n display: grid;\n place-items: center;\n gap: 0.45rem;\n min-height: 9rem;\n padding: 1rem;\n border: 1px dashed hsl(var(--border));\n border-radius: max(var(--radius, 0.25rem), 0.3rem);\n color: hsl(var(--muted-foreground));\n text-align: center;\n}\n\n.cm-session-empty__action {\n border: 0;\n background: transparent;\n color: hsl(var(--primary));\n cursor: pointer;\n font-size: 0.86rem;\n}\n\n@media (max-width: 820px) {\n .cm-app-chrome__hud .cm-session-trigger span:not(.cm-session-trigger__mobile) {\n display: none;\n }\n\n .cm-app-chrome__hud .cm-session-trigger__mobile {\n display: inline-flex;\n }\n\n .cm-app-chrome__hud .cm-session-trigger {\n width: auto;\n min-width: max-content;\n padding-inline: 0.72rem;\n }\n}\n\n@media (max-width: 380px) {\n .cm-app-chrome__hud .cm-session-trigger {\n max-width: min(10.5rem, 58vw);\n }\n}\n\n.cm-session-key-list {\n display: grid;\n gap: 0.75rem;\n max-height: 22rem;\n overflow-y: auto;\n padding-right: 0.15rem;\n}\n\n.cm-session-key {\n display: grid;\n gap: 0.65rem;\n}\n\n.cm-session-key__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 0.75rem;\n}\n\n.cm-session-key__actions {\n display: flex;\n align-items: center;\n gap: 0.35rem;\n}\n\n.cm-session-key__icon {\n width: 2rem;\n height: 2rem;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--radius, 0.25rem);\n border: 1px solid hsl(var(--border));\n background: transparent;\n color: hsl(var(--muted-foreground));\n cursor: pointer;\n transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;\n}\n\n.cm-session-key__icon:hover {\n background: hsl(var(--muted) / 0.45);\n color: hsl(var(--foreground));\n}\n\n.cm-session-key__icon.danger:hover {\n border-color: hsl(var(--destructive) / 0.45);\n color: hsl(var(--destructive));\n}\n\n.cm-session-key__id {\n font-family: var(--font-mono), monospace;\n color: hsl(var(--muted-foreground));\n font-size: 0.72rem;\n overflow-wrap: anywhere;\n}\n\n.cm-session-generated {\n display: grid;\n grid-template-columns: minmax(0, 1fr) auto;\n gap: 0.6rem;\n}\n\n@media (max-width: 960px) {\n .cm-session-trigger__mobile {\n display: inline;\n }\n}\n\n@media (max-width: 720px) {\n .cm-session-choice-grid,\n .cm-session-current__grid,\n .cm-session-key__grid {\n grid-template-columns: 1fr;\n }\n\n .cm-session-modal {\n max-width: 100%;\n }\n\n .cm-session-modal__footer,\n .cm-session-manage__header {\n flex-direction: column;\n align-items: stretch;\n }\n\n .cm-session-menu__dropdown {\n width: min(18rem, calc(100vw - 2rem));\n }\n}\n\n@media (max-width: 480px) {\n .cm-session-choice-grid {\n grid-template-columns: repeat(2, 1fr);\n }\n}\n";
|
|
2
2
|
//# sourceMappingURL=styles.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/session/styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU,
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/session/styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU,s2QAsYtB,CAAC"}
|
package/dist/session/styles.js
CHANGED
|
@@ -9,8 +9,14 @@ export const sessionCss = `/**
|
|
|
9
9
|
|
|
10
10
|
.cm-session-trigger {
|
|
11
11
|
border-color: hsl(var(--primary) / 0.35);
|
|
12
|
-
background:
|
|
12
|
+
background:
|
|
13
|
+
radial-gradient(circle at 18% 0%, hsl(var(--primary) / 0.16), transparent 38%),
|
|
14
|
+
radial-gradient(circle at 82% 100%, hsl(var(--accent) / 0.12), transparent 42%),
|
|
15
|
+
linear-gradient(145deg, hsl(226 21% 22% / 0.56), hsl(221 50% 8% / 0.48));
|
|
13
16
|
color: hsl(var(--primary));
|
|
17
|
+
box-shadow:
|
|
18
|
+
inset 0 1px 0 hsl(0 0% 100% / 0.07),
|
|
19
|
+
0 0 22px hsl(var(--primary) / 0.11);
|
|
14
20
|
}
|
|
15
21
|
|
|
16
22
|
.cm-app-chrome__hud .cm-session-menu,
|
|
@@ -21,10 +27,11 @@ export const sessionCss = `/**
|
|
|
21
27
|
.cm-app-chrome__hud .cm-session-trigger,
|
|
22
28
|
.cm-app-chrome__hud-popover .cm-session-trigger {
|
|
23
29
|
width: auto;
|
|
24
|
-
min-width:
|
|
30
|
+
min-width: max-content;
|
|
31
|
+
max-width: min(13.5rem, 52vw);
|
|
25
32
|
min-height: var(--cm-hud-size, 2.75rem);
|
|
26
33
|
height: var(--cm-hud-size, 2.75rem);
|
|
27
|
-
padding-inline: clamp(0.
|
|
34
|
+
padding-inline: clamp(0.78rem, 1.35vw, 1rem);
|
|
28
35
|
border-radius: 999px;
|
|
29
36
|
white-space: nowrap;
|
|
30
37
|
}
|
|
@@ -274,19 +281,14 @@ export const sessionCss = `/**
|
|
|
274
281
|
|
|
275
282
|
.cm-app-chrome__hud .cm-session-trigger {
|
|
276
283
|
width: auto;
|
|
277
|
-
min-width:
|
|
284
|
+
min-width: max-content;
|
|
278
285
|
padding-inline: 0.72rem;
|
|
279
286
|
}
|
|
280
287
|
}
|
|
281
288
|
|
|
282
289
|
@media (max-width: 380px) {
|
|
283
290
|
.cm-app-chrome__hud .cm-session-trigger {
|
|
284
|
-
width:
|
|
285
|
-
padding-inline: 0;
|
|
286
|
-
}
|
|
287
|
-
|
|
288
|
-
.cm-app-chrome__hud .cm-session-trigger__mobile {
|
|
289
|
-
display: none;
|
|
291
|
+
max-width: min(10.5rem, 58vw);
|
|
290
292
|
}
|
|
291
293
|
}
|
|
292
294
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/session/styles.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,UAAU,GAAG
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/session/styles.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,UAAU,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsYzB,CAAC"}
|
package/dist/shell/styles.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export declare const shellCss = "/**\n * Compose.Market Shared Shell\n * @compose-market/theme/css/shell\n */\n\n:root {\n --cm-shell-glow-primary: hsl(var(--primary) / 0.3);\n --cm-shell-glow-accent: hsl(var(--accent) / 0.16);\n --cm-shell-surface:\n linear-gradient(145deg, hsl(226 21% 23% / 0.38), hsl(221 50% 9% / 0.24)),\n radial-gradient(circle at 18% 0%, hsl(var(--primary) / 0.08), transparent 34%),\n hsl(224 36% 13% / 0.28);\n --cm-shell-border: hsl(var(--primary) / 0.18);\n --cm-shell-shadow:\n 0 0 40px hsl(var(--primary) / 0.055),\n inset 0 1px 0 hsl(0 0% 100% / 0.06);\n --cm-chrome-gutter: clamp(0.7rem, 1.4vw, 1.15rem);\n --cm-chrome-sidebar: 16rem;\n --cm-chrome-sidebar-collapsed: 4.7rem;\n --cm-chrome-topbar: 4rem;\n --cm-chrome-mobile: 3.55rem;\n --cm-page-max: 88rem;\n}\n\n.cm-shell-stack {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\n.cm-shell-cluster {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n flex-wrap: wrap;\n}\n\n.cm-shell-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0.55rem;\n min-height: 2.3rem;\n padding: 0 0.95rem;\n border-radius: 999px;\n border: 1px solid hsl(var(--primary) / 0.22);\n background:\n linear-gradient(180deg, hsl(var(--card) / 0.72), hsl(var(--background) / 0.36));\n color: hsl(var(--foreground));\n font-family: var(--font-mono), monospace;\n font-size: 0.76rem;\n font-weight: 600;\n letter-spacing: 0.08em;\n line-height: 1;\n text-transform: uppercase;\n cursor: pointer;\n transition:\n transform 160ms ease,\n background-color 160ms ease,\n border-color 180ms ease,\n color 180ms ease,\n box-shadow 180ms ease;\n box-shadow:\n inset 0 1px 0 hsl(0 0% 100% / 0.04),\n 0 0 16px hsl(var(--primary) / 0.035);\n backdrop-filter: blur(12px) saturate(1.08);\n}\n\n.cm-shell-button:hover:not(:disabled) {\n transform: translateY(-1px);\n border-color: hsl(var(--primary) / 0.38);\n}\n\n.cm-shell-button:disabled {\n opacity: 0.55;\n cursor: not-allowed;\n}\n\n.cm-shell-button--primary {\n background:\n linear-gradient(135deg, #8aebff, #22d3ee);\n color: hsl(var(--primary-foreground));\n border-color: hsl(var(--primary) / 0.56);\n box-shadow:\n 0 0 0 1px hsl(var(--primary) / 0.16),\n 0 0 20px var(--cm-shell-glow-primary);\n}\n\n.cm-shell-button--primary:hover:not(:disabled) {\n box-shadow:\n 0 0 0 1px hsl(var(--primary) / 0.18),\n 0 0 24px var(--cm-shell-glow-primary),\n 0 0 18px var(--cm-shell-glow-accent);\n}\n\n.cm-shell-button--secondary {\n background: hsl(221 50% 9% / 0.36);\n border-color: hsl(var(--primary) / 0.2);\n color: hsl(var(--primary));\n}\n\n.cm-shell-button--secondary:hover:not(:disabled) {\n background: hsl(var(--primary) / 0.1);\n box-shadow: 0 0 18px hsl(var(--primary) / 0.1);\n}\n\n.cm-shell-button--ghost {\n background: transparent;\n border-color: transparent;\n color: hsl(var(--muted-foreground));\n box-shadow: none;\n}\n\n.cm-shell-button--ghost:hover:not(:disabled) {\n color: hsl(var(--foreground));\n background: hsl(var(--muted) / 0.24);\n}\n\n.cm-shell-button--danger {\n background: hsl(var(--destructive) / 0.12);\n border-color: hsl(var(--destructive) / 0.42);\n color: hsl(var(--destructive-foreground));\n}\n\n.cm-shell-button--danger:hover:not(:disabled) {\n background: hsl(var(--destructive) / 0.2);\n}\n\n.cm-shell-button--sm {\n min-height: 2rem;\n padding: 0 0.75rem;\n font-size: 0.7rem;\n}\n\n.cm-shell-button--lg {\n min-height: 2.65rem;\n padding: 0 1.1rem;\n font-size: 0.82rem;\n}\n\n.cm-shell-button--icon {\n width: 2.3rem;\n padding: 0;\n}\n\n.cm-shell-pill {\n display: inline-flex;\n align-items: center;\n gap: 0.45rem;\n min-height: 1.75rem;\n padding: 0 0.72rem;\n border-radius: 999px;\n border: 1px solid hsl(var(--primary) / 0.2);\n background:\n linear-gradient(180deg, hsl(var(--card) / 0.76), hsl(var(--muted) / 0.26));\n color: hsl(var(--muted-foreground));\n font-family: var(--font-mono), monospace;\n font-size: 0.68rem;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n}\n\n.cm-shell-pill strong,\n.cm-shell-pill span {\n color: inherit;\n}\n\n.cm-shell-panel {\n border: 1px solid var(--cm-shell-border);\n border-radius: 12px;\n background: var(--cm-shell-surface);\n box-shadow: var(--cm-shell-shadow);\n backdrop-filter: blur(16px) saturate(1.12);\n}\n\n.cm-shell-page {\n container-type: inline-size;\n width: min(var(--cm-page-max), 100%);\n min-width: 0;\n margin-inline: auto;\n display: grid;\n gap: clamp(1rem, 2.2cqi, 1.55rem);\n}\n\n.cm-shell-page--full {\n --cm-page-max: none;\n}\n\n.cm-shell-page-body {\n display: grid;\n gap: clamp(0.9rem, 2cqi, 1.35rem);\n min-width: 0;\n}\n\n.cm-app-chrome {\n --cm-chrome-safe: clamp(0.62rem, 1.25vw, 1rem);\n --cm-chrome-gap: clamp(0.34rem, 0.75vw, 0.55rem);\n --cm-hud-size: clamp(2.65rem, 4.1vw, 3rem);\n --cm-hud-radius: 999px;\n position: relative;\n min-height: 100dvh;\n isolation: isolate;\n}\n\n.cm-app-chrome__main {\n min-width: 0;\n min-height: 100dvh;\n padding:\n calc(env(safe-area-inset-top) + clamp(4.6rem, 7vw, 5.6rem))\n clamp(0.85rem, 2.3vw, 2rem)\n calc(env(safe-area-inset-bottom) + clamp(5.1rem, 7.4vw, 6.1rem));\n}\n\n.cm-app-chrome__navdock {\n position: fixed;\n inset-block-start: 50%;\n inset-inline-start: calc(env(safe-area-inset-left) + var(--cm-chrome-safe));\n z-index: 55;\n display: grid;\n gap: var(--cm-chrome-gap);\n transform: translate3d(0, -50%, 0);\n pointer-events: none;\n}\n\n.cm-app-chrome__navitem,\n.cm-hud-button {\n position: relative;\n display: inline-grid;\n place-items: center;\n width: var(--cm-hud-size);\n min-width: var(--cm-hud-size);\n height: var(--cm-hud-size);\n min-height: var(--cm-hud-size);\n border: 1px solid hsl(var(--primary) / 0.18);\n border-radius: var(--cm-hud-radius);\n background:\n radial-gradient(circle at 30% 14%, hsl(var(--primary) / 0.15), transparent 38%),\n radial-gradient(circle at 78% 90%, hsl(var(--accent) / 0.12), transparent 42%),\n linear-gradient(145deg, hsl(226 21% 23% / 0.48), hsl(221 50% 9% / 0.38));\n color: hsl(var(--muted-foreground));\n box-shadow:\n inset 0 1px 0 hsl(0 0% 100% / 0.07),\n inset 0 -1px 0 hsl(var(--primary) / 0.07),\n 0 0 26px hsl(var(--primary) / 0.065);\n backdrop-filter: blur(18px) saturate(1.16);\n cursor: pointer;\n pointer-events: auto;\n text-decoration: none;\n transition:\n transform 160ms ease,\n border-color 180ms ease,\n background-color 180ms ease,\n color 180ms ease,\n box-shadow 180ms ease,\n opacity 180ms ease;\n}\n\n.cm-app-chrome__navitem::before {\n content: \"\";\n position: absolute;\n inset-inline-start: -0.28rem;\n top: 50%;\n width: 0.17rem;\n height: 48%;\n border-radius: 999px;\n background: linear-gradient(180deg, hsl(var(--primary)), hsl(var(--accent)));\n box-shadow:\n 0 0 12px hsl(var(--primary) / 0.72),\n 0 0 18px hsl(var(--accent) / 0.35);\n opacity: 0;\n transform: translateY(-50%) scaleY(0.45);\n transition:\n opacity 180ms ease,\n transform 180ms ease;\n}\n\n.cm-app-chrome__navitem:hover,\n.cm-app-chrome__navitem:focus-visible,\n.cm-app-chrome__navitem[data-active=\"true\"],\n.cm-hud-button:hover,\n.cm-hud-button:focus-visible,\n.cm-hud-button[data-active=\"true\"] {\n color: hsl(var(--foreground));\n border-color: hsl(var(--primary) / 0.42);\n outline: none;\n transform: translate3d(0, -1px, 0);\n box-shadow:\n inset 0 0 24px hsl(var(--primary) / 0.075),\n 0 0 24px hsl(var(--primary) / 0.14),\n 0 0 18px hsl(var(--accent) / 0.08);\n}\n\n.cm-app-chrome__navitem[data-active=\"true\"] {\n color: hsl(var(--primary));\n border-color: hsl(var(--primary) / 0.52);\n}\n\n.cm-app-chrome__navitem[data-active=\"true\"]::before {\n opacity: 1;\n transform: translateY(-50%) scaleY(1);\n}\n\n.cm-app-chrome__navitem-icon,\n.cm-hud-icon,\n.cm-app-nav__icon {\n display: inline-flex;\n width: 1.12rem;\n height: 1.12rem;\n align-items: center;\n justify-content: center;\n color: currentColor;\n}\n\n.cm-app-chrome__tooltip {\n position: absolute;\n inset-inline-start: calc(100% + 0.55rem);\n top: 50%;\n max-width: min(14rem, 52vw);\n padding: 0.42rem 0.58rem;\n border: 1px solid hsl(var(--primary) / 0.22);\n border-radius: 999px;\n background: hsl(221 50% 8% / 0.84);\n color: hsl(var(--foreground));\n font-family: var(--font-mono), monospace;\n font-size: 0.64rem;\n font-weight: 700;\n letter-spacing: 0.1em;\n line-height: 1;\n text-transform: uppercase;\n white-space: nowrap;\n box-shadow: 0 0 18px hsl(var(--primary) / 0.12);\n opacity: 0;\n pointer-events: none;\n transform: translate3d(-0.18rem, -50%, 0);\n transition:\n opacity 150ms ease,\n transform 150ms ease;\n}\n\n.cm-app-chrome__navitem:hover .cm-app-chrome__tooltip,\n.cm-app-chrome__navitem:focus-visible .cm-app-chrome__tooltip {\n opacity: 1;\n transform: translate3d(0, -50%, 0);\n}\n\n.cm-app-chrome__hud {\n position: fixed;\n inset-block-start: calc(env(safe-area-inset-top) + var(--cm-chrome-safe));\n inset-inline: calc(env(safe-area-inset-left) + var(--cm-chrome-safe)) calc(env(safe-area-inset-right) + var(--cm-chrome-safe));\n z-index: 60;\n display: flex;\n align-items: flex-start;\n justify-content: flex-end;\n gap: var(--cm-chrome-gap);\n pointer-events: none;\n}\n\n.cm-app-chrome__hud-group {\n container-type: inline-size;\n display: flex;\n max-width: min(100%, 47rem);\n min-width: 0;\n align-items: center;\n justify-content: flex-end;\n gap: var(--cm-chrome-gap);\n pointer-events: auto;\n}\n\n.cm-app-chrome__hud-item,\n.cm-app-chrome__hud-fold {\n position: relative;\n min-width: 0;\n flex: 0 1 auto;\n}\n\n.cm-app-chrome__hud-item[data-priority=\"low\"] {\n flex-shrink: 1;\n}\n\n.cm-hud-button {\n display: inline-flex;\n width: auto;\n max-width: min(15.5rem, 52vw);\n justify-content: center;\n gap: 0.52rem;\n padding-inline: clamp(0.72rem, 1.4vw, 0.92rem);\n color: hsl(var(--foreground));\n font-family: var(--font-mono), monospace;\n font-size: 0.72rem;\n font-weight: 700;\n letter-spacing: 0.06em;\n line-height: 1;\n text-transform: uppercase;\n white-space: nowrap;\n}\n\n.cm-hud-button--icon,\n.cm-hud-button[data-icon-only=\"true\"] {\n width: var(--cm-hud-size);\n padding-inline: 0;\n}\n\n.cm-hud-value,\n.cm-hud-address {\n display: inline-block;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.cm-hud-value {\n color: hsl(var(--foreground));\n}\n\n.cm-hud-address {\n color: hsl(var(--primary));\n max-width: 8.8rem;\n}\n\n.cm-hud-status {\n width: 0.48rem;\n height: 0.48rem;\n border-radius: 999px;\n background: hsl(var(--primary));\n box-shadow: 0 0 12px hsl(var(--primary) / 0.62);\n flex: 0 0 auto;\n}\n\n.cm-hud-status[data-tone=\"red\"] {\n background: hsl(0 84% 66%);\n box-shadow: 0 0 12px hsl(0 84% 66% / 0.54);\n}\n\n.cm-hud-status[data-tone=\"blue\"] {\n background: hsl(211 100% 64%);\n box-shadow: 0 0 12px hsl(211 100% 64% / 0.54);\n}\n\n.cm-hud-status[data-state=\"muted\"] {\n background: hsl(var(--muted-foreground));\n box-shadow: none;\n}\n\n.cm-hud-overflow {\n display: none;\n}\n\n.cm-app-chrome__hud-popover {\n position: absolute;\n top: calc(100% + 0.58rem);\n right: 0;\n z-index: 90;\n width: min(21rem, calc(100vw - var(--cm-chrome-safe) * 2));\n max-height: min(74dvh, 34rem);\n overflow: auto;\n border: 1px solid hsl(var(--primary) / 0.2);\n border-radius: 18px;\n background:\n radial-gradient(circle at 20% 0%, hsl(var(--primary) / 0.11), transparent 34%),\n radial-gradient(circle at 92% 100%, hsl(var(--accent) / 0.12), transparent 36%),\n linear-gradient(145deg, hsl(226 21% 20% / 0.78), hsl(221 50% 7% / 0.86));\n box-shadow:\n inset 0 1px 0 hsl(0 0% 100% / 0.07),\n 0 0 36px hsl(var(--primary) / 0.12);\n backdrop-filter: blur(22px) saturate(1.16);\n}\n\n.cm-hud-menu {\n border: 1px solid hsl(var(--primary) / 0.2);\n border-radius: 16px;\n background:\n radial-gradient(circle at 20% 0%, hsl(var(--primary) / 0.11), transparent 34%),\n linear-gradient(145deg, hsl(226 21% 20% / 0.82), hsl(221 50% 7% / 0.9));\n color: hsl(var(--foreground));\n box-shadow:\n inset 0 1px 0 hsl(0 0% 100% / 0.07),\n 0 0 28px hsl(var(--primary) / 0.12);\n backdrop-filter: blur(20px) saturate(1.14);\n}\n\n.cm-app-chrome__hud-popover--wide {\n width: min(25rem, calc(100vw - var(--cm-chrome-safe) * 2));\n}\n\n.cm-app-chrome__hud-popover-body {\n display: grid;\n gap: 0.58rem;\n padding: 0.75rem;\n}\n\n.cm-app-chrome__hud-popover-title {\n color: hsl(var(--foreground));\n font-family: var(--font-display), sans-serif;\n font-size: 0.82rem;\n font-weight: 800;\n letter-spacing: 0.04em;\n}\n\n.cm-app-chrome__hud-popover-copy {\n color: hsl(var(--muted-foreground));\n font-size: 0.78rem;\n line-height: 1.45;\n}\n\n.cm-app-chrome__hud-row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 0.75rem;\n min-height: 2.65rem;\n padding: 0.42rem;\n border-radius: 14px;\n background: hsl(var(--primary) / 0.055);\n}\n\n.cm-app-chrome__hud-stack {\n display: grid;\n gap: 0.58rem;\n}\n\n.cm-search {\n display: flex;\n min-width: 0;\n align-items: center;\n gap: 0.6rem;\n min-height: 2.55rem;\n border: 1px solid hsl(var(--primary) / 0.16);\n border-radius: 999px;\n background: hsl(221 50% 9% / 0.38);\n padding: 0 0.85rem;\n color: hsl(var(--muted-foreground));\n box-shadow: inset 0 0 20px hsl(var(--primary) / 0.04);\n}\n\n.cm-search input,\n.cm-search__input {\n min-width: 0;\n flex: 1;\n border: 0;\n outline: none;\n background: transparent;\n color: hsl(var(--foreground));\n font-family: var(--font-mono), monospace;\n font-size: 0.82rem;\n}\n\n.cm-search input::placeholder,\n.cm-search__input::placeholder {\n color: hsl(var(--muted-foreground) / 0.72);\n}\n\n.cm-app-chrome__sidebar,\n.cm-app-chrome__topbar,\n.cm-app-chrome__mobilebar,\n.cm-app-chrome__drawer {\n display: none;\n}\n\n.cm-app-chrome__brand {\n display: none;\n}\n\n.cm-shell-panel--muted {\n background:\n linear-gradient(145deg, hsl(224 36% 13% / 0.36), hsl(221 50% 9% / 0.72)),\n radial-gradient(circle at 18% 0%, hsl(var(--primary) / 0.06), transparent 34%);\n}\n\n.cm-shell-panel--ghost {\n background: transparent;\n box-shadow: none;\n}\n\n.cm-shell-panel__body {\n padding: 1rem;\n}\n\n.cm-shell-page-header {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: 1rem;\n padding: 1rem 1.1rem;\n}\n\n.cm-shell-page-header__copy {\n display: flex;\n flex-direction: column;\n gap: 0.32rem;\n}\n\n.cm-shell-page-header__eyebrow {\n color: hsl(var(--primary));\n font-family: var(--font-mono), monospace;\n font-size: 0.68rem;\n letter-spacing: 0.18em;\n text-transform: uppercase;\n}\n\n.cm-shell-page-header__title {\n color: hsl(var(--foreground));\n font-family: var(--font-display), sans-serif;\n font-size: clamp(1.12rem, 1.65vw, 1.52rem);\n letter-spacing: 0.04em;\n line-height: 1.02;\n}\n\n.cm-shell-page-header__subtitle {\n color: hsl(var(--muted-foreground));\n font-size: 0.88rem;\n line-height: 1.45;\n max-width: 48rem;\n}\n\n.cm-shell-stat-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));\n gap: 0.8rem;\n}\n\n.cm-shell-stat {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n padding: 0.85rem 0.9rem;\n}\n\n.cm-shell-stat__label {\n color: hsl(var(--muted-foreground));\n font-family: var(--font-mono), monospace;\n font-size: 0.66rem;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n}\n\n.cm-shell-stat__value {\n color: hsl(var(--foreground));\n font-family: var(--font-display), sans-serif;\n font-size: 1rem;\n letter-spacing: 0.04em;\n}\n\n.cm-shell-stat__hint {\n color: hsl(var(--muted-foreground));\n font-size: 0.74rem;\n}\n\n.cm-shell-tab-strip {\n display: inline-flex;\n align-items: center;\n gap: 0.35rem;\n padding: 0.25rem;\n border: 1px solid hsl(var(--primary) / 0.16);\n border-radius: 999px;\n background: hsl(var(--muted) / 0.14);\n backdrop-filter: blur(12px);\n}\n\n.cm-shell-tab {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n min-height: 2.1rem;\n padding: 0 0.85rem;\n border-radius: 999px;\n border: 1px solid transparent;\n background: transparent;\n color: hsl(var(--muted-foreground));\n font-family: var(--font-mono), monospace;\n font-size: 0.68rem;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n cursor: pointer;\n transition:\n background-color 180ms ease,\n color 180ms ease,\n border-color 180ms ease,\n box-shadow 180ms ease;\n}\n\n.cm-shell-tab:hover {\n color: hsl(var(--foreground));\n border-color: hsl(var(--primary) / 0.18);\n}\n\n.cm-shell-tab[data-active=\"true\"],\n.cm-shell-tab[data-state=\"active\"] {\n background:\n linear-gradient(180deg, hsl(var(--primary) / 0.18), hsl(var(--primary) / 0.1));\n border-color: hsl(var(--primary) / 0.36);\n color: hsl(var(--foreground));\n box-shadow:\n inset 0 1px 0 hsl(var(--primary) / 0.16),\n 0 0 18px hsl(var(--primary) / 0.14);\n}\n\n.cm-shell-notice {\n display: flex;\n align-items: center;\n gap: 0.7rem;\n padding: 0.8rem 0.95rem;\n border-radius: 12px;\n border: 1px solid;\n backdrop-filter: blur(12px);\n}\n\n.cm-shell-notice--info {\n background: hsl(var(--primary) / 0.08);\n border-color: hsl(var(--primary) / 0.22);\n color: hsl(var(--foreground));\n}\n\n.cm-shell-notice--success {\n background: hsl(148 75% 24% / 0.18);\n border-color: hsl(148 75% 46% / 0.3);\n color: hsl(var(--foreground));\n}\n\n.cm-shell-notice--warning {\n background: hsl(42 100% 48% / 0.12);\n border-color: hsl(42 100% 52% / 0.25);\n color: hsl(var(--foreground));\n}\n\n.cm-shell-notice--error {\n background: hsl(var(--destructive) / 0.13);\n border-color: hsl(var(--destructive) / 0.28);\n color: hsl(var(--foreground));\n}\n\n.cm-shell-banner {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 1rem;\n padding: 0.95rem 1rem;\n}\n\n.cm-shell-banner__copy {\n display: flex;\n flex-direction: column;\n gap: 0.35rem;\n}\n\n.cm-shell-banner__title {\n color: hsl(var(--foreground));\n font-family: var(--font-display), sans-serif;\n font-size: 0.98rem;\n letter-spacing: 0.03em;\n}\n\n.cm-shell-banner__subtitle {\n color: hsl(var(--muted-foreground));\n font-size: 0.84rem;\n line-height: 1.45;\n}\n\n.cm-shell-empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 0.75rem;\n min-height: 18rem;\n padding: 2rem 1.25rem;\n text-align: center;\n}\n\n.cm-shell-empty__icon {\n color: hsl(var(--primary));\n}\n\n.cm-shell-empty__title {\n color: hsl(var(--foreground));\n font-family: var(--font-display), sans-serif;\n font-size: 1.08rem;\n letter-spacing: 0.04em;\n}\n\n.cm-shell-empty__description {\n color: hsl(var(--muted-foreground));\n max-width: 38rem;\n line-height: 1.55;\n}\n\n.cm-shell-modal-overlay {\n position: fixed;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1rem;\n background:\n radial-gradient(circle at 50% 24%, hsl(var(--primary) / 0.08), transparent 28rem),\n hsl(240 30% 2% / 0.82);\n backdrop-filter: blur(12px);\n z-index: 100;\n}\n\n.cm-shell-modal {\n width: min(100%, 46rem);\n max-height: min(90vh, 56rem);\n overflow: auto;\n border-radius: 12px;\n}\n\n.cm-shell-modal__header {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: 1rem;\n padding: 1rem 1rem 0;\n}\n\n.cm-shell-modal__title {\n color: hsl(var(--foreground));\n font-family: var(--font-display), sans-serif;\n font-size: 1rem;\n letter-spacing: 0.04em;\n}\n\n.cm-shell-modal__subtitle {\n color: hsl(var(--muted-foreground));\n font-size: 0.84rem;\n margin-top: 0.3rem;\n line-height: 1.45;\n}\n\n.cm-shell-modal__body {\n padding: 1rem;\n}\n\n@container (max-width: 42rem) {\n .cm-app-chrome__hud-item[data-priority=\"low\"] {\n display: none;\n }\n\n .cm-hud-overflow {\n display: inline-flex;\n }\n}\n\n@container (max-width: 31rem) {\n .cm-app-chrome__hud-item[data-priority=\"medium\"] .cm-hud-value,\n .cm-app-chrome__hud-item[data-priority=\"medium\"] .cm-hud-address,\n .cm-app-chrome__hud-item[data-priority=\"medium\"] .cm-hud-label {\n display: none;\n }\n\n .cm-app-chrome__hud-item[data-priority=\"medium\"] .cm-hud-button,\n .cm-app-chrome__hud-item[data-priority=\"medium\"] .cm-session-trigger {\n width: var(--cm-hud-size);\n padding-inline: 0;\n }\n}\n\n@media (max-width: 820px) {\n .cm-shell-page-header,\n .cm-shell-banner {\n flex-direction: column;\n align-items: stretch;\n }\n\n .cm-shell-stat-grid {\n grid-template-columns: 1fr;\n }\n\n .cm-shell-tab-strip {\n width: 100%;\n overflow-x: auto;\n }\n\n .cm-app-chrome__main {\n padding:\n calc(env(safe-area-inset-top) + clamp(4.25rem, 14vw, 4.85rem))\n clamp(0.75rem, 4.2vw, 1.05rem)\n calc(env(safe-area-inset-bottom) + clamp(5.55rem, 16vw, 6.55rem));\n }\n\n .cm-app-chrome__hud {\n justify-content: flex-end;\n }\n\n .cm-app-chrome__hud-group {\n max-width: min(100%, 100vw - var(--cm-chrome-safe) * 2);\n }\n\n .cm-app-chrome__navdock {\n inset-block-start: auto;\n inset-block-end: calc(env(safe-area-inset-bottom) + var(--cm-chrome-safe));\n inset-inline: calc(env(safe-area-inset-left) + var(--cm-chrome-safe)) calc(env(safe-area-inset-right) + var(--cm-chrome-safe));\n display: flex;\n justify-content: center;\n overflow-x: auto;\n padding: 0.22rem;\n transform: none;\n scrollbar-width: none;\n }\n\n .cm-app-chrome__navdock::-webkit-scrollbar {\n display: none;\n }\n\n .cm-app-chrome__navitem {\n flex: 0 0 auto;\n }\n\n .cm-app-chrome__navitem::before {\n inset-inline-start: 50%;\n top: auto;\n bottom: -0.22rem;\n width: 46%;\n height: 0.16rem;\n transform: translateX(-50%) scaleX(0.45);\n }\n\n .cm-app-chrome__navitem[data-active=\"true\"]::before {\n transform: translateX(-50%) scaleX(1);\n }\n\n .cm-app-chrome__tooltip {\n display: none;\n }\n\n .cm-hud-address,\n .cm-hud-label {\n display: none;\n }\n\n .cm-app-chrome__hud-item[data-priority=\"low\"] {\n display: none;\n }\n\n .cm-hud-overflow {\n display: inline-flex;\n }\n}\n\n/* \u2500\u2500 Form Controls \u2500\u2500 */\n.cm-form-group {\n margin-bottom: 14px;\n}\n\n.cm-form-group label {\n display: block;\n margin-bottom: 6px;\n font-family: var(--font-mono), monospace;\n font-size: 11px;\n color: hsl(var(--muted-foreground));\n font-weight: 600;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n}\n\n.cm-form-input,\n.cm-form-textarea,\n.cm-form-select {\n width: 100%;\n padding: 10px 12px;\n background: hsl(222 47% 7% / 0.84);\n border: 1px solid hsl(var(--primary) / 0.16);\n border-radius: 10px;\n color: hsl(var(--foreground));\n font-size: 14px;\n font-family: var(--font-sans), sans-serif;\n transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;\n}\n\n.cm-form-input:focus,\n.cm-form-textarea:focus,\n.cm-form-select:focus {\n outline: none;\n border-color: hsl(var(--primary));\n box-shadow:\n 0 0 0 1px hsl(var(--primary) / 0.24),\n inset 0 0 20px hsl(var(--primary) / 0.06);\n background: hsl(var(--background) / 0.96);\n}\n\n.cm-form-input:disabled,\n.cm-form-textarea:disabled,\n.cm-form-select:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n}\n\n.cm-form-textarea {\n min-height: 80px;\n resize: vertical;\n}\n\n/* \u2500\u2500 Notification / Alert \u2500\u2500 */\n.cm-notification {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 12px 16px;\n border-radius: 8px;\n font-size: 14px;\n font-weight: 500;\n animation: cm-slide-in 0.2s ease;\n}\n\n@keyframes cm-slide-in {\n from { opacity: 0; transform: translateY(-10px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n.cm-notification--success {\n background: hsl(142 71% 45% / 0.15);\n color: hsl(142 71% 45%);\n border: 1px solid hsl(142 71% 45%);\n}\n\n.cm-notification--error {\n background: hsl(var(--destructive) / 0.15);\n color: hsl(var(--destructive));\n border: 1px solid hsl(var(--destructive));\n}\n\n.cm-notification--warning {\n background: hsl(42 100% 48% / 0.12);\n color: hsl(42 100% 52%);\n border: 1px solid hsl(42 100% 52% / 0.5);\n}\n\n.cm-notification--info {\n background: hsl(var(--primary) / 0.08);\n border: 1px solid hsl(var(--primary) / 0.22);\n color: hsl(var(--foreground));\n}\n\n/* \u2500\u2500 Navigation \u2500\u2500 */\n.cm-nav {\n display: flex;\n gap: 4px;\n padding: 12px 0 0;\n}\n\n.cm-nav-btn {\n padding: 8px 14px;\n background: transparent;\n border: 1px solid transparent;\n color: hsl(var(--muted-foreground));\n cursor: pointer;\n border-radius: var(--radius, 0.25rem);\n font-size: 11px;\n font-weight: 600;\n font-family: var(--font-mono), monospace;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n transition: all 0.2s;\n}\n\n.cm-nav-btn:hover {\n color: hsl(var(--foreground));\n background: hsl(var(--muted));\n border-color: hsl(var(--primary) / 0.18);\n}\n\n.cm-nav-btn[data-active=\"true\"],\n.cm-nav-btn.active {\n color: hsl(var(--primary));\n background: hsl(var(--primary) / 0.12);\n border-color: hsl(var(--primary) / 0.28);\n}\n\n/* \u2500\u2500 Loading State \u2500\u2500 */\n.cm-loading-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 60px;\n color: hsl(var(--muted-foreground));\n}\n\n.cm-spinner {\n animation: cm-spin 1s linear infinite;\n}\n\n@keyframes cm-spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n}\n\n/* \u2500\u2500 Badge / Tag \u2500\u2500 */\n.cm-badge {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 3px 8px;\n border-radius: 4px;\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.03em;\n}\n\n.cm-badge--primary {\n background: hsl(var(--primary) / 0.15);\n color: hsl(var(--primary));\n}\n\n.cm-badge--accent {\n background: hsl(var(--accent) / 0.15);\n color: hsl(var(--accent));\n}\n\n.cm-badge--muted {\n background: hsl(var(--muted));\n color: hsl(var(--muted-foreground));\n}\n\n.cm-badge--success {\n background: hsl(142 71% 45% / 0.15);\n color: hsl(142 71% 45%);\n}\n\n.cm-badge--destructive {\n background: hsl(var(--destructive) / 0.15);\n color: hsl(var(--destructive));\n}\n\n/* \u2500\u2500 Search Bar \u2500\u2500 */\n.cm-search-bar {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 10px 12px;\n background: hsl(var(--card));\n border: 1px solid hsl(var(--border));\n border-radius: var(--radius, 0.25rem);\n}\n\n.cm-search-bar__icon {\n color: hsl(var(--muted-foreground));\n flex-shrink: 0;\n}\n\n.cm-search-bar__input {\n flex: 1;\n background: transparent;\n border: none;\n color: hsl(var(--foreground));\n font-size: 14px;\n font-family: var(--font-sans), sans-serif;\n outline: none;\n}\n\n.cm-search-bar__input::placeholder {\n color: hsl(var(--muted-foreground));\n}\n\n/* \u2500\u2500 Filter Buttons \u2500\u2500 */\n.cm-filter-btn {\n padding: 6px 14px;\n background: hsl(var(--card));\n border: 1px solid hsl(var(--border));\n border-radius: 999px;\n color: hsl(var(--muted-foreground));\n font-size: 11px;\n font-family: var(--font-mono), monospace;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n cursor: pointer;\n transition: all 0.2s;\n}\n\n.cm-filter-btn:hover {\n border-color: hsl(var(--primary));\n color: hsl(var(--foreground));\n}\n\n.cm-filter-btn[data-active=\"true\"],\n.cm-filter-btn.active {\n background: hsl(var(--primary));\n color: hsl(var(--primary-foreground));\n border-color: hsl(var(--primary));\n}\n\n/* \u2500\u2500 Icon Button \u2500\u2500 */\n.cm-icon-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 8px;\n background: transparent;\n border: 1px solid hsl(var(--border));\n color: hsl(var(--muted-foreground));\n border-radius: var(--radius, 0.25rem);\n cursor: pointer;\n font-family: var(--font-sans), sans-serif;\n transition: all 0.2s;\n}\n\n.cm-icon-btn:hover {\n background: hsl(var(--muted));\n color: hsl(var(--foreground));\n}\n\n.cm-icon-btn--danger:hover {\n border-color: hsl(var(--destructive));\n color: hsl(var(--destructive));\n}\n\n/* \u2500\u2500 Settings Section \u2500\u2500 */\n.cm-settings-section {\n margin-bottom: 24px;\n padding: 16px;\n background: hsl(var(--card));\n border: 1px solid hsl(var(--border));\n border-radius: max(var(--radius, 0.25rem), 0.3rem);\n}\n\n.cm-settings-section__title {\n font-size: 14px;\n font-weight: 600;\n margin-bottom: 16px;\n color: hsl(var(--muted-foreground));\n text-transform: uppercase;\n letter-spacing: 0.05em;\n}\n\n.cm-settings-section__hint {\n margin-bottom: 14px;\n font-size: 13px;\n color: hsl(var(--muted-foreground));\n}\n\n/* \u2500\u2500 Pagination \u2500\u2500 */\n.cm-pagination {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 16px;\n margin-top: 32px;\n padding-top: 24px;\n border-top: 1px solid hsl(var(--border));\n}\n\n.cm-page-btn {\n padding: 8px 16px;\n background: hsl(var(--card));\n border: 1px solid hsl(var(--border));\n border-radius: 6px;\n color: hsl(var(--muted-foreground));\n cursor: pointer;\n font-size: 13px;\n font-family: var(--font-sans), sans-serif;\n transition: all 0.2s;\n}\n\n.cm-page-btn:hover:not(:disabled) {\n background: hsl(var(--muted));\n color: hsl(var(--foreground));\n}\n\n.cm-page-btn:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n}\n\n.cm-page-info {\n font-size: 13px;\n color: hsl(var(--muted-foreground));\n}\n\n/* \u2500\u2500 Card \u2500\u2500 */\n.cm-card {\n background: hsl(var(--card));\n border: 1px solid hsl(var(--border));\n border-radius: 10px;\n padding: 18px;\n transition: all 0.2s;\n}\n\n.cm-card:hover {\n border-color: hsl(var(--border) / 0.8);\n transform: translateY(-2px);\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);\n}\n\n/* \u2500\u2500 Code Block \u2500\u2500 */\n.cm-code-block {\n display: block;\n padding: 10px 12px;\n background: hsl(var(--muted));\n border-radius: 6px;\n font-size: 12px;\n color: hsl(var(--primary));\n word-break: break-all;\n font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n}\n\n/* \u2500\u2500 Error / Empty States \u2500\u2500 */\n.cm-error-message {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px;\n background: hsl(var(--destructive) / 0.15);\n border: 1px solid hsl(var(--destructive));\n border-radius: 8px;\n color: hsl(var(--destructive));\n}\n\n/* \u2500\u2500 Playground / Chat Primitives \u2500\u2500 */\n.cm-playground {\n container-type: inline-size;\n display: flex;\n flex-direction: column;\n min-width: 0;\n height: min(58rem, calc(100dvh - clamp(8.5rem, 14vw, 10rem)));\n min-height: 34rem;\n overflow: hidden;\n border-radius: 16px;\n}\n\n.cm-playground__toolbar,\n.cm-playground__chat-toolbar,\n.cm-playground__caps-row {\n display: flex;\n align-items: center;\n min-width: 0;\n gap: clamp(0.4rem, 1.4cqi, 0.8rem);\n}\n\n.cm-playground__toolbar {\n flex: 0 0 auto;\n justify-content: space-between;\n padding: clamp(0.5rem, 1.6cqi, 0.8rem);\n border: 1px solid hsl(var(--primary) / 0.14);\n border-radius: 16px;\n background:\n linear-gradient(145deg, hsl(226 21% 23% / 0.38), hsl(221 50% 9% / 0.32)),\n radial-gradient(circle at 0% 0%, hsl(var(--primary) / 0.1), transparent 36%);\n box-shadow: inset 0 1px 0 hsl(0 0% 100% / 0.055);\n backdrop-filter: blur(16px) saturate(1.12);\n}\n\n.cm-playground__title {\n display: inline-flex;\n align-items: center;\n gap: 0.42rem;\n min-width: 0;\n color: hsl(var(--foreground));\n font-family: var(--font-mono), monospace;\n font-size: clamp(0.68rem, 1.8cqi, 0.86rem);\n font-weight: 800;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n}\n\n.cm-playground__title-icon {\n width: 1rem;\n height: 1rem;\n color: hsl(var(--primary));\n filter: drop-shadow(0 0 10px hsl(var(--primary) / 0.44));\n}\n\n.cm-playground__toolbar-right {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: 0.45rem;\n min-width: 0;\n flex-wrap: wrap;\n}\n\n.cm-playground__grid {\n flex: 1;\n min-height: 0;\n display: grid;\n grid-template-columns: minmax(0, 1fr);\n gap: clamp(0.75rem, 1.8cqi, 1rem);\n padding-top: clamp(0.75rem, 1.8cqi, 1rem);\n}\n\n@container (min-width: 62rem) {\n .cm-playground__grid {\n grid-template-columns: minmax(0, 2fr) minmax(19rem, 0.82fr);\n }\n\n .cm-playground__grid--collapsed {\n grid-template-columns: minmax(0, 1fr);\n }\n}\n\n.cm-playground__chat-cell,\n.cm-playground__pane-cell {\n min-width: 0;\n min-height: 0;\n display: flex;\n flex-direction: column;\n position: relative;\n}\n\n.cm-playground__chat-cell {\n overflow: hidden;\n border: 1px solid hsl(var(--primary) / 0.16);\n border-radius: 16px;\n background:\n linear-gradient(145deg, hsl(226 21% 23% / 0.34), hsl(221 50% 9% / 0.26)),\n hsl(224 36% 13% / 0.18);\n box-shadow: inset 0 1px 0 hsl(0 0% 100% / 0.045);\n backdrop-filter: blur(16px) saturate(1.1);\n}\n\n.cm-playground__pane-cell {\n display: none;\n}\n\n@container (min-width: 62rem) {\n .cm-playground__pane-cell {\n display: flex;\n }\n}\n\n.cm-playground__chat-toolbar {\n flex: 0 0 auto;\n padding: clamp(0.55rem, 1.5cqi, 0.85rem);\n border-bottom: 1px solid hsl(var(--primary) / 0.1);\n background: hsl(221 50% 9% / 0.24);\n flex-wrap: wrap;\n}\n\n.cm-playground__filter-wrap {\n display: flex;\n align-items: center;\n gap: 0.45rem;\n min-width: min(100%, 13rem);\n flex: 1 1 13rem;\n flex-wrap: wrap;\n}\n\n.cm-playground__filter-select {\n min-width: 0;\n flex: 1 1 8rem;\n min-height: 2.15rem;\n border: 1px solid hsl(var(--primary) / 0.16);\n border-radius: 999px;\n background: hsl(221 50% 9% / 0.46);\n color: hsl(var(--foreground));\n font-family: var(--font-mono), monospace;\n font-size: 0.72rem;\n padding: 0 0.75rem;\n}\n\n.cm-playground__filter-select:hover,\n.cm-playground__filter-select:focus,\n.cm-playground__filter-select--active {\n outline: none;\n border-color: hsl(var(--primary) / 0.42);\n box-shadow: 0 0 16px hsl(var(--primary) / 0.08);\n}\n\n.cm-playground__model-count,\n.cm-playground__caps-label {\n color: hsl(var(--muted-foreground));\n font-family: var(--font-mono), monospace;\n font-size: 0.68rem;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n white-space: nowrap;\n}\n\n.cm-playground__caps-row {\n flex: 0 0 auto;\n padding: 0.45rem clamp(0.55rem, 1.5cqi, 0.85rem);\n border-bottom: 1px solid hsl(var(--primary) / 0.08);\n overflow: auto hidden;\n}\n\n.cm-playground__cap-tag,\n.cm-playground__chip,\n.cm-playground__badge,\n.cm-model-badge,\n.cm-tool-chip,\n.cm-receipt-chip {\n display: inline-flex;\n align-items: center;\n gap: 0.35rem;\n border: 1px solid hsl(var(--primary) / 0.18);\n border-radius: 999px;\n background: hsl(221 50% 9% / 0.38);\n color: hsl(var(--foreground) / 0.78);\n font-family: var(--font-mono), monospace;\n font-size: 0.68rem;\n font-weight: 700;\n line-height: 1;\n text-transform: uppercase;\n transition:\n transform 160ms ease,\n border-color 180ms ease,\n box-shadow 180ms ease,\n color 180ms ease,\n background-color 180ms ease;\n}\n\n.cm-playground__cap-tag {\n min-height: 1.55rem;\n padding: 0 0.58rem;\n}\n\n.cm-playground__badge,\n.cm-model-badge {\n min-width: 0;\n max-width: min(100%, 24rem);\n min-height: 2.2rem;\n padding: 0 0.72rem;\n cursor: pointer;\n}\n\n.cm-playground__badge:hover,\n.cm-playground__badge:focus-visible,\n.cm-model-badge:hover,\n.cm-model-badge:focus-visible,\n.cm-playground__chip:hover,\n.cm-playground__chip:focus-visible,\n.cm-playground__chip--active {\n transform: translateY(-1px);\n outline: none;\n border-color: hsl(var(--primary) / 0.44);\n background: hsl(var(--primary) / 0.09);\n color: hsl(var(--foreground));\n box-shadow: 0 0 18px hsl(var(--primary) / 0.12);\n}\n\n.cm-model-badge[data-placeholder=\"true\"] {\n color: hsl(var(--muted-foreground));\n font-weight: 500;\n}\n\n.cm-playground__badge-dot,\n.cm-model-badge__dot {\n width: 0.48rem;\n height: 0.48rem;\n border-radius: 999px;\n background: hsl(var(--primary));\n box-shadow: 0 0 12px hsl(var(--primary) / 0.56);\n flex: 0 0 auto;\n}\n\n.cm-playground__badge-name,\n.cm-model-badge__name {\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.cm-playground__badge-price,\n.cm-playground__badge-shortcut,\n.cm-model-badge__price,\n.cm-model-badge__shortcut,\n.cm-playground__chip-count {\n color: hsl(var(--muted-foreground));\n font-size: 0.62rem;\n}\n\n.cm-playground__pane-toggle,\n.cm-playground__pane-expand {\n display: inline-grid;\n place-items: center;\n border: 1px solid hsl(var(--primary) / 0.22);\n background: hsl(221 50% 9% / 0.72);\n color: hsl(var(--primary));\n box-shadow: 0 0 18px hsl(var(--primary) / 0.08);\n cursor: pointer;\n}\n\n.cm-playground__pane-toggle {\n position: absolute;\n left: -0.7rem;\n top: 0.85rem;\n z-index: 4;\n width: 1.55rem;\n height: 1.55rem;\n border-radius: 999px;\n}\n\n.cm-playground__pane-expand {\n display: none;\n position: fixed;\n right: 0.2rem;\n top: 50%;\n z-index: 45;\n width: 2rem;\n height: 3.25rem;\n border-radius: 999px 0 0 999px;\n}\n\n@container (min-width: 62rem) {\n .cm-playground__pane-expand {\n display: inline-grid;\n }\n}\n\n.cm-playground__cmd-backdrop,\n.cm-command-overlay {\n position: fixed;\n inset: 0;\n z-index: 90;\n display: flex;\n align-items: flex-start;\n justify-content: center;\n padding: max(8vh, 4rem) 1rem 1rem;\n background:\n radial-gradient(circle at 50% 18%, hsl(var(--primary) / 0.09), transparent 30rem),\n hsl(240 30% 2% / 0.72);\n backdrop-filter: blur(14px);\n}\n\n.cm-playground__cmd-panel,\n.cm-command-panel {\n width: min(42rem, 100%);\n max-height: min(70dvh, 42rem);\n display: flex;\n flex-direction: column;\n overflow: hidden;\n border: 1px solid hsl(var(--primary) / 0.24);\n border-radius: 18px;\n background:\n linear-gradient(145deg, hsl(226 21% 23% / 0.58), hsl(221 50% 9% / 0.78)),\n hsl(var(--background));\n box-shadow:\n 0 0 44px hsl(var(--primary) / 0.12),\n inset 0 1px 0 hsl(0 0% 100% / 0.08);\n}\n\n.cm-playground__cmd-header,\n.cm-playground__cmd-footer,\n.cm-command-header,\n.cm-command-footer {\n flex: 0 0 auto;\n padding: 0.75rem 0.95rem;\n border-color: hsl(var(--primary) / 0.12);\n}\n\n.cm-playground__cmd-header,\n.cm-command-header {\n border-bottom: 1px solid hsl(var(--primary) / 0.12);\n}\n\n.cm-playground__cmd-footer,\n.cm-command-footer {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 0.75rem;\n border-top: 1px solid hsl(var(--primary) / 0.12);\n color: hsl(var(--muted-foreground));\n font-family: var(--font-mono), monospace;\n font-size: 0.68rem;\n flex-wrap: wrap;\n}\n\n.cm-playground__cmd-input,\n.cm-command-input {\n width: 100%;\n border: 0;\n outline: none;\n background: transparent;\n color: hsl(var(--foreground));\n font-family: var(--font-mono), monospace;\n font-size: clamp(0.92rem, 2.2vw, 1.1rem);\n}\n\n.cm-playground__cmd-list,\n.cm-command-list {\n flex: 1;\n min-height: 0;\n overflow: auto;\n padding: 0.35rem;\n}\n\n.cm-playground__cmd-group,\n.cm-command-group {\n padding: 0.55rem 0.7rem 0.28rem;\n color: hsl(var(--primary));\n font-family: var(--font-mono), monospace;\n font-size: 0.68rem;\n font-weight: 800;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n}\n\n.cm-playground__cmd-item,\n.cm-command-item {\n display: flex;\n align-items: center;\n gap: 0.65rem;\n min-height: 2.55rem;\n border: 1px solid transparent;\n border-radius: 12px;\n padding: 0 0.75rem;\n cursor: pointer;\n}\n\n.cm-playground__cmd-item:hover,\n.cm-playground__cmd-item--selected,\n.cm-playground__cmd-item--current,\n.cm-command-item:hover,\n.cm-command-item[data-selected=\"true\"],\n.cm-command-item[data-current=\"true\"] {\n border-color: hsl(var(--primary) / 0.22);\n background: hsl(var(--primary) / 0.08);\n}\n\n.cm-playground__cmd-item-name,\n.cm-command-item__name {\n min-width: 0;\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: hsl(var(--foreground));\n font-family: var(--font-mono), monospace;\n font-size: 0.82rem;\n}\n\n.cm-playground__cmd-item-meta,\n.cm-playground__cmd-footer-hints,\n.cm-command-item__meta,\n.cm-command-footer__hints {\n display: flex;\n align-items: center;\n gap: 0.4rem;\n flex-wrap: wrap;\n}\n\n.cm-playground__cmd-item-provider,\n.cm-playground__cmd-item-type,\n.cm-playground__cmd-item-price,\n.cm-playground__cmd-hint kbd,\n.cm-command-item__provider,\n.cm-command-item__type,\n.cm-command-item__price,\n.cm-command-hint kbd {\n border-radius: 999px;\n background: hsl(221 50% 9% / 0.52);\n color: hsl(var(--muted-foreground));\n font-family: var(--font-mono), monospace;\n font-size: 0.62rem;\n padding: 0.22rem 0.45rem;\n}\n\n.cm-playground__cmd-empty,\n.cm-command-empty {\n padding: 2rem 1rem;\n color: hsl(var(--muted-foreground));\n text-align: center;\n}\n\n.cm-chat {\n display: flex;\n min-width: 0;\n min-height: 0;\n flex-direction: column;\n overflow: hidden;\n border: 1px solid hsl(var(--primary) / 0.16);\n border-radius: 16px;\n background: hsl(221 50% 9% / 0.24);\n}\n\n.cm-chat--bare {\n border: 0;\n border-radius: 0;\n background: transparent;\n}\n\n.cm-chat__header,\n.cm-chat__activity,\n.cm-chat__composer {\n flex: 0 0 auto;\n border-color: hsl(var(--primary) / 0.1);\n}\n\n.cm-chat__header {\n display: flex;\n align-items: center;\n gap: 0.55rem;\n padding: 0.75rem 0.9rem;\n border-bottom: 1px solid hsl(var(--primary) / 0.1);\n color: hsl(var(--primary));\n font-family: var(--font-mono), monospace;\n}\n\n.cm-chat__body {\n flex: 1;\n min-height: 0;\n overflow: auto;\n padding: clamp(0.85rem, 2cqi, 1.15rem);\n}\n\n.cm-chat__empty {\n display: grid;\n place-items: center;\n gap: 0.35rem;\n min-height: 14rem;\n color: hsl(var(--muted-foreground));\n text-align: center;\n}\n\n.cm-chat__messages {\n display: grid;\n gap: 1rem;\n}\n\n.cm-chat-message {\n display: flex;\n align-items: flex-start;\n gap: 0.7rem;\n min-width: 0;\n}\n\n.cm-chat-message--user {\n justify-content: flex-end;\n}\n\n.cm-chat-message__avatar {\n width: 2rem;\n height: 2rem;\n flex: 0 0 auto;\n}\n\n.cm-chat-message__avatar-assistant,\n.cm-chat-message__avatar-user {\n background: hsl(var(--primary) / 0.14);\n color: hsl(var(--primary));\n}\n\n.cm-chat-message__avatar-user {\n background: hsl(var(--accent) / 0.15);\n color: hsl(var(--accent));\n}\n\n.cm-chat-message__bubble {\n position: relative;\n max-width: min(44rem, 82%);\n min-width: 0;\n border: 1px solid hsl(var(--primary) / 0.14);\n border-radius: 16px;\n padding: 0.75rem 0.85rem;\n background:\n linear-gradient(145deg, hsl(226 21% 23% / 0.34), hsl(221 50% 9% / 0.28));\n color: hsl(var(--foreground));\n box-shadow: inset 0 1px 0 hsl(0 0% 100% / 0.045);\n}\n\n.cm-chat-message__bubble--user {\n border-color: hsl(var(--accent) / 0.22);\n background:\n linear-gradient(145deg, hsl(var(--accent) / 0.24), hsl(var(--primary) / 0.08));\n}\n\n.cm-chat-message__actions {\n position: absolute;\n right: 0;\n top: -2.1rem;\n display: none;\n align-items: center;\n gap: 0.25rem;\n border: 1px solid hsl(var(--primary) / 0.16);\n border-radius: 999px;\n background: hsl(var(--background) / 0.86);\n padding: 0.18rem;\n backdrop-filter: blur(12px);\n}\n\n.cm-chat-message__bubble:hover .cm-chat-message__actions,\n.cm-chat-message__bubble:focus-within .cm-chat-message__actions {\n display: flex;\n}\n\n.cm-chat__activity {\n display: flex;\n align-items: center;\n gap: 0.55rem;\n border-top: 1px dashed hsl(var(--primary) / 0.16);\n background: hsl(221 50% 9% / 0.34);\n padding: 0.55rem 0.8rem;\n color: hsl(var(--muted-foreground));\n font-family: var(--font-mono), monospace;\n font-size: 0.72rem;\n}\n\n.cm-chat__composer {\n border-top: 1px solid hsl(var(--primary) / 0.1);\n padding: clamp(0.7rem, 1.7cqi, 0.9rem);\n}\n\n.cm-chat__attachments {\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem;\n margin-bottom: 0.6rem;\n}\n\n.cm-chat__attachment {\n position: relative;\n display: grid;\n width: 3rem;\n height: 3rem;\n place-items: center;\n overflow: hidden;\n border: 1px solid hsl(var(--primary) / 0.16);\n border-radius: 12px;\n background: hsl(221 50% 9% / 0.48);\n}\n\n.cm-chat__composer-row {\n display: flex;\n align-items: flex-end;\n gap: 0.55rem;\n min-width: 0;\n}\n\n.cm-chat__composer-row textarea {\n min-height: 2.55rem;\n border-color: hsl(var(--primary) / 0.16);\n border-radius: 14px;\n background: hsl(221 50% 9% / 0.4);\n}\n\n.cm-chat__icon-action {\n color: hsl(var(--muted-foreground));\n}\n\n.cm-chat__icon-action:hover {\n color: hsl(var(--primary));\n}\n\n@media (max-width: 820px) {\n .cm-playground {\n height: calc(100dvh - clamp(10rem, 28vw, 11.75rem) - env(safe-area-inset-top) - env(safe-area-inset-bottom));\n min-height: 30rem;\n }\n\n .cm-playground__title-text {\n display: none;\n }\n\n .cm-chat-message__bubble {\n max-width: 88%;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .cm-app-chrome__navitem,\n .cm-hud-button,\n .cm-app-chrome__hud-popover,\n .cm-playground__badge,\n .cm-playground__chip,\n .cm-chat-message__bubble {\n transition-duration: 0.01ms !important;\n }\n}\n";
|
|
1
|
+
export declare const shellCss = "/**\n * Compose.Market Shared Shell\n * @compose-market/theme/css/shell\n */\n\n:root {\n --cm-shell-glow-primary: hsl(var(--primary) / 0.3);\n --cm-shell-glow-accent: hsl(var(--accent) / 0.16);\n --cm-shell-surface:\n linear-gradient(145deg, hsl(226 21% 23% / 0.38), hsl(221 50% 9% / 0.24)),\n radial-gradient(circle at 18% 0%, hsl(var(--primary) / 0.08), transparent 34%),\n hsl(224 36% 13% / 0.28);\n --cm-shell-border: hsl(var(--primary) / 0.18);\n --cm-shell-shadow:\n 0 0 40px hsl(var(--primary) / 0.055),\n inset 0 1px 0 hsl(0 0% 100% / 0.06);\n --cm-chrome-gutter: clamp(0.7rem, 1.4vw, 1.15rem);\n --cm-chrome-sidebar: 16rem;\n --cm-chrome-sidebar-collapsed: 4.7rem;\n --cm-chrome-topbar: 4rem;\n --cm-chrome-mobile: 3.55rem;\n --cm-page-max: 88rem;\n}\n\n.cm-shell-stack {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\n.cm-shell-cluster {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n flex-wrap: wrap;\n}\n\n.cm-shell-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0.55rem;\n min-height: 2.3rem;\n padding: 0 0.95rem;\n border-radius: 999px;\n border: 1px solid hsl(var(--primary) / 0.22);\n background:\n linear-gradient(180deg, hsl(var(--card) / 0.72), hsl(var(--background) / 0.36));\n color: hsl(var(--foreground));\n font-family: var(--font-mono), monospace;\n font-size: 0.76rem;\n font-weight: 600;\n letter-spacing: 0.08em;\n line-height: 1;\n text-transform: uppercase;\n cursor: pointer;\n transition:\n transform 160ms ease,\n background-color 160ms ease,\n border-color 180ms ease,\n color 180ms ease,\n box-shadow 180ms ease;\n box-shadow:\n inset 0 1px 0 hsl(0 0% 100% / 0.04),\n 0 0 16px hsl(var(--primary) / 0.035);\n backdrop-filter: blur(12px) saturate(1.08);\n}\n\n.cm-shell-button:hover:not(:disabled) {\n transform: translateY(-1px);\n border-color: hsl(var(--primary) / 0.38);\n}\n\n.cm-shell-button:disabled {\n opacity: 0.55;\n cursor: not-allowed;\n}\n\n.cm-shell-button--primary {\n background:\n linear-gradient(135deg, #8aebff, #22d3ee);\n color: hsl(var(--primary-foreground));\n border-color: hsl(var(--primary) / 0.56);\n box-shadow:\n 0 0 0 1px hsl(var(--primary) / 0.16),\n 0 0 20px var(--cm-shell-glow-primary);\n}\n\n.cm-shell-button--primary:hover:not(:disabled) {\n box-shadow:\n 0 0 0 1px hsl(var(--primary) / 0.18),\n 0 0 24px var(--cm-shell-glow-primary),\n 0 0 18px var(--cm-shell-glow-accent);\n}\n\n.cm-shell-button--secondary {\n background: hsl(221 50% 9% / 0.36);\n border-color: hsl(var(--primary) / 0.2);\n color: hsl(var(--primary));\n}\n\n.cm-shell-button--secondary:hover:not(:disabled) {\n background: hsl(var(--primary) / 0.1);\n box-shadow: 0 0 18px hsl(var(--primary) / 0.1);\n}\n\n.cm-shell-button--ghost {\n background: transparent;\n border-color: transparent;\n color: hsl(var(--muted-foreground));\n box-shadow: none;\n}\n\n.cm-shell-button--ghost:hover:not(:disabled) {\n color: hsl(var(--foreground));\n background: hsl(var(--muted) / 0.24);\n}\n\n.cm-shell-button--danger {\n background: hsl(var(--destructive) / 0.12);\n border-color: hsl(var(--destructive) / 0.42);\n color: hsl(var(--destructive-foreground));\n}\n\n.cm-shell-button--danger:hover:not(:disabled) {\n background: hsl(var(--destructive) / 0.2);\n}\n\n.cm-shell-button--sm {\n min-height: 2rem;\n padding: 0 0.75rem;\n font-size: 0.7rem;\n}\n\n.cm-shell-button--lg {\n min-height: 2.65rem;\n padding: 0 1.1rem;\n font-size: 0.82rem;\n}\n\n.cm-shell-button--icon {\n width: 2.3rem;\n padding: 0;\n}\n\n.cm-shell-pill {\n display: inline-flex;\n align-items: center;\n gap: 0.45rem;\n min-height: 1.75rem;\n padding: 0 0.72rem;\n border-radius: 999px;\n border: 1px solid hsl(var(--primary) / 0.2);\n background:\n linear-gradient(180deg, hsl(var(--card) / 0.76), hsl(var(--muted) / 0.26));\n color: hsl(var(--muted-foreground));\n font-family: var(--font-mono), monospace;\n font-size: 0.68rem;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n}\n\n.cm-shell-pill strong,\n.cm-shell-pill span {\n color: inherit;\n}\n\n.cm-shell-panel {\n border: 1px solid var(--cm-shell-border);\n border-radius: 12px;\n background: var(--cm-shell-surface);\n box-shadow: var(--cm-shell-shadow);\n backdrop-filter: blur(16px) saturate(1.12);\n}\n\n.cm-shell-page {\n container-type: inline-size;\n width: min(var(--cm-page-max), 100%);\n min-width: 0;\n margin-inline: auto;\n display: grid;\n gap: clamp(1rem, 2.2cqi, 1.55rem);\n}\n\n.cm-shell-page--full {\n --cm-page-max: none;\n}\n\n.cm-shell-page-body {\n display: grid;\n gap: clamp(0.9rem, 2cqi, 1.35rem);\n min-width: 0;\n}\n\n.cm-app-chrome {\n --cm-chrome-safe: clamp(0.62rem, 1.25vw, 1rem);\n --cm-chrome-gap: clamp(0.34rem, 0.75vw, 0.55rem);\n --cm-hud-size: clamp(2.65rem, 4.1vw, 3rem);\n --cm-hud-radius: 999px;\n position: relative;\n min-height: 100dvh;\n isolation: isolate;\n}\n\n.cm-app-chrome__main {\n min-width: 0;\n min-height: 100dvh;\n padding:\n calc(env(safe-area-inset-top) + clamp(4.8rem, 7vw, 5.9rem))\n clamp(5.25rem, 6vw, 7rem)\n calc(env(safe-area-inset-bottom) + clamp(5.35rem, 7.4vw, 6.35rem));\n}\n\n.cm-app-chrome__navdock {\n position: fixed;\n inset-block-start: 50%;\n inset-inline-start: calc(env(safe-area-inset-left) + var(--cm-chrome-safe));\n z-index: 55;\n display: grid;\n gap: var(--cm-chrome-gap);\n transform: translate3d(0, -50%, 0);\n pointer-events: none;\n}\n\n.cm-app-chrome__navitem,\n.cm-hud-button {\n position: relative;\n display: inline-grid;\n place-items: center;\n width: var(--cm-hud-size);\n min-width: var(--cm-hud-size);\n height: var(--cm-hud-size);\n min-height: var(--cm-hud-size);\n border: 1px solid hsl(var(--primary) / 0.18);\n border-radius: var(--cm-hud-radius);\n background:\n radial-gradient(circle at 30% 14%, hsl(var(--primary) / 0.15), transparent 38%),\n radial-gradient(circle at 78% 90%, hsl(var(--accent) / 0.12), transparent 42%),\n linear-gradient(145deg, hsl(226 21% 23% / 0.48), hsl(221 50% 9% / 0.38));\n color: hsl(var(--muted-foreground));\n box-shadow:\n inset 0 1px 0 hsl(0 0% 100% / 0.07),\n inset 0 -1px 0 hsl(var(--primary) / 0.07),\n 0 0 26px hsl(var(--primary) / 0.065);\n backdrop-filter: blur(18px) saturate(1.16);\n cursor: pointer;\n pointer-events: auto;\n text-decoration: none;\n transition:\n transform 160ms ease,\n border-color 180ms ease,\n background-color 180ms ease,\n color 180ms ease,\n box-shadow 180ms ease,\n opacity 180ms ease;\n}\n\n.cm-app-chrome__navitem::before {\n content: \"\";\n position: absolute;\n inset-inline-start: -0.28rem;\n top: 50%;\n width: 0.17rem;\n height: 48%;\n border-radius: 999px;\n background: linear-gradient(180deg, hsl(var(--primary)), hsl(var(--accent)));\n box-shadow:\n 0 0 12px hsl(var(--primary) / 0.72),\n 0 0 18px hsl(var(--accent) / 0.35);\n opacity: 0;\n transform: translateY(-50%) scaleY(0.45);\n transition:\n opacity 180ms ease,\n transform 180ms ease;\n}\n\n.cm-app-chrome__navitem:hover,\n.cm-app-chrome__navitem:focus-visible,\n.cm-app-chrome__navitem[data-active=\"true\"],\n.cm-hud-button:hover,\n.cm-hud-button:focus-visible,\n.cm-hud-button[data-active=\"true\"] {\n color: hsl(var(--foreground));\n border-color: hsl(var(--primary) / 0.42);\n outline: none;\n transform: translate3d(0, -1px, 0);\n box-shadow:\n inset 0 0 24px hsl(var(--primary) / 0.075),\n 0 0 24px hsl(var(--primary) / 0.14),\n 0 0 18px hsl(var(--accent) / 0.08);\n}\n\n.cm-app-chrome__navitem[data-active=\"true\"] {\n color: hsl(var(--primary));\n border-color: hsl(var(--primary) / 0.52);\n}\n\n.cm-app-chrome__navitem[data-active=\"true\"]::before {\n opacity: 1;\n transform: translateY(-50%) scaleY(1);\n}\n\n.cm-app-chrome__navitem-icon,\n.cm-hud-icon,\n.cm-app-nav__icon {\n display: inline-flex;\n width: 1.12rem;\n height: 1.12rem;\n align-items: center;\n justify-content: center;\n color: currentColor;\n}\n\n.cm-app-chrome__tooltip {\n position: absolute;\n inset-inline-start: calc(100% + 0.55rem);\n top: 50%;\n max-width: min(14rem, 52vw);\n padding: 0.42rem 0.58rem;\n border: 1px solid hsl(var(--primary) / 0.22);\n border-radius: 999px;\n background: hsl(221 50% 8% / 0.84);\n color: hsl(var(--foreground));\n font-family: var(--font-mono), monospace;\n font-size: 0.64rem;\n font-weight: 700;\n letter-spacing: 0.1em;\n line-height: 1;\n text-transform: uppercase;\n white-space: nowrap;\n box-shadow: 0 0 18px hsl(var(--primary) / 0.12);\n opacity: 0;\n pointer-events: none;\n transform: translate3d(-0.18rem, -50%, 0);\n transition:\n opacity 150ms ease,\n transform 150ms ease;\n}\n\n.cm-app-chrome__navitem:hover .cm-app-chrome__tooltip,\n.cm-app-chrome__navitem:focus-visible .cm-app-chrome__tooltip {\n opacity: 1;\n transform: translate3d(0, -50%, 0);\n}\n\n.cm-app-chrome__hud {\n position: fixed;\n inset-block-start: calc(env(safe-area-inset-top) + var(--cm-chrome-safe));\n inset-inline: calc(env(safe-area-inset-left) + var(--cm-chrome-safe)) calc(env(safe-area-inset-right) + var(--cm-chrome-safe));\n z-index: 60;\n display: flex;\n align-items: flex-start;\n justify-content: flex-end;\n gap: var(--cm-chrome-gap);\n pointer-events: none;\n}\n\n.cm-app-chrome__hud-group {\n container-type: inline-size;\n display: flex;\n width: min(100%, 68rem);\n min-width: 0;\n align-items: center;\n justify-content: flex-end;\n gap: var(--cm-chrome-gap);\n flex-wrap: nowrap;\n pointer-events: auto;\n}\n\n.cm-app-chrome__hud-item,\n.cm-app-chrome__hud-fold,\n.cm-app-chrome__search {\n position: relative;\n min-width: max-content;\n flex: 0 0 auto;\n}\n\n.cm-app-chrome__search {\n display: inline-flex;\n min-width: var(--cm-hud-size);\n align-items: center;\n justify-content: flex-end;\n gap: var(--cm-chrome-gap);\n}\n\n.cm-app-chrome__hud-item[data-priority=\"low\"] {\n flex-shrink: 0;\n}\n\n.cm-hud-button {\n display: inline-flex;\n align-items: center;\n width: auto;\n max-width: min(15.5rem, 52vw);\n justify-content: center;\n gap: 0.52rem;\n padding-inline: clamp(0.72rem, 1.4vw, 0.92rem);\n color: hsl(var(--foreground));\n font-family: var(--font-mono), monospace;\n font-size: 0.72rem;\n font-weight: 700;\n letter-spacing: 0.06em;\n line-height: 1;\n text-transform: uppercase;\n white-space: nowrap;\n}\n\n.cm-hud-button--icon,\n.cm-hud-button[data-icon-only=\"true\"] {\n width: var(--cm-hud-size);\n padding-inline: 0;\n}\n\n.cm-hud-value,\n.cm-hud-address {\n display: inline-block;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.cm-hud-value {\n color: hsl(var(--foreground));\n}\n\n.cm-hud-address {\n color: hsl(var(--primary));\n max-width: 8.8rem;\n}\n\n.cm-hud-wallet {\n min-width: min(13.75rem, 42vw);\n justify-content: flex-start;\n padding-inline: 0.82rem 0.74rem;\n background:\n radial-gradient(circle at 14% 50%, hsl(var(--primary) / 0.18), transparent 34%),\n radial-gradient(circle at 86% 100%, hsl(var(--accent) / 0.12), transparent 40%),\n linear-gradient(145deg, hsl(226 21% 22% / 0.58), hsl(221 50% 8% / 0.48));\n}\n\n.cm-hud-wallet__icon {\n color: hsl(var(--primary));\n opacity: 0.92;\n}\n\n.cm-hud-wallet .cm-hud-value {\n color: hsl(var(--foreground));\n font-family: var(--font-display), sans-serif;\n font-size: 0.76rem;\n letter-spacing: 0.05em;\n}\n\n.cm-hud-wallet .cm-hud-address {\n color: hsl(var(--primary) / 0.9);\n font-size: 0.68rem;\n font-weight: 650;\n letter-spacing: 0.04em;\n}\n\n.cm-hud-status {\n width: 0.48rem;\n height: 0.48rem;\n border-radius: 999px;\n background: hsl(var(--primary));\n box-shadow: 0 0 12px hsl(var(--primary) / 0.62);\n flex: 0 0 auto;\n}\n\n.cm-hud-status[data-tone=\"red\"] {\n background: hsl(0 84% 66%);\n box-shadow: 0 0 12px hsl(0 84% 66% / 0.54);\n}\n\n.cm-hud-status[data-tone=\"blue\"] {\n background: hsl(211 100% 64%);\n box-shadow: 0 0 12px hsl(211 100% 64% / 0.54);\n}\n\n.cm-hud-status[data-state=\"muted\"] {\n background: hsl(var(--muted-foreground));\n box-shadow: none;\n}\n\n.cm-hud-overflow {\n display: none;\n}\n\n.cm-app-chrome__hud-popover {\n position: absolute;\n top: calc(100% + 0.58rem);\n right: 0;\n z-index: 90;\n width: min(21rem, calc(100vw - var(--cm-chrome-safe) * 2));\n max-height: min(74dvh, 34rem);\n overflow: auto;\n border: 1px solid hsl(var(--primary) / 0.2);\n border-radius: 18px;\n background:\n radial-gradient(circle at 20% 0%, hsl(var(--primary) / 0.11), transparent 34%),\n radial-gradient(circle at 92% 100%, hsl(var(--accent) / 0.12), transparent 36%),\n linear-gradient(145deg, hsl(226 21% 20% / 0.78), hsl(221 50% 7% / 0.86));\n box-shadow:\n inset 0 1px 0 hsl(0 0% 100% / 0.07),\n 0 0 36px hsl(var(--primary) / 0.12);\n backdrop-filter: blur(22px) saturate(1.16);\n}\n\n.cm-hud-menu {\n border: 1px solid hsl(var(--primary) / 0.2);\n border-radius: 16px;\n background:\n radial-gradient(circle at 20% 0%, hsl(var(--primary) / 0.11), transparent 34%),\n linear-gradient(145deg, hsl(226 21% 20% / 0.82), hsl(221 50% 7% / 0.9));\n color: hsl(var(--foreground));\n box-shadow:\n inset 0 1px 0 hsl(0 0% 100% / 0.07),\n 0 0 28px hsl(var(--primary) / 0.12);\n backdrop-filter: blur(20px) saturate(1.14);\n}\n\n.cm-app-chrome__hud-popover--wide {\n width: min(25rem, calc(100vw - var(--cm-chrome-safe) * 2));\n}\n\n.cm-app-chrome__hud-popover-body {\n display: grid;\n gap: 0.58rem;\n padding: 0.75rem;\n}\n\n.cm-app-chrome__hud-popover-title {\n color: hsl(var(--foreground));\n font-family: var(--font-display), sans-serif;\n font-size: 0.82rem;\n font-weight: 800;\n letter-spacing: 0.04em;\n}\n\n.cm-app-chrome__hud-popover-copy {\n color: hsl(var(--muted-foreground));\n font-size: 0.78rem;\n line-height: 1.45;\n}\n\n.cm-app-chrome__hud-row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 0.75rem;\n min-height: 2.65rem;\n padding: 0.42rem;\n border-radius: 14px;\n background: hsl(var(--primary) / 0.055);\n}\n\n.cm-app-chrome__hud-stack {\n display: grid;\n gap: 0.58rem;\n}\n\n.cm-search {\n display: flex;\n min-width: 0;\n align-items: center;\n gap: 0.6rem;\n min-height: 2.55rem;\n border: 1px solid hsl(var(--primary) / 0.16);\n border-radius: 999px;\n background: hsl(221 50% 9% / 0.38);\n padding: 0 0.85rem;\n color: hsl(var(--muted-foreground));\n box-shadow: inset 0 0 20px hsl(var(--primary) / 0.04);\n}\n\n.cm-search--hud {\n width: 0;\n max-width: min(24rem, calc(100vw - var(--cm-chrome-safe) * 2 - var(--cm-hud-size)));\n min-height: var(--cm-hud-size);\n padding-inline: 0;\n border-width: 0;\n opacity: 0;\n overflow: hidden;\n pointer-events: none;\n transform: scaleX(0.92);\n transform-origin: right center;\n transition:\n width 180ms ease,\n padding-inline 180ms ease,\n opacity 150ms ease,\n transform 180ms ease,\n border-color 180ms ease;\n}\n\n.cm-app-chrome__search[data-open=\"true\"] .cm-search--hud {\n width: clamp(13rem, 29vw, 24rem);\n padding-inline: 0.85rem;\n border-width: 1px;\n opacity: 1;\n pointer-events: auto;\n transform: scaleX(1);\n}\n\n.cm-search input,\n.cm-search__input {\n min-width: 0;\n flex: 1;\n border: 0;\n outline: none;\n background: transparent;\n color: hsl(var(--foreground));\n font-family: var(--font-mono), monospace;\n font-size: 0.82rem;\n}\n\n.cm-search input::placeholder,\n.cm-search__input::placeholder {\n color: hsl(var(--muted-foreground) / 0.72);\n}\n\n.cm-app-chrome__sidebar,\n.cm-app-chrome__topbar,\n.cm-app-chrome__mobilebar,\n.cm-app-chrome__drawer {\n display: none;\n}\n\n.cm-app-chrome__brand {\n display: none;\n}\n\n.cm-shell-panel--muted {\n background:\n linear-gradient(145deg, hsl(224 36% 13% / 0.36), hsl(221 50% 9% / 0.72)),\n radial-gradient(circle at 18% 0%, hsl(var(--primary) / 0.06), transparent 34%);\n}\n\n.cm-shell-panel--ghost {\n background: transparent;\n box-shadow: none;\n}\n\n.cm-shell-panel__body {\n padding: 1rem;\n}\n\n.cm-shell-page-header {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: 1rem;\n padding: 1rem 1.1rem;\n}\n\n.cm-shell-page-header__copy {\n display: flex;\n flex-direction: column;\n gap: 0.32rem;\n}\n\n.cm-shell-page-header__eyebrow {\n color: hsl(var(--primary));\n font-family: var(--font-mono), monospace;\n font-size: 0.68rem;\n letter-spacing: 0.18em;\n text-transform: uppercase;\n}\n\n.cm-shell-page-header__title {\n color: hsl(var(--foreground));\n font-family: var(--font-display), sans-serif;\n font-size: clamp(1.12rem, 1.65vw, 1.52rem);\n letter-spacing: 0.04em;\n line-height: 1.02;\n}\n\n.cm-shell-page-header__subtitle {\n color: hsl(var(--muted-foreground));\n font-size: 0.88rem;\n line-height: 1.45;\n max-width: 48rem;\n}\n\n.cm-shell-stat-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));\n gap: 0.8rem;\n}\n\n.cm-shell-stat {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n padding: 0.85rem 0.9rem;\n}\n\n.cm-shell-stat__label {\n color: hsl(var(--muted-foreground));\n font-family: var(--font-mono), monospace;\n font-size: 0.66rem;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n}\n\n.cm-shell-stat__value {\n color: hsl(var(--foreground));\n font-family: var(--font-display), sans-serif;\n font-size: 1rem;\n letter-spacing: 0.04em;\n}\n\n.cm-shell-stat__hint {\n color: hsl(var(--muted-foreground));\n font-size: 0.74rem;\n}\n\n.cm-shell-tab-strip {\n display: inline-flex;\n align-items: center;\n gap: 0.35rem;\n padding: 0.25rem;\n border: 1px solid hsl(var(--primary) / 0.16);\n border-radius: 999px;\n background: hsl(var(--muted) / 0.14);\n backdrop-filter: blur(12px);\n}\n\n.cm-shell-tab {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n min-height: 2.1rem;\n padding: 0 0.85rem;\n border-radius: 999px;\n border: 1px solid transparent;\n background: transparent;\n color: hsl(var(--muted-foreground));\n font-family: var(--font-mono), monospace;\n font-size: 0.68rem;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n cursor: pointer;\n transition:\n background-color 180ms ease,\n color 180ms ease,\n border-color 180ms ease,\n box-shadow 180ms ease;\n}\n\n.cm-shell-tab:hover {\n color: hsl(var(--foreground));\n border-color: hsl(var(--primary) / 0.18);\n}\n\n.cm-shell-tab[data-active=\"true\"],\n.cm-shell-tab[data-state=\"active\"] {\n background:\n linear-gradient(180deg, hsl(var(--primary) / 0.18), hsl(var(--primary) / 0.1));\n border-color: hsl(var(--primary) / 0.36);\n color: hsl(var(--foreground));\n box-shadow:\n inset 0 1px 0 hsl(var(--primary) / 0.16),\n 0 0 18px hsl(var(--primary) / 0.14);\n}\n\n.cm-shell-notice {\n display: flex;\n align-items: center;\n gap: 0.7rem;\n padding: 0.8rem 0.95rem;\n border-radius: 12px;\n border: 1px solid;\n backdrop-filter: blur(12px);\n}\n\n.cm-shell-notice--info {\n background: hsl(var(--primary) / 0.08);\n border-color: hsl(var(--primary) / 0.22);\n color: hsl(var(--foreground));\n}\n\n.cm-shell-notice--success {\n background: hsl(148 75% 24% / 0.18);\n border-color: hsl(148 75% 46% / 0.3);\n color: hsl(var(--foreground));\n}\n\n.cm-shell-notice--warning {\n background: hsl(42 100% 48% / 0.12);\n border-color: hsl(42 100% 52% / 0.25);\n color: hsl(var(--foreground));\n}\n\n.cm-shell-notice--error {\n background: hsl(var(--destructive) / 0.13);\n border-color: hsl(var(--destructive) / 0.28);\n color: hsl(var(--foreground));\n}\n\n.cm-shell-banner {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 1rem;\n padding: 0.95rem 1rem;\n}\n\n.cm-shell-banner__copy {\n display: flex;\n flex-direction: column;\n gap: 0.35rem;\n}\n\n.cm-shell-banner__title {\n color: hsl(var(--foreground));\n font-family: var(--font-display), sans-serif;\n font-size: 0.98rem;\n letter-spacing: 0.03em;\n}\n\n.cm-shell-banner__subtitle {\n color: hsl(var(--muted-foreground));\n font-size: 0.84rem;\n line-height: 1.45;\n}\n\n.cm-shell-empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 0.75rem;\n min-height: 18rem;\n padding: 2rem 1.25rem;\n text-align: center;\n}\n\n.cm-shell-empty__icon {\n color: hsl(var(--primary));\n}\n\n.cm-shell-empty__title {\n color: hsl(var(--foreground));\n font-family: var(--font-display), sans-serif;\n font-size: 1.08rem;\n letter-spacing: 0.04em;\n}\n\n.cm-shell-empty__description {\n color: hsl(var(--muted-foreground));\n max-width: 38rem;\n line-height: 1.55;\n}\n\n.cm-shell-modal-overlay {\n position: fixed;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1rem;\n background:\n radial-gradient(circle at 50% 24%, hsl(var(--primary) / 0.08), transparent 28rem),\n hsl(240 30% 2% / 0.82);\n backdrop-filter: blur(12px);\n z-index: 100;\n}\n\n.cm-shell-modal {\n width: min(100%, 46rem);\n max-height: min(90vh, 56rem);\n overflow: auto;\n border-radius: 12px;\n}\n\n.cm-shell-modal__header {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: 1rem;\n padding: 1rem 1rem 0;\n}\n\n.cm-shell-modal__title {\n color: hsl(var(--foreground));\n font-family: var(--font-display), sans-serif;\n font-size: 1rem;\n letter-spacing: 0.04em;\n}\n\n.cm-shell-modal__subtitle {\n color: hsl(var(--muted-foreground));\n font-size: 0.84rem;\n margin-top: 0.3rem;\n line-height: 1.45;\n}\n\n.cm-shell-modal__body {\n padding: 1rem;\n}\n\n@container (max-width: 42rem) {\n .cm-app-chrome__hud-item[data-priority=\"low\"] {\n display: none;\n }\n\n .cm-hud-overflow {\n display: inline-flex;\n }\n}\n\n@container (max-width: 31rem) {\n .cm-app-chrome__hud-item[data-priority=\"medium\"] .cm-hud-address,\n .cm-app-chrome__hud-item[data-priority=\"medium\"] .cm-hud-label {\n display: none;\n }\n\n .cm-app-chrome__hud-item[data-priority=\"medium\"] .cm-hud-wallet .cm-hud-value {\n display: none;\n }\n\n .cm-app-chrome__hud-item[data-priority=\"medium\"] .cm-hud-wallet {\n width: var(--cm-hud-size);\n min-width: var(--cm-hud-size);\n padding-inline: 0;\n }\n\n .cm-app-chrome__hud-item[data-priority=\"medium\"] .cm-session-trigger {\n width: auto;\n min-width: max-content;\n max-width: min(12rem, 58vw);\n padding-inline: 0.72rem;\n }\n}\n\n@media (max-width: 820px) {\n .cm-shell-page-header,\n .cm-shell-banner {\n flex-direction: column;\n align-items: stretch;\n }\n\n .cm-shell-stat-grid {\n grid-template-columns: 1fr;\n }\n\n .cm-shell-tab-strip {\n width: 100%;\n overflow-x: auto;\n }\n\n .cm-app-chrome__main {\n padding:\n calc(env(safe-area-inset-top) + clamp(4.25rem, 14vw, 4.85rem))\n clamp(0.75rem, 4.2vw, 1.05rem)\n calc(env(safe-area-inset-bottom) + clamp(5.55rem, 16vw, 6.55rem));\n }\n\n .cm-app-chrome__hud {\n justify-content: flex-end;\n }\n\n .cm-app-chrome__hud-group {\n width: min(100%, calc(100vw - var(--cm-chrome-safe) * 2));\n }\n\n .cm-app-chrome__hud-item,\n .cm-app-chrome__hud-fold,\n .cm-app-chrome__search {\n min-width: auto;\n }\n\n .cm-app-chrome__navdock {\n inset-block-start: auto;\n inset-block-end: calc(env(safe-area-inset-bottom) + var(--cm-chrome-safe));\n inset-inline: calc(env(safe-area-inset-left) + var(--cm-chrome-safe)) calc(env(safe-area-inset-right) + var(--cm-chrome-safe));\n display: flex;\n justify-content: center;\n overflow-x: auto;\n padding: 0.22rem;\n transform: none;\n scrollbar-width: none;\n }\n\n .cm-app-chrome__navdock::-webkit-scrollbar {\n display: none;\n }\n\n .cm-app-chrome__navitem {\n flex: 0 0 auto;\n }\n\n .cm-app-chrome__navitem::before {\n inset-inline-start: 50%;\n top: auto;\n bottom: -0.22rem;\n width: 46%;\n height: 0.16rem;\n transform: translateX(-50%) scaleX(0.45);\n }\n\n .cm-app-chrome__navitem[data-active=\"true\"]::before {\n transform: translateX(-50%) scaleX(1);\n }\n\n .cm-app-chrome__tooltip {\n display: none;\n }\n\n .cm-hud-address,\n .cm-hud-label {\n display: none;\n }\n\n .cm-app-chrome__hud-item[data-priority=\"low\"] {\n display: none;\n }\n\n .cm-hud-overflow {\n display: inline-flex;\n }\n\n .cm-app-chrome__hud-group[data-search-open=\"true\"] .cm-app-chrome__hud-item,\n .cm-app-chrome__hud-group[data-search-open=\"true\"] .cm-app-chrome__hud-fold {\n display: none;\n }\n\n .cm-app-chrome__search[data-open=\"true\"] {\n flex: 1 1 auto;\n min-width: 0;\n }\n\n .cm-app-chrome__search[data-open=\"true\"] .cm-search--hud {\n width: min(100%, calc(100vw - var(--cm-chrome-safe) * 2 - var(--cm-hud-size) - var(--cm-chrome-gap)));\n }\n}\n\n/* \u2500\u2500 Form Controls \u2500\u2500 */\n.cm-form-group {\n margin-bottom: 14px;\n}\n\n.cm-form-group label {\n display: block;\n margin-bottom: 6px;\n font-family: var(--font-mono), monospace;\n font-size: 11px;\n color: hsl(var(--muted-foreground));\n font-weight: 600;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n}\n\n.cm-form-input,\n.cm-form-textarea,\n.cm-form-select {\n width: 100%;\n padding: 10px 12px;\n background: hsl(222 47% 7% / 0.84);\n border: 1px solid hsl(var(--primary) / 0.16);\n border-radius: 10px;\n color: hsl(var(--foreground));\n font-size: 14px;\n font-family: var(--font-sans), sans-serif;\n transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;\n}\n\n.cm-form-input:focus,\n.cm-form-textarea:focus,\n.cm-form-select:focus {\n outline: none;\n border-color: hsl(var(--primary));\n box-shadow:\n 0 0 0 1px hsl(var(--primary) / 0.24),\n inset 0 0 20px hsl(var(--primary) / 0.06);\n background: hsl(var(--background) / 0.96);\n}\n\n.cm-form-input:disabled,\n.cm-form-textarea:disabled,\n.cm-form-select:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n}\n\n.cm-form-textarea {\n min-height: 80px;\n resize: vertical;\n}\n\n/* \u2500\u2500 Notification / Alert \u2500\u2500 */\n.cm-notification {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 12px 16px;\n border-radius: 8px;\n font-size: 14px;\n font-weight: 500;\n animation: cm-slide-in 0.2s ease;\n}\n\n@keyframes cm-slide-in {\n from { opacity: 0; transform: translateY(-10px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n.cm-notification--success {\n background: hsl(142 71% 45% / 0.15);\n color: hsl(142 71% 45%);\n border: 1px solid hsl(142 71% 45%);\n}\n\n.cm-notification--error {\n background: hsl(var(--destructive) / 0.15);\n color: hsl(var(--destructive));\n border: 1px solid hsl(var(--destructive));\n}\n\n.cm-notification--warning {\n background: hsl(42 100% 48% / 0.12);\n color: hsl(42 100% 52%);\n border: 1px solid hsl(42 100% 52% / 0.5);\n}\n\n.cm-notification--info {\n background: hsl(var(--primary) / 0.08);\n border: 1px solid hsl(var(--primary) / 0.22);\n color: hsl(var(--foreground));\n}\n\n/* \u2500\u2500 Navigation \u2500\u2500 */\n.cm-nav {\n display: flex;\n gap: 4px;\n padding: 12px 0 0;\n}\n\n.cm-nav-btn {\n padding: 8px 14px;\n background: transparent;\n border: 1px solid transparent;\n color: hsl(var(--muted-foreground));\n cursor: pointer;\n border-radius: var(--radius, 0.25rem);\n font-size: 11px;\n font-weight: 600;\n font-family: var(--font-mono), monospace;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n transition: all 0.2s;\n}\n\n.cm-nav-btn:hover {\n color: hsl(var(--foreground));\n background: hsl(var(--muted));\n border-color: hsl(var(--primary) / 0.18);\n}\n\n.cm-nav-btn[data-active=\"true\"],\n.cm-nav-btn.active {\n color: hsl(var(--primary));\n background: hsl(var(--primary) / 0.12);\n border-color: hsl(var(--primary) / 0.28);\n}\n\n/* \u2500\u2500 Loading State \u2500\u2500 */\n.cm-loading-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 60px;\n color: hsl(var(--muted-foreground));\n}\n\n.cm-spinner {\n animation: cm-spin 1s linear infinite;\n}\n\n@keyframes cm-spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n}\n\n/* \u2500\u2500 Badge / Tag \u2500\u2500 */\n.cm-badge {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 3px 8px;\n border-radius: 4px;\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.03em;\n}\n\n.cm-badge--primary {\n background: hsl(var(--primary) / 0.15);\n color: hsl(var(--primary));\n}\n\n.cm-badge--accent {\n background: hsl(var(--accent) / 0.15);\n color: hsl(var(--accent));\n}\n\n.cm-badge--muted {\n background: hsl(var(--muted));\n color: hsl(var(--muted-foreground));\n}\n\n.cm-badge--success {\n background: hsl(142 71% 45% / 0.15);\n color: hsl(142 71% 45%);\n}\n\n.cm-badge--destructive {\n background: hsl(var(--destructive) / 0.15);\n color: hsl(var(--destructive));\n}\n\n/* \u2500\u2500 Search Bar \u2500\u2500 */\n.cm-search-bar {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 10px 12px;\n background: hsl(var(--card));\n border: 1px solid hsl(var(--border));\n border-radius: var(--radius, 0.25rem);\n}\n\n.cm-search-bar__icon {\n color: hsl(var(--muted-foreground));\n flex-shrink: 0;\n}\n\n.cm-search-bar__input {\n flex: 1;\n background: transparent;\n border: none;\n color: hsl(var(--foreground));\n font-size: 14px;\n font-family: var(--font-sans), sans-serif;\n outline: none;\n}\n\n.cm-search-bar__input::placeholder {\n color: hsl(var(--muted-foreground));\n}\n\n/* \u2500\u2500 Filter Buttons \u2500\u2500 */\n.cm-filter-btn {\n padding: 6px 14px;\n background: hsl(var(--card));\n border: 1px solid hsl(var(--border));\n border-radius: 999px;\n color: hsl(var(--muted-foreground));\n font-size: 11px;\n font-family: var(--font-mono), monospace;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n cursor: pointer;\n transition: all 0.2s;\n}\n\n.cm-filter-btn:hover {\n border-color: hsl(var(--primary));\n color: hsl(var(--foreground));\n}\n\n.cm-filter-btn[data-active=\"true\"],\n.cm-filter-btn.active {\n background: hsl(var(--primary));\n color: hsl(var(--primary-foreground));\n border-color: hsl(var(--primary));\n}\n\n/* \u2500\u2500 Icon Button \u2500\u2500 */\n.cm-icon-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 8px;\n background: transparent;\n border: 1px solid hsl(var(--border));\n color: hsl(var(--muted-foreground));\n border-radius: var(--radius, 0.25rem);\n cursor: pointer;\n font-family: var(--font-sans), sans-serif;\n transition: all 0.2s;\n}\n\n.cm-icon-btn:hover {\n background: hsl(var(--muted));\n color: hsl(var(--foreground));\n}\n\n.cm-icon-btn--danger:hover {\n border-color: hsl(var(--destructive));\n color: hsl(var(--destructive));\n}\n\n/* \u2500\u2500 Settings Section \u2500\u2500 */\n.cm-settings-section {\n margin-bottom: 24px;\n padding: 16px;\n background: hsl(var(--card));\n border: 1px solid hsl(var(--border));\n border-radius: max(var(--radius, 0.25rem), 0.3rem);\n}\n\n.cm-settings-section__title {\n font-size: 14px;\n font-weight: 600;\n margin-bottom: 16px;\n color: hsl(var(--muted-foreground));\n text-transform: uppercase;\n letter-spacing: 0.05em;\n}\n\n.cm-settings-section__hint {\n margin-bottom: 14px;\n font-size: 13px;\n color: hsl(var(--muted-foreground));\n}\n\n/* \u2500\u2500 Pagination \u2500\u2500 */\n.cm-pagination {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 16px;\n margin-top: 32px;\n padding-top: 24px;\n border-top: 1px solid hsl(var(--border));\n}\n\n.cm-page-btn {\n padding: 8px 16px;\n background: hsl(var(--card));\n border: 1px solid hsl(var(--border));\n border-radius: 6px;\n color: hsl(var(--muted-foreground));\n cursor: pointer;\n font-size: 13px;\n font-family: var(--font-sans), sans-serif;\n transition: all 0.2s;\n}\n\n.cm-page-btn:hover:not(:disabled) {\n background: hsl(var(--muted));\n color: hsl(var(--foreground));\n}\n\n.cm-page-btn:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n}\n\n.cm-page-info {\n font-size: 13px;\n color: hsl(var(--muted-foreground));\n}\n\n/* \u2500\u2500 Card \u2500\u2500 */\n.cm-card {\n background: hsl(var(--card));\n border: 1px solid hsl(var(--border));\n border-radius: 10px;\n padding: 18px;\n transition: all 0.2s;\n}\n\n.cm-card:hover {\n border-color: hsl(var(--border) / 0.8);\n transform: translateY(-2px);\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);\n}\n\n/* \u2500\u2500 Code Block \u2500\u2500 */\n.cm-code-block {\n display: block;\n padding: 10px 12px;\n background: hsl(var(--muted));\n border-radius: 6px;\n font-size: 12px;\n color: hsl(var(--primary));\n word-break: break-all;\n font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n}\n\n/* \u2500\u2500 Error / Empty States \u2500\u2500 */\n.cm-error-message {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px;\n background: hsl(var(--destructive) / 0.15);\n border: 1px solid hsl(var(--destructive));\n border-radius: 8px;\n color: hsl(var(--destructive));\n}\n\n/* \u2500\u2500 Playground / Chat Primitives \u2500\u2500 */\n.cm-playground {\n container-type: inline-size;\n display: flex;\n flex-direction: column;\n min-width: 0;\n height: min(58rem, calc(100dvh - clamp(8.5rem, 14vw, 10rem)));\n min-height: 34rem;\n overflow: hidden;\n border-radius: 16px;\n}\n\n.cm-playground__toolbar,\n.cm-playground__chat-toolbar,\n.cm-playground__caps-row {\n display: flex;\n align-items: center;\n min-width: 0;\n gap: clamp(0.4rem, 1.4cqi, 0.8rem);\n}\n\n.cm-playground__toolbar {\n flex: 0 0 auto;\n justify-content: space-between;\n padding: clamp(0.5rem, 1.6cqi, 0.8rem);\n border: 1px solid hsl(var(--primary) / 0.14);\n border-radius: 16px;\n background:\n linear-gradient(145deg, hsl(226 21% 23% / 0.38), hsl(221 50% 9% / 0.32)),\n radial-gradient(circle at 0% 0%, hsl(var(--primary) / 0.1), transparent 36%);\n box-shadow: inset 0 1px 0 hsl(0 0% 100% / 0.055);\n backdrop-filter: blur(16px) saturate(1.12);\n}\n\n.cm-playground__title {\n display: inline-flex;\n align-items: center;\n gap: 0.42rem;\n min-width: 0;\n color: hsl(var(--foreground));\n font-family: var(--font-mono), monospace;\n font-size: clamp(0.68rem, 1.8cqi, 0.86rem);\n font-weight: 800;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n}\n\n.cm-playground__title-icon {\n width: 1rem;\n height: 1rem;\n color: hsl(var(--primary));\n filter: drop-shadow(0 0 10px hsl(var(--primary) / 0.44));\n}\n\n.cm-playground__toolbar-right {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: 0.45rem;\n min-width: 0;\n flex-wrap: wrap;\n}\n\n.cm-playground__grid {\n flex: 1;\n min-height: 0;\n display: grid;\n grid-template-columns: minmax(0, 1fr);\n gap: clamp(0.75rem, 1.8cqi, 1rem);\n padding-top: clamp(0.75rem, 1.8cqi, 1rem);\n}\n\n@container (min-width: 62rem) {\n .cm-playground__grid {\n grid-template-columns: minmax(0, 2fr) minmax(19rem, 0.82fr);\n }\n\n .cm-playground__grid--collapsed {\n grid-template-columns: minmax(0, 1fr);\n }\n}\n\n.cm-playground__chat-cell,\n.cm-playground__pane-cell {\n min-width: 0;\n min-height: 0;\n display: flex;\n flex-direction: column;\n position: relative;\n}\n\n.cm-playground__chat-cell {\n overflow: hidden;\n border: 1px solid hsl(var(--primary) / 0.16);\n border-radius: 16px;\n background:\n linear-gradient(145deg, hsl(226 21% 23% / 0.34), hsl(221 50% 9% / 0.26)),\n hsl(224 36% 13% / 0.18);\n box-shadow: inset 0 1px 0 hsl(0 0% 100% / 0.045);\n backdrop-filter: blur(16px) saturate(1.1);\n}\n\n.cm-playground__pane-cell {\n display: none;\n}\n\n@container (min-width: 62rem) {\n .cm-playground__pane-cell {\n display: flex;\n }\n}\n\n.cm-playground__chat-toolbar {\n flex: 0 0 auto;\n padding: clamp(0.55rem, 1.5cqi, 0.85rem);\n border-bottom: 1px solid hsl(var(--primary) / 0.1);\n background: hsl(221 50% 9% / 0.24);\n flex-wrap: wrap;\n}\n\n.cm-playground__filter-wrap {\n display: flex;\n align-items: center;\n gap: 0.45rem;\n min-width: min(100%, 13rem);\n flex: 1 1 13rem;\n flex-wrap: wrap;\n}\n\n.cm-playground__filter-select {\n min-width: 0;\n flex: 1 1 8rem;\n min-height: 2.15rem;\n border: 1px solid hsl(var(--primary) / 0.16);\n border-radius: 999px;\n background: hsl(221 50% 9% / 0.46);\n color: hsl(var(--foreground));\n font-family: var(--font-mono), monospace;\n font-size: 0.72rem;\n padding: 0 0.75rem;\n}\n\n.cm-playground__filter-select:hover,\n.cm-playground__filter-select:focus,\n.cm-playground__filter-select--active {\n outline: none;\n border-color: hsl(var(--primary) / 0.42);\n box-shadow: 0 0 16px hsl(var(--primary) / 0.08);\n}\n\n.cm-playground__model-count,\n.cm-playground__caps-label {\n color: hsl(var(--muted-foreground));\n font-family: var(--font-mono), monospace;\n font-size: 0.68rem;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n white-space: nowrap;\n}\n\n.cm-playground__caps-row {\n flex: 0 0 auto;\n padding: 0.45rem clamp(0.55rem, 1.5cqi, 0.85rem);\n border-bottom: 1px solid hsl(var(--primary) / 0.08);\n overflow: auto hidden;\n}\n\n.cm-playground__cap-tag,\n.cm-playground__chip,\n.cm-playground__badge,\n.cm-model-badge,\n.cm-tool-chip,\n.cm-receipt-chip {\n display: inline-flex;\n align-items: center;\n gap: 0.35rem;\n border: 1px solid hsl(var(--primary) / 0.18);\n border-radius: 999px;\n background: hsl(221 50% 9% / 0.38);\n color: hsl(var(--foreground) / 0.78);\n font-family: var(--font-mono), monospace;\n font-size: 0.68rem;\n font-weight: 700;\n line-height: 1;\n text-transform: uppercase;\n transition:\n transform 160ms ease,\n border-color 180ms ease,\n box-shadow 180ms ease,\n color 180ms ease,\n background-color 180ms ease;\n}\n\n.cm-playground__cap-tag {\n min-height: 1.55rem;\n padding: 0 0.58rem;\n}\n\n.cm-playground__badge,\n.cm-model-badge {\n min-width: 0;\n max-width: min(100%, 24rem);\n min-height: 2.2rem;\n padding: 0 0.72rem;\n cursor: pointer;\n}\n\n.cm-playground__badge:hover,\n.cm-playground__badge:focus-visible,\n.cm-model-badge:hover,\n.cm-model-badge:focus-visible,\n.cm-playground__chip:hover,\n.cm-playground__chip:focus-visible,\n.cm-playground__chip--active {\n transform: translateY(-1px);\n outline: none;\n border-color: hsl(var(--primary) / 0.44);\n background: hsl(var(--primary) / 0.09);\n color: hsl(var(--foreground));\n box-shadow: 0 0 18px hsl(var(--primary) / 0.12);\n}\n\n.cm-model-badge[data-placeholder=\"true\"] {\n color: hsl(var(--muted-foreground));\n font-weight: 500;\n}\n\n.cm-playground__badge-dot,\n.cm-model-badge__dot {\n width: 0.48rem;\n height: 0.48rem;\n border-radius: 999px;\n background: hsl(var(--primary));\n box-shadow: 0 0 12px hsl(var(--primary) / 0.56);\n flex: 0 0 auto;\n}\n\n.cm-playground__badge-name,\n.cm-model-badge__name {\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.cm-playground__badge-price,\n.cm-playground__badge-shortcut,\n.cm-model-badge__price,\n.cm-model-badge__shortcut,\n.cm-playground__chip-count {\n color: hsl(var(--muted-foreground));\n font-size: 0.62rem;\n}\n\n.cm-playground__pane-toggle,\n.cm-playground__pane-expand {\n display: inline-grid;\n place-items: center;\n border: 1px solid hsl(var(--primary) / 0.22);\n background: hsl(221 50% 9% / 0.72);\n color: hsl(var(--primary));\n box-shadow: 0 0 18px hsl(var(--primary) / 0.08);\n cursor: pointer;\n}\n\n.cm-playground__pane-toggle {\n position: absolute;\n left: -0.7rem;\n top: 0.85rem;\n z-index: 4;\n width: 1.55rem;\n height: 1.55rem;\n border-radius: 999px;\n}\n\n.cm-playground__pane-expand {\n display: none;\n position: fixed;\n right: 0.2rem;\n top: 50%;\n z-index: 45;\n width: 2rem;\n height: 3.25rem;\n border-radius: 999px 0 0 999px;\n}\n\n@container (min-width: 62rem) {\n .cm-playground__pane-expand {\n display: inline-grid;\n }\n}\n\n.cm-playground__cmd-backdrop,\n.cm-command-overlay {\n position: fixed;\n inset: 0;\n z-index: 90;\n display: flex;\n align-items: flex-start;\n justify-content: center;\n padding: max(8vh, 4rem) 1rem 1rem;\n background:\n radial-gradient(circle at 50% 18%, hsl(var(--primary) / 0.09), transparent 30rem),\n hsl(240 30% 2% / 0.72);\n backdrop-filter: blur(14px);\n}\n\n.cm-playground__cmd-panel,\n.cm-command-panel {\n width: min(42rem, 100%);\n max-height: min(70dvh, 42rem);\n display: flex;\n flex-direction: column;\n overflow: hidden;\n border: 1px solid hsl(var(--primary) / 0.24);\n border-radius: 18px;\n background:\n linear-gradient(145deg, hsl(226 21% 23% / 0.58), hsl(221 50% 9% / 0.78)),\n hsl(var(--background));\n box-shadow:\n 0 0 44px hsl(var(--primary) / 0.12),\n inset 0 1px 0 hsl(0 0% 100% / 0.08);\n}\n\n.cm-playground__cmd-header,\n.cm-playground__cmd-footer,\n.cm-command-header,\n.cm-command-footer {\n flex: 0 0 auto;\n padding: 0.75rem 0.95rem;\n border-color: hsl(var(--primary) / 0.12);\n}\n\n.cm-playground__cmd-header,\n.cm-command-header {\n border-bottom: 1px solid hsl(var(--primary) / 0.12);\n}\n\n.cm-playground__cmd-footer,\n.cm-command-footer {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 0.75rem;\n border-top: 1px solid hsl(var(--primary) / 0.12);\n color: hsl(var(--muted-foreground));\n font-family: var(--font-mono), monospace;\n font-size: 0.68rem;\n flex-wrap: wrap;\n}\n\n.cm-playground__cmd-input,\n.cm-command-input {\n width: 100%;\n border: 0;\n outline: none;\n background: transparent;\n color: hsl(var(--foreground));\n font-family: var(--font-mono), monospace;\n font-size: clamp(0.92rem, 2.2vw, 1.1rem);\n}\n\n.cm-playground__cmd-list,\n.cm-command-list {\n flex: 1;\n min-height: 0;\n overflow: auto;\n padding: 0.35rem;\n}\n\n.cm-playground__cmd-group,\n.cm-command-group {\n padding: 0.55rem 0.7rem 0.28rem;\n color: hsl(var(--primary));\n font-family: var(--font-mono), monospace;\n font-size: 0.68rem;\n font-weight: 800;\n letter-spacing: 0.12em;\n text-transform: uppercase;\n}\n\n.cm-playground__cmd-item,\n.cm-command-item {\n display: flex;\n align-items: center;\n gap: 0.65rem;\n min-height: 2.55rem;\n border: 1px solid transparent;\n border-radius: 12px;\n padding: 0 0.75rem;\n cursor: pointer;\n}\n\n.cm-playground__cmd-item:hover,\n.cm-playground__cmd-item--selected,\n.cm-playground__cmd-item--current,\n.cm-command-item:hover,\n.cm-command-item[data-selected=\"true\"],\n.cm-command-item[data-current=\"true\"] {\n border-color: hsl(var(--primary) / 0.22);\n background: hsl(var(--primary) / 0.08);\n}\n\n.cm-playground__cmd-item-name,\n.cm-command-item__name {\n min-width: 0;\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: hsl(var(--foreground));\n font-family: var(--font-mono), monospace;\n font-size: 0.82rem;\n}\n\n.cm-playground__cmd-item-meta,\n.cm-playground__cmd-footer-hints,\n.cm-command-item__meta,\n.cm-command-footer__hints {\n display: flex;\n align-items: center;\n gap: 0.4rem;\n flex-wrap: wrap;\n}\n\n.cm-playground__cmd-item-provider,\n.cm-playground__cmd-item-type,\n.cm-playground__cmd-item-price,\n.cm-playground__cmd-hint kbd,\n.cm-command-item__provider,\n.cm-command-item__type,\n.cm-command-item__price,\n.cm-command-hint kbd {\n border-radius: 999px;\n background: hsl(221 50% 9% / 0.52);\n color: hsl(var(--muted-foreground));\n font-family: var(--font-mono), monospace;\n font-size: 0.62rem;\n padding: 0.22rem 0.45rem;\n}\n\n.cm-playground__cmd-empty,\n.cm-command-empty {\n padding: 2rem 1rem;\n color: hsl(var(--muted-foreground));\n text-align: center;\n}\n\n.cm-chat {\n display: flex;\n min-width: 0;\n min-height: 0;\n flex-direction: column;\n overflow: hidden;\n border: 1px solid hsl(var(--primary) / 0.16);\n border-radius: 16px;\n background: hsl(221 50% 9% / 0.24);\n}\n\n.cm-chat--bare {\n border: 0;\n border-radius: 0;\n background: transparent;\n}\n\n.cm-chat__header,\n.cm-chat__activity,\n.cm-chat__composer {\n flex: 0 0 auto;\n border-color: hsl(var(--primary) / 0.1);\n}\n\n.cm-chat__header {\n display: flex;\n align-items: center;\n gap: 0.55rem;\n padding: 0.75rem 0.9rem;\n border-bottom: 1px solid hsl(var(--primary) / 0.1);\n color: hsl(var(--primary));\n font-family: var(--font-mono), monospace;\n}\n\n.cm-chat__body {\n flex: 1;\n min-height: 0;\n overflow: auto;\n padding: clamp(0.85rem, 2cqi, 1.15rem);\n}\n\n.cm-chat__empty {\n display: grid;\n place-items: center;\n gap: 0.35rem;\n min-height: 14rem;\n color: hsl(var(--muted-foreground));\n text-align: center;\n}\n\n.cm-chat__messages {\n display: grid;\n gap: 1rem;\n}\n\n.cm-chat-message {\n display: flex;\n align-items: flex-start;\n gap: 0.7rem;\n min-width: 0;\n}\n\n.cm-chat-message--user {\n justify-content: flex-end;\n}\n\n.cm-chat-message__avatar {\n width: 2rem;\n height: 2rem;\n flex: 0 0 auto;\n}\n\n.cm-chat-message__avatar-assistant,\n.cm-chat-message__avatar-user {\n background: hsl(var(--primary) / 0.14);\n color: hsl(var(--primary));\n}\n\n.cm-chat-message__avatar-user {\n background: hsl(var(--accent) / 0.15);\n color: hsl(var(--accent));\n}\n\n.cm-chat-message__bubble {\n position: relative;\n max-width: min(44rem, 82%);\n min-width: 0;\n border: 1px solid hsl(var(--primary) / 0.14);\n border-radius: 16px;\n padding: 0.75rem 0.85rem;\n background:\n linear-gradient(145deg, hsl(226 21% 23% / 0.34), hsl(221 50% 9% / 0.28));\n color: hsl(var(--foreground));\n box-shadow: inset 0 1px 0 hsl(0 0% 100% / 0.045);\n}\n\n.cm-chat-message__bubble--user {\n border-color: hsl(var(--accent) / 0.22);\n background:\n linear-gradient(145deg, hsl(var(--accent) / 0.24), hsl(var(--primary) / 0.08));\n}\n\n.cm-chat-message__actions {\n position: absolute;\n right: 0;\n top: -2.1rem;\n display: none;\n align-items: center;\n gap: 0.25rem;\n border: 1px solid hsl(var(--primary) / 0.16);\n border-radius: 999px;\n background: hsl(var(--background) / 0.86);\n padding: 0.18rem;\n backdrop-filter: blur(12px);\n}\n\n.cm-chat-message__bubble:hover .cm-chat-message__actions,\n.cm-chat-message__bubble:focus-within .cm-chat-message__actions {\n display: flex;\n}\n\n.cm-chat__activity {\n display: flex;\n align-items: center;\n gap: 0.55rem;\n border-top: 1px dashed hsl(var(--primary) / 0.16);\n background: hsl(221 50% 9% / 0.34);\n padding: 0.55rem 0.8rem;\n color: hsl(var(--muted-foreground));\n font-family: var(--font-mono), monospace;\n font-size: 0.72rem;\n}\n\n.cm-chat__composer {\n border-top: 1px solid hsl(var(--primary) / 0.1);\n padding: clamp(0.7rem, 1.7cqi, 0.9rem);\n}\n\n.cm-chat__attachments {\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem;\n margin-bottom: 0.6rem;\n}\n\n.cm-chat__attachment {\n position: relative;\n display: grid;\n width: 3rem;\n height: 3rem;\n place-items: center;\n overflow: hidden;\n border: 1px solid hsl(var(--primary) / 0.16);\n border-radius: 12px;\n background: hsl(221 50% 9% / 0.48);\n}\n\n.cm-chat__composer-row {\n display: flex;\n align-items: flex-end;\n gap: 0.55rem;\n min-width: 0;\n}\n\n.cm-chat__composer-row textarea {\n min-height: 2.55rem;\n border-color: hsl(var(--primary) / 0.16);\n border-radius: 14px;\n background: hsl(221 50% 9% / 0.4);\n}\n\n.cm-chat__icon-action {\n color: hsl(var(--muted-foreground));\n}\n\n.cm-chat__icon-action:hover {\n color: hsl(var(--primary));\n}\n\n@media (max-width: 820px) {\n .cm-playground {\n height: calc(100dvh - clamp(10rem, 28vw, 11.75rem) - env(safe-area-inset-top) - env(safe-area-inset-bottom));\n min-height: 30rem;\n }\n\n .cm-playground__title-text {\n display: none;\n }\n\n .cm-chat-message__bubble {\n max-width: 88%;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .cm-app-chrome__navitem,\n .cm-hud-button,\n .cm-app-chrome__hud-popover,\n .cm-playground__badge,\n .cm-playground__chip,\n .cm-chat-message__bubble {\n transition-duration: 0.01ms !important;\n }\n}\n";
|
|
2
2
|
//# sourceMappingURL=styles.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/shell/styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,QAAQ,
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/shell/styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,QAAQ,69+CA0gEpB,CAAC"}
|
package/dist/shell/styles.js
CHANGED
|
@@ -206,9 +206,9 @@ export const shellCss = `/**
|
|
|
206
206
|
min-width: 0;
|
|
207
207
|
min-height: 100dvh;
|
|
208
208
|
padding:
|
|
209
|
-
calc(env(safe-area-inset-top) + clamp(4.
|
|
210
|
-
clamp(
|
|
211
|
-
calc(env(safe-area-inset-bottom) + clamp(5.
|
|
209
|
+
calc(env(safe-area-inset-top) + clamp(4.8rem, 7vw, 5.9rem))
|
|
210
|
+
clamp(5.25rem, 6vw, 7rem)
|
|
211
|
+
calc(env(safe-area-inset-bottom) + clamp(5.35rem, 7.4vw, 6.35rem));
|
|
212
212
|
}
|
|
213
213
|
|
|
214
214
|
.cm-app-chrome__navdock {
|
|
@@ -358,27 +358,38 @@ export const shellCss = `/**
|
|
|
358
358
|
.cm-app-chrome__hud-group {
|
|
359
359
|
container-type: inline-size;
|
|
360
360
|
display: flex;
|
|
361
|
-
|
|
361
|
+
width: min(100%, 68rem);
|
|
362
362
|
min-width: 0;
|
|
363
363
|
align-items: center;
|
|
364
364
|
justify-content: flex-end;
|
|
365
365
|
gap: var(--cm-chrome-gap);
|
|
366
|
+
flex-wrap: nowrap;
|
|
366
367
|
pointer-events: auto;
|
|
367
368
|
}
|
|
368
369
|
|
|
369
370
|
.cm-app-chrome__hud-item,
|
|
370
|
-
.cm-app-chrome__hud-fold
|
|
371
|
+
.cm-app-chrome__hud-fold,
|
|
372
|
+
.cm-app-chrome__search {
|
|
371
373
|
position: relative;
|
|
372
|
-
min-width:
|
|
373
|
-
flex: 0
|
|
374
|
+
min-width: max-content;
|
|
375
|
+
flex: 0 0 auto;
|
|
376
|
+
}
|
|
377
|
+
|
|
378
|
+
.cm-app-chrome__search {
|
|
379
|
+
display: inline-flex;
|
|
380
|
+
min-width: var(--cm-hud-size);
|
|
381
|
+
align-items: center;
|
|
382
|
+
justify-content: flex-end;
|
|
383
|
+
gap: var(--cm-chrome-gap);
|
|
374
384
|
}
|
|
375
385
|
|
|
376
386
|
.cm-app-chrome__hud-item[data-priority="low"] {
|
|
377
|
-
flex-shrink:
|
|
387
|
+
flex-shrink: 0;
|
|
378
388
|
}
|
|
379
389
|
|
|
380
390
|
.cm-hud-button {
|
|
381
391
|
display: inline-flex;
|
|
392
|
+
align-items: center;
|
|
382
393
|
width: auto;
|
|
383
394
|
max-width: min(15.5rem, 52vw);
|
|
384
395
|
justify-content: center;
|
|
@@ -418,6 +429,35 @@ export const shellCss = `/**
|
|
|
418
429
|
max-width: 8.8rem;
|
|
419
430
|
}
|
|
420
431
|
|
|
432
|
+
.cm-hud-wallet {
|
|
433
|
+
min-width: min(13.75rem, 42vw);
|
|
434
|
+
justify-content: flex-start;
|
|
435
|
+
padding-inline: 0.82rem 0.74rem;
|
|
436
|
+
background:
|
|
437
|
+
radial-gradient(circle at 14% 50%, hsl(var(--primary) / 0.18), transparent 34%),
|
|
438
|
+
radial-gradient(circle at 86% 100%, hsl(var(--accent) / 0.12), transparent 40%),
|
|
439
|
+
linear-gradient(145deg, hsl(226 21% 22% / 0.58), hsl(221 50% 8% / 0.48));
|
|
440
|
+
}
|
|
441
|
+
|
|
442
|
+
.cm-hud-wallet__icon {
|
|
443
|
+
color: hsl(var(--primary));
|
|
444
|
+
opacity: 0.92;
|
|
445
|
+
}
|
|
446
|
+
|
|
447
|
+
.cm-hud-wallet .cm-hud-value {
|
|
448
|
+
color: hsl(var(--foreground));
|
|
449
|
+
font-family: var(--font-display), sans-serif;
|
|
450
|
+
font-size: 0.76rem;
|
|
451
|
+
letter-spacing: 0.05em;
|
|
452
|
+
}
|
|
453
|
+
|
|
454
|
+
.cm-hud-wallet .cm-hud-address {
|
|
455
|
+
color: hsl(var(--primary) / 0.9);
|
|
456
|
+
font-size: 0.68rem;
|
|
457
|
+
font-weight: 650;
|
|
458
|
+
letter-spacing: 0.04em;
|
|
459
|
+
}
|
|
460
|
+
|
|
421
461
|
.cm-hud-status {
|
|
422
462
|
width: 0.48rem;
|
|
423
463
|
height: 0.48rem;
|
|
@@ -533,6 +573,34 @@ export const shellCss = `/**
|
|
|
533
573
|
box-shadow: inset 0 0 20px hsl(var(--primary) / 0.04);
|
|
534
574
|
}
|
|
535
575
|
|
|
576
|
+
.cm-search--hud {
|
|
577
|
+
width: 0;
|
|
578
|
+
max-width: min(24rem, calc(100vw - var(--cm-chrome-safe) * 2 - var(--cm-hud-size)));
|
|
579
|
+
min-height: var(--cm-hud-size);
|
|
580
|
+
padding-inline: 0;
|
|
581
|
+
border-width: 0;
|
|
582
|
+
opacity: 0;
|
|
583
|
+
overflow: hidden;
|
|
584
|
+
pointer-events: none;
|
|
585
|
+
transform: scaleX(0.92);
|
|
586
|
+
transform-origin: right center;
|
|
587
|
+
transition:
|
|
588
|
+
width 180ms ease,
|
|
589
|
+
padding-inline 180ms ease,
|
|
590
|
+
opacity 150ms ease,
|
|
591
|
+
transform 180ms ease,
|
|
592
|
+
border-color 180ms ease;
|
|
593
|
+
}
|
|
594
|
+
|
|
595
|
+
.cm-app-chrome__search[data-open="true"] .cm-search--hud {
|
|
596
|
+
width: clamp(13rem, 29vw, 24rem);
|
|
597
|
+
padding-inline: 0.85rem;
|
|
598
|
+
border-width: 1px;
|
|
599
|
+
opacity: 1;
|
|
600
|
+
pointer-events: auto;
|
|
601
|
+
transform: scaleX(1);
|
|
602
|
+
}
|
|
603
|
+
|
|
536
604
|
.cm-search input,
|
|
537
605
|
.cm-search__input {
|
|
538
606
|
min-width: 0;
|
|
@@ -842,17 +910,27 @@ export const shellCss = `/**
|
|
|
842
910
|
}
|
|
843
911
|
|
|
844
912
|
@container (max-width: 31rem) {
|
|
845
|
-
.cm-app-chrome__hud-item[data-priority="medium"] .cm-hud-value,
|
|
846
913
|
.cm-app-chrome__hud-item[data-priority="medium"] .cm-hud-address,
|
|
847
914
|
.cm-app-chrome__hud-item[data-priority="medium"] .cm-hud-label {
|
|
848
915
|
display: none;
|
|
849
916
|
}
|
|
850
917
|
|
|
851
|
-
.cm-app-chrome__hud-item[data-priority="medium"] .cm-hud-
|
|
852
|
-
|
|
918
|
+
.cm-app-chrome__hud-item[data-priority="medium"] .cm-hud-wallet .cm-hud-value {
|
|
919
|
+
display: none;
|
|
920
|
+
}
|
|
921
|
+
|
|
922
|
+
.cm-app-chrome__hud-item[data-priority="medium"] .cm-hud-wallet {
|
|
853
923
|
width: var(--cm-hud-size);
|
|
924
|
+
min-width: var(--cm-hud-size);
|
|
854
925
|
padding-inline: 0;
|
|
855
926
|
}
|
|
927
|
+
|
|
928
|
+
.cm-app-chrome__hud-item[data-priority="medium"] .cm-session-trigger {
|
|
929
|
+
width: auto;
|
|
930
|
+
min-width: max-content;
|
|
931
|
+
max-width: min(12rem, 58vw);
|
|
932
|
+
padding-inline: 0.72rem;
|
|
933
|
+
}
|
|
856
934
|
}
|
|
857
935
|
|
|
858
936
|
@media (max-width: 820px) {
|
|
@@ -883,7 +961,13 @@ export const shellCss = `/**
|
|
|
883
961
|
}
|
|
884
962
|
|
|
885
963
|
.cm-app-chrome__hud-group {
|
|
886
|
-
|
|
964
|
+
width: min(100%, calc(100vw - var(--cm-chrome-safe) * 2));
|
|
965
|
+
}
|
|
966
|
+
|
|
967
|
+
.cm-app-chrome__hud-item,
|
|
968
|
+
.cm-app-chrome__hud-fold,
|
|
969
|
+
.cm-app-chrome__search {
|
|
970
|
+
min-width: auto;
|
|
887
971
|
}
|
|
888
972
|
|
|
889
973
|
.cm-app-chrome__navdock {
|
|
@@ -935,6 +1019,20 @@ export const shellCss = `/**
|
|
|
935
1019
|
.cm-hud-overflow {
|
|
936
1020
|
display: inline-flex;
|
|
937
1021
|
}
|
|
1022
|
+
|
|
1023
|
+
.cm-app-chrome__hud-group[data-search-open="true"] .cm-app-chrome__hud-item,
|
|
1024
|
+
.cm-app-chrome__hud-group[data-search-open="true"] .cm-app-chrome__hud-fold {
|
|
1025
|
+
display: none;
|
|
1026
|
+
}
|
|
1027
|
+
|
|
1028
|
+
.cm-app-chrome__search[data-open="true"] {
|
|
1029
|
+
flex: 1 1 auto;
|
|
1030
|
+
min-width: 0;
|
|
1031
|
+
}
|
|
1032
|
+
|
|
1033
|
+
.cm-app-chrome__search[data-open="true"] .cm-search--hud {
|
|
1034
|
+
width: min(100%, calc(100vw - var(--cm-chrome-safe) * 2 - var(--cm-hud-size) - var(--cm-chrome-gap)));
|
|
1035
|
+
}
|
|
938
1036
|
}
|
|
939
1037
|
|
|
940
1038
|
/* ── Form Controls ── */
|
package/dist/shell/styles.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/shell/styles.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,QAAQ,GAAG
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/shell/styles.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,QAAQ,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0gEvB,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@compose-market/theme",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.95",
|
|
4
4
|
"description": "Official design tokens and theme system for Compose.Market",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"design-tokens",
|
|
@@ -171,4 +171,4 @@
|
|
|
171
171
|
"access": "public"
|
|
172
172
|
},
|
|
173
173
|
"module": "./dist/index.js"
|
|
174
|
-
}
|
|
174
|
+
}
|