@compose-market/theme 0.1.10 → 0.1.12

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 +169 -14
  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 +169 -14
  5. package/dist/mirror/index.js.map +1 -1
  6. package/package.json +1 -1
package/dist/css/mirror.css CHANGED
@@ -1,6 +1,7 @@
1
1
 
2
2
  .cm-mirror-pane {
3
- container-type: inline-size;
3
+ container-name: cm-mirror;
4
+ container-type: size;
4
5
  display: flex;
5
6
  flex-direction: column;
6
7
  width: 100%;
@@ -104,6 +105,12 @@
104
105
 
105
106
  .cm-mirror-pane__body {
106
107
  --cm-mirror-logo: clamp(2.75rem, 7.2cqi, 3.2rem);
108
+ --cm-mirror-gap: clamp(0.36rem, 1.25cqi, 0.6rem);
109
+ --cm-mirror-main-gap: clamp(0.48rem, calc(1cqi + 0.7cqb), 1.08rem);
110
+ --cm-mirror-main-pad: clamp(0.48rem, calc(0.72cqi + 0.42cqb), 0.78rem);
111
+ --cm-mirror-pad: clamp(0.4rem, 1.25cqi, 0.6rem);
112
+ --cm-mirror-cell-min: clamp(1.82rem, 4.4cqb, 2.45rem);
113
+ --cm-mirror-option-min: clamp(1.55rem, 3.8cqb, 2rem);
107
114
  flex: 1 1 auto;
108
115
  display: grid;
109
116
  grid-template-rows: auto minmax(0, 1fr);
@@ -282,21 +289,37 @@
282
289
 
283
290
  .cm-mirror-pane__content {
284
291
  display: grid;
292
+ grid-template-rows: minmax(0, 1fr);
293
+ align-items: stretch;
294
+ height: 100%;
285
295
  min-width: 0;
286
296
  min-height: 0;
287
297
  overflow: hidden;
288
298
  }
289
299
 
300
+ .cm-mirror-pane__body > .cm-mirror-pane__content:first-child:last-child {
301
+ grid-row: 1 / -1;
302
+ }
303
+
290
304
  .cm-mirror-pane__details,
291
305
  .cm-mirror-pane__custom-content {
292
306
  display: grid;
293
- gap: clamp(0.36rem, 1.25cqi, 0.6rem);
307
+ grid-auto-rows: minmax(min-content, 1fr);
308
+ gap: var(--cm-mirror-gap);
309
+ height: 100%;
294
310
  min-width: 0;
295
311
  min-height: 0;
296
- align-content: start;
312
+ align-content: stretch;
313
+ align-items: stretch;
297
314
  overflow: hidden;
298
315
  }
299
316
 
317
+ .cm-mirror-pane__details {
318
+ grid-auto-rows: minmax(min-content, max-content);
319
+ gap: var(--cm-mirror-main-gap);
320
+ align-content: space-between;
321
+ }
322
+
300
323
  .cm-mirror-pane__description,
301
324
  .cm-mirror-pane__section,
302
325
  .cm-mirror-pane__pricing-compact,
@@ -319,6 +342,10 @@
319
342
  line-height: 1.34;
320
343
  }
321
344
 
345
+ .cm-mirror-pane__details > .cm-mirror-pane__description {
346
+ padding: var(--cm-mirror-main-pad);
347
+ }
348
+
322
349
  .cm-mirror-pane__description .cm-excerpt,
323
350
  .cm-mirror-pane__description .cm-excerpt__trigger,
324
351
  .cm-mirror-pane__description .cm-excerpt__text,
@@ -333,7 +360,7 @@
333
360
  display: grid;
334
361
  grid-template-columns: clamp(4.8rem, 18cqi, 5.85rem) minmax(0, 1fr);
335
362
  grid-template-rows: auto;
336
- align-items: center;
363
+ align-items: stretch;
337
364
  gap: clamp(0.34rem, 1.1cqi, 0.5rem);
338
365
  min-width: 0;
339
366
  min-height: 0;
@@ -344,7 +371,11 @@
344
371
  }
345
372
 
346
373
  .cm-mirror-pane__section--compact {
347
- padding: clamp(0.4rem, 1.25cqi, 0.6rem);
374
+ padding: var(--cm-mirror-pad);
375
+ }
376
+
377
+ .cm-mirror-pane__details > .cm-mirror-pane__section--compact {
378
+ padding: var(--cm-mirror-main-pad);
348
379
  }
