@compose-market/theme 0.1.7 → 0.1.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/dist/css/mirror.css +254 -73
  2. package/dist/css/shell.css +4 -2
  3. package/dist/mirror/index.d.ts +1 -1
  4. package/dist/mirror/index.d.ts.map +1 -1
  5. package/dist/mirror/index.js +256 -76
  6. package/dist/mirror/index.js.map +1 -1
  7. package/dist/shell/index.d.ts.map +1 -1
  8. package/dist/shell/index.js +2 -3
  9. package/dist/shell/index.js.map +1 -1
  10. package/dist/shell/styles.d.ts +1 -1
  11. package/dist/shell/styles.d.ts.map +1 -1
  12. package/dist/shell/styles.js +4 -2
  13. package/dist/shell/styles.js.map +1 -1
  14. package/package.json +1 -1
package/dist/css/mirror.css CHANGED
@@ -103,86 +103,170 @@
103
103
  }
104
104
 
105
105
  .cm-mirror-pane__body {
106
+ --cm-mirror-logo: clamp(2.85rem, 7.2cqi, 3.15rem);
106
107
  flex: 1 1 auto;
107
108
  display: grid;
108
109
  grid-template-rows: auto minmax(0, 1fr);
109
110
  align-content: stretch;
110
- gap: clamp(0.52rem, 1.8cqi, 0.82rem);
111
+ gap: clamp(0.42rem, 1.45cqi, 0.68rem);
111
112
  min-width: 0;
112
113
  min-height: 0;
113
114
  overflow: hidden;
114
- padding: clamp(0.62rem, 2cqi, 0.9rem);
115
+ padding: clamp(0.52rem, 1.65cqi, 0.78rem);
115
116
  }
116
117
 
