@compose-market/theme 0.0.90 → 0.0.92

package/dist/css/agents.css

@@ -4,17 +4,24 @@
  */
 
 .cm-agent-card {
+  container-type: inline-size;
   display: grid;
   grid-template-columns: minmax(0, 1fr);
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
   gap: 0.85rem;
-  border-radius: max(var(--radius, 0.25rem), 0.3rem);
-  border: 1px solid hsl(var(--border) / 0.84);
+  border-radius: 14px;
+  border: 1px solid hsl(var(--primary) / 0.18);
   background:
-    linear-gradient(180deg, hsl(var(--card) / 0.96), hsl(var(--card) / 0.78));
+    linear-gradient(145deg, hsl(226 21% 23% / 0.42), hsl(221 50% 9% / 0.32)),
+    radial-gradient(circle at 18% 0%, hsl(var(--primary) / 0.08), transparent 34%),
+    hsl(224 36% 13% / 0.24);
   box-shadow:
-    0 18px 40px hsl(240 30% 2% / 0.24),
-    inset 0 1px 0 hsl(0 0% 100% / 0.04);
+    0 0 34px hsl(var(--primary) / 0.055),
+    inset 0 1px 0 hsl(0 0% 100% / 0.06);
   overflow: hidden;
+  backdrop-filter: blur(16px) saturate(1.12);
 }
 
 .cm-agent-card--interactive {
@@ -45,12 +52,16 @@
   display: grid;
   gap: 0.9rem;
   padding: 1rem;
+  min-width: 0;
+  max-width: 100%;
 }
 
 .cm-agent-card__header {
   display: flex;
   align-items: flex-start;
   gap: 1rem;
+  min-width: 0;
+  max-width: 100%;
 }
 
 .cm-agent-card__avatar {
@@ -86,6 +97,7 @@
   display: grid;
   gap: 0.5rem;
   min-width: 0;
+  max-width: 100%;
   flex: 1;
 }
 
@@ -93,6 +105,8 @@
   display: flex;
   align-items: flex-start;
   gap: 0.6rem;
+  min-width: 0;
+  max-width: 100%;
 }
 
 .cm-agent-card__title {
@@ -101,6 +115,8 @@
   line-height: 1.1;
   color: hsl(var(--foreground));
   min-width: 0;
+  max-width: 100%;
+  overflow-wrap: anywhere;
 }
 
 .cm-agent-card__header-action {
@@ -112,6 +128,9 @@
   color: hsl(var(--muted-foreground));
   font-size: 0.84rem;
   line-height: 1.48;
+  max-width: 100%;
+  min-width: 0;
+  overflow-wrap: anywhere;
 }
 
 .cm-agent-card__badges,
@@ -346,6 +365,129 @@
   text-decoration: underline;
 }
 