349
380
 
350
381
  .cm-mirror-pane__section-label,
@@ -352,6 +383,7 @@
352
383
  display: inline-flex;
353
384
  align-items: center;
354
385
  justify-content: flex-start;
386
+ align-self: center;
355
387
  min-width: 0;
356
388
  color: hsl(var(--muted-foreground));
357
389
  font-family: var(--font-mono), monospace;
@@ -411,6 +443,17 @@
411
443
  color: hsl(var(--accent));
412
444
  }
413
445
 
446
+ .cm-mirror-pane__section--custom,
447
+ .cm-mirror-pane__section--param {
448
+ align-items: start;
449
+ }
450
+
451
+ .cm-mirror-pane__section--custom > .cm-mirror-pane__section-label,
452
+ .cm-mirror-pane__section--param > .cm-mirror-pane__section-label {
453
+ align-self: start;
454
+ padding-top: clamp(0.42rem, 1.25cqb, 0.64rem);
455
+ }
456
+
414
457
  .cm-mirror-pane__io-row,
415
458
  .cm-mirror-pane__kv-row,
416
459
  .cm-mirror-pane__pricing-header,
@@ -565,11 +608,13 @@
565
608
  .cm-mirror-pane__lane-grid {
566
609
  display: grid;
567
610
  grid-template-columns: repeat(2, minmax(0, 1fr));
568
- grid-auto-rows: auto;
611
+ grid-auto-rows: minmax(0, 1fr);
569
612
  gap: clamp(0.22rem, 0.8cqi, 0.34rem);
613
+ height: 100%;
570
614
  min-width: 0;
571
615
  min-height: 0;
572
- align-content: start;
616
+ align-content: stretch;
617
+ align-items: stretch;
573
618
  }
574
619
 
575
620
  .cm-mirror-pane__kv-row,
@@ -580,7 +625,8 @@
580
625
  align-items: center;
581
626
  gap: clamp(0.34rem, 1.05cqi, 0.48rem);
582
627
  min-width: 0;
583
- min-height: 0;
628
+ min-height: var(--cm-mirror-cell-min);
629
+ height: 100%;
584
630
  padding: clamp(0.3rem, 0.95cqi, 0.42rem) clamp(0.38rem, 1.2cqi, 0.52rem);
585
631
  border: 1px solid hsl(var(--primary) / 0.11);
586
632
  border-radius: 999px;
@@ -628,7 +674,9 @@
628
674
  .cm-mirror-pane__pricing-block,
629
675
  .cm-mirror-pane__tool-group {
630
676
  display: grid;
677
+ grid-template-rows: minmax(0, 1fr) auto;
631
678
  gap: clamp(0.24rem, 0.82cqi, 0.34rem);
679
+ height: 100%;
632
680
  min-width: 0;
633
681
  min-height: 0;
634
682
  }
@@ -648,6 +696,27 @@
648
696
  gap: clamp(0.22rem, 0.78cqi, 0.32rem);
649
697
  }
650
698
 
