drizzle-cube 0.4.26 → 0.4.27

package/dist/client/chunks/schema-visualization-BCLktQwU.js

@@ -0,0 +1,578 @@
+import { jsx as e, jsxs as u, Fragment as ve } from "react/jsx-runtime";
+import { createContext as we, useContext as Ce, useState as k, useEffect as P, Suspense as ke, lazy as Ee, useMemo as z, useRef as $, useCallback as _ } from "react";
+import { u as Se } from "./providers-Ds7DRmnO.js";
+import { g as ee } from "./icons-CwvgmdIP.js";
+const ne = we(null), Le = ne.Provider;
+function V() {
+  const c = Ce(ne);
+  if (!c) throw new Error("useXyflow must be used within XyflowProvider");
+  return c;
+}
+let Z = !1;
+function Me(c) {
+  return /* @__PURE__ */ e("div", { className: "dc:flex dc:items-center dc:justify-center dc:h-full dc:p-8", children: /* @__PURE__ */ u("div", { className: "dc:text-center dc:max-w-md", children: [
+    /* @__PURE__ */ e("div", { className: "dc:text-4xl dc:mb-4", children: "🔍" }),
+    /* @__PURE__ */ e("h3", { className: "dc:text-lg dc:font-semibold text-dc-text dc:mb-2", children: "Schema Visualization requires additional packages" }),
+    /* @__PURE__ */ e("p", { className: "dc:text-sm text-dc-text-secondary dc:mb-4", children: "Install the required dependencies to enable the interactive schema diagram:" }),
+    /* @__PURE__ */ e("code", { className: "dc:block dc:px-4 dc:py-2 dc:rounded bg-dc-surface-secondary dc:text-sm dc:font-mono text-dc-text dc:border border-dc-border", children: "npm install @xyflow/react elkjs" })
+  ] }) });
+}
+function te() {
+  return /* @__PURE__ */ e("div", { className: "dc:flex dc:items-center dc:justify-center dc:h-full", children: /* @__PURE__ */ u("div", { className: "dc:text-center", children: [
+    /* @__PURE__ */ e("div", { className: "dc:animate-spin dc:rounded-full dc:h-8 dc:w-8 dc:border-b-2 border-dc-accent dc:mx-auto dc:mb-2" }),
+    /* @__PURE__ */ e("p", { className: "dc:text-sm text-dc-text-muted", children: "Loading schema visualization..." })
+  ] }) });
+}
+const Re = Ee(async () => ({ default: (await Promise.resolve().then(() => Ae)).SchemaVisualization }));
+function Ke(c) {
+  const [d, i] = k(null), [s, o] = k(Z);
+  return P(() => {
+    if (Z) return;
+    let a = !1;
+    return import("@xyflow/react").then((p) => {
+      a || i(p);
+    }).catch(() => {
+      Z = !0, a || o(!0);
+    }), () => {
+      a = !0;
+    };
+  }, []), s ? /* @__PURE__ */ e(Me, { ...c }) : d ? /* @__PURE__ */ e(Le, { value: d, children: /* @__PURE__ */ e(ke, { fallback: /* @__PURE__ */ e(te, {}), children: /* @__PURE__ */ e(Re, { ...c }) }) }) : /* @__PURE__ */ e(te, {});
+}
+function Te({ data: c }) {
+  const { Handle: d, Position: i } = V(), { cube: s, onFieldClick: o, isHighlighted: a, highlightedFields: p, searchTerm: h } = c, N = (t, f) => {
+    o && o(s.name, t, f);
+  }, x = (t) => p.includes(t), b = (t) => {
+    if (!h?.trim()) return !0;
+    const f = h.toLowerCase();
+    return t.name.toLowerCase().includes(f) || t.title && t.title.toLowerCase().includes(f);
+  }, E = h?.trim() ? s.measures.some((t) => b(t)) || s.dimensions.some((t) => b(t)) : !0, w = (t, f, C) => {
+    const v = "dc:px-4 dc:py-2 dc:text-xs dc:cursor-pointer dc:transition-all dc:border-b border-dc-border last:dc:border-b-0 nodrag nopan";
+    return !E && h?.trim() ? f ? `${v} bg-dc-accent-bg text-dc-accent dc:font-semibold` : `${v} dc:hover:bg-dc-surface-hover text-dc-text-secondary` : h?.trim() && !b(t) ? `${v} dc:opacity-40 dc:hover:opacity-60 text-dc-text-muted` : h?.trim() && b(t) && !f ? `${v} dc:font-bold dc:hover:bg-dc-accent-bg` : f ? `${v} bg-dc-accent-bg text-dc-accent dc:font-semibold` : `${v} dc:hover:bg-dc-surface-hover text-dc-text-secondary`;
+  }, n = s.dimensions.filter((t) => t.type === "time"), g = s.dimensions.filter((t) => t.type !== "time");
+  return /* @__PURE__ */ u(
+    "div",
+    {
+      className: `
+        dc:border-2 dc:rounded-lg dc:shadow-lg dc:min-w-[280px] dc:overflow-hidden dc:transition-all
+        ${!E && h?.trim() ? "dc:opacity-30 dc:grayscale" : ""}
+        ${a ? "border-dc-accent dc:ring-2 ring-dc-accent" : "border-dc-border"}
+      `,
+      style: { backgroundColor: "var(--dc-surface)" },
+      children: [
+        /* @__PURE__ */ e("div", { className: `dc:px-4 dc:py-3 dc:transition-colors ${a ? "bg-dc-accent-bg" : "bg-dc-surface-secondary dc:hover:bg-dc-surface-hover"}`, children: /* @__PURE__ */ u("div", { className: "dc:flex dc:items-center dc:justify-between", children: [
+          /* @__PURE__ */ u("div", { children: [
+            /* @__PURE__ */ e("h3", { className: "dc:font-semibold text-dc-text dc:text-sm", children: s.title || s.name }),
+            s.description && /* @__PURE__ */ e("p", { className: "dc:text-xs text-dc-text-muted dc:mt-1 dc:line-clamp-2", children: s.description })
+          ] }),
+          /* @__PURE__ */ u("div", { className: "dc:text-xs text-dc-text-muted dc:ml-2", children: [
+            /* @__PURE__ */ u("div", { children: [
+              s.measures.length,
+              "M"
+            ] }),
+            /* @__PURE__ */ u("div", { children: [
+              s.dimensions.length,
+              "D"
+            ] })
+          ] })
+        ] }) }),
+        s.measures.length > 0 && /* @__PURE__ */ u("div", { className: "dc:border-t border-dc-border", children: [
+          /* @__PURE__ */ e("div", { className: "dc:px-4 dc:py-1.5 dc:border-b border-dc-border", style: { backgroundColor: "color-mix(in srgb, var(--dc-warning) 10%, var(--dc-surface))" }, children: /* @__PURE__ */ u("h4", { className: "dc:text-xs dc:font-medium text-dc-text-secondary dc:flex dc:items-center", children: [
+            /* @__PURE__ */ e("span", { className: "dc:w-2 dc:h-2 bg-dc-warning dc:rounded-full dc:mr-2" }),
+            "Measures (",
+            s.measures.length,
+            ")"
+          ] }) }),
+          /* @__PURE__ */ e("div", { className: "dc:max-h-64 dc:overflow-y-auto nowheel", children: s.measures.map((t) => {
+            const f = t.name.split(".")[1] || t.name, C = x(t.name);
+            return /* @__PURE__ */ e(
+              "div",
+              {
+                className: w(t, C),
+                onClick: () => N(f, "measure"),
+                title: t.title,
+                children: /* @__PURE__ */ u("div", { className: "dc:flex dc:items-center dc:justify-between", children: [
+                  /* @__PURE__ */ e("span", { className: "dc:font-mono dc:truncate", children: t.shortTitle || t.title || f }),
+                  /* @__PURE__ */ e("span", { className: "text-dc-text-muted dc:ml-2 dc:text-[10px] dc:uppercase", children: t.type })
+                ] })
+              },
+              t.name
+            );
+          }) })
+        ] }),
+        n.length > 0 && /* @__PURE__ */ u("div", { className: "dc:border-t border-dc-border", children: [
+          /* @__PURE__ */ e("div", { className: "dc:px-4 dc:py-1.5 dc:border-b border-dc-border", style: { backgroundColor: "color-mix(in srgb, var(--dc-accent) 10%, var(--dc-surface))" }, children: /* @__PURE__ */ u("h4", { className: "dc:text-xs dc:font-medium text-dc-text-secondary dc:flex dc:items-center", children: [
+            /* @__PURE__ */ e("span", { className: "dc:w-2 dc:h-2 bg-dc-accent dc:rounded-full dc:mr-2" }),
+            "Time Dimensions (",
+            n.length,
+            ")"
+          ] }) }),
+          /* @__PURE__ */ e("div", { className: "dc:max-h-64 dc:overflow-y-auto nowheel", children: n.map((t) => {
+            const f = t.name.split(".")[1] || t.name, C = x(t.name);
+            return /* @__PURE__ */ e(
+              "div",
+              {
+                className: w(t, C),
+                onClick: () => N(f, "dimension"),
+                title: t.title,
+                children: /* @__PURE__ */ u("div", { className: "dc:flex dc:items-center dc:justify-between", children: [
+                  /* @__PURE__ */ e("span", { className: "dc:font-mono dc:truncate", children: t.shortTitle || t.title || f }),
+                  /* @__PURE__ */ e("span", { className: "text-dc-text-muted dc:ml-2 dc:text-[10px] dc:uppercase", children: t.type })
+                ] })
+              },
+              t.name
+            );
+          }) })
+        ] }),
+        g.length > 0 && /* @__PURE__ */ u("div", { className: "dc:border-t border-dc-border", children: [
+          /* @__PURE__ */ e("div", { className: "dc:px-4 dc:py-1.5 dc:border-b border-dc-border", style: { backgroundColor: "color-mix(in srgb, var(--dc-success) 10%, var(--dc-surface))" }, children: /* @__PURE__ */ u("h4", { className: "dc:text-xs dc:font-medium text-dc-text-secondary dc:flex dc:items-center", children: [
+            /* @__PURE__ */ e("span", { className: "dc:w-2 dc:h-2 bg-dc-success dc:rounded-full dc:mr-2" }),
+            "Dimensions (",
+            g.length,
+            ")"
+          ] }) }),
+          /* @__PURE__ */ e("div", { className: "dc:max-h-64 dc:overflow-y-auto nowheel", children: g.map((t) => {
+            const f = t.name.split(".")[1] || t.name, C = x(t.name);
+            return /* @__PURE__ */ e(
+              "div",
+              {
+                className: w(t, C),
+                onClick: () => N(f, "dimension"),
+                title: t.title,
+                children: /* @__PURE__ */ u("div", { className: "dc:flex dc:items-center dc:justify-between", children: [
+                  /* @__PURE__ */ e("span", { className: "dc:font-mono dc:truncate", children: t.shortTitle || t.title || f }),
+                  /* @__PURE__ */ e("span", { className: "text-dc-text-muted dc:ml-2 dc:text-[10px] dc:uppercase", children: t.type })
+                ] })
+              },
+              t.name
+            );
+          }) })
+        ] }),
+        /* @__PURE__ */ e(d, { type: "source", position: i.Right, id: "right", className: "dc:opacity-0", isConnectable: !1 }),
+        /* @__PURE__ */ e(d, { type: "target", position: i.Left, id: "left", className: "dc:opacity-0", isConnectable: !1 }),
+        /* @__PURE__ */ e(d, { type: "source", position: i.Bottom, id: "bottom", className: "dc:opacity-0", isConnectable: !1 }),
+        /* @__PURE__ */ e(d, { type: "target", position: i.Top, id: "top", className: "dc:opacity-0", isConnectable: !1 })
+      ]
+    }
+  );
+}
+function $e({
+  sourceX: c,
+  sourceY: d,
+  targetX: i,
+  targetY: s,
+  sourcePosition: o,
+  targetPosition: a,
+  style: p = {},
+  data: h,
+  markerEnd: N
+}) {
+  const { getBezierPath: x, BaseEdge: b, EdgeLabelRenderer: l } = V(), [E, w, n] = x({
+    sourceX: c,
+    sourceY: d,
+    sourcePosition: o,
+    targetX: i,
+    targetY: s,
+    targetPosition: a
+  });
+  if (!h) return null;
+  const { relationship: g, joinFields: t } = h, f = (L) => {
+    switch (L) {
+      case "belongsTo":
+        return "∈";
+      // belongs to
+      case "hasOne":
+        return "1:1";
+      case "hasMany":
+        return "1:M";
+      case "belongsToMany":
+        return "M:M";
+      default:
+        return "?";
+    }
+  }, v = ((L) => {
+    switch (L) {
+      case "belongsTo":
+        return "#10b981";
+      case "hasOne":
+        return "#3b82f6";
+      case "hasMany":
+        return "#f59e0b";
+      case "belongsToMany":
+        return "#8b5cf6";
+      default:
+        return "#6b7280";
+    }
+  })(g.relationship), M = f(g.relationship);
+  return /* @__PURE__ */ u(ve, { children: [
+    /* @__PURE__ */ e(b, { path: E, markerEnd: N, style: { ...p, stroke: v } }),
+    /* @__PURE__ */ e(l, { children: /* @__PURE__ */ e(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          transform: `translate(-50%, -50%) translate(${w}px,${n}px)`,
+          fontSize: 10,
+          pointerEvents: "all"
+        },
+        className: "nodrag nopan",
+        children: /* @__PURE__ */ e(
+          "div",
+          {
+            className: "dc:border-2 dc:rounded-md dc:px-2 dc:py-1 dc:shadow-xs",
+            style: { backgroundColor: "var(--dc-surface)", borderColor: v },
+            children: /* @__PURE__ */ u("div", { className: "dc:text-center", children: [
+              /* @__PURE__ */ e("div", { className: "dc:font-bold dc:text-xs dc:mb-1", style: { color: v }, children: M }),
+              /* @__PURE__ */ e("div", { className: "dc:text-[9px] text-dc-text-muted dc:leading-tight", children: t.map((L, I) => /* @__PURE__ */ u("div", { className: "dc:font-mono", children: [
+                L.sourceField,
+                " → ",
+                L.targetField
+              ] }, I)) })
+            ] })
+          }
+        )
+      }
+    ) })
+  ] });
+}
+const _e = {
+  direction: "LR",
+  nodeWidth: 340,
+  nodeSep: 150,
+  rankSep: 350
+};
+function de(c) {
+  switch (c) {
+    case "TB":
+      return "top";
+    case "LR":
+      return "left";
+    default:
+      return "top";
+  }
+}
+function re(c) {
+  switch (c) {
+    case "TB":
+      return "bottom";
+    case "LR":
+      return "right";
+    default:
+      return "bottom";
+  }
+}
+function se(c) {
+  const d = c.data?.cube;
+  if (!d) return 300;
+  const i = d.description ? 80 : 56, s = 36, o = 34, a = 256, p = 30;
+  let h = i;
+  const N = d.measures?.length ?? 0, x = d.dimensions?.filter((l) => l.type === "time").length ?? 0, b = d.dimensions?.filter((l) => l.type !== "time").length ?? 0;
+  return N > 0 && (h += s + Math.min(N * o, a)), x > 0 && (h += s + Math.min(x * o, a)), b > 0 && (h += s + Math.min(b * o, a)), h + p;
+}
+let W = null;
+const Pe = import("elkjs/lib/elk.bundled.js").then((c) => {
+  const d = c.default || c;
+  return W = new d(), W;
+}).catch(() => null);
+async function Ie(c, d, i) {
+  if (await Pe, !W)
+    return { nodes: oe(c, i), edges: d };
+  const s = i.direction === "LR" ? "EAST" : "SOUTH", o = i.direction === "LR" ? "WEST" : "NORTH", a = /* @__PURE__ */ new Map(), p = /* @__PURE__ */ new Map();
+  d.forEach((n) => {
+    a.has(n.source) || a.set(n.source, []), a.get(n.source).push(n.id), p.has(n.target) || p.set(n.target, []), p.get(n.target).push(n.id);
+  });
+  const h = c.map((n) => {
+    const g = i.nodeWidth, t = se(n), f = a.get(n.id) || [], C = p.get(n.id) || [], v = [
+      ...f.map((M) => ({
+        id: `${n.id}__src__${M}`,
+        layoutOptions: { "elk.port.side": s }
+      })),
+      ...C.map((M) => ({
+        id: `${n.id}__tgt__${M}`,
+        layoutOptions: { "elk.port.side": o }
+      }))
+    ];
+    return {
+      id: n.id,
+      width: g,
+      height: t,
+      layoutOptions: { "elk.portConstraints": "FIXED_SIDE" },
+      ports: v
+    };
+  }), N = d.map((n) => ({
+    id: n.id,
+    sources: [`${n.source}__src__${n.id}`],
+    targets: [`${n.target}__tgt__${n.id}`]
+  })), b = {
+    id: "root",
+    layoutOptions: {
+      "elk.algorithm": "layered",
+      "elk.direction": i.direction === "LR" ? "RIGHT" : "DOWN",
+      "elk.edgeRouting": "SPLINES",
+      "elk.layered.edgeRouting.splines.mode": "CONSERVATIVE",
+      "elk.spacing.nodeNode": String(i.nodeSep),
+      "elk.layered.spacing.nodeNodeBetweenLayers": String(i.rankSep),
+      "elk.spacing.edgeNode": "60",
+      "elk.layered.spacing.edgeNodeBetweenLayers": "60",
+      "elk.spacing.edgeEdge": "25",
+      "elk.layered.nodePlacement.strategy": "NETWORK_SIMPLEX",
+      "elk.layered.crossingMinimization.strategy": "LAYER_SWEEP"
+    },
+    children: h,
+    edges: N
+  }, l = await W.layout(b), E = /* @__PURE__ */ new Map();
+  if (l.children)
+    for (const n of l.children)
+      E.set(n.id, { x: n.x, y: n.y });
+  return { nodes: c.map((n) => ({
+    ...n,
+    position: E.get(n.id) || n.position,
+    targetPosition: de(i.direction),
+    sourcePosition: re(i.direction)
+  })), edges: d };
+}
+function oe(c, d) {
+  let s = 0, o = 0;
+  return c.map((a) => {
+    const p = se(a);
+    o + p > 1200 && o > 0 && (s++, o = 0);
+    const h = { x: s * (d.nodeWidth + d.nodeSep), y: o };
+    return o += p + 40, {
+      ...a,
+      position: h,
+      sourcePosition: re(d.direction),
+      targetPosition: de(d.direction)
+    };
+  });
+}
+function Oe(c, d, i = {}) {
+  const s = z(
+    () => ({ ..._e, ...i }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [i.direction, i.nodeWidth, i.nodeSep, i.rankSep]
+  ), o = z(() => c.length === 0 ? "" : c.map((g) => g.id).sort().join(",") + "|" + d.map((g) => g.id).sort().join(","), [c, d]), a = $(c), p = $(d), h = $(s);
+  a.current = c, p.current = d, h.current = s;
+  const [N, x] = k("waiting"), [b, l] = k(null), [E, w] = k(""), n = $(0);
+  return P(() => {
+    if (!o) {
+      x("ready"), l(null), w("");
+      return;
+    }
+    const g = ++n.current;
+    x("computing"), Ie(a.current, p.current, h.current).then((t) => {
+      g === n.current && (l(t), w(o), x("ready"));
+    }).catch(() => {
+      g === n.current && (l({
+        nodes: oe(a.current, h.current),
+        edges: p.current
+      }), w(o), x("ready"));
+    });
+  }, [o]), N === "ready" && b && E === o ? { nodes: b.nodes, edges: b.edges, phase: "ready" } : { nodes: [], edges: [], phase: N };
+}
+const je = { cubeNode: Te }, ze = { relationshipEdge: $e };
+function Fe({ token: c }) {
+  const { useNodesInitialized: d, useReactFlow: i } = V(), s = d(), { fitView: o } = i(), a = $(0);
+  return P(() => {
+    c === 0 || c === a.current || s && (a.current = c, o({ padding: 0.1 }));
+  }, [c, s, o]), null;
+}
+const ce = [];
+function De(c) {
+  switch (c) {
+    case "belongsTo":
+      return "#10b981";
+    case "hasOne":
+      return "#3b82f6";
+    case "hasMany":
+      return "#f59e0b";
+    case "belongsToMany":
+      return "#8b5cf6";
+    default:
+      return "#6b7280";
+  }
+}
+function He({
+  className: c = "",
+  onFieldClick: d,
+  highlightedCubes: i,
+  highlightedFields: s,
+  searchTerm: o,
+  height: a = "100%"
+}) {
+  const {
+    ReactFlow: p,
+    Controls: h,
+    MiniMap: N,
+    Background: x,
+    applyNodeChanges: b
+  } = V(), { meta: l, metaLoading: E, metaError: w } = Se(), n = i || ce, g = s || ce, [t, f] = k(null), [C, v] = k(o || ""), [M, L] = k(0), [I, X] = k({}), [B, ie] = k(!1), ae = ee("search"), le = ee("close"), F = o !== void 0 ? o : C;
+  P(() => {
+    try {
+      const r = localStorage.getItem("drizzle-cube-erd-node-positions");
+      r && X(JSON.parse(r));
+    } catch {
+    }
+    ie(!0);
+  }, []);
+  const { structuralNodes: K, structuralEdges: G } = z(() => {
+    if (!l) return { structuralNodes: [], structuralEdges: [] };
+    const r = l.cubes.map((m, y) => ({
+      id: m.name,
+      type: "cubeNode",
+      // Placeholder position — ELK will override for auto-layout
+      position: { x: y % 3 * 400, y: Math.floor(y / 3) * 300 },
+      data: { cube: m }
+    })), S = [];
+    return l.cubes.forEach((m) => {
+      m.relationships && m.relationships.forEach((y, T) => {
+        y.relationship !== "belongsTo" && S.push({
+          id: `${m.name}-${y.targetCube}-${T}`,
+          source: m.name,
+          target: y.targetCube,
+          type: "relationshipEdge",
+          data: { relationship: y, joinFields: y.joinFields || [] },
+          animated: !1,
+          style: { stroke: De(y.relationship), strokeWidth: 2 }
+        });
+      });
+    }), { structuralNodes: r, structuralEdges: S };
+  }, [l]), R = M > 0 || B && Object.keys(I).length === 0, { nodes: Y, edges: q, phase: ue } = Oe(
+    R ? K : [],
+    R ? G : [],
+    { direction: "LR", nodeWidth: 340, nodeSep: 150, rankSep: 350 }
+  ), O = _((r) => ({
+    cube: r,
+    onFieldClick: d,
+    isHighlighted: n.includes(r.name),
+    highlightedFields: g,
+    searchTerm: F
+  }), [d, n, g, F]), j = !R || ue === "ready", D = z(() => !l || !j || !B ? [] : R && Y.length > 0 ? Y.map((r) => ({
+    ...r,
+    data: O(r.data?.cube || l.cubes.find((S) => S.name === r.id))
+  })) : K.map((r) => ({
+    ...r,
+    position: I[r.id] || r.position,
+    data: O(r.data?.cube)
+  })), [l, j, B, R, Y, K, I, O]), U = z(() => !l || !j ? [] : R && q.length > 0 ? q : G, [l, j, R, q, G]), [J, H] = k([]), [me, he] = k([]), A = $(""), [fe, pe] = k(0);
+  P(() => {
+    if (D.length === 0) return;
+    const r = D.map((m) => `${m.id}:${Math.round(m.position.x)},${Math.round(m.position.y)}`).join("|");
+    if (r === A.current) return;
+    const S = A.current === "";
+    A.current = r, H(D), he(U), S && pe((m) => m + 1);
+  }, [D, U]);
+  const Q = $("");
+  P(() => {
+    const r = `${n.join(",")}|${g.join(",")}|${F}|${String(d)}`;
+    r !== Q.current && (Q.current = r, !(J.length === 0 || !l) && H((S) => S.map((m) => {
+      const y = l.cubes.find((T) => T.name === m.id);
+      return y ? { ...m, data: O(y) } : m;
+    })));
+  }, [n, g, F, d, J.length, l, O]);
+  const ge = _((r) => {
+    H((m) => b(r, m)), r.filter(
+      (m) => m.type === "position" && "dragging" in m && m.dragging === !1
+    ).length > 0 && H((m) => {
+      const y = {};
+      m.forEach((T) => {
+        T.position && (y[T.id] = T.position);
+      });
+      try {
+        localStorage.setItem("drizzle-cube-erd-node-positions", JSON.stringify(y));
+      } catch {
+      }
+      return X(y), m;
+    });
+  }, []), be = _((r) => {
+  }, []), xe = _((r) => {
+    r.preventDefault(), r.stopPropagation(), f({ x: r.clientX, y: r.clientY });
+  }, []), ye = _(() => {
+    t && f(null);
+  }, [t]), Ne = _(() => {
+    X({}), A.current = "";
+    try {
+      localStorage.removeItem("drizzle-cube-erd-node-positions");
+    } catch {
+    }
+    L((r) => r + 1), f(null);
+  }, []);
+  return E ? /* @__PURE__ */ e("div", { className: `dc:flex dc:items-center dc:justify-center dc:h-96 ${c}`, children: /* @__PURE__ */ u("div", { className: "dc:text-center", children: [
+    /* @__PURE__ */ e("div", { className: "dc:animate-spin dc:rounded-full dc:h-8 dc:w-8 dc:border-b-2 border-dc-accent dc:mx-auto dc:mb-2" }),
+    /* @__PURE__ */ e("p", { className: "text-dc-text-muted", children: "Loading cube schema..." })
+  ] }) }) : w ? /* @__PURE__ */ e("div", { className: `dc:flex dc:items-center dc:justify-center dc:h-96 ${c}`, children: /* @__PURE__ */ u("div", { className: "dc:text-center text-dc-error", children: [
+    /* @__PURE__ */ e("p", { className: "dc:font-medium", children: "Failed to load cube schema" }),
+    /* @__PURE__ */ e("p", { className: "dc:text-sm dc:mt-1", children: w })
+  ] }) }) : !l || l.cubes.length === 0 ? /* @__PURE__ */ e("div", { className: `dc:flex dc:items-center dc:justify-center dc:h-96 ${c}`, children: /* @__PURE__ */ u("div", { className: "dc:text-center text-dc-text-muted", children: [
+    /* @__PURE__ */ e("p", { className: "dc:font-medium", children: "No cubes found" }),
+    /* @__PURE__ */ e("p", { className: "dc:text-sm dc:mt-1", children: "Register some cubes to see the relationship diagram" })
+  ] }) }) : j ? /* @__PURE__ */ u("div", { className: `dc:flex dc:flex-col ${c}`, style: { height: a, minHeight: 400 }, children: [
+    o === void 0 && /* @__PURE__ */ u("div", { className: "dc:px-3 dc:py-2 dc:border-b border-dc-border bg-dc-surface dc:flex dc:items-center dc:gap-2 dc:flex-shrink-0", children: [
+      /* @__PURE__ */ e(ae, { className: "dc:w-4 dc:h-4 text-dc-text-muted" }),
+      /* @__PURE__ */ e(
+        "input",
+        {
+          type: "text",
+          value: C,
+          onChange: (r) => v(r.target.value),
+          placeholder: "Search cubes and fields...",
+          className: "dc:flex-1 dc:text-sm dc:bg-transparent dc:outline-none text-dc-text dc:placeholder:text-dc-text-muted"
+        }
+      ),
+      C && /* @__PURE__ */ e("button", { onClick: () => v(""), className: "text-dc-text-muted dc:hover:text-dc-text", children: /* @__PURE__ */ e(le, { className: "dc:w-3 dc:h-3" }) })
+    ] }),
+    /* @__PURE__ */ e("div", { className: "dc:relative dc:flex-1 dc:min-h-0", children: /* @__PURE__ */ e("div", { style: { position: "absolute", inset: 0 }, children: /* @__PURE__ */ u(
+      p,
+      {
+        nodes: J,
+        edges: me,
+        onNodesChange: ge,
+        onEdgesChange: be,
+        nodeTypes: je,
+        edgeTypes: ze,
+        connectionMode: "loose",
+        minZoom: 0.1,
+        maxZoom: 2,
+        proOptions: { hideAttribution: !0 },
+        onPaneContextMenu: xe,
+        onPaneClick: ye,
+        children: [
+          /* @__PURE__ */ e(h, {}),
+          /* @__PURE__ */ e(
+            N,
+            {
+              nodeColor: (r) => n.includes(r.id) ? "#8b5cf6" : "#e5e7eb",
+              maskColor: "rgb(240, 242, 246, 0.7)"
+            }
+          ),
+          /* @__PURE__ */ e(x, { variant: "dots", gap: 12, size: 1 }),
+          /* @__PURE__ */ e(Fe, { token: fe })
+        ]
+      }
+    ) }) }),
+    t && /* @__PURE__ */ e(
+      "div",
+      {
+        className: "dc:fixed dc:z-50 bg-dc-surface dc:rounded-md dc:shadow-lg dc:border border-dc-border dc:py-1 dc:min-w-[120px]",
+        style: { left: t.x, top: t.y },
+        children: /* @__PURE__ */ e(
+          "button",
+          {
+            onClick: Ne,
+            className: "dc:w-full dc:px-3 dc:py-2 dc:text-sm text-dc-text-secondary dc:hover:bg-dc-surface-hover dc:text-left",
+            children: "Auto Layout"
+          }
+        )
+      }
+    )
+  ] }) : /* @__PURE__ */ e("div", { className: `dc:flex dc:items-center dc:justify-center dc:h-96 ${c}`, children: /* @__PURE__ */ u("div", { className: "dc:text-center", children: [
+    /* @__PURE__ */ e("div", { className: "dc:animate-spin dc:rounded-full dc:h-8 dc:w-8 dc:border-b-2 border-dc-accent dc:mx-auto dc:mb-2" }),
+    /* @__PURE__ */ e("p", { className: "text-dc-text-muted", children: "Computing layout..." })
+  ] }) });
+}
+const Ae = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  SchemaVisualization: He
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  Ke as S
+};
+//# sourceMappingURL=schema-visualization-BCLktQwU.js.map