117
- .cm-mirror-pane__card {
118
- border: 0;
119
- background: transparent;
120
- box-shadow: none;
121
- backdrop-filter: none;
122
- }
123
-
124
- .cm-mirror-pane__card > .cm-card__body {
125
- height: auto;
126
- min-height: 0;
127
- padding: 0;
128
- gap: 0.52rem;
129
- grid-template-rows: auto;
130
- }
131
-
132
- .cm-mirror-pane__card .cm-card__header {
118
+ .cm-mirror-pane__header {
119
+ display: grid;
120
+ grid-template-columns: var(--cm-mirror-logo) minmax(0, 1fr);
133
121
  align-items: center;
134
- gap: clamp(0.58rem, 1.6cqi, 0.78rem);
122
+ gap: clamp(0.55rem, 1.55cqi, 0.72rem);
123
+ min-width: 0;
135
124
  }
136
125
 
137
- .cm-mirror-pane__card .cm-card__title-row {
126
+ .cm-mirror-pane__identity {
138
127
  display: grid;
139
- grid-template-columns: minmax(0, 1fr) auto;
128
+ grid-template-rows: repeat(2, minmax(0, 1fr));
129
+ align-items: stretch;
130
+ gap: 0.16rem;
131
+ min-height: var(--cm-mirror-logo);
132
+ max-height: var(--cm-mirror-logo);
133
+ min-width: 0;
134
+ }
135
+
136
+ .cm-mirror-pane__title-row,
137
+ .cm-mirror-pane__meta-row {
138
+ display: flex;
140
139
  align-items: center;
141
- gap: 0.38rem;
140
+ min-width: 0;
141
+ max-width: 100%;
142
+ overflow: hidden;
142
143
  }
143
144
 
144
- .cm-mirror-pane__card .cm-card__title,
145
- .cm-mirror-pane__card-title {
145
+ .cm-mirror-pane__title,
146
+ .cm-mirror-pane__title-text {
146
147
  display: block;
148
+ width: 100%;
147
149
  min-width: 0;
148
150
  max-width: 100%;
151
+ font-size: clamp(0.96rem, 4.6cqi, 1.16rem);
152
+ line-height: 1.05;
149
153
  overflow: hidden;
150
154
  text-overflow: ellipsis;
151
155
  white-space: nowrap;
152
156
  }
153
157
 
154
- .cm-mirror-pane__card .cm-card__subtitle {
158
+ .cm-mirror-pane__title > .cm-hint,
159
+ .cm-mirror-pane__title > .cm-hint > .cm-hint__trigger,
160
+ .cm-mirror-pane__meta-row > .cm-hint,
161
+ .cm-mirror-pane__meta-row > .cm-hint > .cm-hint__trigger {
162
+ width: 100%;
163
+ min-width: 0;
164
+ }
165
+
166
+ .cm-mirror-pane__subtitle {
167
+ display: flex;
168
+ align-items: center;
169
+ width: 100%;
155
170
  min-width: 0;
156
171
  overflow: hidden;
157
172
  text-overflow: ellipsis;
158
173
  white-space: nowrap;
159
174
  }
160
175
 
161
- .cm-mirror-pane__card .cm-card__meta {
176
+ .cm-mirror-pane__model-meta-row {
162
177
  display: grid;
163
- grid-template-columns: repeat(2, minmax(0, 1fr));
178
+ grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
164
179
  align-items: center;
165
- gap: 0.34rem;
180
+ gap: 0.36rem;
181
+ min-width: 0;
166
182
  width: 100%;
183
+ max-width: 100%;
167
184
  }
168
185
 
169
- .cm-mirror-pane__card .cm-card__meta-chip {
170
- width: 100%;
171
- min-height: 1.46rem;
172
- max-height: 1.46rem;
173
- justify-content: center;
174
- padding: 0.18rem 0.48rem;
175
- font-size: 0.68rem;
186
+ .cm-mirror-pane__provider {
187
+ display: block;
188
+ min-width: 0;
189
+ max-width: min(9rem, 38cqi);
190
+ overflow: hidden;
191
+ color: hsl(var(--muted-foreground));
192
+ font-family: var(--font-mono), monospace;
193
+ font-size: 0.74rem;
194
+ line-height: 1.1;
195
+ text-overflow: ellipsis;
196
+ white-space: nowrap;
197
+ }
198
+
199
+ .cm-mirror-pane__type-list {
200
+ display: flex;
201
+ align-items: center;
202
+ gap: 0.28rem;
203
+ min-width: 0;
204
+ overflow: hidden;
205
+ }
206
+
207
+ .cm-mirror-pane__type-list > .cm-hint,
208
+ .cm-mirror-pane__type-list > .cm-hint > .cm-hint__trigger,
209
+ .cm-mirror-pane__io-badges > .cm-hint,
210
+ .cm-mirror-pane__io-badges > .cm-hint > .cm-hint__trigger {
211
+ min-width: 0;
212
+ max-width: 100%;
213
+ }
214
+
215
+ .cm-mirror-pane__type-list > .cm-hint {
216
+ flex: 0 1 auto;
217
+ }
218
+
219
+ .cm-mirror-pane__type-badge {
220
+ display: inline-grid;
221
+ grid-template-columns: auto minmax(0, 1fr);
222
+ align-items: center;
223
+ gap: 0.24rem;
224
+ min-width: 0;
225
+ max-width: 100%;
226
+ min-height: 1.32rem;
227
+ max-height: 1.32rem;
228
+ padding: 0 0.42rem;
229
+ border: 1px solid hsl(var(--accent) / 0.24);
230
+ border-radius: 999px;
231
+ background: hsl(var(--accent) / 0.1);
232
+ color: hsl(var(--accent));
233
+ font-family: var(--font-mono), monospace;
234
+ font-size: 0.62rem;
235
+ font-weight: 800;
236
+ letter-spacing: 0.05em;
237
+ line-height: 1;
238
+ text-transform: uppercase;
239
+ }
240
+
241
+ .cm-mirror-pane__type-badge[data-tone="cyan"] {
242
+ border-color: hsl(var(--primary) / 0.24);
243
+ background: hsl(var(--primary) / 0.1);
244
+ color: hsl(var(--primary));
245
+ }
246
+
247
+ .cm-mirror-pane__type-badge[data-tone="green"] {
248
+ border-color: hsl(142 71% 45% / 0.28);
249
+ background: hsl(142 71% 45% / 0.1);
250
+ color: hsl(142 71% 55%);
251
+ }
252
+
253
+ .cm-mirror-pane__type-badge > span:last-child {
254
+ min-width: 0;
255
+ overflow: hidden;
256
+ text-overflow: ellipsis;
257
+ white-space: nowrap;
176
258
  }
177
259
 
178
- .cm-mirror-pane__model-id {
179
- color: hsl(var(--primary) / 0.72);
260
+ .cm-mirror-pane__type-icon {
261
+ width: 0.72rem;
262
+ height: 0.72rem;
263
+ flex: 0 0 auto;
180
264
  }
181
265
 
182
266
  .cm-mirror-pane__model-icon-box {
183
267
  display: grid;
184
- width: clamp(2.55rem, 7.2cqi, 3.15rem);
185
- height: clamp(2.55rem, 7.2cqi, 3.15rem);
268
+ width: var(--cm-mirror-logo);
269
+ height: var(--cm-mirror-logo);
186
270
  place-items: center;
187
271
  flex: 0 0 auto;
188
272
  border: 1px solid hsl(var(--primary) / 0.24);
@@ -207,7 +291,7 @@
207
291
  .cm-mirror-pane__details,
208
292
  .cm-mirror-pane__custom-content {
209
293
  display: grid;
210
- gap: clamp(0.46rem, 1.45cqi, 0.68rem);
294
+ gap: clamp(0.38rem, 1.25cqi, 0.58rem);
211
295
  min-width: 0;
212
296
  min-height: 0;
213
297
  align-content: start;
@@ -229,22 +313,27 @@
229
313
 
230
314
  .cm-mirror-pane__description {
231
315
  min-width: 0;
232
- padding: clamp(0.58rem, 1.55cqi, 0.74rem);
316
+ padding: clamp(0.48rem, 1.35cqi, 0.62rem);
233
317
  color: hsl(var(--muted-foreground));
234
- font-size: 0.92rem;
235
- line-height: 1.38;
318
+ font-size: 0.84rem;
319
+ line-height: 1.34;
236
320
  }
237
321
 
238
322
  .cm-mirror-pane__description .cm-excerpt,
239
323
  .cm-mirror-pane__description .cm-excerpt__trigger,
240
- .cm-mirror-pane__description .cm-excerpt__text {
324
+ .cm-mirror-pane__description .cm-excerpt__text,
325
+ .cm-mirror-pane__description .cm-hint,
326
+ .cm-mirror-pane__description .cm-hint__trigger,
327
+ .cm-mirror-pane__description-hint {
241
328
  width: 100%;
242
329
  min-width: 0;
243
330
  }
244
331
 
245
332
  .cm-mirror-pane__section {
246
333
  display: grid;
247
- grid-template-rows: auto minmax(0, 1fr);
334
+ grid-template-columns: minmax(3.6rem, 4.85rem) minmax(0, 1fr);
335
+ grid-template-rows: minmax(2.25rem, auto);
336
+ align-items: center;
248
337
  gap: 0.4rem;
249
338
  min-width: 0;
250
339
  min-height: 0;
@@ -252,11 +341,14 @@
252
341
  }
253
342
 
254
343
  .cm-mirror-pane__section--compact {
255
- padding: clamp(0.52rem, 1.55cqi, 0.68rem);
344
+ padding: clamp(0.42rem, 1.25cqi, 0.58rem);
256
345
  }
257
346
 
258
347
  .cm-mirror-pane__section-label,
259
348
  .cm-mirror-pane__tool-group-label {
349
+ display: inline-flex;
350
+ align-items: center;
351
+ justify-content: center;
260
352
  min-width: 0;
261
353
  color: hsl(var(--muted-foreground));
262
354
  font-family: var(--font-mono), monospace;
@@ -270,8 +362,12 @@
270
362
  white-space: nowrap;
271
363
  }
272
364
 
365
+ .cm-mirror-pane__section-text {
366
+ text-transform: none;
367
+ letter-spacing: 0;
368
+ }
369
+
273
370
  .cm-mirror-pane__section--io {
274
- grid-template-rows: minmax(2.4rem, auto);
275
371
  grid-template-columns: repeat(2, minmax(0, 1fr));
276
372
  gap: 0.44rem;
277
373
  align-items: stretch;
@@ -287,13 +383,17 @@
287
383
 
288
384
  .cm-mirror-pane__io-row {
289
385
  display: grid;
290
- grid-template-columns: 2.35rem minmax(0, 1fr);
386
+ grid-template-columns: 1.55rem minmax(0, 1fr);
291
387
  align-items: center;
292
- gap: 0.48rem;
388
+ gap: 0.42rem;
389
+ min-width: 0;
293
390
  }
294
391
 
295
392
  .cm-mirror-pane__io-label,
296
393
  .cm-mirror-pane__kv-label {
394
+ display: inline-flex;
395
+ align-items: center;
396
+ justify-content: center;
297
397
  min-width: 0;
298
398
  color: hsl(var(--muted-foreground));
299
399
  font-family: var(--font-mono), monospace;
@@ -307,27 +407,64 @@
307
407
  .cm-mirror-pane__io-badges {
308
408
  display: flex;
309
409
  align-items: center;
310
- justify-content: flex-end;
311
- gap: 0.32rem;
410
+ justify-content: flex-start;
411
+ gap: 0.28rem;
312
412
  min-width: 0;
313
413
  flex-wrap: wrap;
314
414
  }
315
415
 
316
- .cm-mirror-pane__badge {
416
+ .cm-mirror-pane__io-badges > .cm-hint {
417
+ flex: 0 1 auto;
418
+ }
419
+
420
+ .cm-mirror-pane__icon-label {
317
421
  display: inline-flex;
318
422
  align-items: center;
319
423
  justify-content: center;
424
+ width: 1.22rem;
425
+ height: 1.22rem;
426
+ min-width: 1.22rem;
427
+ border: 1px solid hsl(var(--primary) / 0.22);
428
+ border-radius: 999px;
429
+ background: hsl(var(--primary) / 0.08);
430
+ color: hsl(var(--primary));
431
+ }
432
+
433
+ .cm-mirror-pane__icon-label--section {
434
+ width: 1.62rem;
435
+ height: 1.62rem;
436
+ min-width: 1.62rem;
437
+ border-color: hsl(var(--primary) / 0.32);
438
+ background: hsl(var(--primary) / 0.1);
439
+ }
440
+
441
+ .cm-mirror-pane__icon-svg {
442
+ width: 0.72rem;
443
+ height: 0.72rem;
444
+ }
445
+
446
+ .cm-mirror-pane__icon-label--section .cm-mirror-pane__icon-svg {
447
+ width: 0.98rem;
448
+ height: 0.98rem;
449
+ }
450
+
451
+ .cm-mirror-pane__badge {
452
+ display: inline-grid;
453
+ grid-template-columns: auto minmax(0, 1fr);
454
+ align-items: center;
455
+ justify-content: center;
456
+ gap: 0.24rem;
320
457
  min-width: 0;
321
- min-height: 1.42rem;
322
- max-height: 1.42rem;
458
+ min-height: 1.36rem;
459
+ max-height: 1.36rem;
323
460
  max-width: 100%;
324
461
  border: 1px solid hsl(var(--primary) / 0.18);
325
462
  border-radius: 999px;
326
463
  background: hsl(var(--primary) / 0.08);
327
464
  color: hsl(var(--primary));
328
- padding: 0 0.48rem;
465
+ padding: 0 0.42rem;
329
466
  font-family: var(--font-mono), monospace;
330
- font-size: 0.68rem;
467
+ font-size: 0.62rem;
331
468
  font-weight: 800;
332
469
  letter-spacing: 0.06em;
333
470
  line-height: 1;
@@ -337,6 +474,19 @@
337
474
  text-overflow: ellipsis;
338
475
  }
339
476
 
477
+ .cm-mirror-pane__badge > span:last-child {
478
+ min-width: 0;
479
+ overflow: hidden;
480
+ text-overflow: ellipsis;
481
+ white-space: nowrap;
482
+ }
483
+
484
+ .cm-mirror-pane__format-icon {
485
+ width: 0.72rem;
486
+ height: 0.72rem;
487
+ flex: 0 0 auto;
488
+ }
489
+
340
490
  .cm-mirror-pane__badge[data-tone="fuchsia"] {
341
491
  border-color: hsl(var(--accent) / 0.24);
342
492
  background: hsl(var(--accent) / 0.1);
@@ -364,7 +514,8 @@
364
514
  .cm-mirror-pane__kv-grid,
365
515
  .cm-mirror-pane__pricing-entries {
366
516
  display: grid;
367
- grid-auto-rows: minmax(1.7rem, auto);
517
+ grid-template-columns: repeat(2, minmax(0, 1fr));
518
+ grid-auto-rows: minmax(1.58rem, auto);
368
519
  gap: 0.24rem;
369
520
  min-width: 0;
370
521
  min-height: 0;
@@ -374,18 +525,47 @@
374
525
  .cm-mirror-pane__kv-row,
375
526
  .cm-mirror-pane__pricing-header {
376
527
  display: grid;
377
- grid-template-columns: minmax(0, 1fr) max-content;
528
+ grid-template-columns: auto minmax(0, 1fr);
378
529
  align-items: center;
379
- gap: 0.55rem;
530
+ gap: 0.38rem;
531
+ min-width: 0;
532
+ min-height: 2.05rem;
533
+ padding: 0.34rem 0.46rem;
534
+ border: 1px solid hsl(var(--primary) / 0.11);
535
+ border-radius: 999px;
536
+ background: hsl(221 50% 9% / 0.34);
380
537
  }
381
538
 
382
539
  .cm-mirror-pane__kv-value {
383
540
  min-width: 0;
384
541
  color: hsl(var(--foreground));
385
542
  font-family: var(--font-mono), monospace;
386
- font-size: 0.82rem;
543
+ font-size: 0.76rem;
387
544
  font-weight: 650;
388
- text-align: right;
545
+ text-align: left;
546
+ overflow: hidden;
547
+ text-overflow: ellipsis;
548
+ white-space: nowrap;
549
+ }
550
+
551
+ .cm-mirror-pane__kv-value > .cm-hint,
552
+ .cm-mirror-pane__kv-value > .cm-hint > .cm-hint__trigger {
553
+ width: 100%;
554
+ min-width: 0;
555
+ }
556
+
557
+ .cm-mirror-pane__field-value {
558
+ display: inline-flex;
559
+ align-items: baseline;
560
+ justify-content: flex-start;
561
+ gap: 0;
562
+ width: 100%;
563
+ min-width: 0;
564
+ max-width: 100%;
565
+ }
566
+
567
+ .cm-mirror-pane__field-main {
568
+ min-width: 0;
389
569
  overflow: hidden;
390
570
  text-overflow: ellipsis;
391
571
  white-space: nowrap;
@@ -395,9 +575,17 @@
395
575
  .cm-mirror-pane__pricing-block,
396
576
  .cm-mirror-pane__tool-group {
397
577
  display: grid;
398
- gap: 0.34rem;
578
+ gap: 0.28rem;
399
579
  min-width: 0;
400
580
  min-height: 0;
581
+ }
582
+
583
+ .cm-mirror-pane__pricing-compact {
584
+ padding: 0;
585
+ }
586
+
587
+ .cm-mirror-pane__pricing-block,
588
+ .cm-mirror-pane__tool-group {
401
589
  padding: 0.5rem 0.58rem;
402
590
  }
403
591
 
@@ -547,26 +735,19 @@
547
735
  }
548
736
 
549
737
  @container (max-width: 22rem) {
550
- .cm-mirror-pane__card .cm-card__header {
551
- grid-template-columns: minmax(0, 1fr);
552
- }
553
-
554
738
  .cm-mirror-pane__model-icon-box {
555
739
  display: none;
556
740
  }
557
741
 
558
- .cm-mirror-pane__io-row,
559
- .cm-mirror-pane__kv-row,
560
- .cm-mirror-pane__pricing-header,
742
+ .cm-mirror-pane__header {
743
+ grid-template-columns: minmax(0, 1fr);
744
+ }
745
+
561
746
  .cm-mirror-pane__tool-toggle {
562
747
  grid-template-columns: minmax(0, 1fr);
563
748
  align-items: start;
564
749
  gap: 0.3rem;
565
750
  }
566
-
567
- .cm-mirror-pane__kv-value {
568
- text-align: left;
569
- }
570
751
  }
571
752
 
572
753
  @media (prefers-reduced-motion: reduce) {
package/dist/css/shell.css CHANGED
@@ -185,8 +185,8 @@
185
185
 
186
186
  .cm-hint__content {
187
187
  z-index: 120;
188
- min-width: max-content;
189
- max-width: min(18rem, 72vw);
188
+ width: max-content;
189
+ max-width: min(20rem, calc(100vw - 1rem));
190
190
  border: 1px solid hsl(var(--primary) / 0.26);
191
191
  border-radius: 8px;
192
192
  background:
@@ -203,6 +203,8 @@
203
203
  pointer-events: none;
204
204
  text-align: left;
205
205
  white-space: normal;
206
+ overflow-wrap: anywhere;
207
+ word-break: normal;
206
208
  }
207
209
 
208
210
  .cm-excerpt {
package/dist/mirror/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as React from "react";
2
- export declare const mirrorStyles = "\n.cm-mirror-pane {\n container-type: inline-size;\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n min-width: 0;\n min-height: 0;\n overflow: hidden;\n border: 1px solid hsl(var(--primary) / 0.18);\n border-radius: 16px;\n background:\n linear-gradient(145deg, hsl(226 21% 23% / 0.42), hsl(221 50% 9% / 0.34)),\n radial-gradient(circle at 18% 0%, hsl(var(--primary) / 0.09), transparent 34%),\n hsl(224 36% 13% / 0.24);\n box-shadow:\n inset 0 1px 0 hsl(0 0% 100% / 0.06),\n 0 0 34px hsl(var(--primary) / 0.06);\n color: hsl(var(--foreground));\n font-family: var(--font-sans), sans-serif;\n backdrop-filter: blur(16px) saturate(1.12);\n}\n\n.cm-mirror-pane *,\n.cm-mirror-pane *::before,\n.cm-mirror-pane *::after {\n box-sizing: border-box;\n}\n\n.cm-mirror-pane__toolbar {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n gap: 0.35rem;\n min-height: 2.95rem;\n padding: 0.38rem 0.45rem;\n border-bottom: 1px solid hsl(var(--primary) / 0.1);\n background: hsl(221 50% 9% / 0.28);\n}\n\n.cm-mirror-pane__toolbar-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0.4rem;\n min-width: 2.1rem;\n min-height: 2.1rem;\n padding: 0 0.58rem;\n border: 1px solid transparent;\n border-radius: 999px;\n background: transparent;\n color: hsl(var(--muted-foreground));\n cursor: pointer;\n font-family: var(--font-mono), monospace;\n font-size: 0.68rem;\n font-weight: 700;\n letter-spacing: 0.08em;\n text-transform: uppercase;\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}\n\n.cm-mirror-pane__toolbar-btn:hover,\n.cm-mirror-pane__toolbar-btn:focus-visible {\n outline: none;\n color: hsl(var(--foreground));\n border-color: hsl(var(--primary) / 0.2);\n background: hsl(var(--primary) / 0.08);\n}\n\n.cm-mirror-pane__toolbar-btn--active-cyan {\n border-color: hsl(var(--primary) / 0.36);\n background: hsl(var(--primary) / 0.12);\n color: hsl(var(--primary));\n box-shadow: 0 0 18px hsl(var(--primary) / 0.12);\n}\n\n.cm-mirror-pane__toolbar-btn--active-fuchsia {\n border-color: hsl(var(--accent) / 0.34);\n background: hsl(var(--accent) / 0.11);\n color: hsl(var(--accent));\n box-shadow: 0 0 18px hsl(var(--accent) / 0.1);\n}\n\n.cm-mirror-pane__toolbar-btn svg {\n width: 1rem;\n height: 1rem;\n}\n\n.cm-mirror-pane__toolbar-label {\n display: none;\n}\n\n@container (min-width: 24rem) {\n .cm-mirror-pane__toolbar-label {\n display: inline;\n }\n}\n\n.cm-mirror-pane__body {\n flex: 1 1 auto;\n display: grid;\n grid-template-rows: auto minmax(0, 1fr);\n align-content: stretch;\n gap: clamp(0.52rem, 1.8cqi, 0.82rem);\n min-width: 0;\n min-height: 0;\n overflow: hidden;\n padding: clamp(0.62rem, 2cqi, 0.9rem);\n}\n\n.cm-mirror-pane__card {\n border: 0;\n background: transparent;\n box-shadow: none;\n backdrop-filter: none;\n}\n\n.cm-mirror-pane__card > .cm-card__body {\n height: auto;\n min-height: 0;\n padding: 0;\n gap: 0.52rem;\n grid-template-rows: auto;\n}\n\n.cm-mirror-pane__card .cm-card__header {\n align-items: center;\n gap: clamp(0.58rem, 1.6cqi, 0.78rem);\n}\n\n.cm-mirror-pane__card .cm-card__title-row {\n display: grid;\n grid-template-columns: minmax(0, 1fr) auto;\n align-items: center;\n gap: 0.38rem;\n}\n\n.cm-mirror-pane__card .cm-card__title,\n.cm-mirror-pane__card-title {\n display: block;\n min-width: 0;\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.cm-mirror-pane__card .cm-card__subtitle {\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.cm-mirror-pane__card .cm-card__meta {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n align-items: center;\n gap: 0.34rem;\n width: 100%;\n}\n\n.cm-mirror-pane__card .cm-card__meta-chip {\n width: 100%;\n min-height: 1.46rem;\n max-height: 1.46rem;\n justify-content: center;\n padding: 0.18rem 0.48rem;\n font-size: 0.68rem;\n}\n\n.cm-mirror-pane__model-id {\n color: hsl(var(--primary) / 0.72);\n}\n\n.cm-mirror-pane__model-icon-box {\n display: grid;\n width: clamp(2.55rem, 7.2cqi, 3.15rem);\n height: clamp(2.55rem, 7.2cqi, 3.15rem);\n place-items: center;\n flex: 0 0 auto;\n border: 1px solid hsl(var(--primary) / 0.24);\n border-radius: 12px;\n background: hsl(var(--primary) / 0.09);\n color: hsl(var(--primary));\n box-shadow: inset 0 0 18px hsl(var(--primary) / 0.08);\n}\n\n.cm-mirror-pane__model-icon-box svg {\n width: 1.16rem;\n height: 1.16rem;\n}\n\n.cm-mirror-pane__content {\n display: grid;\n min-width: 0;\n min-height: 0;\n overflow: hidden;\n}\n\n.cm-mirror-pane__details,\n.cm-mirror-pane__custom-content {\n display: grid;\n gap: clamp(0.46rem, 1.45cqi, 0.68rem);\n min-width: 0;\n min-height: 0;\n align-content: start;\n overflow: hidden;\n}\n\n.cm-mirror-pane__description,\n.cm-mirror-pane__section,\n.cm-mirror-pane__pricing-compact,\n.cm-mirror-pane__pricing-block,\n.cm-mirror-pane__tool-group,\n.cm-mirror-pane__no-params,\n.cm-mirror-pane__text-area,\n.cm-mirror-pane__field {\n border: 1px solid hsl(var(--primary) / 0.12);\n border-radius: 12px;\n background: hsl(221 50% 9% / 0.3);\n}\n\n.cm-mirror-pane__description {\n min-width: 0;\n padding: clamp(0.58rem, 1.55cqi, 0.74rem);\n color: hsl(var(--muted-foreground));\n font-size: 0.92rem;\n line-height: 1.38;\n}\n\n.cm-mirror-pane__description .cm-excerpt,\n.cm-mirror-pane__description .cm-excerpt__trigger,\n.cm-mirror-pane__description .cm-excerpt__text {\n width: 100%;\n min-width: 0;\n}\n\n.cm-mirror-pane__section {\n display: grid;\n grid-template-rows: auto minmax(0, 1fr);\n gap: 0.4rem;\n min-width: 0;\n min-height: 0;\n overflow: hidden;\n}\n\n.cm-mirror-pane__section--compact {\n padding: clamp(0.52rem, 1.55cqi, 0.68rem);\n}\n\n.cm-mirror-pane__section-label,\n.cm-mirror-pane__tool-group-label {\n min-width: 0;\n color: hsl(var(--muted-foreground));\n font-family: var(--font-mono), monospace;\n font-size: 0.72rem;\n font-weight: 800;\n letter-spacing: 0.1em;\n line-height: 1.1;\n text-transform: uppercase;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.cm-mirror-pane__section--io {\n grid-template-rows: minmax(2.4rem, auto);\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: 0.44rem;\n align-items: stretch;\n}\n\n.cm-mirror-pane__io-row,\n.cm-mirror-pane__kv-row,\n.cm-mirror-pane__pricing-header,\n.cm-mirror-pane__tool-toggle {\n min-width: 0;\n min-height: 1.8rem;\n}\n\n.cm-mirror-pane__io-row {\n display: grid;\n grid-template-columns: 2.35rem minmax(0, 1fr);\n align-items: center;\n gap: 0.48rem;\n}\n\n.cm-mirror-pane__io-label,\n.cm-mirror-pane__kv-label {\n min-width: 0;\n color: hsl(var(--muted-foreground));\n font-family: var(--font-mono), monospace;\n font-size: 0.76rem;\n letter-spacing: 0.02em;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.cm-mirror-pane__io-badges {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: 0.32rem;\n min-width: 0;\n flex-wrap: wrap;\n}\n\n.cm-mirror-pane__badge {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 0;\n min-height: 1.42rem;\n max-height: 1.42rem;\n max-width: 100%;\n border: 1px solid hsl(var(--primary) / 0.18);\n border-radius: 999px;\n background: hsl(var(--primary) / 0.08);\n color: hsl(var(--primary));\n padding: 0 0.48rem;\n font-family: var(--font-mono), monospace;\n font-size: 0.68rem;\n font-weight: 800;\n letter-spacing: 0.06em;\n line-height: 1;\n text-transform: uppercase;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.cm-mirror-pane__badge[data-tone=\"fuchsia\"] {\n border-color: hsl(var(--accent) / 0.24);\n background: hsl(var(--accent) / 0.1);\n color: hsl(var(--accent));\n}\n\n.cm-mirror-pane__badge[data-tone=\"green\"] {\n border-color: hsl(142 71% 45% / 0.28);\n background: hsl(142 71% 45% / 0.1);\n color: hsl(142 71% 55%);\n}\n\n.cm-mirror-pane__badge[data-tone=\"warning\"] {\n border-color: hsl(42 100% 48% / 0.28);\n background: hsl(42 100% 48% / 0.1);\n color: hsl(42 100% 58%);\n}\n\n.cm-mirror-pane__badge[data-tone=\"danger\"] {\n border-color: hsl(var(--destructive) / 0.3);\n background: hsl(var(--destructive) / 0.12);\n color: hsl(var(--destructive));\n}\n\n.cm-mirror-pane__kv-grid,\n.cm-mirror-pane__pricing-entries {\n display: grid;\n grid-auto-rows: minmax(1.7rem, auto);\n gap: 0.24rem;\n min-width: 0;\n min-height: 0;\n align-content: start;\n}\n\n.cm-mirror-pane__kv-row,\n.cm-mirror-pane__pricing-header {\n display: grid;\n grid-template-columns: minmax(0, 1fr) max-content;\n align-items: center;\n gap: 0.55rem;\n}\n\n.cm-mirror-pane__kv-value {\n min-width: 0;\n color: hsl(var(--foreground));\n font-family: var(--font-mono), monospace;\n font-size: 0.82rem;\n font-weight: 650;\n text-align: right;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.cm-mirror-pane__pricing-compact,\n.cm-mirror-pane__pricing-block,\n.cm-mirror-pane__tool-group {\n display: grid;\n gap: 0.34rem;\n min-width: 0;\n min-height: 0;\n padding: 0.5rem 0.58rem;\n}\n\n.cm-mirror-pane__section--context .cm-mirror-pane__kv-grid,\n.cm-mirror-pane__section--pricing .cm-mirror-pane__pricing-entries {\n gap: 0.22rem;\n}\n\n.cm-mirror-pane__section--pricing > .cm-mirror-pane__pricing-compact {\n border: 0;\n background: transparent;\n padding: 0;\n}\n\n.cm-mirror-pane__pricing-unit {\n min-width: 0;\n color: hsl(var(--muted-foreground) / 0.72);\n font-family: var(--font-mono), monospace;\n font-size: 0.7rem;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.cm-mirror-pane__pricing-name {\n min-width: 0;\n color: hsl(var(--accent));\n font-family: var(--font-mono), monospace;\n font-weight: 700;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.cm-mirror-pane__footer {\n flex: 0 0 auto;\n border-top: 1px solid hsl(var(--primary) / 0.1);\n padding: 0.75rem 1rem;\n}\n\n.cm-mirror-pane__empty {\n flex: 1;\n min-height: 14rem;\n display: grid;\n place-items: center;\n align-content: center;\n gap: 0.75rem;\n padding: 1.5rem;\n text-align: center;\n}\n\n.cm-mirror-pane__empty-icon {\n display: inline-flex;\n color: hsl(var(--primary));\n opacity: 0.72;\n}\n\n.cm-mirror-pane__empty-icon svg {\n width: 2.5rem;\n height: 2.5rem;\n}\n\n.cm-mirror-pane__empty-text {\n max-width: 18rem;\n color: hsl(var(--muted-foreground));\n line-height: 1.45;\n}\n\n.cm-mirror-pane__tool-group {\n border-color: hsl(var(--primary) / 0.18);\n background: hsl(var(--primary) / 0.05);\n}\n\n.cm-mirror-pane__tool-group--fuchsia {\n border-color: hsl(var(--accent) / 0.18);\n background: hsl(var(--accent) / 0.05);\n}\n\n.cm-mirror-pane__tool-toggle {\n display: grid;\n grid-template-columns: minmax(0, 1fr) auto;\n align-items: center;\n gap: 0.58rem;\n}\n\n.cm-mirror-pane__custom-section {\n display: grid;\n gap: 0.42rem;\n min-width: 0;\n}\n\n.cm-mirror-pane__text-area {\n width: 100%;\n min-height: 7rem;\n padding: 0.72rem;\n color: hsl(var(--foreground));\n font-family: var(--font-mono), monospace;\n font-size: 0.86rem;\n resize: vertical;\n}\n\n.cm-mirror-pane__field {\n width: 100%;\n min-height: 2.45rem;\n color: hsl(var(--foreground));\n font-family: var(--font-mono), monospace;\n font-size: 0.86rem;\n}\n\n.cm-mirror-pane__field:focus,\n.cm-mirror-pane__field:focus-visible,\n.cm-mirror-pane__text-area:focus,\n.cm-mirror-pane__text-area:focus-visible {\n outline: none;\n border-color: hsl(var(--primary) / 0.5);\n box-shadow: 0 0 0 1px hsl(var(--primary) / 0.16);\n}\n\n.cm-mirror-pane__param-description,\n.cm-mirror-pane__no-params {\n min-width: 0;\n color: hsl(var(--muted-foreground));\n font-size: 0.86rem;\n line-height: 1.4;\n}\n\n.cm-mirror-pane__no-params {\n padding: 1rem;\n text-align: center;\n}\n\n@container (max-width: 28rem) {\n .cm-mirror-pane__body {\n gap: 0.54rem;\n padding: 0.62rem;\n }\n\n .cm-mirror-pane__section--io {\n grid-template-columns: minmax(0, 1fr);\n }\n\n .cm-mirror-pane__io-badges {\n justify-content: flex-start;\n }\n}\n\n@container (max-width: 22rem) {\n .cm-mirror-pane__card .cm-card__header {\n grid-template-columns: minmax(0, 1fr);\n }\n\n .cm-mirror-pane__model-icon-box {\n display: none;\n }\n\n .cm-mirror-pane__io-row,\n .cm-mirror-pane__kv-row,\n .cm-mirror-pane__pricing-header,\n .cm-mirror-pane__tool-toggle {\n grid-template-columns: minmax(0, 1fr);\n align-items: start;\n gap: 0.3rem;\n }\n\n .cm-mirror-pane__kv-value {\n text-align: left;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .cm-mirror-pane__toolbar-btn {\n transition-duration: 0.01ms !important;\n }\n}\n";
2
+ export declare const mirrorStyles = "\n.cm-mirror-pane {\n container-type: inline-size;\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n min-width: 0;\n min-height: 0;\n overflow: hidden;\n border: 1px solid hsl(var(--primary) / 0.18);\n border-radius: 16px;\n background:\n linear-gradient(145deg, hsl(226 21% 23% / 0.42), hsl(221 50% 9% / 0.34)),\n radial-gradient(circle at 18% 0%, hsl(var(--primary) / 0.09), transparent 34%),\n hsl(224 36% 13% / 0.24);\n box-shadow:\n inset 0 1px 0 hsl(0 0% 100% / 0.06),\n 0 0 34px hsl(var(--primary) / 0.06);\n color: hsl(var(--foreground));\n font-family: var(--font-sans), sans-serif;\n backdrop-filter: blur(16px) saturate(1.12);\n}\n\n.cm-mirror-pane *,\n.cm-mirror-pane *::before,\n.cm-mirror-pane *::after {\n box-sizing: border-box;\n}\n\n.cm-mirror-pane__toolbar {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n gap: 0.35rem;\n min-height: 2.95rem;\n padding: 0.38rem 0.45rem;\n border-bottom: 1px solid hsl(var(--primary) / 0.1);\n background: hsl(221 50% 9% / 0.28);\n}\n\n.cm-mirror-pane__toolbar-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0.4rem;\n min-width: 2.1rem;\n min-height: 2.1rem;\n padding: 0 0.58rem;\n border: 1px solid transparent;\n border-radius: 999px;\n background: transparent;\n color: hsl(var(--muted-foreground));\n cursor: pointer;\n font-family: var(--font-mono), monospace;\n font-size: 0.68rem;\n font-weight: 700;\n letter-spacing: 0.08em;\n text-transform: uppercase;\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}\n\n.cm-mirror-pane__toolbar-btn:hover,\n.cm-mirror-pane__toolbar-btn:focus-visible {\n outline: none;\n color: hsl(var(--foreground));\n border-color: hsl(var(--primary) / 0.2);\n background: hsl(var(--primary) / 0.08);\n}\n\n.cm-mirror-pane__toolbar-btn--active-cyan {\n border-color: hsl(var(--primary) / 0.36);\n background: hsl(var(--primary) / 0.12);\n color: hsl(var(--primary));\n box-shadow: 0 0 18px hsl(var(--primary) / 0.12);\n}\n\n.cm-mirror-pane__toolbar-btn--active-fuchsia {\n border-color: hsl(var(--accent) / 0.34);\n background: hsl(var(--accent) / 0.11);\n color: hsl(var(--accent));\n box-shadow: 0 0 18px hsl(var(--accent) / 0.1);\n}\n\n.cm-mirror-pane__toolbar-btn svg {\n width: 1rem;\n height: 1rem;\n}\n\n.cm-mirror-pane__toolbar-label {\n display: none;\n}\n\n@container (min-width: 24rem) {\n .cm-mirror-pane__toolbar-label {\n display: inline;\n }\n}\n\n.cm-mirror-pane__body {\n --cm-mirror-logo: clamp(2.85rem, 7.2cqi, 3.15rem);\n flex: 1 1 auto;\n display: grid;\n grid-template-rows: auto minmax(0, 1fr);\n align-content: stretch;\n gap: clamp(0.42rem, 1.45cqi, 0.68rem);\n min-width: 0;\n min-height: 0;\n overflow: hidden;\n padding: clamp(0.52rem, 1.65cqi, 0.78rem);\n}\n\n.cm-mirror-pane__header {\n display: grid;\n grid-template-columns: var(--cm-mirror-logo) minmax(0, 1fr);\n align-items: center;\n gap: clamp(0.55rem, 1.55cqi, 0.72rem);\n min-width: 0;\n}\n\n.cm-mirror-pane__identity {\n display: grid;\n grid-template-rows: repeat(2, minmax(0, 1fr));\n align-items: stretch;\n gap: 0.16rem;\n min-height: var(--cm-mirror-logo);\n max-height: var(--cm-mirror-logo);\n min-width: 0;\n}\n\n.cm-mirror-pane__title-row,\n.cm-mirror-pane__meta-row {\n display: flex;\n align-items: center;\n min-width: 0;\n max-width: 100%;\n overflow: hidden;\n}\n\n.cm-mirror-pane__title,\n.cm-mirror-pane__title-text {\n display: block;\n width: 100%;\n min-width: 0;\n max-width: 100%;\n font-size: clamp(0.96rem, 4.6cqi, 1.16rem);\n line-height: 1.05;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.cm-mirror-pane__title > .cm-hint,\n.cm-mirror-pane__title > .cm-hint > .cm-hint__trigger,\n.cm-mirror-pane__meta-row > .cm-hint,\n.cm-mirror-pane__meta-row > .cm-hint > .cm-hint__trigger {\n width: 100%;\n min-width: 0;\n}\n\n.cm-mirror-pane__subtitle {\n display: flex;\n align-items: center;\n width: 100%;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.cm-mirror-pane__model-meta-row {\n display: grid;\n grid-template-columns: minmax(0, max-content) minmax(0, 1fr);\n align-items: center;\n gap: 0.36rem;\n min-width: 0;\n width: 100%;\n max-width: 100%;\n}\n\n.cm-mirror-pane__provider {\n display: block;\n min-width: 0;\n max-width: min(9rem, 38cqi);\n overflow: hidden;\n color: hsl(var(--muted-foreground));\n font-family: var(--font-mono), monospace;\n font-size: 0.74rem;\n line-height: 1.1;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.cm-mirror-pane__type-list {\n display: flex;\n align-items: center;\n gap: 0.28rem;\n min-width: 0;\n overflow: hidden;\n}\n\n.cm-mirror-pane__type-list > .cm-hint,\n.cm-mirror-pane__type-list > .cm-hint > .cm-hint__trigger,\n.cm-mirror-pane__io-badges > .cm-hint,\n.cm-mirror-pane__io-badges > .cm-hint > .cm-hint__trigger {\n min-width: 0;\n max-width: 100%;\n}\n\n.cm-mirror-pane__type-list > .cm-hint {\n flex: 0 1 auto;\n}\n\n.cm-mirror-pane__type-badge {\n display: inline-grid;\n grid-template-columns: auto minmax(0, 1fr);\n align-items: center;\n gap: 0.24rem;\n min-width: 0;\n max-width: 100%;\n min-height: 1.32rem;\n max-height: 1.32rem;\n padding: 0 0.42rem;\n border: 1px solid hsl(var(--accent) / 0.24);\n border-radius: 999px;\n background: hsl(var(--accent) / 0.1);\n color: hsl(var(--accent));\n font-family: var(--font-mono), monospace;\n font-size: 0.62rem;\n font-weight: 800;\n letter-spacing: 0.05em;\n line-height: 1;\n text-transform: uppercase;\n}\n\n.cm-mirror-pane__type-badge[data-tone=\"cyan\"] {\n border-color: hsl(var(--primary) / 0.24);\n background: hsl(var(--primary) / 0.1);\n color: hsl(var(--primary));\n}\n\n.cm-mirror-pane__type-badge[data-tone=\"green\"] {\n border-color: hsl(142 71% 45% / 0.28);\n background: hsl(142 71% 45% / 0.1);\n color: hsl(142 71% 55%);\n}\n\n.cm-mirror-pane__type-badge > span:last-child {\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.cm-mirror-pane__type-icon {\n width: 0.72rem;\n height: 0.72rem;\n flex: 0 0 auto;\n}\n\n.cm-mirror-pane__model-icon-box {\n display: grid;\n width: var(--cm-mirror-logo);\n height: var(--cm-mirror-logo);\n place-items: center;\n flex: 0 0 auto;\n border: 1px solid hsl(var(--primary) / 0.24);\n border-radius: 12px;\n background: hsl(var(--primary) / 0.09);\n color: hsl(var(--primary));\n box-shadow: inset 0 0 18px hsl(var(--primary) / 0.08);\n}\n\n.cm-mirror-pane__model-icon-box svg {\n width: 1.16rem;\n height: 1.16rem;\n}\n\n.cm-mirror-pane__content {\n display: grid;\n min-width: 0;\n min-height: 0;\n overflow: hidden;\n}\n\n.cm-mirror-pane__details,\n.cm-mirror-pane__custom-content {\n display: grid;\n gap: clamp(0.38rem, 1.25cqi, 0.58rem);\n min-width: 0;\n min-height: 0;\n align-content: start;\n overflow: hidden;\n}\n\n.cm-mirror-pane__description,\n.cm-mirror-pane__section,\n.cm-mirror-pane__pricing-compact,\n.cm-mirror-pane__pricing-block,\n.cm-mirror-pane__tool-group,\n.cm-mirror-pane__no-params,\n.cm-mirror-pane__text-area,\n.cm-mirror-pane__field {\n border: 1px solid hsl(var(--primary) / 0.12);\n border-radius: 12px;\n background: hsl(221 50% 9% / 0.3);\n}\n\n.cm-mirror-pane__description {\n min-width: 0;\n padding: clamp(0.48rem, 1.35cqi, 0.62rem);\n color: hsl(var(--muted-foreground));\n font-size: 0.84rem;\n line-height: 1.34;\n}\n\n.cm-mirror-pane__description .cm-excerpt,\n.cm-mirror-pane__description .cm-excerpt__trigger,\n.cm-mirror-pane__description .cm-excerpt__text,\n.cm-mirror-pane__description .cm-hint,\n.cm-mirror-pane__description .cm-hint__trigger,\n.cm-mirror-pane__description-hint {\n width: 100%;\n min-width: 0;\n}\n\n.cm-mirror-pane__section {\n display: grid;\n grid-template-columns: minmax(3.6rem, 4.85rem) minmax(0, 1fr);\n grid-template-rows: minmax(2.25rem, auto);\n align-items: center;\n gap: 0.4rem;\n min-width: 0;\n min-height: 0;\n overflow: hidden;\n}\n\n.cm-mirror-pane__section--compact {\n padding: clamp(0.42rem, 1.25cqi, 0.58rem);\n}\n\n.cm-mirror-pane__section-label,\n.cm-mirror-pane__tool-group-label {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 0;\n color: hsl(var(--muted-foreground));\n font-family: var(--font-mono), monospace;\n font-size: 0.72rem;\n font-weight: 800;\n letter-spacing: 0.1em;\n line-height: 1.1;\n text-transform: uppercase;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.cm-mirror-pane__section-text {\n text-transform: none;\n letter-spacing: 0;\n}\n\n.cm-mirror-pane__section--io {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: 0.44rem;\n align-items: stretch;\n}\n\n.cm-mirror-pane__io-row,\n.cm-mirror-pane__kv-row,\n.cm-mirror-pane__pricing-header,\n.cm-mirror-pane__tool-toggle {\n min-width: 0;\n min-height: 1.8rem;\n}\n\n.cm-mirror-pane__io-row {\n display: grid;\n grid-template-columns: 1.55rem minmax(0, 1fr);\n align-items: center;\n gap: 0.42rem;\n min-width: 0;\n}\n\n.cm-mirror-pane__io-label,\n.cm-mirror-pane__kv-label {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 0;\n color: hsl(var(--muted-foreground));\n font-family: var(--font-mono), monospace;\n font-size: 0.76rem;\n letter-spacing: 0.02em;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.cm-mirror-pane__io-badges {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n gap: 0.28rem;\n min-width: 0;\n flex-wrap: wrap;\n}\n\n.cm-mirror-pane__io-badges > .cm-hint {\n flex: 0 1 auto;\n}\n\n.cm-mirror-pane__icon-label {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 1.22rem;\n height: 1.22rem;\n min-width: 1.22rem;\n border: 1px solid hsl(var(--primary) / 0.22);\n border-radius: 999px;\n background: hsl(var(--primary) / 0.08);\n color: hsl(var(--primary));\n}\n\n.cm-mirror-pane__icon-label--section {\n width: 1.62rem;\n height: 1.62rem;\n min-width: 1.62rem;\n border-color: hsl(var(--primary) / 0.32);\n background: hsl(var(--primary) / 0.1);\n}\n\n.cm-mirror-pane__icon-svg {\n width: 0.72rem;\n height: 0.72rem;\n}\n\n.cm-mirror-pane__icon-label--section .cm-mirror-pane__icon-svg {\n width: 0.98rem;\n height: 0.98rem;\n}\n\n.cm-mirror-pane__badge {\n display: inline-grid;\n grid-template-columns: auto minmax(0, 1fr);\n align-items: center;\n justify-content: center;\n gap: 0.24rem;\n min-width: 0;\n min-height: 1.36rem;\n max-height: 1.36rem;\n max-width: 100%;\n border: 1px solid hsl(var(--primary) / 0.18);\n border-radius: 999px;\n background: hsl(var(--primary) / 0.08);\n color: hsl(var(--primary));\n padding: 0 0.42rem;\n font-family: var(--font-mono), monospace;\n font-size: 0.62rem;\n font-weight: 800;\n letter-spacing: 0.06em;\n line-height: 1;\n text-transform: uppercase;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.cm-mirror-pane__badge > span:last-child {\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.cm-mirror-pane__format-icon {\n width: 0.72rem;\n height: 0.72rem;\n flex: 0 0 auto;\n}\n\n.cm-mirror-pane__badge[data-tone=\"fuchsia\"] {\n border-color: hsl(var(--accent) / 0.24);\n background: hsl(var(--accent) / 0.1);\n color: hsl(var(--accent));\n}\n\n.cm-mirror-pane__badge[data-tone=\"green\"] {\n border-color: hsl(142 71% 45% / 0.28);\n background: hsl(142 71% 45% / 0.1);\n color: hsl(142 71% 55%);\n}\n\n.cm-mirror-pane__badge[data-tone=\"warning\"] {\n border-color: hsl(42 100% 48% / 0.28);\n background: hsl(42 100% 48% / 0.1);\n color: hsl(42 100% 58%);\n}\n\n.cm-mirror-pane__badge[data-tone=\"danger\"] {\n border-color: hsl(var(--destructive) / 0.3);\n background: hsl(var(--destructive) / 0.12);\n color: hsl(var(--destructive));\n}\n\n.cm-mirror-pane__kv-grid,\n.cm-mirror-pane__pricing-entries {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n grid-auto-rows: minmax(1.58rem, auto);\n gap: 0.24rem;\n min-width: 0;\n min-height: 0;\n align-content: start;\n}\n\n.cm-mirror-pane__kv-row,\n.cm-mirror-pane__pricing-header {\n display: grid;\n grid-template-columns: auto minmax(0, 1fr);\n align-items: center;\n gap: 0.38rem;\n min-width: 0;\n min-height: 2.05rem;\n padding: 0.34rem 0.46rem;\n border: 1px solid hsl(var(--primary) / 0.11);\n border-radius: 999px;\n background: hsl(221 50% 9% / 0.34);\n}\n\n.cm-mirror-pane__kv-value {\n min-width: 0;\n color: hsl(var(--foreground));\n font-family: var(--font-mono), monospace;\n font-size: 0.76rem;\n font-weight: 650;\n text-align: left;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.cm-mirror-pane__kv-value > .cm-hint,\n.cm-mirror-pane__kv-value > .cm-hint > .cm-hint__trigger {\n width: 100%;\n min-width: 0;\n}\n\n.cm-mirror-pane__field-value {\n display: inline-flex;\n align-items: baseline;\n justify-content: flex-start;\n gap: 0;\n width: 100%;\n min-width: 0;\n max-width: 100%;\n}\n\n.cm-mirror-pane__field-main {\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.cm-mirror-pane__pricing-compact,\n.cm-mirror-pane__pricing-block,\n.cm-mirror-pane__tool-group {\n display: grid;\n gap: 0.28rem;\n min-width: 0;\n min-height: 0;\n}\n\n.cm-mirror-pane__pricing-compact {\n padding: 0;\n}\n\n.cm-mirror-pane__pricing-block,\n.cm-mirror-pane__tool-group {\n padding: 0.5rem 0.58rem;\n}\n\n.cm-mirror-pane__section--context .cm-mirror-pane__kv-grid,\n.cm-mirror-pane__section--pricing .cm-mirror-pane__pricing-entries {\n gap: 0.22rem;\n}\n\n.cm-mirror-pane__section--pricing > .cm-mirror-pane__pricing-compact {\n border: 0;\n background: transparent;\n padding: 0;\n}\n\n.cm-mirror-pane__pricing-unit {\n min-width: 0;\n color: hsl(var(--muted-foreground) / 0.72);\n font-family: var(--font-mono), monospace;\n font-size: 0.7rem;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.cm-mirror-pane__pricing-name {\n min-width: 0;\n color: hsl(var(--accent));\n font-family: var(--font-mono), monospace;\n font-weight: 700;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.cm-mirror-pane__footer {\n flex: 0 0 auto;\n border-top: 1px solid hsl(var(--primary) / 0.1);\n padding: 0.75rem 1rem;\n}\n\n.cm-mirror-pane__empty {\n flex: 1;\n min-height: 14rem;\n display: grid;\n place-items: center;\n align-content: center;\n gap: 0.75rem;\n padding: 1.5rem;\n text-align: center;\n}\n\n.cm-mirror-pane__empty-icon {\n display: inline-flex;\n color: hsl(var(--primary));\n opacity: 0.72;\n}\n\n.cm-mirror-pane__empty-icon svg {\n width: 2.5rem;\n height: 2.5rem;\n}\n\n.cm-mirror-pane__empty-text {\n max-width: 18rem;\n color: hsl(var(--muted-foreground));\n line-height: 1.45;\n}\n\n.cm-mirror-pane__tool-group {\n border-color: hsl(var(--primary) / 0.18);\n background: hsl(var(--primary) / 0.05);\n}\n\n.cm-mirror-pane__tool-group--fuchsia {\n border-color: hsl(var(--accent) / 0.18);\n background: hsl(var(--accent) / 0.05);\n}\n\n.cm-mirror-pane__tool-toggle {\n display: grid;\n grid-template-columns: minmax(0, 1fr) auto;\n align-items: center;\n gap: 0.58rem;\n}\n\n.cm-mirror-pane__custom-section {\n display: grid;\n gap: 0.42rem;\n min-width: 0;\n}\n\n.cm-mirror-pane__text-area {\n width: 100%;\n min-height: 7rem;\n padding: 0.72rem;\n color: hsl(var(--foreground));\n font-family: var(--font-mono), monospace;\n font-size: 0.86rem;\n resize: vertical;\n}\n\n.cm-mirror-pane__field {\n width: 100%;\n min-height: 2.45rem;\n color: hsl(var(--foreground));\n font-family: var(--font-mono), monospace;\n font-size: 0.86rem;\n}\n\n.cm-mirror-pane__field:focus,\n.cm-mirror-pane__field:focus-visible,\n.cm-mirror-pane__text-area:focus,\n.cm-mirror-pane__text-area:focus-visible {\n outline: none;\n border-color: hsl(var(--primary) / 0.5);\n box-shadow: 0 0 0 1px hsl(var(--primary) / 0.16);\n}\n\n.cm-mirror-pane__param-description,\n.cm-mirror-pane__no-params {\n min-width: 0;\n color: hsl(var(--muted-foreground));\n font-size: 0.86rem;\n line-height: 1.4;\n}\n\n.cm-mirror-pane__no-params {\n padding: 1rem;\n text-align: center;\n}\n\n@container (max-width: 28rem) {\n .cm-mirror-pane__body {\n gap: 0.54rem;\n padding: 0.62rem;\n }\n\n .cm-mirror-pane__section--io {\n grid-template-columns: minmax(0, 1fr);\n }\n\n .cm-mirror-pane__io-badges {\n justify-content: flex-start;\n }\n}\n\n@container (max-width: 22rem) {\n .cm-mirror-pane__model-icon-box {\n display: none;\n }\n\n .cm-mirror-pane__header {\n grid-template-columns: minmax(0, 1fr);\n }\n\n .cm-mirror-pane__tool-toggle {\n grid-template-columns: minmax(0, 1fr);\n align-items: start;\n gap: 0.3rem;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .cm-mirror-pane__toolbar-btn {\n transition-duration: 0.01ms !important;\n }\n}\n";
3
3
  export interface MirrorTab {
4
4
  id: string;
5
5
  label: React.ReactNode;
package/dist/mirror/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/mirror/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,eAAO,MAAM,YAAY,i0ZAgkBxB,CAAC;AAEF,MAAM,WAAW,SAAS;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAC3B;AAED,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,CAAC;CACxE;AAED,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAC1F,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,SAAS,EAAE,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,MAAM,CAAC,EAAE,WAAW,EAAE,CAAC;IACvB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B;AAED,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,KAAK,EACL,QAAQ,EACR,WAAW,EACX,IAAI,EACJ,IAAS,EACT,SAAS,EACT,WAAW,EACX,MAAW,EACX,KAAa,EACb,SAAS,EACT,SAAS,EACT,MAAM,EACN,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,eAAe,qBAkDjB;AAED,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC9E,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,OAAc,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,qBAUzG;AAED,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC1E,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AAED,wBAAgB,SAAS,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,qBAO9E;AAED,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC9E,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AAED,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,qBAOxF"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/mirror/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,eAAO,MAAM,YAAY,g9hBAqvBxB,CAAC;AAEF,MAAM,WAAW,SAAS;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAC3B;AAED,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,CAAC;CACxE;AAED,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAC1F,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,SAAS,EAAE,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,MAAM,CAAC,EAAE,WAAW,EAAE,CAAC;IACvB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B;AAED,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,KAAK,EACL,QAAQ,EACR,WAAW,EACX,IAAI,EACJ,IAAS,EACT,SAAS,EACT,WAAW,EACX,MAAW,EACX,KAAa,EACb,SAAS,EACT,SAAS,EACT,MAAM,EACN,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,eAAe,qBAiEjB;AAED,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC9E,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,OAAc,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,qBAUzG;AAED,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC1E,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AAED,wBAAgB,SAAS,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,qBAO9E;AAED,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC9E,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AAED,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,qBAOxF"}