@compose-market/theme 0.0.94 → 0.0.96

package/dist/css/shell.css

@@ -222,6 +222,18 @@
   pointer-events: none;
 }
 
+.cm-app-chrome__navgroup,
+.cm-app-chrome__navutility {
+  display: grid;
+  gap: var(--cm-chrome-gap);
+  pointer-events: none;
+}
+
+.cm-app-chrome__navutility {
+  margin-top: clamp(0.45rem, 1vw, 0.7rem);
+  padding-top: clamp(0.45rem, 1vw, 0.7rem);
+}
+
 .cm-app-chrome__navitem,
 .cm-hud-button {
   position: relative;
@@ -258,20 +270,21 @@
 .cm-app-chrome__navitem::before {
   content: "";
   position: absolute;
-  inset-inline-start: -0.28rem;
-  top: 50%;
-  width: 0.17rem;
-  height: 48%;
+  inset: -0.18rem;
   border-radius: 999px;
-  background: linear-gradient(180deg, hsl(var(--primary)), hsl(var(--accent)));
+  background:
+    radial-gradient(circle at 50% 18%, hsl(var(--primary) / 0.28), transparent 46%),
+    radial-gradient(circle at 50% 86%, hsl(var(--accent) / 0.18), transparent 42%);
   box-shadow:
-    0 0 12px hsl(var(--primary) / 0.72),
-    0 0 18px hsl(var(--accent) / 0.35);
+    0 0 0 1px hsl(var(--primary) / 0.42),
+    0 0 18px hsl(var(--primary) / 0.2),
+    0 0 22px hsl(var(--accent) / 0.1);
   opacity: 0;
-  transform: translateY(-50%) scaleY(0.45);
+  transform: scale(0.72);
   transition:
     opacity 180ms ease,
     transform 180ms ease;
+  pointer-events: none;
 }
 
 .cm-app-chrome__navitem:hover,
@@ -293,11 +306,15 @@
 .cm-app-chrome__navitem[data-active="true"] {
   color: hsl(var(--primary));
   border-color: hsl(var(--primary) / 0.52);
+  background:
+    radial-gradient(circle at 30% 14%, hsl(var(--primary) / 0.24), transparent 42%),
+    radial-gradient(circle at 78% 90%, hsl(var(--accent) / 0.18), transparent 44%),
+    linear-gradient(145deg, hsl(226 21% 25% / 0.58), hsl(221 50% 9% / 0.48));
 }
 
 .cm-app-chrome__navitem[data-active="true"]::before {
   opacity: 1;
-  transform: translateY(-50%) scaleY(1);
+  transform: scale(1);
 }
 
 .cm-app-chrome__navitem-icon,
@@ -358,7 +375,7 @@
 .cm-app-chrome__hud-group {
   container-type: inline-size;
   display: flex;
-  max-width: min(100%, 68rem);
+  width: min(100%, 68rem);
   min-width: 0;
   align-items: center;
   justify-content: flex-end;
@@ -368,18 +385,28 @@
 }
 
 .cm-app-chrome__hud-item,
-.cm-app-chrome__hud-fold {
+.cm-app-chrome__hud-fold,
+.cm-app-chrome__search {
   position: relative;
   min-width: max-content;
   flex: 0 0 auto;
 }
 
+.cm-app-chrome__search {
+  display: inline-flex;
+  min-width: var(--cm-hud-size);
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--cm-chrome-gap);
+}
+
 .cm-app-chrome__hud-item[data-priority="low"] {
   flex-shrink: 0;
 }
 
 .cm-hud-button {
   display: inline-flex;
+  align-items: center;
   width: auto;
   max-width: min(15.5rem, 52vw);
   justify-content: center;
@@ -419,6 +446,47 @@
   max-width: 8.8rem;
 }
 
+.cm-hud-wallet {
+  min-width: min(13.75rem, 42vw);
+  justify-content: flex-start;
+  padding-inline: 0.82rem 0.74rem;
+  background:
+    radial-gradient(circle at 14% 50%, hsl(var(--primary) / 0.18), transparent 34%),
+    radial-gradient(circle at 86% 100%, hsl(var(--accent) / 0.12), transparent 40%),
+    linear-gradient(145deg, hsl(226 21% 22% / 0.58), hsl(221 50% 8% / 0.48));
+}
+
+.cm-hud-wallet__icon {
+  color: hsl(var(--primary));
+  opacity: 0.92;
+}
+
+.cm-hud-wallet .cm-hud-value {
+  color: hsl(var(--foreground));
+  font-family: var(--font-display), sans-serif;
+  font-size: 0.76rem;
+  letter-spacing: 0.05em;
+}
+
+.cm-hud-wallet .cm-hud-address {
+  color: hsl(var(--primary) / 0.9);
+  font-size: 0.68rem;
+  font-weight: 650;
+  letter-spacing: 0.04em;
+}
+
+.cm-app-chrome__navselect {
+  width: var(--cm-hud-size);
+  min-width: var(--cm-hud-size);
+  max-width: var(--cm-hud-size);
+  padding-inline: 0;
+  pointer-events: auto;
+}
+
+.cm-app-chrome__navselect .cm-hud-value {
+  display: none;
+}
+
 .cm-hud-status {
   width: 0.48rem;
   height: 0.48rem;
@@ -534,6 +602,34 @@
   box-shadow: inset 0 0 20px hsl(var(--primary) / 0.04);
 }
 
+.cm-search--hud {
+  width: 0;
+  max-width: min(24rem, calc(100vw - var(--cm-chrome-safe) * 2 - var(--cm-hud-size)));
+  min-height: var(--cm-hud-size);
+  padding-inline: 0;
+  border-width: 0;
+  opacity: 0;
+  overflow: hidden;
+  pointer-events: none;
+  transform: scaleX(0.92);
+  transform-origin: right center;
+  transition:
+    width 180ms ease,
+    padding-inline 180ms ease,
+    opacity 150ms ease,
+    transform 180ms ease,
+    border-color 180ms ease;
+}
+
+.cm-app-chrome__search[data-open="true"] .cm-search--hud {
+  width: clamp(13rem, 29vw, 24rem);
+  padding-inline: 0.85rem;
+  border-width: 1px;
+  opacity: 1;
+  pointer-events: auto;
+  transform: scaleX(1);
+}
+
 .cm-search input,
 .cm-search__input {
   min-width: 0;
@@ -843,17 +939,27 @@
 }
 
 @container (max-width: 31rem) {
-  .cm-app-chrome__hud-item[data-priority="medium"] .cm-hud-value,
   .cm-app-chrome__hud-item[data-priority="medium"] .cm-hud-address,
   .cm-app-chrome__hud-item[data-priority="medium"] .cm-hud-label {
     display: none;
   }
 
-  .cm-app-chrome__hud-item[data-priority="medium"] .cm-hud-button,
-  .cm-app-chrome__hud-item[data-priority="medium"] .cm-session-trigger {
+  .cm-app-chrome__hud-item[data-priority="medium"] .cm-hud-wallet .cm-hud-value {
+    display: none;
+  }
+
+  .cm-app-chrome__hud-item[data-priority="medium"] .cm-hud-wallet {
     width: var(--cm-hud-size);
+    min-width: var(--cm-hud-size);
     padding-inline: 0;
   }
+
+  .cm-app-chrome__hud-item[data-priority="medium"] .cm-session-trigger {
+    width: auto;
+    min-width: max-content;
+    max-width: min(12rem, 58vw);
+    padding-inline: 0.72rem;
+  }
 }
 
 @media (max-width: 820px) {
@@ -884,11 +990,12 @@
   }
 
   .cm-app-chrome__hud-group {
-    max-width: min(100%, 100vw - var(--cm-chrome-safe) * 2);
+    width: min(100%, calc(100vw - var(--cm-chrome-safe) * 2));
   }
 
   .cm-app-chrome__hud-item,
-  .cm-app-chrome__hud-fold {
+  .cm-app-chrome__hud-fold,
+  .cm-app-chrome__search {
     min-width: auto;
   }
 
@@ -908,21 +1015,30 @@
     display: none;
   }
 
+  .cm-app-chrome__navgroup,
+  .cm-app-chrome__navutility {
+    display: flex;
+    gap: var(--cm-chrome-gap);
+  }
+
+  .cm-app-chrome__navutility {
+    margin-top: 0;
+    padding-top: 0;
+  }
+
   .cm-app-chrome__navitem {
     flex: 0 0 auto;
   }
 
   .cm-app-chrome__navitem::before {
-    inset-inline-start: 50%;
-    top: auto;
-    bottom: -0.22rem;
-    width: 46%;
-    height: 0.16rem;
-    transform: translateX(-50%) scaleX(0.45);
+    inset: -0.16rem;
+    width: auto;
+    height: auto;
+    transform: scale(0.72);
   }
 
   .cm-app-chrome__navitem[data-active="true"]::before {
-    transform: translateX(-50%) scaleX(1);
+    transform: scale(1);
   }
 
   .cm-app-chrome__tooltip {
@@ -941,6 +1057,20 @@
   .cm-hud-overflow {
     display: inline-flex;
   }
+
+  .cm-app-chrome__hud-group[data-search-open="true"] .cm-app-chrome__hud-item,
+  .cm-app-chrome__hud-group[data-search-open="true"] .cm-app-chrome__hud-fold {
+    display: none;
+  }
+
+  .cm-app-chrome__search[data-open="true"] {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  .cm-app-chrome__search[data-open="true"] .cm-search--hud {
+    width: min(100%, calc(100vw - var(--cm-chrome-safe) * 2 - var(--cm-hud-size) - var(--cm-chrome-gap)));
+  }
 }
 
 /* ── Form Controls ── */
@@ -1441,6 +1571,54 @@
   flex-wrap: wrap;
 }
 
+.cm-playground__chips {
+  display: flex;
+  align-items: center;
+  gap: 0.42rem;
+  min-width: 0;
+  flex: 1 1 18rem;
+  overflow: hidden;
+}
+
+.cm-playground__chip-section {
+  display: flex;
+  align-items: center;
+  gap: 0.36rem;
+  min-width: 0;
+  overflow: auto hidden;
+  scrollbar-width: none;
+}
+
+.cm-playground__chip-section::-webkit-scrollbar {
+  display: none;
+}
+
+.cm-playground__chip-section--types {
+  flex: 1 1 auto;
+}
+
+.cm-playground__chip-section--providers {
+  flex: 0 1 38%;
+}
+
+.cm-playground__chip-label {
+  color: hsl(var(--muted-foreground));
+  font-family: var(--font-mono), monospace;
+  font-size: 0.62rem;
+  font-weight: 800;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.cm-playground__divider {
+  width: 1px;
+  align-self: stretch;
+  min-height: 1.45rem;
+  background: linear-gradient(180deg, transparent, hsl(var(--primary) / 0.18), transparent);
+  flex: 0 0 auto;
+}
+
 .cm-playground__filter-select {
   min-width: 0;
   flex: 1 1 8rem;
@@ -1510,6 +1688,65 @@
   padding: 0 0.58rem;
 }
 
+.cm-playground__chip {
+  min-height: 1.9rem;
+  max-width: min(13rem, 42vw);
+  flex: 0 0 auto;
+  padding: 0 0.58rem;
+  white-space: nowrap;
+}
+
+.cm-playground__chip-icon {
+  width: 0.78rem;
+  height: 0.78rem;
+  flex: 0 0 auto;
+}
+
+.cm-playground__chip--type-text {
+  border-color: hsl(188 95% 43% / 0.26);
+  background: hsl(188 95% 43% / 0.08);
+  color: hsl(188 95% 74%);
+}
+
+.cm-playground__chip--type-image {
+  border-color: hsl(292 85% 55% / 0.28);
+  background: hsl(292 85% 55% / 0.09);
+  color: hsl(292 85% 78%);
+}
+
+.cm-playground__chip--type-audio {
+  border-color: hsl(148 75% 46% / 0.28);
+  background: hsl(148 75% 46% / 0.09);
+  color: hsl(148 75% 72%);
+}
+
+.cm-playground__chip--type-video {
+  border-color: hsl(42 100% 52% / 0.3);
+  background: hsl(42 100% 52% / 0.09);
+  color: hsl(42 100% 72%);
+}
+
+.cm-playground__chip--type-embedding,
+.cm-playground__chip--type-conversational {
+  border-color: hsl(211 100% 64% / 0.3);
+  background: hsl(211 100% 64% / 0.09);
+  color: hsl(211 100% 78%);
+}
+
+.cm-playground__chip--type-classification,
+.cm-playground__chip--type-translation,
+.cm-playground__chip--type-summarization,
+.cm-playground__chip--type-research {
+  border-color: hsl(270 80% 68% / 0.28);
+  background: hsl(270 80% 68% / 0.09);
+  color: hsl(270 80% 82%);
+}
+
+.cm-playground__chip--provider {
+  border-color: hsl(var(--primary) / 0.18);
+  background: hsl(221 50% 9% / 0.42);
+}
+
 .cm-playground__badge,
 .cm-model-badge {
   min-width: 0;
@@ -1795,6 +2032,7 @@
 }
 
 .cm-chat__body {
+  position: relative;
   flex: 1;
   min-height: 0;
   overflow: auto;
@@ -1926,11 +2164,36 @@
 
 .cm-chat__composer-row textarea {
   min-height: 2.55rem;
+  max-height: calc(1.45em * 4 + 1rem);
+  overflow-y: auto;
   border-color: hsl(var(--primary) / 0.16);
   border-radius: 14px;
   background: hsl(221 50% 9% / 0.4);
 }
 
+.cm-chat__jump {
+  position: sticky;
+  bottom: 0.35rem;
+  z-index: 3;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.38rem;
+  width: max-content;
+  margin: 0.5rem auto 0;
+  padding: 0.42rem 0.68rem;
+  border: 1px solid hsl(var(--primary) / 0.28);
+  border-radius: 999px;
+  background: hsl(221 50% 8% / 0.86);
+  color: hsl(var(--primary));
+  font-family: var(--font-mono), monospace;
+  font-size: 0.68rem;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  box-shadow: 0 0 18px hsl(var(--primary) / 0.16);
+  backdrop-filter: blur(14px);
+}
+
 .cm-chat__icon-action {
   color: hsl(var(--muted-foreground));
 }
@@ -1949,6 +2212,20 @@
     display: none;
   }
 
+  .cm-playground__chips {
+    flex-basis: 100%;
+    order: 4;
+  }
+
+  .cm-playground__chip-label,
+  .cm-playground__divider {
+    display: none;
+  }
+
+  .cm-playground__chip-section--providers {
+    flex-basis: 42%;
+  }
+
   .cm-chat-message__bubble {
     max-width: 88%;
   }

package/dist/session/styles.d.ts

@@ -1,2 +1,2 @@
-export declare const sessionCss = "/**\n * Compose.Market Session Shell\n * @compose-market/theme/css/session\n */\n\n.cm-session-menu {\n  position: relative;\n}\n\n.cm-session-trigger {\n  border-color: hsl(var(--primary) / 0.35);\n  background: hsl(var(--primary) / 0.08);\n  color: hsl(var(--primary));\n}\n\n.cm-app-chrome__hud .cm-session-menu,\n.cm-app-chrome__hud-popover .cm-session-menu {\n  min-width: 0;\n}\n\n.cm-app-chrome__hud .cm-session-trigger,\n.cm-app-chrome__hud-popover .cm-session-trigger {\n  width: auto;\n  min-width: var(--cm-hud-size, 2.75rem);\n  min-height: var(--cm-hud-size, 2.75rem);\n  height: var(--cm-hud-size, 2.75rem);\n  padding-inline: clamp(0.72rem, 1.4vw, 0.92rem);\n  border-radius: 999px;\n  white-space: nowrap;\n}\n\n.cm-session-trigger--active {\n  background: hsl(var(--primary) / 0.12);\n}\n\n.cm-session-trigger__mobile {\n  display: none;\n}\n\n.cm-session-menu__dropdown {\n  position: absolute;\n  top: calc(100% + 0.5rem);\n  right: 0;\n  width: 14.5rem;\n  z-index: 60;\n  overflow: hidden;\n}\n\n.cm-app-chrome__hud .cm-session-menu__dropdown,\n.cm-app-chrome__hud-popover .cm-session-menu__dropdown {\n  z-index: 95;\n  border-radius: 18px;\n  width: min(17rem, calc(100vw - 1.5rem));\n}\n\n.cm-session-menu__header {\n  display: grid;\n  gap: 0.35rem;\n  padding: 0.8rem 0.9rem;\n  border-bottom: 1px solid hsl(var(--border) / 0.55);\n}\n\n.cm-session-menu__row,\n.cm-session-summary__row {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 1rem;\n  font-size: 0.72rem;\n}\n\n.cm-session-menu__row span,\n.cm-session-summary__row span,\n.cm-session-current__cell span,\n.cm-session-key__cell span {\n  color: hsl(var(--muted-foreground));\n}\n\n.cm-session-menu__row strong,\n.cm-session-summary__row strong,\n.cm-session-current__cell strong,\n.cm-session-key__cell strong {\n  color: hsl(var(--foreground));\n  overflow-wrap: anywhere;\n  text-align: right;\n}\n\n.cm-session-menu__item {\n  width: 100%;\n  display: flex;\n  align-items: center;\n  gap: 0.55rem;\n  padding: 0.8rem 0.9rem;\n  border: 0;\n  background: transparent;\n  color: hsl(var(--foreground));\n  font-family: var(--font-mono), monospace;\n  font-size: 0.72rem;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  cursor: pointer;\n  transition: background-color 180ms ease, color 180ms ease;\n}\n\n.cm-session-menu__item:hover {\n  background: hsl(var(--muted) / 0.45);\n}\n\n.cm-session-modal {\n  max-width: 34rem;\n  border-radius: max(var(--radius, 0.25rem), 0.3rem);\n}\n\n.cm-session-modal__title-wrap,\n.cm-session-section__label,\n.cm-session-current__title {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.55rem;\n}\n\n.cm-session-modal__body {\n  display: grid;\n  gap: 1rem;\n}\n\n.cm-session-section {\n  display: grid;\n  gap: 0.55rem;\n}\n\n.cm-session-section__label,\n.cm-session-manage__header {\n  color: hsl(var(--muted-foreground));\n  font-family: var(--font-mono), monospace;\n  font-size: 0.68rem;\n  font-weight: 700;\n  letter-spacing: 0.12em;\n  text-transform: uppercase;\n}\n\n.cm-session-choice-grid {\n  display: grid;\n  grid-template-columns: repeat(4, minmax(0, 1fr));\n  gap: 0.55rem;\n}\n\n.cm-session-choice {\n  min-height: 2.3rem;\n  padding: 0.45rem 0.6rem;\n  border-radius: var(--radius, 0.25rem);\n  border: 1px solid hsl(var(--border));\n  background: hsl(var(--muted));\n  color: hsl(var(--foreground));\n  font-family: var(--font-mono), monospace;\n  font-size: 0.72rem;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  cursor: pointer;\n  transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease;\n}\n\n.cm-session-choice.active {\n  border-color: hsl(var(--primary));\n  background: hsl(var(--primary));\n  color: hsl(var(--primary-foreground));\n}\n\n.cm-session-budget-input {\n  display: grid;\n  gap: 0.45rem;\n}\n\n.cm-session-budget-input__row {\n  display: flex;\n  align-items: center;\n  gap: 0.55rem;\n}\n\n.cm-session-budget-input__row .cm-form-input {\n  flex: 1 1 auto;\n  min-width: 0;\n}\n\n.cm-session-budget-input__prefix,\n.cm-session-budget-input__suffix,\n.cm-session-budget-input__description {\n  color: hsl(var(--muted-foreground));\n  font-family: var(--font-mono), monospace;\n  font-size: 0.72rem;\n}\n\n.cm-session-budget-input__description {\n  line-height: 1.5;\n}\n\n.cm-session-summary,\n.cm-session-usage {\n  display: grid;\n  gap: 0.45rem;\n  padding: 0.9rem 1rem;\n  border-radius: var(--radius, 0.25rem);\n  border: 1px solid hsl(var(--border));\n  background: hsl(var(--muted) / 0.45);\n}\n\n.cm-session-modal__footer {\n  display: flex;\n  justify-content: flex-end;\n  gap: 0.75rem;\n  padding-top: 0.2rem;\n}\n\n.cm-session-current {\n  background: linear-gradient(135deg, hsl(var(--primary) / 0.12), transparent 72%);\n  border-color: hsl(var(--primary) / 0.35);\n}\n\n.cm-session-current__title {\n  color: hsl(var(--primary));\n  font-size: 0.82rem;\n  font-weight: 700;\n  margin-bottom: 0.85rem;\n}\n\n.cm-session-current__grid,\n.cm-session-key__grid {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 0.75rem;\n}\n\n.cm-session-current__cell,\n.cm-session-key__cell {\n  display: grid;\n  gap: 0.2rem;\n}\n\n.cm-session-manage__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 1rem;\n}\n\n.cm-session-empty {\n  display: grid;\n  place-items: center;\n  gap: 0.45rem;\n  min-height: 9rem;\n  padding: 1rem;\n  border: 1px dashed hsl(var(--border));\n  border-radius: max(var(--radius, 0.25rem), 0.3rem);\n  color: hsl(var(--muted-foreground));\n  text-align: center;\n}\n\n.cm-session-empty__action {\n  border: 0;\n  background: transparent;\n  color: hsl(var(--primary));\n  cursor: pointer;\n  font-size: 0.86rem;\n}\n\n@media (max-width: 820px) {\n  .cm-app-chrome__hud .cm-session-trigger span:not(.cm-session-trigger__mobile) {\n    display: none;\n  }\n\n  .cm-app-chrome__hud .cm-session-trigger__mobile {\n    display: inline-flex;\n  }\n\n  .cm-app-chrome__hud .cm-session-trigger {\n    width: auto;\n    min-width: var(--cm-hud-size, 2.75rem);\n    padding-inline: 0.72rem;\n  }\n}\n\n@media (max-width: 380px) {\n  .cm-app-chrome__hud .cm-session-trigger {\n    width: var(--cm-hud-size, 2.75rem);\n    padding-inline: 0;\n  }\n\n  .cm-app-chrome__hud .cm-session-trigger__mobile {\n    display: none;\n  }\n}\n\n.cm-session-key-list {\n  display: grid;\n  gap: 0.75rem;\n  max-height: 22rem;\n  overflow-y: auto;\n  padding-right: 0.15rem;\n}\n\n.cm-session-key {\n  display: grid;\n  gap: 0.65rem;\n}\n\n.cm-session-key__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.75rem;\n}\n\n.cm-session-key__actions {\n  display: flex;\n  align-items: center;\n  gap: 0.35rem;\n}\n\n.cm-session-key__icon {\n  width: 2rem;\n  height: 2rem;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--radius, 0.25rem);\n  border: 1px solid hsl(var(--border));\n  background: transparent;\n  color: hsl(var(--muted-foreground));\n  cursor: pointer;\n  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;\n}\n\n.cm-session-key__icon:hover {\n  background: hsl(var(--muted) / 0.45);\n  color: hsl(var(--foreground));\n}\n\n.cm-session-key__icon.danger:hover {\n  border-color: hsl(var(--destructive) / 0.45);\n  color: hsl(var(--destructive));\n}\n\n.cm-session-key__id {\n  font-family: var(--font-mono), monospace;\n  color: hsl(var(--muted-foreground));\n  font-size: 0.72rem;\n  overflow-wrap: anywhere;\n}\n\n.cm-session-generated {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto;\n  gap: 0.6rem;\n}\n\n@media (max-width: 960px) {\n  .cm-session-trigger__mobile {\n    display: inline;\n  }\n}\n\n@media (max-width: 720px) {\n  .cm-session-choice-grid,\n  .cm-session-current__grid,\n  .cm-session-key__grid {\n    grid-template-columns: 1fr;\n  }\n\n  .cm-session-modal {\n    max-width: 100%;\n  }\n\n  .cm-session-modal__footer,\n  .cm-session-manage__header {\n    flex-direction: column;\n    align-items: stretch;\n  }\n\n  .cm-session-menu__dropdown {\n    width: min(18rem, calc(100vw - 2rem));\n  }\n}\n\n@media (max-width: 480px) {\n  .cm-session-choice-grid {\n    grid-template-columns: repeat(2, 1fr);\n  }\n}\n";
+export declare const sessionCss = "/**\n * Compose.Market Session Shell\n * @compose-market/theme/css/session\n */\n\n.cm-session-menu {\n  position: relative;\n}\n\n.cm-session-trigger {\n  border-color: hsl(var(--primary) / 0.35);\n  background:\n    radial-gradient(circle at 18% 0%, hsl(var(--primary) / 0.16), transparent 38%),\n    radial-gradient(circle at 82% 100%, hsl(var(--accent) / 0.12), transparent 42%),\n    linear-gradient(145deg, hsl(226 21% 22% / 0.56), hsl(221 50% 8% / 0.48));\n  color: hsl(var(--primary));\n  box-shadow:\n    inset 0 1px 0 hsl(0 0% 100% / 0.07),\n    0 0 22px hsl(var(--primary) / 0.11);\n}\n\n.cm-app-chrome__hud .cm-session-menu,\n.cm-app-chrome__hud-popover .cm-session-menu {\n  min-width: 0;\n}\n\n.cm-app-chrome__hud .cm-session-trigger,\n.cm-app-chrome__hud-popover .cm-session-trigger {\n  width: auto;\n  min-width: max-content;\n  max-width: min(13.5rem, 52vw);\n  min-height: var(--cm-hud-size, 2.75rem);\n  height: var(--cm-hud-size, 2.75rem);\n  padding-inline: clamp(0.78rem, 1.35vw, 1rem);\n  border-radius: 999px;\n  white-space: nowrap;\n}\n\n.cm-session-trigger--active {\n  background: hsl(var(--primary) / 0.12);\n}\n\n.cm-session-trigger__mobile {\n  display: none;\n}\n\n.cm-session-menu__dropdown {\n  position: absolute;\n  top: calc(100% + 0.5rem);\n  right: 0;\n  width: 14.5rem;\n  z-index: 60;\n  overflow: hidden;\n}\n\n.cm-app-chrome__hud .cm-session-menu__dropdown,\n.cm-app-chrome__hud-popover .cm-session-menu__dropdown {\n  z-index: 95;\n  border-radius: 18px;\n  width: min(17rem, calc(100vw - 1.5rem));\n}\n\n.cm-session-menu__header {\n  display: grid;\n  gap: 0.35rem;\n  padding: 0.8rem 0.9rem;\n  border-bottom: 1px solid hsl(var(--border) / 0.55);\n}\n\n.cm-session-menu__row,\n.cm-session-summary__row {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 1rem;\n  font-size: 0.72rem;\n}\n\n.cm-session-menu__row span,\n.cm-session-summary__row span,\n.cm-session-current__cell span,\n.cm-session-key__cell span {\n  color: hsl(var(--muted-foreground));\n}\n\n.cm-session-menu__row strong,\n.cm-session-summary__row strong,\n.cm-session-current__cell strong,\n.cm-session-key__cell strong {\n  color: hsl(var(--foreground));\n  overflow-wrap: anywhere;\n  text-align: right;\n}\n\n.cm-session-menu__item {\n  width: 100%;\n  display: flex;\n  align-items: center;\n  gap: 0.55rem;\n  padding: 0.8rem 0.9rem;\n  border: 0;\n  background: transparent;\n  color: hsl(var(--foreground));\n  font-family: var(--font-mono), monospace;\n  font-size: 0.72rem;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  cursor: pointer;\n  transition: background-color 180ms ease, color 180ms ease;\n}\n\n.cm-session-menu__item:hover {\n  background: hsl(var(--muted) / 0.45);\n}\n\n.cm-session-modal {\n  max-width: 34rem;\n  border-radius: max(var(--radius, 0.25rem), 0.3rem);\n}\n\n.cm-session-modal__title-wrap,\n.cm-session-section__label,\n.cm-session-current__title {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.55rem;\n}\n\n.cm-session-modal__body {\n  display: grid;\n  gap: 1rem;\n}\n\n.cm-session-section {\n  display: grid;\n  gap: 0.55rem;\n}\n\n.cm-session-section__label,\n.cm-session-manage__header {\n  color: hsl(var(--muted-foreground));\n  font-family: var(--font-mono), monospace;\n  font-size: 0.68rem;\n  font-weight: 700;\n  letter-spacing: 0.12em;\n  text-transform: uppercase;\n}\n\n.cm-session-choice-grid {\n  display: grid;\n  grid-template-columns: repeat(4, minmax(0, 1fr));\n  gap: 0.55rem;\n}\n\n.cm-session-choice {\n  min-height: 2.3rem;\n  padding: 0.45rem 0.6rem;\n  border-radius: var(--radius, 0.25rem);\n  border: 1px solid hsl(var(--border));\n  background: hsl(var(--muted));\n  color: hsl(var(--foreground));\n  font-family: var(--font-mono), monospace;\n  font-size: 0.72rem;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  cursor: pointer;\n  transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease;\n}\n\n.cm-session-choice.active {\n  border-color: hsl(var(--primary));\n  background: hsl(var(--primary));\n  color: hsl(var(--primary-foreground));\n}\n\n.cm-session-budget-input {\n  display: grid;\n  gap: 0.45rem;\n}\n\n.cm-session-budget-input__row {\n  display: flex;\n  align-items: center;\n  gap: 0.55rem;\n}\n\n.cm-session-budget-input__row .cm-form-input {\n  flex: 1 1 auto;\n  min-width: 0;\n}\n\n.cm-session-budget-input__prefix,\n.cm-session-budget-input__suffix,\n.cm-session-budget-input__description {\n  color: hsl(var(--muted-foreground));\n  font-family: var(--font-mono), monospace;\n  font-size: 0.72rem;\n}\n\n.cm-session-budget-input__description {\n  line-height: 1.5;\n}\n\n.cm-session-summary,\n.cm-session-usage {\n  display: grid;\n  gap: 0.45rem;\n  padding: 0.9rem 1rem;\n  border-radius: var(--radius, 0.25rem);\n  border: 1px solid hsl(var(--border));\n  background: hsl(var(--muted) / 0.45);\n}\n\n.cm-session-modal__footer {\n  display: flex;\n  justify-content: flex-end;\n  gap: 0.75rem;\n  padding-top: 0.2rem;\n}\n\n.cm-session-current {\n  background: linear-gradient(135deg, hsl(var(--primary) / 0.12), transparent 72%);\n  border-color: hsl(var(--primary) / 0.35);\n}\n\n.cm-session-current__title {\n  color: hsl(var(--primary));\n  font-size: 0.82rem;\n  font-weight: 700;\n  margin-bottom: 0.85rem;\n}\n\n.cm-session-current__grid,\n.cm-session-key__grid {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 0.75rem;\n}\n\n.cm-session-current__cell,\n.cm-session-key__cell {\n  display: grid;\n  gap: 0.2rem;\n}\n\n.cm-session-manage__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 1rem;\n}\n\n.cm-session-empty {\n  display: grid;\n  place-items: center;\n  gap: 0.45rem;\n  min-height: 9rem;\n  padding: 1rem;\n  border: 1px dashed hsl(var(--border));\n  border-radius: max(var(--radius, 0.25rem), 0.3rem);\n  color: hsl(var(--muted-foreground));\n  text-align: center;\n}\n\n.cm-session-empty__action {\n  border: 0;\n  background: transparent;\n  color: hsl(var(--primary));\n  cursor: pointer;\n  font-size: 0.86rem;\n}\n\n@media (max-width: 820px) {\n  .cm-app-chrome__hud .cm-session-trigger span:not(.cm-session-trigger__mobile) {\n    display: none;\n  }\n\n  .cm-app-chrome__hud .cm-session-trigger__mobile {\n    display: inline-flex;\n  }\n\n  .cm-app-chrome__hud .cm-session-trigger {\n    width: auto;\n    min-width: max-content;\n    padding-inline: 0.72rem;\n  }\n}\n\n@media (max-width: 380px) {\n  .cm-app-chrome__hud .cm-session-trigger {\n    max-width: min(10.5rem, 58vw);\n  }\n}\n\n.cm-session-key-list {\n  display: grid;\n  gap: 0.75rem;\n  max-height: 22rem;\n  overflow-y: auto;\n  padding-right: 0.15rem;\n}\n\n.cm-session-key {\n  display: grid;\n  gap: 0.65rem;\n}\n\n.cm-session-key__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.75rem;\n}\n\n.cm-session-key__actions {\n  display: flex;\n  align-items: center;\n  gap: 0.35rem;\n}\n\n.cm-session-key__icon {\n  width: 2rem;\n  height: 2rem;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--radius, 0.25rem);\n  border: 1px solid hsl(var(--border));\n  background: transparent;\n  color: hsl(var(--muted-foreground));\n  cursor: pointer;\n  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;\n}\n\n.cm-session-key__icon:hover {\n  background: hsl(var(--muted) / 0.45);\n  color: hsl(var(--foreground));\n}\n\n.cm-session-key__icon.danger:hover {\n  border-color: hsl(var(--destructive) / 0.45);\n  color: hsl(var(--destructive));\n}\n\n.cm-session-key__id {\n  font-family: var(--font-mono), monospace;\n  color: hsl(var(--muted-foreground));\n  font-size: 0.72rem;\n  overflow-wrap: anywhere;\n}\n\n.cm-session-generated {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto;\n  gap: 0.6rem;\n}\n\n@media (max-width: 960px) {\n  .cm-session-trigger__mobile {\n    display: inline;\n  }\n}\n\n@media (max-width: 720px) {\n  .cm-session-choice-grid,\n  .cm-session-current__grid,\n  .cm-session-key__grid {\n    grid-template-columns: 1fr;\n  }\n\n  .cm-session-modal {\n    max-width: 100%;\n  }\n\n  .cm-session-modal__footer,\n  .cm-session-manage__header {\n    flex-direction: column;\n    align-items: stretch;\n  }\n\n  .cm-session-menu__dropdown {\n    width: min(18rem, calc(100vw - 2rem));\n  }\n}\n\n@media (max-width: 480px) {\n  .cm-session-choice-grid {\n    grid-template-columns: repeat(2, 1fr);\n  }\n}\n";
 //# sourceMappingURL=styles.d.ts.map

package/dist/session/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/session/styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU,kpQAoYtB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/session/styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU,s2QAsYtB,CAAC"}

package/dist/session/styles.js

@@ -9,8 +9,14 @@ export const sessionCss = `/**
 
 .cm-session-trigger {
   border-color: hsl(var(--primary) / 0.35);
-  background: hsl(var(--primary) / 0.08);
+  background:
+    radial-gradient(circle at 18% 0%, hsl(var(--primary) / 0.16), transparent 38%),
+    radial-gradient(circle at 82% 100%, hsl(var(--accent) / 0.12), transparent 42%),
+    linear-gradient(145deg, hsl(226 21% 22% / 0.56), hsl(221 50% 8% / 0.48));
   color: hsl(var(--primary));
+  box-shadow:
+    inset 0 1px 0 hsl(0 0% 100% / 0.07),
+    0 0 22px hsl(var(--primary) / 0.11);
 }
 
 .cm-app-chrome__hud .cm-session-menu,
@@ -21,10 +27,11 @@ export const sessionCss = `/**
 .cm-app-chrome__hud .cm-session-trigger,
 .cm-app-chrome__hud-popover .cm-session-trigger {
   width: auto;
-  min-width: var(--cm-hud-size, 2.75rem);
+  min-width: max-content;
+  max-width: min(13.5rem, 52vw);
   min-height: var(--cm-hud-size, 2.75rem);
   height: var(--cm-hud-size, 2.75rem);
-  padding-inline: clamp(0.72rem, 1.4vw, 0.92rem);
+  padding-inline: clamp(0.78rem, 1.35vw, 1rem);
   border-radius: 999px;
   white-space: nowrap;
 }
@@ -274,19 +281,14 @@ export const sessionCss = `/**
 
   .cm-app-chrome__hud .cm-session-trigger {
     width: auto;
-    min-width: var(--cm-hud-size, 2.75rem);
+    min-width: max-content;
     padding-inline: 0.72rem;
   }
 }
 
 @media (max-width: 380px) {
   .cm-app-chrome__hud .cm-session-trigger {
-    width: var(--cm-hud-size, 2.75rem);
-    padding-inline: 0;
-  }
-
-  .cm-app-chrome__hud .cm-session-trigger__mobile {
-    display: none;
+    max-width: min(10.5rem, 58vw);
   }
 }
 

package/dist/session/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/session/styles.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,UAAU,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoYzB,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/session/styles.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,UAAU,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsYzB,CAAC"}