@compose-market/theme 0.0.82 → 0.0.91

package/dist/css/mirror.css

@@ -0,0 +1,251 @@
+
+/* ── Mirror Pane ── */
+.cm-mirror-pane {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid hsl(var(--primary) / 0.3);
+  border-radius: 8px;
+  background: hsl(var(--card));
+  overflow: hidden;
+  height: 100%;
+}
+
+/* Toolbar (icon tabs) */
+.cm-mirror-pane__toolbar {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 8px;
+  border-bottom: 1px solid hsl(var(--sidebar-border));
+  background: hsl(var(--background) / 0.3);
+}
+
+.cm-mirror-pane__toolbar-btn {
+  padding: 8px;
+  border-radius: 6px;
+  border: none;
+  background: transparent;
+  color: hsl(var(--muted-foreground));
+  cursor: pointer;
+  transition: color 0.15s ease, background 0.15s ease;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.cm-mirror-pane__toolbar-btn:hover {
+  color: hsl(var(--foreground));
+  background: hsl(var(--muted));
+}
+
+.cm-mirror-pane__toolbar-btn--active-cyan {
+  background: hsl(var(--primary) / 0.2);
+  color: hsl(var(--primary));
+}
+
+.cm-mirror-pane__toolbar-btn--active-fuchsia {
+  background: hsl(var(--accent) / 0.2);
+  color: hsl(var(--accent));
+}
+
+/* Body */
+.cm-mirror-pane__body {
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  flex: 1;
+  overflow-y: auto;
+}
+
+@media (min-width: 640px) {
+  .cm-mirror-pane__body {
+    padding: 16px;
+  }
+}
+
+@media (min-width: 768px) {
+  .cm-mirror-pane__body {
+    padding: 20px;
+  }
+}
+
+/* Model identity */
+.cm-mirror-pane__model-header {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+}
+
+.cm-mirror-pane__model-icon-box {
+  padding: 8px;
+  background: hsl(var(--primary) / 0.1);
+  border: 1px solid hsl(var(--primary) / 0.3);
+  border-radius: 8px;
+  flex-shrink: 0;
+}
+
+.cm-mirror-pane__model-copy {
+  min-width: 0;
+  flex: 1;
+}
+
+.cm-mirror-pane__model-name {
+  font-weight: 600;
+  color: hsl(var(--foreground));
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 14px;
+}
+
+@media (min-width: 768px) {
+  .cm-mirror-pane__model-name {
+    font-size: 16px;
+  }
+}
+
+.cm-mirror-pane__model-provider {
+  font-size: 12px;
+  color: hsl(var(--muted-foreground));
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Section panel */
+.cm-mirror-pane__section {
+  border-radius: 2px;
+  border: 1px solid hsl(var(--sidebar-border));
+  background: hsl(var(--background) / 0.3);
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.cm-mirror-pane__section-label {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: hsl(var(--muted-foreground));
+}
+
+/* Key-value rows */
+.cm-mirror-pane__kv-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  font-family: var(--font-mono, monospace);
+}
+
+.cm-mirror-pane__kv-label {
+  color: hsl(var(--muted-foreground));
+}
+
+.cm-mirror-pane__kv-value {
+  color: hsl(var(--foreground));
+  text-align: right;
+}
+
+/* Pricing sub-panel */
+.cm-mirror-pane__pricing-block {
+  border-radius: 2px;
+  border: 1px solid hsl(var(--sidebar-border));
+  background: hsl(var(--background) / 0.4);
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.cm-mirror-pane__pricing-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.cm-mirror-pane__pricing-name {
+  font-family: var(--font-mono, monospace);
+  color: hsl(var(--primary));
+}
+
+/* Description block */
+.cm-mirror-pane__description {
+  border-radius: 2px;
+  border: 1px solid hsl(var(--sidebar-border));
+  background: hsl(var(--background) / 0.3);
+  padding: 12px;
+  color: hsl(var(--muted-foreground));
+  line-height: 1.6;
+}
+
+/* Settings: tool group */
+.cm-mirror-pane__tool-group {
+  border-radius: 2px;
+  border: 1px solid hsl(var(--primary) / 0.2);
+  background: hsl(var(--primary) / 0.05);
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.cm-mirror-pane__tool-group--fuchsia {
+  border-color: hsl(var(--accent) / 0.2);
+  background: hsl(var(--accent) / 0.05);
+}
+
+.cm-mirror-pane__tool-group-label {
+  font-size: 12px;
+  font-family: var(--font-mono, monospace);
+}
+
+.cm-mirror-pane__tool-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.cm-mirror-pane__tool-toggle-label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+}
+
+/* Empty state */
+.cm-mirror-pane__empty {
+  padding: 16px 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  text-align: center;
+}
+
+.cm-mirror-pane__empty-icon {
+  width: 40px;
+  height: 40px;
+  color: hsl(var(--muted-foreground) / 0.4);
+  margin-bottom: 12px;
+}
+
+.cm-mirror-pane__empty-text {
+  font-size: 14px;
+  color: hsl(var(--muted-foreground) / 0.7);
+}
+
+/* No-params state */
+.cm-mirror-pane__no-params {
+  border-radius: 2px;
+  border: 1px solid hsl(var(--sidebar-border));
+  background: hsl(var(--background) / 0.3);
+  padding: 16px;
+  font-size: 14px;
+  color: hsl(var(--muted-foreground));
+}

package/dist/css/session.css

@@ -143,6 +143,34 @@
   color: hsl(var(--primary-foreground));
 }
 
+.cm-session-budget-input {
+  display: grid;
+  gap: 0.45rem;
+}
+
+.cm-session-budget-input__row {
+  display: flex;
+  align-items: center;
+  gap: 0.55rem;
+}
+
+.cm-session-budget-input__row .cm-form-input {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.cm-session-budget-input__prefix,
+.cm-session-budget-input__suffix,
+.cm-session-budget-input__description {
+  color: hsl(var(--muted-foreground));
+  font-family: var(--font-mono), monospace;
+  font-size: 0.72rem;
+}
+
+.cm-session-budget-input__description {
+  line-height: 1.5;
+}
+
 .cm-session-summary,
 .cm-session-usage {
   display: grid;

package/dist/css/shell.css

@@ -4,14 +4,16 @@
  */
 
 :root {
-  --cm-shell-glow-primary: hsl(var(--primary) / 0.24);
-  --cm-shell-glow-accent: hsl(var(--accent) / 0.14);
+  --cm-shell-glow-primary: hsl(var(--primary) / 0.3);
+  --cm-shell-glow-accent: hsl(var(--accent) / 0.16);
   --cm-shell-surface:
-    linear-gradient(180deg, hsl(var(--card) / 0.96), hsl(var(--card) / 0.82));
-  --cm-shell-border: hsl(var(--border) / 0.92);
+    linear-gradient(145deg, hsl(226 21% 23% / 0.38), hsl(221 50% 9% / 0.24)),
+    radial-gradient(circle at 18% 0%, hsl(var(--primary) / 0.08), transparent 34%),
+    hsl(224 36% 13% / 0.28);
+  --cm-shell-border: hsl(var(--primary) / 0.18);
   --cm-shell-shadow:
-    0 16px 48px hsl(240 30% 2% / 0.38),
-    inset 0 1px 0 hsl(0 0% 100% / 0.04);
+    0 0 40px hsl(var(--primary) / 0.055),
+    inset 0 1px 0 hsl(0 0% 100% / 0.06);
 }
 
 .cm-shell-stack {
@@ -34,9 +36,10 @@
   gap: 0.55rem;
   min-height: 2.3rem;
   padding: 0 0.95rem;
-  border-radius: var(--radius, 0.25rem);
-  border: 1px solid hsl(var(--border) / 0.88);
-  background: hsl(var(--card) / 0.92);
+  border-radius: 999px;
+  border: 1px solid hsl(var(--primary) / 0.22);
+  background:
+    linear-gradient(180deg, hsl(var(--card) / 0.72), hsl(var(--background) / 0.36));
   color: hsl(var(--foreground));
   font-family: var(--font-mono), monospace;
   font-size: 0.76rem;
@@ -51,7 +54,10 @@
     border-color 180ms ease,
     color 180ms ease,
     box-shadow 180ms ease;
-  box-shadow: inset 0 1px 0 hsl(0 0% 100% / 0.03);
+  box-shadow:
+    inset 0 1px 0 hsl(0 0% 100% / 0.04),
+    0 0 16px hsl(var(--primary) / 0.035);
+  backdrop-filter: blur(12px) saturate(1.08);
 }
 
 .cm-shell-button:hover:not(:disabled) {
@@ -66,7 +72,7 @@
 
 .cm-shell-button--primary {
   background:
-    linear-gradient(180deg, hsl(var(--primary)), hsl(188 95% 39%));
+    linear-gradient(135deg, #8aebff, #22d3ee);
   color: hsl(var(--primary-foreground));
   border-color: hsl(var(--primary) / 0.56);
   box-shadow:
@@ -82,12 +88,14 @@
 }
 
 .cm-shell-button--secondary {
-  background: hsl(var(--muted) / 0.28);
-  border-color: hsl(var(--border) / 0.88);
+  background: hsl(221 50% 9% / 0.36);
+  border-color: hsl(var(--primary) / 0.2);
+  color: hsl(var(--primary));
 }
 
 .cm-shell-button--secondary:hover:not(:disabled) {
-  background: hsl(var(--muted) / 0.54);
+  background: hsl(var(--primary) / 0.1);
+  box-shadow: 0 0 18px hsl(var(--primary) / 0.1);
 }
 
 .cm-shell-button--ghost {
@@ -136,8 +144,9 @@
   min-height: 1.75rem;
   padding: 0 0.72rem;
   border-radius: 999px;
-  border: 1px solid hsl(var(--primary) / 0.18);
-  background: linear-gradient(180deg, hsl(var(--card) / 0.94), hsl(var(--muted) / 0.3));
+  border: 1px solid hsl(var(--primary) / 0.2);
+  background:
+    linear-gradient(180deg, hsl(var(--card) / 0.76), hsl(var(--muted) / 0.26));
   color: hsl(var(--muted-foreground));
   font-family: var(--font-mono), monospace;
   font-size: 0.68rem;
@@ -152,15 +161,16 @@
 
 .cm-shell-panel {
   border: 1px solid var(--cm-shell-border);
-  border-radius: max(var(--radius, 0.25rem), 0.3rem);
+  border-radius: 12px;
   background: var(--cm-shell-surface);
   box-shadow: var(--cm-shell-shadow);
-  backdrop-filter: blur(16px);
+  backdrop-filter: blur(16px) saturate(1.12);
 }
 
 .cm-shell-panel--muted {
   background:
-    linear-gradient(180deg, hsl(var(--muted) / 0.34), hsl(var(--background) / 0.9));
+    linear-gradient(145deg, hsl(224 36% 13% / 0.36), hsl(221 50% 9% / 0.72)),
+    radial-gradient(circle at 18% 0%, hsl(var(--primary) / 0.06), transparent 34%);
 }
 
 .cm-shell-panel--ghost {
@@ -247,9 +257,10 @@
   align-items: center;
   gap: 0.35rem;
   padding: 0.25rem;
-  border: 1px solid hsl(var(--border) / 0.75);
-  border-radius: var(--radius, 0.25rem);
-  background: hsl(var(--muted) / 0.16);
+  border: 1px solid hsl(var(--primary) / 0.16);
+  border-radius: 999px;
+  background: hsl(var(--muted) / 0.14);
+  backdrop-filter: blur(12px);
 }
 
 .cm-shell-tab {
@@ -258,7 +269,7 @@
   gap: 0.5rem;
   min-height: 2.1rem;
   padding: 0 0.85rem;
-  border-radius: calc(var(--radius, 0.25rem) - 1px);
+  border-radius: 999px;
   border: 1px solid transparent;
   background: transparent;
   color: hsl(var(--muted-foreground));
@@ -294,8 +305,9 @@
   align-items: center;
   gap: 0.7rem;
   padding: 0.8rem 0.95rem;
-  border-radius: max(var(--radius, 0.25rem), 0.3rem);
+  border-radius: 12px;
   border: 1px solid;
+  backdrop-filter: blur(12px);
 }
 
 .cm-shell-notice--info {
@@ -384,7 +396,9 @@
   align-items: center;
   justify-content: center;
   padding: 1rem;
-  background: hsl(240 30% 2% / 0.8);
+  background:
+    radial-gradient(circle at 50% 24%, hsl(var(--primary) / 0.08), transparent 28rem),
+    hsl(240 30% 2% / 0.82);
   backdrop-filter: blur(12px);
   z-index: 100;
 }
@@ -393,7 +407,7 @@
   width: min(100%, 46rem);
   max-height: min(90vh, 56rem);
   overflow: auto;
-  border-radius: max(var(--radius, 0.25rem), 0.3rem);
+  border-radius: 12px;
 }
 
 .cm-shell-modal__header {
@@ -460,9 +474,9 @@
 .cm-form-select {
   width: 100%;
   padding: 10px 12px;
-  background: hsl(var(--input) / 0.92);
-  border: 1px solid hsl(var(--border));
-  border-radius: var(--radius, 0.25rem);
+  background: hsl(222 47% 7% / 0.84);
+  border: 1px solid hsl(var(--primary) / 0.16);
+  border-radius: 10px;
   color: hsl(var(--foreground));
   font-size: 14px;
   font-family: var(--font-sans), sans-serif;
@@ -474,7 +488,9 @@
 .cm-form-select:focus {
   outline: none;
   border-color: hsl(var(--primary));
-  box-shadow: 0 0 0 1px hsl(var(--primary) / 0.24);
+  box-shadow:
+    0 0 0 1px hsl(var(--primary) / 0.24),
+    inset 0 0 20px hsl(var(--primary) / 0.06);
   background: hsl(var(--background) / 0.96);
 }
 

package/dist/css/tokens.css

@@ -8,7 +8,7 @@
 :root {
   /* Typography */
   --font-display: "Orbitron", sans-serif;
-  --font-sans: "Rajdhani", sans-serif;
+  --font-sans: "Manrope", sans-serif;
   --font-mono: "Fira Code", monospace;
 
   /* Border Radius */