feat(webui): vue admin panel source

Vue 3 + TypeScript + Pinia + Tailwind v4 + shadcn-vue + Chart.js admin panel source under webui/, built with Vite. Views: Overview (providers, redis/cache/retry status, model aliases), Usage (per-user/per-group/total tables with tokensIn/tokensOut/cost + limits), Charts (scope selector, req/tokens(stacked in-out)/cost metric tabs, 24h/30d/12mo window switcher, fed by GET /admin/api/usage/history). Pinia stores: auth (sessionStorage key gate, x-api-key header, 401/403 re-prompt), dashboard (5s poll), history (fetch-on-selection + 30s refresh). Design: deliberate neutral warm-neutral palette with a signature teal accent (no default Inter/purple-gradient/glassmorphism), real typographic hierarchy via the platform UI/mono font stacks (zero external assets - no Google Fonts), dark+light via prefers-color-scheme (no class toggle, no theme switcher). Charts: zero-based bars, honest axes, Okabe-Ito colorblind-safe series, tokens-in/out as a distinguishable stacked pair. vite.config.ts: base '/admin/' (matches admin.go's route layout) and build.modulePreload.polyfill:false (no inline bootstrap script, so the tightened admin CSP needs no 'unsafe-inline'). Code-split: Chart.js (ChartsView) loads lazily, not in the initial bundle. generate.mjs reads dist/ after `vite build` and writes ../admin_assets_gen.go (not committed by this change) - base64-encodes every asset, decoded once at package-var init; documented rationale in the script's own header comment. Hygiene: webui/go.mod walls webui/ off from the repo root's `go build`/ `vet`/`test ./...` (npm's node_modules bundles a stray .go file that would otherwise be swept in); tools/yaegi-check/main.go excludes webui/ from its GOPATH copy for the same reason. webui/ export-ignored (.gitattributes) from release source tarballs; webui/node_modules/ gitignored. tsconfig.app.json/tsconfig.node.json's JSONC comments dropped (TS itself is fine with either; the global pre-commit JSON validator is not) - no config values changed.
2026-10-15 05:29:28 +00:00 · 2026-08-21 09:21:41 +01:00
parent 47b22d2d7f
commit 655bbcbf2c
81 changed files with 9694 additions and 0 deletions
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { faKey } from '@fortawesome/free-solid-svg-icons'
+import { ref } from 'vue'
+
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Input } from '@/components/ui/input'
+import { useAuthStore } from '@/stores/auth'
+
+const auth = useAuthStore()
+const keyInput = ref('')
+
+function submit(): void {
+  const value = keyInput.value
+  keyInput.value = ''
+  auth.submit(value)
+}
+</script>
+
+<template>
+  <div class="mx-auto flex min-h-[70vh] max-w-md flex-col justify-center px-4">
+    <Card>
+      <CardHeader>
+        <CardTitle class="flex items-center gap-2">
+          <FontAwesomeIcon :icon="faKey" class="size-4 text-primary" />
+          Admin key required
+        </CardTitle>
+        <CardDescription>
+          Enter an admin API key. The browser keeps it only in this tab's session storage: it is
+          never written to disk and is sent only to this page's own /admin/api/* requests.
+        </CardDescription>
+      </CardHeader>
+      <CardContent class="flex flex-col gap-4">
+        <form class="flex flex-col gap-3" @submit.prevent="submit">
+          <Input
+            v-model="keyInput"
+            type="password"
+            autocomplete="off"
+            placeholder="API key"
+            aria-label="Admin API key"
+          />
+          <Button type="submit" class="w-full">Continue</Button>
+        </form>
+        <Alert v-if="auth.error" variant="destructive">
+          <AlertTitle>Authentication failed</AlertTitle>
+          <AlertDescription>{{ auth.error }}</AlertDescription>
+        </Alert>
+      </CardContent>
+    </Card>
+  </div>
+</template>
@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, watch } from 'vue'
+
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import UsageChart from '@/components/UsageChart.vue'
+import { useDashboardStore } from '@/stores/dashboard'
+import { type ChartTab, useHistoryStore, WINDOW_LABEL } from '@/stores/history'
+import type { HistoryWindow } from '@/types/api'
+
+const dashboard = useDashboardStore()
+const history = useHistoryStore()
+
+const scopeOptions = computed(() => {
+  const users = (dashboard.usage?.users ?? []).map((u) => ({ value: `user:${u.id}`, label: u.id }))
+  const groups = (dashboard.usage?.groups ?? []).map((g) => ({ value: `group:${g.id}`, label: g.id }))
+  return [{ value: 'total', label: 'Total (all traffic)' }, ...groups, ...users]
+})
+
+const windows: HistoryWindow[] = ['hour', 'day', 'month']
+
+function onTabChange(value: string | number): void {
+  history.setTab(value as ChartTab)
+}
+function onScopeChange(value: unknown): void {
+  if (typeof value === 'string') history.setScope(value)
+}
+
+onMounted(() => {
+  void history.fetchSeries()
+  history.startAutoRefresh()
+})
+onUnmounted(() => {
+  history.stopAutoRefresh()
+})
+
+// The scope list is only known once the Usage response has loaded — if the
+// previously-selected scope disappears (a user/group config change), fall
+// back to the total scope rather than requesting a now-unknown id.
+watch(scopeOptions, (options) => {
+  if (!options.some((o) => o.value === history.scope)) {
+    history.setScope('total')
+  }
+})
+</script>
+
+<template>
+  <Card>
+    <CardHeader class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+      <CardTitle>Usage charts</CardTitle>
+      <div class="flex flex-wrap items-center gap-3">
+        <Select :model-value="history.scope" @update:model-value="onScopeChange">
+          <SelectTrigger class="w-56">
+            <SelectValue placeholder="Scope" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem v-for="opt in scopeOptions" :key="opt.value" :value="opt.value">
+              {{ opt.label }}
+            </SelectItem>
+          </SelectContent>
+        </Select>
+
+        <Tabs :model-value="history.window" @update:model-value="(v) => history.setWindow(v as HistoryWindow)">
+          <TabsList>
+            <TabsTrigger v-for="w in windows" :key="w" :value="w">{{ WINDOW_LABEL[w] }}</TabsTrigger>
+          </TabsList>
+        </Tabs>
+      </div>
+    </CardHeader>
+    <CardContent class="flex flex-col gap-4">
+      <Tabs :model-value="history.tab" @update:model-value="onTabChange">
+        <TabsList>
+          <TabsTrigger value="requests">Requests</TabsTrigger>
+          <TabsTrigger value="tokens">Tokens</TabsTrigger>
+          <TabsTrigger value="cost">Cost</TabsTrigger>
+        </TabsList>
+      </Tabs>
+
+      <p v-if="history.error" class="text-sm text-destructive">{{ history.error }}</p>
+      <UsageChart :tab="history.tab" :window="history.window" :series-by-metric="history.seriesByMetric" />
+    </CardContent>
+  </Card>
+</template>
@@ -0,0 +1,148 @@
+<script setup lang="ts">
+import { faCircleCheck, faCircleXmark, faTriangleExclamation } from '@fortawesome/free-solid-svg-icons'
+import { computed } from 'vue'
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableEmpty,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table'
+import { formatAgo, formatTimestamp } from '@/lib/format'
+import { useDashboardStore } from '@/stores/dashboard'
+
+const dashboard = useDashboardStore()
+const overview = computed(() => dashboard.overview)
+</script>
+
+<template>
+  <div class="flex flex-col gap-6">
+    <div class="grid gap-4 sm:grid-cols-3">
+      <Card>
+        <CardHeader>
+          <CardTitle class="flex items-center gap-2 text-sm font-medium text-muted-foreground">
+            <FontAwesomeIcon
+              :icon="overview?.redis.configured ? faCircleCheck : faCircleXmark"
+              :class="overview?.redis.configured ? 'text-chart-requests' : 'text-muted-foreground'"
+              class="size-3.5"
+            />
+            Redis
+          </CardTitle>
+        </CardHeader>
+        <CardContent class="flex flex-col gap-1 text-sm">
+          <p class="font-medium">{{ overview?.redis.configured ? 'Configured' : 'Not configured' }}</p>
+          <p v-if="overview?.redis.lastErr" class="flex items-start gap-1.5 text-destructive">
+            <FontAwesomeIcon :icon="faTriangleExclamation" class="mt-0.5 size-3.5 shrink-0" />
+            <span>{{ overview.redis.lastErr }}{{ formatAgo(overview.redis.lastErrAt) }}</span>
+          </p>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle class="flex items-center gap-2 text-sm font-medium text-muted-foreground">
+            <FontAwesomeIcon
+              :icon="overview?.cache.enabled ? faCircleCheck : faCircleXmark"
+              :class="overview?.cache.enabled ? 'text-chart-requests' : 'text-muted-foreground'"
+              class="size-3.5"
+            />
+            Response cache
+          </CardTitle>
+        </CardHeader>
+        <CardContent class="text-sm">
+          <p class="font-medium">{{ overview?.cache.enabled ? 'Enabled' : 'Disabled' }}</p>
+          <p v-if="overview?.cache.enabled" class="text-muted-foreground">ttl {{ overview.cache.ttl }}</p>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle class="flex items-center gap-2 text-sm font-medium text-muted-foreground">
+            <FontAwesomeIcon
+              :icon="overview?.retry.enabled ? faCircleCheck : faCircleXmark"
+              :class="overview?.retry.enabled ? 'text-chart-requests' : 'text-muted-foreground'"
+              class="size-3.5"
+            />
+            Retry
+          </CardTitle>
+        </CardHeader>
+        <CardContent class="text-sm">
+          <p class="font-medium">{{ overview?.retry.enabled ? 'Enabled' : 'Disabled' }}</p>
+          <p v-if="overview?.retry.enabled" class="text-muted-foreground">
+            attempts {{ overview.retry.attempts }}, backoff {{ overview.retry.backoff }}
+          </p>
+        </CardContent>
+      </Card>
+    </div>
+
+    <Card>
+      <CardHeader>
+        <CardTitle>Providers</CardTitle>
+        <CardDescription>Every configured upstream and its last discovery refresh.</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Name</TableHead>
+              <TableHead>Type</TableHead>
+              <TableHead>Base URL</TableHead>
+              <TableHead class="text-right">Models</TableHead>
+              <TableHead>Last refresh</TableHead>
+              <TableHead>Last error</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            <TableEmpty v-if="!overview?.providers.length" :colspan="6" class="text-muted-foreground">
+              none
+            </TableEmpty>
+            <TableRow v-for="p in overview?.providers" :key="p.name">
+              <TableCell class="font-medium">{{ p.name }}</TableCell>
+              <TableCell class="text-muted-foreground">{{ p.type }}</TableCell>
+              <TableCell class="text-muted-foreground">{{ p.baseUrl }}</TableCell>
+              <TableCell class="text-right tabular-nums">{{ p.modelCount }}</TableCell>
+              <TableCell class="text-muted-foreground">{{ formatTimestamp(p.lastRefresh) }}</TableCell>
+              <TableCell class="text-destructive">{{ p.lastErr ?? '' }}</TableCell>
+            </TableRow>
+          </TableBody>
+        </Table>
+      </CardContent>
+    </Card>
+
+    <Card>
+      <CardHeader>
+        <CardTitle>Model aliases</CardTitle>
+        <CardDescription>Operator-defined alias &rarr; target model mappings.</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Alias</TableHead>
+              <TableHead>Target</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            <TableEmpty v-if="!overview?.aliases.length" :colspan="2" class="text-muted-foreground">
+              none configured
+            </TableEmpty>
+            <TableRow v-for="a in overview?.aliases" :key="a.alias">
+              <TableCell class="font-medium">{{ a.alias }}</TableCell>
+              <TableCell class="text-muted-foreground">{{ a.target }}</TableCell>
+            </TableRow>
+          </TableBody>
+        </Table>
+      </CardContent>
+    </Card>
+  </div>
+</template>
@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import type { ChartData, ChartOptions } from 'chart.js'
+import { computed } from 'vue'
+import { Bar } from 'vue-chartjs'
+
+import '@/lib/chart-setup'
+import { useThemeColors } from '@/composables/useThemeColors'
+import { formatBucketLabel } from '@/lib/format'
+import type { ChartTab } from '@/stores/history'
+import type { HistoryMetric, HistoryWindow, UsageHistoryPoint } from '@/types/api'
+
+const props = defineProps<{
+  tab: ChartTab
+  window: HistoryWindow
+  seriesByMetric: Partial<Record<HistoryMetric, UsageHistoryPoint[]>>
+}>()
+
+const { foreground, mutedForeground, border } = useThemeColors()
+
+/** One dataset spec per tab: which metric(s), its label, and its token color. */
+const DATASET_SPECS: Record<ChartTab, { metric: HistoryMetric; label: string; color: string }[]> = {
+  requests: [{ metric: 'req', label: 'Requests', color: '--chart-requests' }],
+  tokens: [
+    { metric: 'tokin', label: 'Tokens in', color: '--chart-tokens-in' },
+    { metric: 'tokout', label: 'Tokens out', color: '--chart-tokens-out' },
+  ],
+  cost: [{ metric: 'cost', label: 'Cost (USD)', color: '--chart-cost' }],
+}
+
+/** cost is stored as micro-USD (limits.go's account/history convention) — every other metric is already the display unit. */
+function toDisplayValue(metric: HistoryMetric, raw: number): number {
+  return metric === 'cost' ? raw / 1_000_000 : raw
+}
+
+const labels = computed<string[]>(() => {
+  const specs = DATASET_SPECS[props.tab]
+  const points = props.seriesByMetric[specs[0]!.metric] ?? []
+  return points.map((p) => formatBucketLabel(p.bucket, props.window))
+})
+
+/** resolveToken reads one of main.css's --chart-* custom properties from :root, live — so a chart already on screen repaints on a `prefers-color-scheme` flip exactly like useThemeColors does for axis/legend text. */
+function resolveToken(cssVar: string): string {
+  return getComputedStyle(document.documentElement).getPropertyValue(cssVar).trim()
+}
+
+const chartData = computed<ChartData<'bar'>>(() => {
+  // Touch the theme refs so this computed re-runs (and re-reads the CSS
+  // custom properties via resolveToken) on a `prefers-color-scheme` flip —
+  // resolveToken's own getComputedStyle read is not itself reactive.
+  void foreground.value
+  return {
+    labels: labels.value,
+    datasets: DATASET_SPECS[props.tab].map((spec) => ({
+      label: spec.label,
+      backgroundColor: resolveToken(spec.color),
+      data: (props.seriesByMetric[spec.metric] ?? []).map((p) => toDisplayValue(spec.metric, p.value)),
+    })),
+  }
+})
+
+const stacked = computed<boolean>(() => DATASET_SPECS[props.tab].length > 1)
+
+const chartOptions = computed<ChartOptions<'bar'>>(() => ({
+  responsive: true,
+  maintainAspectRatio: false,
+  animation: false,
+  scales: {
+    x: {
+      stacked: stacked.value,
+      grid: { color: border.value, display: false },
+      ticks: { color: mutedForeground.value },
+    },
+    y: {
+      // Zero-based, honest axis (dataviz rule): a bar chart's y-axis never
+      // starts anywhere but 0, so bar length always means what it looks
+      // like it means.
+      stacked: stacked.value,
+      beginAtZero: true,
+      grid: { color: border.value },
+      ticks: {
+        color: mutedForeground.value,
+        callback: (value) => (props.tab === 'cost' ? `$${value}` : String(value)),
+      },
+    },
+  },
+  plugins: {
+    legend: {
+      display: stacked.value,
+      labels: { color: foreground.value },
+    },
+    tooltip: {
+      callbacks: {
+        label: (ctx) => {
+          const value = ctx.parsed.y ?? 0
+          return `${ctx.dataset.label}: ${props.tab === 'cost' ? `$${value.toFixed(4)}` : value}`
+        },
+      },
+    },
+  },
+}))
+</script>
+
+<template>
+  <div class="h-72 w-full">
+    <Bar :data="chartData" :options="chartOptions" />
+  </div>
+</template>
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { formatCost, formatLimits } from '@/lib/format'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableEmpty,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table'
+import type { AdminUsageEntryView } from '@/types/api'
+
+/**
+ * UsageTable renders one scope kind's usage rows (users or groups) — the
+ * shared table shape both need (vue.md: extract before you paste it
+ * twice). The second column differs per kind: a user's row shows the group
+ * it belongs to; a group's row shows its member count (looked up from the
+ * Overview response, which is the only place member counts live).
+ */
+defineProps<{
+  idLabel: string
+  entries: AdminUsageEntryView[]
+  secondaryColumnLabel: string
+  secondaryValue: (entry: AdminUsageEntryView) => string
+}>()
+</script>
+
+<template>
+  <Table>
+    <TableHeader>
+      <TableRow>
+        <TableHead>{{ idLabel }}</TableHead>
+        <TableHead>{{ secondaryColumnLabel }}</TableHead>
+        <TableHead>Limits</TableHead>
+        <TableHead class="text-right">req/min</TableHead>
+        <TableHead class="text-right">req/day</TableHead>
+        <TableHead class="text-right">tokIn/day</TableHead>
+        <TableHead class="text-right">tokOut/day</TableHead>
+        <TableHead class="text-right">tokIn/month</TableHead>
+        <TableHead class="text-right">tokOut/month</TableHead>
+        <TableHead class="text-right">cost/day</TableHead>
+        <TableHead class="text-right">cost/month</TableHead>
+      </TableRow>
+    </TableHeader>
+    <TableBody>
+      <TableEmpty v-if="entries.length === 0" :colspan="11" class="text-muted-foreground">
+        none
+      </TableEmpty>
+      <TableRow
+        v-for="entry in entries"
+        :key="entry.id"
+        :class="entry.storeDown ? 'bg-destructive/10' : undefined"
+      >
+        <TableCell class="font-medium">{{ entry.id }}</TableCell>
+        <TableCell class="text-muted-foreground">{{ secondaryValue(entry) }}</TableCell>
+        <TableCell class="text-muted-foreground">{{ formatLimits(entry.limits) }}</TableCell>
+        <TableCell class="text-right tabular-nums">
+          {{ entry.storeDown ? '?' : entry.requestsPerMinute }}
+        </TableCell>
+        <TableCell class="text-right tabular-nums">
+          {{ entry.storeDown ? '?' : entry.requestsPerDay }}
+        </TableCell>
+        <TableCell class="text-right tabular-nums">
+          {{ entry.storeDown ? '?' : entry.tokensInPerDay }}
+        </TableCell>
+        <TableCell class="text-right tabular-nums">
+          {{ entry.storeDown ? '?' : entry.tokensOutPerDay }}
+        </TableCell>
+        <TableCell class="text-right tabular-nums">
+          {{ entry.storeDown ? '?' : entry.tokensInPerMonth }}
+        </TableCell>
+        <TableCell class="text-right tabular-nums">
+          {{ entry.storeDown ? '?' : entry.tokensOutPerMonth }}
+        </TableCell>
+        <TableCell class="text-right tabular-nums">
+          {{ entry.storeDown ? '?' : formatCost(entry.costPerDayMicroUsd) }}
+        </TableCell>
+        <TableCell class="text-right tabular-nums">
+          {{ entry.storeDown ? '?' : formatCost(entry.costPerMonthMicroUsd) }}
+        </TableCell>
+      </TableRow>
+    </TableBody>
+  </Table>
+</template>
@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import UsageTable from '@/components/UsageTable.vue'
+import { formatCost } from '@/lib/format'
+import { useDashboardStore } from '@/stores/dashboard'
+import type { AdminUsageEntryView } from '@/types/api'
+
+const dashboard = useDashboardStore()
+const usage = computed(() => dashboard.usage)
+
+/** memberCounts maps a group name to its member count — only the Overview response carries it. */
+const memberCounts = computed<Record<string, number>>(() => {
+  const out: Record<string, number> = {}
+  for (const g of dashboard.overview?.groups ?? []) out[g.name] = g.memberCount
+  return out
+})
+
+function groupNameOf(entry: AdminUsageEntryView): string {
+  return entry.groupName ?? ''
+}
+function memberCountOf(entry: AdminUsageEntryView): string {
+  const count = memberCounts.value[entry.id]
+  return count === undefined ? '' : String(count)
+}
+</script>
+
+<template>
+  <div class="flex flex-col gap-6">
+    <Card v-if="usage">
+      <CardHeader>
+        <CardTitle>Total</CardTitle>
+        <CardDescription>Usage summed across every user and group combined.</CardDescription>
+      </CardHeader>
+      <CardContent class="grid grid-cols-2 gap-4 text-sm sm:grid-cols-4">
+        <div>
+          <p class="text-muted-foreground">Requests/day</p>
+          <p class="text-lg font-semibold tabular-nums">{{ usage.total.requestsPerDay }}</p>
+        </div>
+        <div>
+          <p class="text-muted-foreground">Tokens in/day</p>
+          <p class="text-lg font-semibold tabular-nums">{{ usage.total.tokensInPerDay }}</p>
+        </div>
+        <div>
+          <p class="text-muted-foreground">Tokens out/day</p>
+          <p class="text-lg font-semibold tabular-nums">{{ usage.total.tokensOutPerDay }}</p>
+        </div>
+        <div>
+          <p class="text-muted-foreground">Cost/day</p>
+          <p class="text-lg font-semibold tabular-nums">{{ formatCost(usage.total.costPerDayMicroUsd) }}</p>
+        </div>
+      </CardContent>
+    </Card>
+
+    <Card>
+      <CardHeader>
+        <CardTitle>Groups</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <UsageTable
+          id-label="Name"
+          secondary-column-label="Members"
+          :entries="usage?.groups ?? []"
+          :secondary-value="memberCountOf"
+        />
+      </CardContent>
+    </Card>
+
+    <Card>
+      <CardHeader>
+        <CardTitle>Users</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <UsageTable
+          id-label="Name"
+          secondary-column-label="Group"
+          :entries="usage?.users ?? []"
+          :secondary-value="groupNameOf"
+        />
+      </CardContent>
+    </Card>
+  </div>
+</template>
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import type { AlertVariants } from '.'
+import { cn } from '@/lib/utils'
+import { alertVariants } from '.'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+  variant?: AlertVariants['variant']
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="alert"
+    :class="cn(alertVariants({ variant }), props.class)"
+    role="alert"
+  >
+    <slot />
+  </div>
+</template>
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="alert-action"
+    :class="cn('absolute top-2 right-2', props.class)"
+  >
+    <slot />
+  </div>
+</template>
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="alert-description"
+    :class="cn('text-muted-foreground text-sm text-balance md:text-pretty [&_p:not(:last-child)]:mb-4 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground', props.class)"
+  >
+    <slot />
+  </div>
+</template>
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="alert-title"
+    :class="cn('font-medium group-has-[>svg]/alert:col-start-2 cn-font-heading [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground', props.class)"
+  >
+    <slot />
+  </div>
+</template>
@@ -0,0 +1,21 @@
+import type { VariantProps } from 'class-variance-authority'
+import { cva } from 'class-variance-authority'
+
+export { default as Alert } from './Alert.vue'
+export { default as AlertAction } from './AlertAction.vue'
+export { default as AlertDescription } from './AlertDescription.vue'
+export { default as AlertTitle } from './AlertTitle.vue'
+
+export const alertVariants = cva('grid gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*=size-])]:size-4 group/alert relative w-full', {
+  variants: {
+    variant: {
+      default: 'bg-card text-card-foreground',
+      destructive: 'text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+})
+
+export type AlertVariants = VariantProps<typeof alertVariants>
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import type { BadgeVariants } from '.'
+import { reactiveOmit } from '@vueuse/core'
+import { Primitive } from 'reka-ui'
+import { cn } from '@/lib/utils'
+import { badgeVariants } from '.'
+
+const props = defineProps<PrimitiveProps & {
+  variant?: BadgeVariants['variant']
+  class?: HTMLAttributes['class']
+}>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+  <Primitive
+    data-slot="badge"
+    :data-variant="variant"
+    :class="cn(badgeVariants({ variant }), props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </Primitive>
+</template>
@@ -0,0 +1,24 @@
+import type { VariantProps } from 'class-variance-authority'
+import { cva } from 'class-variance-authority'
+
+export { default as Badge } from './Badge.vue'
+
+export const badgeVariants = cva(
+  'h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! group/badge inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
+        secondary: 'bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80',
+        destructive: 'bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20',
+        outline: 'border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground',
+        ghost: 'hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)
+export type BadgeVariants = VariantProps<typeof badgeVariants>
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import type { ButtonVariants } from '.'
+import { Primitive } from 'reka-ui'
+import { cn } from '@/lib/utils'
+import { buttonVariants } from '.'
+
+interface Props extends PrimitiveProps {
+  variant?: ButtonVariants['variant']
+  size?: ButtonVariants['size']
+  class?: HTMLAttributes['class']
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  as: 'button',
+})
+</script>
+
+<template>
+  <Primitive
+    data-slot="button"
+    :data-variant="variant"
+    :data-size="size"
+    :as="as"
+    :as-child="asChild"
+    :class="cn(buttonVariants({ variant, size }), props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>
@@ -0,0 +1,35 @@
+import type { VariantProps } from 'class-variance-authority'
+import { cva } from 'class-variance-authority'
+
+export { default as Button } from './Button.vue'
+
+export const buttonVariants = cva(
+  'focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 active:not-aria-[haspopup]:translate-y-px [&_svg:not([class*=size-])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
+        outline: 'border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground',
+        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground',
+        ghost: 'hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground',
+        destructive: 'bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        'default': 'h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
+        'xs': 'h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*=size-])]:size-3',
+        'sm': 'h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*=size-])]:size-3.5',
+        'lg': 'h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
+        'icon': 'size-8',
+        'icon-xs': 'size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*=size-])]:size-3',
+        'icon-sm': 'size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg',
+        'icon-lg': 'size-9',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+export type ButtonVariants = VariantProps<typeof buttonVariants>
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = withDefaults(defineProps<{
+  class?: HTMLAttributes['class']
+  size?: 'default' | 'sm'
+}>(), {
+  size: 'default',
+})
+</script>
+
+<template>
+  <div
+    data-slot="card"
+    :data-size="size"
+    :class="cn('ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-xl py-4 text-sm ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col', props.class)"
+  >
+    <slot />
+  </div>
+</template>
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="card-action"
+    :class="cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', props.class)"
+  >
+    <slot />
+  </div>
+</template>
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="card-content"
+    :class="cn('px-4 group-data-[size=sm]/card:px-3', props.class)"
+  >
+    <slot />
+  </div>
+</template>
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="card-description"
+    :class="cn('text-muted-foreground text-sm', props.class)"
+  >
+    <slot />
+  </div>
+</template>
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="card-footer"
+    :class="cn('bg-muted/50 rounded-b-xl border-t p-4 group-data-[size=sm]/card:p-3 flex items-center', props.class)"
+  >
+    <slot />
+  </div>
+</template>
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="card-header"
+    :class="cn('gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3 group/card-header @container/card-header grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]', props.class)"
+  >
+    <slot />
+  </div>
+</template>
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="card-title"
+    :class="cn('text-base leading-snug font-medium group-data-[size=sm]/card:text-sm cn-font-heading', props.class)"
+  >
+    <slot />
+  </div>
+</template>
@@ -0,0 +1,7 @@
+export { default as Card } from './Card.vue'
+export { default as CardAction } from './CardAction.vue'
+export { default as CardContent } from './CardContent.vue'
+export { default as CardDescription } from './CardDescription.vue'
+export { default as CardFooter } from './CardFooter.vue'
+export { default as CardHeader } from './CardHeader.vue'
+export { default as CardTitle } from './CardTitle.vue'
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { useVModel } from '@vueuse/core'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  defaultValue?: string | number
+  modelValue?: string | number
+  class?: HTMLAttributes['class']
+}>()
+
+const emits = defineEmits<{
+  (e: 'update:modelValue', payload: string | number): void
+}>()
+
+const modelValue = useVModel(props, 'modelValue', emits, {
+  passive: true,
+  defaultValue: props.defaultValue,
+})
+</script>
+
+<template>
+  <input
+    v-model="modelValue"
+    data-slot="input"
+    :class="cn(
+      'dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
+      props.class,
+    )"
+  >
+</template>
@@ -0,0 +1 @@
+export { default as Input } from './Input.vue'
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { SelectRootEmits, SelectRootProps } from 'reka-ui'
+import { SelectRoot, useForwardPropsEmits } from 'reka-ui'
+
+const props = defineProps<SelectRootProps>()
+const emits = defineEmits<SelectRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <SelectRoot
+    v-slot="slotProps"
+    data-slot="select"
+    v-bind="forwarded"
+  >
+    <slot v-bind="slotProps" />
+  </SelectRoot>
+</template>
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import type { SelectContentEmits, SelectContentProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import {
+  SelectContent,
+  SelectPortal,
+  SelectViewport,
+  useForwardPropsEmits,
+} from 'reka-ui'
+import { cn } from '@/lib/utils'
+import { SelectScrollDownButton, SelectScrollUpButton } from '.'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(
+  defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(),
+  {
+    position: 'item-aligned',
+    align: 'center',
+  },
+)
+const emits = defineEmits<SelectContentEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SelectPortal>
+    <SelectContent
+      data-slot="select-content"
+      :data-align-trigger="position === 'item-aligned'"
+      v-bind="{ ...$attrs, ...forwarded }"
+      :class="cn(
+        'bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-lg shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-translucent relative z-50 max-h-(--reka-select-content-available-height) origin-(--reka-select-content-transform-origin) overflow-x-hidden overflow-y-auto data-[align-trigger=true]:animate-none',
+        position === 'popper'
+          && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+        props.class,
+      )
+      "
+    >
+      <SelectScrollUpButton />
+      <SelectViewport
+        :data-position="position"
+        :class="cn(
+          'data-[position=popper]:h-(--reka-select-trigger-height) data-[position=popper]:w-full data-[position=popper]:min-w-(--reka-select-trigger-width)',
+        )"
+      >
+        <slot />
+      </SelectViewport>
+      <SelectScrollDownButton />
+    </SelectContent>
+  </SelectPortal>
+</template>
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { SelectGroupProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { SelectGroup } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<SelectGroupProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+  <SelectGroup
+    data-slot="select-group"
+    v-bind="delegatedProps"
+    :class="cn('scroll-my-1 p-1', props.class)"
+  >
+    <slot />
+  </SelectGroup>
+</template>
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import type { SelectItemProps } from 'reka-ui'
+
+import type { HTMLAttributes } from 'vue'
+import { faCheck } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { reactiveOmit } from '@vueuse/core'
+import {
+  SelectItem,
+  SelectItemIndicator,
+  SelectItemText,
+  useForwardProps,
+} from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<SelectItemProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectItem
+    data-slot="select-item"
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*=size-])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0',
+        props.class,
+      )
+    "
+  >
+    <span class="pointer-events-none absolute right-2 flex size-4 items-center justify-center">
+      <SelectItemIndicator>
+        <slot name="indicator-icon">
+          <FontAwesomeIcon :icon="faCheck" class="pointer-events-none size-3.5" />
+        </slot>
+      </SelectItemIndicator>
+    </span>
+
+    <SelectItemText>
+      <slot />
+    </SelectItemText>
+  </SelectItem>
+</template>
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { SelectItemTextProps } from 'reka-ui'
+import { SelectItemText } from 'reka-ui'
+
+const props = defineProps<SelectItemTextProps>()
+</script>
+
+<template>
+  <SelectItemText
+    data-slot="select-item-text"
+    v-bind="props"
+  >
+    <slot />
+  </SelectItemText>
+</template>
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { SelectLabelProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { SelectLabel } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<SelectLabelProps & { class?: HTMLAttributes['class'] }>()
+</script>
+
+<template>
+  <SelectLabel
+    data-slot="select-label"
+    :class="cn('text-muted-foreground px-1.5 py-1 text-xs', props.class)"
+  >
+    <slot />
+  </SelectLabel>
+</template>
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { SelectScrollDownButtonProps } from 'reka-ui'
+
+import type { HTMLAttributes } from 'vue'
+import { faChevronDown } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { reactiveOmit } from '@vueuse/core'
+import { SelectScrollDownButton, useForwardProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectScrollDownButton
+    data-slot="select-scroll-down-button"
+    v-bind="forwardedProps"
+    :class="cn('bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*=size-])]:size-4', props.class)"
+  >
+    <slot>
+      <FontAwesomeIcon :icon="faChevronDown" class="size-4" />
+    </slot>
+  </SelectScrollDownButton>
+</template>
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { SelectScrollUpButtonProps } from 'reka-ui'
+
+import type { HTMLAttributes } from 'vue'
+import { faChevronUp } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { reactiveOmit } from '@vueuse/core'
+import { SelectScrollUpButton, useForwardProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectScrollUpButton
+    data-slot="select-scroll-up-button"
+    v-bind="forwardedProps"
+    :class="cn('bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*=size-])]:size-4', props.class)"
+  >
+    <slot>
+      <FontAwesomeIcon :icon="faChevronUp" class="size-4" />
+    </slot>
+  </SelectScrollUpButton>
+</template>
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { SelectSeparatorProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { SelectSeparator } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+  <SelectSeparator
+    data-slot="select-separator"
+    v-bind="delegatedProps"
+    :class="cn('bg-border -mx-1 my-1 h-px pointer-events-none', props.class)"
+  />
+</template>
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { SelectTriggerProps } from 'reka-ui'
+
+import type { HTMLAttributes } from 'vue'
+import { faChevronDown } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { reactiveOmit } from '@vueuse/core'
+import { SelectIcon, SelectTrigger, useForwardProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = withDefaults(
+  defineProps<SelectTriggerProps & { class?: HTMLAttributes['class'], size?: 'sm' | 'default' }>(),
+  { size: 'default' },
+)
+
+const delegatedProps = reactiveOmit(props, 'class', 'size')
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectTrigger
+    data-slot="select-trigger"
+    :data-size="size"
+    v-bind="forwardedProps"
+    :class="cn(
+      'border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-lg border bg-transparent py-2 pr-2 pl-2.5 text-sm transition-colors select-none focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*=size-])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0',
+      props.class,
+    )"
+  >
+    <slot />
+    <SelectIcon as-child>
+      <FontAwesomeIcon :icon="faChevronDown" class="text-muted-foreground size-4 pointer-events-none" />
+    </SelectIcon>
+  </SelectTrigger>
+</template>
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { SelectValueProps } from 'reka-ui'
+import { SelectValue } from 'reka-ui'
+
+const props = defineProps<SelectValueProps>()
+</script>
+
+<template>
+  <SelectValue
+    data-slot="select-value"
+    v-bind="props"
+  >
+    <slot />
+  </SelectValue>
+</template>
@@ -0,0 +1,11 @@
+export { default as Select } from './Select.vue'
+export { default as SelectContent } from './SelectContent.vue'
+export { default as SelectGroup } from './SelectGroup.vue'
+export { default as SelectItem } from './SelectItem.vue'
+export { default as SelectItemText } from './SelectItemText.vue'
+export { default as SelectLabel } from './SelectLabel.vue'
+export { default as SelectScrollDownButton } from './SelectScrollDownButton.vue'
+export { default as SelectScrollUpButton } from './SelectScrollUpButton.vue'
+export { default as SelectSeparator } from './SelectSeparator.vue'
+export { default as SelectTrigger } from './SelectTrigger.vue'
+export { default as SelectValue } from './SelectValue.vue'
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div data-slot="table-container" class="relative w-full overflow-x-auto">
+    <table data-slot="table" :class="cn('w-full caption-bottom text-sm', props.class)">
+      <slot />
+    </table>
+  </div>
+</template>
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <tbody
+    data-slot="table-body"
+    :class="cn('[&_tr:last-child]:border-0', props.class)"
+  >
+    <slot />
+  </tbody>
+</template>
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <caption
+    data-slot="table-caption"
+    :class="cn('text-muted-foreground mt-4 text-sm', props.class)"
+  >
+    <slot />
+  </caption>
+</template>
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <td
+    data-slot="table-cell"
+    :class="cn('p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0', props.class)"
+  >
+    <slot />
+  </td>
+</template>
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { cn } from '@/lib/utils'
+import TableCell from './TableCell.vue'
+import TableRow from './TableRow.vue'
+
+const props = withDefaults(defineProps<{
+  class?: HTMLAttributes['class']
+  colspan?: number
+}>(), {
+  colspan: 1,
+})
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+  <TableRow>
+    <TableCell
+      :class="
+        cn(
+          'p-4 whitespace-nowrap align-middle text-sm text-foreground',
+          props.class,
+        )
+      "
+      v-bind="delegatedProps"
+    >
+      <div class="flex items-center justify-center py-10">
+        <slot />
+      </div>
+    </TableCell>
+  </TableRow>
+</template>
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <tfoot
+    data-slot="table-footer"
+    :class="cn('bg-muted/50 border-t font-medium [&>tr]:last:border-b-0', props.class)"
+  >
+    <slot />
+  </tfoot>
+</template>
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <th
+    data-slot="table-head"
+    :class="cn('text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0', props.class)"
+  >
+    <slot />
+  </th>
+</template>
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <thead
+    data-slot="table-header"
+    :class="cn('[&_tr]:border-b', props.class)"
+  >
+    <slot />
+  </thead>
+</template>
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <tr
+    data-slot="table-row"
+    :class="cn('hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors has-aria-expanded:bg-muted/50', props.class)"
+  >
+    <slot />
+  </tr>
+</template>
@@ -0,0 +1,9 @@
+export { default as Table } from './Table.vue'
+export { default as TableBody } from './TableBody.vue'
+export { default as TableCaption } from './TableCaption.vue'
+export { default as TableCell } from './TableCell.vue'
+export { default as TableEmpty } from './TableEmpty.vue'
+export { default as TableFooter } from './TableFooter.vue'
+export { default as TableHead } from './TableHead.vue'
+export { default as TableHeader } from './TableHeader.vue'
+export { default as TableRow } from './TableRow.vue'
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { TabsRootEmits, TabsRootProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { TabsRoot, useForwardPropsEmits } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<TabsRootProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<TabsRootEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <TabsRoot
+    v-slot="slotProps"
+    data-slot="tabs"
+    :data-orientation="forwarded.orientation || 'horizontal'"
+    v-bind="forwarded"
+    :class="cn('gap-2 group/tabs flex data-horizontal:flex-col', props.class)"
+  >
+    <slot v-bind="slotProps" />
+  </TabsRoot>
+</template>
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { TabsContentProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { TabsContent } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<TabsContentProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+  <TabsContent
+    data-slot="tabs-content"
+    :class="cn('text-sm flex-1 outline-none', props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </TabsContent>
+</template>
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { TabsListProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import type { TabsListVariants } from '.'
+import { reactiveOmit } from '@vueuse/core'
+import { TabsList } from 'reka-ui'
+import { cn } from '@/lib/utils'
+import { tabsListVariants } from '.'
+
+const props = withDefaults(defineProps<TabsListProps & {
+  class?: HTMLAttributes['class']
+  variant?: TabsListVariants['variant']
+}>(), {
+  variant: 'default',
+})
+
+const delegatedProps = reactiveOmit(props, 'class', 'variant')
+</script>
+
+<template>
+  <TabsList
+    data-slot="tabs-list"
+    :data-variant="variant"
+    v-bind="delegatedProps"
+    :class="cn(tabsListVariants({ variant }), props.class)"
+  >
+    <slot />
+  </TabsList>
+</template>
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { TabsTriggerProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { TabsTrigger, useForwardProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<TabsTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TabsTrigger
+    data-slot="tabs-trigger"
+    :class="cn(
+      'gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg:not([class*=size-])]:size-4 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0',
+      'group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent',
+      'data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground',
+      'after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100',
+      props.class,
+    )"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </TabsTrigger>
+</template>
@@ -0,0 +1,24 @@
+import type { VariantProps } from 'class-variance-authority'
+import { cva } from 'class-variance-authority'
+
+export { default as Tabs } from './Tabs.vue'
+export { default as TabsContent } from './TabsContent.vue'
+export { default as TabsList } from './TabsList.vue'
+export { default as TabsTrigger } from './TabsTrigger.vue'
+
+export const tabsListVariants = cva(
+  'rounded-lg p-0.75 group-data-horizontal/tabs:h-8 data-[variant=line]:rounded-none group/tabs-list inline-flex w-fit items-center justify-center text-muted-foreground group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col',
+  {
+    variants: {
+      variant: {
+        default: 'bg-muted',
+        line: 'gap-1 bg-transparent',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)
+
+export type TabsListVariants = VariantProps<typeof tabsListVariants>
				`@@ -0,0 +1 @@`
				`export { default as Input } from './Input.vue'`