@compose-market/theme 0.0.91 → 0.0.93

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.
@@ -1,258 +1,455 @@
1
1
  /**
2
2
  * Mirror Pane Styles
3
3
  *
4
- * BEM CSS for the MirrorPane component pattern (model info panel).
4
+ * Shared BEM CSS for model/detail panes.
5
5
  */
6
6
  export const mirrorStyles = /* css */ `
7
- /* ── Mirror Pane ── */
8
7
  .cm-mirror-pane {
8
+ container-type: inline-size;
9
9
  display: flex;
10
10
  flex-direction: column;
11
- border: 1px solid hsl(var(--primary) / 0.3);
12
- border-radius: 8px;
13
- background: hsl(var(--card));
14
- overflow: hidden;
11
+ min-width: 0;
12
+ min-height: 0;
15
13
  height: 100%;
14
+ overflow: hidden;
15
+ border: 1px solid hsl(var(--primary) / 0.18);
16
+ border-radius: 16px;
17
+ background:
18
+ linear-gradient(145deg, hsl(226 21% 23% / 0.42), hsl(221 50% 9% / 0.34)),
19
+ radial-gradient(circle at 18% 0%, hsl(var(--primary) / 0.09), transparent 34%),
20
+ hsl(224 36% 13% / 0.24);
21
+ box-shadow:
22
+ inset 0 1px 0 hsl(0 0% 100% / 0.06),
23
+ 0 0 34px hsl(var(--primary) / 0.06);
24
+ color: hsl(var(--foreground));
25
+ font-family: var(--font-sans), sans-serif;
26
+ backdrop-filter: blur(16px) saturate(1.12);
16
27
  }
17
28
 
18
- /* Toolbar (icon tabs) */
19
29
  .cm-mirror-pane__toolbar {
20
- flex-shrink: 0;
30
+ flex: 0 0 auto;
21
31
  display: flex;
22
32
  align-items: center;
23
- gap: 4px;
24
- padding: 8px;
25
- border-bottom: 1px solid hsl(var(--sidebar-border));
26
- background: hsl(var(--background) / 0.3);
33
+ gap: 0.35rem;
34
+ padding: 0.45rem;
35
+ border-bottom: 1px solid hsl(var(--primary) / 0.1);
36
+ background: hsl(221 50% 9% / 0.28);
27
37
  }
28
38
 
29
39
  .cm-mirror-pane__toolbar-btn {
30
- padding: 8px;
31
- border-radius: 6px;
32
- border: none;
33
- background: transparent;
34
- color: hsl(var(--muted-foreground));
35
- cursor: pointer;
36
- transition: color 0.15s ease, background 0.15s ease;
37
40
  display: inline-flex;
38
41
  align-items: center;
39
42
  justify-content: center;
43
+ gap: 0.4rem;
44
+ min-width: 2.2rem;
45
+ min-height: 2.2rem;
46
+ padding: 0 0.62rem;
47
+ border: 1px solid transparent;
48
+ border-radius: 999px;
49
+ background: transparent;
50
+ color: hsl(var(--muted-foreground));
51
+ cursor: pointer;
52
+ font-family: var(--font-mono), monospace;
53
+ font-size: 0.68rem;
54
+ letter-spacing: 0.08em;
55
+ text-transform: uppercase;
56
+ transition:
57
+ transform 160ms ease,
58
+ border-color 180ms ease,
59
+ background-color 180ms ease,
60
+ color 180ms ease,
61
+ box-shadow 180ms ease;
40
62
  }
41
63
 
42
- .cm-mirror-pane__toolbar-btn:hover {
64
+ .cm-mirror-pane__toolbar-btn:hover,
65
+ .cm-mirror-pane__toolbar-btn:focus-visible {
66
+ outline: none;
43
67
  color: hsl(var(--foreground));
44
- background: hsl(var(--muted));
68
+ border-color: hsl(var(--primary) / 0.2);
69
+ background: hsl(var(--primary) / 0.08);
45
70
  }
46
71
 
47
72
  .cm-mirror-pane__toolbar-btn--active-cyan {
48
- background: hsl(var(--primary) / 0.2);
73
+ border-color: hsl(var(--primary) / 0.36);
74
+ background: hsl(var(--primary) / 0.12);
49
75
  color: hsl(var(--primary));
76
+ box-shadow: 0 0 18px hsl(var(--primary) / 0.12);
50
77
  }
51
78
 
52
79
  .cm-mirror-pane__toolbar-btn--active-fuchsia {
53
- background: hsl(var(--accent) / 0.2);
80
+ border-color: hsl(var(--accent) / 0.34);
81
+ background: hsl(var(--accent) / 0.11);
54
82
  color: hsl(var(--accent));
83
+ box-shadow: 0 0 18px hsl(var(--accent) / 0.1);
84
+ }
85
+
86
+ .cm-mirror-pane__toolbar-btn svg {
87
+ width: 1rem;
88
+ height: 1rem;
89
+ }
90
+
91
+ .cm-mirror-pane__toolbar-label {
92
+ display: none;
93
+ }
94
+
95
+ @container (min-width: 24rem) {
96
+ .cm-mirror-pane__toolbar-label {
97
+ display: inline;
98
+ }
55
99
  }
56
100
 
57
- /* Body */
58
101
  .cm-mirror-pane__body {
59
- padding: 12px;
102
+ flex: 1;
103
+ min-height: 0;
60
104
  display: flex;
61
105
  flex-direction: column;
62
- gap: 16px;
106
+ gap: clamp(0.75rem, 3cqi, 1rem);
107
+ overflow: auto;
108
+ padding: clamp(0.75rem, 3cqi, 1rem);
109
+ }
110
+
111
+ .cm-mirror-pane__footer {
112
+ flex: 0 0 auto;
113
+ border-top: 1px solid hsl(var(--primary) / 0.1);
114
+ padding: 0.75rem 1rem;
115
+ }
116
+
117
+ .cm-mirror-pane__empty {
63
118
  flex: 1;
64
- overflow-y: auto;
119
+ min-height: 14rem;
120
+ display: grid;
121
+ place-items: center;
122
+ align-content: center;
123
+ gap: 0.75rem;
124
+ padding: 1.5rem;
125
+ text-align: center;
65
126
  }
66
127
 
67
- @media (min-width: 640px) {
68
- .cm-mirror-pane__body {
69
- padding: 16px;
70
- }
128
+ .cm-mirror-pane__empty-icon {
129
+ display: inline-flex;
130
+ color: hsl(var(--primary));
131
+ opacity: 0.72;
71
132
  }
72
133
 
73
- @media (min-width: 768px) {
74
- .cm-mirror-pane__body {
75
- padding: 20px;
76
- }
134
+ .cm-mirror-pane__empty-icon svg {
135
+ width: 2.5rem;
136
+ height: 2.5rem;
137
+ }
138
+
139
+ .cm-mirror-pane__empty-text {
140
+ max-width: 18rem;
141
+ color: hsl(var(--muted-foreground));
142
+ line-height: 1.45;
77
143
  }
78
144
 
79
- /* Model identity */
80
145
  .cm-mirror-pane__model-header {
81
146
  display: flex;
82
147
  align-items: flex-start;
83
- gap: 12px;
148
+ gap: 0.75rem;
149
+ min-width: 0;
84
150
  }
85
151
 
86
152
  .cm-mirror-pane__model-icon-box {
87
- padding: 8px;
88
- background: hsl(var(--primary) / 0.1);
89
- border: 1px solid hsl(var(--primary) / 0.3);
90
- border-radius: 8px;
91
- flex-shrink: 0;
153
+ display: grid;
154
+ width: 2.65rem;
155
+ height: 2.65rem;
156
+ place-items: center;
157
+ flex: 0 0 auto;
158
+ border: 1px solid hsl(var(--primary) / 0.24);
159
+ border-radius: 12px;
160
+ background: hsl(var(--primary) / 0.09);
161
+ color: hsl(var(--primary));
162
+ box-shadow: inset 0 0 18px hsl(var(--primary) / 0.08);
163
+ }
164
+
165
+ .cm-mirror-pane__model-icon-box svg {
166
+ width: 1.2rem;
167
+ height: 1.2rem;
92
168
  }
93
169
 
94
170
  .cm-mirror-pane__model-copy {
95
- min-width: 0;
96
171
  flex: 1;
172
+ min-width: 0;
173
+ display: grid;
174
+ gap: 0.25rem;
175
+ }
176
+
177
+ .cm-mirror-pane__model-name-row {
178
+ display: flex;
179
+ align-items: center;
180
+ gap: 0.5rem;
181
+ min-width: 0;
182
+ flex-wrap: wrap;
97
183
  }
98
184
 
99
185
  .cm-mirror-pane__model-name {
100
- font-weight: 600;
186
+ min-width: 0;
187
+ margin: 0;
101
188
  color: hsl(var(--foreground));
102
- white-space: nowrap;
103
- overflow: hidden;
104
- text-overflow: ellipsis;
105
- font-size: 14px;
189
+ font-family: var(--font-display), sans-serif;
190
+ font-size: clamp(0.98rem, 4cqi, 1.14rem);
191
+ font-weight: 800;
192
+ line-height: 1.08;
193
+ overflow-wrap: anywhere;
106
194
  }
107
195
 
108
- @media (min-width: 768px) {
109
- .cm-mirror-pane__model-name {
110
- font-size: 16px;
111
- }
196
+ .cm-mirror-pane__model-types {
197
+ display: inline-flex;
198
+ align-items: center;
199
+ gap: 0.3rem;
200
+ flex-wrap: wrap;
112
201
  }
113
202
 
114
- .cm-mirror-pane__model-provider {
115
- font-size: 12px;
203
+ .cm-mirror-pane__badge {
204
+ display: inline-flex;
205
+ align-items: center;
206
+ min-height: 1.35rem;
207
+ border: 1px solid hsl(var(--primary) / 0.18);
208
+ border-radius: 999px;
209
+ background: hsl(var(--primary) / 0.08);
210
+ color: hsl(var(--primary));
211
+ padding: 0 0.45rem;
212
+ font-family: var(--font-mono), monospace;
213
+ font-size: 0.6rem;
214
+ font-weight: 700;
215
+ letter-spacing: 0.06em;
216
+ text-transform: uppercase;
217
+ }
218
+
219
+ .cm-mirror-pane__badge[data-tone="fuchsia"] {
220
+ border-color: hsl(var(--accent) / 0.24);
221
+ background: hsl(var(--accent) / 0.1);
222
+ color: hsl(var(--accent));
223
+ }
224
+
225
+ .cm-mirror-pane__badge[data-tone="green"] {
226
+ border-color: hsl(142 71% 45% / 0.28);
227
+ background: hsl(142 71% 45% / 0.1);
228
+ color: hsl(142 71% 55%);
229
+ }
230
+
231
+ .cm-mirror-pane__badge[data-tone="warning"] {
232
+ border-color: hsl(42 100% 48% / 0.28);
233
+ background: hsl(42 100% 48% / 0.1);
234
+ color: hsl(42 100% 58%);
235
+ }
236
+
237
+ .cm-mirror-pane__badge[data-tone="danger"] {
238
+ border-color: hsl(var(--destructive) / 0.3);
239
+ background: hsl(var(--destructive) / 0.12);
240
+ color: hsl(var(--destructive));
241
+ }
242
+
243
+ .cm-mirror-pane__model-provider,
244
+ .cm-mirror-pane__model-id {
245
+ margin: 0;
116
246
  color: hsl(var(--muted-foreground));
117
- white-space: nowrap;
118
- overflow: hidden;
119
- text-overflow: ellipsis;
247
+ font-family: var(--font-mono), monospace;
248
+ font-size: 0.72rem;
249
+ line-height: 1.35;
250
+ overflow-wrap: anywhere;
251
+ }
252
+
253
+ .cm-mirror-pane__model-id {
254
+ color: hsl(var(--primary) / 0.72);
255
+ }
256
+
257
+ .cm-mirror-pane__description,
258
+ .cm-mirror-pane__description--clamped,
259
+ .cm-mirror-pane__section,
260
+ .cm-mirror-pane__pricing-compact,
261
+ .cm-mirror-pane__pricing-block,
262
+ .cm-mirror-pane__tool-group,
263
+ .cm-mirror-pane__no-params,
264
+ .cm-mirror-pane__text-area,
265
+ .cm-mirror-pane__field {
266
+ border: 1px solid hsl(var(--primary) / 0.12);
267
+ border-radius: 12px;
268
+ background: hsl(221 50% 9% / 0.3);
269
+ }
270
+
271
+ .cm-mirror-pane__description,
272
+ .cm-mirror-pane__description--clamped {
273
+ padding: 0.75rem;
274
+ color: hsl(var(--muted-foreground));
275
+ line-height: 1.5;
120
276
  }
121
277
 
122
- /* Section panel */
123
278
  .cm-mirror-pane__section {
124
- border-radius: 2px;
125
- border: 1px solid hsl(var(--sidebar-border));
126
- background: hsl(var(--background) / 0.3);
127
- padding: 12px;
128
279
  display: flex;
129
280
  flex-direction: column;
130
- gap: 12px;
281
+ gap: 0.6rem;
282
+ min-width: 0;
131
283
  }
132
284
 
133
- .cm-mirror-pane__section-label {
134
- font-size: 11px;
135
- text-transform: uppercase;
136
- letter-spacing: 0.06em;
285
+ .cm-mirror-pane__section--compact {
286
+ padding: 0.75rem;
287
+ }
288
+
289
+ .cm-mirror-pane__section-label,
290
+ .cm-mirror-pane__tool-group-label {
137
291
  color: hsl(var(--muted-foreground));
292
+ font-family: var(--font-mono), monospace;
293
+ font-size: 0.68rem;
294
+ font-weight: 800;
295
+ letter-spacing: 0.1em;
296
+ text-transform: uppercase;
138
297
  }
139
298
 
140
- /* Key-value rows */
141
- .cm-mirror-pane__kv-row {
299
+ .cm-mirror-pane__io-row,
300
+ .cm-mirror-pane__kv-row,
301
+ .cm-mirror-pane__pricing-header,
302
+ .cm-mirror-pane__tool-toggle {
142
303
  display: flex;
143
304
  align-items: center;
144
305
  justify-content: space-between;
145
- gap: 12px;
146
- font-family: var(--font-mono, monospace);
306
+ gap: 0.75rem;
307
+ min-width: 0;
147
308
  }
148
309
 
310
+ .cm-mirror-pane__io-row {
311
+ align-items: flex-start;
312
+ }
313
+
314
+ .cm-mirror-pane__io-label,
149
315
  .cm-mirror-pane__kv-label {
316
+ flex: 0 0 auto;
150
317
  color: hsl(var(--muted-foreground));
318
+ font-family: var(--font-mono), monospace;
319
+ font-size: 0.7rem;
320
+ }
321
+
322
+ .cm-mirror-pane__io-badges,
323
+ .cm-mirror-pane__kv-grid,
324
+ .cm-mirror-pane__pricing-entries,
325
+ .cm-mirror-pane__custom-content,
326
+ .cm-mirror-pane__custom-section {
327
+ display: flex;
328
+ flex-direction: column;
329
+ gap: 0.45rem;
330
+ min-width: 0;
331
+ }
332
+
333
+ .cm-mirror-pane__io-badges {
334
+ flex-direction: row;
335
+ flex-wrap: wrap;
151
336
  }
152
337
 
153
338
  .cm-mirror-pane__kv-value {
339
+ min-width: 0;
154
340
  color: hsl(var(--foreground));
341
+ font-family: var(--font-mono), monospace;
342
+ font-size: 0.74rem;
155
343
  text-align: right;
344
+ overflow-wrap: anywhere;
156
345
  }
157
346
 
158
- /* Pricing sub-panel */
159
- .cm-mirror-pane__pricing-block {
160
- border-radius: 2px;
161
- border: 1px solid hsl(var(--sidebar-border));
162
- background: hsl(var(--background) / 0.4);
163
- padding: 8px;
347
+ .cm-mirror-pane__pricing-compact,
348
+ .cm-mirror-pane__pricing-block,
349
+ .cm-mirror-pane__tool-group {
164
350
  display: flex;
165
351
  flex-direction: column;
166
- gap: 6px;
352
+ gap: 0.45rem;
353
+ padding: 0.62rem 0.7rem;
167
354
  }
168
355
 
169
- .cm-mirror-pane__pricing-header {
170
- display: flex;
171
- align-items: center;
172
- justify-content: space-between;
173
- gap: 12px;
356
+ .cm-mirror-pane__pricing-unit {
357
+ color: hsl(var(--muted-foreground) / 0.72);
358
+ font-family: var(--font-mono), monospace;
359
+ font-size: 0.64rem;
360
+ letter-spacing: 0.08em;
361
+ text-transform: uppercase;
174
362
  }
175
363
 
176
364
  .cm-mirror-pane__pricing-name {
177
- font-family: var(--font-mono, monospace);
178
- color: hsl(var(--primary));
179
- }
180
-
181
- /* Description block */
182
- .cm-mirror-pane__description {
183
- border-radius: 2px;
184
- border: 1px solid hsl(var(--sidebar-border));
185
- background: hsl(var(--background) / 0.3);
186
- padding: 12px;
187
- color: hsl(var(--muted-foreground));
188
- line-height: 1.6;
365
+ color: hsl(var(--accent));
366
+ font-family: var(--font-mono), monospace;
367
+ font-weight: 700;
189
368
  }
190
369
 
191
- /* Settings: tool group */
192
370
  .cm-mirror-pane__tool-group {
193
- border-radius: 2px;
194
- border: 1px solid hsl(var(--primary) / 0.2);
371
+ border-color: hsl(var(--primary) / 0.18);
195
372
  background: hsl(var(--primary) / 0.05);
196
- padding: 12px;
197
- display: flex;
198
- flex-direction: column;
199
- gap: 12px;
200
373
  }
201
374
 
202
375
  .cm-mirror-pane__tool-group--fuchsia {
203
- border-color: hsl(var(--accent) / 0.2);
376
+ border-color: hsl(var(--accent) / 0.18);
204
377
  background: hsl(var(--accent) / 0.05);
205
378
  }
206
379
 
207
- .cm-mirror-pane__tool-group-label {
208
- font-size: 12px;
209
- font-family: var(--font-mono, monospace);
210
- }
211
-
212
- .cm-mirror-pane__tool-toggle {
213
- display: flex;
380
+ .cm-mirror-pane__tool-toggle-label {
381
+ display: inline-flex;
214
382
  align-items: center;
215
- justify-content: space-between;
383
+ gap: 0.42rem;
384
+ min-width: 0;
385
+ color: hsl(var(--foreground));
216
386
  }
217
387
 
218
- .cm-mirror-pane__tool-toggle-label {
219
- display: flex;
220
- align-items: center;
221
- gap: 8px;
222
- font-size: 14px;
388
+ .cm-mirror-pane__tool-toggle-label svg,
389
+ .cm-mirror-pane__tool-toggle-label-icon {
390
+ width: 1rem;
391
+ height: 1rem;
392
+ flex: 0 0 auto;
223
393
  }
224
394
 
225
- /* Empty state */
226
- .cm-mirror-pane__empty {
227
- padding: 16px 20px;
228
- display: flex;
229
- flex-direction: column;
230
- align-items: center;
231
- justify-content: center;
232
- flex: 1;
233
- text-align: center;
395
+ .cm-mirror-pane__text-area {
396
+ width: 100%;
397
+ min-height: 7rem;
398
+ padding: 0.72rem;
399
+ color: hsl(var(--foreground));
400
+ font-family: var(--font-mono), monospace;
401
+ font-size: 0.78rem;
402
+ resize: vertical;
234
403
  }
235
404
 
236
- .cm-mirror-pane__empty-icon {
237
- width: 40px;
238
- height: 40px;
239
- color: hsl(var(--muted-foreground) / 0.4);
240
- margin-bottom: 12px;
405
+ .cm-mirror-pane__field {
406
+ width: 100%;
407
+ min-height: 2.45rem;
408
+ color: hsl(var(--foreground));
409
+ font-family: var(--font-mono), monospace;
410
+ font-size: 0.78rem;
241
411
  }
242
412
 
243
- .cm-mirror-pane__empty-text {
244
- font-size: 14px;
245
- color: hsl(var(--muted-foreground) / 0.7);
413
+ .cm-mirror-pane__field:focus,
414
+ .cm-mirror-pane__field:focus-visible,
415
+ .cm-mirror-pane__text-area:focus,
416
+ .cm-mirror-pane__text-area:focus-visible {
417
+ outline: none;
418
+ border-color: hsl(var(--primary) / 0.5);
419
+ box-shadow: 0 0 0 1px hsl(var(--primary) / 0.16);
246
420
  }
247
421
 
248
- /* No-params state */
422
+ .cm-mirror-pane__param-description,
249
423
  .cm-mirror-pane__no-params {
250
- border-radius: 2px;
251
- border: 1px solid hsl(var(--sidebar-border));
252
- background: hsl(var(--background) / 0.3);
253
- padding: 16px;
254
- font-size: 14px;
255
424
  color: hsl(var(--muted-foreground));
425
+ font-size: 0.78rem;
426
+ line-height: 1.4;
427
+ }
428
+
429
+ .cm-mirror-pane__no-params {
430
+ padding: 1rem;
431
+ text-align: center;
432
+ }
433
+
434
+ @container (max-width: 22rem) {
435
+ .cm-mirror-pane__io-row,
436
+ .cm-mirror-pane__kv-row,
437
+ .cm-mirror-pane__pricing-header,
438
+ .cm-mirror-pane__tool-toggle {
439
+ align-items: flex-start;
440
+ flex-direction: column;
441
+ gap: 0.35rem;
442
+ }
443
+
444
+ .cm-mirror-pane__kv-value {
445
+ text-align: left;
446
+ }
447
+ }
448
+
449
+ @media (prefers-reduced-motion: reduce) {
450
+ .cm-mirror-pane__toolbar-btn {
451
+ transition-duration: 0.01ms !important;
452
+ }
256
453
  }
257
454
  `;
258
455
  //# sourceMappingURL=styles.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/mirror/styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2PrC,CAAC"}
1
+ {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/mirror/styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgcrC,CAAC"}
@@ -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: hsl(var(--primary) / 0.08);\n color: hsl(var(--primary));\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-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.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";
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: hsl(var(--primary) / 0.08);\n color: hsl(var(--primary));\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: var(--cm-hud-size, 2.75rem);\n min-height: var(--cm-hud-size, 2.75rem);\n height: var(--cm-hud-size, 2.75rem);\n padding-inline: clamp(0.72rem, 1.4vw, 0.92rem);\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: var(--cm-hud-size, 2.75rem);\n padding-inline: 0.72rem;\n }\n}\n\n@media (max-width: 380px) {\n .cm-app-chrome__hud .cm-session-trigger {\n width: var(--cm-hud-size, 2.75rem);\n padding-inline: 0;\n }\n\n .cm-app-chrome__hud .cm-session-trigger__mobile {\n display: none;\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,i7NAkVtB,CAAC"}
1
+ {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/session/styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU,kpQAoYtB,CAAC"}