@compose-market/theme 0.0.95 → 0.0.97

package/dist/css/agents.css

@@ -25,6 +25,7 @@
 }
 
 .cm-agent-card--interactive {
+  cursor: pointer;
   transition:
     transform 180ms ease,
     border-color 180ms ease,
@@ -40,6 +41,11 @@
     inset 0 1px 0 hsl(0 0% 100% / 0.05);
 }
 
+.cm-agent-card--interactive:focus-visible {
+  outline: 2px solid hsl(var(--primary) / 0.72);
+  outline-offset: 3px;
+}
+
 .cm-agent-card--running {
   border-color: hsl(142 71% 45% / 0.48);
   box-shadow:
@@ -374,7 +380,216 @@
   height: 100%;
   min-height: 0;
   align-content: start;
-  overflow-y: auto;
+  overflow: hidden;
+}
+
+.cm-agent-card--market,
+.cm-agent-card--market-full {
+  height: var(--cm-market-card-height, clamp(26rem, 46vw, 32rem));
+  min-height: 0;
+}
+
+.cm-agent-card--market > .cm-agent-card__main,
+.cm-agent-card--market-full > .cm-agent-card__main {
+  display: grid;
+  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
+  height: 100%;
+  min-height: 0;
+  gap: clamp(0.64rem, 1.45cqi, 0.9rem);
+  padding: clamp(0.82rem, 1.85cqi, 1.05rem);
+  align-content: stretch;
+  overflow: hidden;
+}
+
+.cm-agent-card--market .cm-agent-card__header,
+.cm-agent-card--market-full .cm-agent-card__header {
+  gap: clamp(0.68rem, 1.55cqi, 0.9rem);
+  align-items: flex-start;
+}
+
+.cm-agent-card--market .cm-agent-card__avatar,
+.cm-agent-card--market-full .cm-agent-card__avatar {
+  width: clamp(2.65rem, 8.5cqi, 3.25rem);
+  height: clamp(2.65rem, 8.5cqi, 3.25rem);
+}
+
+.cm-agent-card--market .cm-agent-card__copy,
+.cm-agent-card--market-full .cm-agent-card__copy {
+  gap: 0.38rem;
+}
+
+.cm-agent-card--market .cm-agent-card__title,
+.cm-agent-card--market-full .cm-agent-card__title {
+  font-size: clamp(0.94rem, 2.55cqi, 1.08rem);
+  line-height: 1.12;
+}
+
+.cm-agent-card--market .cm-agent-card__identity,
+.cm-agent-card--market-full .cm-agent-card__identity {
+  gap: 0.26rem;
+}
+
+.cm-agent-card--market .cm-agent-card__identity-head,
+.cm-agent-card--market-full .cm-agent-card__identity-head {
+  flex-wrap: wrap;
+}
+
+.cm-agent-card--market .cm-agent-card__identity-name,
+.cm-agent-card--market-full .cm-agent-card__identity-name,
+.cm-agent-card--market .cm-agent-card__identity-address,
+.cm-agent-card--market-full .cm-agent-card__identity-address,
+.cm-agent-card--market .cm-agent-card__model-name,
+.cm-agent-card--market-full .cm-agent-card__model-name,
+.cm-agent-card--market .cm-agent-card__metric-value,
+.cm-agent-card--market-full .cm-agent-card__metric-value,
+.cm-agent-card--market .cm-agent-card__endpoint-code,
+.cm-agent-card--market-full .cm-agent-card__endpoint-code,
+.cm-agent-card--market .cm-agent-card__creator-value,
+.cm-agent-card--market-full .cm-agent-card__creator-value {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow-wrap: normal;
+  word-break: normal;
+}
+
+.cm-agent-card--market .cm-agent-card__model,
+.cm-agent-card--market-full .cm-agent-card__model {
+  max-width: 100%;
+  font-size: clamp(0.58rem, 1.85cqi, 0.66rem);
+}
+
+.cm-agent-card--market .cm-agent-card__description,
+.cm-agent-card--market-full .cm-agent-card__description {
+  display: -webkit-box;
+  min-height: calc(3 * 1.36em);
+  max-height: calc(3 * 1.36em);
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  font-size: clamp(0.72rem, 1.9cqi, 0.82rem);
+  line-height: 1.36;
+}
+
+.cm-agent-card--market .cm-agent-card__badges,
+.cm-agent-card--market-full .cm-agent-card__badges,
+.cm-agent-card--market .cm-agent-card__tags,
+.cm-agent-card--market-full .cm-agent-card__tags {
+  gap: 0.34rem;
+  overflow: hidden;
+}
+
+.cm-agent-card--market .cm-agent-card__badges,
+.cm-agent-card--market-full .cm-agent-card__badges {
+  max-height: 4.1rem;
+}
+
+.cm-agent-card--market .cm-agent-card__badge,
+.cm-agent-card--market-full .cm-agent-card__badge,
+.cm-agent-card--market .cm-agent-card__tag,
+.cm-agent-card--market-full .cm-agent-card__tag {
+  min-height: clamp(1.38rem, 4.6cqi, 1.62rem);
+  padding: 0.28rem 0.52rem;
+  font-size: clamp(0.54rem, 1.65cqi, 0.62rem);
+  letter-spacing: 0.07em;
+  white-space: nowrap;
+}
+
+.cm-agent-card--market .cm-agent-card__metrics,
+.cm-agent-card--market-full .cm-agent-card__metrics {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: clamp(0.36rem, 1cqi, 0.52rem);
+}
+
+.cm-agent-card--market .cm-agent-card__metric,
+.cm-agent-card--market-full .cm-agent-card__metric {
+  min-width: 0;
+  min-height: clamp(2.52rem, 7cqi, 3rem);
+  gap: 0.38rem;
+  padding: clamp(0.42rem, 1.2cqi, 0.58rem);
+  border-color: hsl(var(--primary) / 0.15);
+  background:
+    radial-gradient(circle at 0% 0%, hsl(var(--primary) / 0.08), transparent 42%),
+    hsl(221 50% 9% / 0.34);
+}
+
+.cm-agent-card--market .cm-agent-card__metric-icon svg,
+.cm-agent-card--market-full .cm-agent-card__metric-icon svg {
+  width: 0.78rem;
+  height: 0.78rem;
+}
+
+.cm-agent-card--market .cm-agent-card__metric-label,
+.cm-agent-card--market-full .cm-agent-card__metric-label {
+  font-size: clamp(0.48rem, 1.45cqi, 0.56rem);
+  letter-spacing: 0.08em;
+}
+
+.cm-agent-card--market .cm-agent-card__metric-value,
+.cm-agent-card--market-full .cm-agent-card__metric-value {
+  font-size: clamp(0.62rem, 1.75cqi, 0.72rem);
+}
+
+.cm-agent-card--market .cm-agent-card__tags-block,
+.cm-agent-card--market-full .cm-agent-card__tags-block {
+  align-self: stretch;
+  align-content: start;
+  gap: 0.34rem;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.cm-agent-card--market .cm-agent-card__tags-title,
+.cm-agent-card--market-full .cm-agent-card__tags-title {
+  display: block;
+}
+
+.cm-agent-card--market .cm-agent-card__footer,
+.cm-agent-card--market-full .cm-agent-card__footer {
+  padding-top: clamp(0.52rem, 1.2cqi, 0.74rem);
+}
+
+.cm-agent-card--market .cm-agent-card__footer-stack,
+.cm-agent-card--market-full .cm-agent-card__footer-stack {
+  grid-template-columns: minmax(0, 1fr) minmax(5rem, 0.42fr);
+  align-items: end;
+  gap: clamp(0.48rem, 1.25cqi, 0.68rem);
+}
+
+.cm-agent-card--market .cm-agent-card__endpoint,
+.cm-agent-card--market-full .cm-agent-card__endpoint,
+.cm-agent-card--market .cm-agent-card__creator,
+.cm-agent-card--market-full .cm-agent-card__creator {
+  gap: 0.34rem;
+  min-width: 0;
+}
+
+.cm-agent-card--market .cm-agent-card__endpoint-label,
+.cm-agent-card--market-full .cm-agent-card__endpoint-label,
+.cm-agent-card--market .cm-agent-card__creator-label,
+.cm-agent-card--market-full .cm-agent-card__creator-label {
+  display: block;
+}
+
+.cm-agent-card--market .cm-agent-card__endpoint-row,
+.cm-agent-card--market-full .cm-agent-card__endpoint-row {
+  min-height: 2.05rem;
+  padding: 0.32rem 0.42rem 0.32rem 0.56rem;
+  gap: 0.32rem;
+  border-color: hsl(var(--primary) / 0.15);
+}
+
+.cm-agent-card--market .cm-agent-card__creator-value,
+.cm-agent-card--market-full .cm-agent-card__creator-value,
+.cm-agent-card--market .cm-agent-card__endpoint-code,
+.cm-agent-card--market-full .cm-agent-card__endpoint-code {
+  font-size: clamp(0.58rem, 1.62cqi, 0.68rem);
+}
+
+.cm-agent-card--market .cm-agent-card__creator-value,
+.cm-agent-card--market-full .cm-agent-card__creator-value {
+  display: block;
+  text-align: right;
 }
 
 .cm-agent-card__metric,

package/dist/css/market.css

@@ -271,3 +271,69 @@
     font-size: 10px;
   }
 }
