@compose-market/theme 0.1.9 → 0.1.10

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 (6) hide show
  1. package/dist/css/mirror.css +202 -59
  2. package/dist/mirror/index.d.ts +1 -1
  3. package/dist/mirror/index.d.ts.map +1 -1
  4. package/dist/mirror/index.js +202 -59
  5. package/dist/mirror/index.js.map +1 -1
  6. package/package.json +1 -1
package/dist/css/mirror.css CHANGED
@@ -103,16 +103,16 @@
103
103
  }
104
104
 
105
105
  .cm-mirror-pane__body {
106
- --cm-mirror-logo: clamp(2.85rem, 7.2cqi, 3.15rem);
106
+ --cm-mirror-logo: clamp(2.75rem, 7.2cqi, 3.2rem);
107
107
  flex: 1 1 auto;
108
108
  display: grid;
109
109
  grid-template-rows: auto minmax(0, 1fr);
110
110
  align-content: stretch;
111
- gap: clamp(0.42rem, 1.45cqi, 0.68rem);
111
+ gap: clamp(0.42rem, 1.6cqi, 0.72rem);
112
112
  min-width: 0;
113
113
  min-height: 0;
114
114
  overflow: hidden;
115
- padding: clamp(0.52rem, 1.65cqi, 0.78rem);
115
+ padding: clamp(0.52rem, 1.7cqi, 0.82rem);
116
116
  }
117
117
 
