@compose-market/theme 0.0.90 → 0.0.92

package/dist/css/mirror.css

@@ -1,251 +1,448 @@
 
-/* ── Mirror Pane ── */
 .cm-mirror-pane {
+  container-type: inline-size;
   display: flex;
   flex-direction: column;
-  border: 1px solid hsl(var(--primary) / 0.3);
-  border-radius: 8px;
-  background: hsl(var(--card));
-  overflow: hidden;
+  min-width: 0;
+  min-height: 0;
   height: 100%;
+  overflow: hidden;
+  border: 1px solid hsl(var(--primary) / 0.18);
+  border-radius: 16px;
+  background:
+    linear-gradient(145deg, hsl(226 21% 23% / 0.42), hsl(221 50% 9% / 0.34)),
+    radial-gradient(circle at 18% 0%, hsl(var(--primary) / 0.09), transparent 34%),
+    hsl(224 36% 13% / 0.24);
+  box-shadow:
+    inset 0 1px 0 hsl(0 0% 100% / 0.06),
+    0 0 34px hsl(var(--primary) / 0.06);
+  color: hsl(var(--foreground));
+  font-family: var(--font-sans), sans-serif;
+  backdrop-filter: blur(16px) saturate(1.12);
 }
 
-/* Toolbar (icon tabs) */
 .cm-mirror-pane__toolbar {
-  flex-shrink: 0;
+  flex: 0 0 auto;
   display: flex;
   align-items: center;
-  gap: 4px;
-  padding: 8px;
-  border-bottom: 1px solid hsl(var(--sidebar-border));
-  background: hsl(var(--background) / 0.3);
+  gap: 0.35rem;
+  padding: 0.45rem;
+  border-bottom: 1px solid hsl(var(--primary) / 0.1);
+  background: hsl(221 50% 9% / 0.28);
 }
 
 .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;
+  gap: 0.4rem;
+  min-width: 2.2rem;
+  min-height: 2.2rem;
+  padding: 0 0.62rem;
+  border: 1px solid transparent;
+  border-radius: 999px;
+  background: transparent;
+  color: hsl(var(--muted-foreground));
+  cursor: pointer;
+  font-family: var(--font-mono), monospace;
+  font-size: 0.68rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  transition:
+    transform 160ms ease,
+    border-color 180ms ease,
+    background-color 180ms ease,
+    color 180ms ease,
+    box-shadow 180ms ease;
 }
 