699
+ .cm-mirror-pane__details .cm-mirror-pane__kv-grid,
700
+ .cm-mirror-pane__details .cm-mirror-pane__pricing-entries,
701
+ .cm-mirror-pane__details .cm-mirror-pane__lane-grid {
702
+ grid-auto-rows: minmax(var(--cm-mirror-cell-min), auto);
703
+ height: auto;
704
+ align-content: center;
705
+ align-items: center;
706
+ }
707
+
708
+ .cm-mirror-pane__details .cm-mirror-pane__kv-row,
709
+ .cm-mirror-pane__details .cm-mirror-pane__io-row,
710
+ .cm-mirror-pane__details .cm-mirror-pane__pricing-header {
711
+ height: auto;
712
+ }
713
+
714
+ .cm-mirror-pane__details .cm-mirror-pane__pricing-compact {
715
+ grid-template-rows: auto auto;
716
+ height: auto;
717
+ align-content: center;
718
+ }
719
+
651
720
  .cm-mirror-pane__section--pricing > .cm-mirror-pane__pricing-compact {
652
721
  border: 0;
653
722
  background: transparent;
@@ -735,14 +804,19 @@
735
804
 
736
805
  .cm-mirror-pane__param-body {
737
806
  display: grid;
807
+ grid-template-rows: minmax(0, auto) auto;
808
+ align-content: start;
738
809
  gap: clamp(0.28rem, 0.95cqi, 0.42rem);
810
+ height: 100%;
739
811
  min-width: 0;
812
+ min-height: 0;
740
813
  }
741
814
 
742
815
  .cm-mirror-pane__text-area {
743
816
  width: 100%;
744
- min-height: clamp(4.8rem, 18cqi, 6.9rem);
745
- max-height: clamp(5.4rem, 22cqi, 8rem);
817
+ height: 100%;
818
+ min-height: 0;
819
+ max-height: none;
746
820
  padding: clamp(0.54rem, 1.5cqi, 0.72rem);
747
821
  color: hsl(var(--foreground));
748
822
  font-family: var(--font-mono), monospace;
@@ -759,11 +833,14 @@
759
833
  }
760
834
 
761
835
  .cm-mirror-pane__option-grid {
762
- display: flex;
763
- align-items: center;
836
+ display: grid;
837
+ grid-template-columns: repeat(auto-fit, minmax(min(100%, 4.5rem), 1fr));
838
+ grid-auto-rows: minmax(var(--cm-mirror-option-min), auto);
839
+ align-items: stretch;
764
840
  gap: clamp(0.24rem, 0.82cqi, 0.34rem);
841
+ width: 100%;
765
842
  min-width: 0;
766
- flex-wrap: wrap;
843
+ min-height: 0;
767
844
  }
768
845
 
769
846
  .cm-mirror-pane__option {
@@ -771,7 +848,8 @@
771
848
  align-items: center;
772
849
  justify-content: center;
773
850
  min-width: 0;
774
- min-height: clamp(1.75rem, 4.9cqi, 2.05rem);
851
+ min-height: var(--cm-mirror-option-min);
852
+ height: 100%;
775
853
  padding: 0 clamp(0.48rem, 1.45cqi, 0.68rem);
776
854
  color: hsl(var(--muted-foreground));
777
855
  cursor: pointer;
@@ -862,6 +940,83 @@
862
940
  }
863
941
  }
864
942
 
