@reddb-io/ui 0.1.1

package/src/lib/reddb/web-encrypted-store.ts

@@ -0,0 +1,201 @@
+import { type EncryptedStore, SecureStoreError } from './secure-store'
+
+/**
+ * Storage envelope persisted per-key in the backing KV. Versioned so the
+ * format can evolve without silently breaking older payloads.
+ */
+interface Envelope {
+  v: 1
+  salt: string        // base64, per-key
+  nonce: string       // base64, per-write
+  ciphertext: string  // base64
+}
+
+export interface WebStorageLike {
+  getItem(key: string): string | null
+  setItem(key: string, value: string): void
+  removeItem(key: string): void
+}
+
+export interface WebEncryptedStoreOptions {
+  /** Namespace prefix applied to every key before storage. */
+  namespace?: string
+  /** Storage backend. Defaults to globalThis.localStorage when present. */
+  storage?: WebStorageLike
+  /** PBKDF2 iterations. Default 200k. */
+  iterations?: number
+  /** Web Crypto SubtleCrypto override (for tests). */
+  subtle?: SubtleCrypto
+}
+
+const DEFAULT_ITERATIONS = 200_000
+const SALT_BYTES = 16
+const NONCE_BYTES = 12
+
+function toB64(bytes: Uint8Array): string {
+  let s = ''
+  for (const b of bytes) s += String.fromCharCode(b)
+  return btoa(s)
+}
+
+function fromB64(s: string): Uint8Array {
+  const bin = atob(s)
+  const out = new Uint8Array(bin.length)
+  for (let i = 0; i < bin.length; i++) out[i] = bin.charCodeAt(i)
+  return out
+}
+
+// TS's DOM lib widens `Uint8Array#buffer` to `ArrayBuffer | SharedArrayBuffer`,
+// which the Web Crypto signatures reject. Copy the view into a fresh
+// ArrayBuffer so the cast is sound at runtime.
+function bufOf(view: Uint8Array): ArrayBuffer {
+  const out = new ArrayBuffer(view.byteLength)
+  new Uint8Array(out).set(view)
+  return out
+}
+
+/**
+ * Browser-grade encrypted KV. A single instance is bound to one master
+ * password for its lifetime — to rotate, instantiate a fresh store.
+ *
+ * The password material itself is never persisted; only PBKDF2-derived
+ * AES-GCM keys are cached in memory per-salt for the lifetime of the
+ * instance.
+ */
+export class WebEncryptedStore implements EncryptedStore {
+  private readonly storage: WebStorageLike
+  private readonly namespace: string
+  private readonly iterations: number
+  private readonly subtle: SubtleCrypto
+  private readonly password: string
+  private readonly keyCache = new Map<string, CryptoKey>()
+
+  constructor(password: string, opts: WebEncryptedStoreOptions = {}) {
+    if (typeof password !== 'string' || password.length === 0) {
+      throw new SecureStoreError('LOCKED', 'master password required')
+    }
+    const storage = opts.storage ?? (typeof globalThis !== 'undefined' ? (globalThis as { localStorage?: WebStorageLike }).localStorage : undefined)
+    if (!storage) {
+      throw new SecureStoreError('BACKEND_FAILURE', 'no Storage backend available')
+    }
+    const subtle = opts.subtle ?? (typeof globalThis !== 'undefined' ? (globalThis as { crypto?: Crypto }).crypto?.subtle : undefined)
+    if (!subtle) {
+      throw new SecureStoreError('BACKEND_FAILURE', 'Web Crypto SubtleCrypto unavailable')
+    }
+    this.password = password
+    this.storage = storage
+    this.namespace = opts.namespace ?? 'red-ui:secure'
+    this.iterations = opts.iterations ?? DEFAULT_ITERATIONS
+    this.subtle = subtle
+  }
+
+  private storageKey(key: string): string {
+    return `${this.namespace}:${key}`
+  }
+
+  private async deriveKey(salt: Uint8Array): Promise<CryptoKey> {
+    const saltKey = toB64(salt)
+    const cached = this.keyCache.get(saltKey)
+    if (cached) return cached
+    const enc = new TextEncoder().encode(this.password)
+    const material = await this.subtle.importKey(
+      'raw',
+      bufOf(enc),
+      'PBKDF2',
+      false,
+      ['deriveKey'],
+    )
+    const key = await this.subtle.deriveKey(
+      {
+        name: 'PBKDF2',
+        salt: bufOf(salt),
+        iterations: this.iterations,
+        hash: 'SHA-256',
+      },
+      material,
+      { name: 'AES-GCM', length: 256 },
+      false,
+      ['encrypt', 'decrypt'],
+    )
+    this.keyCache.set(saltKey, key)
+    return key
+  }
+
+  private randomBytes(n: number): Uint8Array {
+    const out = new Uint8Array(n)
+    const c = (globalThis as { crypto?: Crypto }).crypto
+    if (!c) throw new SecureStoreError('BACKEND_FAILURE', 'crypto.getRandomValues unavailable')
+    c.getRandomValues(out)
+    return out
+  }
+
+  async put(key: string, value: string): Promise<void> {
+    const salt = this.randomBytes(SALT_BYTES)
+    const nonce = this.randomBytes(NONCE_BYTES)
+    const cryptoKey = await this.deriveKey(salt)
+    const plaintext = new TextEncoder().encode(value)
+    let ciphertext: ArrayBuffer
+    try {
+      ciphertext = await this.subtle.encrypt(
+        { name: 'AES-GCM', iv: bufOf(nonce) },
+        cryptoKey,
+        bufOf(plaintext),
+      )
+    } catch (e) {
+      throw new SecureStoreError('BACKEND_FAILURE', `encrypt failed: ${(e as Error).message}`)
+    }
+    const env: Envelope = {
+      v: 1,
+      salt: toB64(salt),
+      nonce: toB64(nonce),
+      ciphertext: toB64(new Uint8Array(ciphertext)),
+    }
+    try {
+      this.storage.setItem(this.storageKey(key), JSON.stringify(env))
+    } catch (e) {
+      throw new SecureStoreError('BACKEND_FAILURE', `storage write failed: ${(e as Error).message}`)
+    }
+  }
+
+  async get(key: string): Promise<string | null> {
+    const raw = this.storage.getItem(this.storageKey(key))
+    if (!raw) return null
+    let env: Envelope
+    try {
+      env = JSON.parse(raw) as Envelope
+    } catch {
+      throw new SecureStoreError('CORRUPT_ENVELOPE', `key ${key}: not valid JSON`)
+    }
+    if (!env || env.v !== 1 || typeof env.salt !== 'string' || typeof env.nonce !== 'string' || typeof env.ciphertext !== 'string') {
+      throw new SecureStoreError('CORRUPT_ENVELOPE', `key ${key}: missing envelope fields`)
+    }
+    let salt: Uint8Array, nonce: Uint8Array, ct: Uint8Array
+    try {
+      salt = fromB64(env.salt)
+      nonce = fromB64(env.nonce)
+      ct = fromB64(env.ciphertext)
+    } catch {
+      throw new SecureStoreError('CORRUPT_ENVELOPE', `key ${key}: base64 decode failed`)
+    }
+    const cryptoKey = await this.deriveKey(salt)
+    let pt: ArrayBuffer
+    try {
+      pt = await this.subtle.decrypt(
+        { name: 'AES-GCM', iv: bufOf(nonce) },
+        cryptoKey,
+        bufOf(ct),
+      )
+    } catch {
+      throw new SecureStoreError('DECRYPT_FAILED', `key ${key}: decryption failed (wrong password or tampered payload)`)
+    }
+    return new TextDecoder().decode(pt)
+  }
+
+  async delete(key: string): Promise<void> {
+    try {
+      this.storage.removeItem(this.storageKey(key))
+    } catch (e) {
+      throw new SecureStoreError('BACKEND_FAILURE', `storage delete failed: ${(e as Error).message}`)
+    }
+  }
+}

