feat(client): add UI kit, data layer, app shell, and Table component

- design token system (Atlantis, Kimberly, Powder Ash palette)
- Button, Badge, Input, Select, Card, SidePanel, Breadcrumbs components
- generic typed Table<T> component with loading/empty states
- API data layer: typed fetch client for environments, keys, sessions, scenarios
- Vite dev proxy targeting server on port 13000
- App shell with SidePanel nav and four entity pages (Environments, Keys, Sessions, Scenarios)
- Storybook config with dark/light theme toggle and a11y addon
This commit is contained in:
2026-04-09 00:11:55 +03:00
parent 5cc16725fb
commit 9916ef5aaf
47 changed files with 3910 additions and 10 deletions
@@ -0,0 +1,54 @@
.nav {
font-family: var(--font-family);
}
.list {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-1);
list-style: none;
margin: 0;
padding: 0;
}
.item {
display: flex;
align-items: center;
gap: var(--space-1);
}
.link {
font-size: var(--font-size-sm);
color: var(--color-text-muted);
text-decoration: none;
background: none;
border: none;
padding: 0;
cursor: pointer;
font-family: inherit;
border-radius: var(--radius-sm);
transition: color var(--transition);
}
.link:hover {
color: var(--color-text);
text-decoration: underline;
}
.link:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.current {
font-size: var(--font-size-sm);
font-weight: 600;
color: var(--color-text);
}
.separator {
display: flex;
align-items: center;
color: var(--color-border);
}