@nbt-dev/components 0.0.5

package/src/graph/entity-graph-utils.ts

@@ -0,0 +1,423 @@
+// Entity-relationship graph model for the devtools Diagram tab. Ported from the
+// portal-ui entity-graph (apps/portal/.../systems/entity-graph) but fed off the
+// daemon's `/_console/contracts` directly instead of the portal BFF's
+// cartridges-in-use + resources endpoints. Contract fields use snake_case
+// relation keys (`target_cart`, `fk_field`, `relation_kind`); we normalize to
+// the camelCase model below in `cartsFromContracts`. Row counts are overlaid
+// live from the bulk-stream schema preload, not baked into the model here.
+//
+// Placement uses dagre (layered LR) — the portal's hand-rolled column stacker
+// sprawled here because the devtools shows every installed cart at once rather
+// than a project-scoped subset.
+
+import dagre from "@dagrejs/dagre";
+
+export type GraphInputField = {
+  name: string;
+  type: string;
+  optional?: boolean;
+  array?: boolean;
+  kind?: string;
+  target?: string;
+  targetCart?: string;
+  relationKind?: string;
+  fkField?: string;
+};
+
+export type GraphInputEntity = {
+  name: string;
+  fields: GraphInputField[];
+};
+
+export type GraphInputCart = {
+  name: string;
+  entities: GraphInputEntity[];
+};
+
+export type EntityGraphField = {
+  name: string;
+  displayName: string;
+  type: string;
+  kind: string;
+  optional: boolean;
+  array: boolean;
+  target?: string;
+  targetCart?: string;
+  relationKind?: string;
+  fkField?: string;
+  implicit?: boolean;
+};
+
+export type EntityGraphNodeData = {
+  id: string;
+  cartridge: string;
+  entity: string;
+  fields: EntityGraphField[];
+  fieldCount: number;
+  scalarCount: number;
+  relationCount: number;
+  documentCount: number;
+  rowCount: number;
+};
+
+export type EntityGraphNode = EntityGraphNodeData & {
+  position: { x: number; y: number };
+};
+
+export type EntityGraphEdge = {
+  id: string;
+  source: string;
+  target: string;
+  sourceField: string;
+  targetField: string;
+  label: string;
+  relationKind?: string;
+  fkField?: string;
+};
+
+export type EntityGraphTotals = {
+  entities: number;
+  relationships: number;
+  rows: number;
+};
+
+export type EntityGraphModel = {
+  nodes: EntityGraphNode[];
+  edges: EntityGraphEdge[];
+  totals: EntityGraphTotals;
+};
+
+const NODE_WIDTH = 260;
+const MIN_NODE_HEIGHT = 150;
+const FIELD_ROW_HEIGHT = 26;
+const COLUMN_WIDTH = 390; // initial pre-layout spread; dagre overrides positions
+
+// Raw contract shapes (subset). `/_console/contracts` returns one object per
+// running cart with an `owns` map of entity -> { fields, ... }.
+type ContractField = {
+  name: string;
+  type: string;
+  optional?: boolean;
+  array?: boolean;
+  kind?: string;
+  target?: string;
+  target_cart?: string;
+  relation_kind?: string;
+  fk_field?: string;
+};
+type ContractEntity = { fields?: ContractField[] };
+export type Contract = {
+  cartridge?: string;
+  owns?: Record<string, ContractEntity>;
+};
+
+export function cartsFromContracts(contracts: Contract[]): GraphInputCart[] {
+  const carts: GraphInputCart[] = [];
+  for (const c of contracts) {
+    if (!c.cartridge || !c.owns) continue;
+    const entities: GraphInputEntity[] = [];
+    for (const [name, ent] of Object.entries(c.owns)) {
+      const fields: GraphInputField[] = (ent.fields ?? []).map((f) => ({
+        name: f.name,
+        type: f.type,
+        optional: f.optional,
+        array: f.array,
+        kind: f.kind,
+        target: f.target,
+        targetCart: f.target_cart,
+        relationKind: f.relation_kind,
+        fkField: f.fk_field,
+      }));
+      entities.push({ name, fields });
+    }
+    if (entities.length > 0) carts.push({ name: c.cartridge, entities });
+  }
+  return carts;
+}
+
+export function entityGraphId(cartridge: string, entity: string): string {
+  return `${cartridge}:${entity}`;
+}
+
+function fieldKind(field: GraphInputField): string {
+  return field.kind ?? (field.target ? "relation" : "scalar");
+}
+
+function graphField(field: GraphInputField): EntityGraphField {
+  const kind = fieldKind(field);
+  return {
+    name: field.name,
+    displayName: kind === "relation" ? (field.fkField ?? field.name) : field.name,
+    type: kind === "relation" && field.target ? field.target : field.type,
+    kind,
+    optional: field.optional === true,
+    array: field.array === true,
+    target: field.target,
+    targetCart: field.targetCart,
+    relationKind: field.relationKind,
+    fkField: field.fkField,
+  };
+}
+
+function makeGraphFields(fields: GraphInputField[]): EntityGraphField[] {
+  const out = fields.map(graphField);
+  if (!out.some((field) => field.displayName.toLowerCase() === "id")) {
+    out.unshift({
+      name: "id",
+      displayName: "id",
+      type: "id",
+      kind: "scalar",
+      optional: false,
+      array: false,
+      implicit: true,
+    });
+  }
+  return out;
+}
+
+function normalizeName(value: string): string {
+  return value.replace(/[^a-zA-Z0-9]/g, "").toLowerCase();
+}
+
+function words(value: string): string[] {
+  return value
+    .replace(/([a-z0-9])([A-Z])/g, "$1 $2")
+    .split(/[^a-zA-Z0-9]+/)
+    .map((part) => part.toLowerCase())
+    .filter(Boolean);
+}
+
+function entityAliases(entity: string): string[] {
+  const parts = words(entity);
+  const aliases = new Set<string>([normalizeName(entity)]);
+  const last = parts.length > 0 ? parts[parts.length - 1] : undefined;
+  if (last) aliases.add(last);
+  if (parts.length > 1 && last) {
+    aliases.add(`${parts.slice(0, -1).map((part) => part[0]).join("")}${last}`);
+    aliases.add(parts.map((part) => part[0]).join(""));
+  }
+  return [...aliases].filter((alias) => alias.length >= 2);
+}
+
+function inferTargetNode(fieldName: string, nodes: EntityGraphNode[]): EntityGraphNode | null {
+  if (!/id$/i.test(fieldName) || /^id$/i.test(fieldName)) return null;
+  const base = normalizeName(fieldName.replace(/id$/i, ""));
+  if (base.length < 3) return null;
+
+  const candidates = nodes
+    .flatMap((node) =>
+      entityAliases(node.entity).map((alias) => {
+        const exact = base === alias;
+        const suffix = !exact && alias.length >= 4 && base.endsWith(alias);
+        if (!exact && !suffix) return null;
+        return {
+          node,
+          score: (exact ? 1000 : 500) + alias.length,
+        };
+      }),
+    )
+    .filter((candidate): candidate is { node: EntityGraphNode; score: number } => candidate !== null)
+    .sort((a, b) => b.score - a.score || a.node.entity.localeCompare(b.node.entity));
+
+  const first = candidates[0];
+  if (!first) return null;
+  const second = candidates[1];
+  if (second && first.score === second.score) return null;
+  return first.node;
+}
+
+function markRelationField(node: EntityGraphNode | undefined, fieldName: string, target: EntityGraphNode) {
+  const field = node?.fields.find(
+    (candidate) => candidate.displayName === fieldName || candidate.name === fieldName,
+  );
+  if (!field || field.displayName.toLowerCase() === "id") return;
+  field.kind = "relation";
+  field.target = target.entity;
+  field.targetCart = target.cartridge;
+  field.relationKind ??= "inferred";
+  field.fkField ??= fieldName;
+}
+
+function recomputeNodeCounts(nodes: EntityGraphNode[]) {
+  for (const node of nodes) {
+    node.scalarCount = node.fields.filter((field) => field.kind === "scalar").length;
+    node.relationCount = node.fields.filter((field) => field.kind === "relation").length;
+    node.documentCount = node.fields.filter((field) => field.kind === "document").length;
+  }
+}
+
+function nodeHeight(node: EntityGraphNode): number {
+  return Math.max(MIN_NODE_HEIGHT, 74 + node.fields.length * FIELD_ROW_HEIGHT);
+}
+
+// Layered left-to-right placement via dagre. Connected components get clean
+// ranks with minimized crossings; isolated nodes (no edges) are gathered into a
+// trailing grid so they don't inflate dagre's ranks.
+function layoutNodes(nodes: EntityGraphNode[], edges: EntityGraphEdge[]) {
+  const degree = new Map(nodes.map((n) => [n.id, 0]));
+  for (const edge of edges) {
+    degree.set(edge.source, (degree.get(edge.source) ?? 0) + 1);
+    degree.set(edge.target, (degree.get(edge.target) ?? 0) + 1);
+  }
+
+  const connected = nodes.filter((n) => (degree.get(n.id) ?? 0) > 0);
+  const isolated = nodes.filter((n) => (degree.get(n.id) ?? 0) === 0);
+  const connectedIds = new Set(connected.map((n) => n.id));
+
+  let maxX = 0;
+  let maxY = 0;
+
+  if (connected.length > 0) {
+    const g = new dagre.graphlib.Graph();
+    g.setGraph({ rankdir: "LR", ranksep: 160, nodesep: 48, marginx: 40, marginy: 40 });
+    g.setDefaultEdgeLabel(() => ({}));
+    for (const node of connected) {
+      g.setNode(node.id, { width: NODE_WIDTH, height: nodeHeight(node) });
+    }
+    for (const edge of edges) {
+      // dagre can't rank self-loops; the edge still renders (handle picks the
+      // same node's left+right). Cross-component edges are all kept.
+      if (edge.source === edge.target) continue;
+      if (!connectedIds.has(edge.source) || !connectedIds.has(edge.target)) continue;
+      g.setEdge(edge.source, edge.target);
+    }
+    dagre.layout(g);
+    for (const node of connected) {
+      const p = g.node(node.id);
+      const h = nodeHeight(node);
+      node.position = { x: p.x - NODE_WIDTH / 2, y: p.y - h / 2 };
+      maxX = Math.max(maxX, node.position.x + NODE_WIDTH);
+      maxY = Math.max(maxY, node.position.y + h);
+    }
+  }
+
+  // Isolated nodes: a tidy grid to the right of the laid-out graph.
+  if (isolated.length > 0) {
+    isolated.sort((a, b) => a.entity.localeCompare(b.entity));
+    const startX = connected.length > 0 ? maxX + COLUMN_WIDTH : 0;
+    const perColumn = Math.max(1, Math.ceil(isolated.length / Math.ceil(isolated.length / 6)));
+    let x = startX;
+    let y = 0;
+    let inColumn = 0;
+    for (const node of isolated) {
+      node.position = { x, y };
+      y += nodeHeight(node) + 48;
+      inColumn += 1;
+      if (inColumn >= perColumn) {
+        inColumn = 0;
+        y = 0;
+        x += COLUMN_WIDTH;
+      }
+    }
+  }
+}
+
+function makeTotals(nodes: EntityGraphNode[], edges: EntityGraphEdge[]): EntityGraphTotals {
+  return {
+    entities: nodes.length,
+    relationships: edges.length,
+    rows: nodes.reduce((sum, node) => sum + node.rowCount, 0),
+  };
+}
+
+export function buildEntityGraphModel(cartridges: GraphInputCart[]): EntityGraphModel {
+  const sortedCarts = [...cartridges].sort((a, b) => a.name.localeCompare(b.name));
+  const nodes: EntityGraphNode[] = [];
+
+  sortedCarts.forEach((cart, cartIndex) => {
+    const entities = [...cart.entities].sort((a, b) => a.name.localeCompare(b.name));
+    let y = 0;
+    entities.forEach((entity) => {
+      const id = entityGraphId(cart.name, entity.name);
+      const fields = entity.fields ?? [];
+      const graphFields = makeGraphFields(fields);
+      nodes.push({
+        id,
+        cartridge: cart.name,
+        entity: entity.name,
+        fields: graphFields,
+        fieldCount: graphFields.length,
+        scalarCount: graphFields.filter((field) => field.kind === "scalar").length,
+        relationCount: graphFields.filter((field) => field.kind === "relation").length,
+        documentCount: graphFields.filter((field) => field.kind === "document").length,
+        rowCount: 0,
+        position: { x: cartIndex * COLUMN_WIDTH, y },
+      });
+      y += Math.max(MIN_NODE_HEIGHT, 74 + graphFields.length * FIELD_ROW_HEIGHT) + 56;
+    });
+  });
+
+  const nodeIds = new Set(nodes.map((node) => node.id));
+  const nodeById = new Map(nodes.map((node) => [node.id, node]));
+  const edges: EntityGraphEdge[] = [];
+  const edgeKeys = new Set<string>();
+  for (const cart of sortedCarts) {
+    for (const entity of cart.entities) {
+      const source = entityGraphId(cart.name, entity.name);
+      const sourceNode = nodeById.get(source);
+      for (const field of entity.fields ?? []) {
+        const explicitRelation = fieldKind(field) === "relation" && !!field.target;
+        const inferredTargetNode = explicitRelation ? null : inferTargetNode(field.name, nodes);
+        if (!explicitRelation && !inferredTargetNode) continue;
+
+        const targetCart = explicitRelation
+          ? field.targetCart ?? cart.name
+          : inferredTargetNode?.cartridge;
+        const targetEntity = explicitRelation ? field.target : inferredTargetNode?.entity;
+        if (!targetCart || !targetEntity) continue;
+        const target = entityGraphId(targetCart, targetEntity);
+        if (!nodeIds.has(source) || !nodeIds.has(target)) continue;
+        const targetNode = nodeById.get(target);
+        const idField = targetNode?.fields.find((candidate) => candidate.displayName.toLowerCase() === "id");
+        const targetField = idField?.displayName ?? "__entity";
+        const sourceGraphField = sourceNode?.fields.find(
+          (candidate) => candidate.name === field.name || candidate.displayName === field.name,
+        );
+        const sourceField = sourceGraphField?.displayName ?? field.fkField ?? field.name;
+        const edgeKey = `${source}:${sourceField}->${target}:${targetField}`;
+        if (edgeKeys.has(edgeKey)) continue;
+        edgeKeys.add(edgeKey);
+        if (!explicitRelation && targetNode) markRelationField(sourceNode, sourceField, targetNode);
+        edges.push({
+          id: `${source}:${field.name}->${target}`,
+          source,
+          target,
+          sourceField,
+          targetField,
+          label: field.name,
+          relationKind: field.relationKind ?? (!explicitRelation ? "inferred" : undefined),
+          fkField: field.fkField ?? (!explicitRelation ? field.name : undefined),
+        });
+      }
+    }
+  }
+
+  recomputeNodeCounts(nodes);
+
+  return {
+    nodes,
+    edges,
+    totals: makeTotals(nodes, edges),
+  };
+}
+
+// Filter to the visible set and re-run layout over exactly those nodes/edges, so
+// toggling entities re-fits the graph rather than leaving stale full-graph gaps.
+// Nodes are cloned before layout mutates their `position`, keeping the cached base
+// model untouched.
+export function filterEntityGraphModel(
+  model: EntityGraphModel,
+  visibleIds: Set<string>,
+): EntityGraphModel {
+  const nodes = model.nodes
+    .filter((node) => visibleIds.has(node.id))
+    .map((node) => ({ ...node, position: { ...node.position } }));
+  const ids = new Set(nodes.map((node) => node.id));
+  const edges = model.edges.filter((edge) => ids.has(edge.source) && ids.has(edge.target));
+  layoutNodes(nodes, edges);
+  return {
+    nodes,
+    edges,
+    totals: makeTotals(nodes, edges),
+  };
+}