-.cm-mirror-pane__toolbar-btn:hover {
+.cm-mirror-pane__toolbar-btn:hover,
+.cm-mirror-pane__toolbar-btn:focus-visible {
+  outline: none;
   color: hsl(var(--foreground));
-  background: hsl(var(--muted));
+  border-color: hsl(var(--primary) / 0.2);
+  background: hsl(var(--primary) / 0.08);
 }
 
 .cm-mirror-pane__toolbar-btn--active-cyan {
-  background: hsl(var(--primary) / 0.2);
+  border-color: hsl(var(--primary) / 0.36);
+  background: hsl(var(--primary) / 0.12);
   color: hsl(var(--primary));
+  box-shadow: 0 0 18px hsl(var(--primary) / 0.12);
 }
 
 .cm-mirror-pane__toolbar-btn--active-fuchsia {
-  background: hsl(var(--accent) / 0.2);
+  border-color: hsl(var(--accent) / 0.34);
+  background: hsl(var(--accent) / 0.11);
   color: hsl(var(--accent));
+  box-shadow: 0 0 18px hsl(var(--accent) / 0.1);
+}
+
+.cm-mirror-pane__toolbar-btn svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.cm-mirror-pane__toolbar-label {
+  display: none;
+}
+
+@container (min-width: 24rem) {
+  .cm-mirror-pane__toolbar-label {
+    display: inline;
+  }
 }
 
-/* Body */
 .cm-mirror-pane__body {
-  padding: 12px;
+  flex: 1;
+  min-height: 0;
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: clamp(0.75rem, 3cqi, 1rem);
+  overflow: auto;
+  padding: clamp(0.75rem, 3cqi, 1rem);
+}
+
+.cm-mirror-pane__footer {
+  flex: 0 0 auto;
+  border-top: 1px solid hsl(var(--primary) / 0.1);
+  padding: 0.75rem 1rem;
+}
+
+.cm-mirror-pane__empty {
   flex: 1;
-  overflow-y: auto;
+  min-height: 14rem;
+  display: grid;
+  place-items: center;
+  align-content: center;
+  gap: 0.75rem;
+  padding: 1.5rem;
+  text-align: center;
 }
 
-@media (min-width: 640px) {
-  .cm-mirror-pane__body {
-    padding: 16px;
-  }
+.cm-mirror-pane__empty-icon {
+  display: inline-flex;
+  color: hsl(var(--primary));
+  opacity: 0.72;
 }
 
-@media (min-width: 768px) {
-  .cm-mirror-pane__body {
-    padding: 20px;
-  }
+.cm-mirror-pane__empty-icon svg {
+  width: 2.5rem;
+  height: 2.5rem;
+}
+
+.cm-mirror-pane__empty-text {
+  max-width: 18rem;
+  color: hsl(var(--muted-foreground));
+  line-height: 1.45;
 }
 
-/* Model identity */
 .cm-mirror-pane__model-header {
   display: flex;
   align-items: flex-start;
-  gap: 12px;
+  gap: 0.75rem;
+  min-width: 0;
 }
 
 .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;
+  display: grid;
+  width: 2.65rem;
+  height: 2.65rem;
+  place-items: center;
+  flex: 0 0 auto;
+  border: 1px solid hsl(var(--primary) / 0.24);
+  border-radius: 12px;
+  background: hsl(var(--primary) / 0.09);
+  color: hsl(var(--primary));
+  box-shadow: inset 0 0 18px hsl(var(--primary) / 0.08);
+}
+
+.cm-mirror-pane__model-icon-box svg {
+  width: 1.2rem;
+  height: 1.2rem;
 }
 
 .cm-mirror-pane__model-copy {
-  min-width: 0;
   flex: 1;
+  min-width: 0;
+  display: grid;
+  gap: 0.25rem;
+}
+
+.cm-mirror-pane__model-name-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-width: 0;
+  flex-wrap: wrap;
 }
 
 .cm-mirror-pane__model-name {
-  font-weight: 600;
+  min-width: 0;
+  margin: 0;
   color: hsl(var(--foreground));
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font-size: 14px;
+  font-family: var(--font-display), sans-serif;
+  font-size: clamp(0.98rem, 4cqi, 1.14rem);
+  font-weight: 800;
+  line-height: 1.08;
+  overflow-wrap: anywhere;
 }
 
-@media (min-width: 768px) {
-  .cm-mirror-pane__model-name {
-    font-size: 16px;
-  }
+.cm-mirror-pane__model-types {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  flex-wrap: wrap;
 }
 
-.cm-mirror-pane__model-provider {
-  font-size: 12px;
+.cm-mirror-pane__badge {
+  display: inline-flex;
+  align-items: center;
+  min-height: 1.35rem;
+  border: 1px solid hsl(var(--primary) / 0.18);
+  border-radius: 999px;
+  background: hsl(var(--primary) / 0.08);
+  color: hsl(var(--primary));
+  padding: 0 0.45rem;
+  font-family: var(--font-mono), monospace;
+  font-size: 0.6rem;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.cm-mirror-pane__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"] {
+  border-color: hsl(142 71% 45% / 0.28);
+  background: hsl(142 71% 45% / 0.1);
+  color: hsl(142 71% 55%);
+}
+
+.cm-mirror-pane__badge[data-tone="warning"] {
+  border-color: hsl(42 100% 48% / 0.28);
+  background: hsl(42 100% 48% / 0.1);
+  color: hsl(42 100% 58%);
+}
+
+.cm-mirror-pane__badge[data-tone="danger"] {
+  border-color: hsl(var(--destructive) / 0.3);
+  background: hsl(var(--destructive) / 0.12);
+  color: hsl(var(--destructive));
+}
+
+.cm-mirror-pane__model-provider,
+.cm-mirror-pane__model-id {
+  margin: 0;
   color: hsl(var(--muted-foreground));
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  font-family: var(--font-mono), monospace;
+  font-size: 0.72rem;
+  line-height: 1.35;
+  overflow-wrap: anywhere;
+}
+
+.cm-mirror-pane__model-id {
+  color: hsl(var(--primary) / 0.72);
+}
+
+.cm-mirror-pane__description,
+.cm-mirror-pane__description--clamped,
+.cm-mirror-pane__section,
+.cm-mirror-pane__pricing-compact,
+.cm-mirror-pane__pricing-block,
+.cm-mirror-pane__tool-group,
+.cm-mirror-pane__no-params,
+.cm-mirror-pane__text-area,
+.cm-mirror-pane__field {
+  border: 1px solid hsl(var(--primary) / 0.12);
+  border-radius: 12px;
+  background: hsl(221 50% 9% / 0.3);
+}
+
+.cm-mirror-pane__description,
+.cm-mirror-pane__description--clamped {
+  padding: 0.75rem;
+  color: hsl(var(--muted-foreground));
+  line-height: 1.5;
 }
 
-/* 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;
+  gap: 0.6rem;
+  min-width: 0;
 }
 
-.cm-mirror-pane__section-label {
-  font-size: 11px;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
+.cm-mirror-pane__section--compact {
+  padding: 0.75rem;
+}
+
+.cm-mirror-pane__section-label,
+.cm-mirror-pane__tool-group-label {
   color: hsl(var(--muted-foreground));
+  font-family: var(--font-mono), monospace;
+  font-size: 0.68rem;
+  font-weight: 800;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
 }
 
-/* Key-value rows */
-.cm-mirror-pane__kv-row {
+.cm-mirror-pane__io-row,
+.cm-mirror-pane__kv-row,
+.cm-mirror-pane__pricing-header,
+.cm-mirror-pane__tool-toggle {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 12px;
-  font-family: var(--font-mono, monospace);
+  gap: 0.75rem;
+  min-width: 0;
 }
 
+.cm-mirror-pane__io-row {
+  align-items: flex-start;
+}
+
+.cm-mirror-pane__io-label,
 .cm-mirror-pane__kv-label {
+  flex: 0 0 auto;
   color: hsl(var(--muted-foreground));
+  font-family: var(--font-mono), monospace;
+  font-size: 0.7rem;
+}
+
+.cm-mirror-pane__io-badges,
+.cm-mirror-pane__kv-grid,
+.cm-mirror-pane__pricing-entries,
+.cm-mirror-pane__custom-content,
+.cm-mirror-pane__custom-section {
+  display: flex;
+  flex-direction: column;
+  gap: 0.45rem;
+  min-width: 0;
+}
+
+.cm-mirror-pane__io-badges {
+  flex-direction: row;
+  flex-wrap: wrap;
 }
 
 .cm-mirror-pane__kv-value {
+  min-width: 0;
   color: hsl(var(--foreground));
+  font-family: var(--font-mono), monospace;
+  font-size: 0.74rem;
   text-align: right;
+  overflow-wrap: anywhere;
 }
 
-/* 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;
+.cm-mirror-pane__pricing-compact,
+.cm-mirror-pane__pricing-block,
+.cm-mirror-pane__tool-group {
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: 0.45rem;
+  padding: 0.62rem 0.7rem;
 }
 
-.cm-mirror-pane__pricing-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
+.cm-mirror-pane__pricing-unit {
+  color: hsl(var(--muted-foreground) / 0.72);
+  font-family: var(--font-mono), monospace;
+  font-size: 0.64rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
 }
 
 .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;
+  color: hsl(var(--accent));
+  font-family: var(--font-mono), monospace;
+  font-weight: 700;
 }
 
-/* Settings: tool group */
 .cm-mirror-pane__tool-group {
-  border-radius: 2px;
-  border: 1px solid hsl(var(--primary) / 0.2);
+  border-color: hsl(var(--primary) / 0.18);
   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);
+  border-color: hsl(var(--accent) / 0.18);
   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;
+.cm-mirror-pane__tool-toggle-label {
+  display: inline-flex;
   align-items: center;
-  justify-content: space-between;
+  gap: 0.42rem;
+  min-width: 0;
+  color: hsl(var(--foreground));
 }
 
-.cm-mirror-pane__tool-toggle-label {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 14px;
+.cm-mirror-pane__tool-toggle-label svg,
+.cm-mirror-pane__tool-toggle-label-icon {
+  width: 1rem;
+  height: 1rem;
+  flex: 0 0 auto;
 }
 
-/* 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__text-area {
+  width: 100%;
+  min-height: 7rem;
+  padding: 0.72rem;
+  color: hsl(var(--foreground));
+  font-family: var(--font-mono), monospace;
+  font-size: 0.78rem;
+  resize: vertical;
 }
 
-.cm-mirror-pane__empty-icon {
-  width: 40px;
-  height: 40px;
-  color: hsl(var(--muted-foreground) / 0.4);
-  margin-bottom: 12px;
+.cm-mirror-pane__field {
+  width: 100%;
+  min-height: 2.45rem;
+  color: hsl(var(--foreground));
+  font-family: var(--font-mono), monospace;
+  font-size: 0.78rem;
 }
 
-.cm-mirror-pane__empty-text {
-  font-size: 14px;
-  color: hsl(var(--muted-foreground) / 0.7);
+.cm-mirror-pane__field:focus,
+.cm-mirror-pane__field:focus-visible,
+.cm-mirror-pane__text-area:focus,
+.cm-mirror-pane__text-area:focus-visible {
+  outline: none;
+  border-color: hsl(var(--primary) / 0.5);
+  box-shadow: 0 0 0 1px hsl(var(--primary) / 0.16);
 }
 
-/* No-params state */
+.cm-mirror-pane__param-description,
 .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));
+  font-size: 0.78rem;
+  line-height: 1.4;
+}
+
+.cm-mirror-pane__no-params {
+  padding: 1rem;
+  text-align: center;
+}
+
+@container (max-width: 22rem) {
+  .cm-mirror-pane__io-row,
+  .cm-mirror-pane__kv-row,
+  .cm-mirror-pane__pricing-header,
+  .cm-mirror-pane__tool-toggle {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 0.35rem;
+  }
+
+  .cm-mirror-pane__kv-value {
+    text-align: left;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .cm-mirror-pane__toolbar-btn {
+    transition-duration: 0.01ms !important;
+  }
 }

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;