@newco-ai-platform/ui 0.1.0 → 0.2.0

package/demo.html

@@ -8,6 +8,7 @@
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="./src/tokens.css">
+<link rel="stylesheet" href="./src/components.css">
 <style>
   * { box-sizing: border-box; }
   html, body { margin: 0; padding: 0; background: var(--surface); color: var(--on-surface); -webkit-font-smoothing: antialiased; }
@@ -433,8 +434,60 @@
     </div>
   </section>
 
+  <section class="section">
+    <div class="section-head">
+      <h2>Components (v0.2)</h2>
+      <span class="meta">From <code style="font-family:var(--font-mono); font-size:13px">@newco-ai-platform/ui/components.css</code> — for NEURON's hero screen (NEU-1.3 / NEW-11)</span>
+    </div>
+    <p class="lead">Two classes shipped in v0.2 for NEURON's <code style="font-family:var(--font-mono); font-size:13px">/runs/[id]</code> page. Every value reads from the tokens above — no hard-coded colors, spacing, or motion.</p>
+
+    <div style="background: var(--surface-card); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: 24px;">
+      <div>
+        <div class="type-label-sm" style="margin-bottom: 12px;">.p-step-bar — 7-layer middleware indicator</div>
+        <div class="p-step-bar" role="progressbar" aria-valuenow="3" aria-valuemax="7" aria-label="Agent middleware progress">
+          <div class="p-step-bar__cell p-step-bar__cell--done">Input</div>
+          <div class="p-step-bar__cell p-step-bar__cell--done">Kill</div>
+          <div class="p-step-bar__cell p-step-bar__cell--done">Audit</div>
+          <div class="p-step-bar__cell p-step-bar__cell--active">Output</div>
+          <div class="p-step-bar__cell">Orchestrator</div>
+          <div class="p-step-bar__cell">Tool</div>
+          <div class="p-step-bar__cell p-step-bar__cell--skipped">Emit</div>
+        </div>
+        <div class="type-body-sm" style="margin-top: 10px; color: var(--on-surface-muted)">
+          States in order: done · done · done · active (pulse) · pending · pending · skipped. Add <code style="font-family:var(--font-mono); font-size:13px">--failed</code> for the err state (red is reserved).
+        </div>
+      </div>
+
+      <div>
+        <div class="type-label-sm" style="margin-bottom: 12px;">.p-console — streamed thinking_step log</div>
+        <div class="p-console" role="log" aria-live="polite" aria-label="Agent thinking steps" style="max-height: 200px;">
+          <div class="p-console__line">
+            <span class="p-console__step-number">#0</span>
+            <span class="p-console__timestamp">16:03:21</span>
+            <span class="p-console__content">Parsing user request — claims-triage workflow.</span>
+          </div>
+          <div class="p-console__line">
+            <span class="p-console__step-number">#1</span>
+            <span class="p-console__timestamp">16:03:21</span>
+            <span class="p-console__content">Retrieving policy doc s3://kintsugi/policies/2026-Q2.pdf</span>
+          </div>
+          <div class="p-console__line">
+            <span class="p-console__step-number">#2</span>
+            <span class="p-console__timestamp">16:03:22</span>
+            <span class="p-console__content">Classifying severity → tier-2 (medium impact, ≤ $50k exposure).</span>
+          </div>
+          <div class="p-console__line">
+            <span class="p-console__step-number">#3</span>
+            <span class="p-console__timestamp">16:03:22</span>
+            <span class="p-console__content">Drafting response — calling tool: ledger.write_audit_entry</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
   <footer class="foot">
-    <strong>@newco-ai-platform/ui</strong> v0.1.0 · Luminous Multi-Signal · staged for npm publish ·
+    <strong>@newco-ai-platform/ui</strong> v0.2.0 · Luminous Multi-Signal · staged for npm publish ·
     See <a href="../../../DESIGN.md">platform/DESIGN.md</a> for the full spec.
     Hard rules: one accent per product · no 1px borders for sectioning · body ≥ 14px on data ·
     kill switches use product accent (never red) · <code style="font-family:var(--font-mono); font-size:11px">prefers-reduced-motion</code> always honored.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@newco-ai-platform/ui",
-  "version": "0.1.0",
-  "description": "NewCo Suite design tokens — Luminous Multi-Signal (v0.5 tokens-only)",
+  "version": "0.2.0",
+  "description": "NewCo Suite design tokens (Luminous Multi-Signal, frozen v1.0) + the component CSS surface that consumes them",
   "license": "UNLICENSED",
   "private": false,
   "type": "module",
