@volter-ai-dev/supercode-ui 0.1.70 → 0.1.72

package/styles.css

@@ -243,3 +243,107 @@
   .scui-message-meta button,.scui-code-copy { min-width:36px; min-height:36px }
   .scui-latest { min-height:36px; padding-inline:12px }
 }
+
+/* A spacious starter uses the same composer and launch semantics as the messenger. */
+.scui-starter { background: var(--scui-bg-raised); justify-content: center; overflow-y: auto; }
+.scui-starter .scui-new { flex: none; margin: 0; padding: 24px 24px 18px; }
+.scui-starter .scui-compose { width: min(640px, 100%); margin: 0 auto; padding: 0 24px 32px; border-top: 0; background: transparent; }
+.scui-starter .scui-envelope { padding: 12px; border-radius: 16px; background: var(--scui-bg); box-shadow: 0 2px 12px #00000008; }
+.scui-starter .scui-error, .scui-starter .scui-operation { width: min(640px, 100%); margin: 8px auto; }
+.scui-environment { display: inline-flex; align-self: start; width: fit-content; margin-bottom: 10px; padding: 3px 10px; border: 1px solid var(--scui-border); border-radius: 999px; color: var(--scui-muted); font-size: 12px; }
+.scui-starter-suggestions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
+.scui-starter-suggestions button { min-height: 30px; padding: 4px 12px; border: 1px solid var(--scui-border); border-radius: 999px; color: var(--scui-muted); background: var(--scui-bg); font: inherit; font-size: 12px; cursor: pointer; }
+.scui-starter-suggestions button:hover { color: var(--scui-fg); background: var(--scui-fill); }
+@media (max-width: 480px) { .scui-starter .scui-compose { padding: 0 12px 16px; } }
+
+/* Workflow and orchestration components share the consumer theme contract. */
+.scui-domain { background:var(--scui-bg); border:1px solid var(--scui-border); border-radius:12px; overflow:hidden; container-type:inline-size; }
+.scui-domain button,.scui-domain input,.scui-domain select { font:inherit; color:inherit; }
+.scui-domain button,.scui-domain select { background:var(--scui-bg); border:1px solid var(--scui-border-strong); border-radius:6px; padding:7px 11px; cursor:pointer; }
+.scui-domain button:hover { background:var(--scui-bg-raised); }
+.scui-domain button:disabled { cursor:default; color:var(--scui-muted); }
+.scui-domain :focus-visible { outline:2px solid var(--scui-accent); outline-offset:3px; }
+.scui-domain h1 { font-size:22px; line-height:1.25; margin:6px 0; letter-spacing:-.4px; }
+.scui-domain h2 { font-size:19px; line-height:1.35; margin:12px 0; }
+.scui-domain h3 { font-size:13px; margin:22px 0 8px; }
+.scui-domain p { margin:8px 0; }
+.scui-domain-header { padding:24px; display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }
+.scui-domain-header p,.scui-domain-meta,.scui-domain-footnote { color:var(--scui-muted); font-size:12px; }
+.scui-domain-eyebrow { font-size:10px; letter-spacing:1.2px; color:var(--scui-muted); }
+.scui-domain-badge { display:inline-flex; align-items:center; gap:6px; padding:3px 8px; border-radius:5px; background:var(--scui-bg-raised); font-size:12px; white-space:nowrap; }
+.scui-domain-badge::before { content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }
+.scui-domain-positive { color:var(--scui-positive); }
+.scui-domain-danger { color:var(--scui-danger); }
+.scui-domain-warning { color:var(--scui-fg); }
+.scui-domain-warning::before { background:var(--scui-warning); }
+.scui-domain-toolbar { padding:12px 24px; border-block:1px solid var(--scui-border); display:flex; align-items:flex-end; justify-content:space-between; gap:16px; }
+.scui-domain-search,.scui-domain-filter { display:grid; gap:5px; font-size:12px; }
+.scui-domain-search { flex:1; max-width:350px; }
+.scui-domain-search input { width:100%; min-width:0; padding:8px 10px; background:var(--scui-bg); border:1px solid var(--scui-border-strong); border-radius:6px; }
+.scui-domain-switch { display:flex; gap:4px; }
+.scui-domain-switch [aria-pressed=true] { background:var(--scui-fill); }
+.scui-domain-workspace { display:grid; min-height:380px; }
+.scui-domain-workspace.scui-domain-has-detail { grid-template-columns:minmax(0,1fr) minmax(320px,40%); }
+.scui-domain-collection { min-width:0; padding:20px; overflow:auto; }
+.scui-domain-board { display:grid; grid-template-columns:repeat(4,minmax(190px,1fr)); gap:12px; }
+.scui-domain-lane { background:var(--scui-bg-raised); padding:10px; border-radius:8px; min-height:290px; }
+.scui-domain-lane h2 { font-size:12px; display:flex; justify-content:space-between; margin:0 0 12px; }
+.scui-domain-lane h2 span { color:var(--scui-muted); font-weight:400; }
+.scui-domain .scui-domain-task { display:grid; gap:9px; width:100%; text-align:left; border-color:var(--scui-border); padding:12px; margin:0 0 8px; }
+.scui-domain-task strong { font-size:13px; font-weight:550; }
+.scui-domain-list { display:grid; }
+.scui-domain-detail { border-left:1px solid var(--scui-border); padding:20px 24px; overflow-wrap:anywhere; }
+.scui-domain-detail-top,.scui-domain-inline { display:flex; align-items:center; justify-content:space-between; gap:10px; }
+.scui-domain-inline { justify-content:flex-start; }
+.scui-domain-callout { padding:12px 14px; margin:20px 0; border-left:3px solid var(--scui-warning); background:var(--scui-bg-raised); }
+.scui-domain-callout h3 { margin:0; }
+.scui-domain .scui-domain-related { display:grid; text-align:left; width:100%; font-size:13px; gap:4px; }
+.scui-domain-related span { color:var(--scui-muted); font-size:12px; }
+.scui-domain-timeline { padding-left:20px; }
+.scui-domain-timeline li { padding:0 0 18px 4px; }
+.scui-domain-timeline strong { font-size:13px; }
+.scui-domain summary { cursor:pointer; color:var(--scui-accent); padding-block:8px; }
+.scui-domain-footnote { border-top:1px solid var(--scui-border); padding-top:16px; }
+.scui-domain-empty { text-align:center; padding:40px 16px; color:var(--scui-muted); }
+.scui-domain-banner { padding:12px 24px; background:var(--scui-bg-raised); border-left:3px solid var(--scui-accent); }
+.scui-domain-schedule { display:flex; gap:36px; padding:0 24px 24px; flex-wrap:wrap; }
+.scui-domain-schedule > div { display:grid; gap:5px; }
+.scui-domain-schedule strong { font-size:13px; font-weight:500; }
+.scui-domain .scui-domain-run { width:100%; display:grid; grid-template-columns:minmax(150px,1fr) 105px 90px; gap:12px; text-align:left; border:0; border-bottom:1px solid var(--scui-border); border-radius:0; padding:16px 8px; }
+.scui-domain-run > span { display:grid; justify-items:start; align-content:center; gap:4px; }
+.scui-domain-run strong { font-size:13px; font-weight:500; }
+.scui-domain dl { display:grid; grid-template-columns:1fr 1fr; gap:8px; font-size:12px; }
+.scui-domain dt { color:var(--scui-muted); }
+.scui-domain dd { margin:0; }
+@container (max-width:650px) {
+  .scui-domain-header,.scui-domain-toolbar { padding:16px; }
+  .scui-domain-toolbar { flex-wrap:wrap; align-items:center; }
+  .scui-domain-header h1 { font-size:20px; }
+  .scui-domain-workspace.scui-domain-has-detail { grid-template-columns:1fr; }
+  .scui-domain-has-detail > .scui-domain-collection { display:none; }
+  .scui-domain-detail { border-left:0; padding:16px; }
+  .scui-domain-collection { padding:12px; }
+  .scui-domain .scui-domain-run { grid-template-columns:1fr 1fr; }
+  .scui-domain-run > span:first-child { grid-column:1 / -1; }
+  .scui-domain-schedule { gap:16px; padding:0 16px 20px; }
+}
+.scui-domain { display:block; width:100%; height:auto; min-width:0; font-size:14px; line-height:1.5; overflow-wrap:anywhere; }
+.scui-domain button { min-height:36px; }
+.scui-domain input,.scui-domain select { min-height:40px; }
+.scui-domain pre { overflow:auto; max-width:100%; white-space:pre-wrap; overflow-wrap:anywhere; }
+.scui-domain select { max-width:100%; }
+.scui-inventory-nav,.scui-inventory-actions { display:flex; flex-wrap:wrap; gap:8px; padding:12px 24px; }
+.scui-inventory-nav [aria-current=page] { background:var(--scui-fill); font-weight:600; }
+.scui-inventory-rows { display:grid; gap:12px; }
+.scui-inventory-rows > article { min-width:0; border:1px solid var(--scui-border); border-radius:8px; padding:16px; }
+.scui-inventory-rows h2 { font-size:16px; margin:0; }
+.scui-inventory-rows button { text-align:left; max-width:100%; white-space:normal; }
+.scui-source-inspector button,.scui-inventory-actions button { min-height:44px; }
+.scui-source-inspector input { font-size:16px; }
+.scui-inventory-memory-search { display:flex; flex-wrap:wrap; align-items:end; gap:8px; margin-bottom:16px; }
+.scui-inventory-memory-search label { display:grid; gap:4px; max-width:100%; }
+.scui-inventory-memory-search input { min-width:0; max-width:100%; background:var(--scui-bg); color:var(--scui-fg); border:1px solid var(--scui-border-strong); padding:8px; border-radius:6px; }
+.scui-domain-header > div { min-width:0; }
+.scui-domain-header { flex-wrap:wrap; }
+.scui-domain-workspace { align-items:start; }
+@media (pointer:coarse) { .scui-domain button { min-height:44px; } .scui-domain input,.scui-domain select { min-height:44px; font-size:16px; } }