@reddb-io/ui 0.1.1

package/dist/embed/ui.css

@@ -0,0 +1 @@
+.svelte-flow{direction:ltr;--xy-edge-stroke-default: #b1b1b7;--xy-edge-stroke-width-default: 1;--xy-edge-stroke-selected-default: #555;--xy-connectionline-stroke-default: #b1b1b7;--xy-connectionline-stroke-width-default: 1;--xy-attribution-background-color-default: rgba(255, 255, 255, .5);--xy-minimap-background-color-default: #fff;--xy-minimap-mask-background-color-default: rgba(240, 240, 240, .6);--xy-minimap-mask-stroke-color-default: transparent;--xy-minimap-mask-stroke-width-default: 1;--xy-minimap-node-background-color-default: #e2e2e2;--xy-minimap-node-stroke-color-default: transparent;--xy-minimap-node-stroke-width-default: 2;--xy-background-color-default: transparent;--xy-background-pattern-dots-color-default: #91919a;--xy-background-pattern-lines-color-default: #eee;--xy-background-pattern-cross-color-default: #e2e2e2;background-color:var(--xy-background-color, var(--xy-background-color-default));--xy-node-color-default: inherit;--xy-node-border-default: 1px solid #1a192b;--xy-node-background-color-default: #fff;--xy-node-group-background-color-default: rgba(240, 240, 240, .25);--xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(0, 0, 0, .08);--xy-node-boxshadow-selected-default: 0 0 0 .5px #1a192b;--xy-node-border-radius-default: 3px;--xy-handle-background-color-default: #1a192b;--xy-handle-border-color-default: #fff;--xy-selection-background-color-default: rgba(0, 89, 220, .08);--xy-selection-border-default: 1px dotted rgba(0, 89, 220, .8);--xy-controls-button-background-color-default: #fefefe;--xy-controls-button-background-color-hover-default: #f4f4f4;--xy-controls-button-color-default: inherit;--xy-controls-button-color-hover-default: inherit;--xy-controls-button-border-color-default: #eee;--xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, .08);--xy-edge-label-background-color-default: #ffffff;--xy-edge-label-color-default: inherit;--xy-resize-background-color-default: #3367d9}.svelte-flow.dark{--xy-edge-stroke-default: #3e3e3e;--xy-edge-stroke-width-default: 1;--xy-edge-stroke-selected-default: #727272;--xy-connectionline-stroke-default: #b1b1b7;--xy-connectionline-stroke-width-default: 1;--xy-attribution-background-color-default: rgba(150, 150, 150, .25);--xy-minimap-background-color-default: #141414;--xy-minimap-mask-background-color-default: rgba(60, 60, 60, .6);--xy-minimap-mask-stroke-color-default: transparent;--xy-minimap-mask-stroke-width-default: 1;--xy-minimap-node-background-color-default: #2b2b2b;--xy-minimap-node-stroke-color-default: transparent;--xy-minimap-node-stroke-width-default: 2;--xy-background-color-default: #141414;--xy-background-pattern-dots-color-default: #777;--xy-background-pattern-lines-color-default: #777;--xy-background-pattern-cross-color-default: #777;--xy-node-color-default: #f8f8f8;--xy-node-border-default: 1px solid #3c3c3c;--xy-node-background-color-default: #1e1e1e;--xy-node-group-background-color-default: rgba(240, 240, 240, .25);--xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(255, 255, 255, .08);--xy-node-boxshadow-selected-default: 0 0 0 .5px #999;--xy-handle-background-color-default: #bebebe;--xy-handle-border-color-default: #1e1e1e;--xy-selection-background-color-default: rgba(200, 200, 220, .08);--xy-selection-border-default: 1px dotted rgba(200, 200, 220, .8);--xy-controls-button-background-color-default: #2b2b2b;--xy-controls-button-background-color-hover-default: #3e3e3e;--xy-controls-button-color-default: #f8f8f8;--xy-controls-button-color-hover-default: #fff;--xy-controls-button-border-color-default: #5b5b5b;--xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, .08);--xy-edge-label-background-color-default: #141414;--xy-edge-label-color-default: #f8f8f8}.svelte-flow__background{background-color:var(--xy-background-color-props, var(--xy-background-color, var(--xy-background-color-default)));pointer-events:none;z-index:-1}.svelte-flow__container{position:absolute;width:100%;height:100%;top:0;left:0}.svelte-flow__pane{z-index:1}.svelte-flow__pane.draggable{cursor:grab}.svelte-flow__pane.dragging{cursor:grabbing}.svelte-flow__pane.selection{cursor:pointer}.svelte-flow__viewport{transform-origin:0 0;z-index:2;pointer-events:none}.svelte-flow__renderer{z-index:4}.svelte-flow__selection{z-index:6}.svelte-flow__nodesselection-rect:focus,.svelte-flow__nodesselection-rect:focus-visible{outline:none}.svelte-flow__edge-path{stroke:var(--xy-edge-stroke, var(--xy-edge-stroke-default));stroke-width:var(--xy-edge-stroke-width, var(--xy-edge-stroke-width-default));fill:none}.svelte-flow__connection-path{stroke:var(--xy-connectionline-stroke, var(--xy-connectionline-stroke-default));stroke-width:var(--xy-connectionline-stroke-width, var(--xy-connectionline-stroke-width-default));fill:none}.svelte-flow .svelte-flow__edges{position:absolute}.svelte-flow .svelte-flow__edges svg{overflow:visible;position:absolute;pointer-events:none}.svelte-flow__edge{pointer-events:visibleStroke}.svelte-flow__edge.selectable{cursor:pointer}.svelte-flow__edge.animated path{stroke-dasharray:5;animation:dashdraw .5s linear infinite}.svelte-flow__edge.animated path.svelte-flow__edge-interaction{stroke-dasharray:none;animation:none}.svelte-flow__edge.inactive{pointer-events:none}.svelte-flow__edge.selected,.svelte-flow__edge:focus,.svelte-flow__edge:focus-visible{outline:none}.svelte-flow__edge.selected .svelte-flow__edge-path,.svelte-flow__edge.selectable:focus .svelte-flow__edge-path,.svelte-flow__edge.selectable:focus-visible .svelte-flow__edge-path{stroke:var(--xy-edge-stroke-selected, var(--xy-edge-stroke-selected-default))}.svelte-flow__edge-textwrapper{pointer-events:all}.svelte-flow__edge .svelte-flow__edge-text{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.svelte-flow__arrowhead polyline{stroke:var(--xy-edge-stroke, var(--xy-edge-stroke-default))}.svelte-flow__arrowhead polyline.arrowclosed{fill:var(--xy-edge-stroke, var(--xy-edge-stroke-default))}.svelte-flow__connection{pointer-events:none}.svelte-flow__connection .animated{stroke-dasharray:5;animation:dashdraw .5s linear infinite}svg.svelte-flow__connectionline{z-index:1001;overflow:visible;position:absolute}.svelte-flow__nodes{pointer-events:none;transform-origin:0 0}.svelte-flow__node{position:absolute;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:all;transform-origin:0 0;box-sizing:border-box;cursor:default}.svelte-flow__node.selectable{cursor:pointer}.svelte-flow__node.draggable{cursor:grab;pointer-events:all}.svelte-flow__node.draggable.dragging{cursor:grabbing}.svelte-flow__nodesselection{z-index:3;transform-origin:left top;pointer-events:none}.svelte-flow__nodesselection-rect{position:absolute;pointer-events:all;cursor:grab}.svelte-flow__handle{position:absolute;pointer-events:none;min-width:5px;min-height:5px;width:6px;height:6px;background-color:var(--xy-handle-background-color, var(--xy-handle-background-color-default));border:1px solid var(--xy-handle-border-color, var(--xy-handle-border-color-default));border-radius:100%}.svelte-flow__handle.connectingfrom{pointer-events:all}.svelte-flow__handle.connectionindicator{pointer-events:all;cursor:crosshair}.svelte-flow__handle-bottom{top:auto;left:50%;bottom:0;transform:translate(-50%,50%)}.svelte-flow__handle-top{top:0;left:50%;transform:translate(-50%,-50%)}.svelte-flow__handle-left{top:50%;left:0;transform:translate(-50%,-50%)}.svelte-flow__handle-right{top:50%;right:0;transform:translate(50%,-50%)}.svelte-flow__edgeupdater{cursor:move;pointer-events:all}.svelte-flow__pane.selection .svelte-flow__panel{pointer-events:none}.svelte-flow__panel{position:absolute;z-index:5;margin:15px}.svelte-flow__panel.top{top:0}.svelte-flow__panel.bottom{bottom:0}.svelte-flow__panel.top.center,.svelte-flow__panel.bottom.center{left:50%;transform:translate(-15px) translate(-50%)}.svelte-flow__panel.left{left:0}.svelte-flow__panel.right{right:0}.svelte-flow__panel.left.center,.svelte-flow__panel.right.center{top:50%;transform:translateY(-15px) translateY(-50%)}.svelte-flow__attribution{font-size:10px;background:var(--xy-attribution-background-color, var(--xy-attribution-background-color-default));padding:2px 3px;margin:0}.svelte-flow__attribution a{text-decoration:none;color:#999}@keyframes dashdraw{0%{stroke-dashoffset:10}}.svelte-flow__edgelabel-renderer{position:absolute;width:100%;height:100%;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;left:0;top:0}.svelte-flow__viewport-portal{position:absolute;width:100%;height:100%;left:0;top:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.svelte-flow__minimap{background:var( --xy-minimap-background-color-props, var(--xy-minimap-background-color, var(--xy-minimap-background-color-default)) )}.svelte-flow__minimap-svg{display:block}.svelte-flow__minimap-mask{fill:var( --xy-minimap-mask-background-color-props, var(--xy-minimap-mask-background-color, var(--xy-minimap-mask-background-color-default)) );stroke:var( --xy-minimap-mask-stroke-color-props, var(--xy-minimap-mask-stroke-color, var(--xy-minimap-mask-stroke-color-default)) );stroke-width:var( --xy-minimap-mask-stroke-width-props, var(--xy-minimap-mask-stroke-width, var(--xy-minimap-mask-stroke-width-default)) )}.svelte-flow__minimap-node{fill:var( --xy-minimap-node-background-color-props, var(--xy-minimap-node-background-color, var(--xy-minimap-node-background-color-default)) );stroke:var( --xy-minimap-node-stroke-color-props, var(--xy-minimap-node-stroke-color, var(--xy-minimap-node-stroke-color-default)) );stroke-width:var( --xy-minimap-node-stroke-width-props, var(--xy-minimap-node-stroke-width, var(--xy-minimap-node-stroke-width-default)) )}.svelte-flow__background-pattern.dots{fill:var( --xy-background-pattern-color-props, var(--xy-background-pattern-color, var(--xy-background-pattern-dots-color-default)) )}.svelte-flow__background-pattern.lines{stroke:var( --xy-background-pattern-color-props, var(--xy-background-pattern-color, var(--xy-background-pattern-lines-color-default)) )}.svelte-flow__background-pattern.cross{stroke:var( --xy-background-pattern-color-props, var(--xy-background-pattern-color, var(--xy-background-pattern-cross-color-default)) )}.svelte-flow__controls{display:flex;flex-direction:column;box-shadow:var(--xy-controls-box-shadow, var(--xy-controls-box-shadow-default))}.svelte-flow__controls.horizontal{flex-direction:row}.svelte-flow__controls-button{display:flex;justify-content:center;align-items:center;height:26px;width:26px;padding:4px;border:none;background:var(--xy-controls-button-background-color, var(--xy-controls-button-background-color-default));border-bottom:1px solid var( --xy-controls-button-border-color-props, var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default)) );color:var( --xy-controls-button-color-props, var(--xy-controls-button-color, var(--xy-controls-button-color-default)) );cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.svelte-flow__controls-button svg{width:100%;max-width:12px;max-height:12px;fill:currentColor}.svelte-flow__edge.updating .svelte-flow__edge-path{stroke:#777}.svelte-flow__edge-text{font-size:10px}.svelte-flow__node.selectable:focus,.svelte-flow__node.selectable:focus-visible{outline:none}.svelte-flow__node-input,.svelte-flow__node-default,.svelte-flow__node-output,.svelte-flow__node-group{padding:10px;border-radius:var(--xy-node-border-radius, var(--xy-node-border-radius-default));width:150px;font-size:12px;color:var(--xy-node-color, var(--xy-node-color-default));text-align:center;border:var(--xy-node-border, var(--xy-node-border-default));background-color:var(--xy-node-background-color, var(--xy-node-background-color-default))}.svelte-flow__node-input.selectable:hover,.svelte-flow__node-default.selectable:hover,.svelte-flow__node-output.selectable:hover,.svelte-flow__node-group.selectable:hover{box-shadow:var(--xy-node-boxshadow-hover, var(--xy-node-boxshadow-hover-default))}.svelte-flow__node-input.selectable.selected,.svelte-flow__node-input.selectable:focus,.svelte-flow__node-input.selectable:focus-visible,.svelte-flow__node-default.selectable.selected,.svelte-flow__node-default.selectable:focus,.svelte-flow__node-default.selectable:focus-visible,.svelte-flow__node-output.selectable.selected,.svelte-flow__node-output.selectable:focus,.svelte-flow__node-output.selectable:focus-visible,.svelte-flow__node-group.selectable.selected,.svelte-flow__node-group.selectable:focus,.svelte-flow__node-group.selectable:focus-visible{box-shadow:var(--xy-node-boxshadow-selected, var(--xy-node-boxshadow-selected-default))}.svelte-flow__node-group{background-color:var(--xy-node-group-background-color, var(--xy-node-group-background-color-default))}.svelte-flow__nodesselection-rect,.svelte-flow__selection{background:var(--xy-selection-background-color, var(--xy-selection-background-color-default));border:var(--xy-selection-border, var(--xy-selection-border-default))}.svelte-flow__nodesselection-rect:focus,.svelte-flow__nodesselection-rect:focus-visible,.svelte-flow__selection:focus,.svelte-flow__selection:focus-visible{outline:none}.svelte-flow__controls-button:hover{background:var( --xy-controls-button-background-color-hover-props, var(--xy-controls-button-background-color-hover, var(--xy-controls-button-background-color-hover-default)) );color:var( --xy-controls-button-color-hover-props, var(--xy-controls-button-color-hover, var(--xy-controls-button-color-hover-default)) )}.svelte-flow__controls-button:disabled{pointer-events:none}.svelte-flow__controls-button:disabled svg{fill-opacity:.4}.svelte-flow__controls-button:last-child{border-bottom:none}.svelte-flow__controls.horizontal .svelte-flow__controls-button{border-bottom:none;border-right:1px solid var( --xy-controls-button-border-color-props, var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default)) )}.svelte-flow__controls.horizontal .svelte-flow__controls-button:last-child{border-right:none}.svelte-flow__resize-control{position:absolute}.svelte-flow__resize-control.left,.svelte-flow__resize-control.right{cursor:ew-resize}.svelte-flow__resize-control.top,.svelte-flow__resize-control.bottom{cursor:ns-resize}.svelte-flow__resize-control.top.left,.svelte-flow__resize-control.bottom.right{cursor:nwse-resize}.svelte-flow__resize-control.bottom.left,.svelte-flow__resize-control.top.right{cursor:nesw-resize}.svelte-flow__resize-control.handle{width:5px;height:5px;border:1px solid #fff;border-radius:1px;background-color:var(--xy-resize-background-color, var(--xy-resize-background-color-default));translate:-50% -50%}.svelte-flow__resize-control.handle.left{left:0;top:50%}.svelte-flow__resize-control.handle.right{left:100%;top:50%}.svelte-flow__resize-control.handle.top{left:50%;top:0}.svelte-flow__resize-control.handle.bottom{left:50%;top:100%}.svelte-flow__resize-control.handle.top.left,.svelte-flow__resize-control.handle.bottom.left{left:0}.svelte-flow__resize-control.handle.top.right,.svelte-flow__resize-control.handle.bottom.right{left:100%}.svelte-flow__resize-control.line{border-color:var(--xy-resize-background-color, var(--xy-resize-background-color-default));border-width:0;border-style:solid}.svelte-flow__resize-control.line.left,.svelte-flow__resize-control.line.right{width:1px;transform:translate(-50%);top:0;height:100%}.svelte-flow__resize-control.line.left{left:0;border-left-width:1px}.svelte-flow__resize-control.line.right{left:100%;border-right-width:1px}.svelte-flow__resize-control.line.top,.svelte-flow__resize-control.line.bottom{height:1px;transform:translateY(-50%);left:0;width:100%}.svelte-flow__resize-control.line.top{top:0;border-top-width:1px}.svelte-flow__resize-control.line.bottom{border-bottom-width:1px;top:100%}.svelte-flow__edge-label{text-align:center;position:absolute;padding:2px;font-size:10px;color:var(--xy-edge-label-color, var(--xy-edge-label-color-default));background:var(--xy-edge-label-background-color, var(--xy-edge-label-background-color-default))}.svelte-flow__container{-webkit-user-select:none;-moz-user-select:none;user-select:none}

package/package.json

@@ -0,0 +1,101 @@
+{
+  "name": "@reddb-io/ui",
+  "version": "0.1.1",
+  "private": false,
+  "description": "RedDB UI components and standalone web application.",
+  "type": "module",
+  "bin": {
+    "red-ui": "./bin/red-ui.js"
+  },
+  "svelte": "./src/lib/index.ts",
+  "imports": {
+    "#reddb": {
+      "types": "./src/lib/reddb/index.ts",
+      "default": "./src/lib/reddb/index.ts"
+    }
+  },
+  "exports": {
+    ".": {
+      "svelte": "./src/lib/index.ts",
+      "types": "./src/lib/index.ts"
+    },
+    "./app.css": "./src/app.css",
+    "./embed": {
+      "types": "./src/lib/embed/index.ts",
+      "import": "./dist/embed/index.js",
+      "default": "./dist/embed/index.js"
+    },
+    "./renderers": {
+      "svelte": "./src/lib/renderers/index.ts",
+      "types": "./src/lib/renderers/index.ts"
+    },
+    "./build/*": "./build/*"
+  },
+  "files": [
+    "bin",
+    "build",
+    "dist",
+    "src/app.css",
+    "src/lib/**/*.svelte",
+    "src/lib/**/*.ts",
+    "!src/lib/**/*.test.ts",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@fontsource-variable/inter": "^5.2.8",
+    "@fontsource-variable/jetbrains-mono": "^5.2.8",
+    "@sigma/node-border": "^3.0.0",
+    "@tauri-apps/api": "^2.5.0",
+    "@xyflow/svelte": "^1.2.0",
+    "bits-ui": "^2.18.1",
+    "clsx": "^2.1.1",
+    "graphology": "^0.26.0",
+    "graphology-communities-louvain": "^2.0.2",
+    "graphology-layout-forceatlas2": "^0.10.1",
+    "lucide-svelte": "^0.475.0",
+    "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"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-static": "^3.0.8",
+    "@sveltejs/kit": "^2.17.0",
+    "@sveltejs/vite-plugin-svelte": "^5.0.3",
+    "@tailwindcss/vite": "^4.3.0",
+    "@types/node": "^25.9.1",
+    "svelte": "^5.20.0",
+    "svelte-check": "^4.1.4",
+    "tailwindcss": "^4.3.0",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.7",
+    "vitest": "^2.1.8"
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  },
+  "engines": {
+    "node": ">=20"
+  },
+  "license": "Apache-2.0",
+  "homepage": "https://github.com/reddb-io/red-ui",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/reddb-io/red-ui.git",
+    "directory": "packages/ui"
+  },
+  "bugs": {
+    "url": "https://github.com/reddb-io/red-ui/issues"
+  },
+  "scripts": {
+    "dev": "vite dev --host 127.0.0.1 --port 1420 --strictPort",
+    "build": "vite build && vite build --config vite.embed.config.ts",
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "test": "svelte-kit sync && vitest run"
+  }
+}

