From 0dff59322550bcbddb5e24ff4c8d90647901e7a0 Mon Sep 17 00:00:00 2001 From: Claude Date: Mon, 22 Jun 2026 10:47:40 +0000 Subject: [PATCH] =?UTF-8?q?docs(ui):=20sync=20docs=20to=20code=20for=20v0.?= =?UTF-8?q?3.0=20=E2=80=94=20Sprint=200.6=20Portfolio=20Shell?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Five components (Nav, ProductHero, FeatureCard, MetricCard, StatusBadge) were added during the apps/web build-out but never documented. Bring the source-of-truth docs back in line with the shipped code: - CHANGELOG.md: add v0.3.0 entry covering the five components - packages/ui/package.json: version 0.2.0 -> 0.3.0 - packages/ui/CLAUDE.md: File Map now lists all 14 components; version label -> v0.3.0 - src/App.tsx: showcase status badge -> v0.3.0, label -> sprint 0.6 Co-Authored-By: Claude Opus 4.8 Claude-Session: https://claude.ai/code/session_01CBHA2z4YgF8PyYaeghWoMm --- CHANGELOG.md | 45 ++++++++++++++++++++++++++++++++++++++++ packages/ui/CLAUDE.md | 11 +++++++++- packages/ui/package.json | 2 +- packages/ui/src/App.tsx | 4 ++-- 4 files changed, 58 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 377d19c..104e1de 100644 --- a/CHANGELOG.md +++ b/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 `
`/`` 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 diff --git a/packages/ui/CLAUDE.md b/packages/ui/CLAUDE.md index edfdbe5..6a21542 100644 --- a/packages/ui/CLAUDE.md +++ b/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 | diff --git a/packages/ui/package.json b/packages/ui/package.json index c7a7a2c..d4d2f83 100644 --- a/packages/ui/package.json +++ b/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", diff --git a/packages/ui/src/App.tsx b/packages/ui/src/App.tsx index 9a2ec88..b49b183 100644 --- a/packages/ui/src/App.tsx +++ b/packages/ui/src/App.tsx @@ -168,12 +168,12 @@ function App() { {/* Hero */}

- @konjoai/ui · sprint 0.5 + @konjoai/ui · sprint 0.6