@reddb-io/ui 0.1.1

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

@@ -0,0 +1,94 @@
+import { mount, unmount } from "svelte";
+import appCss from "../../app.css?inline";
+import ShadowDomSpikeCore from "./ShadowDomSpikeCore.svelte";
+
+const shadowHostCss = `
+:host {
+  display: block;
+  min-height: 720px;
+  color-scheme: dark;
+  contain: content;
+  font-family: var(--font-sans);
+}
+
+:host,
+: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;
+}
+
+.red-ui-shadow-mount {
+  min-height: 720px;
+  background: var(--color-bg-0);
+  color: var(--color-fg-0);
+  font-family: var(--font-sans);
+  font-size: 13px;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+`;
+
+export type ShadowDomSpikeMount = {
+  shadowRoot: ShadowRoot;
+  portalTarget: HTMLElement;
+  destroy: () => void;
+};
+
+export function mountShadowDomSpike(host: HTMLElement): ShadowDomSpikeMount {
+  host.setAttribute("data-theme", "dark");
+
+  const shadowRoot = host.shadowRoot ?? host.attachShadow({ mode: "open" });
+  shadowRoot.textContent = "";
+
+  const style = document.createElement("style");
+  style.textContent = `${appCss}\n${shadowHostCss}`;
+
+  const mountTarget = document.createElement("div");
+  mountTarget.className = "red-ui-shadow-mount";
+
+  const portalTarget = document.createElement("div");
+  portalTarget.setAttribute("data-red-ui-shadow-portal", "");
+
+  shadowRoot.append(style, mountTarget, portalTarget);
+
+  const instance = mount(ShadowDomSpikeCore, {
+    target: mountTarget,
+    props: { portalTarget },
+  });
+
+  return {
+    shadowRoot,
+    portalTarget,
+    destroy: () => {
+      unmount(instance);
+      shadowRoot.textContent = "";
+    },
+  };
+}

package/src/lib/shortcuts.ts

@@ -0,0 +1,22 @@
+export type ShortcutContext = 'Global' | 'Connection' | 'Workspace' | 'Editing'
+
+export interface Shortcut {
+  id: string
+  context: ShortcutContext
+  keys: string[]
+  label: string
+}
+
+/**
+ * Single source of truth for keyboard shortcuts shown in the `?` overlay.
+ * Only list shortcuts that are actually wired somewhere in the app.
+ */
+export const shortcuts: Shortcut[] = [
+  { id: 'palette', context: 'Global', keys: ['⌘', 'K'], label: 'Open command palette' },
+  { id: 'shortcuts', context: 'Global', keys: ['?'], label: 'Show keyboard shortcuts' },
+  { id: 'new-query', context: 'Global', keys: ['⌘', 'T'], label: 'New query' },
+  { id: 'open-connect', context: 'Connection', keys: ['⌘', '⇧', 'C'], label: 'Open Connect dropdown' },
+  { id: 'dismiss', context: 'Editing', keys: ['Esc'], label: 'Cancel / dismiss overlay or palette' },
+]
+
+export const shortcutContexts: ShortcutContext[] = ['Global', 'Connection', 'Workspace', 'Editing']

package/src/lib/surface.ts

