@reddb-io/ui 0.3.3 → 0.3.5

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"

package/src/lib/renderers/HypertableRenderer.svelte

@@ -1,6 +1,9 @@
 <script lang="ts">
   import type { QueryResult } from '#reddb'
-  import { Activity, BarChart3, LineChart, X } from 'lucide-svelte'
+  import Activity from '@lucide/svelte/icons/activity'
+  import BarChart3 from '@lucide/svelte/icons/bar-chart-3'
+  import LineChart from '@lucide/svelte/icons/line-chart'
+  import X from '@lucide/svelte/icons/x'
   import {
     ALL_METRICS,
     bucketGeometry,
@@ -101,7 +104,7 @@
           type="button"
           class={[
             'inline-flex items-center gap-1 px-2 py-1 cursor-pointer transition-colors',
-            chartMode === 'rate' ? 'bg-accent text-white' : 'bg-bg-1 text-fg-2 hover:text-fg-0',
+            chartMode === 'rate' ? 'bg-primary text-on-primary' : 'bg-bg-1 text-fg-2 hover:text-fg-0',
           ].join(' ')}
           onclick={() => (chartMode = 'rate')}
           aria-pressed={chartMode === 'rate'}
@@ -113,7 +116,7 @@
           type="button"
           class={[
             'inline-flex items-center gap-1 px-2 py-1 cursor-pointer transition-colors border-l border-line-2',
-            chartMode === 'line' ? 'bg-accent text-white' : 'bg-bg-1 text-fg-2 hover:text-fg-0',
+            chartMode === 'line' ? 'bg-primary text-on-primary' : 'bg-bg-1 text-fg-2 hover:text-fg-0',
           ].join(' ')}
           onclick={() => (chartMode = 'line')}
           aria-pressed={chartMode === 'line'}
@@ -209,7 +212,7 @@
       {:else if lineGeom}
         <svg
           viewBox={`0 0 ${lineGeom.width} ${lineGeom.height}`}
-          class="block w-full h-[180px] text-accent"
+          class="block w-full h-[180px] text-primary-text"
           aria-label="Timeseries chart"
         >
           <path d={lineGeom.path} fill="none" stroke="currentColor" stroke-width="1.5" />
@@ -237,7 +240,7 @@
               {#if series.metricNameColumn}
                 <td class="px-2 py-1 text-fg-2">{String(p.raw[series.metricNameColumn] ?? '')}</td>
               {/if}
-              <td class="px-2 py-1 text-right text-accent">{p.v}</td>
+              <td class="px-2 py-1 text-right text-primary-text">{p.v}</td>
               <td class="px-2 py-1 text-fg-2">{logPayload(p)}</td>
             </tr>
           {/each}

package/src/lib/renderers/KvRenderer.svelte

@@ -1,6 +1,9 @@
 <script lang="ts">
   import type { QueryResult } from '#reddb'
-  import { Braces, ListTree, Search, X } from 'lucide-svelte'
+  import Braces from '@lucide/svelte/icons/braces'
+  import ListTree from '@lucide/svelte/icons/list-tree'
+  import Search from '@lucide/svelte/icons/search'
+  import X from '@lucide/svelte/icons/x'
   import { buildTree, extractKv, formatValue, materializeKvJson, type KvNode } from './kv-render'
 
   interface Props {
@@ -44,7 +47,7 @@
           type="button"
           class={[
             'inline-flex items-center gap-1 px-2 py-1 cursor-pointer transition-colors',
-            viewMode === 'tree' ? 'bg-accent text-white' : 'bg-bg-1 text-fg-2 hover:text-fg-0',
+            viewMode === 'tree' ? 'bg-primary text-on-primary' : 'bg-bg-1 text-fg-2 hover:text-fg-0',
           ].join(' ')}
           onclick={() => (viewMode = 'tree')}
           aria-pressed={viewMode === 'tree'}
@@ -56,7 +59,7 @@
           type="button"
           class={[
             'inline-flex items-center gap-1 px-2 py-1 cursor-pointer transition-colors border-l border-line-2',
-            viewMode === 'json' ? 'bg-accent text-white' : 'bg-bg-1 text-fg-2 hover:text-fg-0',
+            viewMode === 'json' ? 'bg-primary text-on-primary' : 'bg-bg-1 text-fg-2 hover:text-fg-0',
           ].join(' ')}
           onclick={() => (viewMode = 'json')}
           aria-pressed={viewMode === 'json'}
@@ -130,7 +133,7 @@
     <button
       type="button"
       class="w-full text-left px-2 py-0.5 hover:bg-bg-1/60"
-      class:text-accent={selected === node}
+      class:text-primary-text={selected === node}
       style:padding-left={`${8 + depth * 12}px`}
       onclick={() => (selected = node)}
     >

package/src/lib/renderers/QueueRenderer.svelte

@@ -2,7 +2,14 @@
   import type { QueryResult } from '#reddb'
   import { connection } from '$lib/connections.svelte'
   import { activity } from '$lib/activity.svelte'
-  import { Braces, ClipboardList, Loader2, Plus, Radio, Search, Send, X } from 'lucide-svelte'
+  import Braces from '@lucide/svelte/icons/braces'
+  import ClipboardList from '@lucide/svelte/icons/clipboard-list'
+  import Loader2 from '@lucide/svelte/icons/loader-2'
+  import Plus from '@lucide/svelte/icons/plus'
+  import Radio from '@lucide/svelte/icons/radio'
+  import Search from '@lucide/svelte/icons/search'
+  import Send from '@lucide/svelte/icons/send'
+  import X from '@lucide/svelte/icons/x'
   import {
     extractQueueEvents,
     extractQueueMessages,
@@ -91,7 +98,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 === 'events' ? '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 === 'events' ? 'bg-primary text-on-primary' : 'bg-bg-1 text-fg-2 hover:text-fg-0'].join(' ')}
         onclick={() => (mode = 'events')}
         aria-pressed={mode === 'events'}
       >
@@ -100,7 +107,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 === 'messages' ? '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 === 'messages' ? 'bg-primary text-on-primary' : 'bg-bg-1 text-fg-2 hover:text-fg-0'].join(' ')}
         onclick={() => (mode = 'messages')}
         aria-pressed={mode === 'messages'}
       >
@@ -109,7 +116,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 === 'commands' ? '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 === 'commands' ? 'bg-primary text-on-primary' : 'bg-bg-1 text-fg-2 hover:text-fg-0'].join(' ')}
         onclick={() => (mode = 'commands')}
         aria-pressed={mode === 'commands'}
       >
@@ -118,7 +125,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 === 'json' ? '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 === 'json' ? 'bg-primary text-on-primary' : 'bg-bg-1 text-fg-2 hover:text-fg-0'].join(' ')}
         onclick={() => (mode = 'json')}
         aria-pressed={mode === 'json'}
       >
@@ -131,7 +138,7 @@
       type="button"
       onclick={() => (composerOpen = !composerOpen)}
       disabled={!collection}
-      class={['inline-flex items-center gap-1 h-6 px-2 rounded border cursor-pointer transition-colors disabled:opacity-40 disabled:cursor-not-allowed', composerOpen ? 'border-accent/40 bg-accent/10 text-accent' : 'border-line-1 text-fg-3 hover:text-fg-1 hover:border-line-2'].join(' ')}
+      class={['inline-flex items-center gap-1 h-6 px-2 rounded border cursor-pointer transition-colors disabled:opacity-40 disabled:cursor-not-allowed', composerOpen ? 'border-accent/40 bg-accent/10 text-primary-text' : 'border-line-1 text-fg-3 hover:text-fg-1 hover:border-line-2'].join(' ')}
       aria-pressed={composerOpen}
       title={collection ? 'Insert a queue message' : 'Open this as a collection to insert messages'}
     >
@@ -207,7 +214,7 @@
               <tr class="border-b border-line-1/60 hover:bg-bg-1/40">
                 <td class="px-2 py-1 text-fg-2">{fmtTs(event.ts)}</td>
                 <td class="px-2 py-1 text-fg-0">{event.collection}</td>
-                <td class="px-2 py-1"><span class="rounded border border-accent/30 bg-accent/10 px-1.5 py-0.5 text-accent">{event.op}</span></td>
+                <td class="px-2 py-1"><span class="rounded border border-accent/30 bg-accent/10 px-1.5 py-0.5 text-primary-text">{event.op}</span></td>
                 <td class="px-2 py-1 text-fg-1">{event.entityId}</td>
                 <td class="px-2 py-1 text-right text-fg-3">{event.lsn ?? '-'}</td>
                 <td class="px-2 py-1 text-fg-2 truncate max-w-[520px]">{display(event.after)}</td>
@@ -247,7 +254,7 @@
               class={['w-full text-left px-3 py-2 border-b border-line-1/60 hover:bg-bg-1/50 cursor-pointer', selected === msg ? 'bg-bg-1 text-fg-0' : 'text-fg-2'].join(' ')}
             >
               <div class="flex items-center gap-2">
-                <span class="text-accent">{msg.id}</span>
+                <span class="text-primary-text">{msg.id}</span>
                 <span class="rounded border border-line-1 px-1 py-0.5 text-[10px] text-fg-3">{msg.state}</span>
                 {#if msg.consumer}<span class="ml-auto text-fg-3">{msg.consumer}</span>{/if}
               </div>

package/src/lib/renderers/StatsRenderer.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
   import type { QueryResult } from '#reddb'
-  import { Gauge, List, Table2 } from 'lucide-svelte'
+  import Gauge from '@lucide/svelte/icons/gauge'
+  import List from '@lucide/svelte/icons/list'
+  import Table2 from '@lucide/svelte/icons/table-2'
   import { extractStats, formatMetric } from './stats-render'
 
   interface Props {
@@ -30,7 +32,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 === 'kpi' ? '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 === 'kpi' ? 'bg-primary text-on-primary' : 'bg-bg-1 text-fg-2 hover:text-fg-0'].join(' ')}
           onclick={() => (mode = 'kpi')}
           aria-pressed={mode === 'kpi'}
         >
@@ -39,7 +41,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 === 'gauge' ? '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 === 'gauge' ? 'bg-primary text-on-primary' : 'bg-bg-1 text-fg-2 hover:text-fg-0'].join(' ')}
           onclick={() => (mode = 'gauge')}
           aria-pressed={mode === 'gauge'}
         >
@@ -48,7 +50,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 === 'table' ? '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 === 'table' ? 'bg-primary text-on-primary' : 'bg-bg-1 text-fg-2 hover:text-fg-0'].join(' ')}
           onclick={() => (mode = 'table')}
           aria-pressed={mode === 'table'}
         >
@@ -111,7 +113,7 @@
             {#each metrics as metric, i (`${metric.key}-${i}`)}
               <tr class="border-b border-line-1/60 hover:bg-bg-1/40">
                 <td class="px-2 py-1 text-fg-0">{metric.label}</td>
-                <td class="px-2 py-1 text-right text-accent">{metric.value.toLocaleString()}</td>
+                <td class="px-2 py-1 text-right text-primary-text">{metric.value.toLocaleString()}</td>
                 <td class="px-2 py-1 text-fg-3">{metric.unit || '-'}</td>
               </tr>
             {/each}

package/src/lib/renderers/TableRenderer.svelte

@@ -3,7 +3,12 @@
   import { connection } from '$lib/connections.svelte'
   import { activity } from '$lib/activity.svelte'
   import { pendingChanges } from '$lib/pending-changes.svelte'
-  import { Columns3, Filter, Loader2, Play, RotateCw, X } from 'lucide-svelte'
+  import Columns3 from '@lucide/svelte/icons/columns-3'
+  import Filter from '@lucide/svelte/icons/filter'
+  import Loader2 from '@lucide/svelte/icons/loader-2'
+  import Play from '@lucide/svelte/icons/play'
+  import RotateCw from '@lucide/svelte/icons/rotate-cw'
+  import X from '@lucide/svelte/icons/x'
   import {
     formatCell,
     identityKind,
@@ -191,7 +196,7 @@
           class={[
             'inline-flex items-center gap-1.5 h-6 px-2 rounded border transition-colors cursor-pointer',
             selectOpen
-              ? '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(' ')}
         >
@@ -229,14 +234,14 @@
         class={[
           'inline-flex items-center gap-1.5 h-6 px-2 rounded border transition-colors cursor-pointer',
           filtersOpen
-            ? '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(' ')}
       >
         <Filter class="size-3" />
         <span>filters</span>
         {#if activeFilterCount > 0}
-          <span class="text-[9px] px-1 rounded bg-accent text-white">{activeFilterCount}</span>
+          <span class="text-[9px] px-1 rounded bg-primary text-on-primary">{activeFilterCount}</span>
         {/if}
       </button>
       {#if activeFilterCount > 0}
@@ -297,7 +302,7 @@
             <label
               class={[
                 'inline-flex h-5 items-center gap-1 rounded border px-1.5 cursor-pointer',
-                selectedColumns[col] ? 'border-accent/40 bg-accent/10 text-accent' : 'border-line-1 text-fg-3 hover:text-fg-1',
+                selectedColumns[col] ? 'border-accent/40 bg-accent/10 text-primary-text' : 'border-line-1 text-fg-3 hover:text-fg-1',
               ].join(' ')}
             >
               <input
@@ -339,7 +344,7 @@
               >
                 <span class={kind || sys ? 'font-semibold' : ''}>{c}</span>
                 {#if kind === 'rid'}
-                  <span class="ml-1 text-[9px] px-1 py-0.5 rounded bg-accent text-white uppercase tracking-wider font-semibold" title="System-assigned row id — reddb's canonical address">sys</span>
+                  <span class="ml-1 text-[9px] px-1 py-0.5 rounded bg-primary text-on-primary uppercase tracking-wider font-semibold" title="System-assigned row id — reddb's canonical address">sys</span>
                 {:else if sys}
                   <span class="ml-1 text-[9px] px-1 py-0.5 rounded border border-line-2 text-fg-3 uppercase tracking-wider" title="Reserved system field — written by reddb">sys</span>
                 {:else if kind === 'id'}
@@ -392,7 +397,7 @@
                   class={[
                     'px-2 py-1 max-w-[260px] truncate align-top',
                     kind === 'rid'
-                      ? 'bg-accent/5 text-accent font-semibold'
+                      ? 'bg-accent/5 text-primary-text font-semibold'
                       : sys
                         ? 'bg-bg-1 text-fg-2 font-mono'
                         : kind === 'id'

package/src/lib/renderers/VectorRenderer.svelte

@@ -1,6 +1,13 @@
 <script lang="ts">
   import type { QueryResult, RedClient } from '#reddb'
-  import { Braces, Gauge, ListFilter, LoaderCircle, Play, Rows3, Search, X } from 'lucide-svelte'
+  import Braces from '@lucide/svelte/icons/braces'
+  import Gauge from '@lucide/svelte/icons/gauge'
+  import ListFilter from '@lucide/svelte/icons/list-filter'
+  import LoaderCircle from '@lucide/svelte/icons/loader-circle'
+  import Play from '@lucide/svelte/icons/play'
+  import Rows3 from '@lucide/svelte/icons/rows-3'
+  import Search from '@lucide/svelte/icons/search'
+  import X from '@lucide/svelte/icons/x'
   import {
     buildVectorSearchQuery,
     compactValue,
@@ -96,7 +103,7 @@
       <div class="inline-flex shrink-0 overflow-hidden rounded border border-line-2">
         <button
           type="button"
-          class={['inline-flex h-7 items-center gap-1 px-2 transition-colors', surface === 'browse' ? '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 transition-colors', surface === 'browse' ? 'bg-primary text-on-primary' : 'bg-bg-1 text-fg-2 hover:text-fg-0'].join(' ')}
           onclick={() => { surface = 'browse'; selected = null }}
           aria-pressed={surface === 'browse'}
         >
@@ -105,7 +112,7 @@
         </button>
         <button
           type="button"
-          class={['inline-flex h-7 items-center gap-1 border-l border-line-2 px-2 transition-colors', surface === 'search' ? '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 transition-colors', surface === 'search' ? 'bg-primary text-on-primary' : 'bg-bg-1 text-fg-2 hover:text-fg-0'].join(' ')}
           onclick={() => { surface = 'search'; selected = null }}
           aria-pressed={surface === 'search'}
         >
@@ -171,7 +178,7 @@
             'inline-flex h-7 items-center gap-1 rounded border px-2 transition-colors',
             searching
               ? 'border-line-1 bg-bg-2 text-fg-3'
-              : 'border-accent/40 bg-accent text-white hover:bg-accent/90',
+              : 'border-accent/40 bg-primary text-on-primary hover:bg-accent/90',
           ].join(' ')}
           disabled={searching}
           onclick={() => void runSearch()}
@@ -238,7 +245,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 === 'metadata' ? '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 === 'metadata' ? 'bg-primary text-on-primary' : 'bg-bg-1 text-fg-2 hover:text-fg-0'].join(' ')}
           onclick={() => (mode = 'metadata')}
           aria-pressed={mode === 'metadata'}
         >
@@ -247,7 +254,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 === 'vector' ? '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 === 'vector' ? 'bg-primary text-on-primary' : 'bg-bg-1 text-fg-2 hover:text-fg-0'].join(' ')}
           onclick={() => (mode = 'vector')}
           aria-pressed={mode === 'vector'}
         >
@@ -256,7 +263,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 === 'scalar' ? '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 === 'scalar' ? 'bg-primary text-on-primary' : 'bg-bg-1 text-fg-2 hover:text-fg-0'].join(' ')}
           onclick={() => (mode = 'scalar')}
           aria-pressed={mode === 'scalar'}
         >
@@ -300,7 +307,7 @@
             ].join(' ')}
           >
             <div class="flex items-baseline gap-2">
-              <span class="text-accent">{row.id}</span>
+              <span class="text-primary-text">{row.id}</span>
               <span class="text-fg-3">{row.dimension}d</span>
               {#if surface === 'search' && row.scalar !== null}<span class="ml-auto text-fg-1" title={scalarLabel(row)}>{row.scalar.toFixed(4)}</span>{/if}
             </div>
@@ -374,7 +381,7 @@
             <tbody>
               {#each filtered as row (row.id)}
                 <tr class="border-b border-line-1/60 hover:bg-bg-1/40 cursor-pointer" onclick={() => (selected = row)}>
-                  <td class="px-2 py-1 text-accent">{row.id}</td>
+                  <td class="px-2 py-1 text-primary-text">{row.id}</td>
                   <td class="px-2 py-1 text-right" title={scalarLabel(row)}>{row.scalar === null ? 'n/a' : row.scalar.toFixed(6)}</td>
                   <td class="px-2 py-1 text-right">{vectorMagnitude(row.vector).toFixed(6)}</td>
                 </tr>

package/src/lib/shadow-dom-spike/mount-shadow-dom-spike.ts

@@ -12,7 +12,7 @@ const shadowHostCss = `
 }
 
 :host,
-:host([data-theme='dark']) {
+:host([data-color-scheme='dark']) {
   --color-bg-0: #050607;
   --color-bg-1: #0d0f13;
   --color-bg-2: #181b21;
@@ -62,7 +62,8 @@ export type ShadowDomSpikeMount = {
 };
 
 export function mountShadowDomSpike(host: HTMLElement): ShadowDomSpikeMount {
-  host.setAttribute("data-theme", "dark");
+  host.setAttribute("data-theme", "application");
+  host.setAttribute("data-color-scheme", "dark");
 
   const shadowRoot = host.shadowRoot ?? host.attachShadow({ mode: "open" });
   shadowRoot.textContent = "";