943
+ @container cm-mirror (max-height: 44rem) {
944
+ .cm-mirror-pane__body {
945
+ --cm-mirror-gap: clamp(0.28rem, 1cqi, 0.48rem);
946
+ --cm-mirror-pad: clamp(0.32rem, 1cqi, 0.5rem);
947
+ --cm-mirror-cell-min: clamp(1.62rem, 4cqb, 2.1rem);
948
+ --cm-mirror-option-min: clamp(1.42rem, 3.4cqb, 1.82rem);
949
+ }
950
+
951
+ .cm-mirror-pane__toolbar {
952
+ min-height: 2.6rem;
953
+ padding-block: 0.28rem;
954
+ }
955
+
956
+ .cm-mirror-pane__body {
957
+ gap: var(--cm-mirror-gap);
958
+ padding: clamp(0.42rem, 1.35cqi, 0.64rem);
959
+ }
960
+
961
+ .cm-mirror-pane__description {
962
+ padding: clamp(0.38rem, 1.1cqi, 0.52rem);
963
+ line-height: 1.26;
964
+ }
965
+
966
+ .cm-mirror-pane__section--compact {
967
+ padding: var(--cm-mirror-pad);
968
+ }
969
+ }
970
+
971
+ @container cm-mirror (max-height: 34rem) {
972
+ .cm-mirror-pane__body {
973
+ --cm-mirror-gap: 0.26rem;
974
+ --cm-mirror-pad: 0.32rem;
975
+ --cm-mirror-cell-min: 1.48rem;
976
+ --cm-mirror-option-min: 1.36rem;
977
+ }
978
+
979
+ .cm-mirror-pane__toolbar {
980
+ min-height: 2.25rem;
981
+ }
982
+
983
+ .cm-mirror-pane__toolbar-btn {
984
+ min-width: 1.85rem;
985
+ min-height: 1.85rem;
986
+ padding-inline: 0.46rem;
987
+ }
988
+
989
+ .cm-mirror-pane__body {
990
+ gap: 0.3rem;
991
+ padding: 0.38rem;
992
+ }
993
+
994
+ .cm-mirror-pane__header {
995
+ gap: 0.48rem;
996
+ }
997
+
998
+ .cm-mirror-pane__description {
999
+ font-size: 0.78rem;
1000
+ line-height: 1.2;
1001
+ padding: 0.34rem 0.42rem;
1002
+ }
1003
+
1004
+ .cm-mirror-pane__section-label,
1005
+ .cm-mirror-pane__tool-group-label,
1006
+ .cm-mirror-pane__kv-value,
1007
+ .cm-mirror-pane__field,
1008
+ .cm-mirror-pane__text-area,
1009
+ .cm-mirror-pane__param-description,
1010
+ .cm-mirror-pane__no-params {
1011
+ font-size: 0.74rem;
1012
+ }
1013
+
1014
+ .cm-mirror-pane__option {
1015
+ font-size: 0.66rem;
1016
+ padding-inline: 0.38rem;
1017
+ }
1018
+ }
1019
+
865
1020
  @container (max-width: 22rem) {
866
1021
  .cm-mirror-pane__model-icon-box {
867
1022
  display: none;
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.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";
2
+ export declare const mirrorStyles = "\n.cm-mirror-pane {\n container-name: cm-mirror;\n container-type: 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 --cm-mirror-gap: clamp(0.36rem, 1.25cqi, 0.6rem);\n --cm-mirror-main-gap: clamp(0.48rem, calc(1cqi + 0.7cqb), 1.08rem);\n --cm-mirror-main-pad: clamp(0.48rem, calc(0.72cqi + 0.42cqb), 0.78rem);\n --cm-mirror-pad: clamp(0.4rem, 1.25cqi, 0.6rem);\n --cm-mirror-cell-min: clamp(1.82rem, 4.4cqb, 2.45rem);\n --cm-mirror-option-min: clamp(1.55rem, 3.8cqb, 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 grid-template-rows: minmax(0, 1fr);\n align-items: stretch;\n height: 100%;\n min-width: 0;\n min-height: 0;\n overflow: hidden;\n}\n\n.cm-mirror-pane__body > .cm-mirror-pane__content:first-child:last-child {\n grid-row: 1 / -1;\n}\n\n.cm-mirror-pane__details,\n.cm-mirror-pane__custom-content {\n display: grid;\n grid-auto-rows: minmax(min-content, 1fr);\n gap: var(--cm-mirror-gap);\n height: 100%;\n min-width: 0;\n min-height: 0;\n align-content: stretch;\n align-items: stretch;\n overflow: hidden;\n}\n\n.cm-mirror-pane__details {\n grid-auto-rows: minmax(min-content, max-content);\n gap: var(--cm-mirror-main-gap);\n align-content: space-between;\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__details > .cm-mirror-pane__description {\n padding: var(--cm-mirror-main-pad);\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: stretch;\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: var(--cm-mirror-pad);\n}\n\n.cm-mirror-pane__details > .cm-mirror-pane__section--compact {\n padding: var(--cm-mirror-main-pad);\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 align-self: 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--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__section--custom,\n.cm-mirror-pane__section--param {\n align-items: start;\n}\n\n.cm-mirror-pane__section--custom > .cm-mirror-pane__section-label,\n.cm-mirror-pane__section--param > .cm-mirror-pane__section-label {\n align-self: start;\n padding-top: clamp(0.42rem, 1.25cqb, 0.64rem);\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: minmax(0, 1fr);\n gap: clamp(0.22rem, 0.8cqi, 0.34rem);\n height: 100%;\n min-width: 0;\n min-height: 0;\n align-content: stretch;\n align-items: stretch;\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: var(--cm-mirror-cell-min);\n height: 100%;\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 grid-template-rows: minmax(0, 1fr) auto;\n gap: clamp(0.24rem, 0.82cqi, 0.34rem);\n height: 100%;\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__details .cm-mirror-pane__kv-grid,\n.cm-mirror-pane__details .cm-mirror-pane__pricing-entries,\n.cm-mirror-pane__details .cm-mirror-pane__lane-grid {\n grid-auto-rows: minmax(var(--cm-mirror-cell-min), auto);\n height: auto;\n align-content: center;\n align-items: center;\n}\n\n.cm-mirror-pane__details .cm-mirror-pane__kv-row,\n.cm-mirror-pane__details .cm-mirror-pane__io-row,\n.cm-mirror-pane__details .cm-mirror-pane__pricing-header {\n height: auto;\n}\n\n.cm-mirror-pane__details .cm-mirror-pane__pricing-compact {\n grid-template-rows: auto auto;\n height: auto;\n align-content: center;\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 grid-template-rows: minmax(0, auto) auto;\n align-content: start;\n gap: clamp(0.28rem, 0.95cqi, 0.42rem);\n height: 100%;\n min-width: 0;\n min-height: 0;\n}\n\n.cm-mirror-pane__text-area {\n width: 100%;\n height: 100%;\n min-height: 0;\n max-height: none;\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: grid;\n grid-template-columns: repeat(auto-fit, minmax(min(100%, 4.5rem), 1fr));\n grid-auto-rows: minmax(var(--cm-mirror-option-min), auto);\n align-items: stretch;\n gap: clamp(0.24rem, 0.82cqi, 0.34rem);\n width: 100%;\n min-width: 0;\n min-height: 0;\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: var(--cm-mirror-option-min);\n height: 100%;\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 cm-mirror (max-height: 44rem) {\n .cm-mirror-pane__body {\n --cm-mirror-gap: clamp(0.28rem, 1cqi, 0.48rem);\n --cm-mirror-pad: clamp(0.32rem, 1cqi, 0.5rem);\n --cm-mirror-cell-min: clamp(1.62rem, 4cqb, 2.1rem);\n --cm-mirror-option-min: clamp(1.42rem, 3.4cqb, 1.82rem);\n }\n\n .cm-mirror-pane__toolbar {\n min-height: 2.6rem;\n padding-block: 0.28rem;\n }\n\n .cm-mirror-pane__body {\n gap: var(--cm-mirror-gap);\n padding: clamp(0.42rem, 1.35cqi, 0.64rem);\n }\n\n .cm-mirror-pane__description {\n padding: clamp(0.38rem, 1.1cqi, 0.52rem);\n line-height: 1.26;\n }\n\n .cm-mirror-pane__section--compact {\n padding: var(--cm-mirror-pad);\n }\n}\n\n@container cm-mirror (max-height: 34rem) {\n .cm-mirror-pane__body {\n --cm-mirror-gap: 0.26rem;\n --cm-mirror-pad: 0.32rem;\n --cm-mirror-cell-min: 1.48rem;\n --cm-mirror-option-min: 1.36rem;\n }\n\n .cm-mirror-pane__toolbar {\n min-height: 2.25rem;\n }\n\n .cm-mirror-pane__toolbar-btn {\n min-width: 1.85rem;\n min-height: 1.85rem;\n padding-inline: 0.46rem;\n }\n\n .cm-mirror-pane__body {\n gap: 0.3rem;\n padding: 0.38rem;\n }\n\n .cm-mirror-pane__header {\n gap: 0.48rem;\n }\n\n .cm-mirror-pane__description {\n font-size: 0.78rem;\n line-height: 1.2;\n padding: 0.34rem 0.42rem;\n }\n\n .cm-mirror-pane__section-label,\n .cm-mirror-pane__tool-group-label,\n .cm-mirror-pane__kv-value,\n .cm-mirror-pane__field,\n .cm-mirror-pane__text-area,\n .cm-mirror-pane__param-description,\n .cm-mirror-pane__no-params {\n font-size: 0.74rem;\n }\n\n .cm-mirror-pane__option {\n font-size: 0.66rem;\n padding-inline: 0.38rem;\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,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"}
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,+9yBA+hCxB,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
@@ -2,7 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
2
2
  import { cx } from "../internal/cx";
3
3
  export const mirrorStyles = /* css */ `
4
4
  .cm-mirror-pane {
5
- container-type: inline-size;
5
+ container-name: cm-mirror;
6
+ container-type: size;
6
7
  display: flex;
7
8
  flex-direction: column;
8
9
  width: 100%;
@@ -106,6 +107,12 @@ export const mirrorStyles = /* css */ `
106
107
 
107
108
  .cm-mirror-pane__body {
108
109
  --cm-mirror-logo: clamp(2.75rem, 7.2cqi, 3.2rem);
110
+ --cm-mirror-gap: clamp(0.36rem, 1.25cqi, 0.6rem);
111
+ --cm-mirror-main-gap: clamp(0.48rem, calc(1cqi + 0.7cqb), 1.08rem);
112
+ --cm-mirror-main-pad: clamp(0.48rem, calc(0.72cqi + 0.42cqb), 0.78rem);
113
+ --cm-mirror-pad: clamp(0.4rem, 1.25cqi, 0.6rem);
114
+ --cm-mirror-cell-min: clamp(1.82rem, 4.4cqb, 2.45rem);
115
+ --cm-mirror-option-min: clamp(1.55rem, 3.8cqb, 2rem);
109
116
  flex: 1 1 auto;
110
117
  display: grid;
111
118
  grid-template-rows: auto minmax(0, 1fr);
@@ -284,21 +291,37 @@ export const mirrorStyles = /* css */ `
284
291
 
285
292
  .cm-mirror-pane__content {
286
293
  display: grid;
294
+ grid-template-rows: minmax(0, 1fr);
295
+ align-items: stretch;
296
+ height: 100%;
287
297
  min-width: 0;
288
298
  min-height: 0;
289
299
  overflow: hidden;
290
300
  }
291
301
 
302
+ .cm-mirror-pane__body > .cm-mirror-pane__content:first-child:last-child {
303
+ grid-row: 1 / -1;
304
+ }
305
+
292
306
  .cm-mirror-pane__details,
293
307
  .cm-mirror-pane__custom-content {
294
308
  display: grid;
295
- gap: clamp(0.36rem, 1.25cqi, 0.6rem);
309
+ grid-auto-rows: minmax(min-content, 1fr);
310
+ gap: var(--cm-mirror-gap);
311
+ height: 100%;
296
312
  min-width: 0;
297
313
  min-height: 0;
298
- align-content: start;
314
+ align-content: stretch;
315
+ align-items: stretch;
299
316
  overflow: hidden;
300
317
  }
301
318
 
319
+ .cm-mirror-pane__details {
320
+ grid-auto-rows: minmax(min-content, max-content);
321
+ gap: var(--cm-mirror-main-gap);
322
+ align-content: space-between;
323
+ }
324
+
302
325
  .cm-mirror-pane__description,
303
326
  .cm-mirror-pane__section,
304
327
  .cm-mirror-pane__pricing-compact,
@@ -321,6 +344,10 @@ export const mirrorStyles = /* css */ `
321
344
  line-height: 1.34;
322
345
  }
323
346
 
347
+ .cm-mirror-pane__details > .cm-mirror-pane__description {
348
+ padding: var(--cm-mirror-main-pad);
349
+ }
350
+
324
351
  .cm-mirror-pane__description .cm-excerpt,
325
352
  .cm-mirror-pane__description .cm-excerpt__trigger,
326
353
  .cm-mirror-pane__description .cm-excerpt__text,
@@ -335,7 +362,7 @@ export const mirrorStyles = /* css */ `
335
362
  display: grid;
336
363
  grid-template-columns: clamp(4.8rem, 18cqi, 5.85rem) minmax(0, 1fr);
337
364
  grid-template-rows: auto;
338
- align-items: center;
365
+ align-items: stretch;
339
366
  gap: clamp(0.34rem, 1.1cqi, 0.5rem);
340
367
  min-width: 0;
341
368
  min-height: 0;
@@ -346,7 +373,11 @@ export const mirrorStyles = /* css */ `
346
373
  }