package/src/graph/entity-node.tsx

@@ -0,0 +1,122 @@
+import React from "react";
+import { Handle, Position, type NodeProps } from "@xyflow/react";
+import { Database, FileText, KeyRound, Link2 } from "lucide-react";
+import type { EntityGraphNodeData } from "./entity-graph-utils";
+
+export type EntityNodeHighlight = {
+  focused: boolean;
+  connected: boolean;
+  dimmed: boolean;
+  fields: string[];
+};
+
+type EntityNodeViewData = EntityGraphNodeData & {
+  highlight?: EntityNodeHighlight;
+};
+
+// Dark entity card. Colors are pinned (not theme tokens) so the card looks the
+// same regardless of where it mounts; it sits inside the dark devtools panel.
+export function EntityNode({ data, selected }: NodeProps) {
+  const node = data as EntityNodeViewData;
+  const highlight = node.highlight;
+  const highlightedFields = new Set(highlight?.fields ?? []);
+  const hiddenHandleClass = "!h-1 !w-1 !border-0 !bg-transparent !opacity-0";
+  return (
+    <div
+      className={[
+        "relative w-[260px] overflow-visible rounded-xl border bg-zinc-900 font-mono text-[11px] text-zinc-100 shadow-lg shadow-black/40 transition-opacity",
+        highlight?.focused
+          ? "border-blue-500 ring-2 ring-blue-500/30"
+          : highlight?.connected
+            ? "border-blue-400/60 ring-2 ring-blue-500/10"
+            : "border-zinc-700",
+        highlight?.dimmed ? "opacity-35" : "",
+        selected && !highlight?.focused ? "ring-2 ring-zinc-100/10" : "",
+      ].join(" ")}
+    >
+      <div className="rounded-t-xl border-b border-zinc-700 bg-zinc-800 px-3 py-2">
+        <div className="flex min-w-0 items-center gap-2">
+          <Database className="h-3.5 w-3.5 shrink-0 text-zinc-400" />
+          <span className="min-w-0 flex-1 truncate text-[13px] font-semibold leading-none text-zinc-50">
+            {node.entity}
+          </span>
+        </div>
+        <div className="mt-1 truncate text-[10px] text-zinc-500">{node.cartridge}</div>
+      </div>
+      <div className="bg-zinc-900 py-1">
+        {node.fields.length === 0 ? (
+          <div className="px-3 py-2 text-[10px] text-zinc-500">No fields</div>
+        ) : (
+          node.fields.map((field) => {
+            const type = `${field.type}${field.array ? "[]" : ""}${field.optional ? "?" : ""}`;
+            const isId = field.displayName.toLowerCase() === "id";
+            const isRelation = field.kind === "relation";
+            const isDocument = field.kind === "document";
+            const fieldHighlighted = highlightedFields.has(field.displayName);
+            return (
+              <div
+                key={`${field.name}:${field.displayName}`}
+                className={[
+                  "relative grid min-h-[26px] grid-cols-[minmax(0,1fr)_auto] items-center gap-3 px-3 py-1 text-zinc-300",
+                  fieldHighlighted ? "bg-blue-500/15 text-blue-200" : "",
+                ].join(" ")}
+              >
+                {isId ? (
+                  <>
+                    <Handle
+                      id={`target-${field.displayName}-left`}
+                      type="target"
+                      position={Position.Left}
+                      className={`!left-0 ${hiddenHandleClass}`}
+                      style={{ top: "50%" }}
+                    />
+                    <Handle
+                      id={`target-${field.displayName}-right`}
+                      type="target"
+                      position={Position.Right}
+                      className={`!right-0 ${hiddenHandleClass}`}
+                      style={{ top: "50%" }}
+                    />
+                  </>
+                ) : null}
+                {isRelation ? (
+                  <>
+                    <Handle
+                      id={`source-${field.displayName}-left`}
+                      type="source"
+                      position={Position.Left}
+                      className={`!left-0 ${hiddenHandleClass}`}
+                      style={{ top: "50%" }}
+                    />
+                    <Handle
+                      id={`source-${field.displayName}-right`}
+                      type="source"
+                      position={Position.Right}
+                      className={`!right-0 ${hiddenHandleClass}`}
+                      style={{ top: "50%" }}
+                    />
+                  </>
+                ) : null}
+                <span className="flex min-w-0 items-center gap-1.5">
+                  {isId ? <KeyRound className="h-3 w-3 shrink-0 text-zinc-500" /> : null}
+                  {isRelation ? (
+                    <Link2 className={["h-3 w-3 shrink-0", fieldHighlighted ? "text-blue-300" : "text-blue-400"].join(" ")} />
+                  ) : null}
+                  {isDocument ? <FileText className="h-3 w-3 shrink-0 text-zinc-500" /> : null}
+                  <span className="truncate">{field.displayName}</span>
+                </span>
+                <span className="max-w-[96px] truncate text-right text-zinc-500">{type}</span>
+              </div>
+            );
+          })
+        )}
+      </div>
+      <div className="flex items-center justify-between gap-2 rounded-b-xl border-t border-zinc-700 bg-zinc-800 px-3 py-1.5 text-[10px] text-zinc-500">
+        <span className="tabular-nums">{node.rowCount.toLocaleString()} rows</span>
+        <span className="tabular-nums">
+          {node.relationCount} rel · {node.scalarCount} scalar
+        </span>
+      </div>
+    </div>
+  );
+}