@@ -0,0 +1,80 @@
+// Surface detection + boot gate (#21, ADR-0001). red-ui is one Core delivered
+// by three Surfaces; the boot gate must be Surface-aware so a credential-less
+// Surface is never blocked behind the master-password vault.
+//
+//   - embedded   — the Embeddable Lib / MCP App, running inside a host that
+//                  owns auth (or a local, no-secret connection). Persists
+//                  nothing and boots straight to data.
+//   - standalone — the Tauri desktop app. Keeps its vault (the OS keychain,
+//                  which unlocks automatically — "vault unlock as before").
+//   - web        — the hosted PWA. Persists only target labels; secrets are
+//                  session-only and are never restored from storage.
+
+export type Surface = "embedded" | "standalone" | "web";
+
+/** Runtime signals the Surface is derived from (pure — injectable for tests). */
+export interface SurfaceSignals {
+  /** Running inside the Tauri shell. */
+  tauri: boolean;
+  /** Rendered inside a cross-document frame (embedded in a host page). */
+  inFrame: boolean;
+  /** The MCP App boot flag (`?mcp=1`) is present. */
+  mcp: boolean;
+  /** The importable Embeddable Lib marked this page before loading Core. */
+  embedLib: boolean;
+}
+
+/** Pure Surface decision from runtime signals. */
+export function surfaceFrom({
+  tauri,
+  inFrame,
+  mcp,
+  embedLib,
+}: SurfaceSignals): Surface {
+  if (tauri) return "standalone";
+  if (inFrame || mcp || embedLib) return "embedded";
+  return "web";
+}
+
+/** Detect the Surface from the live browser globals. Defaults to `web` in SSR. */
+export function detectSurface(): Surface {
+  if (typeof window === "undefined") return "web";
+  const tauri = "__TAURI_INTERNALS__" in window || "__TAURI__" in window;
+  let inFrame = false;
+  try {
+    inFrame = window.self !== window.top;
+  } catch {
+    // Cross-origin parent access throws — that itself means we're framed.
+    inFrame = true;
+  }
+  const mcp =
+    typeof location !== "undefined" &&
+    new URLSearchParams(location.search).has("mcp");
+  const embedLib = window.__RED_UI_EMBED_SURFACE__ === true;
+  return surfaceFrom({ tauri, inFrame, mcp, embedLib });
+}
+
+/**
+ * The initial lock state for a Surface (#21). `hasSecret` is whether encrypted
+ * credentials already exist in a vault.
+ *
+ * - embedded → never locked (credential-less; the host owns auth).
+ * - standalone → locked initially; the Tauri keychain unlocks it (as before).
+ * - web → never locked for saved credentials; persisted web history is labels only.
+ */
+export function bootGateLocked(surface: Surface, hasSecret: boolean): boolean {
+  switch (surface) {
+    case "embedded":
+      return false;
+    case "standalone":
+      return true;
+    case "web":
+      return false;
+  }
+}
+
+declare global {
+  interface Window {
+    __RED_UI_EMBED_SURFACE__?: boolean;
+  }
+}

package/src/lib/tabs.svelte.ts

