@compose-market/theme 0.0.6 → 0.0.72

package/dist/app/styles.js

@@ -0,0 +1,67 @@
+export const appCss = `/**
+ * Compose.Market App Chrome
+ * @compose-market/theme/css/app
+ */
+
+.cm-app-shell {
+  position: relative;
+  min-height: 100vh;
+  background: hsl(var(--background));
+  color: hsl(var(--foreground));
+  overflow-x: hidden;
+}
+
+.cm-app-shell__backdrop {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 0;
+  overflow: hidden;
+}
+
+.cm-app-shell__grid,
+.cm-app-shell__gradient,
+.cm-app-shell__scanline {
+  position: absolute;
+  inset: 0;
+}
+
+.cm-app-shell__grid {
+  background-size: 40px 40px;
+  background-image:
+    linear-gradient(to right, hsl(217 33% 17% / 0.3) 1px, transparent 1px),
+    linear-gradient(to bottom, hsl(217 33% 17% / 0.3) 1px, transparent 1px);
+  transition: transform 140ms linear;
+}
+
+.cm-app-shell__gradient {
+  background-image:
+    radial-gradient(circle at 50% 0%, hsl(270 60% 10% / 0.2), transparent 70%),
+    linear-gradient(to bottom, transparent, hsl(var(--background)));
+}
+
+.cm-app-shell__scanline {
+  top: -100px;
+  height: 100px;
+  background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, hsl(188 95% 43% / 0.05) 50%, rgba(0, 0, 0, 0) 100%);
+  opacity: 0.1;
+  animation: cm-app-scanline 8s linear infinite;
+}
+
+@keyframes cm-app-scanline {
+  0% {
+    transform: translateY(-100px);
+  }
+
+  100% {
+    transform: translateY(calc(100vh + 100px));
+  }
+}
+
+.cm-app-shell__content {
+  position: relative;
+  z-index: 1;
+  min-height: 100vh;
+}
+`;
+//# sourceMappingURL=styles.js.map

package/dist/app/styles.js.map

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

package/dist/css/agents.css

