@reddb-io/ui 0.3.3 → 0.3.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reddb-io/ui",
-  "version": "0.3.3",
+  "version": "0.3.5",
   "private": false,
   "description": "RedDB UI components and standalone web application.",
   "type": "module",
@@ -39,47 +39,34 @@
     "src/lib/**/*.svelte",
     "src/lib/**/*.ts",
     "!src/lib/**/*.test.ts",
-    "README.md"
+    "README.md",
+    "vendor/ds"
   ],
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
     "@aflsolutions/graphology-communities-leiden": "^1.1.1",
-    "@fontsource-variable/inter": "^5.2.8",
-    "@fontsource-variable/jetbrains-mono": "^5.2.8",
+    "@reddb-io/ui-kit": "0.3.5",
+    "@reddb-io/ui-mcp": "0.3.5",
     "@sigma/edge-curve": "^3.1.0",
     "@sigma/node-border": "^3.0.0",
     "@tauri-apps/api": "^2.5.0",
     "@tauri-apps/plugin-dialog": "^2.5.0",
     "@tauri-apps/plugin-http": "^2.5.9",
     "@xyflow/svelte": "^1.2.0",
-    "bits-ui": "^2.18.1",
+    "bits-ui": "^2.19.5",
     "clsx": "^2.1.1",
     "graphology": "^0.26.0",
     "graphology-communities-louvain": "^2.0.2",
     "graphology-layout-forceatlas2": "^0.10.1",
     "layerchart": "^1.0.13",
-    "lucide-svelte": "^0.475.0",
     "sigma": "^3.0.3",
     "tailwind-merge": "^3.6.0",
-    "tailwind-variants": "^2.1.0",
-    "@reddb-io/ui-kit": "0.3.3",
-    "@reddb-io/ui-mcp": "0.3.3"
-  },
-  "devDependencies": {
-    "@sveltejs/adapter-static": "^3.0.8",
-    "@sveltejs/kit": "^2.17.0",
-    "@sveltejs/vite-plugin-svelte": "^5.0.3",
-    "@tailwindcss/vite": "^4.3.0",
-    "@types/node": "^25.9.1",
-    "happy-dom": "^20.10.6",
-    "svelte": "^5.20.0",
-    "svelte-check": "^4.1.4",
-    "tailwindcss": "^4.3.0",
-    "typescript": "^5.7.2",
-    "vite": "^6.0.7",
-    "vitest": "^2.1.8"
+    "tailwind-variants": "^3.1.1",
+    "@lucide/svelte": "^1.0.1",
+    "@internationalized/date": "^3.12.4",
+    "libphonenumber-js": "1.13.15"
   },
   "peerDependencies": {
     "svelte": "^5.0.0"
@@ -97,11 +84,5 @@
   "bugs": {
     "url": "https://github.com/reddb-io/red-ui/issues"
   },
-  "scripts": {
-    "dev": "vite dev --host 127.0.0.1 --port 1420 --strictPort",
-    "build": "vite build && vite build --config vite.embed.config.ts",
-    "preview": "vite preview",
-    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-    "test": "svelte-kit sync && vitest run"
-  }
+  "scripts": {}
 }

package/src/app.css

@@ -1,148 +1,51 @@
 @import "tailwindcss";
