@reddb-io/ui 0.3.3 → 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'
 
@@ -29,13 +27,15 @@
 
   let open = $state(false)
   let url = $state(pickDefaultUrl())
+  let username = $state('')
+  let password = $state('')
   let status = $state<'idle' | 'probing' | 'ok' | 'error'>('idle')
   let error = $state<string | null>(null)
   let rtt = $state<number | null>(null)
   let menuEl: HTMLDivElement | undefined = $state()
   let inputEl: HTMLInputElement | undefined = $state()
 
-  async function attempt(targetUrl: string) {
+  async function attempt(targetUrl: string, signIn = false) {
     const cleaned = targetUrl.trim().replace(/\/$/, '')
     if (!cleaned) return
     url = cleaned
@@ -54,7 +54,12 @@
     status = 'probing'
     error = null
     rtt = null
-    const ok = await connection.tryConnect(makeCustomConnection(cleaned))
+    const preset = makeCustomConnection(cleaned)
+    const secret = password
+    password = ''
+    const ok = signIn
+      ? await connection.login(preset, username.trim(), secret)
+      : await connection.tryConnect(preset)
     if (ok) {
       status = 'ok'
       rtt = connection.probe.rtt_ms ?? null
@@ -67,7 +72,7 @@
 
   function submit(e: Event) {
     e.preventDefault()
-    attempt(url)
+    attempt(url, Boolean(username.trim() && password))
   }
 
   // Desktop-only "Open database file…" flow (#123): the native OS picker feeds
@@ -118,6 +123,15 @@
     return () => window.removeEventListener('red:open-connect', onOpen)
   })
 
+  $effect(() => {
+    if (!connection.connected && connection.probe.error) {
+      url = connection.active.url
+      error = connection.probe.error
+      status = 'error'
+      open = true
+    }
+  })
+
   const dotClass = $derived(
     connection.connected ? 'bg-ok' : status === 'error' ? 'bg-danger' : 'bg-fg-3'
   )
@@ -178,7 +192,7 @@
     <div class="fixed inset-0 z-40" onclick={() => (open = false)} role="presentation"></div>
     <div
       bind:this={menuEl}
-      class="absolute top-[calc(100%+6px)] left-0 z-50 w-[380px] bg-bg-1 border border-line-2 rounded-lg shadow-2xl p-4"
+      class="absolute top-[calc(100%+6px)] left-0 z-50 w-[380px] max-w-[calc(100vw-2rem)] bg-bg-1 border border-line-2 rounded-lg shadow-2xl p-4"
       role="dialog"
       aria-label="Connect to reddb"
     >
@@ -188,6 +202,8 @@
           id="connect-url"
           bind:this={inputEl}
           bind:value={url}
+          disabled={status === 'probing'}
+          oninput={() => { password = '' }}
           spellcheck="false"
           placeholder="red://localhost"
           class="w-full h-9 px-3 mb-1 bg-bg-0 border border-line-2 rounded-md font-mono text-[13px] text-fg-0 outline-none transition-colors focus:border-accent placeholder:text-fg-3"
@@ -195,10 +211,21 @@
 
         <div class="mb-2 text-[10px] font-mono text-fg-3">reachable here: {supportedHint}</div>
 
+        <details class="mb-3">
+          <summary class="cursor-pointer text-xs text-fg-2">Sign in to the database</summary>
+          <div class="grid gap-2 mt-2">
+            <label class="text-xs text-fg-2" for="connect-username">Username</label>
+            <input id="connect-username" autocomplete="username" bind:value={username} disabled={status === 'probing'} class="w-full h-9 px-3 bg-bg-0 border border-line-2 rounded-md text-fg-0 outline-none focus:border-accent" />
+            <label class="text-xs text-fg-2" for="connect-password">Password</label>
+            <input id="connect-password" type="password" autocomplete="current-password" bind:value={password} disabled={status === 'probing'} class="w-full h-9 px-3 bg-bg-0 border border-line-2 rounded-md text-fg-0 outline-none focus:border-accent" />
+            <p class="text-[11px] text-fg-3">Credentials go directly to this database. The session stays in this tab.</p>
+          </div>
+        </details>
+
         <button
           type="submit"
-          disabled={status === 'probing' || !url.trim()}
-          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]"
+          disabled={status === 'probing' || !url.trim() || Boolean(username.trim()) !== Boolean(password)}
+          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" />
@@ -209,13 +236,13 @@
           {/if}
         </button>
 
-        <div class="h-5 mt-2 flex items-center gap-1.5 text-[11px] font-mono">
+        <div aria-live="polite" class="min-h-5 mt-2 flex items-center gap-1.5 text-[11px] font-mono">
           {#if status === 'ok'}
             <CheckCircle2 class="size-3 text-ok" />
             <span class="text-ok">Connected{rtt !== null ? ` · ${rtt}ms` : ''}</span>
           {:else if status === 'error'}
             <AlertCircle class="size-3 text-danger" />
-            <span class="text-danger truncate">{error}</span>
+            <span class="text-danger break-words">{error}</span>
           {/if}
         </div>
       </form>

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}