@@ -21,11 +21,13 @@
       "require": "./dist/tokens/index.cjs"
     },
     "./tokens.css": "./src/tokens.css",
+    "./components.css": "./src/components.css",
     "./demo": "./demo.html"
   },
   "files": [
     "dist",
     "src/tokens.css",
+    "src/components.css",
     "demo.html",
     "README.md"
   ],

package/src/components.css

@@ -0,0 +1,139 @@
+/*
+ * Luminous Multi-Signal — Component classes
+ * @newco-ai-platform/ui@0.2.0
+ *
+ * Import once at app root, after tokens.css:
+ *   @import '@newco-ai-platform/ui/tokens.css';
+ *   @import '@newco-ai-platform/ui/components.css';
+ *
+ * v0.2 ships the two classes NEURON's hero screen needs (NEU-1.3 / NEW-11):
+ * `.p-step-bar` for the 7-layer middleware indicator, and `.p-console` for
+ * the streamed thinking-step log. Every value sources from tokens.css —
+ * no hard-coded colors, spacing, or motion.
+ *
+ * Consumers add ARIA per their semantics:
+ *   role="progressbar" + aria-valuenow / aria-valuemax on .p-step-bar
+ *   role="log" + aria-live="polite" on .p-console
+ *
+ * Future component classes for non-NEU-1.3 surfaces (HITL gate, audit
+ * ledger, MERIDIAN review board) land alongside their respective tickets.
+ */
+
+/* ───────────────────────────────────────────────────────────────────────
+ * .p-step-bar — 7-cell horizontal indicator for the agent's 7-layer
+ * middleware (input guardrail → kill switch → audit → output guardrail
+ * → orchestrator → tool dispatch → output). Default cell is "pending"
+ * (neutral); set per-cell state with modifier classes.
+ *
+ * The pulse animation on --active uses the "calm vigilance" tone from
+ * the design memory — opacity-only, never burst/rotation/scale-zero.
+ * prefers-reduced-motion: reduce disables it.
+ * ─────────────────────────────────────────────────────────────────── */
+
+.p-step-bar {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 6px;
+  width: 100%;
+  font-family: var(--font-body);
+  font-size: var(--fs-label-sm);
+}
+
+.p-step-bar__cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 28px;
+  padding: 0 10px;
+  border-radius: var(--radius);
+  background: var(--surface-card);
+  color: var(--on-surface-muted);
+  box-shadow: var(--shadow-card);
+  transition:
+    background var(--duration-base) var(--easing-standard),
+    color var(--duration-base) var(--easing-standard);
+  text-align: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.p-step-bar__cell--active {
+  background: var(--neuron-strong);
+  color: var(--on-surface);
+  animation: p-step-bar-pulse 1.6s var(--easing-standard) infinite;
+}
+
+.p-step-bar__cell--done {
+  background: var(--neuron);
+  color: #ffffff;
+}
+
+.p-step-bar__cell--failed {
+  background: var(--err);
+  color: #ffffff;
+}
+
+.p-step-bar__cell--skipped {
+  background: var(--surface-card);
+  color: var(--on-surface-dim);
+  text-decoration: line-through;
+}
+
+@keyframes p-step-bar-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.65;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .p-step-bar__cell {
+    transition: none;
+  }
+  .p-step-bar__cell--active {
+    animation: none;
+  }
+}
+
+/* ───────────────────────────────────────────────────────────────────────
+ * .p-console — streamed-thinking-step log. JetBrains Mono at NEURON row
+ * density (22px line-height). No 1px row dividers — vertical breathing
+ * room via padding (No-Line Rule). The container scrolls; consumers
+ * scroll-to-bottom on new lines if they want a follow-tail UX.
+ * ─────────────────────────────────────────────────────────────────── */
+
+.p-console {
+  font-family: var(--font-mono);
+  font-size: var(--fs-mono);
+  line-height: var(--lh-mono);
+  color: var(--on-surface);
+  background: var(--surface-card);
+  border-radius: var(--radius-lg);
+  padding: 16px 20px;
+  box-shadow: var(--shadow-card);
+  overflow-y: auto;
+  max-height: 60vh;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.p-console__line {
+  display: block;
+  padding: 6px 0;
+}
+
+.p-console__step-number,
+.p-console__timestamp {
+  color: var(--on-surface-dim);
+  font-size: var(--fs-mono-sm);
+  margin-right: 10px;
+  user-select: none;
+}
+
+.p-console__content {
+  color: var(--on-surface);
+}