-/* DS 2026.08 (ds-sync pin): brand tokens + Theme Layer + vendored Kit sources. */
-@import "../../../vendor/ds/tokens/tokens.css";
-@import "../../../vendor/ds/tokens/density-comfortable.css";
-@import "../../../vendor/ds/theme/theme.css";
-@source "../../../vendor/ds/kits";
-@import "@fontsource-variable/inter";
-@import "@fontsource-variable/jetbrains-mono";
-
-/* ============================================================================
-   Design tokens. Linear/Vercel vibe — surgical accent, contemporary type.
-
-   Two themes live here:
-     - default (`:root`, no data-theme or `data-theme="light"`): light, white-leaning.
-     - opt-in (`:root[data-theme="dark"]`): dark, near-black with green tint.
-
-   Light is default for both OSS and cloud first-load. Dark is opt-in via the
-   topbar toggle / Cmd-K command. Selection is persisted in localStorage and
-   applied before paint by an inline script in app.html.
-
-   Hierarchy of layers (lowest to highest in z):
-     bg-0  — page background (the deepest base)
-     bg-1  — primary surfaces (cards, panels, topbar)
-     bg-2  — interactive surfaces (buttons, inputs, hover)
-     bg-3  — elevated / active surfaces
-
-   Text ramp (most readable to least):
-     fg-0  — primary text, h1/h2, important values
-     fg-1  — body text, secondary headings
-     fg-2  — labels, meta, captions, muted UI text
-     fg-3  — disabled, "tertiary noise" (e.g. helper hints)
-   ============================================================================ */
-
-@theme {
-  /* Surfaces — light, white-leaning ramp.
-     bg-0 white, surfaces step up in grey via the zinc family. */
-  --color-bg-0: #ffffff;
-  --color-bg-1: #fafafa;
-  --color-bg-2: #f4f4f5;
-  --color-bg-3: #e7e7ea;
-
-  /* Foreground ramp — every level is WCAG AA on bg-0/bg-1.
-     fg-3 floor is ~4.8:1 on white; below that is decorative only. */
-  --color-fg-0: #0a0a0b;
-  --color-fg-1: #3f3f46;
-  --color-fg-2: #52525b;
-  --color-fg-3: #71717a;
-
-  /* Lines */
-  --color-line-1: #ececef;
-  --color-line-2: #d4d4d8;
-  --color-line-3: #a1a1aa;
-
-  /* Surgical accent — rose 600. #ff2056 vibrates on white and fails AA when
-     paired with white text on accent fills; the slightly darker chroma
-     (#e11d48) keeps the same reddb identity while clearing 4.5:1 against
-     white surfaces and against white button labels. */
-  --color-accent: #e11d48;
-  --color-accent-soft: rgba(225, 29, 72, 0.1);
-  --color-accent-glow: rgba(225, 29, 72, 0.3);
-
-  /* Semantic — darker variants so they stay AA on white surfaces */
-  --color-ok: #16a34a;
-  --color-warn: #b45309;
-  --color-danger: #dc2626;
-  --color-info: #2563eb;
-
-  /* Node roles */
-  --color-role-primary: #e11d48;
-  --color-role-replica: #2563eb;
-  --color-role-embedded: #16a34a;
-
-  /* Ambient glow — soft red wash at top of viewport, scaled per theme */
-  --color-ambient-glow: rgba(225, 29, 72, 0.04);
-
-  /* Geometry */
-  --radius-sm: 3px;
-  --radius-md: 5px;
-  --radius-lg: 8px;
-  --radius-xl: 12px;
-
-  /* Typography — base text is 13px (Linear scale) */
-  --text-xs: 11px;
-  --text-xs--line-height: 1.45;
-  --text-sm: 12px;
-  --text-sm--line-height: 1.5;
-  --text-base: 13px;
-  --text-base--line-height: 1.5;
-  --text-md: 14px;
-  --text-md--line-height: 1.5;
-  --text-lg: 18px;
-  --text-lg--line-height: 1.3;
-  --text-xl: 22px;
-  --text-xl--line-height: 1.2;
-  --text-2xl: 28px;
-  --text-2xl--line-height: 1.15;
-
-  --font-sans: "Inter Variable", "Inter", system-ui, -apple-system, sans-serif;
-  --font-mono:
-    "JetBrains Mono Variable", "JetBrains Mono", ui-monospace, "SF Mono",
-    "Menlo", monospace;
-
-  /* ease-out-expo for ambient transitions, ease-out-quart for snappier UI */
-  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
-  --ease-snap: cubic-bezier(0.25, 1, 0.5, 1);
-
-  /* Shadows — light variant: smaller alpha, slate tint */
-  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08), 0 0 0 1px var(--color-line-2);
-  --shadow-lg:
-    0 16px 48px rgba(15, 23, 42, 0.14), 0 0 0 1px var(--color-line-2);
-}
-
-/* Dark theme — opt-in via `data-theme="dark"` on the document root. */
-:root[data-theme="dark"] {
-  --color-bg-0: #050607;
-  --color-bg-1: #0d0f13;
-  --color-bg-2: #181b21;
-  --color-bg-3: #232730;
-
-  --color-fg-0: #f7f8fa;
-  --color-fg-1: #c8ccd4;
-  --color-fg-2: #9ca1a9;
-  --color-fg-3: #7a7f87;
-
-  --color-line-1: #181b21;
-  --color-line-2: #2a2e36;
-  --color-line-3: #3d424b;
-
-  --color-accent: #ff2056;
-  --color-accent-soft: rgba(255, 32, 86, 0.12);
-  --color-accent-glow: rgba(255, 32, 86, 0.45);
-
-  --color-ok: #4ade80;
-  --color-warn: #fbbf24;
-  --color-danger: #ff5470;
-  --color-info: #60a5fa;
-
-  --color-role-primary: #ff2056;
-  --color-role-replica: #60a5fa;
-  --color-role-embedded: #4ade80;
-
-  --color-ambient-glow: rgba(255, 32, 86, 0.06);
-
-  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--color-line-2);
-  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--color-line-2);
+/* DS v2026.10 (ds-sync pin): one entry carries the Brand fonts, Tokens, the
+   Base + Application Theme, both Color Schemes, print rules and every Density
+   stop. The DS reads its axes from <html data-theme="application"
+   data-color-scheme="light|dark"> (ADR 0008). vendor/ds sits outside this
+   package, so Tailwind is pointed at the vendored Kit sources explicitly. */
+@import "../vendor/ds/styles/all.css";
+@source "../vendor/ds/kits";
+@import "@reddb-io/ui-kit/tokens.css";
+
+@theme inline {
+  --color-bg-0: var(--reddb-color-background);
+  --color-bg-1: var(--reddb-color-elevation-base-surface);
+  --color-bg-2: var(--reddb-color-muted);
+  --color-bg-3: var(--reddb-color-elevation-raised-surface);
+  --color-fg-0: var(--reddb-color-foreground);
+  --color-fg-1: var(--reddb-color-foreground);
+  --color-fg-2: var(--reddb-color-ink-muted);
+  --color-fg-3: var(--reddb-color-ink-muted);
+  --color-line-1: var(--reddb-color-border-subtle);
+  --color-line-2: var(--reddb-color-control-edge);
+  --color-line-3: var(--reddb-color-border-strong);
+  --color-accent: var(--reddb-color-primary);
+  --color-ok: var(--reddb-color-feedback-success-foreground);
+  --color-warn: var(--reddb-color-feedback-warning-foreground);
+  --color-danger: var(--reddb-color-feedback-danger-foreground);
+  --color-info: var(--reddb-color-feedback-info-foreground);
+  --color-role-primary: var(--reddb-color-primary-text);
+  --color-role-replica: var(--reddb-color-feedback-info-foreground);
+  --color-role-embedded: var(--reddb-color-feedback-success-foreground);
+  --color-accent-soft: color-mix(
+    in srgb,
+    var(--reddb-color-primary) 12%,
+    transparent
+  );
+  --color-accent-glow: color-mix(
+    in srgb,
+    var(--reddb-color-primary) 30%,
+    transparent
+  );
+  --color-ambient-glow: color-mix(
+    in srgb,
+    var(--reddb-color-primary) 4%,
+    transparent
+  );
+  --text-md: var(--reddb-font-size-base);
+  --ease-out: var(--reddb-easing-entrance);
+  --ease-snap: var(--reddb-easing-entrance);
 }
 
 /* shadcn-svelte semantic aliases — driven by the active theme's tokens */
