@nbt-dev/components 0.0.5

package/dist/chunk-UPEOXMLZ.js

@@ -0,0 +1,625 @@
+"use client";
+import {
+  authHeaders,
+  useBulkRowCounts,
+  useDevToolsConfig
+} from "./chunk-3ZM6YOA4.js";
+
+// src/graph/diagram.tsx
+import React from "react";
+import {
+  Background,
+  BackgroundVariant,
+  Controls,
+  MarkerType,
+  ReactFlow,
+  ReactFlowProvider,
+  useNodesInitialized,
+  useReactFlow
+} from "@xyflow/react";
+
+// src/graph/entity-node.tsx
+import { Handle, Position } from "@xyflow/react";
+import { Database, FileText, KeyRound, Link2 } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function EntityNode({ data, selected }) {
+  const node = data;
+  const highlight = node.highlight;
+  const highlightedFields = new Set(highlight?.fields ?? []);
+  const hiddenHandleClass = "!h-1 !w-1 !border-0 !bg-transparent !opacity-0";
+  return /* @__PURE__ */ jsxs(
+    "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(" "),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "rounded-t-xl border-b border-zinc-700 bg-zinc-800 px-3 py-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
+            /* @__PURE__ */ jsx(Database, { className: "h-3.5 w-3.5 shrink-0 text-zinc-400" }),
+            /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-[13px] font-semibold leading-none text-zinc-50", children: node.entity })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "mt-1 truncate text-[10px] text-zinc-500", children: node.cartridge })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "bg-zinc-900 py-1", children: node.fields.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-3 py-2 text-[10px] text-zinc-500", children: "No fields" }) : 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 /* @__PURE__ */ jsxs(
+            "div",
+            {
+              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(" "),
+              children: [
+                isId ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(
+                    Handle,
+                    {
+                      id: `target-${field.displayName}-left`,
+                      type: "target",
+                      position: Position.Left,
+                      className: `!left-0 ${hiddenHandleClass}`,
+                      style: { top: "50%" }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Handle,
+                    {
+                      id: `target-${field.displayName}-right`,
+                      type: "target",
+                      position: Position.Right,
+                      className: `!right-0 ${hiddenHandleClass}`,
+                      style: { top: "50%" }
+                    }
+                  )
+                ] }) : null,
+                isRelation ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(
+                    Handle,
+                    {
+                      id: `source-${field.displayName}-left`,
+                      type: "source",
+                      position: Position.Left,
+                      className: `!left-0 ${hiddenHandleClass}`,
+                      style: { top: "50%" }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Handle,
+                    {
+                      id: `source-${field.displayName}-right`,
+                      type: "source",
+                      position: Position.Right,
+                      className: `!right-0 ${hiddenHandleClass}`,
+                      style: { top: "50%" }
+                    }
+                  )
+                ] }) : null,
+                /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-1.5", children: [
+                  isId ? /* @__PURE__ */ jsx(KeyRound, { className: "h-3 w-3 shrink-0 text-zinc-500" }) : null,
+                  isRelation ? /* @__PURE__ */ jsx(Link2, { className: ["h-3 w-3 shrink-0", fieldHighlighted ? "text-blue-300" : "text-blue-400"].join(" ") }) : null,
+                  isDocument ? /* @__PURE__ */ jsx(FileText, { className: "h-3 w-3 shrink-0 text-zinc-500" }) : null,
+                  /* @__PURE__ */ jsx("span", { className: "truncate", children: field.displayName })
+                ] }),
+                /* @__PURE__ */ jsx("span", { className: "max-w-[96px] truncate text-right text-zinc-500", children: type })
+              ]
+            },
+            `${field.name}:${field.displayName}`
+          );
+        }) }),
+        /* @__PURE__ */ jsxs("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", children: [
+          /* @__PURE__ */ jsxs("span", { className: "tabular-nums", children: [
+            node.rowCount.toLocaleString(),
+            " rows"
+          ] }),
+          /* @__PURE__ */ jsxs("span", { className: "tabular-nums", children: [
+            node.relationCount,
+            " rel \xB7 ",
+            node.scalarCount,
+            " scalar"
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/graph/entity-graph-utils.ts
+import dagre from "@dagrejs/dagre";
+var NODE_WIDTH = 260;
+var MIN_NODE_HEIGHT = 150;
+var FIELD_ROW_HEIGHT = 26;
+var COLUMN_WIDTH = 390;
+function cartsFromContracts(contracts) {
+  const carts = [];
+  for (const c of contracts) {
+    if (!c.cartridge || !c.owns) continue;
+    const entities = [];
+    for (const [name, ent] of Object.entries(c.owns)) {
+      const fields = (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;
+}
+function entityGraphId(cartridge, entity) {
+  return `${cartridge}:${entity}`;
+}
+function fieldKind(field) {
+  return field.kind ?? (field.target ? "relation" : "scalar");
+}
+function graphField(field) {
+  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) {
+  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) {
+  return value.replace(/[^a-zA-Z0-9]/g, "").toLowerCase();
+}
+function words(value) {
+  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) {
+  const parts = words(entity);
+  const aliases = /* @__PURE__ */ new Set([normalizeName(entity)]);
+  const last = parts.length > 0 ? parts[parts.length - 1] : void 0;
+  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, nodes) {
+  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 ? 1e3 : 500) + alias.length
+      };
+    })
+  ).filter((candidate) => 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, fieldName, target) {
+  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 ?? (field.relationKind = "inferred");
+  field.fkField ?? (field.fkField = fieldName);
+}
+function recomputeNodeCounts(nodes) {
+  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) {
+  return Math.max(MIN_NODE_HEIGHT, 74 + node.fields.length * FIELD_ROW_HEIGHT);
+}
+function layoutNodes(nodes, edges) {
+  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) {
+      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);
+    }
+  }
+  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, edges) {
+  return {
+    entities: nodes.length,
+    relationships: edges.length,
+    rows: nodes.reduce((sum, node) => sum + node.rowCount, 0)
+  };
+}
+function buildEntityGraphModel(cartridges) {
+  const sortedCarts = [...cartridges].sort((a, b) => a.name.localeCompare(b.name));
+  const nodes = [];
+  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 = [];
+  const edgeKeys = /* @__PURE__ */ new Set();
+  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" : void 0),
+          fkField: field.fkField ?? (!explicitRelation ? field.name : void 0)
+        });
+      }
+    }
+  }
+  recomputeNodeCounts(nodes);
+  return {
+    nodes,
+    edges,
+    totals: makeTotals(nodes, edges)
+  };
+}
+function filterEntityGraphModel(model, visibleIds) {
+  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)
+  };
+}
+
+// src/graph/diagram.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var nodeTypes = { entity: EntityNode };
+var FitOnReady = ({ fitKey }) => {
+  const initialized = useNodesInitialized();
+  const { fitView } = useReactFlow();
+  React.useEffect(() => {
+    if (initialized) fitView({ padding: 0.25, duration: 200 });
+  }, [initialized, fitKey, fitView]);
+  return null;
+};
+function useContracts() {
+  const { apiBaseUrl } = useDevToolsConfig();
+  const [contracts, setContracts] = React.useState([]);
+  const [loading, setLoading] = React.useState(true);
+  const [error, setError] = React.useState(null);
+  React.useEffect(() => {
+    const ac = new AbortController();
+    let cancelled = false;
+    (async () => {
+      try {
+        const r = await fetch(`${apiBaseUrl}/_console/contracts`, {
+          signal: ac.signal,
+          credentials: "include",
+          headers: authHeaders()
+        });
+        if (!r.ok) throw new Error(`HTTP ${r.status}`);
+        const data = await r.json();
+        if (!Array.isArray(data)) throw new Error("malformed contracts response");
+        if (!cancelled) setContracts(data);
+      } catch (e) {
+        if (cancelled || e.name === "AbortError") return;
+        setError(e instanceof Error ? e.message : String(e));
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    })();
+    return () => {
+      cancelled = true;
+      ac.abort();
+    };
+  }, [apiBaseUrl]);
+  return { contracts, loading, error };
+}
+function registryFromContracts(contracts) {
+  const reg = {};
+  for (const c of contracts) {
+    if (!c.cartridge || !c.owns) continue;
+    const entities = Object.keys(c.owns).map((name) => ({
+      name,
+      route: `/_ws/bulk/${c.cartridge}/${name.toLowerCase()}`,
+      searchFields: []
+    }));
+    if (entities.length > 0) reg[c.cartridge] = entities;
+  }
+  return reg;
+}
+var DiagramView = ({ visibleIds, onSelectNode }) => {
+  const { contracts, loading, error } = useContracts();
+  const graph = React.useMemo(
+    () => buildEntityGraphModel(cartsFromContracts(contracts)),
+    [contracts]
+  );
+  const registry = React.useMemo(() => registryFromContracts(contracts), [contracts]);
+  if (graph.nodes.length === 0) {
+    let msg = "No installed cartridges with entities.";
+    if (loading) msg = "Loading entity graph\u2026";
+    else if (error) msg = `Failed to load contracts: ${error}`;
+    return /* @__PURE__ */ jsx2("div", { className: "p-3 text-[12px] text-muted-foreground", children: msg });
+  }
+  return /* @__PURE__ */ jsx2(
+    DiagramInner,
+    {
+      graph,
+      registry,
+      visibleIds,
+      onSelectNode
+    }
+  );
+};
+var DiagramInner = ({ graph, registry, visibleIds, onSelectNode }) => {
+  const rowCounts = useBulkRowCounts(registry);
+  const [focusedNodeId, setFocusedNodeId] = React.useState(null);
+  const visibleGraph = React.useMemo(
+    () => filterEntityGraphModel(graph, visibleIds),
+    [graph, visibleIds]
+  );
+  React.useEffect(() => {
+    if (focusedNodeId && !visibleIds.has(focusedNodeId)) setFocusedNodeId(null);
+  }, [focusedNodeId, visibleIds]);
+  const focusedConnections = React.useMemo(() => {
+    if (!focusedNodeId) {
+      return {
+        connectedIds: /* @__PURE__ */ new Set(),
+        edgeIds: /* @__PURE__ */ new Set(),
+        fieldsByNode: /* @__PURE__ */ new Map()
+      };
+    }
+    const connectedIds = /* @__PURE__ */ new Set([focusedNodeId]);
+    const edgeIds = /* @__PURE__ */ new Set();
+    const fieldsByNode = /* @__PURE__ */ new Map();
+    const addField = (nodeId, fieldName) => {
+      const fields = fieldsByNode.get(nodeId) ?? /* @__PURE__ */ new Set();
+      fields.add(fieldName);
+      fieldsByNode.set(nodeId, fields);
+    };
+    for (const edge of visibleGraph.edges) {
+      if (edge.source !== focusedNodeId && edge.target !== focusedNodeId) continue;
+      edgeIds.add(edge.id);
+      connectedIds.add(edge.source);
+      connectedIds.add(edge.target);
+      addField(edge.source, edge.sourceField);
+      addField(edge.target, edge.targetField);
+    }
+    return { connectedIds, edgeIds, fieldsByNode };
+  }, [focusedNodeId, visibleGraph.edges]);
+  const nodes = React.useMemo(
+    () => visibleGraph.nodes.map((node) => ({
+      id: node.id,
+      type: "entity",
+      position: node.position,
+      data: {
+        ...node,
+        rowCount: rowCounts[node.id] ?? node.rowCount,
+        highlight: focusedNodeId ? {
+          focused: node.id === focusedNodeId,
+          connected: focusedConnections.connectedIds.has(node.id) && node.id !== focusedNodeId,
+          dimmed: !focusedConnections.connectedIds.has(node.id),
+          fields: [...focusedConnections.fieldsByNode.get(node.id) ?? []]
+        } : void 0
+      }
+    })),
+    [focusedConnections, focusedNodeId, visibleGraph.nodes, rowCounts]
+  );
+  const edges = React.useMemo(() => {
+    const nodeById = new Map(visibleGraph.nodes.map((node) => [node.id, node]));
+    const laneCounts = /* @__PURE__ */ new Map();
+    return visibleGraph.edges.map((edge) => {
+      const source = nodeById.get(edge.source);
+      const target = nodeById.get(edge.target);
+      const sourceSide = source && target && source.position.x > target.position.x ? "left" : "right";
+      const targetSide = sourceSide === "left" ? "right" : "left";
+      const laneKey = `${edge.target}:${edge.targetField}:${targetSide}`;
+      const lane = laneCounts.get(laneKey) ?? 0;
+      laneCounts.set(laneKey, lane + 1);
+      const highlighted = !focusedNodeId || focusedConnections.edgeIds.has(edge.id);
+      return {
+        id: edge.id,
+        source: edge.source,
+        target: edge.target,
+        sourceHandle: `source-${edge.sourceField}-${sourceSide}`,
+        targetHandle: `target-${edge.targetField}-${targetSide}`,
+        type: "smoothstep",
+        pathOptions: { borderRadius: 8, offset: 22 + lane % 5 * 12 },
+        markerEnd: {
+          type: MarkerType.ArrowClosed,
+          color: highlighted ? "#2563eb" : "#64748b"
+        },
+        style: {
+          strokeWidth: focusedNodeId && highlighted ? 2.5 : 1.5,
+          stroke: highlighted ? "#2563eb" : "#64748b",
+          opacity: highlighted ? 1 : 0.16
+        }
+      };
+    });
+  }, [focusedConnections.edgeIds, focusedNodeId, visibleGraph.edges, visibleGraph.nodes]);
+  const onNodeClick = React.useCallback(
+    (_, node) => {
+      const data = node.data;
+      const nodeId = entityGraphId(data.cartridge, data.entity);
+      setFocusedNodeId((prev) => prev === nodeId ? null : nodeId);
+      onSelectNode?.(data.cartridge, data.entity);
+    },
+    [onSelectNode]
+  );
+  const onNodeContextMenu = React.useCallback(
+    (e, node) => {
+      e.preventDefault();
+      const data = node.data;
+      setFocusedNodeId(entityGraphId(data.cartridge, data.entity));
+      onSelectNode?.(data.cartridge, data.entity);
+    },
+    [onSelectNode]
+  );
+  const clearFocusedNode = React.useCallback(() => setFocusedNodeId(null), []);
+  return /* @__PURE__ */ jsx2("div", { className: "flex h-full min-h-0 w-full flex-col", children: /* @__PURE__ */ jsx2("div", { className: "relative min-h-0 flex-1 bg-zinc-950", children: nodes.length === 0 ? /* @__PURE__ */ jsx2("div", { className: "flex h-full items-center justify-center text-[12px] text-zinc-500", children: "No entities are visible." }) : /* @__PURE__ */ jsx2(ReactFlowProvider, { children: /* @__PURE__ */ jsxs2(
+    ReactFlow,
+    {
+      colorMode: "dark",
+      nodes,
+      edges,
+      nodeTypes,
+      fitView: true,
+      fitViewOptions: { padding: 0.2 },
+      minZoom: 0.1,
+      maxZoom: 1.6,
+      nodesDraggable: false,
+      nodesConnectable: false,
+      elementsSelectable: true,
+      panOnDrag: true,
+      zoomOnScroll: true,
+      zoomOnPinch: true,
+      selectionOnDrag: false,
+      onNodeClick,
+      onNodeContextMenu,
+      onPaneClick: clearFocusedNode,
+      proOptions: { hideAttribution: true },
+      children: [
+        /* @__PURE__ */ jsx2(FitOnReady, { fitKey: [...visibleIds].sort().join("|") }),
+        /* @__PURE__ */ jsx2(Background, { variant: BackgroundVariant.Dots, gap: 16, size: 1, color: "#3f3f46" }),
+        /* @__PURE__ */ jsx2(Controls, { showInteractive: false })
+      ]
+    }
+  ) }) }) });
+};
+
+export {
+  EntityNode,
+  cartsFromContracts,
+  entityGraphId,
+  buildEntityGraphModel,
+  filterEntityGraphModel,
+  DiagramView
+};
+//# sourceMappingURL=chunk-UPEOXMLZ.js.map