@reddb-io/ui 0.1.1 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reddb-io/ui",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "private": false,
   "description": "RedDB UI components and standalone web application.",
   "type": "module",
@@ -45,8 +45,10 @@
     "access": "public"
   },
   "dependencies": {
+    "@aflsolutions/graphology-communities-leiden": "^1.1.1",
     "@fontsource-variable/inter": "^5.2.8",
     "@fontsource-variable/jetbrains-mono": "^5.2.8",
+    "@sigma/edge-curve": "^3.1.0",
     "@sigma/node-border": "^3.0.0",
     "@tauri-apps/api": "^2.5.0",
     "@xyflow/svelte": "^1.2.0",
@@ -59,8 +61,8 @@
     "sigma": "^3.0.3",
     "tailwind-merge": "^3.6.0",
     "tailwind-variants": "^2.1.0",
-    "@reddb-io/ui-mcp": "0.1.1",
-    "@reddb-io/ui-kit": "0.1.1"
+    "@reddb-io/ui-kit": "0.2.0",
+    "@reddb-io/ui-mcp": "0.2.0"
   },
   "devDependencies": {
     "@sveltejs/adapter-static": "^3.0.8",

package/src/lib/Appearance.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+  // Appearance section (#75). Renders each registered skin as a live preview
+  // card — a mini-mockup painted with that skin's *own* derived tokens — and
+  // applies the skin on click. Selection persists across reloads via the skin
+  // store. Dark-only: there is no light/system switch here.
+  import { Check } from 'lucide-svelte'
+  import PageHeader from '$lib/PageHeader.svelte'
+  import { SKINS, skinToCssVars, type Skin } from '$lib/skins/skins'
+  import { skins } from '$lib/skins/skins.svelte'
+
+  // Each preview is painted with the skin's own custom properties so the card
+  // is a faithful, self-contained swatch of the palette — `color-mix` ramps
+  // resolve in the browser exactly as they would once applied.
+  function previewStyle(skin: Skin): string {
+    return Object.entries(skinToCssVars(skin))
+      .map(([k, v]) => `${k}: ${v}`)
+      .join('; ')
+  }
+
+  const selected = $derived(skins.current.name)
+</script>
+
+<div class="h-full overflow-auto bg-bg-0 p-6 text-fg-1">
+  <PageHeader
+    eyebrow="Settings"
+    title="Appearance"
+    subtitle="Pick a skin. Surfaces are derived from a single seed; the accent stays surgical. Dark only."
+  />
+
+  <div class="grid grid-cols-[repeat(auto-fill,minmax(260px,1fr))] gap-4 max-w-4xl">
+    {#each SKINS as skin (skin.name)}
+      {@const active = skin.name === selected}
+      <button
+        type="button"
+        onclick={() => skins.select(skin.name)}
+        aria-pressed={active}
+        class="group text-left rounded-lg border bg-bg-1 p-3 transition-colors {active
+          ? 'border-accent'
+          : 'border-line-2 hover:border-line-3'}"
+      >
+        <!-- Mini-mockup, painted in the skin's own tokens -->
+        <div
+          class="rounded-md overflow-hidden border border-line-1"
+          style={previewStyle(skin)}
+        >
+          <div class="bg-bg-0 p-3">
+            <!-- faux topbar -->
+            <div class="flex items-center gap-1.5 mb-2.5">
+              <span class="size-2 rounded-full" style="background: var(--color-accent)"></span>
+              <span class="h-1.5 w-12 rounded-full bg-bg-3"></span>
+              <span class="ml-auto h-1.5 w-6 rounded-full bg-bg-2"></span>
+            </div>
+            <!-- faux card with strips -->
+            <div class="rounded-md bg-bg-1 border border-line-2 p-2.5">
+              <div class="h-1.5 w-2/3 rounded-full bg-fg-2 mb-2"></div>
+              <div class="h-1.5 w-full rounded-full bg-bg-3 mb-1.5"></div>
+              <div class="h-1.5 w-4/5 rounded-full bg-bg-3 mb-2.5"></div>
+              <div class="flex items-center gap-1.5">
+                <span
+                  class="h-4 w-12 rounded"
+                  style="background: var(--color-accent)"
+                ></span>
+                <span class="h-4 w-8 rounded bg-bg-2 border border-line-2"></span>
+              </div>
+            </div>
+          </div>
+          <!-- surface ramp strip: bg-0..bg-3 -->
+          <div class="flex h-2.5">
+            <span class="flex-1 bg-bg-0"></span>
+            <span class="flex-1 bg-bg-1"></span>
+            <span class="flex-1 bg-bg-2"></span>
+            <span class="flex-1 bg-bg-3"></span>
+          </div>
+        </div>
+
+        <div class="flex items-center gap-2 mt-3">
+          <span class="type-h2 text-fg-0">{skin.label}</span>
+          {#if active}
+            <span
+              class="inline-flex items-center gap-1 rounded-full bg-accent-soft px-2 py-0.5 text-[10px] font-mono uppercase tracking-wider text-accent"
+            >
+              <Check class="size-3" /> Active
+            </span>
+          {/if}
+        </div>
+        <p class="type-caption m-0 mt-1">{skin.description}</p>
+      </button>
+    {/each}
+  </div>
+</div>

package/src/lib/CommandPalette.svelte

@@ -31,6 +31,8 @@
     { id: 'collections', group: 'navigate', label: 'Open collections', hint: '/collections', run: () => navigate({ view: 'collections' }) },
     { id: 'topology', group: 'navigate', label: 'Open cluster', hint: '/cluster', run: () => navigate({ view: 'cluster' }) },
     { id: 'security', group: 'navigate', label: 'Open security', hint: '/security', run: () => navigate({ view: 'security' }) },
+    { id: 'settings', group: 'navigate', label: 'Open settings', hint: '/settings', run: () => navigate({ view: 'settings' }) },
+    { id: 'appearance', group: 'navigate', label: 'Open appearance', hint: '/appearance', run: () => navigate({ view: 'appearance' }) },
 
     { id: 'new-query', group: 'data', label: 'New query', shortcut: '⌘T', run: () => { fire('red:new-query'); close() } },
 

package/src/lib/SettingsView.svelte

@@ -0,0 +1,322 @@
+<script lang="ts">
+  // Settings view — a data-driven, permission-aware config inspector.
+  //
+  // The sections, their curated keys, and the label/description/enum copy all
+  // live in `settings-sections` as DATA. This view does three things: reads the
+  // *real* config from `connection.client` (no mocks/fixtures), flattens it to
+  // dotted keys, and renders each curated key through `resolveControl` as a
+  // `ListRow`. When the connection is unreachable it falls back to EmptyState.
+  //
+  // Permission-aware by default: a key whose source endpoint is denied or
+  // unsupported is not greyed out — its control is absent, replaced by a small
+  // chip naming the missing grant (with the server's reason in the tooltip).
+  import {
+    SplitView,
+    NavItem,
+    SectionHeading,
+    Pill,
+    ListRow,
+    Kbd,
+  } from '@reddb-io/ui-kit'
+  import {
+    Settings2,
+    Database,
+    Network,
+    Plug,
+    Shield,
+    Search,
+    RefreshCw,
+    Lock,
+    Unplug,
+    type Icon,
+  } from 'lucide-svelte'
+  import PageHeader from '$lib/PageHeader.svelte'
+  import EmptyState from '$lib/EmptyState.svelte'
+  import { connection } from '$lib/connections.svelte'
+  import { activity } from '$lib/activity.svelte'
+  import {
+    SECTIONS,
+    resolveSection,
+    resolveControl,
+    sourceForKey,
+    flattenConfig,
+    type ControlDescriptor,
+    type SettingsSource,
+  } from '$lib/settings-sections'
+
+  const icons: Record<string, typeof Icon> = {
+    settings: Settings2,
+    database: Database,
+    network: Network,
+    plug: Plug,
+    shield: Shield,
+  }
+
+  // The grant a denied source is gated on — shown on the "absent" chip.
+  const GRANTS: Record<SettingsSource, string> = {
+    stats: 'stats:read',
+    cluster: 'cluster:status',
+    capabilities: 'capabilities',
+    session: 'auth:whoami',
+  }
+
+  let activeId = $state(SECTIONS[0].id)
+  const active = $derived(resolveSection(activeId))
+
+  // Flattened live config and, per source, the reason its grant is absent
+  // (null ⇒ available). Both are rebuilt atomically on every refresh.
+  let values = $state<Record<string, unknown>>({})
+  let denied = $state<Record<SettingsSource, string | null>>({
+    stats: null,
+    cluster: null,
+    capabilities: null,
+    session: null,
+  })
+  let loading = $state(false)
+
+  const connected = $derived(connection.connected)
+  const activeUrl = $derived(connection.active.url)
+
+  async function refresh() {
+    const client = connection.client
+    if (!client || !connected) {
+      values = {}
+      return
+    }
+    loading = true
+    const next: Record<string, unknown> = {}
+    const nextDenied: Record<SettingsSource, string | null> = {
+      stats: null,
+      cluster: null,
+      capabilities: null,
+      session: null,
+    }
+
+    // /capabilities is the negotiation itself — always available from the store.
+    Object.assign(next, flattenConfig({ capabilities: connection.capabilities }))
+
+    try {
+      const stats = await activity.track('settings · stats', () => client.stats())
+      Object.assign(next, flattenConfig(stats as unknown as Record<string, unknown>))
+    } catch (e) {
+      nextDenied.stats = (e as Error).message
+    }
+
+    // Cluster topology is capability-gated: if the server can't honour
+    // /cluster/status, those keys are absent + explained, never faked.
+    if (!connection.capabilities.clusterStatus) {
+      nextDenied.cluster = 'Server does not expose /cluster/status.'
+    } else {
+      try {
+        const cluster = await activity.track('settings · cluster', () =>
+          client.clusterStatus(),
+        )
+        Object.assign(next, flattenConfig(cluster as unknown as Record<string, unknown>))
+      } catch (e) {
+        nextDenied.cluster = (e as Error).message
+      }
+    }
+
+    try {
+      const session = await activity.track('settings · whoami', () => client.whoami())
+      Object.assign(
+        next,
+        flattenConfig({ session: session as unknown as Record<string, unknown> }),
+      )
+    } catch (e) {
+      nextDenied.session = (e as Error).message
+    }
+
+    values = next
+    denied = nextDenied
+    loading = false
+  }
+
+  $effect(() => {
+    void activeUrl
+    void connected
+    refresh()
+  })
+
+  type RenderRow =
+    | { type: 'value'; key: string; label: string; control: ControlDescriptor; value: unknown }
+    | { type: 'denied'; key: string; label: string; reason: string; grant: string }
+
+  // Resolve the active section's curated keys to render rows. A key whose
+  // source is denied becomes a "denied" row (absent control + explanation); a
+  // key with a live value becomes a "value" row; a key the server simply does
+  // not report is dropped (graceful degradation — no empty placeholder).
+  const rows = $derived.by<RenderRow[]>(() => {
+    const out: RenderRow[] = []
+    for (const key of active.keys) {
+      const src = sourceForKey(key)
+      const reason = denied[src]
+      const label = resolveControl(key).label
+      if (reason) {
+        out.push({ type: 'denied', key, label, reason, grant: GRANTS[src] })
+      } else if (key in values) {
+        out.push({
+          type: 'value',
+          key,
+          label,
+          control: resolveControl(key, values[key]),
+          value: values[key],
+        })
+      }
+    }
+    return out
+  })
+
+  function formatBytes(n: number): string {
+    if (!Number.isFinite(n)) return String(n)
+    const units = ['B', 'KB', 'MB', 'GB', 'TB']
+    let v = n
+    let i = 0
+    while (v >= 1024 && i < units.length - 1) {
+      v /= 1024
+      i++
+    }
+    return `${i === 0 ? v : v.toFixed(1)} ${units[i]}`
+  }
+
+  function formatValue(control: ControlDescriptor, value: unknown): string {
+    if (control.kind === 'number' && control.key.endsWith('_bytes')) {
+      return formatBytes(Number(value))
+    }
+    return String(value)
+  }
+
+  // Reuse the global command palette as the search surface — the same ⌘K idiom
+  // the topbar uses, so Esc-to-close comes for free from the palette overlay.
+  function openPalette() {
+    window.dispatchEvent(
+      new KeyboardEvent('keydown', { key: 'k', metaKey: true, ctrlKey: true, bubbles: true }),
+    )
+  }
+</script>
+
+{#if !connected}
+  <div class="h-full overflow-auto bg-bg-0 p-6">
+    <PageHeader
+      eyebrow="Settings"
+      title="Settings"
+      subtitle="Live configuration for the active reddb connection."
+    />
+    <EmptyState
+      icon={Unplug}
+      title="No active connection"
+      message="Connect to a reddb instance to inspect its live configuration."
+      hint="red serve"
+    />
+  </div>
+{:else}
+  <SplitView searchShortcut={null}>
+    {#snippet search()}
+      <button
+        type="button"
+        onclick={openPalette}
+        class="flex h-7 w-full items-center gap-2 rounded-md border border-line-2 bg-bg-2 px-2.5 text-xs text-fg-2 transition-colors hover:border-line-3 hover:text-fg-1"
+      >
+        <Search class="size-3.5 text-fg-3" />
+        <span class="flex-1 text-left">Search settings</span>
+        <span class="inline-flex gap-0.5"><Kbd>⌘</Kbd><Kbd>K</Kbd></span>
+      </button>
+    {/snippet}
+
+    {#snippet nav()}
+      <nav class="grid gap-0.5 p-2">
+        {#each SECTIONS as section (section.id)}
+          {@const SectionIcon = icons[section.icon] ?? Settings2}
+          <NavItem
+            label={section.label}
+            active={section.id === active.id}
+            onclick={() => (activeId = section.id)}
+          >
+            {#snippet icon()}<SectionIcon class="size-3.5" />{/snippet}
+          </NavItem>
+        {/each}
+      </nav>
+    {/snippet}
+
+    {#snippet footer()}
+      <div class="px-3 py-2.5 text-[11px] text-fg-3">
+        Live from <span class="font-mono text-fg-2">{activeUrl}</span>.
+      </div>
+    {/snippet}
+
+    {#snippet content()}
+      {@const SectionIcon = icons[active.icon] ?? Settings2}
+      <div class="p-6">
+        <PageHeader eyebrow="Settings" title={active.label} subtitle={active.blurb}>
+          {#snippet actions()}
+            <button
+              type="button"
+              onclick={refresh}
+              disabled={loading}
+              class="inline-flex h-7 items-center gap-1.5 rounded-md border border-line-2 bg-bg-2 px-2.5 text-[11px] font-mono text-fg-1 hover:border-line-3 hover:text-fg-0 disabled:cursor-not-allowed disabled:opacity-40"
+            >
+              <RefreshCw class={loading ? 'size-3.5 animate-spin' : 'size-3.5'} />
+              refresh
+            </button>
+          {/snippet}
+        </PageHeader>
+
+        <section class="mb-6">
+          <SectionHeading title={active.label} class="mb-2">
+            {#snippet icon()}<SectionIcon class="size-3.5" />{/snippet}
+            {#snippet meta()}<Pill>{rows.length}</Pill>{/snippet}
+          </SectionHeading>
+
+          {#if rows.length === 0}
+            <div
+              class="rounded-lg border border-dashed border-line-1 bg-bg-1 px-3 py-6 text-center text-[12px] text-fg-3"
+            >
+              This server reports nothing for these keys.
+            </div>
+          {:else}
+            <div
+              class="divide-y divide-line-1 overflow-hidden rounded-lg border border-line-1 bg-bg-1"
+            >
+              {#each rows as row (row.key)}
+                {#if row.type === 'denied'}
+                  <ListRow title={row.label} hint={row.key}>
+                    {#snippet action()}
+                      <span
+                        class="inline-flex items-center gap-1.5 rounded-md border border-line-2 bg-bg-2 px-2 py-1 text-[11px] font-mono text-fg-3"
+                        title={row.reason}
+                      >
+                        <Lock class="size-3" />
+                        requires {row.grant}
+                      </span>
+                    {/snippet}
+                  </ListRow>
+                {:else}
+                  <ListRow
+                    title={row.label}
+                    description={row.control.description}
+                    hint={row.key}
+                  >
+                    {#snippet action()}
+                      {#if row.control.kind === 'boolean'}
+                        <Pill tone={row.value ? 'accent' : 'muted'}>{row.value ? 'on' : 'off'}</Pill>
+                      {:else if row.control.kind === 'enum'}
+                        <span
+                          class="font-mono text-[12px] text-accent"
+                          title={`Options: ${row.control.options?.join(', ')}`}
+                        >{row.value}</span>
+                      {:else}
+                        <span class="font-mono text-[12px] text-fg-1"
+                          >{formatValue(row.control, row.value)}</span
+                        >
+                      {/if}
+                    {/snippet}
+                  </ListRow>
+                {/if}
+              {/each}
+            </div>
+          {/if}
+        </section>
+      </div>
+    {/snippet}
+  </SplitView>
+{/if}

package/src/lib/Topbar.svelte

@@ -2,7 +2,7 @@
   import { Kbd } from '@reddb-io/ui-kit'
   import ConnectDropdown from './ConnectDropdown.svelte'
   import ActivityIndicator from './ActivityIndicator.svelte'
-  import { Search, Sun, Moon, Network, Database, FileCode2, Shield } from 'lucide-svelte'
+  import { Search, Sun, Moon, Network, Database, FileCode2, Shield, Settings2 } from 'lucide-svelte'
   import { theme } from './theme.svelte'
   import { useRouter } from './router.svelte'
 
@@ -18,6 +18,7 @@
   const onCollections = $derived(router.view === 'collections')
   const onCluster = $derived(router.view === 'cluster')
   const onSecurity = $derived(router.view === 'security')
+  const onSettings = $derived(router.view === 'settings')
 </script>
 
 <header class="h-11 flex items-center justify-between px-3.5 bg-bg-1/80 backdrop-blur-md border-b border-line-1 relative z-10">
@@ -89,6 +90,19 @@
         <Shield class="size-3.5" />
         <span>Security</span>
       </a>
+      <a
+        href={router.href({ view: 'settings' })}
+        onclick={(e) => router.go({ view: 'settings' }, e)}
+        title="Settings"
+        aria-current={onSettings ? 'page' : undefined}
+        class={[
+          'inline-flex items-center gap-1.5 h-7 px-2 rounded-md text-xs no-underline transition-colors',
+          onSettings ? 'bg-bg-2 text-fg-0' : 'text-fg-2 hover:text-fg-0 hover:bg-bg-2',
+        ].join(' ')}
+      >
+        <Settings2 class="size-3.5" />
+        <span>Settings</span>
+      </a>
     </nav>
   </div>
 

package/src/lib/Workspace.svelte

@@ -15,9 +15,12 @@
   import CollectionsView from './CollectionsView.svelte'
   import ClusterView from './ClusterView.svelte'
   import SecurityView from './SecurityView.svelte'
+  import SettingsView from './SettingsView.svelte'
+  import Appearance from './Appearance.svelte'
   import { connection, setConnectionProvider } from './connections.svelte'
   import { runQueryPreferStream, type ConnectionProvider } from '#reddb'
   import { theme, type Theme } from './theme.svelte'
+  import { skins } from './skins/skins.svelte'
   import { secureStore } from './secureStore.svelte'
   import { pendingChanges, buildUpdateSql, type CommitOutcome } from './pending-changes.svelte'
   import { queryTabs } from './query-tabs.svelte'
@@ -63,7 +66,7 @@
 
   function navigateToBootRoute(route: string) {
     const legacyView = route as View
-    if (legacyView === 'query' || legacyView === 'collections' || legacyView === 'cluster' || legacyView === 'security') {
+    if (legacyView === 'query' || legacyView === 'collections' || legacyView === 'cluster' || legacyView === 'security' || legacyView === 'settings' || legacyView === 'appearance') {
       router.go({ view: legacyView }, undefined, true)
       return
     }
@@ -133,6 +136,12 @@
   // svelte-ignore state_referenced_locally
   theme.init({ target: themeTarget ?? null, persist: persistTheme, initial: initialTheme })
 
+  // Skin-as-data (#75): apply the persisted skin's seed-derived custom
+  // properties over the active theme. Scoped to the same target the theme
+  // uses, so an embedded host's shadow root is skinned, not the document.
+  // svelte-ignore state_referenced_locally
+  skins.init(themeTarget ?? null)
+
   // Hard lock gate: while the secure store is locked, no automatic network
   // traffic should fire — probing the configured URL would leak its existence
   // and shape. Additionally (#21, acceptance #4) no traffic fires until a real
@@ -235,6 +244,10 @@
         <ClusterView />
       {:else if router.view === 'security'}
         <SecurityView />
+      {:else if router.view === 'settings'}
+        <SettingsView />
+      {:else if router.view === 'appearance'}
+        <Appearance />
       {:else}
         <CollectionsView />
       {/if}

package/src/lib/index.ts

@@ -15,6 +15,7 @@ export { default as QueryEditor } from "./QueryEditor.svelte";
 export { default as ResultsPane } from "./ResultsPane.svelte";
 export { default as SchemaTree } from "./SchemaTree.svelte";
 export { default as SecurityView } from "./SecurityView.svelte";
+export { default as SettingsView } from "./SettingsView.svelte";
 export { default as ShortcutOverlay } from "./ShortcutOverlay.svelte";
 export { default as Splash } from "./Splash.svelte";
 export { default as StatusBar } from "./StatusBar.svelte";
@@ -33,6 +34,7 @@ export type { Capability as CollectionCapability } from "./capability";
 export * from "./collection-catalog";
 export * from "./collection-pages";
 export * from "./router.svelte";
+export * from "./settings-sections";
 export * from "./cn";
 export * from "./connections.svelte";
 export * from "./shortcuts";