+
+/* ── Launch Recovery Shared Market Primitives ── */
+.cm-market-control-rail {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: clamp(0.5rem, 1.25cqi, 0.8rem);
+  min-width: 0;
+}
+
+.cm-market-control-rail__search {
+  flex: 1 1 18rem;
+  min-width: min(100%, 13rem);
+}
+
+.cm-market-control-rail__tabs,
+.cm-market-control-rail__actions {
+  display: flex;
+  align-items: center;
+  gap: clamp(0.4rem, 1cqi, 0.65rem);
+  min-width: 0;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+}
+
+.cm-market-control-rail__tabs {
+  flex: 0 1 auto;
+}
+
+.cm-market-control-rail__actions {
+  flex: 0 0 auto;
+}
+
+.cm-filter-bar {
+  padding: clamp(0.44rem, 1cqi, 0.58rem);
+  border: 1px solid hsl(var(--primary) / 0.15);
+  border-radius: 14px;
+  background:
+    radial-gradient(circle at 0% 0%, hsl(var(--primary) / 0.09), transparent 32%),
+    hsl(221 50% 9% / 0.32);
+  box-shadow: inset 0 1px 0 hsl(0 0% 100% / 0.05);
+}
+
+.cm-stat-cell,
+.cm-stat-grid__cell {
+  border-color: hsl(var(--primary) / 0.15);
+  background:
+    radial-gradient(circle at 0% 0%, hsl(var(--primary) / 0.08), transparent 42%),
+    hsl(221 50% 9% / 0.34);
+  box-shadow: inset 0 1px 0 hsl(0 0% 100% / 0.045);
+}
+
+@container (max-width: 42rem) {
+  .cm-market-control-rail {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .cm-market-control-rail__search,
+  .cm-market-control-rail__tabs,
+  .cm-market-control-rail__actions {
+    width: 100%;
+    flex: 1 1 auto;
+    justify-content: stretch;
+  }
+}