@@ -0,0 +1,115 @@
+// ResultsPane tab state — Svelte 5 runes store.
+//
+// Each tab is keyed on (kind, key) so the same collection always
+// collapses to a single tab; Cmd+click bypasses that by minting a fresh
+// id so a duplicate tab opens.
+
+import type { Capability } from './renderers'
+
+export type TabKind = 'collection' | 'query' | 'live-changes' | 'welcome'
+
+export interface Tab {
+  /** Unique within the pane. Stable when re-focusing existing tabs. */
+  id: string
+  kind: TabKind
+  /** Display label in the tab header. */
+  label: string
+  /** Stable identity for collapsing duplicates (collection name, query hash). */
+  key: string
+  /** Optional capability hint forwarded to the renderer registry. */
+  capability?: Capability
+  /** URL-level collection subpage (`graph`, `svg`, `table`, `json`, …). */
+  subpage?: string
+  /** Renderer override (slice #9 wires the UI; the field exists today). */
+  overrideCapability?: Capability
+  /** Show reddb system fields (rid, collection, kind, tenant, …) as a
+   * prefix block ahead of user columns. Default false so the table shows
+   * what the user wrote. */
+  showSystemColumns?: boolean
+}
+
+function uid(): string {
+  // Small, debug-friendly id. Crypto.randomUUID is overkill for in-pane state.
+  return Math.random().toString(36).slice(2, 10)
+}
+
+class TabsStore {
+  tabs = $state<Tab[]>([])
+  activeId = $state<string | null>(null)
+
+  active = $derived(this.tabs.find((t) => t.id === this.activeId) ?? null)
+
+  /**
+   * Open or focus a tab.
+   * - If `forceNew` is false (default) and a tab with the same (kind,key)
+   *   exists, focus that tab. Otherwise add a new one and focus it.
+   * - If `forceNew` is true, always mint a fresh tab id.
+   */
+  open(spec: Omit<Tab, 'id'>, forceNew = false): Tab {
+    if (!forceNew) {
+      const existing = this.tabs.find((t) => t.kind === spec.kind && t.key === spec.key)
+      if (existing) {
+        const updated = { ...existing, ...spec, id: existing.id }
+        this.tabs = this.tabs.map((t) =>
+          t === existing ? updated : t,
+        )
+        this.activeId = existing.id
+        return updated
+      }
+    }
+    const tab: Tab = { ...spec, id: uid() }
+    this.tabs = [...this.tabs, tab]
+    this.activeId = tab.id
+    return tab
+  }
+
+  focus(id: string): void {
+    if (this.tabs.some((t) => t.id === id)) this.activeId = id
+  }
+
+  /**
+   * Close a tab. Focus moves to the previously active tab if it still
+   * exists, otherwise to the neighbour on the left, otherwise null.
+   * `previousActiveId` lets the caller pass a remembered focus so close
+   * → reopen → close returns to whatever was focused before the closing.
+   */
+  close(id: string, previousActiveId?: string | null): void {
+    const idx = this.tabs.findIndex((t) => t.id === id)
+    if (idx < 0) return
+    const wasActive = this.activeId === id
+    this.tabs = this.tabs.filter((t) => t.id !== id)
+    if (wasActive) {
+      if (previousActiveId && this.tabs.some((t) => t.id === previousActiveId)) {
+        this.activeId = previousActiveId
+      } else if (this.tabs.length === 0) {
+        this.activeId = null
+      } else {
+        const fallback = this.tabs[Math.max(0, idx - 1)]
+        this.activeId = fallback?.id ?? null
+      }
+    }
+  }
+
+  rename(id: string, label: string): void {
+    this.tabs = this.tabs.map((t) => (t.id === id ? { ...t, label } : t))
+  }
+
+  setOverride(id: string, capability: Capability | undefined): void {
+    this.tabs = this.tabs.map((t) =>
+      t.id === id ? { ...t, overrideCapability: capability } : t,
+    )
+  }
+
+  setShowSystem(id: string, show: boolean): void {
+    this.tabs = this.tabs.map((t) =>
+      t.id === id ? { ...t, showSystemColumns: show } : t,
+    )
+  }
+
+  clear(): void {
+    this.tabs = []
+    this.activeId = null
+  }
+}
+
+export const tabs = new TabsStore()

package/src/lib/theme.svelte.ts

@@ -0,0 +1,63 @@
+export type Theme = "light" | "dark";
+
+const STORAGE_KEY = "red-ui-theme";
+const DEFAULT: Theme = "light";
+
+interface ThemeInitOptions {
+  target?: HTMLElement | null;
+  persist?: boolean;
+  initial?: Theme;
+}
+
+function read(
+  target: HTMLElement | null,
+  persist: boolean,
+  initial?: Theme
+): Theme {
+  const scoped = target?.dataset.theme;
+  if (scoped === "dark" || scoped === "light") return scoped;
+  if (!persist) return initial ?? DEFAULT;
+  if (typeof localStorage === "undefined") return initial ?? DEFAULT;
+  const v = localStorage.getItem(STORAGE_KEY);
+  return v === "dark" || v === "light" ? v : (initial ?? DEFAULT);
+}
+
+function apply(t: Theme, target: HTMLElement | null) {
+  if (target) {
+    target.dataset.theme = t;
+    return;
+  }
+  if (typeof document !== "undefined")
+    document.documentElement.dataset.theme = t;
+}
+
+function persist(t: Theme, enabled: boolean) {
+  if (!enabled) return;
+  if (typeof localStorage === "undefined") return;
+  localStorage.setItem(STORAGE_KEY, t);
+}
+
+class ThemeStore {
+  current = $state<Theme>(DEFAULT);
+  target: HTMLElement | null = null;
+  persistTheme = true;
+
+  init(opts: ThemeInitOptions = {}) {
+    this.target = opts.target ?? null;
+    this.persistTheme = opts.persist ?? true;
+    this.current = read(this.target, this.persistTheme, opts.initial);
+    apply(this.current, this.target);
+  }
+
+  set(t: Theme) {
+    this.current = t;
+    apply(t, this.target);
+    persist(t, this.persistTheme);
+  }
+
+  toggle() {
+    this.set(this.current === "dark" ? "light" : "dark");
+  }
+}
+
+export const theme = new ThemeStore();