@@ -155,7 +58,7 @@
     --popover: var(--color-bg-1);
     --popover-foreground: var(--color-fg-0);
     --primary: var(--color-accent);
-    --primary-foreground: #ffffff;
+    --primary-foreground: var(--reddb-color-on-primary);
     --secondary: var(--color-bg-2);
     --secondary-foreground: var(--color-fg-1);
     --muted: var(--color-bg-2);
@@ -163,7 +66,7 @@
     --accent: var(--color-bg-3);
     --accent-foreground: var(--color-fg-0);
     --destructive: var(--color-danger);
-    --destructive-foreground: #ffffff;
+    --destructive-foreground: var(--reddb-color-feedback-danger-on-fill);
     --border: var(--color-line-2);
     --input: var(--color-line-2);
     --ring: var(--color-accent);
@@ -179,8 +82,8 @@
     background: var(--color-bg-0);
     color: var(--color-fg-0);
     font-family: var(--font-sans);
-    font-size: 13px;
-    line-height: 1.5;
+    font-size: var(--reddb-type-body-font-size);
+    line-height: var(--reddb-type-body-line-height);
     font-feature-settings: "cv11", "ss01", "ss03";
     letter-spacing: -0.005em;
     margin: 0;

package/src/lib/ActivityIndicator.svelte

