@reddb-io/ui 0.3.3 → 0.3.5

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/Workspace.svelte

@@ -220,8 +220,12 @@
   // default it was never pointed at.
   $effect(() => {
     if (secureStore.locked || !connection.targetResolved) return
-    connection.refresh()
-    const id = setInterval(() => connection.refresh(), REFRESH_MS)
+    // Poll only an acquired client. Re-entering connect here races with the
+    // boot/login token exchange; tracking refresh reads also retriggers this
+    // effect whenever a probe changes instead of waiting for the interval.
+    const refresh = () => { if (connection.client) void connection.refresh() }
+    untrack(refresh)
+    const id = setInterval(refresh, REFRESH_MS)
     return () => clearInterval(id)
   })
 

package/src/lib/connections.svelte.ts

@@ -445,7 +445,38 @@ class ConnectionStore {
     await this.tryConnect(preset);
   }
 
+  async login(
+    preset: ConnectionPreset,
+    username: string,
+    password: string
+  ): Promise<boolean> {
+    this.active = preset;
+    this.#client = null;
+    this.connected = false;
+    this.probe = { reachable: false };
+    try {
+      const targetProvider = getConnectionProvider();
+      if (!isHandoffTokenConsumer(targetProvider))
+        throw new Error("This connection is managed by its host.");
+      const token = await new RedClient(preset.url, {
+        fetch: desktopFetch,
+      }).login(username, password);
+      targetProvider.useHandoffToken(preset.url, token);
+      return await this.tryConnect(preset);
+    } catch (error) {
+      this.probe = {
+        reachable: false,
+        error:
+          error instanceof Error ? error.message : "Database sign-in failed.",
+      };
+      return false;
+    }
+  }
+
   async tryConnect(preset: ConnectionPreset): Promise<boolean> {
+    this.active = preset;
+    this.#client = null;
+    this.connected = false;
     // An explicit connect attempt means a target has been chosen — unblocks
     // automatic refresh from here on (#21).
     this.#targetResolved = true;

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

@@ -256,7 +256,12 @@ function isPermissionResource(value: unknown): value is PermissionResource {
 
 /** One NDJSON frame from `POST /query/stream`. Discriminated by its single key. */
 type NdjsonFrame =
-  | { descriptor: { columns: string[]; schema_fingerprint?: string } }
+  | {
+      descriptor: {
+        columns: Array<string | { name: string }>;
+        schema_fingerprint?: string;
+      };
+    }
   | { cursor: { token: string; snapshot_lsn?: number; resumable?: boolean } }
   | { row: Record<string, unknown> }
   | { end: { row_count?: number } }
@@ -359,7 +364,16 @@ export async function runQueryPreferStream(
       record_count: s.rowCount,
       result: {
         columns: s.columns,
-        records: s.rows.map((values) => ({ values })),
+        records: s.rows.map((row) =>
+          row.values &&
+          typeof row.values === "object" &&
+          ("nodes" in row ||
+            "edges" in row ||
+            "paths" in row ||
+            "vector_results" in row)
+            ? (row as unknown as QueryRow)
+            : { values: row }
+        ),
       },
       streamed: true,
       truncated: s.truncated,
@@ -383,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> {
@@ -456,6 +470,46 @@ export class RedClient {
     return data;
   }
 
+  /** Exchange credentials for a session token. Neither value is persisted. */
+  async login(username: string, password: string): Promise<string> {
+    const endpoint = new URL(this.baseUrl);
+    if (
+      endpoint.username ||
+      endpoint.password ||
+      endpoint.search ||
+      endpoint.hash ||
+      (endpoint.protocol !== "https:" &&
+        !(
+          endpoint.protocol === "http:" &&
+          ["localhost", "127.0.0.1", "[::1]"].includes(endpoint.hostname)
+        ))
+    ) {
+      throw new Error("Use HTTPS to sign in to a remote database.");
+    }
+    // Bypass query instrumentation: credentials and the session response must
+    // never enter the developer console, including an authentication failure.
+    const response = await this.fetcher(`${this.baseUrl}/auth/login`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      credentials: "omit",
+      redirect: "error",
+      body: JSON.stringify({ username, password }),
+    });
+    if (!response.ok)
+      throw new Error(
+        "Database sign-in failed. Check your credentials and try again."
+      );
+    const session = await response.json();
+    if (
+      session.ok !== true ||
+      typeof session.token !== "string" ||
+      !session.token
+    ) {
+      throw new Error("The database did not return a session token.");
+    }
+    return session.token;
+  }
+
   async stats(): Promise<Stats> {
     return this.json<Stats>("/stats");
   }
@@ -716,7 +770,9 @@ export class RedClient {
 
     for await (const frame of parseNdjsonFrames(res.body)) {
       if ("descriptor" in frame) {
-        out.columns = frame.descriptor.columns ?? [];
+        out.columns = (frame.descriptor.columns ?? []).map((column) =>
+          typeof column === "string" ? column : column.name
+        );
         out.schemaFingerprint = frame.descriptor.schema_fingerprint;
       } else if ("cursor" in frame) {
         out.cursor = frame.cursor.token;

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}