347
374
 
348
375
  .cm-mirror-pane__section--compact {
349
- padding: clamp(0.4rem, 1.25cqi, 0.6rem);
376
+ padding: var(--cm-mirror-pad);
377
+ }
378
+
379
+ .cm-mirror-pane__details > .cm-mirror-pane__section--compact {
380
+ padding: var(--cm-mirror-main-pad);
350
381
  }
351
382
 
352
383
  .cm-mirror-pane__section-label,
@@ -354,6 +385,7 @@ export const mirrorStyles = /* css */ `
354
385
  display: inline-flex;
355
386
  align-items: center;
356
387
  justify-content: flex-start;
388
+ align-self: center;
357
389
  min-width: 0;
358
390
  color: hsl(var(--muted-foreground));
359
391
  font-family: var(--font-mono), monospace;
@@ -413,6 +445,17 @@ export const mirrorStyles = /* css */ `
413
445
  color: hsl(var(--accent));
414
446
  }
415
447
 
448
+ .cm-mirror-pane__section--custom,
449
+ .cm-mirror-pane__section--param {
450
+ align-items: start;
451
+ }
452
+
453
+ .cm-mirror-pane__section--custom > .cm-mirror-pane__section-label,
454
+ .cm-mirror-pane__section--param > .cm-mirror-pane__section-label {
455
+ align-self: start;
456
+ padding-top: clamp(0.42rem, 1.25cqb, 0.64rem);
457
+ }
458
+
416
459
  .cm-mirror-pane__io-row,