@@ -1,6 +1,9 @@
 <script lang="ts">
   import { activity } from './activity.svelte'
-  import { Activity, CheckCircle2, AlertCircle, Loader2 } from 'lucide-svelte'
+  import Activity from '@lucide/svelte/icons/activity'
+  import CheckCircle2 from '@lucide/svelte/icons/check-circle-2'
+  import AlertCircle from '@lucide/svelte/icons/alert-circle'
+  import Loader2 from '@lucide/svelte/icons/loader-2'
 
   let open = $state(false)
 
@@ -27,7 +30,7 @@
     class={[
       'inline-flex items-center gap-1.5 h-7 px-2 rounded-md border text-xs font-mono transition-colors cursor-pointer',
       activity.inflight > 0
-        ? 'border-accent/40 bg-accent/10 text-accent'
+        ? 'border-accent/40 bg-accent/10 text-primary-text'
         : 'border-line-2 bg-bg-2 text-fg-3 hover:text-fg-1',
     ].join(' ')}
   >
@@ -71,7 +74,7 @@
             <div class="px-3 py-1.5 border-b border-line-1/50 last:border-0 grid grid-cols-[16px_1fr_auto] items-center gap-2">
               <span aria-hidden="true">
                 {#if e.status === 'pending'}
-                  <Loader2 class="size-3 animate-spin text-accent" />
+                  <Loader2 class="size-3 animate-spin text-primary-text" />
                 {:else if e.status === 'ok'}
                   <CheckCircle2 class="size-3 text-ok" />
                 {:else}

package/src/lib/AnalyticsView.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 MetricChart from '$lib/MetricChart.svelte'
@@ -14,7 +14,9 @@
     type NormalizedSeries,
     type ChartKind,
   } from '#reddb'
-  import { LineChart, Lock, RefreshCw } from 'lucide-svelte'
+  import LineChart from '@lucide/svelte/icons/line-chart'
+  import Lock from '@lucide/svelte/icons/lock'
+  import RefreshCw from '@lucide/svelte/icons/refresh-cw'
 
   let metrics = $state<MetricDescriptor[]>([])
   let selectedPath = $state<string | null>(null)
@@ -32,11 +34,11 @@
 
   // A metric's kind tells the chart what it is — surfaced as a tone so the
   // catalog reads at a glance.
