Shared Svelte 5 component library for kenn-io frontends, consolidated from the middleman and agentsview apps. Plain CSS with design tokens (no Tailwind), runes-mode Svelte, TypeScript strict.
The package is consumed as source (like @middleman/ui): add it as a
workspace/path dependency and make sure your bundler compiles Svelte from
node_modules (the svelte export condition points at src/lib/index.ts).
Peer dependencies: svelte@^5 and @lucide/svelte (icons).
<script lang="ts">
import { Button, Chip, Modal, showFlash } from "@kenn-io/kit-ui";
import "@kenn-io/kit-ui/theme.css"; // once, at the app entry
let open = $state(false);
</script>
<Chip tone="success">Open</Chip>
<Button label="Save" tone="info" surface="solid" onclick={() => showFlash("Saved")} />
{#if open}
<Modal title="Hello" onclose={() => (open = false)}>…</Modal>
{/if}Dark mode: add the dark class to <html> (document.documentElement.classList.add("dark")).
| Component | Origin | Purpose |
|---|---|---|
| Button | middleman ActionButton |
Action button with tone × surface × size variants |
| Calendar | new (DateRangePicker's month grid) | Single-month date grid with range highlight and month paging |
| Chip | middleman Chip |
Status/label badge, optionally interactive |
| ChipStack | new (middleman mobile-view pattern) | Collapsing chip/button row with "+N" expansion |
| CodeBlock | both (consolidated) | Standalone code card: shiki dual-theme highlighting, line numbers, wrap toggle, copy |
| CollapsibleSidebar | middleman | Resizable, collapsible sidebar + main layout (includes SidebarToggle) |
| ColorLabel | middleman GitHubLabels |
Hex-colored pill with WCAG contrast-picked text |
| CommandPalette | new | ⌘K overlay: filtered commands, sections, recents; pairs with the shortcut system |
| CopyButton | agentsview | Copy-to-clipboard icon button with success feedback |
| DetailDrawer | middleman | Right-side slide-in detail panel over an overlay |
| DiffStats | middleman | +added −removed diff counters with compact formatting |
| EmptyState | both (hand-rolled) | Centered muted placeholder: icon, title, description, action |
| FilterDropdown | both (consolidated) | Sectioned multi-select filter menu with search, counts, bulk actions |
| FindBar | agentsview SessionFindBar |
In-content find bar with N-of-M counter and match navigation |
| FitStages | new (TopBar collapse pattern) | Multi-breakpoint wrapper: renders the richest of N stage snippets that fits, by measurement |
| FlashBanner | middleman | Transient toast banner driven by the showFlash store |
| IconButton | both (hand-rolled .icon-btn) |
Square ghost button for a lone icon, required aria-label |
| KbdBadge | middleman | Keyboard-shortcut badge, hidden on touch devices |
| Markdown | both (consolidated) | Sanitized GFM rendering with highlighted fences and app-extension hooks |
| Modal | both (consolidated) | Dialog primitive: overlay, header, body, footer snippet |
| DateRangePicker | agentsview | Relative / calendar / custom date-range popover with resolveRange() |
| RefreshControl | agentsview | Refresh button + "Updated Xm ago" label with auto-refresh |
| SearchInput | new (TextInput preset) | Filter field: search icon, clear button, optional ⌘K hint |
| SegmentedControl | middleman (inline pattern) | "All / PRs / Issues" style value selector |
| SelectDropdown | middleman | Accessible single-select combobox |
| SettingsLayout | middleman SettingsPage |
Categorized settings shell: category sidebar + panel + pinned footer |
| SettingsSection | middleman | Bordered settings card: title, optional description, rows |
| Spinner | agentsview | Loading spinner |
| SplitResizeHandle | middleman | Keyboard-accessible pane divider |
| StatusBar | both (consolidated) | Fixed-height bottom bar with left/center/right regions |
| StatusDot | agentsview | Session/presence indicator (working/waiting/stale/…) |
| Table | both (consolidated) | Table shell + sortable TableHeaderCell with aria-sort |
| TextInput | both (hand-rolled) | Bordered field primitive: sizes, invalid state, prefix/suffix snippets |
| ThemeToggle | new (theme store control) | Light/dark/system control: cycle icon-button or segmented variants |
| Tooltip | middleman DiffSummaryChip popover |
Hover/focus tooltip with arrow, delays, viewport-aware flipping |
| TopBar | both AppHeader (consolidated) |
App header: reserved left/right regions, search slot, tabs that auto-collapse into a dropdown |
| Typeahead | agentsview OptionTypeahead |
Filterable select with match highlighting |
| VirtualList | new | Windowed list for long datasets: fixed/measured row heights, container-owned keyboard nav |
Also exported: the keyboard shortcut system
(appShortcuts/initShortcuts/formatShortcutKeys — combo parsing,
platform mod, scope stacking), the
markdown pipeline
(renderMarkdown/createMarkdownRenderer/highlightCode — marked →
shiki → DOMPurify; peers marked@^18/shiki@^4/dompurify@^3),
utilities (copyToClipboard,
formatRelativeTime, formatTimestamp, truncate, createRefreshScheduler,
floatingPopoverStyle, formatDuration/formatTokenCount/formatCost,
debounce, hashColor), the theme store
(initTheme/setThemeMode/setHighContrast), shared breakpoints
(BREAKPOINTS/MEDIA — see the
theming guide), and the design tokens
(theming guide).
kit-ui-check scans a project for hand-rolled equivalents of these components
(custom modals, spinners, dropdowns, raw palette colors, ad-hoc breakpoints)
and fails CI until they're replaced or explicitly ignored:
bunx kit-ui-check # scans ./src, exits 1 on findings
bunx kit-ui-check --warn # adoption modeSee docs/checking.md for rules, suppression, and the programmatic API, and docs/migration.md for the step-by-step middleman/agentsview migration guide (component mappings, prop deltas, gotchas).
bun install
bun run dev # interactive gallery at http://localhost:5173Every component has a live page with usage snippets and a light/dark toggle.
bun run check # svelte-check (must stay at 0 errors/warnings)
bun run build # builds the demo gallery
bun test # unit tests (checker rules, windowing, shortcuts, markdown planner)
bun run test:browser # Playwright suite against the gallery (docs/testing.md)
bun run svelte-mcp list-sections # Svelte 5 docs lookup (see skills/)Conventions live in CLAUDE.md; Svelte 5 guidance lives in skills/svelte-core-bestpractices and skills/svelte-code-writer.