417
460
  .cm-mirror-pane__kv-row,
418
461
  .cm-mirror-pane__pricing-header,
@@ -567,11 +610,13 @@ export const mirrorStyles = /* css */ `
567
610
  .cm-mirror-pane__lane-grid {
568
611
  display: grid;
569
612
  grid-template-columns: repeat(2, minmax(0, 1fr));
570
- grid-auto-rows: auto;
613
+ grid-auto-rows: minmax(0, 1fr);
571
614
  gap: clamp(0.22rem, 0.8cqi, 0.34rem);
615
+ height: 100%;
572
616
  min-width: 0;
573
617
  min-height: 0;
574
- align-content: start;
618
+ align-content: stretch;
619
+ align-items: stretch;
575
620
  }
576
621
 
577
622
  .cm-mirror-pane__kv-row,
@@ -582,7 +627,8 @@ export const mirrorStyles = /* css */ `
582
627
  align-items: center;
583
628
  gap: clamp(0.34rem, 1.05cqi, 0.48rem);
584
629
  min-width: 0;
585
- min-height: 0;
630
+ min-height: var(--cm-mirror-cell-min);
631
+ height: 100%;
586
632
  padding: clamp(0.3rem, 0.95cqi, 0.42rem) clamp(0.38rem, 1.2cqi, 0.52rem);
