@compose-market/theme 0.1.5 → 0.1.6

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,513 +0,0 @@
1
- /**
2
- * Mirror Pane Styles
3
- *
4
- * Shared BEM CSS for model/detail panes.
5
- */
6
- export const mirrorStyles = /* css */ `
7
- .cm-mirror-pane {
8
- container-type: inline-size;
9
- display: flex;
10
- flex-direction: column;
11
- min-width: 0;
12
- min-height: 0;
13
- height: 100%;
14
- overflow: visible;
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);
27
- }
28
-
29
- .cm-mirror-pane__toolbar {
30
- flex: 0 0 auto;
31
- display: flex;
32
- align-items: center;
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);
37
- }
38
-
39
- .cm-mirror-pane__toolbar-btn {
40
- display: inline-flex;
41
- align-items: center;
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;
62
- }
63
-
64
- .cm-mirror-pane__toolbar-btn:hover,
65
- .cm-mirror-pane__toolbar-btn:focus-visible {
66
- outline: none;
67
- color: hsl(var(--foreground));
68
- border-color: hsl(var(--primary) / 0.2);
69
- background: hsl(var(--primary) / 0.08);
70
- }
71
-
72
- .cm-mirror-pane__toolbar-btn--active-cyan {
73
- border-color: hsl(var(--primary) / 0.36);
74
- background: hsl(var(--primary) / 0.12);
75
- color: hsl(var(--primary));
76
- box-shadow: 0 0 18px hsl(var(--primary) / 0.12);
77
- }
78
-
79
- .cm-mirror-pane__toolbar-btn--active-fuchsia {
80
- border-color: hsl(var(--accent) / 0.34);
81
- background: hsl(var(--accent) / 0.11);
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
- }
99
- }
100
-
101
- .cm-mirror-pane__body {
102
- flex: 1 1 auto;
103
- min-height: 0;
104
- display: flex;
105
- flex-direction: column;
106
- gap: clamp(0.85rem, 3cqi, 1.08rem);
107
- overflow: visible;
108
- padding: clamp(0.85rem, 3cqi, 1.08rem);
109
- }
110
-
111
- .cm-mirror-pane__card {
112
- border: 0;
113
- background: transparent;
114
- box-shadow: none;
115
- backdrop-filter: none;
116
- }
117
-
118
- .cm-mirror-pane__card > .cm-card__body {
119
- padding: 0;
120
- gap: 0.68rem;
121
- grid-template-rows: auto auto;
122
- height: auto;
123
- }
124
-
125
- .cm-mirror-pane__card .cm-card__header {
126
- gap: 0.78rem;
127
- }
128
-
129
- .cm-mirror-pane__card .cm-card__title-row {
130
- flex-wrap: nowrap;
131
- }
132
-
133
- .cm-mirror-pane__card .cm-card__title {
134
- min-width: 0;
135
- overflow: hidden;
136
- }
137
-
138
- .cm-mirror-pane__card .cm-card__subtitle {
139
- overflow: hidden;
140
- text-overflow: ellipsis;
141
- white-space: nowrap;
142
- }
143
-
144
- .cm-mirror-pane__card .cm-card__meta {
145
- display: grid;
146
- grid-template-columns: repeat(2, minmax(0, 1fr));
147
- align-items: center;
148
- width: 100%;
149
- }
150
-
151
- .cm-mirror-pane__card .cm-card__meta-chip {
152
- width: 100%;
153
- justify-content: center;
154
- }
155
-
156
- .cm-mirror-pane__card-title {
157
- display: block;
158
- min-width: 0;
159
- max-width: 100%;
160
- overflow: hidden;
161
- text-overflow: ellipsis;
162
- white-space: nowrap;
163
- }
164
-
165
- .cm-mirror-pane__footer {
166
- flex: 0 0 auto;
167
- border-top: 1px solid hsl(var(--primary) / 0.1);
168
- padding: 0.75rem 1rem;
169
- }
170
-
171
- .cm-mirror-pane__empty {
172
- flex: 1;
173
- min-height: 14rem;
174
- display: grid;
175
- place-items: center;
176
- align-content: center;
177
- gap: 0.75rem;
178
- padding: 1.5rem;
179
- text-align: center;
180
- }
181
-
182
- .cm-mirror-pane__empty-icon {
183
- display: inline-flex;
184
- color: hsl(var(--primary));
185
- opacity: 0.72;
186
- }
187
-
188
- .cm-mirror-pane__empty-icon svg {
189
- width: 2.5rem;
190
- height: 2.5rem;
191
- }
192
-
193
- .cm-mirror-pane__empty-text {
194
- max-width: 18rem;
195
- color: hsl(var(--muted-foreground));
196
- line-height: 1.45;
197
- }
198
-
199
- .cm-mirror-pane__model-header {
200
- display: flex;
201
- align-items: flex-start;
202
- gap: 0.75rem;
203
- min-width: 0;
204
- }
205
-
206
- .cm-mirror-pane__model-icon-box {
207
- display: grid;
208
- width: clamp(2.85rem, 8cqi, 3.35rem);
209
- height: clamp(2.85rem, 8cqi, 3.35rem);
210
- place-items: center;
211
- flex: 0 0 auto;
212
- border: 1px solid hsl(var(--primary) / 0.24);
213
- border-radius: 12px;
214
- background: hsl(var(--primary) / 0.09);
215
- color: hsl(var(--primary));
216
- box-shadow: inset 0 0 18px hsl(var(--primary) / 0.08);
217
- }
218
-
219
- .cm-mirror-pane__model-icon-box svg {
220
- width: 1.2rem;
221
- height: 1.2rem;
222
- }
223
-
224
- .cm-mirror-pane__model-copy {
225
- flex: 1;
226
- min-width: 0;
227
- display: grid;
228
- gap: 0.25rem;
229
- }
230
-
231
- .cm-mirror-pane__model-name-row {
232
- display: flex;
233
- align-items: center;
234
- gap: 0.5rem;
235
- min-width: 0;
236
- flex-wrap: wrap;
237
- }
238
-
239
- .cm-mirror-pane__model-name {
240
- min-width: 0;
241
- margin: 0;
242
- color: hsl(var(--foreground));
243
- font-family: var(--font-display), sans-serif;
244
- font-size: clamp(1.06rem, 4cqi, 1.24rem);
245
- font-weight: 800;
246
- line-height: 1.08;
247
- overflow-wrap: anywhere;
248
- }
249
-
250
- .cm-mirror-pane__model-types {
251
- display: inline-flex;
252
- align-items: center;
253
- gap: 0.3rem;
254
- flex-wrap: wrap;
255
- }
256
-
257
- .cm-mirror-pane__badge {
258
- display: inline-flex;
259
- align-items: center;
260
- min-height: 1.58rem;
261
- border: 1px solid hsl(var(--primary) / 0.18);
262
- border-radius: 999px;
263
- background: hsl(var(--primary) / 0.08);
264
- color: hsl(var(--primary));
265
- padding: 0 0.58rem;
266
- font-family: var(--font-mono), monospace;
267
- font-size: 0.7rem;
268
- font-weight: 700;
269
- letter-spacing: 0.06em;
270
- text-transform: uppercase;
271
- }
272
-
273
- .cm-mirror-pane__badge[data-tone="fuchsia"] {
274
- border-color: hsl(var(--accent) / 0.24);
275
- background: hsl(var(--accent) / 0.1);
276
- color: hsl(var(--accent));
277
- }
278
-
279
- .cm-mirror-pane__badge[data-tone="green"] {
280
- border-color: hsl(142 71% 45% / 0.28);
281
- background: hsl(142 71% 45% / 0.1);
282
- color: hsl(142 71% 55%);
283
- }
284
-
285
- .cm-mirror-pane__badge[data-tone="warning"] {
286
- border-color: hsl(42 100% 48% / 0.28);
287
- background: hsl(42 100% 48% / 0.1);
288
- color: hsl(42 100% 58%);
289
- }
290
-
291
- .cm-mirror-pane__badge[data-tone="danger"] {
292
- border-color: hsl(var(--destructive) / 0.3);
293
- background: hsl(var(--destructive) / 0.12);
294
- color: hsl(var(--destructive));
295
- }
296
-
297
- .cm-mirror-pane__model-provider,
298
- .cm-mirror-pane__model-id {
299
- margin: 0;
300
- color: hsl(var(--muted-foreground));
301
- font-family: var(--font-mono), monospace;
302
- font-size: 0.82rem;
303
- line-height: 1.35;
304
- overflow-wrap: anywhere;
305
- }
306
-
307
- .cm-mirror-pane__model-id {
308
- color: hsl(var(--primary) / 0.72);
309
- }
310
-
311
- .cm-mirror-pane__description,
312
- .cm-mirror-pane__description--clamped,
313
- .cm-mirror-pane__section,
314
- .cm-mirror-pane__pricing-compact,
315
- .cm-mirror-pane__pricing-block,
316
- .cm-mirror-pane__tool-group,
317
- .cm-mirror-pane__no-params,
318
- .cm-mirror-pane__text-area,
319
- .cm-mirror-pane__field {
320
- border: 1px solid hsl(var(--primary) / 0.12);
321
- border-radius: 12px;
322
- background: hsl(221 50% 9% / 0.3);
323
- }
324
-
325
- .cm-mirror-pane__description,
326
- .cm-mirror-pane__description--clamped {
327
- padding: 0.82rem 0.9rem;
328
- color: hsl(var(--muted-foreground));
329
- font-size: 0.92rem;
330
- line-height: 1.55;
331
- }
332
-
333
- .cm-mirror-pane__section {
334
- display: flex;
335
- flex-direction: column;
336
- gap: 0.6rem;
337
- min-width: 0;
338
- min-height: 4.2rem;
339
- }
340
-
341
- .cm-mirror-pane__section--compact {
342
- padding: 0.75rem;
343
- }
344
-
345
- .cm-mirror-pane__section-label,
346
- .cm-mirror-pane__tool-group-label {
347
- color: hsl(var(--muted-foreground));
348
- font-family: var(--font-mono), monospace;
349
- font-size: 0.74rem;
350
- font-weight: 800;
351
- letter-spacing: 0.1em;
352
- text-transform: uppercase;
353
- }
354
-
355
- .cm-mirror-pane__io-row,
356
- .cm-mirror-pane__kv-row,
357
- .cm-mirror-pane__pricing-header,
358
- .cm-mirror-pane__tool-toggle {
359
- display: flex;
360
- align-items: center;
361
- justify-content: space-between;
362
- gap: 0.75rem;
363
- min-width: 0;
364
- min-height: 2.75rem;
365
- }
366
-
367
- .cm-mirror-pane__io-row {
368
- align-items: flex-start;
369
- }
370
-
371
- .cm-mirror-pane__io-label,
372
- .cm-mirror-pane__kv-label {
373
- flex: 0 0 auto;
374
- color: hsl(var(--muted-foreground));
375
- font-family: var(--font-mono), monospace;
376
- font-size: 0.76rem;
377
- }
378
-
379
- .cm-mirror-pane__io-badges,
380
- .cm-mirror-pane__kv-grid,
381
- .cm-mirror-pane__pricing-entries,
382
- .cm-mirror-pane__custom-content,
383
- .cm-mirror-pane__custom-section {
384
- display: flex;
385
- flex-direction: column;
386
- gap: 0.45rem;
387
- min-width: 0;
388
- }
389
-
390
- .cm-mirror-pane__io-badges {
391
- flex-direction: row;
392
- flex-wrap: wrap;
393
- }
394
-
395
- .cm-mirror-pane__kv-value {
396
- min-width: 0;
397
- color: hsl(var(--foreground));
398
- font-family: var(--font-mono), monospace;
399
- font-size: 0.82rem;
400
- text-align: right;
401
- overflow-wrap: anywhere;
402
- }
403
-
404
- .cm-mirror-pane__pricing-compact,
405
- .cm-mirror-pane__pricing-block,
406
- .cm-mirror-pane__tool-group {
407
- display: flex;
408
- flex-direction: column;
409
- gap: 0.45rem;
410
- min-height: 4.2rem;
411
- padding: 0.62rem 0.7rem;
412
- }
413
-
414
- .cm-mirror-pane__pricing-unit {
415
- color: hsl(var(--muted-foreground) / 0.72);
416
- font-family: var(--font-mono), monospace;
417
- font-size: 0.72rem;
418
- letter-spacing: 0.08em;
419
- text-transform: uppercase;
420
- }
421
-
422
- .cm-mirror-pane__pricing-name {
423
- color: hsl(var(--accent));
424
- font-family: var(--font-mono), monospace;
425
- font-weight: 700;
426
- }
427
-
428
- .cm-mirror-pane__tool-group {
429
- border-color: hsl(var(--primary) / 0.18);
430
- background: hsl(var(--primary) / 0.05);
431
- }
432
-
433
- .cm-mirror-pane__tool-group--fuchsia {
434
- border-color: hsl(var(--accent) / 0.18);
435
- background: hsl(var(--accent) / 0.05);
436
- }
437
-
438
- .cm-mirror-pane__tool-toggle-label {
439
- display: inline-flex;
440
- align-items: center;
441
- gap: 0.42rem;
442
- min-width: 0;
443
- color: hsl(var(--foreground));
444
- }
445
-
446
- .cm-mirror-pane__tool-toggle-label svg,
447
- .cm-mirror-pane__tool-toggle-label-icon {
448
- width: 1rem;
449
- height: 1rem;
450
- flex: 0 0 auto;
451
- }
452
-
453
- .cm-mirror-pane__text-area {
454
- width: 100%;
455
- min-height: 7rem;
456
- padding: 0.72rem;
457
- color: hsl(var(--foreground));
458
- font-family: var(--font-mono), monospace;
459
- font-size: 0.86rem;
460
- resize: vertical;
461
- }
462
-
463
- .cm-mirror-pane__field {
464
- width: 100%;
465
- min-height: 2.45rem;
466
- color: hsl(var(--foreground));
467
- font-family: var(--font-mono), monospace;
468
- font-size: 0.86rem;
469
- }
470
-
471
- .cm-mirror-pane__field:focus,
472
- .cm-mirror-pane__field:focus-visible,
473
- .cm-mirror-pane__text-area:focus,
474
- .cm-mirror-pane__text-area:focus-visible {
475
- outline: none;
476
- border-color: hsl(var(--primary) / 0.5);
477
- box-shadow: 0 0 0 1px hsl(var(--primary) / 0.16);
478
- }
479
-
480
- .cm-mirror-pane__param-description,
481
- .cm-mirror-pane__no-params {
482
- color: hsl(var(--muted-foreground));
483
- font-size: 0.86rem;
484
- line-height: 1.4;
485
- }
486
-
487
- .cm-mirror-pane__no-params {
488
- padding: 1rem;
489
- text-align: center;
490
- }
491
-
492
- @container (max-width: 22rem) {
493
- .cm-mirror-pane__io-row,
494
- .cm-mirror-pane__kv-row,
495
- .cm-mirror-pane__pricing-header,
496
- .cm-mirror-pane__tool-toggle {
497
- align-items: flex-start;
498
- flex-direction: column;
499
- gap: 0.35rem;
500
- }
501
-
502
- .cm-mirror-pane__kv-value {
503
- text-align: left;
504
- }
505
- }
506
-
507
- @media (prefers-reduced-motion: reduce) {
508
- .cm-mirror-pane__toolbar-btn {
509
- transition-duration: 0.01ms !important;
510
- }
511
- }
512
- `;
513
- //# sourceMappingURL=styles.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/mirror/styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0frC,CAAC"}