@reddb-io/ui 0.3.4 → 0.3.5

package/src/lib/CollectionHistory.svelte

@@ -1,6 +1,11 @@
 <script lang="ts">
   import type { CollectionVcsState, QueryResult, RedClient, VcsCommit, VcsDiff } from '#reddb'
-  import { GitCommitHorizontal, GitCompareArrows, LoaderCircle, RadioTower, RefreshCw, ShieldCheck } from 'lucide-svelte'
+  import GitCommitHorizontal from '@lucide/svelte/icons/git-commit-horizontal'
+  import GitCompareArrows from '@lucide/svelte/icons/git-compare-arrows'
+  import LoaderCircle from '@lucide/svelte/icons/loader-circle'
+  import RadioTower from '@lucide/svelte/icons/radio-tower'
+  import RefreshCw from '@lucide/svelte/icons/refresh-cw'
+  import ShieldCheck from '@lucide/svelte/icons/shield-check'
   import DiffRenderer from '$lib/renderers/DiffRenderer.svelte'
   import LiveChanges from '$lib/LiveChanges.svelte'
 
@@ -125,7 +130,7 @@
     <div class="inline-flex overflow-hidden rounded border border-line-2">
       <button
         type="button"
-        class={['inline-flex h-7 items-center gap-1 px-2', mode === 'commits' ? 'bg-accent text-white' : 'bg-bg-1 text-fg-2 hover:text-fg-0'].join(' ')}
+        class={['inline-flex h-7 items-center gap-1 px-2', mode === 'commits' ? 'bg-primary text-on-primary' : 'bg-bg-1 text-fg-2 hover:text-fg-0'].join(' ')}
         onclick={() => (mode = 'commits')}
       >
         <GitCommitHorizontal class="size-3" />
@@ -133,7 +138,7 @@
       </button>
       <button
         type="button"
-        class={['inline-flex h-7 items-center gap-1 border-l border-line-2 px-2', mode === 'diff' ? 'bg-accent text-white' : 'bg-bg-1 text-fg-2 hover:text-fg-0'].join(' ')}
+        class={['inline-flex h-7 items-center gap-1 border-l border-line-2 px-2', mode === 'diff' ? 'bg-primary text-on-primary' : 'bg-bg-1 text-fg-2 hover:text-fg-0'].join(' ')}
         onclick={() => (mode = 'diff')}
       >
         <GitCompareArrows class="size-3" />
@@ -141,7 +146,7 @@
       </button>
       <button
         type="button"
-        class={['inline-flex h-7 items-center gap-1 border-l border-line-2 px-2', mode === 'live' ? 'bg-accent text-white' : 'bg-bg-1 text-fg-2 hover:text-fg-0'].join(' ')}
+        class={['inline-flex h-7 items-center gap-1 border-l border-line-2 px-2', mode === 'live' ? 'bg-primary text-on-primary' : 'bg-bg-1 text-fg-2 hover:text-fg-0'].join(' ')}
         onclick={() => (mode = 'live')}
       >
         <RadioTower class="size-3" />
@@ -252,7 +257,7 @@
           <tbody>
             {#each commits as commit (commit.hash)}
               <tr class="border-b border-line-1/60 hover:bg-bg-1/50">
-                <td class="px-3 py-1.5 text-accent">{shortHash(commit.hash)}</td>
+                <td class="px-3 py-1.5 text-primary-text">{shortHash(commit.hash)}</td>
                 <td class="px-3 py-1.5 text-fg-1">{commit.message}</td>
                 <td class="px-3 py-1.5 text-fg-3">{commit.author?.name ?? '-'}</td>
                 <td class="px-3 py-1.5 text-fg-3">{formatTime(commit.timestamp_ms)}</td>

package/src/lib/CommandPalette.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { onMount } from 'svelte'
-  import { Kbd } from '@reddb-io/ui-kit'
+  import { Kbd } from '../../vendor/ds/kits/base/src/index.ts'
   import { useRouter, type RouteTarget } from './router.svelte'
   import { theme } from './theme.svelte'
 

package/src/lib/ConnectDropdown.svelte

@@ -6,17 +6,15 @@
     openDatabaseFile,
     unreachableConnectHint,
   } from './connections.svelte'
