@compose-market/theme 0.1.9 → 0.1.11

package/dist/css/mirror.css

@@ -1,6 +1,7 @@
 
 .cm-mirror-pane {
-  container-type: inline-size;
+  container-name: cm-mirror;
+  container-type: size;
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -103,16 +104,20 @@
 }
 
 .cm-mirror-pane__body {
-  --cm-mirror-logo: clamp(2.85rem, 7.2cqi, 3.15rem);
+  --cm-mirror-logo: clamp(2.75rem, 7.2cqi, 3.2rem);
+  --cm-mirror-gap: clamp(0.36rem, 1.25cqi, 0.6rem);
+  --cm-mirror-pad: clamp(0.4rem, 1.25cqi, 0.6rem);
+  --cm-mirror-cell-min: clamp(1.82rem, 4.4cqb, 2.45rem);
+  --cm-mirror-option-min: clamp(1.55rem, 3.8cqb, 2rem);
   flex: 1 1 auto;
   display: grid;
   grid-template-rows: auto minmax(0, 1fr);
   align-content: stretch;
-  gap: clamp(0.42rem, 1.45cqi, 0.68rem);
+  gap: clamp(0.42rem, 1.6cqi, 0.72rem);
   min-width: 0;
   min-height: 0;
   overflow: hidden;
-  padding: clamp(0.52rem, 1.65cqi, 0.78rem);
+  padding: clamp(0.52rem, 1.7cqi, 0.82rem);
 }
 
 .cm-mirror-pane__header {
@@ -223,9 +228,8 @@
   gap: 0.24rem;
   min-width: 0;
   max-width: 100%;
-  min-height: 1.32rem;
-  max-height: 1.32rem;
-  padding: 0 0.42rem;
+  min-height: clamp(1.22rem, 3.4cqi, 1.38rem);
+  padding: 0 clamp(0.34rem, 1.1cqi, 0.46rem);
   border: 1px solid hsl(var(--accent) / 0.24);
   border-radius: 999px;
   background: hsl(var(--accent) / 0.1);
@@ -283,18 +287,28 @@
 
 .cm-mirror-pane__content {
   display: grid;
+  grid-template-rows: minmax(0, 1fr);
+  align-items: stretch;
+  height: 100%;
   min-width: 0;
   min-height: 0;
   overflow: hidden;
 }
 
+.cm-mirror-pane__body > .cm-mirror-pane__content:first-child:last-child {
+  grid-row: 1 / -1;
+}
+
 .cm-mirror-pane__details,
 .cm-mirror-pane__custom-content {
   display: grid;
-  gap: clamp(0.38rem, 1.25cqi, 0.58rem);
+  grid-auto-rows: minmax(min-content, 1fr);
+  gap: var(--cm-mirror-gap);
+  height: 100%;
   min-width: 0;
   min-height: 0;
-  align-content: start;
+  align-content: stretch;
+  align-items: stretch;
   overflow: hidden;
 }
 
@@ -305,7 +319,8 @@
 .cm-mirror-pane__tool-group,
 .cm-mirror-pane__no-params,
 .cm-mirror-pane__text-area,
-.cm-mirror-pane__field {
+.cm-mirror-pane__field,
+.cm-mirror-pane__option {
   border: 1px solid hsl(var(--primary) / 0.12);
   border-radius: 12px;
   background: hsl(221 50% 9% / 0.3);
@@ -331,24 +346,28 @@
 
 .cm-mirror-pane__section {
   display: grid;
-  grid-template-columns: minmax(3.6rem, 4.85rem) minmax(0, 1fr);
-  grid-template-rows: minmax(2.25rem, auto);
-  align-items: center;
-  gap: 0.4rem;
+  grid-template-columns: clamp(4.8rem, 18cqi, 5.85rem) minmax(0, 1fr);
+  grid-template-rows: auto;
+  align-items: stretch;
+  gap: clamp(0.34rem, 1.1cqi, 0.5rem);
   min-width: 0;
   min-height: 0;
   overflow: hidden;
+  box-shadow:
+    inset 0 1px 0 hsl(0 0% 100% / 0.035),
+    0 0 18px hsl(var(--primary) / 0.035);
 }
 
 .cm-mirror-pane__section--compact {
-  padding: clamp(0.42rem, 1.25cqi, 0.58rem);
+  padding: var(--cm-mirror-pad);
 }
 
 .cm-mirror-pane__section-label,
 .cm-mirror-pane__tool-group-label {
   display: inline-flex;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-start;
+  align-self: center;
   min-width: 0;
   color: hsl(var(--muted-foreground));
   font-family: var(--font-mono), monospace;
@@ -367,10 +386,56 @@
   letter-spacing: 0;
 }
 
-.cm-mirror-pane__section--io {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 0.44rem;
-  align-items: stretch;
+.cm-mirror-pane__section--capability {
+  border-color: hsl(var(--primary) / 0.22);
+  background:
+    linear-gradient(135deg, hsl(var(--primary) / 0.1), transparent 42%),
+    hsl(221 50% 9% / 0.3);
+}
+
+.cm-mirror-pane__section--context {
+  border-color: hsl(142 71% 45% / 0.18);
+  background:
+    linear-gradient(135deg, hsl(142 71% 45% / 0.08), transparent 44%),
+    hsl(221 50% 9% / 0.28);
+}
+
+.cm-mirror-pane__section--pricing {
+  border-color: hsl(var(--accent) / 0.2);
+  background:
+    linear-gradient(135deg, hsl(var(--accent) / 0.09), transparent 44%),
+    hsl(221 50% 9% / 0.3);
+}
+
+.cm-mirror-pane__section--custom,
+.cm-mirror-pane__section--param {
+  border-color: hsl(var(--primary) / 0.16);
+  background:
+    linear-gradient(135deg, hsl(var(--primary) / 0.065), hsl(var(--accent) / 0.045)),
+    hsl(221 50% 9% / 0.3);
+}
+
+.cm-mirror-pane__section--capability .cm-mirror-pane__section-label {
+  color: hsl(var(--primary));
+}
+
+.cm-mirror-pane__section--context .cm-mirror-pane__section-label {
+  color: hsl(142 71% 58%);
+}
+
+.cm-mirror-pane__section--pricing .cm-mirror-pane__section-label {
+  color: hsl(var(--accent));
+}
+
+.cm-mirror-pane__section--custom,
+.cm-mirror-pane__section--param {
+  align-items: start;
+}
+
+.cm-mirror-pane__section--custom > .cm-mirror-pane__section-label,
+.cm-mirror-pane__section--param > .cm-mirror-pane__section-label {
+  align-self: start;
+  padding-top: clamp(0.42rem, 1.25cqb, 0.64rem);
 }
 
 .cm-mirror-pane__io-row,
@@ -378,14 +443,14 @@
 .cm-mirror-pane__pricing-header,
 .cm-mirror-pane__tool-toggle {
   min-width: 0;
-  min-height: 1.8rem;
+  min-height: 0;
 }
 
 .cm-mirror-pane__io-row {
   display: grid;
-  grid-template-columns: 1.55rem minmax(0, 1fr);
+  grid-template-columns: auto minmax(0, 1fr);
   align-items: center;
-  gap: 0.42rem;
+  gap: clamp(0.34rem, 1.05cqi, 0.46rem);
   min-width: 0;
 }
 
@@ -408,7 +473,7 @@
   display: flex;
   align-items: center;
   justify-content: flex-start;
-  gap: 0.28rem;
+  gap: clamp(0.2rem, 0.8cqi, 0.3rem);
   min-width: 0;
   flex-wrap: wrap;
 }
@@ -421,9 +486,9 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 1.22rem;
-  height: 1.22rem;
-  min-width: 1.22rem;
+  width: clamp(1.32rem, 3.8cqi, 1.5rem);
+  height: clamp(1.32rem, 3.8cqi, 1.5rem);
+  min-width: clamp(1.32rem, 3.8cqi, 1.5rem);
   border: 1px solid hsl(var(--primary) / 0.22);
   border-radius: 999px;
   background: hsl(var(--primary) / 0.08);
@@ -431,32 +496,32 @@
 }
 
 .cm-mirror-pane__icon-label--section {
-  width: 1.62rem;
-  height: 1.62rem;
-  min-width: 1.62rem;
+  width: clamp(1.58rem, 4.6cqi, 1.78rem);
+  height: clamp(1.58rem, 4.6cqi, 1.78rem);
+  min-width: clamp(1.58rem, 4.6cqi, 1.78rem);
   border-color: hsl(var(--primary) / 0.32);
   background: hsl(var(--primary) / 0.1);
 }
 
 .cm-mirror-pane__icon-svg {
-  width: 0.72rem;
-  height: 0.72rem;
+  width: clamp(0.78rem, 2.25cqi, 0.9rem);
+  height: clamp(0.78rem, 2.25cqi, 0.9rem);
 }
 
 .cm-mirror-pane__icon-label--section .cm-mirror-pane__icon-svg {
-  width: 0.98rem;
-  height: 0.98rem;
+  width: clamp(0.96rem, 2.85cqi, 1.08rem);
+  height: clamp(0.96rem, 2.85cqi, 1.08rem);
 }
 
-.cm-mirror-pane__badge {
+.cm-mirror-pane__badge,
+.cm-mirror-pane__format-badge {
   display: inline-grid;
   grid-template-columns: auto minmax(0, 1fr);
   align-items: center;
   justify-content: center;
   gap: 0.24rem;
   min-width: 0;
-  min-height: 1.36rem;
-  max-height: 1.36rem;
+  min-height: clamp(1.2rem, 3.2cqi, 1.36rem);
   max-width: 100%;
   border: 1px solid hsl(var(--primary) / 0.18);
   border-radius: 999px;
@@ -474,6 +539,15 @@
   text-overflow: ellipsis;
 }
 
+.cm-mirror-pane__format-badge {
+  grid-template-columns: auto;
+  width: clamp(1.34rem, 3.65cqi, 1.48rem);
+  min-width: clamp(1.34rem, 3.65cqi, 1.48rem);
+  min-height: clamp(1.34rem, 3.65cqi, 1.48rem);
+  padding: 0;
+  border-radius: 999px;
+}
+
 .cm-mirror-pane__badge > span:last-child {
   min-width: 0;
   overflow: hidden;
@@ -482,18 +556,20 @@
 }
 
 .cm-mirror-pane__format-icon {
-  width: 0.72rem;
-  height: 0.72rem;
+  width: clamp(0.64rem, 1.85cqi, 0.74rem);
+  height: clamp(0.64rem, 1.85cqi, 0.74rem);
   flex: 0 0 auto;
 }
 
-.cm-mirror-pane__badge[data-tone="fuchsia"] {
+.cm-mirror-pane__badge[data-tone="fuchsia"],
+.cm-mirror-pane__format-badge[data-tone="fuchsia"] {
   border-color: hsl(var(--accent) / 0.24);
   background: hsl(var(--accent) / 0.1);
   color: hsl(var(--accent));
 }
 
-.cm-mirror-pane__badge[data-tone="green"] {
+.cm-mirror-pane__badge[data-tone="green"],
+.cm-mirror-pane__format-badge[data-tone="green"] {
   border-color: hsl(142 71% 45% / 0.28);
   background: hsl(142 71% 45% / 0.1);
   color: hsl(142 71% 55%);
@@ -512,28 +588,35 @@
 }
 
 .cm-mirror-pane__kv-grid,
-.cm-mirror-pane__pricing-entries {
+.cm-mirror-pane__pricing-entries,
+.cm-mirror-pane__lane-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
-  grid-auto-rows: minmax(1.58rem, auto);
-  gap: 0.24rem;
+  grid-auto-rows: minmax(0, 1fr);
+  gap: clamp(0.22rem, 0.8cqi, 0.34rem);
+  height: 100%;
   min-width: 0;
   min-height: 0;
-  align-content: start;
+  align-content: stretch;
+  align-items: stretch;
 }
 
 .cm-mirror-pane__kv-row,
+.cm-mirror-pane__io-row,
 .cm-mirror-pane__pricing-header {
   display: grid;
   grid-template-columns: auto minmax(0, 1fr);
   align-items: center;
-  gap: 0.38rem;
+  gap: clamp(0.34rem, 1.05cqi, 0.48rem);
   min-width: 0;
-  min-height: 2.05rem;
-  padding: 0.34rem 0.46rem;
+  min-height: var(--cm-mirror-cell-min);
+  height: 100%;
+  padding: clamp(0.3rem, 0.95cqi, 0.42rem) clamp(0.38rem, 1.2cqi, 0.52rem);
   border: 1px solid hsl(var(--primary) / 0.11);
   border-radius: 999px;
-  background: hsl(221 50% 9% / 0.34);
+  background:
+    linear-gradient(180deg, hsl(0 0% 100% / 0.035), transparent),
+    hsl(221 50% 9% / 0.36);
 }
 
 .cm-mirror-pane__kv-value {
@@ -575,7 +658,9 @@
 .cm-mirror-pane__pricing-block,
 .cm-mirror-pane__tool-group {
   display: grid;
-  gap: 0.28rem;
+  grid-template-rows: minmax(0, 1fr) auto;
+  gap: clamp(0.24rem, 0.82cqi, 0.34rem);
+  height: 100%;
   min-width: 0;
   min-height: 0;
 }
@@ -586,12 +671,13 @@
 
 .cm-mirror-pane__pricing-block,
 .cm-mirror-pane__tool-group {
-  padding: 0.5rem 0.58rem;
+  padding: clamp(0.42rem, 1.2cqi, 0.58rem);
 }
 
 .cm-mirror-pane__section--context .cm-mirror-pane__kv-grid,
-.cm-mirror-pane__section--pricing .cm-mirror-pane__pricing-entries {
-  gap: 0.22rem;
+.cm-mirror-pane__section--pricing .cm-mirror-pane__pricing-entries,
+.cm-mirror-pane__section--capability .cm-mirror-pane__lane-grid {
+  gap: clamp(0.22rem, 0.78cqi, 0.32rem);
 }
 
 .cm-mirror-pane__section--pricing > .cm-mirror-pane__pricing-compact {
@@ -670,33 +756,106 @@
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
   align-items: center;
-  gap: 0.58rem;
+  gap: clamp(0.36rem, 1.05cqi, 0.58rem);
 }
 
 .cm-mirror-pane__custom-section {
   display: grid;
-  gap: 0.42rem;
+  gap: clamp(0.34rem, 1cqi, 0.46rem);
   min-width: 0;
 }
 
+.cm-mirror-pane__param-body {
+  display: grid;
+  grid-template-rows: minmax(0, auto) auto;
+  align-content: start;
+  gap: clamp(0.28rem, 0.95cqi, 0.42rem);
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+}
+
 .cm-mirror-pane__text-area {
   width: 100%;
-  min-height: 7rem;
-  padding: 0.72rem;
+  height: 100%;
+  min-height: 0;
+  max-height: none;
+  padding: clamp(0.54rem, 1.5cqi, 0.72rem);
   color: hsl(var(--foreground));
   font-family: var(--font-mono), monospace;
   font-size: 0.86rem;
-  resize: vertical;
+  resize: none;
 }
 
 .cm-mirror-pane__field {
   width: 100%;
-  min-height: 2.45rem;
+  min-height: clamp(2.05rem, 5.4cqi, 2.45rem);
   color: hsl(var(--foreground));
   font-family: var(--font-mono), monospace;
   font-size: 0.86rem;
 }
 
+.cm-mirror-pane__option-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 4.5rem), 1fr));
+  grid-auto-rows: minmax(var(--cm-mirror-option-min), auto);
+  align-items: stretch;
+  gap: clamp(0.24rem, 0.82cqi, 0.34rem);
+  width: 100%;
+  min-width: 0;
+  min-height: 0;
+}
+
+.cm-mirror-pane__option {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 0;
+  min-height: var(--cm-mirror-option-min);
+  height: 100%;
+  padding: 0 clamp(0.48rem, 1.45cqi, 0.68rem);
+  color: hsl(var(--muted-foreground));
+  cursor: pointer;
+  font-family: var(--font-mono), monospace;
+  font-size: 0.72rem;
+  font-weight: 800;
+  letter-spacing: 0.05em;
+  line-height: 1;
+  text-transform: uppercase;
+  transition:
+    border-color 160ms ease,
+    background-color 160ms ease,
+    color 160ms ease,
+    box-shadow 160ms ease;
+}
+
+.cm-mirror-pane__option[data-active="true"] {
+  border-color: hsl(var(--primary) / 0.34);
+  background: hsl(var(--primary) / 0.12);
+  color: hsl(var(--primary));
+  box-shadow: 0 0 14px hsl(var(--primary) / 0.1);
+}
+
+.cm-mirror-pane__option:hover,
+.cm-mirror-pane__option:focus-visible {
+  outline: none;
+  border-color: hsl(var(--primary) / 0.3);
+  color: hsl(var(--foreground));
+}
+
+.cm-mirror-pane__option .cm-hint,
+.cm-mirror-pane__option .cm-hint__trigger {
+  max-width: 100%;
+  min-width: 0;
+}
+
+.cm-mirror-pane__option span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .cm-mirror-pane__field:focus,
 .cm-mirror-pane__field:focus-visible,
 .cm-mirror-pane__text-area:focus,
@@ -714,6 +873,16 @@
   line-height: 1.4;
 }
 
+.cm-mirror-pane__param-description,
+.cm-mirror-pane__param-description .cm-excerpt,
+.cm-mirror-pane__param-description .cm-excerpt__trigger,
+.cm-mirror-pane__param-description .cm-excerpt__text,
+.cm-mirror-pane__param-description .cm-hint,
+.cm-mirror-pane__param-description .cm-hint__trigger {
+  width: 100%;
+  min-width: 0;
+}
+
 .cm-mirror-pane__no-params {
   padding: 1rem;
   text-align: center;
@@ -721,12 +890,12 @@
 
 @container (max-width: 28rem) {
   .cm-mirror-pane__body {
-    gap: 0.54rem;
-    padding: 0.62rem;
+    gap: clamp(0.38rem, 1.35cqi, 0.54rem);
+    padding: clamp(0.48rem, 1.45cqi, 0.62rem);
   }
 
-  .cm-mirror-pane__section--io {
-    grid-template-columns: minmax(0, 1fr);
+  .cm-mirror-pane__section {
+    grid-template-columns: clamp(4.55rem, 21cqi, 5.45rem) minmax(0, 1fr);
   }
 
   .cm-mirror-pane__io-badges {
@@ -734,6 +903,83 @@
   }
 }
 
+@container cm-mirror (max-height: 44rem) {
+  .cm-mirror-pane__body {
+    --cm-mirror-gap: clamp(0.28rem, 1cqi, 0.48rem);
+    --cm-mirror-pad: clamp(0.32rem, 1cqi, 0.5rem);
+    --cm-mirror-cell-min: clamp(1.62rem, 4cqb, 2.1rem);
+    --cm-mirror-option-min: clamp(1.42rem, 3.4cqb, 1.82rem);
+  }
+
+  .cm-mirror-pane__toolbar {
+    min-height: 2.6rem;
+    padding-block: 0.28rem;
+  }
+
+  .cm-mirror-pane__body {
+    gap: var(--cm-mirror-gap);
+    padding: clamp(0.42rem, 1.35cqi, 0.64rem);
+  }
+
+  .cm-mirror-pane__description {
+    padding: clamp(0.38rem, 1.1cqi, 0.52rem);
+    line-height: 1.26;
+  }
+
+  .cm-mirror-pane__section--compact {
+    padding: var(--cm-mirror-pad);
+  }
+}
+
+@container cm-mirror (max-height: 34rem) {
+  .cm-mirror-pane__body {
+    --cm-mirror-gap: 0.26rem;
+    --cm-mirror-pad: 0.32rem;
+    --cm-mirror-cell-min: 1.48rem;
+    --cm-mirror-option-min: 1.36rem;
+  }
+
+  .cm-mirror-pane__toolbar {
+    min-height: 2.25rem;
+  }
+
+  .cm-mirror-pane__toolbar-btn {
+    min-width: 1.85rem;
+    min-height: 1.85rem;
+    padding-inline: 0.46rem;
+  }
+
+  .cm-mirror-pane__body {
+    gap: 0.3rem;
+    padding: 0.38rem;
+  }
+
+  .cm-mirror-pane__header {
+    gap: 0.48rem;
+  }
+
+  .cm-mirror-pane__description {
+    font-size: 0.78rem;
+    line-height: 1.2;
+    padding: 0.34rem 0.42rem;
+  }
+
+  .cm-mirror-pane__section-label,
+  .cm-mirror-pane__tool-group-label,
+  .cm-mirror-pane__kv-value,
+  .cm-mirror-pane__field,
+  .cm-mirror-pane__text-area,
+  .cm-mirror-pane__param-description,
+  .cm-mirror-pane__no-params {
+    font-size: 0.74rem;
+  }
+
+  .cm-mirror-pane__option {
+    font-size: 0.66rem;
+    padding-inline: 0.38rem;
+  }
+}
+
 @container (max-width: 22rem) {
   .cm-mirror-pane__model-icon-box {
     display: none;
@@ -743,6 +989,21 @@
     grid-template-columns: minmax(0, 1fr);
   }
 
+  .cm-mirror-pane__section {
+    grid-template-columns: minmax(0, 1fr);
+    align-items: start;
+  }
+
+  .cm-mirror-pane__section-label {
+    margin-bottom: -0.1rem;
+  }
+
+  .cm-mirror-pane__kv-grid,
+  .cm-mirror-pane__pricing-entries,
+  .cm-mirror-pane__lane-grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
   .cm-mirror-pane__tool-toggle {
     grid-template-columns: minmax(0, 1fr);
     align-items: start;