package/src/app.css

@@ -0,0 +1,238 @@
+@import 'tailwindcss';
+@import '@fontsource-variable/inter';
+@import '@fontsource-variable/jetbrains-mono';
+
+/* ============================================================================
+   Design tokens. Linear/Vercel vibe — surgical accent, contemporary type.
+
+   Two themes live here:
+     - default (`:root`, no data-theme or `data-theme="light"`): light, white-leaning.
+     - opt-in (`:root[data-theme="dark"]`): dark, near-black with green tint.
+
+   Light is default for both OSS and cloud first-load. Dark is opt-in via the
+   topbar toggle / Cmd-K command. Selection is persisted in localStorage and
+   applied before paint by an inline script in app.html.
+
+   Hierarchy of layers (lowest to highest in z):
+     bg-0  — page background (the deepest base)
+     bg-1  — primary surfaces (cards, panels, topbar)
+     bg-2  — interactive surfaces (buttons, inputs, hover)
+     bg-3  — elevated / active surfaces
+
+   Text ramp (most readable to least):
+     fg-0  — primary text, h1/h2, important values
+     fg-1  — body text, secondary headings
+     fg-2  — labels, meta, captions, muted UI text
+     fg-3  — disabled, "tertiary noise" (e.g. helper hints)
+   ============================================================================ */
+
+@theme {
+  /* Surfaces — light, white-leaning ramp.
+     bg-0 white, surfaces step up in grey via the zinc family. */
+  --color-bg-0: #ffffff;
+  --color-bg-1: #fafafa;
+  --color-bg-2: #f4f4f5;
+  --color-bg-3: #e7e7ea;
+
+  /* Foreground ramp — every level is WCAG AA on bg-0/bg-1.
+     fg-3 floor is ~4.8:1 on white; below that is decorative only. */
+  --color-fg-0: #0a0a0b;
+  --color-fg-1: #3f3f46;
+  --color-fg-2: #52525b;
+  --color-fg-3: #71717a;
+
+  /* Lines */
+  --color-line-1: #ececef;
+  --color-line-2: #d4d4d8;
+  --color-line-3: #a1a1aa;
+
+  /* Surgical accent — rose 600. #ff2056 vibrates on white and fails AA when
+     paired with white text on accent fills; the slightly darker chroma
+     (#e11d48) keeps the same reddb identity while clearing 4.5:1 against
+     white surfaces and against white button labels. */
+  --color-accent: #e11d48;
+  --color-accent-soft: rgba(225, 29, 72, 0.10);
+  --color-accent-glow: rgba(225, 29, 72, 0.30);
+
+  /* Semantic — darker variants so they stay AA on white surfaces */
+  --color-ok: #16a34a;
+  --color-warn: #b45309;
+  --color-danger: #dc2626;
+  --color-info: #2563eb;
+
+  /* Node roles */
+  --color-role-primary: #e11d48;
+  --color-role-replica: #2563eb;
+  --color-role-embedded: #16a34a;
+
+  /* Ambient glow — soft red wash at top of viewport, scaled per theme */
+  --color-ambient-glow: rgba(225, 29, 72, 0.04);
+
+  /* Geometry */
+  --radius-sm: 3px;
+  --radius-md: 5px;
+  --radius-lg: 8px;
+  --radius-xl: 12px;
+
+  /* Typography — base text is 13px (Linear scale) */
+  --text-xs: 11px;
+  --text-xs--line-height: 1.45;
+  --text-sm: 12px;
+  --text-sm--line-height: 1.5;
+  --text-base: 13px;
+  --text-base--line-height: 1.5;
+  --text-md: 14px;
+  --text-md--line-height: 1.5;
+  --text-lg: 18px;
+  --text-lg--line-height: 1.3;
+  --text-xl: 22px;
+  --text-xl--line-height: 1.2;
+  --text-2xl: 28px;
+  --text-2xl--line-height: 1.15;
+
+  --font-sans: 'Inter Variable', 'Inter', system-ui, -apple-system, sans-serif;
+  --font-mono: 'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace, 'SF Mono', 'Menlo', monospace;
+
+  /* ease-out-expo for ambient transitions, ease-out-quart for snappier UI */
+  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+  --ease-snap: cubic-bezier(0.25, 1, 0.5, 1);
+
+  /* Shadows — light variant: smaller alpha, slate tint */
+  --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);
+}
+
+/* Dark theme — opt-in via `data-theme="dark"` on the document root. */
+:root[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);
+}
+
+/* shadcn-svelte semantic aliases — driven by the active theme's tokens */
+@layer base {
+  :root {
+    --background: var(--color-bg-0);
+    --foreground: var(--color-fg-0);
+    --card: var(--color-bg-1);
+    --card-foreground: var(--color-fg-0);
+    --popover: var(--color-bg-1);
+    --popover-foreground: var(--color-fg-0);
+    --primary: var(--color-accent);
+    --primary-foreground: #ffffff;
+    --secondary: var(--color-bg-2);
+    --secondary-foreground: var(--color-fg-1);
+    --muted: var(--color-bg-2);
+    --muted-foreground: var(--color-fg-2);
+    --accent: var(--color-bg-3);
+    --accent-foreground: var(--color-fg-0);
+    --destructive: var(--color-danger);
+    --destructive-foreground: #ffffff;
+    --border: var(--color-line-2);
+    --input: var(--color-line-2);
+    --ring: var(--color-accent);
+    --radius: var(--radius-md);
+  }
+
+  * { box-sizing: border-box; }
+
+  html, body {
+    background: var(--color-bg-0);
+    color: var(--color-fg-0);
+    font-family: var(--font-sans);
+    font-size: 13px;
+    line-height: 1.5;
+    font-feature-settings: 'cv11', 'ss01', 'ss03';
+    letter-spacing: -0.005em;
+    margin: 0;
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+  }
+
+  /* Explicit type system — every page should use these classes for hierarchy */
+  .type-h1 {
+    font-size: 22px;
+    font-weight: 600;
+    letter-spacing: -0.02em;
+    line-height: 1.2;
+    color: var(--color-fg-0);
+  }
+  .type-h2 {
+    font-size: 16px;
+    font-weight: 600;
+    letter-spacing: -0.015em;
+    line-height: 1.3;
+    color: var(--color-fg-0);
+  }
+  .type-label {
+    font-family: var(--font-mono);
+    font-size: 10px;
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: var(--color-fg-2);
+  }
+  .type-caption {
+    font-size: 11px;
+    color: var(--color-fg-2);
+    line-height: 1.45;
+  }
+  .type-code {
+    font-family: var(--font-mono);
+    font-size: 12px;
+    color: var(--color-fg-1);
+  }
+
+  /* Ambient grid — 96px squares; lines use line-1 so the texture
+     reads as "barely there" in both themes. */
+  body::before {
+    content: '';
+    position: fixed;
+    inset: 0;
+    background-image:
+      radial-gradient(ellipse 80% 50% at 50% -10%, var(--color-ambient-glow), transparent),
+      linear-gradient(var(--color-line-1) 1px, transparent 1px),
+      linear-gradient(90deg, var(--color-line-1) 1px, transparent 1px);
+    background-size: 100% 100%, 96px 96px, 96px 96px;
+    opacity: 0.35;
+    pointer-events: none;
+    z-index: 0;
+  }
+
+  ::selection { background: var(--color-accent-soft); color: var(--color-fg-0); }
+
+  /* Default scrollbar styling — border matches page bg so the thumb
+     "floats" off the surface in both themes. */
+  ::-webkit-scrollbar { width: 10px; height: 10px; }
+  ::-webkit-scrollbar-track { background: transparent; }
+  ::-webkit-scrollbar-thumb { background: var(--color-line-2); border-radius: 8px; border: 2px solid var(--color-bg-0); }
+  ::-webkit-scrollbar-thumb:hover { background: var(--color-line-3); }
+}

