@reddb-io/ui 0.1.1

package/src/lib/renderers/vector-render.ts

@@ -0,0 +1,154 @@
+import type { QueryResult } from '#reddb'
+
+export interface VectorRow {
+  index: number
+  id: string
+  vectorColumn: string | null
+  vector: number[]
+  dimension: number
+  scalarColumn: string | null
+  scalar: number | null
+  metadata: Record<string, unknown>
+}
+
+const VECTOR_NAMES = /(^|_)(vector|embedding|embeddings|turbovec)($|_)/i
+const SCALAR_NAMES = /(^|_)(scalar|score|distance|similarity|magnitude|norm)($|_)/i
+const SYSTEM_NAMES = new Set([
+  'rid',
+  'entity_id',
+  'red_entity_id',
+  'red_entity_type',
+  'red_kind',
+  'red_collection',
+  'red_sequence_id',
+  'collection',
+  'kind',
+  'tenant',
+  'created_at',
+  'updated_at',
+  'dimension',
+])
+
+function isNumberArray(v: unknown): v is number[] {
+  return Array.isArray(v) && v.length > 0 && v.every((x) => typeof x === 'number' && Number.isFinite(x))
+}
+
+function pickVector(values: Record<string, unknown>): [string, number[]] | null {
+  const named = Object.entries(values).find(([k, v]) => VECTOR_NAMES.test(k) && isNumberArray(v))
+  if (named) return named as [string, number[]]
+  const any = Object.entries(values).find(([, v]) => isNumberArray(v))
+  return any ? (any as [string, number[]]) : null
+}
+
+function pickScalar(values: Record<string, unknown>, vectorColumn: string | null): [string, number] | null {
+  const named = Object.entries(values).find(([k, v]) =>
+    k !== vectorColumn && SCALAR_NAMES.test(k) && typeof v === 'number' && Number.isFinite(v),
+  )
+  if (named) return named as [string, number]
+  return null
+}
+
+function numericDimension(v: unknown): number | null {
+  return typeof v === 'number' && Number.isFinite(v) && v > 0 ? Math.floor(v) : null
+}
+
+export function extractVectors(result: QueryResult): VectorRow[] {
+  return result.result.records.map((record, index) => {
+    const values = record.values ?? {}
+    const vectorResult = record.vector_results?.find((match) => isNumberArray(match.vector)) ?? null
+    const vector = vectorResult?.vector
+      ? (['vector_results.vector', vectorResult.vector] satisfies [string, number[]])
+      : pickVector(values)
+    const scalar = pickScalar(values, vector?.[0] ?? null)
+    const dimension = vector?.[1].length
+      ?? numericDimension(values.dimension)
+      ?? numericDimension(values.vector_dimension)
+      ?? 0
+    const metadata: Record<string, unknown> = {}
+    for (const [k, v] of Object.entries(values)) {
+      if (k === vector?.[0] || k === scalar?.[0] || SYSTEM_NAMES.has(k)) continue
+      metadata[k] = v
+    }
+    return {
+      index,
+      id: String(values.id ?? values.entity_id ?? values.red_entity_id ?? values.rid ?? index + 1),
+      vectorColumn: vector?.[0] ?? null,
+      vector: vector?.[1] ?? [],
+      dimension,
+      scalarColumn: scalar?.[0] ?? null,
+      scalar: scalar?.[1] ?? null,
+      metadata,
+    }
+  })
+}
+
+export function hasVectorShape(result: QueryResult): boolean {
+  if (result.capability === 'vector') return true
+  if (result.result.records.some((record) => (record.vector_results?.length ?? 0) > 0)) return true
+  return extractVectors(result).some((row) => row.vector.length > 0 || row.dimension > 0 || row.scalar !== null)
+}
+
+export function vectorMagnitude(v: number[]): number {
+  return Math.sqrt(v.reduce((sum, x) => sum + x * x, 0))
+}
+
+export function scalarLabel(row: Pick<VectorRow, 'scalarColumn'>): string {
+  if (!row.scalarColumn) return 'ranking metric'
+  if (/distance/i.test(row.scalarColumn)) return `search distance · ${row.scalarColumn}`
+  if (/similarity/i.test(row.scalarColumn)) return `similarity score · ${row.scalarColumn}`
+  if (/score/i.test(row.scalarColumn)) return `score · ${row.scalarColumn}`
+  if (/turbovec|scalar/i.test(row.scalarColumn)) return `scalar projection · ${row.scalarColumn}`
+  if (/magnitude|norm/i.test(row.scalarColumn)) return `vector magnitude · ${row.scalarColumn}`
+  return `ranking metric · ${row.scalarColumn}`
+}
+
+export function compactValue(v: unknown): string {
+  if (v === null || v === undefined) return 'NULL'
+  if (typeof v === 'object') return JSON.stringify(v)
+  return String(v)
+}
+
+export function isSyntheticVectorPreview(result: QueryResult): boolean {
+  return /^VECTOR\s+SEARCH\s+\S+\s+SIMILAR\s+TO\s+\[1(?:\.0)?,\s*0(?:\.0)?/i.test(result.query.trim())
+}
+
+export function isVectorSearchResult(result: QueryResult): boolean {
+  return /^VECTOR\s+SEARCH\s+/i.test(result.query.trim())
+}
+
+export function parseVectorInput(input: string): number[] {
+  const numbers = input
+    .replace(/[\[\]]/g, ' ')
+    .split(/[,\s]+/)
+    .map((part) => part.trim())
+    .filter(Boolean)
+    .map(Number)
+  if (numbers.length === 0) throw new Error('Paste a numeric vector first.')
+  const invalid = numbers.find((n) => !Number.isFinite(n))
+  if (invalid !== undefined) throw new Error('Vector contains a non-numeric value.')
+  return numbers
+}
+
+export function formatVectorLiteral(vector: number[]): string {
+  return `[${vector.map((n) => Number(n.toPrecision(8))).join(', ')}]`
+}
+
+function sqlString(s: string): string {
+  return `'${s.replace(/'/g, "''")}'`
+}
+
+function safeCollectionName(name: string): string {
+  return name.replace(/[^A-Za-z0-9_./-]/g, '')
+}
+
+export function buildVectorSearchQuery(
+  collection: string,
+  source: { kind: 'text'; text: string } | { kind: 'vector'; vector: number[] },
+  limit: number,
+): string {
+  const boundedLimit = Math.max(1, Math.min(200, Math.floor(Number(limit) || 20)))
+  const literal = source.kind === 'text'
+    ? sqlString(source.text)
+    : formatVectorLiteral(source.vector)
+  return `VECTOR SEARCH ${safeCollectionName(collection)} SIMILAR TO ${literal} INCLUDE VECTORS LIMIT ${boundedLimit}`
+}

package/src/lib/renderers/vector.ts

@@ -0,0 +1,9 @@
+import type { CapabilityRenderer } from './types'
+import { hasVectorShape } from './vector-render'
+import VectorRenderer from './VectorRenderer.svelte'
+
+export const vectorRenderer: CapabilityRenderer = {
+  capability: 'vector',
+  renders: (result) => hasVectorShape(result),
+  component: VectorRenderer,
+}

package/src/lib/router.svelte.ts

@@ -0,0 +1,163 @@
+// Router abstraction for the Mountable Root.
+//
+// The Core (`Workspace`) must mount without owning `window.history` or the
+// page URL (ADR-0001). Navigation between its top-level views is expressed
+// as a structured `RouteTarget` and resolved by an injected `Router`:
+//
+//   - `createStateRouter()` keeps the location in component state and never
+//     touches the URL — this is the default the Mountable Root uses when no
+//     router is injected, so it can be embedded in a host that owns the page.
+//   - The SvelteKit surface injects a Kit-backed router (see
+//     `src/routes/kit-router.svelte.ts`) that reads `page.url` and `goto()`s,
+//     so the full app keeps deep links, refresh, and the back button.
+//
+// Both implementations satisfy the same `Router` contract, so every view
+// component navigates the same way regardless of which Surface it runs in.
+
+import { getContext, setContext } from 'svelte'
+import { collectionPageHref } from './collection-pages'
+
+/** The four top-level destinations of the Mountable Root. */
+export type View = 'query' | 'collections' | 'cluster' | 'security'
+
+/**
+ * A navigation intent. `collection` carries a selected collection + subpage
+ * within the collections workspace; the other targets are the bare views.
+ */
+export type RouteTarget =
+  | { view: 'query' }
+  | { view: 'collections' }
+  | { view: 'cluster' }
+  | { view: 'security' }
+  | { view: 'collection'; collection: string; subpage: string }
+
+/** Resolved current location, the reactive surface views read from. */
+export interface RouteLocation {
+  view: View
+  /** Selected collection when inside the collections workspace, else null. */
+  collection: string | null
+  /** Selected collection subpage (`table`, `graph`, …), else null. */
+  subpage: string | null
+}
+
+export interface Router {
+  /** Current top-level view. */
+  readonly view: View
+  /** Selected collection, or null. */
+  readonly collection: string | null
+  /** Selected collection subpage, or null. */
+  readonly subpage: string | null
+  /** Canonical path for the current location (mirrors the SvelteKit URL). */
+  readonly path: string
+  /** The canonical href a `RouteTarget` maps to (for `<a href>` display). */
+  href(target: RouteTarget): string
+  /**
+   * Navigate to a target. When called from an anchor `onclick`, pass the
+   * event so the router can `preventDefault()` (state router) or honour
+   * modifier-clicks for open-in-new-tab (Kit router). `replace` swaps the
+   * current history entry instead of pushing (Kit only; ignored by state).
+   */
+  go(target: RouteTarget, event?: Event, replace?: boolean): void
+}
+
+/** Map a `RouteTarget` to its canonical path. */
+export function targetToHref(target: RouteTarget): string {
+  switch (target.view) {
+    case 'query':
+      return '/query'
+    case 'collections':
+      return '/collections'
+    case 'cluster':
+      return '/cluster'
+    case 'security':
+      return '/security'
+    case 'collection':
+      return collectionPageHref(target.collection, target.subpage)
+  }
+}
+
+/** Map a `RouteTarget` to a resolved location. */
+export function targetToLocation(target: RouteTarget): RouteLocation {
+  if (target.view === 'collection') {
+    return { view: 'collections', collection: target.collection, subpage: target.subpage }
+  }
+  return { view: target.view, collection: null, subpage: null }
+}
+
+/**
+ * Derive a location from a SvelteKit pathname. Mirrors the `routes/` tree:
+ * `/query`, `/cluster`, `/security`, `/c/<name>/p/<subpage>`, and `/` or
+ * `/collections` for the bare collections workspace.
+ */
+export function pathToLocation(pathname: string): RouteLocation {
+  if (pathname.startsWith('/query')) return { view: 'query', collection: null, subpage: null }
+  if (pathname.startsWith('/cluster')) return { view: 'cluster', collection: null, subpage: null }
+  if (pathname.startsWith('/security')) return { view: 'security', collection: null, subpage: null }
+  const m = pathname.match(/^\/c\/([^/]+)(?:\/p\/([^/]+))?/)
+  if (m) {
+    return {
+      view: 'collections',
+      collection: decodeURIComponent(m[1]),
+      subpage: m[2] ? decodeURIComponent(m[2]) : null,
+    }
+  }
+  return { view: 'collections', collection: null, subpage: null }
+}
+
+/**
+ * A router that lives entirely in component state — it never reads or writes
+ * the URL. This is what the Mountable Root uses standalone, so embedding in a
+ * host that owns the page never fights over `window.history`.
+ */
+export function createStateRouter(initial?: RouteLocation): Router {
+  let loc = $state<RouteLocation>(
+    initial ?? { view: 'collections', collection: null, subpage: null },
+  )
+  return {
+    get view() {
+      return loc.view
+    },
+    get collection() {
+      return loc.collection
+    },
+    get subpage() {
+      return loc.subpage
+    },
+    get path() {
+      return targetToHref(
+        loc.collection
+          ? { view: 'collection', collection: loc.collection, subpage: loc.subpage ?? 'table' }
+          : { view: loc.view },
+      )
+    },
+    href: (target) => targetToHref(target),
+    go: (target, event) => {
+      // The href is synthetic in state mode, so always suppress the anchor's
+      // default navigation and switch the in-memory location instead.
+      event?.preventDefault()
+      loc = targetToLocation(target)
+    },
+  }
+}
+
+const ROUTER_KEY = Symbol('red-ui-router')
+
+let fallbackRouter: Router | null = null
+
+/** Provide a router to descendant view components (called by the Mountable Root). */
+export function setRouter(router: Router): Router {
+  setContext(ROUTER_KEY, router)
+  return router
+}
+
+/**
+ * Read the router from context. Falls back to a shared state router when a
+ * component is used outside a Mountable Root, so views never crash for the
+ * lack of a provider.
+ */
+export function useRouter(): Router {
+  const router = getContext<Router | undefined>(ROUTER_KEY)
+  if (router) return router
+  if (!fallbackRouter) fallbackRouter = createStateRouter()
+  return fallbackRouter
+}

package/src/lib/secureStore.svelte.ts

@@ -0,0 +1,148 @@
+// Session-scoped secure-store service. Picks a backend at runtime:
+//   - Tauri: defer entirely to the OS keychain (no master password prompt).
+//   - Web:   no credential vault; target secrets are session-only. The
+//            WebEncryptedStore path is retained for legacy/manual unlocks.
+//
+// The store is exposed reactively so the workspace shell can render
+// the lock dialog when `locked` is true, and standalone can hydrate history
+// URLs the moment `store` becomes non-null.
+
+import {
+  TauriEncryptedStore,
+  WebEncryptedStore,
+  SecureStoreError,
+  type EncryptedStore,
+} from "#reddb";
+import { bootGateLocked, detectSurface, type Surface } from "./surface";
+
+const NAMESPACE = "red-ui:secure";
+const PROBE_KEY = "__probe__";
+const PROBE_VALUE = "ok";
+
+function envelopesExist(): boolean {
+  if (typeof localStorage === "undefined") return false;
+  for (let i = 0; i < localStorage.length; i++) {
+    const k = localStorage.key(i);
+    if (k && k.startsWith(NAMESPACE + ":")) return true;
+  }
+  return false;
+}
+
+class SecureStoreSvc {
+  /** The active backend, or null when locked. */
+  store = $state<EncryptedStore | null>(null);
+  /** True when the user must authenticate before the store can be used. */
+  locked = $state<boolean>(true);
+  /** True on the first ever launch — UI should ask for a *new* password (with confirm). */
+  needsSetup = $state<boolean>(false);
+  /** Backend kind, for the UI to skip the password prompt entirely on desktop. */
+  backend = $state<"tauri" | "web" | "unknown">("unknown");
+  /** The detected Surface (#21) — drives the Surface-aware boot gate. */
+  surface = $state<Surface>("web");
+  /** Last unlock attempt error, surface-able to the dialog. */
+  error = $state<string | null>(null);
+
+  constructor() {
+    if (typeof window === "undefined") {
+      this.backend = "unknown";
+      return;
+    }
+    this.surface = detectSurface();
+    if (this.surface === "standalone") {
+      // Tauri desktop — defer to the OS keychain, which unlocks the vault.
+      this.backend = "tauri";
+      this.bindTauri();
+      return;
+    }
+    // embedded or web. Neither Surface restores credential secrets from
+    // storage: embedded persists nothing, and web persists target labels only.
+    this.backend = "web";
+    const hasSecret = envelopesExist();
+    this.needsSetup = false;
+    this.locked = bootGateLocked(this.surface, hasSecret);
+  }
+
+  private async bindTauri() {
+    try {
+      const mod = await import("@tauri-apps/api/core");
+      this.store = new TauriEncryptedStore({ invoke: mod.invoke });
+      this.locked = false;
+    } catch (e) {
+      this.error = `Tauri keychain bridge unavailable: ${(e as Error).message}`;
+    }
+  }
+
+  /**
+   * Unlock the web store with a master password.
+   *
+   * - If a probe envelope already exists, verifying it confirms the password.
+   * - If no probe exists yet (first launch), writes one as the canary.
+   *
+   * Returns true on success, false on wrong-password (with `error` populated).
+   */
+  async unlock(password: string): Promise<boolean> {
+    this.error = null;
+    if (this.backend !== "web") return true;
+    let candidate: WebEncryptedStore;
+    try {
+      candidate = new WebEncryptedStore(password, { namespace: NAMESPACE });
+    } catch (e) {
+      this.error = (e as Error).message;
+      return false;
+    }
+    try {
+      const existing = await candidate.get(PROBE_KEY);
+      if (existing === null) {
+        await candidate.put(PROBE_KEY, PROBE_VALUE);
+      } else if (existing !== PROBE_VALUE) {
+        this.error = "Wrong password";
+        return false;
+      }
+    } catch (e) {
+      if (e instanceof SecureStoreError && e.code === "DECRYPT_FAILED") {
+        this.error = "Wrong password";
+        return false;
+      }
+      this.error = (e as Error).message;
+      return false;
+    }
+    this.store = candidate;
+    this.locked = false;
+    this.needsSetup = false;
+    return true;
+  }
+
+  lock() {
+    this.store = null;
+    if (this.backend === "web")
+      this.locked = bootGateLocked(this.surface, envelopesExist());
+  }
+
+  /**
+   * Nuclear option: wipe every red-ui artifact from this browser and
+   * return to a clean "new install" state. Removes the encrypted
+   * envelopes (`red-ui:secure:*`), the active-connection pin
+   * (`red-ui:connection`), the history labels (`red-ui:history`), and
+   * the theme preference (`red-ui:theme`) — everything else is in-memory
+   * only and resets when the page reloads.
+   */
+  wipe() {
+    if (typeof localStorage === "undefined") return;
+    const drop: string[] = [];
+    for (let i = 0; i < localStorage.length; i++) {
+      const k = localStorage.key(i);
+      if (!k) continue;
+      if (k.startsWith(NAMESPACE + ":")) drop.push(k);
+      else if (k.startsWith("red-ui:")) drop.push(k);
+    }
+    for (const k of drop) localStorage.removeItem(k);
+    this.store = null;
+    if (this.backend === "web") {
+      this.locked = bootGateLocked(this.surface, false);
+      this.needsSetup = false;
+    }
+    this.error = null;
+  }
+}
+
+export const secureStore = new SecureStoreSvc();

package/src/lib/shadow-dom-spike/ShadowDomSpikeCore.svelte

@@ -0,0 +1,198 @@
+<script lang="ts">
+  import { onMount, tick } from 'svelte'
+  import { BitsConfig, Dialog, Popover } from 'bits-ui'
+  import Workspace from '../Workspace.svelte'
+
+  type FindingState = 'pending' | 'working' | 'blocked'
+
+  type Finding = {
+    state: FindingState
+    detail: string
+  }
+
+  let { portalTarget }: { portalTarget: HTMLElement } = $props()
+
+  let popoverOpen = $state(false)
+  let dialogOpen = $state(false)
+  let popoverTrigger: HTMLButtonElement | null = $state(null)
+  let popoverContent: HTMLDivElement | null = $state(null)
+  let dialogContent: HTMLDivElement | null = $state(null)
+  let dialogInput: HTMLInputElement | null = $state(null)
+  let findings = $state<Record<'portals' | 'focus' | 'measurement', Finding>>({
+    portals: { state: 'pending', detail: 'waiting for automated probe' },
+    focus: { state: 'pending', detail: 'waiting for automated probe' },
+    measurement: { state: 'pending', detail: 'waiting for automated probe' },
+  })
+
+  const statusClass: Record<FindingState, string> = {
+    pending: 'border-line-2 bg-bg-2 text-fg-2',
+    working: 'border-ok/40 bg-ok/10 text-ok',
+    blocked: 'border-danger/40 bg-danger/10 text-danger',
+  }
+
+  function ownerShadowRoot(node: Node | null) {
+    const root = node?.getRootNode()
+    return root instanceof ShadowRoot ? root : null
+  }
+
+  function setFinding(key: keyof typeof findings, state: FindingState, detail: string) {
+    findings[key] = { state, detail }
+  }
+
+  function nextFrame() {
+    return new Promise<void>((resolve) => requestAnimationFrame(() => resolve()))
+  }
+
+  async function settleLayout() {
+    await tick()
+    await nextFrame()
+    await nextFrame()
+  }
+
+  async function runProbe() {
+    popoverOpen = true
+    await settleLayout()
+
+    const popoverRoot = ownerShadowRoot(popoverContent)
+    const popoverPortalledInsideShadow = Boolean(
+      popoverContent && popoverRoot && portalTarget.contains(popoverContent),
+    )
+    const popoverLeakedToBody = Boolean(popoverContent && document.body.contains(popoverContent))
+
+    if (popoverPortalledInsideShadow && !popoverLeakedToBody) {
+      setFinding('portals', 'working', 'bits-ui Portal renders into an HTMLElement inside the shadow root')
+    } else {
+      setFinding('portals', 'blocked', 'portal content escaped the configured shadow-root portal target')
+    }
+
+    const triggerRect = popoverTrigger?.getBoundingClientRect()
+    const contentRect = popoverContent?.getBoundingClientRect()
+    const measured = Boolean(
+      triggerRect &&
+        contentRect &&
+        triggerRect.width > 0 &&
+        triggerRect.height > 0 &&
+        contentRect.width > 0 &&
+        contentRect.height > 0 &&
+        Number.isFinite(contentRect.left) &&
+        Number.isFinite(contentRect.top),
+    )
+
+    if (measured) {
+      setFinding(
+        'measurement',
+        'working',
+        `trigger ${Math.round(triggerRect!.width)}x${Math.round(triggerRect!.height)}, popover ${Math.round(
+          contentRect!.width,
+        )}x${Math.round(contentRect!.height)}`,
+      )
+    } else {
+      setFinding('measurement', 'blocked', 'floating content or trigger produced a zero/invalid layout rect')
+    }
+
+    dialogOpen = true
+    await settleLayout()
+    dialogInput?.focus()
+    await settleLayout()
+
+    const shadowRoot = ownerShadowRoot(dialogContent)
+    const focused = shadowRoot?.activeElement
+    const focusInsideDialog = Boolean(
+      focused && dialogContent && (focused === dialogContent || dialogContent.contains(focused)),
+    )
+
+    if (focusInsideDialog) {
+      setFinding('focus', 'working', 'dialog focus is contained in the shadow root via shadowRoot.activeElement')
+    } else {
+      setFinding('focus', 'blocked', 'dialog focus did not move to or remain inside the shadow-root dialog')
+    }
+  }
+
+  onMount(() => {
+    void runProbe()
+  })
+</script>
+
+<BitsConfig defaultPortalTo={portalTarget}>
+  <section class="min-h-[720px] bg-bg-0 text-fg-0 font-sans">
+    <div class="grid min-h-[720px] grid-cols-[minmax(0,1fr)_360px]">
+      <div class="relative overflow-hidden border-r border-line-2">
+        <Workspace />
+      </div>
+
+      <aside class="flex flex-col gap-4 bg-bg-1 p-4">
+        <div>
+          <p class="type-label">Shadow DOM spike</p>
+          <h1 class="mt-2 text-lg font-semibold text-fg-0">Svelte 5 + Tailwind v4 + bits-ui</h1>
+        </div>
+
+        <div class="space-y-2">
+          {#each Object.entries(findings) as [key, finding]}
+            <div class={`rounded-md border p-3 ${statusClass[finding.state]}`} data-spike-finding={key}>
+              <div class="flex items-center justify-between gap-3">
+                <span class="font-mono text-[11px] uppercase tracking-[0.08em]">{key}</span>
+                <span class="font-mono text-[10px] uppercase tracking-[0.08em]">{finding.state}</span>
+              </div>
+              <p class="mt-2 text-xs leading-5 text-fg-1">{finding.detail}</p>
+            </div>
+          {/each}
+        </div>
+
+        <Popover.Root bind:open={popoverOpen}>
+          <Popover.Trigger
+            bind:ref={popoverTrigger}
+            data-spike-popover-trigger
+            class="h-9 rounded-md border border-line-2 bg-bg-2 px-3 text-left text-sm text-fg-0 hover:bg-bg-3"
+          >
+            Open popover
+          </Popover.Trigger>
+          <Popover.Portal>
+            <Popover.Content
+              bind:ref={popoverContent}
+              data-spike-popover-content
+              side="bottom"
+              align="start"
+              sideOffset={8}
+              class="z-50 w-[260px] rounded-md border border-line-2 bg-bg-1 p-3 text-sm text-fg-1 shadow-lg"
+            >
+              <p class="font-medium text-fg-0">Portalled inside shadow root</p>
+              <p class="mt-1 text-xs text-fg-2">Floating UI measured this against the trigger.</p>
+              <Popover.Arrow class="fill-bg-1" />
+            </Popover.Content>
+          </Popover.Portal>
+        </Popover.Root>
+
+        <Dialog.Root bind:open={dialogOpen}>
+          <Dialog.Trigger class="h-9 rounded-md border border-line-2 bg-bg-2 px-3 text-left text-sm text-fg-0 hover:bg-bg-3">
+            Open dialog
+          </Dialog.Trigger>
+          <Dialog.Portal>
+            <Dialog.Overlay class="fixed inset-0 z-40 bg-black/45" />
+            <Dialog.Content
+              bind:ref={dialogContent}
+              data-spike-dialog-content
+              trapFocus
+              class="fixed left-1/2 top-1/2 z-50 w-[320px] -translate-x-1/2 -translate-y-1/2 rounded-lg border border-line-2 bg-bg-1 p-4 shadow-lg"
+            >
+              <Dialog.Title class="text-sm font-semibold text-fg-0">Focus probe</Dialog.Title>
+              <Dialog.Description class="mt-1 text-xs text-fg-2">
+                Active focus is checked through shadowRoot.activeElement.
+              </Dialog.Description>
+              <input
+                bind:this={dialogInput}
+                data-spike-dialog-input
+                class="mt-3 h-9 w-full rounded-md border border-line-2 bg-bg-2 px-3 text-sm text-fg-0 outline-none focus:border-accent"
+                value="shadow-root focus target"
+              />
+              <div class="mt-4 flex justify-end">
+                <Dialog.Close class="h-8 rounded-md border border-line-2 bg-bg-2 px-3 text-xs text-fg-0 hover:bg-bg-3">
+                  Close
+                </Dialog.Close>
+              </div>
+            </Dialog.Content>
+          </Dialog.Portal>
+        </Dialog.Root>
+      </aside>
+    </div>
+  </section>
+</BitsConfig>