@reddb-io/ui 0.3.4 → 0.3.6

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}

package/src/lib/StatusBar.svelte

@@ -2,7 +2,10 @@
   import { useRouter } from './router.svelte'
   import { connection } from './connections.svelte'
   import { pendingChanges } from './pending-changes.svelte'
-  import { ArrowRight, FilePenLine, Lock, Terminal } from 'lucide-svelte'
+  import ArrowRight from '@lucide/svelte/icons/arrow-right'
+  import FilePenLine from '@lucide/svelte/icons/file-pen-line'
+  import Lock from '@lucide/svelte/icons/lock'
+  import Terminal from '@lucide/svelte/icons/terminal'
   import { readBuildInfo } from './build-info'
 
   const build = readBuildInfo()
@@ -141,7 +144,7 @@
       onclick={openPending}
       data-no-nav
       aria-label={`${pendingCount} pending changes`}
-      class="inline-flex items-center gap-1.5 px-3 text-accent hover:bg-bg-2/60 transition-colors cursor-pointer bg-transparent border-0 border-l border-line-1"
+      class="inline-flex items-center gap-1.5 px-3 text-primary-text hover:bg-bg-2/60 transition-colors cursor-pointer bg-transparent border-0 border-l border-line-1"
     >
       <FilePenLine class="size-3" />
       <span class="tabular-nums">Pending changes ({pendingCount})</span>

package/src/lib/Topbar.svelte

@@ -1,8 +1,17 @@
 <script lang="ts">
-  import { Kbd } from '@reddb-io/ui-kit'
+  import { Kbd } from '../../vendor/ds/kits/base/src/index.ts'
   import ConnectDropdown from './ConnectDropdown.svelte'
   import ActivityIndicator from './ActivityIndicator.svelte'
-  import { Search, Sun, Moon, Network, Database, FileCode2, Shield, Settings2, LineChart, Sparkles } from 'lucide-svelte'
+  import Search from '@lucide/svelte/icons/search'
+  import Sun from '@lucide/svelte/icons/sun'
+  import Moon from '@lucide/svelte/icons/moon'
+  import Network from '@lucide/svelte/icons/network'
+  import Database from '@lucide/svelte/icons/database'
+  import FileCode2 from '@lucide/svelte/icons/file-code-2'
+  import Shield from '@lucide/svelte/icons/shield'
+  import Settings2 from '@lucide/svelte/icons/settings-2'
+  import LineChart from '@lucide/svelte/icons/line-chart'
+  import Sparkles from '@lucide/svelte/icons/sparkles'
   import { theme } from './theme.svelte'
   import { useRouter } from './router.svelte'
 
@@ -28,9 +37,9 @@
     <a
       href={router.href({ view: 'collections' })}
       onclick={(e) => router.go({ view: 'collections' }, e)}
-      class="font-mono font-semibold text-[13px] tracking-tight text-fg-0 no-underline hover:text-accent transition-colors"
+      class="font-mono font-semibold text-[13px] tracking-tight text-fg-0 no-underline hover:text-primary-text transition-colors"
     >