@@ -0,0 +1,468 @@
+/**
+ * Compose.Market Agent Card
+ * @compose-market/theme/css/agents
+ */
+
+.cm-agent-card {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 1rem;
+  border-radius: 0.55rem;
+  border: 1px solid hsl(var(--border) / 0.75);
+  background: linear-gradient(145deg, hsl(var(--card) / 0.82), hsl(var(--card) / 0.48));
+  box-shadow:
+    0 4px 24px -1px hsl(0 0% 0% / 0.3),
+    inset 0 1px 0 hsl(0 0% 100% / 0.05);
+  overflow: hidden;
+}
+
+.cm-agent-card--interactive {
+  transition:
+    transform 180ms ease,
+    border-color 180ms ease,
+    box-shadow 180ms ease;
+}
+
+.cm-agent-card--interactive:hover {
+  transform: translateY(-2px);
+  border-color: hsl(var(--primary) / 0.45);
+  box-shadow:
+    0 16px 36px hsl(240 30% 2% / 0.28),
+    0 0 24px hsl(var(--primary) / 0.14),
+    inset 0 1px 0 hsl(0 0% 100% / 0.05);
+}
+
+.cm-agent-card--running {
+  border-color: hsl(142 71% 45% / 0.48);
+  box-shadow:
+    0 10px 30px hsl(142 71% 45% / 0.08),
+    0 0 24px hsl(142 71% 45% / 0.12),
+    inset 0 1px 0 hsl(0 0% 100% / 0.05);
+}
+
+.cm-agent-card__main {
+  display: grid;
+  gap: 1rem;
+  padding: 1.2rem;
+}
+
+.cm-agent-card__header {
+  display: flex;
+  align-items: flex-start;
+  gap: 1rem;
+}
+
+.cm-agent-card__avatar {
+  width: 3.5rem;
+  height: 3.5rem;
+  border-radius: 999px;
+  border: 2px solid hsl(var(--primary) / 0.24);
+  background: radial-gradient(circle, hsl(var(--primary) / 0.12), transparent 72%);
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+  overflow: hidden;
+}
+
+.cm-agent-card__avatar-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.cm-agent-card__avatar-fallback {
+  font-family: var(--font-mono), monospace;
+  color: hsl(var(--primary));
+  font-size: 1rem;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.cm-agent-card__copy {
+  display: grid;
+  gap: 0.5rem;
+  min-width: 0;
+  flex: 1;
+}
+
+.cm-agent-card__title-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.6rem;
+}
+
+.cm-agent-card__title {
+  font-family: var(--font-display), sans-serif;
+  font-size: 1.05rem;
+  line-height: 1.1;
+  color: hsl(var(--foreground));
+  min-width: 0;
+}
+
+.cm-agent-card__header-action {
+  margin-left: auto;
+  flex-shrink: 0;
+}
+
+.cm-agent-card__description {
+  color: hsl(var(--muted-foreground));
+  font-size: 0.86rem;
+  line-height: 1.55;
+}
+
+.cm-agent-card__badges,
+.cm-agent-card__tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.45rem;
+}
+
+.cm-agent-card__badge,
+.cm-agent-card__tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  min-height: 1.7rem;
+  padding: 0 0.7rem;
+  border-radius: 999px;
+  border: 1px solid hsl(var(--border) / 0.72);
+  background: hsl(var(--muted) / 0.28);
+  color: hsl(var(--muted-foreground));
+  font-size: 0.72rem;
+  line-height: 1;
+}
+
+.cm-agent-card__badge-icon {
+  display: inline-flex;
+  align-items: center;
+}
+
+.cm-agent-card__badge[data-tone="cyan"],
+.cm-agent-card__tag {
+  border-color: hsl(var(--primary) / 0.28);
+  background: hsl(var(--primary) / 0.12);
+  color: hsl(var(--primary));
+}
+
+.cm-agent-card__badge[data-tone="green"] {
+  border-color: hsl(142 71% 45% / 0.28);
+  background: hsl(142 71% 45% / 0.12);
+  color: hsl(142 71% 45%);
+}
+
+.cm-agent-card__badge[data-tone="fuchsia"] {
+  border-color: hsl(292 85% 55% / 0.28);
+  background: hsl(292 85% 55% / 0.12);
+  color: hsl(292 85% 55%);
+}
+
+.cm-agent-card__badge[data-tone="warning"] {
+  border-color: hsl(42 100% 48% / 0.28);
+  background: hsl(42 100% 48% / 0.12);
+  color: hsl(42 100% 48%);
+}
+
+.cm-agent-card__badge[data-tone="danger"] {
+  border-color: hsl(var(--destructive) / 0.28);
+  background: hsl(var(--destructive) / 0.12);
+  color: hsl(var(--destructive));
+}
+
+.cm-agent-card__metrics {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(8.7rem, 1fr));
+  gap: 0.6rem;
+}
+
+.cm-agent-card__metric {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: 0.6rem;
+  align-items: center;
+  padding: 0.8rem 0.9rem;
+  border-radius: 0.35rem;
+  border: 1px solid hsl(var(--border) / 0.65);
+  background: hsl(var(--background) / 0.5);
+}
+
+.cm-agent-card__metric-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: hsl(var(--primary));
+}
+
+.cm-agent-card__metric-copy {
+  display: grid;
+  gap: 0.14rem;
+  min-width: 0;
+}
+
+.cm-agent-card__metric-label,
+.cm-agent-card__focus-label,
+.cm-agent-card__tags-title,
+.cm-agent-card__meta-label {
+  color: hsl(var(--muted-foreground));
+  font-size: 0.68rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.cm-agent-card__metric-value,
+.cm-agent-card__focus-value,
+.cm-agent-card__meta-value {
+  color: hsl(var(--foreground));
+  font-family: var(--font-mono), monospace;
+  font-size: 0.86rem;
+  line-height: 1.2;
+  overflow-wrap: anywhere;
+}
+
+.cm-agent-card__metric[data-tone="green"] .cm-agent-card__metric-icon,
+.cm-agent-card__metric[data-tone="green"] .cm-agent-card__metric-value {
+  color: hsl(142 71% 45%);
+}
+
+.cm-agent-card__metric[data-tone="cyan"] .cm-agent-card__metric-icon,
+.cm-agent-card__metric[data-tone="cyan"] .cm-agent-card__metric-value {
+  color: hsl(var(--primary));
+}
+
+.cm-agent-card__metric[data-tone="fuchsia"] .cm-agent-card__metric-icon,
+.cm-agent-card__metric[data-tone="fuchsia"] .cm-agent-card__metric-value {
+  color: hsl(292 85% 55%);
+}
+
+.cm-agent-card__metric[data-tone="warning"] .cm-agent-card__metric-icon,
+.cm-agent-card__metric[data-tone="warning"] .cm-agent-card__metric-value {
+  color: hsl(42 100% 48%);
+}
+
+.cm-agent-card__metric[data-tone="danger"] .cm-agent-card__metric-icon,
+.cm-agent-card__metric[data-tone="danger"] .cm-agent-card__metric-value {
+  color: hsl(var(--destructive));
+}
+
+.cm-agent-card__focus {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: 0.7rem;
+  align-items: center;
+  padding: 0.95rem 1rem;
+  border-radius: 0.4rem;
+  border: 1px solid hsl(var(--border) / 0.72);
+  background: linear-gradient(135deg, hsl(var(--primary) / 0.12), transparent 68%);
+}
+
+.cm-agent-card__focus-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: hsl(var(--primary));
+}
+
+.cm-agent-card__focus-copy,
+.cm-agent-card__tags-block {
+  display: grid;
+  gap: 0.35rem;
+}
+
+.cm-agent-card__meta {
+  display: grid;
+  gap: 0.55rem;
+}
+
+.cm-agent-card__meta-row {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.cm-agent-card__footer {
+  padding-top: 0.9rem;
+  border-top: 1px solid hsl(var(--border) / 0.55);
+}
+
+.cm-agent-card__footer-stack {
+  display: grid;
+  gap: 0.8rem;
+}
+
+.cm-agent-card__endpoint,
+.cm-agent-card__creator {
+  display: grid;
+  gap: 0.45rem;
+}
+
+.cm-agent-card__endpoint-label,
+.cm-agent-card__creator-label {
+  color: hsl(var(--muted-foreground));
+  font-size: 0.68rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.cm-agent-card__endpoint-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 0.6rem;
+  align-items: center;
+  padding: 0.65rem 0.75rem;
+  border-radius: 0.35rem;
+  border: 1px solid hsl(var(--border) / 0.65);
+  background: hsl(var(--background) / 0.42);
+}
+
+.cm-agent-card__endpoint-code,
+.cm-agent-card__creator-value {
+  color: hsl(var(--primary));
+  font-family: var(--font-mono), monospace;
+  font-size: 0.78rem;
+  overflow-wrap: anywhere;
+}
+
+.cm-agent-card__creator-value {
+  color: hsl(292 85% 55%);
+}
+
+.cm-agent-card__footer-link {
+  color: hsl(var(--primary));
+  font-size: 0.82rem;
+  font-weight: 600;
+  text-decoration: none;
+}
+
+.cm-agent-card__footer-link:hover {
+  text-decoration: underline;
+}
+
+.cm-agent-card__actions {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.55rem;
+  padding: 1.2rem 1.2rem 1.2rem 0;
+}
+
+.cm-agent-card__action-stack {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.55rem;
+  flex-wrap: wrap;
+}
+
+.cm-agent-card--skeleton {
+  pointer-events: none;
+}
+
+.cm-agent-card__skeleton {
+  border-radius: 0.75rem;
+  background: linear-gradient(90deg, hsl(var(--muted) / 0.55), hsl(var(--muted) / 0.8), hsl(var(--muted) / 0.55));
+  background-size: 220% 100%;
+  animation: cm-agent-card-shimmer 1.6s linear infinite;
+}
+
+.cm-agent-card__skeleton--avatar {
+  width: 3.5rem;
+  height: 3.5rem;
+  border-radius: 999px;
+}
+
+.cm-agent-card__skeleton--title {
+  height: 1.1rem;
+  width: 10rem;
+}
+
+.cm-agent-card__skeleton--line {
+  height: 0.82rem;
+  width: 100%;
+}
+
+.cm-agent-card__skeleton--line.short {
+  width: 76%;
+}
+
+.cm-agent-card__skeleton--metric {
+  min-height: 4.4rem;
+}
+
+.cm-agent-card__skeleton--focus {
+  min-height: 4.3rem;
+}
+
+.cm-agent-card__skeleton--tags {
+  min-height: 5.6rem;
+}
+
+.cm-agent-card__skeleton--footer {
+  min-height: 4.2rem;
+}
+
+@keyframes cm-agent-card-shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+@media (max-width: 720px) {
+  .cm-agent-card__actions {
+    padding: 0 1.2rem 1.2rem;
+    justify-content: flex-end;
+    flex-wrap: wrap;
+  }
+
+  .cm-agent-card__main {
+    padding: 0.85rem;
+    gap: 0.75rem;
+  }
+
+  .cm-agent-card__metrics {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 0.45rem;
+  }
+
+  .cm-agent-card__metric {
+    padding: 0.6rem 0.7rem;
+  }
+
+  .cm-agent-card__description {
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  .cm-agent-card__tags {
+    max-height: 3.5rem;
+    overflow: hidden;
+  }
+
+  .cm-agent-card__avatar {
+    width: 2.5rem;
+    height: 2.5rem;
+  }
+
+  .cm-agent-card__focus {
+    padding: 0.7rem 0.8rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .cm-agent-card__metrics {
+    grid-template-columns: 1fr;
+  }
+
+  .cm-agent-card__focus {
+    grid-template-columns: 1fr;
+    text-align: center;
+  }
+
+  .cm-agent-card__focus-icon {
+    justify-self: center;
+  }
+}

package/dist/css/app.css

@@ -0,0 +1,65 @@
+/**
+ * Compose.Market App Chrome
+ * @compose-market/theme/css/app
+ */
+
+.cm-app-shell {
+  position: relative;
+  min-height: 100vh;
+  background: hsl(var(--background));
+  color: hsl(var(--foreground));
+  overflow-x: hidden;
+}
+
+.cm-app-shell__backdrop {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 0;
+  overflow: hidden;
+}
+
+.cm-app-shell__grid,
+.cm-app-shell__gradient,
+.cm-app-shell__scanline {
+  position: absolute;
+  inset: 0;
+}
+
+.cm-app-shell__grid {
+  background-size: 40px 40px;
+  background-image:
+    linear-gradient(to right, hsl(217 33% 17% / 0.3) 1px, transparent 1px),
+    linear-gradient(to bottom, hsl(217 33% 17% / 0.3) 1px, transparent 1px);
+  transition: transform 140ms linear;
+}
+
+.cm-app-shell__gradient {
+  background-image:
+    radial-gradient(circle at 50% 0%, hsl(270 60% 10% / 0.2), transparent 70%),
+    linear-gradient(to bottom, transparent, hsl(var(--background)));
+}
+
+.cm-app-shell__scanline {
+  top: -100px;
+  height: 100px;
+  background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, hsl(188 95% 43% / 0.05) 50%, rgba(0, 0, 0, 0) 100%);
+  opacity: 0.1;
+  animation: cm-app-scanline 8s linear infinite;
+}
+
+@keyframes cm-app-scanline {
+  0% {
+    transform: translateY(-100px);
+  }
+
+  100% {
+    transform: translateY(calc(100vh + 100px));
+  }
+}
+
+.cm-app-shell__content {
+  position: relative;
+  z-index: 1;
+  min-height: 100vh;
+}

package/dist/css/index.css

@@ -9,3 +9,6 @@
 @import './dark.css';
 @import './shell.css';
 @import './effects.css';
+@import './app.css';
+@import './agents.css';
+@import './session.css';