// Section artboards for Kev-UI.html // Keeps Kev-UI.html small; each section renders with . function Surface({ theme = 'light', children, pad = 24, style = {} }) { return (
{children}
); } function Row({ label, children, gap = 10 }) { return (
{label &&
{label}
}
{children}
); } function secSurface(theme, children) { return {children}; } function SectionHead({ title, sub }) { return (
{title}
{sub &&
{sub}
}
); } function SecLabel({ children }) { return
{children}
; } // ─── Navigation ───────────────────────────────────────────── function NavArtboard({ theme }) { const [nav, setNav] = React.useState('Dashboard'); const [side, setSide] = React.useState('overview'); const sideGroups = [ { head: 'Workspace', items: [ { id: 'overview', label: 'Overview', icon: , badge: null }, { id: 'jobs', label: 'Jobs', icon: , badge: 12 }, { id: 'data', label: 'Datasets', icon: }, ]}, { head: 'System', items: [ { id: 'settings', label: 'Settings', icon: }, { id: 'help', label: 'Docs', icon: }, ]}, ]; const activeItem = sideGroups.flatMap(g => g.items).find(i => i.id === side); return secSurface(theme, ( <> Top navbar
→ section: {nav}
Sidebar navigation
Workspace / {activeItem?.label}
{activeItem?.label}
{side === 'overview' && 'Summary of workspace activity, latest deploys, and team presence.'} {side === 'jobs' && '12 jobs queued · 3 running · nightly-build in progress.'} {side === 'data' && 'Connected datasets, schemas, and last refresh times.'} {side === 'settings' && 'Workspace preferences, API keys, and integrations.'} {side === 'help' && 'Guides, API reference, and release notes.'}
{KuiIcons.arrowR}Open Details
)); } // ─── Tabs ─────────────────────────────────────────────────── function TabsArtboard({ theme }) { const [a, setA] = React.useState('over'); const [b, setB] = React.useState('daily'); return secSurface(theme, ( <> Underline {a === 'over' &&
Summary statistics, recent activity, and a feed of the most important signals.
} {a === 'logs' &&
Chronological log of pipeline events with search and filter.
} {a === 'met' &&
Time-series charts for CPU, memory, throughput and latency percentiles.
} {a === 'set' &&
Workspace preferences and notification settings.
}
Pills
Showing {b} aggregation.
 )); } // ─── Progress / Loading ───────────────────────────────────── function ProgArtboard({ theme }) { const [v, setV] = React.useState(42); React.useEffect(() => { const t = setInterval(() => setV(x => (x + 3) > 100 ? 20 : x + 3), 200); return () => clearInterval(t); }, []); return secSurface(theme, ( <> Progress bar
Building indices{v}%
Indeterminate
Spinner & dots
Working…
Skeleton
)); } // ─── Stats + Sparklines + Gauges ───────────────────────────── function StatsArtboard({ theme }) { const sp1 = [4,6,5,8,7,9,11,10,12,14,13,15,16,14,18]; const sp2 = [18,16,17,14,15,13,11,12,10,9,8,10,8,7,6]; const sp3 = [8,9,9,10,11,10,12,13,13,14,12,14,15,15,16]; return secSurface(theme, ( <> Stat cards
} mono /> } mono /> } mono />
Gauges
)); } // ─── Charts ───────────────────────────────────────────────── function ChartsArtboard({ theme }) { const bars = [ { label: 'Jan', value: 42 }, { label: 'Feb', value: 58 }, { label: 'Mar', value: 51 }, { label: 'Apr', value: 72, highlight: true }, { label: 'May', value: 64 }, { label: 'Jun', value: 79 }, { label: 'Jul', value: 88 }, ]; const line = [ { name: 'a', data: [12, 18, 14, 22, 26, 30, 28, 34, 32, 38, 42, 40] }, { name: 'b', data: [8, 10, 14, 13, 17, 16, 20, 22, 19, 23, 26, 28] }, { name: 'c', data: [20, 22, 18, 21, 19, 17, 16, 18, 20, 17, 15, 14] }, ]; const ts = Array.from({ length: 48 }, (_, i) => ({ label: `${String(i % 24).padStart(2,'0')}:00`, value: 40 + Math.sin(i / 3) * 14 + Math.cos(i / 7) * 8 + (i % 11), })); return secSurface(theme, ( <> Bar chart
Line + area (multi-series)
Donut
Time series
)); } // ─── Cards + Accordion ────────────────────────────────────── function CardsArtboard({ theme }) { return secSurface(theme, ( <> Card
{KuiIcons.more}} footer={<>DismissView}> All services reporting within SLO. Last deploy 2 hours ago. Hover reveals a subtle shadow + lift. Good for selectable grids.
Accordion )); } // ─── Badges / Tags ────────────────────────────────────────── function BadgesArtboard({ theme }) { return secSurface(theme, ( <> Status badges
default active healthy degraded failing new v2.1.4
Tags (removable)
{}}>typescript {}}>rust {}}>docker read-only
Keyboard
Press ⌘ K to open command palette
)); } // ─── Carousel / Slider / Pagination ───────────────────────── function CarPagArtboard({ theme }) { const [page, setPage] = React.useState(3); const [sl, setSl] = React.useState(40); return secSurface(theme, ( <> Carousel
Step 01
Connect your source
Link GitHub, a database, or drop a CSV.
,
Step 02
Configure the pipeline
Chain transforms with a visual editor.
,
Step 03
Ship to production
One click deploy with automatic rollback.
, ]} />
Slider — {sl}
Pagination )); } // ─── Copy / Zoom / Export ─────────────────────────────────── function UtilsArtboard({ theme }) { return secSurface(theme, ( <> Copy to clipboard
Zoom viewer
KEV-UI
pan · pinch · scroll · keyboard
Export menu )); } // ─── Pipeline / Engineering ───────────────────────────────── function EngArtboard({ theme }) { const grid = Array.from({ length: 24 * 7 }, (_, i) => Math.random() > 0.7 ? Math.random() : Math.random() > 0.5 ? Math.random() * 0.5 : 0); return secSurface(theme, ( <> Pipeline stages
Activity grid · last 7 days
Log stream )); } Object.assign(window, { NavArtboard, TabsArtboard, ProgArtboard, StatsArtboard, ChartsArtboard, CardsArtboard, BadgesArtboard, CarPagArtboard, UtilsArtboard, EngArtboard, // helpers Surface, Row, SectionHead, SecLabel, });