587
633
  border: 1px solid hsl(var(--primary) / 0.11);
588
634
  border-radius: 999px;
@@ -630,7 +676,9 @@ export const mirrorStyles = /* css */ `
630
676
  .cm-mirror-pane__pricing-block,
631
677
  .cm-mirror-pane__tool-group {
632
678
  display: grid;
679
+ grid-template-rows: minmax(0, 1fr) auto;
633
680
  gap: clamp(0.24rem, 0.82cqi, 0.34rem);
681
+ height: 100%;
634
682
  min-width: 0;
635
683
  min-height: 0;
636
684
  }
@@ -650,6 +698,27 @@ export const mirrorStyles = /* css */ `
650
698
  gap: clamp(0.22rem, 0.78cqi, 0.32rem);
651
699
  }
652
700
 
701
+ .cm-mirror-pane__details .cm-mirror-pane__kv-grid,
702
+ .cm-mirror-pane__details .cm-mirror-pane__pricing-entries,
703
+ .cm-mirror-pane__details .cm-mirror-pane__lane-grid {
704
+ grid-auto-rows: minmax(var(--cm-mirror-cell-min), auto);
705
+ height: auto;
706
+ align-content: center;
707
+ align-items: center;
708
+ }
709
+
710
+ .cm-mirror-pane__details .cm-mirror-pane__kv-row,
711
+ .cm-mirror-pane__details .cm-mirror-pane__io-row,
712
+ .cm-mirror-pane__details .cm-mirror-pane__pricing-header {
713
+ height: auto;
714
+ }
715
+
716
+ .cm-mirror-pane__details .cm-mirror-pane__pricing-compact {
717
+ grid-template-rows: auto auto;
718
+ height: auto;
719
+ align-content: center;
720
+ }
721
+
653
722
  .cm-mirror-pane__section--pricing > .cm-mirror-pane__pricing-compact {
654
723
  border: 0;
655
724
  background: transparent;
@@ -737,14 +806,19 @@ export const mirrorStyles = /* css */ `
737
806
 
738
807
  .cm-mirror-pane__param-body {
739
808
  display: grid;
809
+ grid-template-rows: minmax(0, auto) auto;
810
+ align-content: start;
740
811
  gap: clamp(0.28rem, 0.95cqi, 0.42rem);
812
+ height: 100%;
741
813
  min-width: 0;
814
+ min-height: 0;
742
815
  }
743
816
 
744
817
  .cm-mirror-pane__text-area {
745
818
  width: 100%;
746
- min-height: clamp(4.8rem, 18cqi, 6.9rem);
747
- max-height: clamp(5.4rem, 22cqi, 8rem);
819
+ height: 100%;
820
+ min-height: 0;
821
+ max-height: none;
748
822
  padding: clamp(0.54rem, 1.5cqi, 0.72rem);
749
823
  color: hsl(var(--foreground));
750
824
  font-family: var(--font-mono), monospace;
@@ -761,11 +835,14 @@ export const mirrorStyles = /* css */ `
761
835
  }
762
836
 
