docs(ui): sync docs to code for v0.3.0 — Sprint 0.6 Portfolio Shell

CHANGELOG.md

@@ -5,6 +5,51 @@ Format: [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 ---
 
+## [0.3.0] — 2026-06-22
+
+### Added — Sprint 0.6: Portfolio Shell
+
+Five components extracted from the `apps/web` build-out. Each clears the
+shared-use bar — used by the marketing site and reusable across consumer
+dashboards — so they live in `@konjoai/ui` rather than the app.
+
+**`Nav`** — top navigation bar for the marketing site.
+- Brand wordmark + inline links + optional grouped product menu + right-side actions
+- Native `<details>`/`<summary>` for the product menu and mobile drawer — fully server-renderable, works without JavaScript (no `useState`, no `"use client"`)
+- `aria-label="Primary"` nav landmark; product and mobile menus expose labelled summaries
+- Responsive: inline links collapse into a mobile drawer below `sm`
+
+**`ProductHero`** — top-of-page header for every product page.
+- Oversized brand glyph, gradient title, tagline, optional version + status pills, and a CTA row
+- Server-renderable (no hooks); designed to sit inside the `aurora-konjo` shell so the background lights through
+- Consumers: every product page on konjo.ai
+
+**`FeatureCard`** — one tile in a 2–3 column feature grid.
+- Brand-accent glyph + optional eyebrow + title + description
+- Subtle hover lift with a violet top-edge glow, mirroring the homepage project card treatment
+- Server-renderable (no hooks)
+
+**`MetricCard`** — single-value stat card for any scalar metric.
+- Severity-tinted value, optional unit suffix, signed delta with arrow and context label
+- `kanjo` entrance animation, honoring `useReducedMotion()`
+- `role="status"` with a composed `aria-label` (label, value, delta)
+- Consumers: squash (compliance %), kairu (latency / tok/s), squish (TTFT), kyro (NDCG/MRR), vectro (recall@k), miru (attention)
+
+**`StatusBadge`** — small pill summarizing a service's health.
+- Five levels: operational / degraded / outage / research / checking
+- Optional last-checked timestamp (formatted UTC) and a pulsing dot for live checks
+- `role="status"` with a descriptive `aria-label`; pulse honors `prefers-reduced-motion` via CSS (`motion-reduce:animate-none`)
+- Consumers: the `/status` page and inline "live" indicators
+
+### Changed
+
+- `packages/ui/package.json`: version → 0.3.0
+- `src/components/index.ts`: all five components and their types exported
+- `src/App.tsx`: showcase status badge → v0.3.0, label → sprint 0.6
+- `packages/ui/CLAUDE.md`: File Map updated with the five components; version label → v0.3.0
+
+---
+
 ## [0.2.0] — 2026-05-19
 
 ### Added — Sprint 0.5: Design System Completion

packages/ui/CLAUDE.md

@@ -2,7 +2,7 @@
 
 The shared design system for the KonjoAI portfolio. Lives at `packages/ui/` in the `konjoai/ui` monorepo (alongside `apps/web/` — the konjo.ai homepage). Five primitives, three motion curves, one brand shell — consumed by `vectro`, `squish`, `kyro`, `miru`, `kohaku`, `kairu`, `toki`, `squash`.
 
-**v0.1.0** — Sprint 0 of the Konjo UI Initiative.
+**v0.3.0** — Sprint 0.6 of the Konjo UI Initiative.
 
 ## Stack
 React 19 · TypeScript ~6.0 · Vite 8 · Tailwind CSS v4 (`@theme` config) · motion (framer-motion successor) · Vitest 4
@@ -38,6 +38,15 @@ npm run typecheck    # tsc -b --noEmit
 | `src/components/TokenStream.tsx` | Streaming text with attention halos |
 | `src/components/StagePipeline.tsx` | Multi-step process as a flowing river |
 | `src/components/RiskRing.tsx` | Concentric arcs for nested risk |
+| `src/components/StatusMatrix.tsx` | Pass/fail/warn grid for compliance & quality |
+| `src/components/TimeSeriesChart.tsx` | Rolling sparkline for live metric streams |
+| `src/components/ComparisonBar.tsx` | Horizontal benchmark bars with baseline marker |
+| `src/components/RankList.tsx` | Scored, ranked list with relevance bars |
+| `src/components/MetricCard.tsx` | Single-value stat card with delta |
+| `src/components/Nav.tsx` | Marketing-site top navigation bar |
+| `src/components/ProductHero.tsx` | Product-page header — glyph, title, pills, CTAs |
+| `src/components/FeatureCard.tsx` | One tile in a feature grid |
+| `src/components/StatusBadge.tsx` | Health pill — operational / degraded / outage / … |
 | `src/components/KonjoApp.tsx` | Brand shell — wordmark, tagline, status, aurora |
 | `src/App.tsx` | Showcase demo wiring all components |
 

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@konjoai/ui",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "The Konjo design system — shared visual language for the KonjoAI portfolio (vectro, squish, kyro, miru, kohaku, kairu, toki, squash).",
   "private": true,
   "type": "module",

packages/ui/src/App.tsx

@@ -168,12 +168,12 @@ function App() {
     <KonjoApp
       product="ui"
       tagline="The Konjo design system — beauty, honesty, motion."
-      status={{ label: "v0.2.0", severity: "info" }}
+      status={{ label: "v0.3.0", severity: "info" }}
     >
       {/* Hero */}
       <section className="mb-14 text-center">
         <p className="text-konjo-mono uppercase tracking-[0.32em] text-konjo-accent" style={{ fontSize: 11 }}>
-          @konjoai/ui · sprint 0.5
+          @konjoai/ui · sprint 0.6
         </p>
         <h1
           className="text-konjo-display text-konjo-fg mt-4 mx-auto"