-      red<span class="text-accent mx-px">·</span>ui
+      red<span class="text-primary-text mx-px">·</span>ui
     </a>
     {#if showConnect}
       <div class="w-px h-[18px] bg-line-2"></div>
@@ -47,7 +56,7 @@
         aria-current={onAsk ? 'page' : undefined}
         class={[
           'inline-flex items-center gap-1.5 h-7 px-2 rounded-md text-xs no-underline transition-colors',
-          onAsk ? 'bg-bg-2 text-accent' : 'text-fg-2 hover:text-fg-0 hover:bg-bg-2',
+          onAsk ? 'bg-bg-2 text-primary-text' : 'text-fg-2 hover:text-fg-0 hover:bg-bg-2',
         ].join(' ')}
       >
         <Sparkles class="size-3.5" />

package/src/lib/connections.svelte.ts

@@ -137,25 +137,50 @@ const historyStore = new SurfaceHistoryStore({
  * host[:port]                 → http://host:port|5055
  */
 export function normalizeUrl(input: string): string {
-  let raw = input.trim().replace(/\/$/, "");
-  if (!raw) return raw;
+  return parseConnectionInput(input).url;
+}
 
+/** Parse only explicit Connect input; Open Contract URLs still reject secrets. */
+export function parseConnectionInput(input: string): {
+  url: string;
+  credentials?: { username: string; password: string };
+} {
+  let raw = input.trim().replace(/\/$/, "");
+  if (!raw) return { url: raw };
   if (!/:\/\//.test(raw)) raw = "http://" + raw;
-
-  const m = raw.match(/^([a-z+]+):\/\/(.+)$/i);
-  if (!m) return raw;
-  const [, scheme, rest] = m;
-  const s = scheme.toLowerCase();
-
-  if (s === "red" || s === "red+tcp" || s === "red+wire") {
-    const [host] = rest.split("/")[0].split(":");
-    return `http://${host}:5055${rest.includes("/") ? "/" + rest.split("/").slice(1).join("/") : ""}`;
-  }
-  if (s === "reds" || s === "red+tls") {
-    const [host] = rest.split("/")[0].split(":");
-    return `https://${host}:5055`;
+  const scheme = raw.slice(0, raw.indexOf(":")).toLowerCase();
+  const alias = ["red", "red+tcp", "red+wire", "reds", "red+tls"].includes(
+    scheme
+  );
+  if (!alias && scheme !== "http" && scheme !== "https") return { url: raw };
+  try {
+    const protocol =
+      scheme === "reds" || scheme === "red+tls" ? "https" : "http";
+    const endpoint = new URL(
+      alias ? raw.replace(/^[^:]+:/, `${protocol}:`) : raw
+    );
+    let credentials: { username: string; password: string } | undefined;
+    if (endpoint.username || endpoint.password) {
+      if (!endpoint.username || !endpoint.password) throw new Error();
+      credentials = {
+        username: decodeURIComponent(endpoint.username),
+        password: decodeURIComponent(endpoint.password),
+      };
+      endpoint.username = "";
+      endpoint.password = "";
+    }
+    // RedWire ports are not HTTP API ports. Keep the UI's existing alias.
+    if (alias) endpoint.port = "5055";
+    return {
+      url: endpoint.href.replace(/\/$/, ""),
+      ...(credentials ? { credentials } : {}),
+    };
+  } catch {
+    // URL/decode errors can contain the original credential-bearing input.
+    throw new Error(
+      "Invalid connection string. Check the address and provide both username and password."
+    );
   }
-  return raw;
 }
 
 export function makeCustomConnection(input: string): ConnectionPreset {

package/src/lib/embed/index.ts

@@ -2,7 +2,7 @@ import appCss from "../../app.css?inline";
 import type { Component } from "svelte";
 import type { ConnectionProvider, ConsoleSink } from "../reddb";
 import { devConsole } from "../reddb/dev-console";
-import type { Theme } from "../theme.svelte";
+import { applyAppearance, type Theme } from "../theme.svelte";
 import { RED_UI_VERSION, readBuildInfo } from "../build-info";
 
 /** Build version of the embeddable bundle, stamped at build time. */
@@ -59,61 +59,6 @@ const shadowCss = `
   font-family: var(--font-sans);
 }
 
-:host,
-:host([data-theme='light']) {
-  --color-bg-0: #ffffff;
-  --color-bg-1: #fafafa;
-  --color-bg-2: #f4f4f5;
-  --color-bg-3: #e7e7ea;
-  --color-fg-0: #0a0a0b;
-  --color-fg-1: #3f3f46;
-  --color-fg-2: #52525b;
-  --color-fg-3: #71717a;
-  --color-line-1: #ececef;
-  --color-line-2: #d4d4d8;
-  --color-line-3: #a1a1aa;
-  --color-accent: #e11d48;
-  --color-accent-soft: rgba(225, 29, 72, 0.10);
-  --color-accent-glow: rgba(225, 29, 72, 0.30);
-  --color-ok: #16a34a;
-  --color-warn: #b45309;
-  --color-danger: #dc2626;
-  --color-info: #2563eb;
-  --color-role-primary: #e11d48;
-  --color-role-replica: #2563eb;
-  --color-role-embedded: #16a34a;
-  --color-ambient-glow: rgba(225, 29, 72, 0.04);
-  --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);
-}
-
-:host([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);
-}
-
 :host * {
   box-sizing: border-box;
 }
@@ -144,7 +89,25 @@ export async function mountRedUi(
   opts: RedUiEmbedOptions
 ): Promise<RedUiEmbedHandle> {
   markEmbedSurface();
-  host.dataset.theme = opts.theme ?? host.dataset.theme ?? "dark";
+  // The DS axes (ADR 0008): `data-theme` is the Theme direction and
+  // `data-color-scheme` is light/dark. A host that still pre-sets the legacy
+  // `data-theme="light|dark"` keeps its choice.
+  const legacy = host.dataset.theme;
+  const preset =
+    host.dataset.colorScheme ??
+    (legacy === "light" || legacy === "dark" ? legacy : undefined);
+  applyAppearance(host, opts.theme ?? (preset as Theme | undefined) ?? "dark");
+
+  // Browsers do not register @font-face rules inside a shadow tree. Publish
+  // only the received DS faces once per document; appearance stays scoped.
+  const doc = host.ownerDocument;
+  if (!doc.head.querySelector(`style[data-red-ui-fonts="${RED_UI_VERSION}"]`)) {
+    const fonts = doc.createElement("style");
+    fonts.dataset.redUiFonts = RED_UI_VERSION;
+    fonts.textContent =
+      appCss.match(/@font-face\s*\{[^}]*\}/g)?.join("\n") ?? "";
+    doc.head.append(fonts);
+  }
 
   const shadowRoot =
     host.shadowRoot ?? host.attachShadow(opts.shadowRoot ?? { mode: "open" });

package/src/lib/reddb/client.ts

@@ -397,7 +397,7 @@ export class RedClient {
   constructor(baseUrl: string, opts: RedClientOptions = {}) {
     this.baseUrl = baseUrl.replace(/\/$/, "");
     this.headers = opts.headers;
-    this.fetcher = opts.fetch ?? fetch;
+    this.fetcher = opts.fetch ?? globalThis.fetch.bind(globalThis);
   }
 
   private async json<T>(path: string, init?: RequestInit): Promise<T> {

package/src/lib/renderers/DiffRenderer.svelte

@@ -1,6 +1,9 @@
 <script lang="ts">
   import type { QueryResult } from '#reddb'
-  import { Braces, GitCompareArrows, Search, X } from 'lucide-svelte'
+  import Braces from '@lucide/svelte/icons/braces'
+  import GitCompareArrows from '@lucide/svelte/icons/git-compare-arrows'
+  import Search from '@lucide/svelte/icons/search'
+  import X from '@lucide/svelte/icons/x'
   import { diffEntryFields, extractDiffEntries, formatDiffValue, summarizeDiff, type DiffEntry } from './diff-render'
 
   interface Props {
@@ -36,7 +39,7 @@
   function statusClass(status: string): string {
     if (status === 'added') return 'text-ok'
     if (status === 'removed') return 'text-danger'
-    if (status === 'modified') return 'text-accent'
+    if (status === 'modified') return 'text-primary-text'
     return 'text-fg-3'
   }
 </script>
@@ -51,7 +54,7 @@
       <div class="inline-flex border border-line-2 rounded overflow-hidden">
         <button
           type="button"
-          class={['inline-flex items-center gap-1 px-2 py-1 cursor-pointer transition-colors', mode === 'summary' ? 'bg-accent text-white' : 'bg-bg-1 text-fg-2 hover:text-fg-0'].join(' ')}
+          class={['inline-flex items-center gap-1 px-2 py-1 cursor-pointer transition-colors', mode === 'summary' ? 'bg-primary text-on-primary' : 'bg-bg-1 text-fg-2 hover:text-fg-0'].join(' ')}
           onclick={() => (mode = 'summary')}
           aria-pressed={mode === 'summary'}
         >
@@ -60,7 +63,7 @@
         </button>
         <button
           type="button"
-          class={['inline-flex items-center gap-1 px-2 py-1 cursor-pointer transition-colors border-l border-line-2', mode === 'raw' ? 'bg-accent text-white' : 'bg-bg-1 text-fg-2 hover:text-fg-0'].join(' ')}
+          class={['inline-flex items-center gap-1 px-2 py-1 cursor-pointer transition-colors border-l border-line-2', mode === 'raw' ? 'bg-primary text-on-primary' : 'bg-bg-1 text-fg-2 hover:text-fg-0'].join(' ')}
           onclick={() => (mode = 'raw')}
           aria-pressed={mode === 'raw'}
         >
@@ -101,7 +104,7 @@
               class={['w-full text-left px-3 py-2 border-b border-line-1/60 hover:bg-bg-1/50 cursor-pointer', active === entry ? 'bg-bg-1 text-fg-0' : 'text-fg-2'].join(' ')}
             >
               <div class="flex items-center gap-2">
-                <span class="text-accent">{entry.change}</span>
+                <span class="text-primary-text">{entry.change}</span>
                 <span class="text-fg-3 truncate">{entry.entityId ?? entry.id}</span>
                 {#if entry.collection}<span class="ml-auto text-fg-3">{entry.collection}</span>{/if}
               </div>
@@ -115,7 +118,7 @@
         <div class="overflow-auto p-3 text-[12px] font-mono">
           {#if active}
             <div class="mb-3 grid grid-cols-[100px_1fr] gap-x-3 gap-y-1">
-              <span class="text-fg-3">change</span><span class="text-accent">{active.change}</span>
+              <span class="text-fg-3">change</span><span class="text-primary-text">{active.change}</span>
               <span class="text-fg-3">entity</span><span class="text-fg-0">{active.entityId ?? active.id}</span>
               <span class="text-fg-3">collection</span><span class="text-fg-0">{active.collection ?? '-'}</span>
               {#if active.note}

package/src/lib/renderers/DocumentRenderer.svelte

@@ -1,6 +1,9 @@
 <script lang="ts">
   import type { QueryResult } from '#reddb'
-  import { Braces, FileText, Search, X } from 'lucide-svelte'
+  import Braces from '@lucide/svelte/icons/braces'
+  import FileText from '@lucide/svelte/icons/file-text'
+  import Search from '@lucide/svelte/icons/search'
+  import X from '@lucide/svelte/icons/x'
   import { extractDocuments, type DocumentItem } from './document-render'
 
   interface Props {
@@ -41,7 +44,7 @@
       <div class="inline-flex border border-line-2 rounded overflow-hidden">
         <button
           type="button"
-          class={['inline-flex items-center gap-1 px-2 py-1 cursor-pointer transition-colors', mode === 'body' ? 'bg-accent text-white' : 'bg-bg-1 text-fg-2 hover:text-fg-0'].join(' ')}
+          class={['inline-flex items-center gap-1 px-2 py-1 cursor-pointer transition-colors', mode === 'body' ? 'bg-primary text-on-primary' : 'bg-bg-1 text-fg-2 hover:text-fg-0'].join(' ')}
           onclick={() => (mode = 'body')}
           aria-pressed={mode === 'body'}
         >
@@ -50,7 +53,7 @@
         </button>
         <button
           type="button"
-          class={['inline-flex items-center gap-1 px-2 py-1 cursor-pointer transition-colors border-l border-line-2', mode === 'fields' ? 'bg-accent text-white' : 'bg-bg-1 text-fg-2 hover:text-fg-0'].join(' ')}
+          class={['inline-flex items-center gap-1 px-2 py-1 cursor-pointer transition-colors border-l border-line-2', mode === 'fields' ? 'bg-primary text-on-primary' : 'bg-bg-1 text-fg-2 hover:text-fg-0'].join(' ')}
           onclick={() => (mode = 'fields')}
           aria-pressed={mode === 'fields'}
         >
@@ -59,7 +62,7 @@
         </button>
         <button
           type="button"
-          class={['inline-flex items-center gap-1 px-2 py-1 cursor-pointer transition-colors border-l border-line-2', mode === 'raw' ? 'bg-accent text-white' : 'bg-bg-1 text-fg-2 hover:text-fg-0'].join(' ')}
+          class={['inline-flex items-center gap-1 px-2 py-1 cursor-pointer transition-colors border-l border-line-2', mode === 'raw' ? 'bg-primary text-on-primary' : 'bg-bg-1 text-fg-2 hover:text-fg-0'].join(' ')}
           onclick={() => (mode = 'raw')}
           aria-pressed={mode === 'raw'}
         >
@@ -93,7 +96,7 @@
             class={['w-full text-left px-3 py-2 border-b border-line-1/60 hover:bg-bg-1/50 cursor-pointer', active === doc ? 'bg-bg-1 text-fg-0' : 'text-fg-2'].join(' ')}
           >
             <div class="flex items-center gap-2">
-              <span class="text-accent truncate">{doc.title}</span>
+              <span class="text-primary-text truncate">{doc.title}</span>
               <span class="ml-auto text-fg-3">#{doc.rid}</span>
             </div>
             {#if doc.subtitle}

package/src/lib/renderers/GraphRenderer.svelte

@@ -34,7 +34,23 @@
   import { collectionPageHref } from '$lib/collection-pages'
   import { connection } from '$lib/connections.svelte'
   import { activity } from '$lib/activity.svelte'
-  import { Network, Table2, Search, X, Info, Maximize2, Play, Code2, RotateCw, Loader2, Route, AlertTriangle, ZoomIn, ZoomOut, Group, Spline, Boxes } from 'lucide-svelte'
+  import Network from '@lucide/svelte/icons/network'
+  import Table2 from '@lucide/svelte/icons/table-2'
+  import Search from '@lucide/svelte/icons/search'
+  import X from '@lucide/svelte/icons/x'
+  import Info from '@lucide/svelte/icons/info'
+  import Maximize2 from '@lucide/svelte/icons/maximize-2'
+  import Play from '@lucide/svelte/icons/play'
+  import Code2 from '@lucide/svelte/icons/code-2'
+  import RotateCw from '@lucide/svelte/icons/rotate-cw'
+  import Loader2 from '@lucide/svelte/icons/loader-2'
+  import Route from '@lucide/svelte/icons/route'
+  import AlertTriangle from '@lucide/svelte/icons/alert-triangle'
+  import ZoomIn from '@lucide/svelte/icons/zoom-in'
+  import ZoomOut from '@lucide/svelte/icons/zoom-out'
+  import Group from '@lucide/svelte/icons/group'
+  import Spline from '@lucide/svelte/icons/spline'
+  import Boxes from '@lucide/svelte/icons/boxes'
 
   interface Props {
     result: QueryResult
@@ -343,7 +359,7 @@
     const observer = new MutationObserver(() => {
       graphThemeVersion += 1
     })
-    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] })
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme', 'data-color-scheme'] })
     return () => observer.disconnect()
   })
 
@@ -472,12 +488,12 @@
   // See packages/ui/src/lib/renderers/graph-render.ts → runGraphLayout.
   const layout = $derived(runGraphLayout(drawNodes, drawEdges))
 
-  // Dark/light is theme-aware; re-read on the data-theme mutation observer tick.
+  // Dark/light follows the DS Color Scheme; re-read on the mutation observer tick.
   const isDark = $derived.by(() => {
     void graphThemeVersion
     return typeof document === 'undefined'
       ? true
-      : document.documentElement.dataset.theme !== 'light'
+      : document.documentElement.dataset.colorScheme !== 'light'
   })
 
   // Group-in-a-box geometry in layout ([0,100]) space. Shared by the SVG
@@ -699,7 +715,7 @@
 
   // Theme-aware palette handed to the sigma reducers (dark tokens drive it).
   function sigmaThemeColors(): SigmaThemeColors {
-    const dark = document.documentElement.dataset.theme !== 'light'
+    const dark = document.documentElement.dataset.colorScheme !== 'light'
     return {
       background: cssColor('--color-bg-0', dark ? '#050607' : '#ffffff'),
       edge: cssColor('--color-line-3', dark ? '#3a424d' : '#c9cbd1'),
@@ -731,7 +747,7 @@
       layout: renderLayout,
       sizeScales: nodeSizeScales,
       orphanIds: orphanNodeIds,
-      dark: document.documentElement.dataset.theme !== 'light',
+      dark: document.documentElement.dataset.colorScheme !== 'light',
       edgeColor: sigmaThemeColors().edge,
       bundledCurvatures: bundleCurvatures ?? undefined,
     })
@@ -939,7 +955,7 @@
           href={collection ? collectionPageHref(collection, 'graph') : undefined}
           class={[
             'inline-flex items-center gap-1 px-2 py-1 text-[11px] cursor-pointer transition-colors',
-            viewMode === 'canvas' ? 'bg-accent text-white' : 'bg-bg-1 text-fg-2 hover:text-fg-0',
+            viewMode === 'canvas' ? 'bg-primary text-on-primary' : 'bg-bg-1 text-fg-2 hover:text-fg-0',
           ].join(' ')}
           onclick={() => { if (!collection) viewMode = 'canvas' }}
           aria-current={viewMode === 'canvas' ? 'page' : undefined}
@@ -951,7 +967,7 @@
           href={collection ? collectionPageHref(collection, 'svg') : undefined}
           class={[
             'inline-flex items-center gap-1 px-2 py-1 text-[11px] cursor-pointer transition-colors border-l border-line-2',
-            viewMode === 'svg' ? 'bg-accent text-white' : 'bg-bg-1 text-fg-2 hover:text-fg-0',
+            viewMode === 'svg' ? 'bg-primary text-on-primary' : 'bg-bg-1 text-fg-2 hover:text-fg-0',
           ].join(' ')}
           onclick={() => { if (!collection) viewMode = 'svg' }}
           aria-current={viewMode === 'svg' ? 'page' : undefined}
@@ -963,7 +979,7 @@
           href={collection ? collectionPageHref(collection, 'table') : undefined}
           class={[
             'inline-flex items-center gap-1 px-2 py-1 text-[11px] cursor-pointer transition-colors border-l border-line-2',
-            viewMode === 'table' ? 'bg-accent text-white' : 'bg-bg-1 text-fg-2 hover:text-fg-0',
+            viewMode === 'table' ? 'bg-primary text-on-primary' : 'bg-bg-1 text-fg-2 hover:text-fg-0',
           ].join(' ')}
           onclick={() => { if (!collection) viewMode = 'table' }}
           aria-current={viewMode === 'table' ? 'page' : undefined}
@@ -1047,7 +1063,7 @@
           type="button"
           class={[
             'inline-flex items-center gap-1 h-6 px-2 rounded border cursor-pointer transition-colors',
-            groupInBox ? 'border-accent/40 bg-accent/10 text-accent' : 'border-line-1 text-fg-3 hover:text-fg-1 hover:border-line-2',
+            groupInBox ? 'border-accent/40 bg-accent/10 text-primary-text' : 'border-line-1 text-fg-3 hover:text-fg-1 hover:border-line-2',
           ].join(' ')}
           onclick={() => (groupInBox = !groupInBox)}
           aria-pressed={groupInBox}
@@ -1060,7 +1076,7 @@
           type="button"
           class={[
             'inline-flex items-center gap-1 h-6 px-2 rounded border cursor-pointer transition-colors',
-            bundleEnabled ? 'border-accent/40 bg-accent/10 text-accent' : 'border-line-1 text-fg-3 hover:text-fg-1 hover:border-line-2',
+            bundleEnabled ? 'border-accent/40 bg-accent/10 text-primary-text' : 'border-line-1 text-fg-3 hover:text-fg-1 hover:border-line-2',
           ].join(' ')}
           onclick={() => (bundleEnabled = !bundleEnabled)}
           aria-pressed={bundleEnabled}
@@ -1079,7 +1095,7 @@
             type="button"
             class={[
               'inline-flex items-center gap-1 h-6 px-2 rounded border cursor-pointer transition-colors',
-              anyCollapsed ? 'border-accent/40 bg-accent/10 text-accent' : 'border-line-1 text-fg-3 hover:text-fg-1 hover:border-line-2',
+              anyCollapsed ? 'border-accent/40 bg-accent/10 text-primary-text' : 'border-line-1 text-fg-3 hover:text-fg-1 hover:border-line-2',
             ].join(' ')}
             onclick={toggleCollapseAll}
             aria-pressed={anyCollapsed}
@@ -1095,7 +1111,7 @@
         type="button"
         class={[
           'inline-flex items-center gap-1 h-6 px-2 rounded border cursor-pointer transition-colors',
-          queryOpen ? 'border-accent/40 bg-accent/10 text-accent' : 'border-line-1 text-fg-3 hover:text-fg-1 hover:border-line-2',
+          queryOpen ? 'border-accent/40 bg-accent/10 text-primary-text' : 'border-line-1 text-fg-3 hover:text-fg-1 hover:border-line-2',
         ].join(' ')}
         onclick={() => (queryOpen = !queryOpen)}
         aria-pressed={queryOpen}
@@ -1120,7 +1136,7 @@
       <div class="ml-auto flex items-center gap-3 text-fg-3">
         <span>{graph.nodes.length.toLocaleString()} nodes · {graph.edges.length.toLocaleString()} edges</span>
         {#if viewMode !== 'table' && rendering}
-          <span class="text-accent">rendering {drawNodes.length.toLocaleString()} / {renderTarget.toLocaleString()}</span>
+          <span class="text-primary-text">rendering {drawNodes.length.toLocaleString()} / {renderTarget.toLocaleString()}</span>
         {/if}
         {#if viewMode !== 'table' && truncated}
           <span class="text-warn" title="More nodes match — raise the limit or narrow the filter to see them">
@@ -1213,7 +1229,7 @@
               type="button"
               onclick={() => runQuery(queryText)}
               disabled={querying || !queryText.trim()}
-              class="inline-flex items-center gap-1.5 h-7 px-3 rounded bg-accent text-white cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed hover:bg-[#ff3868]"
+              class="inline-flex items-center gap-1.5 h-7 px-3 rounded bg-primary text-on-primary cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed hover:bg-primary-active"
             >
               {#if querying}<Loader2 class="size-3 animate-spin" />{:else}<Play class="size-3" />{/if}
               run
@@ -1341,7 +1357,7 @@
                       stroke-width={activeFocusNodeId ? (focusedEdge ? '0.27' : '0.055') : '0.105'}
                       opacity={activeFocusNodeId ? (focusedEdge ? '0.98' : '0.07') : '0.4'}
                       stroke-linejoin="round"
-                      class="text-line-3 cursor-pointer hover:text-accent"
+                      class="text-line-3 cursor-pointer hover:text-primary-text"
                       vector-effect="non-scaling-stroke"
                       role="button"
                       tabindex="0"
@@ -1360,7 +1376,7 @@
                       stroke={activeFocusNodeId ? (focusedEdge ? focusEdgeColor : 'currentColor') : 'currentColor'}
                       stroke-width={activeFocusNodeId ? (focusedEdge ? '0.27' : '0.055') : '0.105'}
                       opacity={activeFocusNodeId ? (focusedEdge ? '0.98' : '0.055') : '0.36'}
-                      class="text-line-3 cursor-pointer hover:text-accent"
+                      class="text-line-3 cursor-pointer hover:text-primary-text"
                       vector-effect="non-scaling-stroke"
                       role="button"
                       tabindex="0"
@@ -1467,7 +1483,7 @@
                 {@const orphan = orphanNodeIds.has(n.id)}
                 <tr class={['border-b border-line-1/60 hover:bg-bg-1/40 cursor-pointer', orphan ? 'bg-warn/10' : ''].join(' ')} onclick={() => { selectedEdge = null; selectedNode = n }}>
                   <td class="px-2 py-1 text-fg-3">node</td>
-                  <td class="px-2 py-1 text-accent font-semibold">{n.id}</td>
+                  <td class="px-2 py-1 text-primary-text font-semibold">{n.id}</td>
                   <td class="px-2 py-1 text-fg-0">{n.label}</td>
                   <td class="px-2 py-1 text-fg-2">
                     {String(n.data.node_type ?? '')}
@@ -1492,7 +1508,7 @@
       {#if selectedNode || selectedEdge}
         <aside class="absolute top-0 right-0 bottom-0 w-[340px] bg-bg-1 border-l border-line-2 shadow-2xl flex flex-col z-20">
           <header class="flex items-center gap-2 px-3 py-2 border-b border-line-1 text-[11px] font-mono">
-            <Info class="size-3.5 text-accent" />
+            <Info class="size-3.5 text-primary-text" />
             <span class="type-label">
               {selectedNode ? 'Node' : 'Edge'}
             </span>
@@ -1515,7 +1531,7 @@
                     </span>
                   {/if}
                 </div>
-                <div class="mt-1 break-all text-accent">{String(selectedNode.data.rid ?? selectedNode.id)}</div>
+                <div class="mt-1 break-all text-primary-text">{String(selectedNode.data.rid ?? selectedNode.id)}</div>
                 {#if selectedNodeCommunity !== null && (communityCounts.get(selectedNodeCommunity) ?? 0) >= 2}
                   <button
                     type="button"