118
118
  .cm-mirror-pane__header {
@@ -223,9 +223,8 @@
223
223
  gap: 0.24rem;
224
224
  min-width: 0;
225
225
  max-width: 100%;
226
- min-height: 1.32rem;
227
- max-height: 1.32rem;
228
- padding: 0 0.42rem;
226
+ min-height: clamp(1.22rem, 3.4cqi, 1.38rem);
227
+ padding: 0 clamp(0.34rem, 1.1cqi, 0.46rem);
229
228
  border: 1px solid hsl(var(--accent) / 0.24);
230
229
  border-radius: 999px;
231
230
  background: hsl(var(--accent) / 0.1);
@@ -291,7 +290,7 @@
291
290
  .cm-mirror-pane__details,
292
291
  .cm-mirror-pane__custom-content {
293
292
  display: grid;
294
- gap: clamp(0.38rem, 1.25cqi, 0.58rem);
293
+ gap: clamp(0.36rem, 1.25cqi, 0.6rem);
295
294
  min-width: 0;
296
295
  min-height: 0;
297
296
  align-content: start;
@@ -305,7 +304,8 @@
305
304
  .cm-mirror-pane__tool-group,
306
305
  .cm-mirror-pane__no-params,
307
306
  .cm-mirror-pane__text-area,
308
- .cm-mirror-pane__field {
307
+ .cm-mirror-pane__field,
308
+ .cm-mirror-pane__option {
309
309
  border: 1px solid hsl(var(--primary) / 0.12);
310
310
  border-radius: 12px;
311
311
  background: hsl(221 50% 9% / 0.3);
@@ -331,24 +331,27 @@
331
331
 
332
332
  .cm-mirror-pane__section {
333
333
  display: grid;
334
- grid-template-columns: minmax(3.6rem, 4.85rem) minmax(0, 1fr);
335
- grid-template-rows: minmax(2.25rem, auto);
334
+ grid-template-columns: clamp(4.8rem, 18cqi, 5.85rem) minmax(0, 1fr);
335
+ grid-template-rows: auto;
336
336
  align-items: center;
337
- gap: 0.4rem;
337
+ gap: clamp(0.34rem, 1.1cqi, 0.5rem);
338
338
  min-width: 0;
339
339
  min-height: 0;
340
340
  overflow: hidden;
341
+ box-shadow:
342
+ inset 0 1px 0 hsl(0 0% 100% / 0.035),
343
+ 0 0 18px hsl(var(--primary) / 0.035);
341
344
  }
342
345
 
343
346
  .cm-mirror-pane__section--compact {
344
- padding: clamp(0.42rem, 1.25cqi, 0.58rem);
347
+ padding: clamp(0.4rem, 1.25cqi, 0.6rem);
345
348
  }
346
349
 
347
350
  .cm-mirror-pane__section-label,
348
351
  .cm-mirror-pane__tool-group-label {
349
352
  display: inline-flex;
350
353
  align-items: center;
351
- justify-content: center;
354
+ justify-content: flex-start;
352
355
  min-width: 0;
353
356
  color: hsl(var(--muted-foreground));
354
357
  font-family: var(--font-mono), monospace;
@@ -367,10 +370,45 @@
367
370
  letter-spacing: 0;
368
371
  }
369
372
 
370
- .cm-mirror-pane__section--io {
371
- grid-template-columns: repeat(2, minmax(0, 1fr));
372
- gap: 0.44rem;
373
- align-items: stretch;
373
+ .cm-mirror-pane__section--capability {
374
+ border-color: hsl(var(--primary) / 0.22);
375
+ background:
376
+ linear-gradient(135deg, hsl(var(--primary) / 0.1), transparent 42%),
377
+ hsl(221 50% 9% / 0.3);
378
+ }
379
+
380
+ .cm-mirror-pane__section--context {
381
+ border-color: hsl(142 71% 45% / 0.18);
382
+ background:
383
+ linear-gradient(135deg, hsl(142 71% 45% / 0.08), transparent 44%),
384
+ hsl(221 50% 9% / 0.28);
385
+ }
386
+
387
+ .cm-mirror-pane__section--pricing {
388
+ border-color: hsl(var(--accent) / 0.2);
389
+ background:
390
+ linear-gradient(135deg, hsl(var(--accent) / 0.09), transparent 44%),
391
+ hsl(221 50% 9% / 0.3);
392
+ }
393
+
394
+ .cm-mirror-pane__section--custom,
395
+ .cm-mirror-pane__section--param {
396
+ border-color: hsl(var(--primary) / 0.16);
397
+ background:
398
+ linear-gradient(135deg, hsl(var(--primary) / 0.065), hsl(var(--accent) / 0.045)),
399
+ hsl(221 50% 9% / 0.3);
400
+ }
401
+
402
+ .cm-mirror-pane__section--capability .cm-mirror-pane__section-label {
403
+ color: hsl(var(--primary));
404
+ }
405
+
406
+ .cm-mirror-pane__section--context .cm-mirror-pane__section-label {
407
+ color: hsl(142 71% 58%);
408
+ }
409
+
410
+ .cm-mirror-pane__section--pricing .cm-mirror-pane__section-label {
411
+ color: hsl(var(--accent));
374
412
  }
375
413
 
376
414
  .cm-mirror-pane__io-row,
@@ -378,14 +416,14 @@
378
416
  .cm-mirror-pane__pricing-header,
379
417
  .cm-mirror-pane__tool-toggle {
380
418
  min-width: 0;
381
- min-height: 1.8rem;
419
+ min-height: 0;
382
420
  }
383
421
 
384
422
  .cm-mirror-pane__io-row {
385
423
  display: grid;
386
- grid-template-columns: 1.55rem minmax(0, 1fr);
424
+ grid-template-columns: auto minmax(0, 1fr);
387
425
  align-items: center;
388
- gap: 0.42rem;
426
+ gap: clamp(0.34rem, 1.05cqi, 0.46rem);
389
427
  min-width: 0;
390
428
  }
391
429
 
@@ -408,7 +446,7 @@
408
446
  display: flex;
409
447
  align-items: center;
410
448
  justify-content: flex-start;
411
- gap: 0.28rem;
449
+ gap: clamp(0.2rem, 0.8cqi, 0.3rem);
412
450
  min-width: 0;
413
451
  flex-wrap: wrap;
414
452
  }
@@ -421,9 +459,9 @@
421
459
  display: inline-flex;
422
460
  align-items: center;
423
461
  justify-content: center;
424
- width: 1.22rem;
425
- height: 1.22rem;
426
- min-width: 1.22rem;
462
+ width: clamp(1.32rem, 3.8cqi, 1.5rem);
463
+ height: clamp(1.32rem, 3.8cqi, 1.5rem);
464
+ min-width: clamp(1.32rem, 3.8cqi, 1.5rem);
427
465
  border: 1px solid hsl(var(--primary) / 0.22);
428
466
  border-radius: 999px;
429
467
  background: hsl(var(--primary) / 0.08);
@@ -431,32 +469,32 @@
431
469
  }
432
470
 
433
471
  .cm-mirror-pane__icon-label--section {
434
- width: 1.62rem;
435
- height: 1.62rem;
436
- min-width: 1.62rem;
472
+ width: clamp(1.58rem, 4.6cqi, 1.78rem);
473
+ height: clamp(1.58rem, 4.6cqi, 1.78rem);
474
+ min-width: clamp(1.58rem, 4.6cqi, 1.78rem);
437
475
  border-color: hsl(var(--primary) / 0.32);
438
476
  background: hsl(var(--primary) / 0.1);
439
477
  }
440
478
 
441
479
  .cm-mirror-pane__icon-svg {
442
- width: 0.72rem;
443
- height: 0.72rem;
480
+ width: clamp(0.78rem, 2.25cqi, 0.9rem);
481
+ height: clamp(0.78rem, 2.25cqi, 0.9rem);
444
482
  }
445
483
 
446
484
  .cm-mirror-pane__icon-label--section .cm-mirror-pane__icon-svg {
447
- width: 0.98rem;
448
- height: 0.98rem;
485
+ width: clamp(0.96rem, 2.85cqi, 1.08rem);
486
+ height: clamp(0.96rem, 2.85cqi, 1.08rem);
449
487
  }
450
488
 
451
- .cm-mirror-pane__badge {
489
+ .cm-mirror-pane__badge,
490
+ .cm-mirror-pane__format-badge {
452
491
  display: inline-grid;
453
492
  grid-template-columns: auto minmax(0, 1fr);
454
493
  align-items: center;
455
494
  justify-content: center;
456
495
  gap: 0.24rem;
457
496
  min-width: 0;
458
- min-height: 1.36rem;
459
- max-height: 1.36rem;
497
+ min-height: clamp(1.2rem, 3.2cqi, 1.36rem);
460
498
  max-width: 100%;
461
499
  border: 1px solid hsl(var(--primary) / 0.18);
462
500
  border-radius: 999px;
@@ -474,6 +512,15 @@
474
512
  text-overflow: ellipsis;
475
513
  }
476
514
 
515
+ .cm-mirror-pane__format-badge {
516
+ grid-template-columns: auto;
517
+ width: clamp(1.34rem, 3.65cqi, 1.48rem);
518
+ min-width: clamp(1.34rem, 3.65cqi, 1.48rem);
519
+ min-height: clamp(1.34rem, 3.65cqi, 1.48rem);
520
+ padding: 0;
521
+ border-radius: 999px;
522
+ }
523
+
477
524
  .cm-mirror-pane__badge > span:last-child {
478
525
  min-width: 0;
479
526
  overflow: hidden;
@@ -482,18 +529,20 @@
482
529
  }
483
530
 
484
531
  .cm-mirror-pane__format-icon {
485
- width: 0.72rem;
486
- height: 0.72rem;
532
+ width: clamp(0.64rem, 1.85cqi, 0.74rem);
533
+ height: clamp(0.64rem, 1.85cqi, 0.74rem);
487
534
  flex: 0 0 auto;
488
535
  }
489
536
 
490
- .cm-mirror-pane__badge[data-tone="fuchsia"] {
537
+ .cm-mirror-pane__badge[data-tone="fuchsia"],
538
+ .cm-mirror-pane__format-badge[data-tone="fuchsia"] {
491
539
  border-color: hsl(var(--accent) / 0.24);
492
540
  background: hsl(var(--accent) / 0.1);
493
541
  color: hsl(var(--accent));
494
542
  }
495
543
 
496
- .cm-mirror-pane__badge[data-tone="green"] {
544
+ .cm-mirror-pane__badge[data-tone="green"],
545
+ .cm-mirror-pane__format-badge[data-tone="green"] {
497
546
  border-color: hsl(142 71% 45% / 0.28);
498
547
  background: hsl(142 71% 45% / 0.1);
499
548
  color: hsl(142 71% 55%);
@@ -512,28 +561,32 @@
512
561
  }
513
562
 
514
563
  .cm-mirror-pane__kv-grid,
515
- .cm-mirror-pane__pricing-entries {
564
+ .cm-mirror-pane__pricing-entries,
565
+ .cm-mirror-pane__lane-grid {
516
566
  display: grid;
517
567
  grid-template-columns: repeat(2, minmax(0, 1fr));
518
- grid-auto-rows: minmax(1.58rem, auto);
519
- gap: 0.24rem;
568
+ grid-auto-rows: auto;
569
+ gap: clamp(0.22rem, 0.8cqi, 0.34rem);
520
570
  min-width: 0;
521
571
  min-height: 0;
522
572
  align-content: start;
523
573
  }
524
574
 
525
575
  .cm-mirror-pane__kv-row,
576
+ .cm-mirror-pane__io-row,
526
577
  .cm-mirror-pane__pricing-header {
527
578
  display: grid;
528
579
  grid-template-columns: auto minmax(0, 1fr);
529
580
  align-items: center;
530
- gap: 0.38rem;
581
+ gap: clamp(0.34rem, 1.05cqi, 0.48rem);
531
582
  min-width: 0;
532
- min-height: 2.05rem;
533
- padding: 0.34rem 0.46rem;
583
+ min-height: 0;
584
+ padding: clamp(0.3rem, 0.95cqi, 0.42rem) clamp(0.38rem, 1.2cqi, 0.52rem);
534
585
  border: 1px solid hsl(var(--primary) / 0.11);
535
586
  border-radius: 999px;
536
- background: hsl(221 50% 9% / 0.34);
587
+ background:
588
+ linear-gradient(180deg, hsl(0 0% 100% / 0.035), transparent),
589
+ hsl(221 50% 9% / 0.36);
537
590
  }
538
591
 
539
592
  .cm-mirror-pane__kv-value {
@@ -575,7 +628,7 @@
575
628
  .cm-mirror-pane__pricing-block,
576
629
  .cm-mirror-pane__tool-group {
577
630
  display: grid;
578
- gap: 0.28rem;
631
+ gap: clamp(0.24rem, 0.82cqi, 0.34rem);
579
632
  min-width: 0;
580
633
  min-height: 0;
581
634
  }
@@ -586,12 +639,13 @@
586
639
 
587
640
  .cm-mirror-pane__pricing-block,
588
641
  .cm-mirror-pane__tool-group {
589
- padding: 0.5rem 0.58rem;
642
+ padding: clamp(0.42rem, 1.2cqi, 0.58rem);
590
643
  }
591
644
 
592
645
  .cm-mirror-pane__section--context .cm-mirror-pane__kv-grid,
593
- .cm-mirror-pane__section--pricing .cm-mirror-pane__pricing-entries {
594
- gap: 0.22rem;
646
+ .cm-mirror-pane__section--pricing .cm-mirror-pane__pricing-entries,
647
+ .cm-mirror-pane__section--capability .cm-mirror-pane__lane-grid {
648
+ gap: clamp(0.22rem, 0.78cqi, 0.32rem);
595
649
  }
596
650
 
597
651
  .cm-mirror-pane__section--pricing > .cm-mirror-pane__pricing-compact {
@@ -670,33 +724,97 @@
670
724
  display: grid;
671
725
  grid-template-columns: minmax(0, 1fr) auto;
672
726
  align-items: center;
673
- gap: 0.58rem;
727
+ gap: clamp(0.36rem, 1.05cqi, 0.58rem);
674
728
  }
675
729
 
676
730
  .cm-mirror-pane__custom-section {
677
731
  display: grid;
678
- gap: 0.42rem;
732
+ gap: clamp(0.34rem, 1cqi, 0.46rem);
733
+ min-width: 0;
734
+ }
735
+
736
+ .cm-mirror-pane__param-body {
737
+ display: grid;
738
+ gap: clamp(0.28rem, 0.95cqi, 0.42rem);
679
739
  min-width: 0;
680
740
  }
681
741
 
682
742
  .cm-mirror-pane__text-area {
683
743
  width: 100%;
684
- min-height: 7rem;
685
- padding: 0.72rem;
744
+ min-height: clamp(4.8rem, 18cqi, 6.9rem);
745
+ max-height: clamp(5.4rem, 22cqi, 8rem);
746
+ padding: clamp(0.54rem, 1.5cqi, 0.72rem);
686
747
  color: hsl(var(--foreground));
687
748
  font-family: var(--font-mono), monospace;
688
749
  font-size: 0.86rem;
689
- resize: vertical;
750
+ resize: none;
690
751
  }
691
752
 
692
753
  .cm-mirror-pane__field {
693
754
  width: 100%;
694
- min-height: 2.45rem;
755
+ min-height: clamp(2.05rem, 5.4cqi, 2.45rem);
695
756
  color: hsl(var(--foreground));
696
757
  font-family: var(--font-mono), monospace;
697
758
  font-size: 0.86rem;
698
759
  }
699
760
 
761
+ .cm-mirror-pane__option-grid {
762
+ display: flex;
763
+ align-items: center;
764
+ gap: clamp(0.24rem, 0.82cqi, 0.34rem);
765
+ min-width: 0;
766
+ flex-wrap: wrap;
767
+ }
768
+
769
+ .cm-mirror-pane__option {
770
+ display: inline-flex;
771
+ align-items: center;
772
+ justify-content: center;
773
+ min-width: 0;
774
+ min-height: clamp(1.75rem, 4.9cqi, 2.05rem);
775
+ padding: 0 clamp(0.48rem, 1.45cqi, 0.68rem);
776
+ color: hsl(var(--muted-foreground));
777
+ cursor: pointer;
778
+ font-family: var(--font-mono), monospace;
779
+ font-size: 0.72rem;
780
+ font-weight: 800;
781
+ letter-spacing: 0.05em;
782
+ line-height: 1;
783
+ text-transform: uppercase;
784
+ transition:
785
+ border-color 160ms ease,
786
+ background-color 160ms ease,
787
+ color 160ms ease,
788
+ box-shadow 160ms ease;
789
+ }
790
+
791
+ .cm-mirror-pane__option[data-active="true"] {
792
+ border-color: hsl(var(--primary) / 0.34);
793
+ background: hsl(var(--primary) / 0.12);
794
+ color: hsl(var(--primary));
795
+ box-shadow: 0 0 14px hsl(var(--primary) / 0.1);
796
+ }
797
+
798
+ .cm-mirror-pane__option:hover,
799
+ .cm-mirror-pane__option:focus-visible {
800
+ outline: none;
801
+ border-color: hsl(var(--primary) / 0.3);
802
+ color: hsl(var(--foreground));
803
+ }
804
+
805
+ .cm-mirror-pane__option .cm-hint,
806
+ .cm-mirror-pane__option .cm-hint__trigger {
807
+ max-width: 100%;
808
+ min-width: 0;
809
+ }
810
+
811
+ .cm-mirror-pane__option span {
812
+ min-width: 0;
813
+ overflow: hidden;
814
+ text-overflow: ellipsis;
815
+ white-space: nowrap;
816
+ }
817
+
700
818
  .cm-mirror-pane__field:focus,
701
819
  .cm-mirror-pane__field:focus-visible,
702
820
  .cm-mirror-pane__text-area:focus,
@@ -714,6 +832,16 @@
714
832
  line-height: 1.4;
715
833
  }
716
834
 
835
+ .cm-mirror-pane__param-description,
836
+ .cm-mirror-pane__param-description .cm-excerpt,
837
+ .cm-mirror-pane__param-description .cm-excerpt__trigger,
838
+ .cm-mirror-pane__param-description .cm-excerpt__text,
839
+ .cm-mirror-pane__param-description .cm-hint,
840
+ .cm-mirror-pane__param-description .cm-hint__trigger {
841
+ width: 100%;
842
+ min-width: 0;
843
+ }
844
+
717
845
  .cm-mirror-pane__no-params {
718
846
  padding: 1rem;
719
847
  text-align: center;
@@ -721,12 +849,12 @@
721
849
 
722
850
  @container (max-width: 28rem) {
723
851
  .cm-mirror-pane__body {
724
- gap: 0.54rem;
725
- padding: 0.62rem;
852
+ gap: clamp(0.38rem, 1.35cqi, 0.54rem);
853
+ padding: clamp(0.48rem, 1.45cqi, 0.62rem);
726
854
  }
727
855
 
728
- .cm-mirror-pane__section--io {
729
- grid-template-columns: minmax(0, 1fr);
856
+ .cm-mirror-pane__section {
857
+ grid-template-columns: clamp(4.55rem, 21cqi, 5.45rem) minmax(0, 1fr);
730
858
  }
731
859
 
732
860
  .cm-mirror-pane__io-badges {
@@ -743,6 +871,21 @@
743
871
  grid-template-columns: minmax(0, 1fr);
744
872
  }
745
873
 
874
+ .cm-mirror-pane__section {
875
+ grid-template-columns: minmax(0, 1fr);
876
+ align-items: start;
877
+ }
878
+
879
+ .cm-mirror-pane__section-label {
880
+ margin-bottom: -0.1rem;
881
+ }
882
+
883
+ .cm-mirror-pane__kv-grid,
884
+ .cm-mirror-pane__pricing-entries,
885
+ .cm-mirror-pane__lane-grid {
886
+ grid-template-columns: minmax(0, 1fr);
887
+ }
888
+
746
889
  .cm-mirror-pane__tool-toggle {
747
890
  grid-template-columns: minmax(0, 1fr);
748
891
  align-items: start;
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 --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";
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.75rem, 7.2cqi, 3.2rem);\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.6cqi, 0.72rem);\n min-width: 0;\n min-height: 0;\n overflow: hidden;\n padding: clamp(0.52rem, 1.7cqi, 0.82rem);\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: clamp(1.22rem, 3.4cqi, 1.38rem);\n padding: 0 clamp(0.34rem, 1.1cqi, 0.46rem);\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.36rem, 1.25cqi, 0.6rem);\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.cm-mirror-pane__option {\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: clamp(4.8rem, 18cqi, 5.85rem) minmax(0, 1fr);\n grid-template-rows: auto;\n align-items: center;\n gap: clamp(0.34rem, 1.1cqi, 0.5rem);\n min-width: 0;\n min-height: 0;\n overflow: hidden;\n box-shadow:\n inset 0 1px 0 hsl(0 0% 100% / 0.035),\n 0 0 18px hsl(var(--primary) / 0.035);\n}\n\n.cm-mirror-pane__section--compact {\n padding: clamp(0.4rem, 1.25cqi, 0.6rem);\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: flex-start;\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--capability {\n border-color: hsl(var(--primary) / 0.22);\n background:\n linear-gradient(135deg, hsl(var(--primary) / 0.1), transparent 42%),\n hsl(221 50% 9% / 0.3);\n}\n\n.cm-mirror-pane__section--context {\n border-color: hsl(142 71% 45% / 0.18);\n background:\n linear-gradient(135deg, hsl(142 71% 45% / 0.08), transparent 44%),\n hsl(221 50% 9% / 0.28);\n}\n\n.cm-mirror-pane__section--pricing {\n border-color: hsl(var(--accent) / 0.2);\n background:\n linear-gradient(135deg, hsl(var(--accent) / 0.09), transparent 44%),\n hsl(221 50% 9% / 0.3);\n}\n\n.cm-mirror-pane__section--custom,\n.cm-mirror-pane__section--param {\n border-color: hsl(var(--primary) / 0.16);\n background:\n linear-gradient(135deg, hsl(var(--primary) / 0.065), hsl(var(--accent) / 0.045)),\n hsl(221 50% 9% / 0.3);\n}\n\n.cm-mirror-pane__section--capability .cm-mirror-pane__section-label {\n color: hsl(var(--primary));\n}\n\n.cm-mirror-pane__section--context .cm-mirror-pane__section-label {\n color: hsl(142 71% 58%);\n}\n\n.cm-mirror-pane__section--pricing .cm-mirror-pane__section-label {\n color: hsl(var(--accent));\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: 0;\n}\n\n.cm-mirror-pane__io-row {\n display: grid;\n grid-template-columns: auto minmax(0, 1fr);\n align-items: center;\n gap: clamp(0.34rem, 1.05cqi, 0.46rem);\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: clamp(0.2rem, 0.8cqi, 0.3rem);\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: clamp(1.32rem, 3.8cqi, 1.5rem);\n height: clamp(1.32rem, 3.8cqi, 1.5rem);\n min-width: clamp(1.32rem, 3.8cqi, 1.5rem);\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: clamp(1.58rem, 4.6cqi, 1.78rem);\n height: clamp(1.58rem, 4.6cqi, 1.78rem);\n min-width: clamp(1.58rem, 4.6cqi, 1.78rem);\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: clamp(0.78rem, 2.25cqi, 0.9rem);\n height: clamp(0.78rem, 2.25cqi, 0.9rem);\n}\n\n.cm-mirror-pane__icon-label--section .cm-mirror-pane__icon-svg {\n width: clamp(0.96rem, 2.85cqi, 1.08rem);\n height: clamp(0.96rem, 2.85cqi, 1.08rem);\n}\n\n.cm-mirror-pane__badge,\n.cm-mirror-pane__format-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: clamp(1.2rem, 3.2cqi, 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__format-badge {\n grid-template-columns: auto;\n width: clamp(1.34rem, 3.65cqi, 1.48rem);\n min-width: clamp(1.34rem, 3.65cqi, 1.48rem);\n min-height: clamp(1.34rem, 3.65cqi, 1.48rem);\n padding: 0;\n border-radius: 999px;\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: clamp(0.64rem, 1.85cqi, 0.74rem);\n height: clamp(0.64rem, 1.85cqi, 0.74rem);\n flex: 0 0 auto;\n}\n\n.cm-mirror-pane__badge[data-tone=\"fuchsia\"],\n.cm-mirror-pane__format-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.cm-mirror-pane__format-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.cm-mirror-pane__lane-grid {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n grid-auto-rows: auto;\n gap: clamp(0.22rem, 0.8cqi, 0.34rem);\n min-width: 0;\n min-height: 0;\n align-content: start;\n}\n\n.cm-mirror-pane__kv-row,\n.cm-mirror-pane__io-row,\n.cm-mirror-pane__pricing-header {\n display: grid;\n grid-template-columns: auto minmax(0, 1fr);\n align-items: center;\n gap: clamp(0.34rem, 1.05cqi, 0.48rem);\n min-width: 0;\n min-height: 0;\n padding: clamp(0.3rem, 0.95cqi, 0.42rem) clamp(0.38rem, 1.2cqi, 0.52rem);\n border: 1px solid hsl(var(--primary) / 0.11);\n border-radius: 999px;\n background:\n linear-gradient(180deg, hsl(0 0% 100% / 0.035), transparent),\n hsl(221 50% 9% / 0.36);\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: clamp(0.24rem, 0.82cqi, 0.34rem);\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: clamp(0.42rem, 1.2cqi, 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.cm-mirror-pane__section--capability .cm-mirror-pane__lane-grid {\n gap: clamp(0.22rem, 0.78cqi, 0.32rem);\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: clamp(0.36rem, 1.05cqi, 0.58rem);\n}\n\n.cm-mirror-pane__custom-section {\n display: grid;\n gap: clamp(0.34rem, 1cqi, 0.46rem);\n min-width: 0;\n}\n\n.cm-mirror-pane__param-body {\n display: grid;\n gap: clamp(0.28rem, 0.95cqi, 0.42rem);\n min-width: 0;\n}\n\n.cm-mirror-pane__text-area {\n width: 100%;\n min-height: clamp(4.8rem, 18cqi, 6.9rem);\n max-height: clamp(5.4rem, 22cqi, 8rem);\n padding: clamp(0.54rem, 1.5cqi, 0.72rem);\n color: hsl(var(--foreground));\n font-family: var(--font-mono), monospace;\n font-size: 0.86rem;\n resize: none;\n}\n\n.cm-mirror-pane__field {\n width: 100%;\n min-height: clamp(2.05rem, 5.4cqi, 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__option-grid {\n display: flex;\n align-items: center;\n gap: clamp(0.24rem, 0.82cqi, 0.34rem);\n min-width: 0;\n flex-wrap: wrap;\n}\n\n.cm-mirror-pane__option {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 0;\n min-height: clamp(1.75rem, 4.9cqi, 2.05rem);\n padding: 0 clamp(0.48rem, 1.45cqi, 0.68rem);\n color: hsl(var(--muted-foreground));\n cursor: pointer;\n font-family: var(--font-mono), monospace;\n font-size: 0.72rem;\n font-weight: 800;\n letter-spacing: 0.05em;\n line-height: 1;\n text-transform: uppercase;\n transition:\n border-color 160ms ease,\n background-color 160ms ease,\n color 160ms ease,\n box-shadow 160ms ease;\n}\n\n.cm-mirror-pane__option[data-active=\"true\"] {\n border-color: hsl(var(--primary) / 0.34);\n background: hsl(var(--primary) / 0.12);\n color: hsl(var(--primary));\n box-shadow: 0 0 14px hsl(var(--primary) / 0.1);\n}\n\n.cm-mirror-pane__option:hover,\n.cm-mirror-pane__option:focus-visible {\n outline: none;\n border-color: hsl(var(--primary) / 0.3);\n color: hsl(var(--foreground));\n}\n\n.cm-mirror-pane__option .cm-hint,\n.cm-mirror-pane__option .cm-hint__trigger {\n max-width: 100%;\n min-width: 0;\n}\n\n.cm-mirror-pane__option span {\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\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__param-description,\n.cm-mirror-pane__param-description .cm-excerpt,\n.cm-mirror-pane__param-description .cm-excerpt__trigger,\n.cm-mirror-pane__param-description .cm-excerpt__text,\n.cm-mirror-pane__param-description .cm-hint,\n.cm-mirror-pane__param-description .cm-hint__trigger {\n width: 100%;\n min-width: 0;\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: clamp(0.38rem, 1.35cqi, 0.54rem);\n padding: clamp(0.48rem, 1.45cqi, 0.62rem);\n }\n\n .cm-mirror-pane__section {\n grid-template-columns: clamp(4.55rem, 21cqi, 5.45rem) 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__section {\n grid-template-columns: minmax(0, 1fr);\n align-items: start;\n }\n\n .cm-mirror-pane__section-label {\n margin-bottom: -0.1rem;\n }\n\n .cm-mirror-pane__kv-grid,\n .cm-mirror-pane__pricing-entries,\n .cm-mirror-pane__lane-grid {\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;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"}
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,w/qBAo4BxB,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"}
package/dist/mirror/index.js CHANGED
@@ -105,16 +105,16 @@ export const mirrorStyles = /* css */ `
105
105
  }
106
106
 
107
107
  .cm-mirror-pane__body {
108
- --cm-mirror-logo: clamp(2.85rem, 7.2cqi, 3.15rem);
108
+ --cm-mirror-logo: clamp(2.75rem, 7.2cqi, 3.2rem);
109
109
  flex: 1 1 auto;
110
110
  display: grid;
111
111
  grid-template-rows: auto minmax(0, 1fr);
112
112
  align-content: stretch;
113
- gap: clamp(0.42rem, 1.45cqi, 0.68rem);
113
+ gap: clamp(0.42rem, 1.6cqi, 0.72rem);
114
114
  min-width: 0;
115
115
  min-height: 0;
116
116
  overflow: hidden;
117
- padding: clamp(0.52rem, 1.65cqi, 0.78rem);
117
+ padding: clamp(0.52rem, 1.7cqi, 0.82rem);
118
118
  }
119
119
 
120
120
  .cm-mirror-pane__header {
@@ -225,9 +225,8 @@ export const mirrorStyles = /* css */ `
225
225
  gap: 0.24rem;
226
226
  min-width: 0;
227
227
  max-width: 100%;
228
- min-height: 1.32rem;
229
- max-height: 1.32rem;
230
- padding: 0 0.42rem;
228
+ min-height: clamp(1.22rem, 3.4cqi, 1.38rem);
229
+ padding: 0 clamp(0.34rem, 1.1cqi, 0.46rem);
231
230
  border: 1px solid hsl(var(--accent) / 0.24);
232
231
  border-radius: 999px;
233
232
  background: hsl(var(--accent) / 0.1);
@@ -293,7 +292,7 @@ export const mirrorStyles = /* css */ `
293
292
  .cm-mirror-pane__details,
294
293
  .cm-mirror-pane__custom-content {
295
294
  display: grid;
296
- gap: clamp(0.38rem, 1.25cqi, 0.58rem);
295
+ gap: clamp(0.36rem, 1.25cqi, 0.6rem);
297
296
  min-width: 0;
298
297
  min-height: 0;
299
298
  align-content: start;
@@ -307,7 +306,8 @@ export const mirrorStyles = /* css */ `
307
306
  .cm-mirror-pane__tool-group,
308
307
  .cm-mirror-pane__no-params,
309
308
  .cm-mirror-pane__text-area,
310
- .cm-mirror-pane__field {
309
+ .cm-mirror-pane__field,
310
+ .cm-mirror-pane__option {
311
311
  border: 1px solid hsl(var(--primary) / 0.12);
312
312
  border-radius: 12px;
313
313
  background: hsl(221 50% 9% / 0.3);
@@ -333,24 +333,27 @@ export const mirrorStyles = /* css */ `
333
333
 
334
334
  .cm-mirror-pane__section {
335
335
  display: grid;
336
- grid-template-columns: minmax(3.6rem, 4.85rem) minmax(0, 1fr);
337
- grid-template-rows: minmax(2.25rem, auto);
336
+ grid-template-columns: clamp(4.8rem, 18cqi, 5.85rem) minmax(0, 1fr);
337
+ grid-template-rows: auto;
338
338
  align-items: center;
339
- gap: 0.4rem;
339
+ gap: clamp(0.34rem, 1.1cqi, 0.5rem);
340
340
  min-width: 0;
341
341
  min-height: 0;
342
342
  overflow: hidden;
343
+ box-shadow:
344
+ inset 0 1px 0 hsl(0 0% 100% / 0.035),
345
+ 0 0 18px hsl(var(--primary) / 0.035);
343
346
  }
344
347
 
345
348
  .cm-mirror-pane__section--compact {
346
- padding: clamp(0.42rem, 1.25cqi, 0.58rem);
349
+ padding: clamp(0.4rem, 1.25cqi, 0.6rem);
347
350
  }
348
351
 
349
352
  .cm-mirror-pane__section-label,
350
353
  .cm-mirror-pane__tool-group-label {
351
354
  display: inline-flex;
352
355
  align-items: center;
353
- justify-content: center;
356
+ justify-content: flex-start;
354
357
  min-width: 0;
355
358
  color: hsl(var(--muted-foreground));
356
359
  font-family: var(--font-mono), monospace;
@@ -369,10 +372,45 @@ export const mirrorStyles = /* css */ `
369
372
  letter-spacing: 0;
370
373
  }
371
374
 
372
- .cm-mirror-pane__section--io {
373
- grid-template-columns: repeat(2, minmax(0, 1fr));
374
- gap: 0.44rem;
375
- align-items: stretch;
375
+ .cm-mirror-pane__section--capability {
376
+ border-color: hsl(var(--primary) / 0.22);
377
+ background:
378
+ linear-gradient(135deg, hsl(var(--primary) / 0.1), transparent 42%),
379
+ hsl(221 50% 9% / 0.3);
380
+ }
381
+
382
+ .cm-mirror-pane__section--context {
383
+ border-color: hsl(142 71% 45% / 0.18);
384
+ background:
385
+ linear-gradient(135deg, hsl(142 71% 45% / 0.08), transparent 44%),
386
+ hsl(221 50% 9% / 0.28);
387
+ }
388
+
389
+ .cm-mirror-pane__section--pricing {
390
+ border-color: hsl(var(--accent) / 0.2);
391
+ background:
392
+ linear-gradient(135deg, hsl(var(--accent) / 0.09), transparent 44%),
393
+ hsl(221 50% 9% / 0.3);
394
+ }
395
+
396
+ .cm-mirror-pane__section--custom,
397
+ .cm-mirror-pane__section--param {
398
+ border-color: hsl(var(--primary) / 0.16);
399
+ background:
400
+ linear-gradient(135deg, hsl(var(--primary) / 0.065), hsl(var(--accent) / 0.045)),
401
+ hsl(221 50% 9% / 0.3);
402
+ }
403
+
404
+ .cm-mirror-pane__section--capability .cm-mirror-pane__section-label {
405
+ color: hsl(var(--primary));
406
+ }
407
+
408
+ .cm-mirror-pane__section--context .cm-mirror-pane__section-label {
409
+ color: hsl(142 71% 58%);
410
+ }
411
+
412
+ .cm-mirror-pane__section--pricing .cm-mirror-pane__section-label {
413
+ color: hsl(var(--accent));
376
414
  }
377
415
 
378
416
  .cm-mirror-pane__io-row,
@@ -380,14 +418,14 @@ export const mirrorStyles = /* css */ `
380
418
  .cm-mirror-pane__pricing-header,
381
419
  .cm-mirror-pane__tool-toggle {
382
420
  min-width: 0;
383
- min-height: 1.8rem;
421
+ min-height: 0;
384
422
  }
385
423
 
386
424
  .cm-mirror-pane__io-row {
387
425
  display: grid;
388
- grid-template-columns: 1.55rem minmax(0, 1fr);
426
+ grid-template-columns: auto minmax(0, 1fr);
389
427
  align-items: center;
390
- gap: 0.42rem;
428
+ gap: clamp(0.34rem, 1.05cqi, 0.46rem);
391
429
  min-width: 0;
392
430
  }
393
431
 
@@ -410,7 +448,7 @@ export const mirrorStyles = /* css */ `
410
448
  display: flex;
411
449
  align-items: center;
412
450
  justify-content: flex-start;
413
- gap: 0.28rem;
451
+ gap: clamp(0.2rem, 0.8cqi, 0.3rem);
414
452
  min-width: 0;
415
453
  flex-wrap: wrap;
416
454
  }
@@ -423,9 +461,9 @@ export const mirrorStyles = /* css */ `
423
461
  display: inline-flex;
424
462
  align-items: center;
425
463
  justify-content: center;
426
- width: 1.22rem;
427
- height: 1.22rem;
428
- min-width: 1.22rem;
464
+ width: clamp(1.32rem, 3.8cqi, 1.5rem);
465
+ height: clamp(1.32rem, 3.8cqi, 1.5rem);
466
+ min-width: clamp(1.32rem, 3.8cqi, 1.5rem);
429
467
  border: 1px solid hsl(var(--primary) / 0.22);
430
468
  border-radius: 999px;
431
469
  background: hsl(var(--primary) / 0.08);
@@ -433,32 +471,32 @@ export const mirrorStyles = /* css */ `
433
471
  }
434
472
 
435
473
  .cm-mirror-pane__icon-label--section {
436
- width: 1.62rem;
437
- height: 1.62rem;
438
- min-width: 1.62rem;
474
+ width: clamp(1.58rem, 4.6cqi, 1.78rem);
475
+ height: clamp(1.58rem, 4.6cqi, 1.78rem);
476
+ min-width: clamp(1.58rem, 4.6cqi, 1.78rem);
439
477
  border-color: hsl(var(--primary) / 0.32);
440
478
  background: hsl(var(--primary) / 0.1);
441
479
  }
442
480
 
443
481
  .cm-mirror-pane__icon-svg {
444
- width: 0.72rem;
445
- height: 0.72rem;
482
+ width: clamp(0.78rem, 2.25cqi, 0.9rem);
483
+ height: clamp(0.78rem, 2.25cqi, 0.9rem);
446
484
  }
447
485
 
448
486
  .cm-mirror-pane__icon-label--section .cm-mirror-pane__icon-svg {
449
- width: 0.98rem;
450
- height: 0.98rem;
487
+ width: clamp(0.96rem, 2.85cqi, 1.08rem);
488
+ height: clamp(0.96rem, 2.85cqi, 1.08rem);
451
489
  }
452
490
 
453
- .cm-mirror-pane__badge {
491
+ .cm-mirror-pane__badge,
492
+ .cm-mirror-pane__format-badge {
454
493
  display: inline-grid;
455
494
  grid-template-columns: auto minmax(0, 1fr);
456
495
  align-items: center;
457
496
  justify-content: center;
458
497
  gap: 0.24rem;
459
498
  min-width: 0;
460
- min-height: 1.36rem;
461
- max-height: 1.36rem;
499
+ min-height: clamp(1.2rem, 3.2cqi, 1.36rem);
462
500
  max-width: 100%;
463
501
  border: 1px solid hsl(var(--primary) / 0.18);
464
502
  border-radius: 999px;
@@ -476,6 +514,15 @@ export const mirrorStyles = /* css */ `
476
514
  text-overflow: ellipsis;
477
515
  }
478
516
 
517
+ .cm-mirror-pane__format-badge {
518
+ grid-template-columns: auto;
519
+ width: clamp(1.34rem, 3.65cqi, 1.48rem);
520
+ min-width: clamp(1.34rem, 3.65cqi, 1.48rem);
521
+ min-height: clamp(1.34rem, 3.65cqi, 1.48rem);
522
+ padding: 0;
523
+ border-radius: 999px;
524
+ }
525
+
479
526
  .cm-mirror-pane__badge > span:last-child {
480
527
  min-width: 0;
481
528
  overflow: hidden;
@@ -484,18 +531,20 @@ export const mirrorStyles = /* css */ `
484
531
  }
485
532
 
486
533
  .cm-mirror-pane__format-icon {
487
- width: 0.72rem;
488
- height: 0.72rem;
534
+ width: clamp(0.64rem, 1.85cqi, 0.74rem);
535
+ height: clamp(0.64rem, 1.85cqi, 0.74rem);
489
536
  flex: 0 0 auto;
490
537
  }
491
538
 
492
- .cm-mirror-pane__badge[data-tone="fuchsia"] {
539
+ .cm-mirror-pane__badge[data-tone="fuchsia"],
540
+ .cm-mirror-pane__format-badge[data-tone="fuchsia"] {
493
541
  border-color: hsl(var(--accent) / 0.24);
494
542
  background: hsl(var(--accent) / 0.1);
495
543
  color: hsl(var(--accent));
496
544
  }
497
545
 
498
- .cm-mirror-pane__badge[data-tone="green"] {
546
+ .cm-mirror-pane__badge[data-tone="green"],
547
+ .cm-mirror-pane__format-badge[data-tone="green"] {
499
548
  border-color: hsl(142 71% 45% / 0.28);
500
549
  background: hsl(142 71% 45% / 0.1);
501
550
  color: hsl(142 71% 55%);
@@ -514,28 +563,32 @@ export const mirrorStyles = /* css */ `
514
563
  }
515
564
 
516
565
  .cm-mirror-pane__kv-grid,
517
- .cm-mirror-pane__pricing-entries {
566
+ .cm-mirror-pane__pricing-entries,
567
+ .cm-mirror-pane__lane-grid {
518
568
  display: grid;
519
569
  grid-template-columns: repeat(2, minmax(0, 1fr));
520
- grid-auto-rows: minmax(1.58rem, auto);
521
- gap: 0.24rem;
570
+ grid-auto-rows: auto;
571
+ gap: clamp(0.22rem, 0.8cqi, 0.34rem);
522
572
  min-width: 0;
523
573
  min-height: 0;
524
574
  align-content: start;
525
575
  }
526
576
 
527
577
  .cm-mirror-pane__kv-row,
578
+ .cm-mirror-pane__io-row,
528
579
  .cm-mirror-pane__pricing-header {
529
580
  display: grid;
530
581
  grid-template-columns: auto minmax(0, 1fr);
531
582
  align-items: center;
532
- gap: 0.38rem;
583
+ gap: clamp(0.34rem, 1.05cqi, 0.48rem);
533
584
  min-width: 0;
534
- min-height: 2.05rem;
535
- padding: 0.34rem 0.46rem;
585
+ min-height: 0;
586
+ padding: clamp(0.3rem, 0.95cqi, 0.42rem) clamp(0.38rem, 1.2cqi, 0.52rem);
536
587
  border: 1px solid hsl(var(--primary) / 0.11);
537
588
  border-radius: 999px;
538
- background: hsl(221 50% 9% / 0.34);
589
+ background:
590
+ linear-gradient(180deg, hsl(0 0% 100% / 0.035), transparent),
591
+ hsl(221 50% 9% / 0.36);
539
592
  }
540
593
 
541
594
  .cm-mirror-pane__kv-value {
@@ -577,7 +630,7 @@ export const mirrorStyles = /* css */ `
577
630
  .cm-mirror-pane__pricing-block,
578
631
  .cm-mirror-pane__tool-group {
579
632
  display: grid;
580
- gap: 0.28rem;
633
+ gap: clamp(0.24rem, 0.82cqi, 0.34rem);
581
634
  min-width: 0;
582
635
  min-height: 0;
583
636
  }
@@ -588,12 +641,13 @@ export const mirrorStyles = /* css */ `
588
641
 
589
642
  .cm-mirror-pane__pricing-block,
590
643
  .cm-mirror-pane__tool-group {
591
- padding: 0.5rem 0.58rem;
644
+ padding: clamp(0.42rem, 1.2cqi, 0.58rem);
592
645
  }
593
646
 
594
647
  .cm-mirror-pane__section--context .cm-mirror-pane__kv-grid,
595
- .cm-mirror-pane__section--pricing .cm-mirror-pane__pricing-entries {
596
- gap: 0.22rem;
648
+ .cm-mirror-pane__section--pricing .cm-mirror-pane__pricing-entries,
649
+ .cm-mirror-pane__section--capability .cm-mirror-pane__lane-grid {
650
+ gap: clamp(0.22rem, 0.78cqi, 0.32rem);
597
651
  }
598
652
 
599
653
  .cm-mirror-pane__section--pricing > .cm-mirror-pane__pricing-compact {
@@ -672,33 +726,97 @@ export const mirrorStyles = /* css */ `
672
726
  display: grid;
673
727
  grid-template-columns: minmax(0, 1fr) auto;
674
728
  align-items: center;
675
- gap: 0.58rem;
729
+ gap: clamp(0.36rem, 1.05cqi, 0.58rem);
676
730
  }
677
731
 
678
732
  .cm-mirror-pane__custom-section {
679
733
  display: grid;
680
- gap: 0.42rem;
734
+ gap: clamp(0.34rem, 1cqi, 0.46rem);
735
+ min-width: 0;
736
+ }
737
+
738
+ .cm-mirror-pane__param-body {
739
+ display: grid;
740
+ gap: clamp(0.28rem, 0.95cqi, 0.42rem);
681
741
  min-width: 0;
682
742
  }
683
743
 
684
744
  .cm-mirror-pane__text-area {
685
745
  width: 100%;
686
- min-height: 7rem;
687
- padding: 0.72rem;
746
+ min-height: clamp(4.8rem, 18cqi, 6.9rem);
747
+ max-height: clamp(5.4rem, 22cqi, 8rem);
748
+ padding: clamp(0.54rem, 1.5cqi, 0.72rem);
688
749
  color: hsl(var(--foreground));
689
750
  font-family: var(--font-mono), monospace;
690
751
  font-size: 0.86rem;
691
- resize: vertical;
752
+ resize: none;
692
753
  }
693
754
 
694
755
  .cm-mirror-pane__field {
695
756
  width: 100%;
696
- min-height: 2.45rem;
757
+ min-height: clamp(2.05rem, 5.4cqi, 2.45rem);
697
758
  color: hsl(var(--foreground));
698
759
  font-family: var(--font-mono), monospace;
699
760
  font-size: 0.86rem;
700
761
  }
701
762
 
763
+ .cm-mirror-pane__option-grid {
764
+ display: flex;
765
+ align-items: center;
766
+ gap: clamp(0.24rem, 0.82cqi, 0.34rem);
767
+ min-width: 0;
768
+ flex-wrap: wrap;
769
+ }
770
+
771
+ .cm-mirror-pane__option {
772
+ display: inline-flex;
773
+ align-items: center;
774
+ justify-content: center;
775
+ min-width: 0;
776
+ min-height: clamp(1.75rem, 4.9cqi, 2.05rem);
777
+ padding: 0 clamp(0.48rem, 1.45cqi, 0.68rem);
778
+ color: hsl(var(--muted-foreground));
779
+ cursor: pointer;
780
+ font-family: var(--font-mono), monospace;
781
+ font-size: 0.72rem;
782
+ font-weight: 800;
783
+ letter-spacing: 0.05em;
784
+ line-height: 1;
785
+ text-transform: uppercase;
786
+ transition:
787
+ border-color 160ms ease,
788
+ background-color 160ms ease,
789
+ color 160ms ease,
790
+ box-shadow 160ms ease;
791
+ }
792
+
793
+ .cm-mirror-pane__option[data-active="true"] {
794
+ border-color: hsl(var(--primary) / 0.34);
795
+ background: hsl(var(--primary) / 0.12);
796
+ color: hsl(var(--primary));
797
+ box-shadow: 0 0 14px hsl(var(--primary) / 0.1);
798
+ }
799
+
800
+ .cm-mirror-pane__option:hover,
801
+ .cm-mirror-pane__option:focus-visible {
802
+ outline: none;
803
+ border-color: hsl(var(--primary) / 0.3);
804
+ color: hsl(var(--foreground));
805
+ }
806
+
807
+ .cm-mirror-pane__option .cm-hint,
808
+ .cm-mirror-pane__option .cm-hint__trigger {
809
+ max-width: 100%;
810
+ min-width: 0;
811
+ }
812
+
813
+ .cm-mirror-pane__option span {
814
+ min-width: 0;
815
+ overflow: hidden;
816
+ text-overflow: ellipsis;
817
+ white-space: nowrap;
818
+ }
819
+
702
820
  .cm-mirror-pane__field:focus,
703
821
  .cm-mirror-pane__field:focus-visible,
704
822
  .cm-mirror-pane__text-area:focus,
@@ -716,6 +834,16 @@ export const mirrorStyles = /* css */ `
716
834
  line-height: 1.4;
717
835
  }
718
836
 
837
+ .cm-mirror-pane__param-description,
838
+ .cm-mirror-pane__param-description .cm-excerpt,
839
+ .cm-mirror-pane__param-description .cm-excerpt__trigger,
840
+ .cm-mirror-pane__param-description .cm-excerpt__text,
841
+ .cm-mirror-pane__param-description .cm-hint,
842
+ .cm-mirror-pane__param-description .cm-hint__trigger {
843
+ width: 100%;
844
+ min-width: 0;
845
+ }
846
+
719
847
  .cm-mirror-pane__no-params {
720
848
  padding: 1rem;
721
849
  text-align: center;
@@ -723,12 +851,12 @@ export const mirrorStyles = /* css */ `
723
851
 
724
852
  @container (max-width: 28rem) {
725
853
  .cm-mirror-pane__body {
726
- gap: 0.54rem;
727
- padding: 0.62rem;
854
+ gap: clamp(0.38rem, 1.35cqi, 0.54rem);
855
+ padding: clamp(0.48rem, 1.45cqi, 0.62rem);
728
856
  }
729
857
 
730
- .cm-mirror-pane__section--io {
731
- grid-template-columns: minmax(0, 1fr);
858
+ .cm-mirror-pane__section {
859
+ grid-template-columns: clamp(4.55rem, 21cqi, 5.45rem) minmax(0, 1fr);
732
860
  }
733
861
 
734
862
  .cm-mirror-pane__io-badges {
@@ -745,6 +873,21 @@ export const mirrorStyles = /* css */ `
745
873
  grid-template-columns: minmax(0, 1fr);
746
874
  }
747
875
 
876
+ .cm-mirror-pane__section {
877
+ grid-template-columns: minmax(0, 1fr);
878
+ align-items: start;
879
+ }
880
+
881
+ .cm-mirror-pane__section-label {
882
+ margin-bottom: -0.1rem;
883
+ }
884
+
885
+ .cm-mirror-pane__kv-grid,
886
+ .cm-mirror-pane__pricing-entries,
887
+ .cm-mirror-pane__lane-grid {
888
+ grid-template-columns: minmax(0, 1fr);
889
+ }
890
+
748
891
  .cm-mirror-pane__tool-toggle {
749
892
  grid-template-columns: minmax(0, 1fr);
750
893
  align-items: start;
package/dist/mirror/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/mirror/index.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/mirror/index.tsx"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@compose-market/theme",
3
- "version": "0.1.9",
3
+ "version": "0.1.10",
4
4
  "description": "Official design tokens and theme system for Compose.Market",
5
5
  "keywords": [
6
6
  "design-tokens",