package/src/graph/index.ts

@@ -0,0 +1,19 @@
+// The diagram is exported as `EntityGraph` — `DiagramView` was its tab-internal
+// name. Mount inside a <BulkStreamProvider> for live row counts (see core).
+export { DiagramView as EntityGraph } from "./diagram";
+export { EntityNode } from "./entity-node";
+export type { EntityNodeHighlight } from "./entity-node";
+export {
+  cartsFromContracts,
+  entityGraphId,
+  buildEntityGraphModel,
+  filterEntityGraphModel,
+} from "./entity-graph-utils";
+export type {
+  Contract,
+  EntityGraphField,
+  EntityGraphNodeData,
+  EntityGraphNode,
+  EntityGraphEdge,
+  EntityGraphModel,
+} from "./entity-graph-utils";

package/src/index.ts

@@ -0,0 +1,7 @@
+// @nbt-dev/components — reusable NBT building blocks. The root re-exports
+// everything; subpath imports (`@nbt-dev/components/editor` | `/graph` | `/table`)
+// let apps pull just one primitive and tree-shake the rest.
+export * from "./core";
+export * from "./editor";
+export * from "./graph";
+export * from "./table";

package/src/styles.css

@@ -0,0 +1,94 @@
+/* Prebuilt, self-contained stylesheet for STANDALONE @nbt-dev/components use.
+ *
+ * Only Tailwind's theme + utilities layers are pulled in — NOT preflight — so
+ * dropping this into a host app never resets the host's own styles. Every token
+ * the primitives reference is mapped here with concrete (dark) values scoped
+ * under `.nbt-ui`, so a bare editor/table renders correctly even when the host
+ * has no Tailwind theme. Wrap your subtree: <div className="nbt-ui dark">…</div>.
+ *
+ * (The @nbt-dev/devtools panel ships its OWN copy of these tokens under
+ * `.nimbit-devtools` — apps mounting the full panel don't need this file.) */
+
+@import "@xyflow/react/dist/style.css";
+
+@layer theme, base, components, utilities;
+@import "tailwindcss/theme.css" layer(theme);
+@import "tailwindcss/utilities.css" layer(utilities);
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+}
+
+.nbt-ui {
+  color-scheme: dark;
+  scrollbar-width: thin;
+  scrollbar-color: oklch(0.4 0 0) transparent;
+  --radius: 0.625rem;
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --destructive-foreground: oklch(0.985 0 0);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+}
+
+.nbt-ui ::-webkit-scrollbar,
+.nbt-ui::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+.nbt-ui ::-webkit-scrollbar-track,
+.nbt-ui::-webkit-scrollbar-track,
+.nbt-ui ::-webkit-scrollbar-corner,
+.nbt-ui::-webkit-scrollbar-corner {
+  background: transparent;
+}
+.nbt-ui ::-webkit-scrollbar-thumb,
+.nbt-ui::-webkit-scrollbar-thumb {
+  background: oklch(0.4 0 0);
+  border: 2px solid transparent;
+  background-clip: padding-box;
+  border-radius: 5px;
+}
+.nbt-ui ::-webkit-scrollbar-thumb:hover,
+.nbt-ui::-webkit-scrollbar-thumb:hover {
+  background: oklch(0.5 0 0);
+}