@compose-market/theme 0.0.99 → 0.1.1

package/dist/css/shell.css

@@ -2212,39 +2212,39 @@
   align-items: center;
   gap: 0.42rem;
   min-width: 0;
-  flex: 1 1 18rem;
-  overflow: hidden;
+  flex: 1 1 16rem;
+  overflow: visible;
 }
 
-.cm-playground__chip-section {
+.cm-playground__chip-dropdown {
   display: flex;
   align-items: center;
-  gap: 0.36rem;
   min-width: 0;
-  overflow: auto hidden;
-  scrollbar-width: none;
-}
-
-.cm-playground__chip-section::-webkit-scrollbar {
-  display: none;
-}
-
-.cm-playground__chip-section--types {
-  flex: 1 1 auto;
+  flex: 0 1 auto;
 }
 
-.cm-playground__chip-section--providers {
-  flex: 0 1 38%;
+.cm-playground__chip-menu {
+  width: min(92vw, 34rem);
+  max-height: min(28rem, var(--radix-dropdown-menu-content-available-height));
+  border-color: hsl(var(--primary) / 0.18);
+  background:
+    linear-gradient(145deg, hsl(226 21% 23% / 0.92), hsl(221 50% 9% / 0.96)),
+    hsl(var(--popover));
+  box-shadow:
+    0 18px 44px hsl(221 50% 3% / 0.48),
+    inset 0 1px 0 hsl(0 0% 100% / 0.055);
+  backdrop-filter: blur(18px) saturate(1.08);
 }
 
-.cm-playground__chip-label {
-  color: hsl(var(--muted-foreground));
-  font-family: var(--font-mono), monospace;
-  font-size: 0.62rem;
-  font-weight: 800;
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
-  white-space: nowrap;
+.cm-playground__chip-menu-grid {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 0.36rem;
+  max-height: 23rem;
+  overflow-y: auto;
+  padding: 0.2rem;
+  scrollbar-width: thin;
 }
 
 .cm-playground__divider {
@@ -2330,6 +2330,56 @@
   flex: 0 0 auto;
   padding: 0 0.58rem;
   white-space: nowrap;
+  cursor: pointer;
+}
+
+.cm-playground__chip-trigger {
+  min-height: 2.2rem;
+  max-width: min(100%, 14rem);
+  padding: 0 0.72rem;
+}
+
+.cm-model-badge {
+  border-color: hsl(188 95% 43% / 0.28);
+  background: hsl(188 95% 43% / 0.08);
+  color: hsl(188 95% 78%);
+}
+
+.cm-model-badge .cm-model-badge__dot {
+  background: hsl(188 95% 58%);
+  box-shadow: 0 0 12px hsl(188 95% 58% / 0.56);
+}
+
+.cm-playground__chip-trigger.cm-playground__chip-trigger--type {
+  border-color: hsl(292 85% 55% / 0.28);
+  background: hsl(292 85% 55% / 0.08);
+  color: hsl(292 85% 80%);
+}
+
+.cm-playground__chip-trigger.cm-playground__chip-trigger--provider {
+  border-color: hsl(148 75% 46% / 0.28);
+  background: hsl(148 75% 46% / 0.08);
+  color: hsl(148 75% 74%);
+}
+
+.cm-playground__chip-menu .cm-playground__chip {
+  width: 100%;
+  max-width: 100%;
+  justify-content: flex-start;
+}
+
+.cm-playground__chip-text {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cm-playground__chip-chevron {
+  width: 0.74rem;
+  height: 0.74rem;
+  flex: 0 0 auto;
+  color: hsl(var(--muted-foreground));
 }
 
 .cm-playground__chip-icon {
@@ -2408,7 +2458,7 @@
 }
 
 .cm-model-badge[data-placeholder="true"] {
-  color: hsl(var(--muted-foreground));
+  color: hsl(188 95% 78%);
   font-weight: 500;
 }
 
@@ -2851,15 +2901,16 @@
   .cm-playground__chips {
     flex-basis: 100%;
     order: 4;
+    overflow: visible;
   }
 
-  .cm-playground__chip-label,
-  .cm-playground__divider {
-    display: none;
+  .cm-playground__chip-dropdown {
+    flex: 1 1 0;
   }
 
-  .cm-playground__chip-section--providers {
-    flex-basis: 42%;
+  .cm-playground__chip-trigger {
+    width: 100%;
+    max-width: none;
   }
 
   .cm-chat-message__bubble {

package/dist/css/workflows.css

@@ -706,6 +706,407 @@
   }
 }
 
+/* Stream pocket */
+.cm-stream-pocket {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  border: 1px solid hsl(var(--sidebar-border));
+  border-radius: 8px;
+  background: hsl(var(--card) / 0.92);
+  padding: 10px;
+}
+
+.cm-stream-pocket__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.cm-stream-pocket__copy {
+  min-width: 0;
+  flex: 1;
+}
+
+.cm-stream-pocket__title {
+  margin: 0;
+  color: hsl(var(--foreground));
+  font-size: 12px;
+  font-weight: 650;
+  line-height: 1.25;
+}
+
+.cm-stream-pocket__summary {
+  margin-top: 3px;
+  color: hsl(var(--muted-foreground));
+  font-size: 11px;
+  line-height: 1.35;
+}
+
+.cm-stream-pocket__metadata {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 6px;
+  color: hsl(var(--muted-foreground));
+  font-family: var(--font-mono, monospace);
+  font-size: 10px;
+}
+
+.cm-stream-pocket__body {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.cm-stream-node {
+  border: 1px solid hsl(var(--sidebar-border));
+  border-radius: 6px;
+  background: hsl(var(--background) / 0.42);
+  overflow: hidden;
+}
+
+.cm-stream-node__summary-row {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  min-height: 28px;
+  padding: 6px 8px;
+  cursor: pointer;
+  list-style: none;
+}
+
+.cm-stream-node__summary-row::-webkit-details-marker {
+  display: none;
+}
+
+.cm-stream-node__marker {
+  width: 7px;
+  height: 7px;
+  border-radius: 999px;
+  background: hsl(var(--accent));
+  opacity: 0.72;
+  flex-shrink: 0;
+}
+
+.cm-stream-node[data-status="failed"] .cm-stream-node__marker {
+  background: hsl(0 84% 62%);
+}
+
+.cm-stream-node[data-status="completed"] .cm-stream-node__marker {
+  background: hsl(var(--cm-tone-green, 142 76% 55%));
+}
+
+.cm-stream-node[data-kind="warning"] .cm-stream-node__marker,
+.cm-stream-node[data-kind="debug"][data-status="info"] .cm-stream-node__marker {
+  background: hsl(38 92% 55%);
+}
+
+.cm-stream-node[data-kind="error"] .cm-stream-node__marker {
+  background: hsl(0 84% 62%);
+}
+
+.cm-stream-node[data-kind="catalog"] .cm-stream-node__marker {
+  background: hsl(190 88% 55%);
+}
+
+.cm-stream-node[data-kind="receipt"],
+.cm-stream-node[data-kind="payment"] {
+  border-color: hsl(var(--cm-tone-green, 142 76% 55%) / 0.28);
+}
+
+.cm-stream-node[data-kind="receipt"] .cm-stream-node__marker,
+.cm-stream-node[data-kind="payment"] .cm-stream-node__marker {
+  background: hsl(var(--cm-tone-green, 142 76% 55%));
+}
+
+.cm-stream-node__title {
+  min-width: 0;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: hsl(var(--foreground));
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.cm-stream-node__content {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  border-top: 1px solid hsl(var(--sidebar-border));
+  padding: 7px 8px 8px;
+}
+
+.cm-stream-node__summary {
+  white-space: pre-wrap;
+  color: hsl(var(--muted-foreground));
+  font-size: 11px;
+  line-height: 1.4;
+}
+
+.cm-stream-node__metadata {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  color: hsl(var(--muted-foreground));
+  font-family: var(--font-mono, monospace);
+  font-size: 10px;
+}
+
+.cm-stream-node__children {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding-left: 10px;
+  border-left: 1px solid hsl(var(--sidebar-border));
+}
+
+.cm-stream-artifact {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  border: 1px solid hsl(var(--accent) / 0.22);
+  border-radius: 6px;
+  background: hsl(var(--accent) / 0.05);
+  padding: 7px 8px;
+}
+
+.cm-stream-artifact__row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  color: hsl(var(--muted-foreground));
+  font-family: var(--font-mono, monospace);
+  font-size: 10px;
+}
+
+.cm-stream-artifact__kind {
+  color: hsl(var(--accent));
+  text-transform: uppercase;
+}
+
+.cm-stream-artifact__link {
+  color: hsl(var(--accent));
+  font-size: 11px;
+  text-decoration: none;
+}
+
+.cm-stream-artifact__link:hover {
+  text-decoration: underline;
+}
+
+.cm-stream-source {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  border: 1px solid hsl(190 88% 55% / 0.22);
+  border-radius: 6px;
+  background: hsl(190 88% 55% / 0.06);
+  padding: 7px 8px;
+  color: inherit;
+  text-decoration: none;
+}
+
+.cm-stream-source:hover {
+  border-color: hsl(190 88% 55% / 0.42);
+}
+
+.cm-stream-source__title-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+}
+
+.cm-stream-source__marker {
+  flex-shrink: 0;
+  color: hsl(190 88% 65%);
+  font-family: var(--font-mono, monospace);
+  font-size: 10px;
+}
+
+.cm-stream-source__title {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: hsl(var(--foreground));
+  font-size: 11px;
+  font-weight: 650;
+}
+
+.cm-stream-source__snippet {
+  color: hsl(var(--muted-foreground));
+  font-size: 11px;
+  line-height: 1.4;
+}
+
+.cm-stream-source__metadata {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  color: hsl(var(--muted-foreground));
+  font-family: var(--font-mono, monospace);
+  font-size: 10px;
+}
+
+.cm-stream-notice {
+  border: 1px solid hsl(var(--accent) / 0.24);
+  border-radius: 6px;
+  background: hsl(var(--accent) / 0.06);
+  padding: 7px 8px;
+}
+
+.cm-stream-notice[data-tone="warning"] {
+  border-color: hsl(38 92% 55% / 0.34);
+  background: hsl(38 92% 55% / 0.08);
+}
+
+.cm-stream-notice[data-tone="error"] {
+  border-color: hsl(0 84% 62% / 0.34);
+  background: hsl(0 84% 62% / 0.08);
+}
+
+.cm-stream-notice__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.cm-stream-notice__title {
+  color: hsl(var(--foreground));
+  font-size: 11px;
+  font-weight: 650;
+}
+
+.cm-stream-notice__metadata {
+  color: hsl(var(--muted-foreground));
+  font-family: var(--font-mono, monospace);
+  font-size: 10px;
+}
+
+.cm-stream-notice__body {
+  margin-top: 4px;
+  color: hsl(var(--muted-foreground));
+  font-size: 11px;
+  line-height: 1.4;
+}
+
+.cm-stream-receipt,
+.cm-stream-session {
+  border: 1px solid hsl(var(--cm-tone-green, 142 76% 55%) / 0.24);
+  border-radius: 6px;
+  background: hsl(var(--cm-tone-green, 142 76% 55%) / 0.06);
+  padding: 7px 8px;
+}
+
+.cm-stream-receipt__grid,
+.cm-stream-session__body {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+  gap: 6px;
+  color: hsl(var(--muted-foreground));
+  font-family: var(--font-mono, monospace);
+  font-size: 10px;
+}
+
+.cm-stream-receipt__grid span,
+.cm-stream-session__body span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cm-stream-receipt__grid b,
+.cm-stream-session__body b {
+  display: block;
+  margin-bottom: 2px;
+  color: hsl(var(--foreground));
+  font-family: inherit;
+  font-weight: 650;
+}
+
+.cm-stream-receipt__body {
+  margin-top: 6px;
+}
+
+.cm-stream-session__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 6px;
+}
+
+.cm-stream-session__title {
+  color: hsl(var(--foreground));
+  font-size: 11px;
+  font-weight: 650;
+}
+
+.cm-stream-session__status {
+  border: 1px solid hsl(var(--cm-tone-green, 142 76% 55%) / 0.28);
+  border-radius: 4px;
+  padding: 1px 5px;
+  color: hsl(var(--cm-tone-green, 142 76% 65%));
+  font-family: var(--font-mono, monospace);
+  font-size: 9px;
+  text-transform: uppercase;
+}
+
+.cm-stream-transcript {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  border-left: 2px solid hsl(var(--accent) / 0.38);
+  padding: 4px 0 4px 8px;
+}
+
+.cm-stream-transcript__time {
+  flex-shrink: 0;
+  color: hsl(var(--muted-foreground));
+  font-family: var(--font-mono, monospace);
+  font-size: 10px;
+}
+
+.cm-stream-transcript__text {
+  min-width: 0;
+  color: hsl(var(--foreground));
+  font-size: 11px;
+  line-height: 1.4;
+}
+
+.cm-stream-media {
+  width: 100%;
+  max-width: 100%;
+  border-radius: 6px;
+  border: 1px solid hsl(var(--sidebar-border));
+  background: hsl(var(--background) / 0.5);
+}
+
+.cm-stream-media--image {
+  display: block;
+  max-height: 360px;
+  object-fit: contain;
+}
+
+.cm-stream-media--partial {
+  filter: blur(6px) saturate(0.82);
+}
+
+.cm-stream-media--audio {
+  min-height: 36px;
+}
+
+.cm-stream-media--video {
+  max-height: 360px;
+}
+
 /* Skeleton */
 .cm-workflow-card-skeleton {
   border: 1px solid hsl(var(--accent) / 0.3);