-  import {
-    Zap,
-    Loader2,
-    AlertCircle,
-    CheckCircle2,
-    Clock,
-    X,
-    Plug,
-    ChevronDown,
-    FolderOpen,
-  } from 'lucide-svelte'
+  import Zap from '@lucide/svelte/icons/zap'
+  import Loader2 from '@lucide/svelte/icons/loader-2'
+  import AlertCircle from '@lucide/svelte/icons/alert-circle'
+  import CheckCircle2 from '@lucide/svelte/icons/check-circle-2'
+  import Clock from '@lucide/svelte/icons/clock'
+  import X from '@lucide/svelte/icons/x'
+  import Plug from '@lucide/svelte/icons/plug'
+  import ChevronDown from '@lucide/svelte/icons/chevron-down'
+  import FolderOpen from '@lucide/svelte/icons/folder-open'
 
   const DEFAULT_URL = 'red://localhost'
 
@@ -227,7 +225,7 @@
         <button
           type="submit"
           disabled={status === 'probing' || !url.trim() || Boolean(username.trim()) !== Boolean(password)}
-          class="w-full h-9 bg-accent text-white font-medium rounded-md cursor-pointer transition-colors hover:bg-[#ff3868] disabled:opacity-40 disabled:cursor-not-allowed flex items-center justify-center gap-2 text-[13px]"
+          class="w-full h-9 bg-primary text-on-primary font-medium rounded-md cursor-pointer transition-colors hover:bg-primary-active disabled:opacity-40 disabled:cursor-not-allowed flex items-center justify-center gap-2 text-[13px]"
         >
           {#if status === 'probing'}
             <Loader2 class="size-3.5 animate-spin" />

package/src/lib/DevConsole.svelte

@@ -10,7 +10,10 @@
   // panel chrome uses the neutral surface ramp, so the one-accent-per-screen
   // rule (design principle #6) holds even while the console is open.
   import { devConsole as defaultStore, type ConsoleEntry } from '#reddb'
-  import { X, Copy, Trash2, Check } from 'lucide-svelte'
+  import X from '@lucide/svelte/icons/x'
+  import Copy from '@lucide/svelte/icons/copy'
+  import Trash2 from '@lucide/svelte/icons/trash-2'
+  import Check from '@lucide/svelte/icons/check'
 
   let {
     store = defaultStore,

package/src/lib/EmptyState.svelte

@@ -1,27 +1,19 @@
 <script lang="ts">
+  import { EmptyState, Icon } from '../../vendor/ds/kits/base/src/index.ts'
+  import type { ComponentProps, Snippet } from 'svelte'
+
   interface Props {
     title: string
     message?: string
-    /** lucide-svelte icon component */
-    icon?: any
+    icon?: ComponentProps<typeof Icon>['icon']
     hint?: string
-    actions?: import('svelte').Snippet
+    actions?: Snippet
   }
-  let { title, message, icon: Icon, hint, actions }: Props = $props()
+  let { title, message, icon, hint, actions }: Props = $props()
 </script>
 
-<div class="flex flex-col items-center justify-center text-center py-16 px-6 min-h-[280px] bg-bg-1 border border-line-1 border-dashed rounded-lg">
-  {#if Icon}
-    <Icon class="size-9 text-fg-3 mb-4" strokeWidth={1.4} />
-  {/if}
-  <h2 class="type-h2 m-0 mb-2">{title}</h2>
-  {#if message}
-    <p class="text-fg-2 text-[13px] m-0 max-w-md leading-relaxed">{message}</p>
-  {/if}
-  {#if hint}
-    <code class="font-mono text-[11px] text-fg-3 mt-3 px-2 py-1 bg-bg-2 border border-line-1 rounded">{hint}</code>
-  {/if}
-  {#if actions}
-    <div class="flex items-center gap-2 mt-5">{@render actions()}</div>
-  {/if}
-</div>
+<EmptyState {title} description={message} {hint} {actions}>
+  {#snippet media()}
+    {#if icon}<Icon {icon} size="lg" />{/if}
+  {/snippet}
+</EmptyState>

package/src/lib/ErrorBoundary.svelte

@@ -10,7 +10,8 @@
   // Styling stays on the dark tokens and keeps a single accent (the primary
   // Retry action), per the one-accent discipline.
   import type { Snippet } from 'svelte'
-  import { RotateCw, RefreshCw } from 'lucide-svelte'
+  import RotateCw from '@lucide/svelte/icons/rotate-cw'
+  import RefreshCw from '@lucide/svelte/icons/refresh-cw'
 
   let { children }: { children: Snippet } = $props()
 
@@ -45,7 +46,7 @@
         </p>
       </div>
 
-      <p class="m-0 max-w-lg break-words font-mono text-[12px] text-accent">
+      <p class="m-0 max-w-lg break-words font-mono text-[12px] text-primary-text">
         {messageOf(error)}
       </p>
 

package/src/lib/LiveChanges.svelte

@@ -2,7 +2,11 @@
   import { onDestroy } from 'svelte'
   import { CDCStreamClient, type ChangeEvent, type Subscription } from '#reddb'
   import { connection } from '$lib/connections.svelte'
-  import { Pause, Play, Activity, Filter, X } from 'lucide-svelte'
+  import Pause from '@lucide/svelte/icons/pause'
+  import Play from '@lucide/svelte/icons/play'
+  import Activity from '@lucide/svelte/icons/activity'
+  import Filter from '@lucide/svelte/icons/filter'
+  import X from '@lucide/svelte/icons/x'
 
   interface Props {
     collection?: string
@@ -151,7 +155,7 @@
   <div class="flex-1 overflow-auto">
     {#if error}
       <div class="p-6 text-[12px] font-mono text-fg-3">
-        <span class="text-accent">error:</span> {error}
+        <span class="text-primary-text">error:</span> {error}
       </div>
     {:else if !connection.connected}
       <div class="p-6 text-[12px] font-mono text-fg-3">
@@ -174,7 +178,7 @@
                 'inline-block w-14 text-center text-[10px] uppercase rounded px-1 py-0.5 shrink-0 border',
                 e.operation === 'insert' && 'border-ok/40 text-ok',
                 e.operation === 'update' && 'border-warn/40 text-warn',
-                e.operation === 'delete' && 'border-accent/40 text-accent',
+                e.operation === 'delete' && 'border-accent/40 text-primary-text',
               ]
                 .filter(Boolean)
                 .join(' ')}

package/src/lib/MasterPasswordDialog.svelte

@@ -1,5 +1,9 @@
 <script lang="ts">
-  import { Lock, Loader2, AlertCircle, KeyRound, Trash2 } from 'lucide-svelte'
+  import Lock from '@lucide/svelte/icons/lock'
+  import Loader2 from '@lucide/svelte/icons/loader-2'
+  import AlertCircle from '@lucide/svelte/icons/alert-circle'
+  import KeyRound from '@lucide/svelte/icons/key-round'
+  import Trash2 from '@lucide/svelte/icons/trash-2'
   import { secureStore } from './secureStore.svelte'
   import { connection } from './connections.svelte'
 
@@ -75,9 +79,9 @@
     >
       <div class="flex items-center gap-2 mb-1.5 text-fg-0">
         {#if needsSetup}
-          <KeyRound class="size-4 text-accent" />
+          <KeyRound class="size-4 text-primary-text" />
         {:else}
-          <Lock class="size-4 text-accent" />
+          <Lock class="size-4 text-primary-text" />
         {/if}
         <h2 id="mp-title" class="type-h2 m-0">{title}</h2>
       </div>
@@ -109,7 +113,7 @@
       <button
         type="submit"
         disabled={busy || !password || (needsSetup && !confirm)}
-        class="w-full h-9 mt-1 bg-accent text-white font-medium rounded-md cursor-pointer transition-colors hover:bg-[#ff3868] disabled:opacity-40 disabled:cursor-not-allowed flex items-center justify-center gap-2 text-[13px]"
+        class="w-full h-9 mt-1 bg-primary text-on-primary font-medium rounded-md cursor-pointer transition-colors hover:bg-primary-active disabled:opacity-40 disabled:cursor-not-allowed flex items-center justify-center gap-2 text-[13px]"
       >
         {#if busy}
           <Loader2 class="size-3.5 animate-spin" />

package/src/lib/MetricChart.svelte

@@ -15,11 +15,11 @@
   let { chart, series, unit = null }: Props = $props()
 
   // Worse percentiles trend redder; single series leads with the accent.
-  const PALETTE = ['#ff2056', '#4ade80', '#fbbf24', '#38bdf8', '#a78bfa']
+  const PALETTE = Array.from({ length: 5 }, (_, i) => `var(--reddb-color-series-${i + 1})`)
   const PERCENTILE_COLOR: Record<string, string> = {
-    p50: '#4ade80',
-    p95: '#fbbf24',
-    p99: '#ff2056',
+    p50: 'var(--reddb-color-feedback-success-foreground)',
+    p95: 'var(--reddb-color-feedback-warning-foreground)',
+    p99: 'var(--reddb-color-feedback-danger-foreground)',
   }
 
   // LayerChart auto-detects a time scale from Date x-values.
@@ -55,7 +55,7 @@
   <!-- Point-in-time level. A ratio shows a 0–100% bar; other gauges show the
        raw latest value. -->
   <div class="flex h-full flex-col items-center justify-center gap-3">
-    <div class="font-mono text-[40px] font-semibold leading-none text-accent">
+    <div class="font-mono text-[40px] font-semibold leading-none text-primary-text">
       {latest === null ? '—' : fmtValue(latest)}{#if unit && !isRatio}<span class="ml-1 text-[16px] text-fg-3">{unit}</span>{/if}
     </div>
     {#if isRatio && latest !== null}

package/src/lib/PendingChangesPanel.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
   import { pendingChanges, buildUpdateSql } from './pending-changes.svelte'
   import { connection } from './connections.svelte'
-  import { X, AlertTriangle, Lock } from 'lucide-svelte'
+  import X from '@lucide/svelte/icons/x'
+  import AlertTriangle from '@lucide/svelte/icons/alert-triangle'
+  import Lock from '@lucide/svelte/icons/lock'
 
   // Mutations are committed against the server; block them while it reports
   // read-only (#23). The reason explains *why* the control is disabled.
@@ -96,7 +98,7 @@
                   <span class="text-fg-3">old</span>
                   <span class="text-fg-2 truncate">{String(change.oldValue ?? 'NULL')}</span>
                   <span class="text-fg-3">new</span>
-                  <span class="text-accent truncate">{change.newValue}</span>
+                  <span class="text-primary-text truncate">{change.newValue}</span>
                 </div>
                 <div class="text-fg-3 text-[10.5px] mt-1 truncate">
                   {buildUpdateSql(change)}
@@ -140,7 +142,7 @@
         </button>
         <button
           type="button"
-          class="text-[12px] font-mono px-3 py-1 bg-accent text-white rounded disabled:opacity-50"
+          class="text-[12px] font-mono px-3 py-1 bg-primary text-on-primary rounded disabled:opacity-50"
           onclick={apply}
           disabled={pendingChanges.count === 0 || committing || readOnly}
           title={readOnly ? (readOnlyReason ?? 'Server is read-only — mutations are disabled.') : undefined}

package/src/lib/QueryEditor.svelte

@@ -1,11 +1,13 @@
 <script lang="ts">
-  import { Play, Loader2, X } from 'lucide-svelte'
+  import Play from '@lucide/svelte/icons/play'
+  import Loader2 from '@lucide/svelte/icons/loader-2'
+  import X from '@lucide/svelte/icons/x'
   import { connection } from '$lib/connections.svelte'
   import { queryTabs, deriveQueryLabel, formatElapsed } from '$lib/query-tabs.svelte'
   import { tabs } from '$lib/tabs.svelte'
   import { registry } from '$lib/renderers'
   import type { Capability } from '$lib/renderers'
-  import { Kbd } from '@reddb-io/ui-kit'
+  import { Kbd } from '../../vendor/ds/kits/base/src/index.ts'
 
   interface Props {
     tabId: string
@@ -82,7 +84,7 @@
         <span class="text-fg-3 font-mono text-[11px] hidden sm:inline">Run with <Kbd>⌘</Kbd><Kbd>↵</Kbd></span>
         <button
           type="button"
-          class="inline-flex items-center gap-1 rounded border border-accent/60 bg-accent/10 px-2 py-1 text-[12px] font-mono text-accent hover:bg-accent/20 disabled:opacity-50 disabled:cursor-not-allowed"
+          class="inline-flex items-center gap-1 rounded border border-accent/60 bg-accent/10 px-2 py-1 text-[12px] font-mono text-primary-text hover:bg-accent/20 disabled:opacity-50 disabled:cursor-not-allowed"
           onclick={run}
           disabled={qs?.running || !connection.connected}
           aria-label="Run query"
@@ -116,7 +118,7 @@
           <div class="flex items-start justify-between gap-4">
             <div class="min-w-0">
               <div class="flex items-center gap-2 text-fg-1 text-[13px]">
-                <Loader2 class="size-4 animate-spin text-accent" />
+                <Loader2 class="size-4 animate-spin text-primary-text" />
                 <span>Running query</span>
               </div>
               <div class="mt-2 text-[11px] text-fg-3">

package/src/lib/ResultsPane.svelte

@@ -22,7 +22,19 @@
   import LiveChanges from '$lib/LiveChanges.svelte'
   import QueryEditor from '$lib/QueryEditor.svelte'
   import type { CollectionMetadata, QueryResult, RedClient } from '#reddb'
-  import { X, Activity, Database, Plus, FileCode2, EyeOff, Eye, Info, HardDrive, Rows3, Layers3, ScanLine, GitBranch } from 'lucide-svelte'
+  import X from '@lucide/svelte/icons/x'
+  import Activity from '@lucide/svelte/icons/activity'
+  import Database from '@lucide/svelte/icons/database'
+  import Plus from '@lucide/svelte/icons/plus'
+  import FileCode2 from '@lucide/svelte/icons/file-code-2'
+  import EyeOff from '@lucide/svelte/icons/eye-off'
+  import Eye from '@lucide/svelte/icons/eye'
+  import Info from '@lucide/svelte/icons/info'
+  import HardDrive from '@lucide/svelte/icons/hard-drive'
+  import Rows3 from '@lucide/svelte/icons/rows-3'
+  import Layers3 from '@lucide/svelte/icons/layers-3'
+  import ScanLine from '@lucide/svelte/icons/scan-line'
+  import GitBranch from '@lucide/svelte/icons/git-branch'
 
   const router = useRouter()
 
@@ -458,7 +470,7 @@
             class={[
               'inline-flex items-center gap-1 h-6 px-1.5 rounded border transition-colors cursor-pointer',
               metadataOpen
-                ? 'border-accent/40 bg-accent/10 text-accent'
+                ? 'border-accent/40 bg-accent/10 text-primary-text'
                 : 'border-line-1 text-fg-3 hover:text-fg-1 hover:border-line-2',
             ].join(' ')}
           >
@@ -476,7 +488,7 @@
               class={[
                 'inline-flex items-center gap-1 h-6 px-1.5 rounded border transition-colors cursor-pointer',
                 historyOpen[activeTab.id]
-                  ? 'border-accent/40 bg-accent/10 text-accent'
+                  ? 'border-accent/40 bg-accent/10 text-primary-text'
                   : 'border-line-1 text-fg-3 hover:text-fg-1 hover:border-line-2',
               ].join(' ')}
             >
@@ -493,7 +505,7 @@
           class={[
             'inline-flex items-center gap-1 h-6 px-1.5 rounded border transition-colors cursor-pointer',
             activeTab.showSystemColumns
-              ? 'border-accent/40 bg-accent/10 text-accent'
+              ? 'border-accent/40 bg-accent/10 text-primary-text'
               : 'border-line-1 text-fg-3 hover:text-fg-1 hover:border-line-2',
           ].join(' ')}
         >
@@ -681,7 +693,7 @@
                 <div class="flex flex-wrap items-center gap-x-4 gap-y-2">
                   <div class="min-w-[180px] flex-1">
                     <div class="flex items-center gap-2">
-                      <span class="rounded border border-accent/30 bg-accent/10 px-1.5 py-0.5 font-mono text-[10px] uppercase tracking-[0.08em] text-accent">
+                      <span class="rounded border border-accent/30 bg-accent/10 px-1.5 py-0.5 font-mono text-[10px] uppercase tracking-[0.08em] text-primary-text">
                         {catalog.model ?? 'collection'}
                       </span>
                       <span class="truncate font-mono text-[12px] text-fg-0">{catalog.name}</span>
@@ -747,7 +759,7 @@
                       <span class="text-fg-3">name</span>
                       <span class="text-fg-0 truncate">{meta.name ?? tab.key}</span>
                       <span class="text-fg-3">kind</span>
-                      <span class="text-accent">{meta.kind ?? meta.capability ?? tab.capability ?? 'unknown'}</span>
+                      <span class="text-primary-text">{meta.kind ?? meta.capability ?? tab.capability ?? 'unknown'}</span>
                       <span class="text-fg-3">tenant</span>
                       <span class="text-fg-1">{meta.tenant ?? 'not exposed'}</span>
                       <span class="text-fg-3">indexes</span>
@@ -757,7 +769,7 @@
                     <div class="grid gap-1">
                       <div class="flex flex-wrap gap-1">
                         {#if meta.capability}
-                          <span class="rounded border border-accent/30 bg-accent/10 px-1.5 py-0.5 text-accent">{meta.capability}</span>
+                          <span class="rounded border border-accent/30 bg-accent/10 px-1.5 py-0.5 text-primary-text">{meta.capability}</span>
                         {/if}
                         {#each meta.capabilities ?? [] as cap}
                           <span class="rounded border border-line-1 px-1.5 py-0.5 text-fg-2">{cap}</span>

package/src/lib/SchemaTree.svelte

@@ -10,7 +10,11 @@
   } from './capability'
   import { defaultSubpage } from './collection-pages'
   import { useRouter } from './router.svelte'
-  import { Plug, Database, Lock, Search, X } from 'lucide-svelte'
+  import Plug from '@lucide/svelte/icons/plug'
+  import Database from '@lucide/svelte/icons/database'
+  import Lock from '@lucide/svelte/icons/lock'
+  import Search from '@lucide/svelte/icons/search'
+  import X from '@lucide/svelte/icons/x'
 
   const router = useRouter()
 
@@ -99,7 +103,7 @@
 
 {#if secureStore.locked}
   <div class="p-3 flex flex-col items-start gap-2 text-[12px] text-fg-3 font-mono leading-relaxed">
-    <Lock class="size-4 text-accent" />
+    <Lock class="size-4 text-primary-text" />
     <span class="text-fg-1">Locked.</span>
     <span>Enter your master password to load the schema.</span>
   </div>
@@ -167,7 +171,7 @@
         onclick={() => (capabilityFilter = 'all')}
         class={[
           'h-5 rounded border px-1.5 font-mono text-[10px] cursor-pointer transition-colors',
-          capabilityFilter === 'all' ? 'border-accent/40 bg-accent/10 text-accent' : 'border-line-1 text-fg-3 hover:text-fg-1 hover:border-line-2',
+          capabilityFilter === 'all' ? 'border-accent/40 bg-accent/10 text-primary-text' : 'border-line-1 text-fg-3 hover:text-fg-1 hover:border-line-2',
         ].join(' ')}
       >
         all {items.length}
@@ -180,7 +184,7 @@
           title={g.label}
           class={[
             'h-5 rounded border px-1.5 font-mono text-[10px] cursor-pointer transition-colors',
-            capabilityFilter === cap ? 'border-accent/40 bg-accent/10 text-accent' : 'border-line-1 text-fg-3 hover:text-fg-1 hover:border-line-2',
+            capabilityFilter === cap ? 'border-accent/40 bg-accent/10 text-primary-text' : 'border-line-1 text-fg-3 hover:text-fg-1 hover:border-line-2',
           ].join(' ')}
         >
           {g.glyph} {count}

package/src/lib/SecurityView.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Card, Badge } from '@reddb-io/ui-kit'
+  import { Card, Badge } from '../../vendor/ds/kits/base/src/index.ts'
   import PageHeader from '$lib/PageHeader.svelte'
   import EmptyState from '$lib/EmptyState.svelte'
   import { activity } from '$lib/activity.svelte'
@@ -13,7 +13,14 @@
   } from '$lib/policies'
   import { secureStore } from '$lib/secureStore.svelte'
   import type { AuthPolicy, AuthTenant, AuthUser, Whoami } from '#reddb'
-  import { Building2, CheckCircle2, Lock, RefreshCw, ScrollText, ShieldAlert, Users, XCircle } from 'lucide-svelte'
+  import Building2 from '@lucide/svelte/icons/building-2'
+  import CheckCircle2 from '@lucide/svelte/icons/check-circle-2'
+  import Lock from '@lucide/svelte/icons/lock'
+  import RefreshCw from '@lucide/svelte/icons/refresh-cw'
+  import ScrollText from '@lucide/svelte/icons/scroll-text'
+  import ShieldAlert from '@lucide/svelte/icons/shield-alert'
+  import Users from '@lucide/svelte/icons/users'
+  import XCircle from '@lucide/svelte/icons/x-circle'
 
   let whoami = $state<Whoami | null>(null)
   let tenants = $state<AuthTenant[]>([])
@@ -151,11 +158,11 @@
           {:else if whoami}
             <div class="grid grid-cols-[110px_1fr] gap-x-3 gap-y-2 text-[12px] font-mono">
               <span class="text-fg-3">authenticated</span>
-              <span>{#if whoami.authenticated}<Badge tone="ok">yes</Badge>{:else}<Badge tone="warn">no</Badge>{/if}</span>
+              <span>{#if whoami.authenticated}<Badge tone="success">yes</Badge>{:else}<Badge tone="warning">no</Badge>{/if}</span>
               <span class="text-fg-3">username</span>
               <span class="text-fg-0">{whoami.username}</span>
               <span class="text-fg-3">role</span>
-              <span class="text-accent">{whoami.role}</span>
+              <span class="text-primary-text">{whoami.role}</span>
               {#if whoami.note}
                 <span class="text-fg-3">note</span>
                 <span class="text-fg-1">{whoami.note}</span>
@@ -184,7 +191,7 @@
                 <div class="rounded border border-line-1 bg-bg-0 px-2 py-1.5">
                   <div class="flex items-center gap-2">
                     <span class="text-fg-0">{tenant.name ?? tenant.slug ?? tenant.id ?? 'tenant'}</span>
-                    {#if tenant.role}<Badge tone="accent">{tenant.role}</Badge>{/if}
+                    {#if tenant.role}<Badge tone="neutral">{tenant.role}</Badge>{/if}
                   </div>
                   <div class="mt-1 text-fg-3">
                     {tenant.id ?? tenant.slug ?? '-'}
@@ -215,7 +222,7 @@
                   <div class="rounded border border-line-1 bg-bg-0 px-2 py-1.5">
                     <div class="flex items-center gap-2">
                       <span class="text-fg-0">{policy.name ?? policy.id ?? 'policy'}</span>
-                      {#if policy.effect}<Badge tone={policy.effect === 'deny' ? 'danger' : 'ok'}>{policy.effect}</Badge>{/if}
+                      {#if policy.effect}<Badge tone={policy.effect === 'deny' ? 'danger' : 'success'}>{policy.effect}</Badge>{/if}
                     </div>
                     <div class="mt-1 text-fg-3">
                       {policy.action ?? '*'} · {policy.resource ?? '*'}
@@ -261,8 +268,8 @@
                   {#each users as user (user.username)}
                     <tr class="border-b border-line-1/60 hover:bg-bg-1/40">
                       <td class="px-2 py-1 text-fg-0">{user.username}</td>
-                      <td class="px-2 py-1 text-accent">{user.role ?? '-'}</td>
-                      <td class="px-2 py-1">{#if user.mfa}<Badge tone="ok">on</Badge>{:else}<span class="text-fg-3">-</span>{/if}</td>
+                      <td class="px-2 py-1 text-primary-text">{user.role ?? '-'}</td>
+                      <td class="px-2 py-1">{#if user.mfa}<Badge tone="success">on</Badge>{:else}<span class="text-fg-3">-</span>{/if}</td>
                       <td class="px-2 py-1 text-fg-2">{fmtTime(user.created_at)}</td>
                       <td class="px-2 py-1 text-fg-2">{fmtTime(user.last_active)}</td>
                     </tr>
@@ -294,9 +301,9 @@
                   <tbody>
                     {#each policies as policy, i (`${policy.id ?? policy.name ?? i}`)}
                       <tr class="border-b border-line-1/60 hover:bg-bg-1/40">
-                        <td class="px-2 py-1">{#if policy.effect}<Badge tone={policy.effect === 'deny' ? 'danger' : 'ok'}>{policy.effect}</Badge>{:else}<span class="text-fg-3">-</span>{/if}</td>
+                        <td class="px-2 py-1">{#if policy.effect}<Badge tone={policy.effect === 'deny' ? 'danger' : 'success'}>{policy.effect}</Badge>{:else}<span class="text-fg-3">-</span>{/if}</td>
                         <td class="px-2 py-1 text-fg-1">{policy.principal ?? '-'}</td>
-                        <td class="px-2 py-1 text-accent">{policy.action ?? '*'}</td>
+                        <td class="px-2 py-1 text-primary-text">{policy.action ?? '*'}</td>
                         <td class="px-2 py-1 text-fg-1">{policy.resource ?? '*'}</td>
                         <td class="px-2 py-1 text-fg-2">{policy.tenant ?? '-'}</td>
                       </tr>
@@ -338,7 +345,7 @@
                             <span class="inline-flex items-center gap-1 text-danger"><XCircle class="size-3.5" /> no</span>
                           {/if}
                         </td>
-                        <td class="px-2 py-1 text-accent">{row.action}</td>
+                        <td class="px-2 py-1 text-primary-text">{row.action}</td>
                         <td class="px-2 py-1 text-fg-1">{row.resourceLabel}</td>
                         <td class="px-2 py-1">
                           {#if row.effects.length === 0}
@@ -346,7 +353,7 @@
                           {:else}
                             <span class="inline-flex flex-wrap gap-1">
                               {#each row.effects as effect}
-                                <Badge tone={effect === 'deny' ? 'danger' : 'ok'}>{effect}</Badge>
+                                <Badge tone={effect === 'deny' ? 'danger' : 'success'}>{effect}</Badge>
                               {/each}
                             </span>
                           {/if}

package/src/lib/SettingsView.svelte

@@ -1,25 +1,24 @@
 <script lang="ts">
   // Settings surface: a bounded pane shell backed by live SQL introspection.
-  import { ListRow, NavItem, Pill, SectionHeading } from '@reddb-io/ui-kit'
-  import {
-    AlertCircle,
-    Download,
-    FileJson,
-    KeyRound,
-    Eye,
-    EyeOff,
-    Link2,
-    Plus,
-    RefreshCw,
-    Search,
-    Save,
-    Settings2,
-    ShieldOff,
-    SlidersHorizontal,
-    Trash2,
-    Unplug,
-    type Icon,
-  } from 'lucide-svelte'
+  import { NavItem, Pill } from '../../vendor/ds/kits/app/src/index.ts'
+  import { Icon as DsIcon, type IconGlyph } from '../../vendor/ds/kits/base/src/index.ts'
+  import { ListRow, SectionHeading } from '@reddb-io/ui-kit'
+  import AlertCircle from '@lucide/svelte/icons/alert-circle'
+  import Download from '@lucide/svelte/icons/download'
+  import FileJson from '@lucide/svelte/icons/file-json'
+  import KeyRound from '@lucide/svelte/icons/key-round'
+  import Eye from '@lucide/svelte/icons/eye'
+  import EyeOff from '@lucide/svelte/icons/eye-off'
+  import Link2 from '@lucide/svelte/icons/link-2'
+  import Plus from '@lucide/svelte/icons/plus'
+  import RefreshCw from '@lucide/svelte/icons/refresh-cw'
+  import Search from '@lucide/svelte/icons/search'
+  import Save from '@lucide/svelte/icons/save'
+  import Settings2 from '@lucide/svelte/icons/settings-2'
+  import ShieldOff from '@lucide/svelte/icons/shield-off'
+  import SlidersHorizontal from '@lucide/svelte/icons/sliders-horizontal'
+  import Trash2 from '@lucide/svelte/icons/trash-2'
+  import Unplug from '@lucide/svelte/icons/unplug'
   import PageHeader from '$lib/PageHeader.svelte'
   import EmptyState from '$lib/EmptyState.svelte'
   import { activity } from '$lib/activity.svelte'
@@ -45,7 +44,7 @@
     type SettingsPane,
   } from '$lib/settings-sections'
 
-  const icons: Record<string, typeof Icon> = {
+  const icons: Record<string, IconGlyph> = {
     key: KeyRound,
     settings: Settings2,
   }
@@ -587,10 +586,10 @@
           {@const PaneIcon = icons[pane.icon] ?? Settings2}
           <NavItem
             label={pane.label}
-            active={pane.id === activePane.id}
+            current={pane.id === activePane.id}
             onclick={() => (activePaneId = pane.id)}
           >
-            {#snippet icon()}<PaneIcon class="size-3.5" />{/snippet}
+            {#snippet icon()}<DsIcon icon={PaneIcon} size="sm" />{/snippet}
             {#snippet trailing()}<Pill>{paneCount(pane)}</Pill>{/snippet}
           </NavItem>
         {/each}
@@ -741,7 +740,7 @@
                     disabled
                     tabindex="-1"
                     value={String(entry.value)}
-                    class="h-6 w-28 rounded border border-line-2 bg-bg-2 px-1.5 font-mono text-[11px] text-accent disabled:opacity-100"
+                    class="h-6 w-28 rounded border border-line-2 bg-bg-2 px-1.5 font-mono text-[11px] text-primary-text disabled:opacity-100"
                     aria-label={control.label}
                   >
                     {#if !control.options?.includes(String(entry.value))}

package/src/lib/ShortcutOverlay.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { onMount } from 'svelte'
-  import { Kbd } from '@reddb-io/ui-kit'
+  import { Kbd } from '../../vendor/ds/kits/base/src/index.ts'
   import { shortcuts, shortcutContexts, type ShortcutContext } from './shortcuts'
 
   let open = $state(false)

package/src/lib/Splash.svelte

@@ -34,7 +34,7 @@
   >
     <div class="flex items-center gap-2">
       <div class="w-2 h-2 rounded-full bg-accent shadow-[0_0_12px_var(--color-accent-glow)]"></div>
-      <span class="font-mono font-semibold text-fg-0 text-[15px] tracking-tight">red<span class="text-accent mx-px">·</span>ui</span>
+      <span class="font-mono font-semibold text-fg-0 text-[15px] tracking-tight">red<span class="text-primary-text mx-px">·</span>ui</span>
     </div>
   </div>
 {/if}