763
837
  .cm-mirror-pane__option-grid {
764
- display: flex;
765
- align-items: center;
838
+ display: grid;
839
+ grid-template-columns: repeat(auto-fit, minmax(min(100%, 4.5rem), 1fr));
840
+ grid-auto-rows: minmax(var(--cm-mirror-option-min), auto);
841
+ align-items: stretch;
766
842
  gap: clamp(0.24rem, 0.82cqi, 0.34rem);
843
+ width: 100%;
767
844
  min-width: 0;
768
- flex-wrap: wrap;
845
+ min-height: 0;
769
846
  }
770
847
 
771
848
  .cm-mirror-pane__option {
@@ -773,7 +850,8 @@ export const mirrorStyles = /* css */ `
773
850
  align-items: center;
774
851
  justify-content: center;
775
852
  min-width: 0;
776
- min-height: clamp(1.75rem, 4.9cqi, 2.05rem);
853
+ min-height: var(--cm-mirror-option-min);
854
+ height: 100%;
777
855
  padding: 0 clamp(0.48rem, 1.45cqi, 0.68rem);
778
856
  color: hsl(var(--muted-foreground));
779
857
  cursor: pointer;
@@ -864,6 +942,83 @@ export const mirrorStyles = /* css */ `
864
942
  }
865
943
  }
866
944
 
945
+ @container cm-mirror (max-height: 44rem) {
946
+ .cm-mirror-pane__body {
947
+ --cm-mirror-gap: clamp(0.28rem, 1cqi, 0.48rem);
948
+ --cm-mirror-pad: clamp(0.32rem, 1cqi, 0.5rem);
949
+ --cm-mirror-cell-min: clamp(1.62rem, 4cqb, 2.1rem);
950
+ --cm-mirror-option-min: clamp(1.42rem, 3.4cqb, 1.82rem);
951
+ }
952
+
953
+ .cm-mirror-pane__toolbar {
954
+ min-height: 2.6rem;
955
+ padding-block: 0.28rem;
956
+ }
957
+
958
+ .cm-mirror-pane__body {
959
+ gap: var(--cm-mirror-gap);
960
+ padding: clamp(0.42rem, 1.35cqi, 0.64rem);
961
+ }
962
+
963
+ .cm-mirror-pane__description {
964
+ padding: clamp(0.38rem, 1.1cqi, 0.52rem);
965
+ line-height: 1.26;
966
+ }
967
+
968
+ .cm-mirror-pane__section--compact {
969
+ padding: var(--cm-mirror-pad);
970
+ }
971
+ }
972
+
973
+ @container cm-mirror (max-height: 34rem) {
974
+ .cm-mirror-pane__body {
975
+ --cm-mirror-gap: 0.26rem;
976
+ --cm-mirror-pad: 0.32rem;
977
+ --cm-mirror-cell-min: 1.48rem;
978
+ --cm-mirror-option-min: 1.36rem;
979
+ }
980
+
981
+ .cm-mirror-pane__toolbar {
982
+ min-height: 2.25rem;
983
+ }
984
+
985
+ .cm-mirror-pane__toolbar-btn {
986
+ min-width: 1.85rem;
987
+ min-height: 1.85rem;
988
+ padding-inline: 0.46rem;
989
+ }
990
+
991
+ .cm-mirror-pane__body {
992
+ gap: 0.3rem;
993
+ padding: 0.38rem;
994
+ }
995
+
996
+ .cm-mirror-pane__header {
997
+ gap: 0.48rem;
998
+ }
999
+
1000
+ .cm-mirror-pane__description {
1001
+ font-size: 0.78rem;
1002
+ line-height: 1.2;
1003
+ padding: 0.34rem 0.42rem;
1004
+ }
1005
+
1006
+ .cm-mirror-pane__section-label,
1007
+ .cm-mirror-pane__tool-group-label,
1008
+ .cm-mirror-pane__kv-value,
1009
+ .cm-mirror-pane__field,
1010
+ .cm-mirror-pane__text-area,
1011
+ .cm-mirror-pane__param-description,
1012
+ .cm-mirror-pane__no-params {
1013
+ font-size: 0.74rem;
1014
+ }
1015
+
1016
+ .cm-mirror-pane__option {
1017
+ font-size: 0.66rem;
1018
+ padding-inline: 0.38rem;
1019
+ }
1020
+ }
1021
+
867
1022
  @container (max-width: 22rem) {
868
1023
  .cm-mirror-pane__model-icon-box {
869
1024
  display: none;
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.10",
3
+ "version": "0.1.12",
4
4
  "description": "Official design tokens and theme system for Compose.Market",
5
5
  "keywords": [
6
6
  "design-tokens",