-  const KIND_TONE: Record<MetricKind, 'ok' | 'info' | 'warn' | 'accent' | 'neutral'> = {
+  const KIND_TONE: Record<MetricKind, 'success' | 'info' | 'warning' | 'neutral'> = {
     counter: 'info',
-    gauge: 'ok',
-    histogram: 'accent',
-    ratio: 'warn',
+    gauge: 'success',
+    histogram: 'neutral',
+    ratio: 'warning',
     derived: 'neutral',
   }
 

package/src/lib/Appearance.svelte

@@ -3,7 +3,7 @@
   // card — a mini-mockup painted with that skin's *own* derived tokens — and
   // applies the skin on click. Selection persists across reloads via the skin
   // store. Dark-only: there is no light/system switch here.
-  import { Check } from 'lucide-svelte'
+  import Check from '@lucide/svelte/icons/check'
   import PageHeader from '$lib/PageHeader.svelte'
   import { SKINS, skinToCssVars, type Skin } from '$lib/skins/skins'
   import { skins } from '$lib/skins/skins.svelte'
@@ -77,7 +77,7 @@
           <span class="type-h2 text-fg-0">{skin.label}</span>
           {#if active}
             <span
-              class="inline-flex items-center gap-1 rounded-full bg-accent-soft px-2 py-0.5 text-[10px] font-mono uppercase tracking-wider text-accent"
+              class="inline-flex items-center gap-1 rounded-full bg-accent-soft px-2 py-0.5 text-[10px] font-mono uppercase tracking-wider text-primary-text"
             >
               <Check class="size-3" /> Active
             </span>

package/src/lib/AskView.svelte

@@ -4,13 +4,16 @@
   // columns: the conversation (squeezed left) and the visualization of what
   // the answer was grounded on (right). Citation chips in the answer link a
   // claim to the exact source that supports it — "the logic it took".
-  import { Badge } from '@reddb-io/ui-kit'
+  import { Badge } from '../../vendor/ds/kits/base/src/index.ts'
   import EmptyState from '$lib/EmptyState.svelte'
   import { activity } from '$lib/activity.svelte'
   import { connection } from '$lib/connections.svelte'
   import { secureStore } from '$lib/secureStore.svelte'
   import { parseAnswerSegments, parseUrn, type AskResponse } from '#reddb'
-  import { Sparkles, Lock, CornerDownLeft, AlertTriangle } from 'lucide-svelte'
+  import Sparkles from '@lucide/svelte/icons/sparkles'
+  import Lock from '@lucide/svelte/icons/lock'
+  import CornerDownLeft from '@lucide/svelte/icons/corner-down-left'
+  import AlertTriangle from '@lucide/svelte/icons/alert-triangle'
 
   interface ChatMessage {
     id: number
@@ -100,12 +103,12 @@
     return usd < 0.01 ? `$${usd.toFixed(4)}` : `$${usd.toFixed(2)}`
   }
 
-  const SOURCE_TONE: Record<string, 'info' | 'ok' | 'accent' | 'warn' | 'neutral'> = {
+  const SOURCE_TONE: Record<string, 'info' | 'success' | 'neutral' | 'warning'> = {
     table: 'info',
-    document: 'ok',
-    vector: 'accent',
-    graph_node: 'warn',
-    graph_edge: 'warn',
+    document: 'success',
+    vector: 'neutral',
+    graph_node: 'warning',
+    graph_edge: 'warning',
     kv: 'neutral',
   }
 </script>
@@ -117,7 +120,7 @@
         {#if messages.length === 0}
           <div class="flex flex-col items-center gap-4 py-16 text-center">
             <div class="flex size-12 items-center justify-center rounded-full border border-line-2 bg-bg-1">
-              <Sparkles class="size-5 text-accent" />
+              <Sparkles class="size-5 text-primary-text" />
             </div>
             <div>
               <div class="font-mono text-[15px] text-fg-0">Ask your database</div>
@@ -144,10 +147,10 @@
           {:else}
             <div class="flex flex-col gap-1.5">
               {#if m.pending}
-                <div class="flex items-center gap-2 text-[12px] text-fg-3"><Sparkles class="size-3.5 animate-pulse text-accent" /> thinking…</div>
+                <div class="flex items-center gap-2 text-[12px] text-fg-3"><Sparkles class="size-3.5 animate-pulse text-primary-text" /> thinking…</div>
               {:else if m.error}
                 <div class="flex items-start gap-2 rounded-lg border border-accent/30 bg-accent/5 px-3 py-2 text-[12px] text-fg-1">
-                  <AlertTriangle class="mt-0.5 size-3.5 shrink-0 text-accent" />
+                  <AlertTriangle class="mt-0.5 size-3.5 shrink-0 text-primary-text" />
                   <span>{m.error.includes('404') || m.error.includes('route not found') ? 'This reddb has no AI endpoint (/ai/ask). Configure a provider to enable Ask.' : m.error}</span>
                 </div>
               {:else if m.response}
@@ -157,13 +160,13 @@
                       type="button"
                       onclick={() => focusSource(i, seg.marker)}
                       title="Jump to source {seg.marker}"
-                      class="mx-0.5 inline-flex h-4 min-w-4 items-center justify-center rounded bg-accent/15 px-1 align-super text-[9px] font-semibold text-accent hover:bg-accent/25"
+                      class="mx-0.5 inline-flex h-4 min-w-4 items-center justify-center rounded bg-accent/15 px-1 align-super text-[9px] font-semibold text-primary-text hover:bg-accent/25"
                     >{seg.marker}</button>{/if}
                   {/each}
                 </div>
                 <div class="flex flex-wrap items-center gap-1.5 text-[10px] text-fg-3">
                   {#if m.response.validation && !m.response.validation.ok}
-                    <Badge tone="warn">unverified citations</Badge>
+                    <Badge tone="warning">unverified citations</Badge>
                   {/if}
                   {#if m.response.sources_flat?.length}
                     <button type="button" class="rounded border border-line-1 px-1.5 py-0.5 hover:border-line-3 hover:text-fg-1" onclick={() => { activeArtifact = i; highlightMarker = null }}>
@@ -223,7 +226,7 @@
               highlightMarker === si + 1 ? 'border-accent' : 'border-line-1',
             ].join(' ')}>
               <div class="mb-1.5 flex items-center gap-2">
-                <span class="inline-flex size-4 items-center justify-center rounded bg-accent/15 text-[9px] font-semibold text-accent">{si + 1}</span>
+                <span class="inline-flex size-4 items-center justify-center rounded bg-accent/15 text-[9px] font-semibold text-primary-text">{si + 1}</span>
                 <Badge tone={SOURCE_TONE[src.kind] ?? 'neutral'}>{src.kind}</Badge>
                 {#if ref}<span class="font-mono text-[10px] text-fg-2">{ref.collection}<span class="text-fg-3">/{ref.id}</span></span>{/if}
                 {#if src.score !== undefined}<span class="ml-auto font-mono text-[10px] text-fg-3">score {src.score.toFixed(2)}</span>{/if}

package/src/lib/ClusterView.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
   import { SvelteFlow, Background, BackgroundVariant, Controls, type Node, type Edge } from '@xyflow/svelte'
   import '@xyflow/svelte/dist/style.css'
-  import { Badge, Card, NodeBadge } from '@reddb-io/ui-kit'
+  import { Badge, Card } from '../../vendor/ds/kits/base/src/index.ts'
+  import { NodeBadge } from '@reddb-io/ui-kit'
   import EmptyState from '$lib/EmptyState.svelte'
   import ClusterNode from '$lib/ClusterNode.svelte'
   import { PRESETS, connection } from '$lib/connections.svelte'
@@ -23,7 +24,8 @@
     maxReplicaLagSeconds,
     unavailableFields,
   } from '#reddb'
-  import { Lock, ServerCrash } from 'lucide-svelte'
+  import Lock from '@lucide/svelte/icons/lock'
+  import ServerCrash from '@lucide/svelte/icons/server-crash'
 
   interface KnownNode {
     id: string
@@ -273,7 +275,7 @@
     }
   })
 
-  type Tone = 'neutral' | 'ok' | 'info' | 'warn' | 'danger' | 'accent'
+  type Tone = 'neutral' | 'success' | 'info' | 'warning' | 'danger'
 
   function deploymentLabel(node: KnownNode): string {
     const shape = measured(node.cluster?.deployment?.shape)
@@ -297,9 +299,9 @@
   function deploymentTone(node: KnownNode): Tone {
     switch (topology(node)) {
       case 'replicated':
-        return 'accent'
+        return 'neutral'
       case 'embedded':
-        return 'ok'
+        return 'success'
       case 'serverless':
         return 'info'
       default:
@@ -349,7 +351,7 @@
         return {
           label: 'replication lag',
           value: worst === 0 ? '✓ in sync' : fmtLagSeconds(worst),
-          tone: worst === 0 ? 'ok' : worst < 5 ? 'warn' : 'danger',
+          tone: worst === 0 ? 'success' : worst < 5 ? 'warning' : 'danger',
           sub: `${replicas.length} replica${replicas.length === 1 ? '' : 's'} · worst case`,
         }
       }
@@ -357,7 +359,7 @@
       return {
         label: 'replica lag',
         value: lag === null ? 'not exposed' : lag === 0 ? '✓ in sync' : `${lag.toLocaleString()} lsn`,
-        tone: lag === null ? 'neutral' : lag === 0 ? 'ok' : 'warn',
+        tone: lag === null ? 'neutral' : lag === 0 ? 'success' : 'warning',
         sub: node.replication?.state,
       }
     }
@@ -366,7 +368,7 @@
       return {
         label: 'boot time',
         value: fmtDuration(boot),
-        tone: boot === null ? 'neutral' : boot < 1000 ? 'ok' : boot < 5000 ? 'info' : 'warn',
+        tone: boot === null ? 'neutral' : boot < 1000 ? 'success' : boot < 5000 ? 'info' : 'warning',
         sub: node.cluster?.phase ? `phase · ${node.cluster.phase}` : undefined,
       }
     }
@@ -375,7 +377,7 @@
       return {
         label: 'on-disk size',
         value: size === undefined ? 'not exposed' : fmtBytes(size),
-        tone: size === undefined ? 'neutral' : 'ok',
+        tone: size === undefined ? 'neutral' : 'success',
         sub: `${(node.stats?.store.total_entities ?? 0).toLocaleString()} entities`,
       }
     }
@@ -383,7 +385,7 @@
     return {
       label: 'entities',
       value: (node.stats?.store.total_entities ?? 0).toLocaleString(),
-      tone: 'accent',
+      tone: 'neutral',
       sub: size === undefined ? undefined : `${fmtBytes(size)} on disk`,
     }
   }
@@ -533,7 +535,7 @@
         </div>
         <div>
           <div class="type-label">entities</div>
-          <div class="font-mono text-accent text-[18px] font-semibold mt-0.5">{totalEntities.toLocaleString()}</div>
+          <div class="font-mono text-primary-text text-[18px] font-semibold mt-0.5">{totalEntities.toLocaleString()}</div>
         </div>
       </div>
 
@@ -561,14 +563,14 @@
   <!-- Floating inspector (top-right) -->
   {#if selected}
     <div class="absolute top-4 right-4 z-10 w-[420px] max-h-[calc(100vh-96px)] overflow-auto">
-      <Card title="node · {selected.id}" floating>
+      <Card title="node · {selected.id}" raised>
         <div class="grid gap-2 font-mono text-[11px]">
           {#if selectedHero}
             <div class="mb-1 rounded border border-line-1 bg-bg-2 p-3">
               <div class="type-label">{selectedHero.label}</div>
               <div class={[
                 'font-mono text-[22px] font-semibold mt-0.5 leading-none',
-                selectedHero.tone === 'ok' ? 'text-role-replica' : selectedHero.tone === 'warn' ? 'text-amber-400' : selectedHero.tone === 'danger' ? 'text-accent' : selectedHero.tone === 'accent' ? 'text-accent' : 'text-fg-0',
+                selectedHero.tone === 'success' ? 'text-feedback-success-foreground' : selectedHero.tone === 'warning' ? 'text-feedback-warning-foreground' : selectedHero.tone === 'danger' ? 'text-feedback-danger-foreground' : 'text-fg-0',
               ].join(' ')}>{selectedHero.value}</div>
               {#if selectedHero.sub}<div class="text-[10px] text-fg-3 mt-1">{selectedHero.sub}</div>{/if}
             </div>
@@ -633,7 +635,7 @@
             </div>
             <div class="grid grid-cols-[120px_1fr] gap-3 items-baseline">
               <span class="text-fg-3">entities</span>
-              <span class="text-accent">{selected.stats.store.total_entities.toLocaleString()}</span>
+              <span class="text-primary-text">{selected.stats.store.total_entities.toLocaleString()}</span>
             </div>
             <div class="grid grid-cols-[120px_1fr] gap-3 items-baseline">
               <span class="text-fg-3">cross refs</span>
@@ -743,7 +745,7 @@
                 <div class="grid grid-cols-[120px_1fr] gap-3 items-baseline">
                   <span class="text-fg-3">lag</span>
                   <span>
-                    {#if lag === 0}<Badge tone="ok">in sync</Badge>{:else}<Badge tone="warn">{lag.toLocaleString()} lsn</Badge>{/if}
+                    {#if lag === 0}<Badge tone="success">in sync</Badge>{:else}<Badge tone="warning">{lag.toLocaleString()} lsn</Badge>{/if}
                     {#if selected.replication.state}<span class="text-fg-3 ml-1">{selected.replication.state}</span>{/if}
                   </span>
                 </div>
@@ -751,7 +753,7 @@
               {#if selected.replication.last_error}
                 <div class="grid grid-cols-[120px_1fr] gap-3 items-baseline">
                   <span class="text-fg-3">last error</span>
-                  <span class="text-accent break-all">{selected.replication.last_error}</span>
+                  <span class="text-primary-text break-all">{selected.replication.last_error}</span>
                 </div>
               {/if}
             {/if}
@@ -761,7 +763,7 @@
             <div class="grid grid-cols-[120px_1fr] gap-3 items-baseline">
               <span class="text-fg-3">metalanguage</span>
               <span class="text-fg-0">
-                {#if meta?.username}you are <span class="text-accent">{meta.username}</span> <span class="text-fg-3">· {meta.role}</span>{:else if meta?.error}<span class="text-fg-3">{meta.error}</span>{:else}<span class="text-fg-3">…</span>{/if}
+                {#if meta?.username}you are <span class="text-primary-text">{meta.username}</span> <span class="text-fg-3">· {meta.role}</span>{:else if meta?.error}<span class="text-fg-3">{meta.error}</span>{:else}<span class="text-fg-3">…</span>{/if}
               </span>
             </div>
             <div class="grid grid-cols-[120px_1fr] gap-3 items-start">