+.cm-agent-card--match-chat {
+  height: 100%;
+  min-height: 0;
+}
+
+.cm-agent-card--match-chat > .cm-agent-card__main {
+  height: 100%;
+  min-height: 0;
+  align-content: start;
+  overflow-y: auto;
+}
+
+.cm-agent-card__metric,
+.cm-agent-card__metric-copy,
+.cm-agent-card__focus,
+.cm-agent-card__focus-copy,
+.cm-agent-card__tags-block,
+.cm-agent-card__footer,
+.cm-agent-card__footer-stack,
+.cm-agent-card__endpoint,
+.cm-agent-card__creator {
+  min-width: 0;
+  max-width: 100%;
+}
+
+.cm-agent-card__metric-value,
+.cm-agent-card__focus-value,
+.cm-agent-card__meta-value,
+.cm-agent-card__endpoint-code,
+.cm-agent-card__creator-value {
+  max-width: 100%;
+  min-width: 0;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+.cm-agent-card__identity {
+  display: grid;
+  gap: 0.32rem;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.cm-agent-card__identity-head {
+  display: flex;
+  align-items: baseline;
+  gap: 0.45rem;
+  min-width: 0;
+  max-width: 100%;
+  flex-wrap: wrap;
+}
+
+.cm-agent-card__identity-name {
+  min-width: 0;
+  max-width: 100%;
+  overflow-wrap: anywhere;
+}
+
+.cm-agent-card__identity-address {
+  color: hsl(var(--muted-foreground));
+  font-family: var(--font-mono), monospace;
+  font-size: 0.68rem;
+  font-weight: 500;
+  line-height: 1.1;
+}
+
+.cm-agent-card__model {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.28rem;
+  width: fit-content;
+  max-width: 100%;
+  padding: 0.16rem 0.44rem;
+  border: 1px solid hsl(var(--primary) / 0.3);
+  border-radius: 999px;
+  background: hsl(var(--primary) / 0.06);
+  color: hsl(var(--foreground));
+  font-family: var(--font-mono), monospace;
+  font-size: 0.66rem;
+  font-weight: 600;
+  line-height: 1.25;
+}
+
+.cm-agent-card__model svg {
+  width: 0.68rem;
+  height: 0.68rem;
+  flex-shrink: 0;
+  color: hsl(var(--primary));
+}
+
+.cm-agent-card__model-name {
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cm-agent-card__badge,
+.cm-agent-card__tag {
+  max-width: 100%;
+  min-width: 0;
+  height: auto;
+  padding-top: 0.35rem;
+  padding-bottom: 0.35rem;
+  line-height: 1.2;
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
+
+.cm-agent-card__endpoint-row {
+  min-width: 0;
+  max-width: 100%;
+  cursor: pointer;
+  text-align: left;
+}
+
+.cm-agent-card__endpoint-row:focus-visible {
+  outline: 2px solid hsl(var(--primary) / 0.75);
+  outline-offset: 2px;
+}
+
 .cm-agent-card__actions {
   display: flex;
   align-items: flex-start;
@@ -472,3 +614,24 @@
     flex-wrap: wrap;
   }
 }
+
+@container (max-width: 26rem) {
+  .cm-agent-card__metrics {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .cm-agent-card__header {
+    gap: 0.7rem;
+  }
+
+  .cm-agent-card__avatar {
+    width: 2.75rem;
+    height: 2.75rem;
+  }
+}
+
+@container (max-width: 21rem) {
+  .cm-agent-card__endpoint-row {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}

package/dist/css/app.css

@@ -6,7 +6,7 @@
 .cm-app-shell {
   position: relative;
   min-height: 100dvh;
-  background: hsl(var(--background));
+  background: hsl(221 50% 9%);
   color: hsl(var(--foreground));
   overflow-x: hidden;
   overflow-y: hidden;
@@ -22,8 +22,8 @@
   background:
     radial-gradient(circle at 18% 14%, hsl(var(--primary) / 0.14), transparent 26%),
     radial-gradient(circle at 82% 12%, hsl(var(--accent) / 0.12), transparent 22%),
-    radial-gradient(circle at 50% 100%, hsl(220 60% 7% / 0.9), transparent 48%),
-    linear-gradient(180deg, hsl(220 50% 4%), hsl(var(--background)) 42%, hsl(223 47% 3%));
+    radial-gradient(circle at 50% 100%, hsl(221 50% 9% / 0.9), transparent 48%),
+    linear-gradient(180deg, hsl(221 55% 5%), hsl(221 50% 9%) 42%, hsl(222 47% 4%));
 }
 
 .cm-app-shell__grid,
@@ -38,8 +38,9 @@
   background-image:
     linear-gradient(to right, hsl(188 95% 43% / 0.08) 1px, transparent 1px),
     linear-gradient(to bottom, hsl(188 95% 43% / 0.08) 1px, transparent 1px);
-  transition: transform 140ms linear;
+  transition: transform 140ms linear, opacity 180ms ease;
   mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.16));
+  will-change: transform;
 }
 
 .cm-app-shell__gradient {
@@ -55,6 +56,7 @@
   background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, hsl(188 95% 43% / 0.07) 50%, rgba(0, 0, 0, 0) 100%);
   opacity: 0.22;
   animation: cm-app-scanline 8s linear infinite;
+  will-change: transform;
 }
 
 @keyframes cm-app-scanline {
@@ -72,3 +74,61 @@
   z-index: 1;
   min-height: 100dvh;
 }
+
+.cm-app-shell--deep .cm-app-shell__backdrop {
+  background:
+    radial-gradient(circle at 50% 18%, hsl(var(--primary) / 0.09), transparent 34rem),
+    radial-gradient(circle at 16% 46%, hsl(var(--accent) / 0.08), transparent 28rem),
+    linear-gradient(180deg, hsl(222 47% 4%) 0%, hsl(224 36% 13%) 46%, hsl(221 50% 9%) 100%);
+}
+
+.cm-app-shell--luminescent .cm-app-shell__backdrop {
+  background:
+    radial-gradient(circle at 50% 18%, hsl(var(--primary) / 0.13), transparent 34rem),
+    radial-gradient(circle at 16% 46%, hsl(var(--accent) / 0.1), transparent 28rem),
+    radial-gradient(circle at 84% 36%, hsl(var(--primary) / 0.08), transparent 22rem),
+    linear-gradient(180deg, hsl(222 47% 4%) 0%, hsl(224 36% 13%) 48%, hsl(221 50% 9%) 100%);
+}
+
+.cm-app-shell--luminescent .cm-app-shell__grid {
+  opacity: 0.86;
+  background-size: 44px 44px;
+  animation: cm-app-grid-drift 18s linear infinite;
+  mask-image: radial-gradient(ellipse at 50% 32%, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.28) 56%, transparent 100%);
+}
+
+.cm-app-shell--luminescent .cm-app-shell__gradient {
+  background-image:
+    linear-gradient(90deg, rgba(2, 6, 7, 0.78) 0%, transparent 22%, transparent 78%, rgba(2, 6, 7, 0.78) 100%),
+    linear-gradient(180deg, rgba(2, 6, 7, 0.22), transparent 36%, rgba(2, 6, 7, 0.58)),
+    radial-gradient(ellipse at 50% 34%, transparent 17%, rgba(2, 6, 7, 0.24) 54%, rgba(2, 6, 7, 0.86) 100%),
+    radial-gradient(ellipse at 50% 50%, hsl(var(--primary) / 0.08), transparent 28rem);
+}
+
+.cm-app-shell--still .cm-app-shell__grid,
+.cm-app-shell--still .cm-app-shell__scanline {
+  animation: none;
+}
+
+.cm-app-shell--still .cm-app-shell__scanline {
+  opacity: 0;
+}
+
+@keyframes cm-app-grid-drift {
+  from {
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    transform: translate3d(44px, 44px, 0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .cm-app-shell__grid,
+  .cm-app-shell__scanline {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/dist/css/dark.css

@@ -8,31 +8,31 @@
 
 :root {
   /* Colors */
-  --background: 222 47% 3%;
-  --foreground: 210 40% 80%;
-  --card: 222 40% 5%;
-  --card-foreground: 210 30% 75%;
-  --popover: 222 40% 4%;
-  --popover-foreground: 210 30% 75%;
+  --background: 221 50% 9%;
+  --foreground: 230 78% 92%;
+  --card: 224 36% 13%;
+  --card-foreground: 230 78% 92%;
+  --popover: 224 36% 13%;
+  --popover-foreground: 230 78% 92%;
   --primary: 188 95% 43%;
   --primary-foreground: 222 47% 3%;
-  --secondary: 270 60% 20%;
-  --secondary-foreground: 270 80% 90%;
-  --muted: 217 33% 15%;
-  --muted-foreground: 215 16% 47%;
+  --secondary: 226 21% 23%;
+  --secondary-foreground: 230 78% 92%;
+  --muted: 224 36% 13%;
+  --muted-foreground: 229 28% 70%;
   --accent: 292 85% 55%;
-  --accent-foreground: 0 0% 100%;
+  --accent-foreground: 230 78% 92%;
   --destructive: 0 90% 50%;
   --destructive-foreground: 0 0% 100%;
-  --border: 217 33% 15%;
-  --input: 217 33% 10%;
+  --border: 188 95% 43%;
+  --input: 222 47% 7%;
   --ring: 188 95% 43%;
-  --sidebar: 222 47% 3%;
-  --sidebar-foreground: 210 30% 75%;
+  --sidebar: 221 50% 9%;
+  --sidebar-foreground: 230 78% 92%;
   --sidebar-primary: 188 95% 43%;
   --sidebar-primary-foreground: 222 47% 3%;
-  --sidebar-accent: 222 40% 8%;
-  --sidebar-accent-foreground: 210 40% 90%;
-  --sidebar-border: 217 33% 15%;
+  --sidebar-accent: 226 21% 23%;
+  --sidebar-accent-foreground: 230 78% 92%;
+  --sidebar-border: 188 95% 43%;
   --sidebar-ring: 188 95% 43%;
 }