package/src/lib/renderers/DiffRenderer.svelte

@@ -0,0 +1,184 @@
+<script lang="ts">
+  import type { QueryResult } from '#reddb'
+  import { Braces, GitCompareArrows, Search, X } from 'lucide-svelte'
+  import { diffEntryFields, extractDiffEntries, formatDiffValue, summarizeDiff, type DiffEntry } from './diff-render'
+
+  interface Props {
+    result: QueryResult
+    collection?: string
+  }
+
+  let { result, collection }: Props = $props()
+
+  let mode = $state<'summary' | 'raw'>('summary')
+  let filter = $state('')
+  let selected = $state<DiffEntry | null>(null)
+  let showUnchanged = $state(false)
+
+  const entries = $derived(extractDiffEntries(result))
+  const summary = $derived(summarizeDiff(entries))
+  const filtered = $derived.by(() => {
+    const q = filter.trim().toLowerCase()
+    if (!q) return entries
+    return entries.filter((entry) =>
+      entry.id.toLowerCase().includes(q) ||
+      entry.change.toLowerCase().includes(q) ||
+      (entry.collection ?? '').toLowerCase().includes(q) ||
+      (entry.entityId ?? '').toLowerCase().includes(q) ||
+      formatDiffValue(entry.before).toLowerCase().includes(q) ||
+      formatDiffValue(entry.after).toLowerCase().includes(q),
+    )
+  })
+  const active = $derived(selected ?? filtered[0] ?? null)
+  const activeFields = $derived(active ? diffEntryFields(active) : [])
+  const visibleFields = $derived(showUnchanged ? activeFields : activeFields.filter((field) => field.status !== 'unchanged'))
+
+  function statusClass(status: string): string {
+    if (status === 'added') return 'text-ok'
+    if (status === 'removed') return 'text-danger'
+    if (status === 'modified') return 'text-accent'
+    return 'text-fg-3'
+  }
+</script>
+
+<div class="flex h-full flex-col text-fg-1">
+  {#if entries.length === 0}
+    <div class="flex-1 grid place-items-center text-fg-3 text-[12px] font-mono p-6">
+      No diff shape in this result.
+    </div>
+  {:else}
+    <div class="border-b border-line-1 px-3 py-1.5 flex items-center gap-2 text-[11px] font-mono bg-bg-1/40">
+      <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(' ')}
+          onclick={() => (mode = 'summary')}
+          aria-pressed={mode === 'summary'}
+        >
+          <GitCompareArrows class="size-3" />
+          diff
+        </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(' ')}
+          onclick={() => (mode = 'raw')}
+          aria-pressed={mode === 'raw'}
+        >
+          <Braces class="size-3" />
+          raw
+        </button>
+      </div>
+
+      <div class="inline-flex items-center gap-1.5 border border-line-1 rounded px-2 py-1 bg-bg-0">
+        <Search class="size-3 text-fg-3" />
+        <input type="text" bind:value={filter} placeholder="change, id, value…" class="bg-transparent text-fg-1 outline-none w-[190px] placeholder:text-fg-3" />
+        {#if filter}
+          <button type="button" onclick={() => (filter = '')} class="text-fg-3 hover:text-fg-1 cursor-pointer" aria-label="Clear diff filter">
+            <X class="size-3" />
+          </button>
+        {/if}
+      </div>
+
+      <div class="ml-auto flex items-center gap-3 text-fg-3">
+        {#each summary as [change, count] (change)}
+          <span><span class="text-fg-2">{change}</span> {count}</span>
+        {/each}
+        {#if collection}<span class="text-fg-2">{collection}</span>{/if}
+      </div>
+    </div>
+
+    {#if mode === 'raw'}
+      <div class="flex-1 overflow-auto p-3 text-[12px] font-mono">
+        <pre class="whitespace-pre-wrap text-fg-1">{JSON.stringify(filtered.map((entry) => entry.values), null, 2)}</pre>
+      </div>
+    {:else}
+      <div class="flex-1 min-h-0 grid grid-cols-[minmax(320px,0.9fr)_1.1fr]">
+        <div class="overflow-auto border-r border-line-1 text-[12px] font-mono">
+          {#each filtered as entry (entry.id)}
+            <button
+              type="button"
+              onclick={() => (selected = entry)}
+              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-fg-3 truncate">{entry.entityId ?? entry.id}</span>
+                {#if entry.collection}<span class="ml-auto text-fg-3">{entry.collection}</span>{/if}
+              </div>
+              {#if entry.note}
+                <div class="mt-1 truncate text-fg-1">{entry.note}</div>
+              {/if}
+            </button>
+          {/each}
+        </div>
+
+        <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">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}
+                <span class="text-fg-3">note</span><span class="text-fg-1">{active.note}</span>
+              {/if}
+            </div>
+
+            {#if activeFields.length > 0}
+              <div class="mb-3 border border-line-1">
+                <div class="flex items-center gap-2 border-b border-line-1 bg-bg-1 px-2 py-1.5">
+                  <span class="text-fg-0">field diff</span>
+                  <span class="text-fg-3">{visibleFields.length}/{activeFields.length} fields</span>
+                  <label class="ml-auto inline-flex items-center gap-1 text-fg-3">
+                    <input type="checkbox" bind:checked={showUnchanged} class="size-3 accent-current" />
+                    unchanged
+                  </label>
+                </div>
+                {#if visibleFields.length === 0}
+                  <div class="px-2 py-2 text-fg-3">No changed fields in this row.</div>
+                {:else}
+                  <table class="w-full border-collapse">
+                    <thead class="bg-bg-0 text-fg-3">
+                      <tr class="border-b border-line-1">
+                        <th class="w-[110px] px-2 py-1 text-left font-normal">status</th>
+                        <th class="w-[150px] px-2 py-1 text-left font-normal">field</th>
+                        <th class="px-2 py-1 text-left font-normal">before</th>
+                        <th class="px-2 py-1 text-left font-normal">after</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {#each visibleFields as field (field.field)}
+                        <tr class="border-b border-line-1/60 last:border-b-0">
+                          <td class={['px-2 py-1 align-top', statusClass(field.status)].join(' ')}>{field.status}</td>
+                          <td class="px-2 py-1 align-top text-fg-0">{field.field}</td>
+                          <td class="max-w-[260px] px-2 py-1 align-top text-fg-2">
+                            <pre class="whitespace-pre-wrap break-words">{formatDiffValue(field.before)}</pre>
+                          </td>
+                          <td class="max-w-[260px] px-2 py-1 align-top text-fg-2">
+                            <pre class="whitespace-pre-wrap break-words">{formatDiffValue(field.after)}</pre>
+                          </td>
+                        </tr>
+                      {/each}
+                    </tbody>
+                  </table>
+                {/if}
+              </div>
+            {/if}
+
+            <div class="grid grid-cols-2 gap-3">
+              <section class="min-w-0">
+                <div class="type-label mb-1">full before</div>
+                <pre class="min-h-[160px] whitespace-pre-wrap break-words rounded border border-line-1 bg-bg-1 p-2 text-fg-1">{formatDiffValue(active.before)}</pre>
+              </section>
+              <section class="min-w-0">
+                <div class="type-label mb-1">full after</div>
+                <pre class="min-h-[160px] whitespace-pre-wrap break-words rounded border border-line-1 bg-bg-1 p-2 text-fg-1">{formatDiffValue(active.after)}</pre>
+              </section>
+            </div>
+          {:else}
+            <div class="text-fg-3">No diff entry selected.</div>
+          {/if}
+        </div>
+      </div>
+    {/if}
+  {/if}
+</div>

package/src/lib/renderers/DocumentRenderer.svelte

@@ -0,0 +1,134 @@
+<script lang="ts">
+  import type { QueryResult } from '#reddb'
+  import { Braces, FileText, Search, X } from 'lucide-svelte'
+  import { extractDocuments, type DocumentItem } from './document-render'
+
+  interface Props {
+    result: QueryResult
+    collection?: string
+  }
+
+  let { result, collection }: Props = $props()
+
+  let mode = $state<'body' | 'fields' | 'raw'>('body')
+  let filter = $state('')
+  let selected = $state<DocumentItem | null>(null)
+
+  const docs = $derived(extractDocuments(result))
+  const filtered = $derived.by(() => {
+    const q = filter.trim().toLowerCase()
+    if (!q) return docs
+    return docs.filter((doc) =>
+      doc.title.toLowerCase().includes(q) ||
+      doc.subtitle.toLowerCase().includes(q) ||
+      JSON.stringify(doc.body).toLowerCase().includes(q),
+    )
+  })
+  const active = $derived(selected && filtered.includes(selected) ? selected : filtered[0] ?? null)
+
+  function pretty(v: unknown): string {
+    return JSON.stringify(v ?? null, null, 2)
+  }
+</script>
+
+<div class="flex h-full flex-col text-fg-1">
+  {#if docs.length === 0}
+    <div class="flex-1 grid place-items-center text-fg-3 text-[12px] font-mono p-6">
+      No document shape in this result.
+    </div>
+  {:else}
+    <div class="border-b border-line-1 px-3 py-1.5 flex items-center gap-2 text-[11px] font-mono bg-bg-1/40">
+      <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(' ')}
+          onclick={() => (mode = 'body')}
+          aria-pressed={mode === 'body'}
+        >
+          <Braces class="size-3" />
+          body
+        </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(' ')}
+          onclick={() => (mode = 'fields')}
+          aria-pressed={mode === 'fields'}
+        >
+          <FileText class="size-3" />
+          fields
+        </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(' ')}
+          onclick={() => (mode = 'raw')}
+          aria-pressed={mode === 'raw'}
+        >
+          <Braces class="size-3" />
+          raw
+        </button>
+      </div>
+
+      <div class="inline-flex items-center gap-1.5 border border-line-1 rounded px-2 py-1 bg-bg-0">
+        <Search class="size-3 text-fg-3" />
+        <input type="text" bind:value={filter} placeholder="document search…" class="bg-transparent text-fg-1 outline-none w-[200px] placeholder:text-fg-3" />
+        {#if filter}
+          <button type="button" onclick={() => (filter = '')} class="text-fg-3 hover:text-fg-1 cursor-pointer" aria-label="Clear document filter">
+            <X class="size-3" />
+          </button>
+        {/if}
+      </div>
+
+      <div class="ml-auto text-fg-3">
+        {filtered.length.toLocaleString()}{#if filter} of {docs.length.toLocaleString()}{/if} documents
+        {#if collection}· <span class="text-fg-2">{collection}</span>{/if}
+      </div>
+    </div>
+
+    <div class="flex-1 min-h-0 grid grid-cols-[minmax(280px,0.75fr)_1.25fr]">
+      <div class="overflow-auto border-r border-line-1 text-[12px] font-mono">
+        {#each filtered as doc (doc.rid)}
+          <button
+            type="button"
+            onclick={() => (selected = doc)}
+            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="ml-auto text-fg-3">#{doc.rid}</span>
+            </div>
+            {#if doc.subtitle}
+              <div class="mt-1 truncate text-fg-3">{doc.subtitle}</div>
+            {/if}
+          </button>
+        {/each}
+      </div>
+
+      <div class="min-h-0 overflow-auto p-3 text-[12px] font-mono">
+        {#if active}
+          {#if mode === 'body'}
+            <pre class="m-0 whitespace-pre-wrap text-fg-1">{pretty(active.body)}</pre>
+          {:else if mode === 'fields'}
+            <table class="w-full border-collapse">
+              <tbody>
+                {#each Object.entries(active.fields) as [key, value] (key)}
+                  <tr class="border-b border-line-1/60">
+                    <td class="w-[180px] px-2 py-1 text-fg-3 align-top">{key}</td>
+                    <td class="px-2 py-1 text-fg-1 align-top"><pre class="m-0 whitespace-pre-wrap">{pretty(value)}</pre></td>
+                  </tr>
+                {/each}
+              </tbody>
+            </table>
+          {:else}
+            <pre class="m-0 whitespace-pre-wrap text-fg-1">{pretty(active.values)}</pre>
+          {/if}
+        {:else}
+          <div class="text-fg-3">No documents match the current filter.</div>
+        {/if}
+      </div>
+    </div>
+
+    <div class="border-t border-line-1 px-3 py-1.5 text-[10px] font-mono text-fg-3">
+      {docs.length} documents{collection ? ' · ' : ''}{collection ?? ''}
+    </div>
+  {/if}
+</div>