package/src/lib/ActivityIndicator.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+  import { activity } from './activity.svelte'
+  import { Activity, CheckCircle2, AlertCircle, Loader2 } from 'lucide-svelte'
+
+  let open = $state(false)
+
+  function fmtDuration(ms: number | null): string {
+    if (ms === null) return '…'
+    if (ms < 1000) return `${ms}ms`
+    return `${(ms / 1000).toFixed(1)}s`
+  }
+
+  function fmtRel(at: number): string {
+    const d = Date.now() - at
+    if (d < 1000) return 'just now'
+    if (d < 60_000) return `${Math.round(d / 1000)}s ago`
+    return `${Math.round(d / 60_000)}m ago`
+  }
+</script>
+
+<div class="relative">
+  <button
+    type="button"
+    onclick={() => (open = !open)}
+    aria-pressed={open}
+    title="reddb activity"
+    class={[
+      'inline-flex items-center gap-1.5 h-7 px-2 rounded-md border text-xs font-mono transition-colors cursor-pointer',
+      activity.inflight > 0
+        ? 'border-accent/40 bg-accent/10 text-accent'
+        : 'border-line-2 bg-bg-2 text-fg-3 hover:text-fg-1',
+    ].join(' ')}
+  >
+    {#if activity.inflight > 0}
+      <Loader2 class="size-3.5 animate-spin" />
+      <span>{activity.inflight}</span>
+    {:else}
+      <Activity class="size-3.5" />
+      <span class="text-fg-3">idle</span>
+    {/if}
+  </button>
+
+  {#if open}
+    <div class="fixed inset-0 z-40" role="presentation" onclick={() => (open = false)}></div>
+    <div
+      role="dialog"
+      aria-label="Activity log"
+      class="absolute top-[calc(100%+6px)] right-0 z-50 w-[360px] bg-bg-1 border border-line-2 rounded-lg shadow-2xl text-[11px] font-mono"
+    >
+      <header class="flex items-center justify-between px-3 py-2 border-b border-line-1">
+        <span class="type-label">Recent reddb requests</span>
+        <div class="flex items-center gap-2">
+          <span class="text-fg-3">{activity.inflight} active</span>
+          {#if activity.inflight > 0}
+            <button
+              type="button"
+              onclick={() => activity.reset()}
+              title="Force-clear the in-flight counter (use when a request hangs)"
+              class="px-1.5 py-0.5 rounded border border-line-1 text-fg-3 hover:text-fg-1 hover:border-line-2 cursor-pointer text-[10px]"
+            >
+              reset
+            </button>
+          {/if}
+        </div>
+      </header>
+      <div class="max-h-[320px] overflow-y-auto py-1">
+        {#if activity.log.length === 0}
+          <div class="px-3 py-3 text-fg-3">No activity yet.</div>
+        {:else}
+          {#each activity.log as e (e.id)}
+            <div class="px-3 py-1.5 border-b border-line-1/50 last:border-0 grid grid-cols-[16px_1fr_auto] items-center gap-2">
+              <span aria-hidden="true">
+                {#if e.status === 'pending'}
+                  <Loader2 class="size-3 animate-spin text-accent" />
+                {:else if e.status === 'ok'}
+                  <CheckCircle2 class="size-3 text-ok" />
+                {:else}
+                  <AlertCircle class="size-3 text-danger" />
+                {/if}
+              </span>
+              <div class="min-w-0">
+                <div class="text-fg-1 truncate">{e.label}</div>
+                {#if e.status === 'error' && e.error}
+                  <div class="text-danger text-[10px] truncate">{e.error}</div>
+                {/if}
+              </div>
+              <div class="text-fg-3 text-[10px] tabular-nums whitespace-nowrap">
+                {#if e.status === 'pending'}
+                  {fmtRel(e.startedAt)}
+                {:else}
+                  {fmtDuration(e.durationMs)}
+                {/if}
+              </div>
+            </div>
+          {/each}
+        {/if}
+      </div>
+    </div>
+  {/if}
+</div>

package/src/lib/ClusterNode.svelte

@@ -0,0 +1,119 @@
+<script lang="ts">
+  import { Handle, Position } from '@xyflow/svelte'
+
+  interface Props {
+    data: {
+      label: string
+      role: string
+      collections: number
+      entities: number
+      url: string
+    }
+    selected?: boolean
+  }
+  let { data, selected }: Props = $props()
+
+  const roleClass = $derived(
+    data.role === 'primary' ? 'role-primary' :
+    data.role === 'replica' ? 'role-replica' :
+    'role-embedded'
+  )
+</script>
+
+<Handle type="target" position={Position.Left} style="opacity:0;pointer-events:none" />
+<Handle type="source" position={Position.Right} style="opacity:0;pointer-events:none" />
+
+<div class="card {roleClass}" class:selected>
+  <div class="stripe"></div>
+  <div class="body">
+    <div class="head">
+      <span class="role">{data.role}</span>
+      <span class="dot"></span>
+    </div>
+    <div class="label">{data.label}</div>
+    <div class="meta">
+      <span class="metric"><span class="n">{data.collections}</span><span class="u">colls</span></span>
+      <span class="sep">·</span>
+      <span class="metric"><span class="n">{data.entities.toLocaleString()}</span><span class="u">entities</span></span>
+    </div>
+  </div>
+</div>
+
+<style>
+  .card {
+    --c: #7a8088;
+    position: relative;
+    width: 240px;
+    background: var(--color-bg-1);
+    border: 1px solid var(--color-line-2);
+    border-radius: 8px;
+    overflow: hidden;
+    transition: border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out), transform 200ms var(--ease-snap);
+    cursor: pointer;
+  }
+  .card:hover {
+    border-color: color-mix(in srgb, var(--c) 50%, var(--color-line-3));
+  }
+  .card.selected {
+    border-color: var(--c);
+    box-shadow: 0 0 0 1px var(--c), 0 8px 28px -8px color-mix(in srgb, var(--c) 60%, transparent);
+  }
+
+  .role-primary  { --c: var(--color-role-primary); }
+  .role-replica  { --c: var(--color-role-replica); }
+  .role-embedded { --c: var(--color-role-embedded); }
+
+  .stripe {
+    position: absolute; left: 0; top: 0; bottom: 0;
+    width: 2px;
+    background: var(--c);
+    box-shadow: 0 0 8px var(--c);
+  }
+
+  .body { padding: 12px 14px 12px 16px; }
+
+  .head { display: flex; align-items: center; justify-content: space-between; }
+  .role {
+    font-family: var(--font-mono);
+    font-size: 9px;
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.14em;
+    color: var(--c);
+  }
+  .dot {
+    width: 6px; height: 6px;
+    border-radius: 9999px;
+    background: var(--c);
+    box-shadow: 0 0 6px var(--c);
+    animation: pulse 2.4s ease-in-out infinite;
+  }
+  @keyframes pulse {
+    0%, 100% { opacity: 1; transform: scale(1); }
+    50% { opacity: 0.5; transform: scale(0.9); }
+  }
+
+  .label {
+    font-family: var(--font-mono);
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--color-fg-0);
+    margin-top: 4px;
+    letter-spacing: -0.01em;
+  }
+
+  .meta {
+    margin-top: 10px;
+    padding-top: 10px;
+    border-top: 1px solid var(--color-line-1);
+    display: flex;
+    align-items: baseline;
+    gap: 6px;
+    font-family: var(--font-mono);
+    font-size: 11px;
+  }
+  .metric { display: inline-flex; align-items: baseline; gap: 4px; }
+  .metric .n { color: var(--color-fg-0); font-weight: 500; }
+  .metric .u { color: var(--color-fg-3); font-size: 10px; }
+  .sep { color: var(--color-fg-3); }
+</style>