@emblemvault/identity-mesh 1.0.0 → 2.0.0

package/dist/index.mjs

@@ -1,67 +1,5 @@
-// src/IdentityMesh.tsx
-import { useState as useState2, useEffect as useEffect2, useMemo } from "react";
-
-// src/hooks/useMeshData.ts
-import { useState, useEffect, useCallback } from "react";
-function useMeshData({
-  apiUrl,
-  vaultId,
-  visitorId,
-  onError
-}) {
-  const [links, setLinks] = useState([]);
-  const [visitorDetails, setVisitorDetails] = useState({});
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState(null);
-  const fetchData = useCallback(async () => {
-    if (!apiUrl || !vaultId || !visitorId) {
-      setLoading(false);
-      return;
-    }
-    setLoading(true);
-    setError(null);
-    try {
-      const response = await fetch(apiUrl, {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json"
-        },
-        body: JSON.stringify({ vaultId, visitorId })
-      });
-      const data = await response.json();
-      if (!response.ok || !data.success) {
-        const err = new Error(data.error || `HTTP ${response.status}`);
-        setError(err);
-        onError == null ? void 0 : onError(err);
-        setLinks([]);
-        setVisitorDetails({});
-        return;
-      }
-      if (data.data) {
-        setLinks(data.data.links);
-        setVisitorDetails(data.data.visitorDetails);
-      }
-    } catch (err) {
-      const error2 = err instanceof Error ? err : new Error("Unknown error");
-      setError(error2);
-      onError == null ? void 0 : onError(error2);
-      setLinks([]);
-      setVisitorDetails({});
-    } finally {
-      setLoading(false);
-    }
-  }, [apiUrl, vaultId, visitorId, onError]);
-  useEffect(() => {
-    fetchData();
-  }, [fetchData]);
-  return {
-    links,
-    visitorDetails,
-    loading,
-    error,
-    refetch: fetchData
-  };
-}
+// src/IdentityMeshRenderer.tsx
+import { useState, useEffect, useMemo } from "react";
 
 // src/utils.tsx
 import { jsx } from "react/jsx-runtime";
@@ -170,21 +108,27 @@ function renderNodeShape(nodeTypes, type, x, y, size, isHovered, isSelected) {
   }
 }
 
-// src/IdentityMesh.tsx
+// src/IdentityMeshRenderer.tsx
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-function MeshRenderer({
-  links,
-  visitorDetails,
-  selectedVisitor,
-  onSelectVisitor,
-  nodeTypes,
-  height,
-  showLegend,
-  showIdentityCount
+function IdentityMeshRenderer({
+  links = [],
+  visitorDetails = {},
+  selectedVisitor: externalSelectedVisitor,
+  onSelectVisitor: externalOnSelectVisitor,
+  nodeTypes: customNodeTypes,
+  height = 600,
+  showLegend = true,
+  showIdentityCount = true
 }) {
-  const [hoveredNode, setHoveredNode] = useState2(null);
-  const [animationPhase, setAnimationPhase] = useState2(0);
-  useEffect2(() => {
+  const [hoveredNode, setHoveredNode] = useState(null);
+  const [animationPhase, setAnimationPhase] = useState(0);
+  const [internalSelectedVisitor, setInternalSelectedVisitor] = useState(null);
+  const selectedVisitor = externalSelectedVisitor != null ? externalSelectedVisitor : internalSelectedVisitor;
+  const onSelectVisitor = externalOnSelectVisitor != null ? externalOnSelectVisitor : setInternalSelectedVisitor;
+  const nodeTypes = useMemo(() => {
+    return { ...defaultNodeTypes, ...customNodeTypes };
+  }, [customNodeTypes]);
+  useEffect(() => {
     const interval = setInterval(() => {
       setAnimationPhase((p) => (p + 1) % 360);
     }, 50);
@@ -539,6 +483,441 @@ function MeshRenderer({
     ] })
   ] });
 }
+
+// src/IdentityMesh.tsx
+import { useState as useState3, useEffect as useEffect3, useMemo as useMemo2 } from "react";
+
+// src/hooks/useMeshData.ts
+import { useState as useState2, useEffect as useEffect2, useCallback } from "react";
+function useMeshData({
+  apiUrl,
+  vaultId,
+  visitorId,
+  onError
+}) {
+  const [links, setLinks] = useState2([]);
+  const [visitorDetails, setVisitorDetails] = useState2({});
+  const [loading, setLoading] = useState2(true);
+  const [error, setError] = useState2(null);
+  const fetchData = useCallback(async () => {
+    if (!apiUrl || !vaultId || !visitorId) {
+      setLoading(false);
+      return;
+    }
+    setLoading(true);
+    setError(null);
+    try {
+      const response = await fetch(apiUrl, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({ vaultId, visitorId })
+      });
+      const data = await response.json();
+      if (!response.ok || !data.success) {
+        const err = new Error(data.error || `HTTP ${response.status}`);
+        setError(err);
+        onError == null ? void 0 : onError(err);
+        setLinks([]);
+        setVisitorDetails({});
+        return;
+      }
+      if (data.data) {
+        setLinks(data.data.links);
+        setVisitorDetails(data.data.visitorDetails);
+      }
+    } catch (err) {
+      const error2 = err instanceof Error ? err : new Error("Unknown error");
+      setError(error2);
+      onError == null ? void 0 : onError(error2);
+      setLinks([]);
+      setVisitorDetails({});
+    } finally {
+      setLoading(false);
+    }
+  }, [apiUrl, vaultId, visitorId, onError]);
+  useEffect2(() => {
+    fetchData();
+  }, [fetchData]);
+  return {
+    links,
+    visitorDetails,
+    loading,
+    error,
+    refetch: fetchData
+  };
+}
+
+// src/IdentityMesh.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function MeshRenderer({
+  links,
+  visitorDetails,
+  selectedVisitor,
+  onSelectVisitor,
+  nodeTypes,
+  height,
+  showLegend,
+  showIdentityCount
+}) {
+  const [hoveredNode, setHoveredNode] = useState3(null);
+  const [animationPhase, setAnimationPhase] = useState3(0);
+  useEffect3(() => {
+    const interval = setInterval(() => {
+      setAnimationPhase((p) => (p + 1) % 360);
+    }, 50);
+    return () => clearInterval(interval);
+  }, []);
+  const visitorGroups = useMemo2(() => {
+    const groups = {};
+    links.forEach((link) => {
+      if (!groups[link.visitorId]) groups[link.visitorId] = [];
+      groups[link.visitorId].push(link);
+    });
+    return groups;
+  }, [links]);
+  const identityLinks = useMemo2(() => {
+    const externalIdToVisitors = {};
+    links.forEach((link) => {
+      if (!externalIdToVisitors[link.externalId]) {
+        externalIdToVisitors[link.externalId] = /* @__PURE__ */ new Set();
+      }
+      externalIdToVisitors[link.externalId].add(link.visitorId);
+    });
+    const pairs = [];
+    const seenPairs = /* @__PURE__ */ new Set();
+    Object.entries(externalIdToVisitors).forEach(([externalId, visitors2]) => {
+      var _a;
+      if (visitors2.size > 1) {
+        const visitorList = Array.from(visitors2);
+        for (let i = 0; i < visitorList.length; i++) {
+          for (let j = i + 1; j < visitorList.length; j++) {
+            const pairKey = [visitorList[i], visitorList[j]].sort().join("-");
+            if (!seenPairs.has(pairKey)) {
+              seenPairs.add(pairKey);
+              const linkType = ((_a = links.find((l) => l.externalId === externalId)) == null ? void 0 : _a.externalType) || "unknown";
+              pairs.push({ v1: visitorList[i], v2: visitorList[j], sharedId: externalId, type: linkType });
+            }
+          }
+        }
+      }
+    });
+    return pairs;
+  }, [links]);
+  const visitors = Object.keys(visitorGroups);
+  const visitorPositions = useMemo2(() => {
+    const centerX = 400;
+    const centerY = 300;
+    const radius = Math.min(200, 80 + visitors.length * 25);
+    return visitors.reduce((acc, visitor, i) => {
+      const angle = i / visitors.length * Math.PI * 2 - Math.PI / 2;
+      acc[visitor] = {
+        x: centerX + Math.cos(angle) * radius,
+        y: centerY + Math.sin(angle) * radius
+      };
+      return acc;
+    }, {});
+  }, [visitors]);
+  const linkPositions = useMemo2(() => {
+    const positions = {};
+    Object.entries(visitorGroups).forEach(([visitorId, visitorLinks]) => {
+      const visitorPos = visitorPositions[visitorId];
+      if (!visitorPos) return;
+      const linkRadius = 60;
+      visitorLinks.forEach((link, i) => {
+        const angle = i / visitorLinks.length * Math.PI * 2 - Math.PI / 2;
+        positions[link.id] = {
+          x: visitorPos.x + Math.cos(angle) * linkRadius,
+          y: visitorPos.y + Math.sin(angle) * linkRadius,
+          type: link.externalType
+        };
+      });
+    });
+    return positions;
+  }, [visitorGroups, visitorPositions]);
+  return /* @__PURE__ */ jsxs2("div", { style: { position: "relative", width: "100%", height, overflow: "hidden" }, children: [
+    /* @__PURE__ */ jsxs2("svg", { width: "100%", height: "100%", style: { position: "absolute", top: 0, left: 0, opacity: 0.1 }, children: [
+      /* @__PURE__ */ jsx3("defs", { children: /* @__PURE__ */ jsx3("pattern", { id: "mesh-grid", width: "40", height: "40", patternUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsx3("path", { d: "M 40 0 L 0 0 0 40", fill: "none", stroke: "currentColor", strokeWidth: "0.5" }) }) }),
+      /* @__PURE__ */ jsx3("rect", { width: "100%", height: "100%", fill: "url(#mesh-grid)" })
+    ] }),
+    /* @__PURE__ */ jsxs2("svg", { width: "100%", height: "100%", viewBox: "0 0 800 600", style: { position: "relative" }, children: [
+      /* @__PURE__ */ jsx3("defs", { children: /* @__PURE__ */ jsxs2("radialGradient", { id: "mesh-centerGlow", children: [
+        /* @__PURE__ */ jsx3("stop", { offset: "0%", stopColor: "rgba(0, 240, 255, 0.2)" }),
+        /* @__PURE__ */ jsx3("stop", { offset: "100%", stopColor: "rgba(0, 240, 255, 0)" })
+      ] }) }),
+      /* @__PURE__ */ jsx3("circle", { cx: "400", cy: "300", r: "280", fill: "url(#mesh-centerGlow)" }),
+      identityLinks.map((link, idx) => {
+        const p1 = visitorPositions[link.v1];
+        const p2 = visitorPositions[link.v2];
+        if (!p1 || !p2) return null;
+        const midX = (p1.x + p2.x) / 2;
+        const midY = (p1.y + p2.y) / 2;
+        const dx = p2.x - p1.x;
+        const dy = p2.y - p1.y;
+        const dist = Math.sqrt(dx * dx + dy * dy);
+        const curvature = Math.min(50, dist * 0.2);
+        const perpX = -dy / dist * curvature;
+        const perpY = dx / dist * curvature;
+        const ctrlX = midX + perpX;
+        const ctrlY = midY + perpY;
+        return /* @__PURE__ */ jsxs2("g", { children: [
+          /* @__PURE__ */ jsx3(
+            "path",
+            {
+              d: `M ${p1.x} ${p1.y} Q ${ctrlX} ${ctrlY} ${p2.x} ${p2.y}`,
+              fill: "none",
+              stroke: "#ff6b6b",
+              strokeWidth: 8,
+              strokeOpacity: 0.2,
+              style: { filter: "blur(4px)" }
+            }
+          ),
+          /* @__PURE__ */ jsx3(
+            "path",
+            {
+              d: `M ${p1.x} ${p1.y} Q ${ctrlX} ${ctrlY} ${p2.x} ${p2.y}`,
+              fill: "none",
+              stroke: "#ff6b6b",
+              strokeWidth: 3,
+              strokeOpacity: 0.8,
+              strokeDasharray: "8 4",
+              style: { strokeDashoffset: -animationPhase * 0.5 }
+            }
+          ),
+          /* @__PURE__ */ jsxs2("g", { transform: `translate(${ctrlX}, ${ctrlY})`, children: [
+            /* @__PURE__ */ jsx3("rect", { x: -45, y: -12, width: 90, height: 24, rx: 12, fill: "rgba(255, 107, 107, 0.9)" }),
+            /* @__PURE__ */ jsxs2("text", { x: 0, y: 4, textAnchor: "middle", fill: "white", fontSize: 9, fontWeight: "bold", children: [
+              "SAME ",
+              link.type === "wallet" ? "WALLET" : "VAULT"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx3("circle", { r: "4", fill: "#ff6b6b", children: /* @__PURE__ */ jsx3("animateMotion", { dur: "3s", repeatCount: "indefinite", path: `M ${p1.x} ${p1.y} Q ${ctrlX} ${ctrlY} ${p2.x} ${p2.y}` }) }),
+          /* @__PURE__ */ jsx3("circle", { r: "4", fill: "#ffd93d", children: /* @__PURE__ */ jsx3("animateMotion", { dur: "3s", repeatCount: "indefinite", begin: "1.5s", path: `M ${p1.x} ${p1.y} Q ${ctrlX} ${ctrlY} ${p2.x} ${p2.y}` }) })
+        ] }, `identity-${idx}`);
+      }),
+      visitors.map(
+        (v1, i) => visitors.slice(i + 1).map((v2) => {
+          const p1 = visitorPositions[v1];
+          const p2 = visitorPositions[v2];
+          if (!p1 || !p2) return null;
+          const distance = Math.sqrt((p2.x - p1.x) ** 2 + (p2.y - p1.y) ** 2);
+          const opacity = Math.max(0, 0.08 - distance / 3e3);
+          if (identityLinks.some((l) => l.v1 === v1 && l.v2 === v2 || l.v1 === v2 && l.v2 === v1)) return null;
+          return /* @__PURE__ */ jsx3(
+            "line",
+            {
+              x1: p1.x,
+              y1: p1.y,
+              x2: p2.x,
+              y2: p2.y,
+              stroke: "rgba(0, 240, 255, 0.15)",
+              strokeWidth: 1,
+              strokeDasharray: "2 4",
+              style: { opacity, strokeDashoffset: animationPhase % 6 }
+            },
+            `mesh-${v1}-${v2}`
+          );
+        })
+      ),
+      links.map((link) => {
+        const visitorPos = visitorPositions[link.visitorId];
+        const linkPos = linkPositions[link.id];
+        if (!visitorPos || !linkPos) return null;
+        const config = nodeTypes[link.externalType] || nodeTypes.session || defaultNodeTypes.session;
+        const isVisitorSelected = selectedVisitor === link.visitorId;
+        const isLinkHovered = hoveredNode === link.id;
+        return /* @__PURE__ */ jsxs2("g", { children: [
+          /* @__PURE__ */ jsx3(
+            "line",
+            {
+              x1: visitorPos.x,
+              y1: visitorPos.y,
+              x2: linkPos.x,
+              y2: linkPos.y,
+              stroke: config.color,
+              strokeWidth: isVisitorSelected || isLinkHovered ? 2 : 1,
+              strokeOpacity: isVisitorSelected ? 0.8 : 0.3,
+              strokeDasharray: link.confidence && link.confidence < 0.9 ? "4 2" : "none"
+            }
+          ),
+          isVisitorSelected && /* @__PURE__ */ jsx3("circle", { r: "3", fill: config.color, children: /* @__PURE__ */ jsx3("animateMotion", { dur: "2s", repeatCount: "indefinite", path: `M${visitorPos.x},${visitorPos.y} L${linkPos.x},${linkPos.y}` }) })
+        ] }, `connection-${link.id}`);
+      }),
+      visitors.map((visitorId) => {
+        var _a, _b, _c, _d;
+        const pos = visitorPositions[visitorId];
+        if (!pos) return null;
+        const isSelected = selectedVisitor === visitorId;
+        const isHovered = hoveredNode === `visitor-${visitorId}`;
+        const linkCount = ((_a = visitorGroups[visitorId]) == null ? void 0 : _a.length) || 0;
+        const details = visitorDetails[visitorId];
+        const hasIdentityLink = identityLinks.some((l) => l.v1 === visitorId || l.v2 === visitorId);
+        return /* @__PURE__ */ jsxs2(
+          "g",
+          {
+            style: { cursor: "pointer" },
+            onMouseEnter: () => setHoveredNode(`visitor-${visitorId}`),
+            onMouseLeave: () => setHoveredNode(null),
+            onClick: () => onSelectVisitor(isSelected ? null : visitorId),
+            children: [
+              hasIdentityLink && /* @__PURE__ */ jsx3(
+                "circle",
+                {
+                  cx: pos.x,
+                  cy: pos.y,
+                  r: isSelected ? 42 : isHovered ? 40 : 36,
+                  fill: "none",
+                  stroke: "#ff6b6b",
+                  strokeWidth: 2,
+                  strokeDasharray: "6 3",
+                  style: {
+                    transform: `rotate(${-animationPhase}deg)`,
+                    transformOrigin: `${pos.x}px ${pos.y}px`,
+                    filter: "drop-shadow(0 0 8px rgba(255, 107, 107, 0.6))"
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx3(
+                "circle",
+                {
+                  cx: pos.x,
+                  cy: pos.y,
+                  r: isSelected ? 35 : isHovered ? 32 : 28,
+                  fill: "none",
+                  stroke: "rgba(0, 240, 255, 0.3)",
+                  strokeWidth: 2,
+                  strokeDasharray: "4 2",
+                  style: {
+                    transform: `rotate(${animationPhase}deg)`,
+                    transformOrigin: `${pos.x}px ${pos.y}px`
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx3(
+                "circle",
+                {
+                  cx: pos.x,
+                  cy: pos.y,
+                  r: isSelected ? 24 : isHovered ? 22 : 18,
+                  fill: "rgba(0, 20, 30, 0.95)",
+                  stroke: "#00f0ff",
+                  strokeWidth: isSelected ? 3 : 2,
+                  style: {
+                    filter: `drop-shadow(0 0 ${isSelected ? 20 : isHovered ? 15 : 10}px rgba(0, 240, 255, 0.6))`,
+                    transition: "all 0.3s ease"
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx3("text", { x: pos.x, y: pos.y + 5, textAnchor: "middle", fill: "#00f0ff", fontSize: isSelected ? 16 : 14, fontWeight: "bold", children: details ? getDeviceIcon((_b = details.fingerprint) == null ? void 0 : _b.platform, (_c = details.fingerprint) == null ? void 0 : _c.touchSupport) : linkCount }),
+              /* @__PURE__ */ jsx3("text", { x: pos.x, y: pos.y + 48, textAnchor: "middle", fill: "rgba(255, 255, 255, 0.8)", fontSize: 10, fontFamily: "monospace", children: visitorId.length > 12 ? visitorId.slice(0, 12) + "..." : visitorId }),
+              ((_d = details == null ? void 0 : details.location) == null ? void 0 : _d.country) && /* @__PURE__ */ jsxs2("text", { x: pos.x, y: pos.y + 60, textAnchor: "middle", fill: "rgba(255, 255, 255, 0.5)", fontSize: 9, children: [
+                getCountryFlag(details.location.country),
+                " ",
+                details.location.city || details.location.region
+              ] })
+            ]
+          },
+          `visitor-${visitorId}`
+        );
+      }),
+      links.map((link) => {
+        const pos = linkPositions[link.id];
+        if (!pos) return null;
+        const isHovered = hoveredNode === link.id;
+        const isVisitorSelected = selectedVisitor === link.visitorId;
+        const config = nodeTypes[link.externalType] || nodeTypes.session || defaultNodeTypes.session;
+        const isSharedId = identityLinks.some((l) => l.sharedId === link.externalId);
+        return /* @__PURE__ */ jsxs2(
+          "g",
+          {
+            style: { cursor: "pointer", opacity: selectedVisitor && !isVisitorSelected ? 0.3 : 1 },
+            onMouseEnter: () => setHoveredNode(link.id),
+            onMouseLeave: () => setHoveredNode(null),
+            children: [
+              isSharedId && /* @__PURE__ */ jsx3(
+                "circle",
+                {
+                  cx: pos.x,
+                  cy: pos.y,
+                  r: 22,
+                  fill: "none",
+                  stroke: "#ff6b6b",
+                  strokeWidth: 2,
+                  strokeOpacity: 0.6,
+                  strokeDasharray: "3 2"
+                }
+              ),
+              renderNodeShape(nodeTypes, link.externalType, pos.x, pos.y, 14, isHovered, isVisitorSelected),
+              link.confidence && /* @__PURE__ */ jsx3(
+                "circle",
+                {
+                  cx: pos.x,
+                  cy: pos.y,
+                  r: 18,
+                  fill: "none",
+                  stroke: config.color,
+                  strokeWidth: 2,
+                  strokeOpacity: 0.3,
+                  strokeDasharray: `${link.confidence * 113} 113`,
+                  strokeLinecap: "round",
+                  transform: `rotate(-90, ${pos.x}, ${pos.y})`
+                }
+              ),
+              isHovered && /* @__PURE__ */ jsxs2("g", { children: [
+                /* @__PURE__ */ jsx3("rect", { x: pos.x - 70, y: pos.y - 60, width: 140, height: 48, rx: 6, fill: "rgba(0, 10, 20, 0.95)", stroke: config.color, strokeWidth: 1 }),
+                /* @__PURE__ */ jsxs2("text", { x: pos.x, y: pos.y - 42, textAnchor: "middle", fill: config.color, fontSize: 10, fontWeight: "bold", children: [
+                  isSharedId ? "\u{1F517} " : "",
+                  config.label
+                ] }),
+                /* @__PURE__ */ jsx3("text", { x: pos.x, y: pos.y - 28, textAnchor: "middle", fill: "rgba(255, 255, 255, 0.7)", fontSize: 9, fontFamily: "monospace", children: link.externalId.length > 18 ? link.externalId.slice(0, 18) + "..." : link.externalId })
+              ] })
+            ]
+          },
+          `node-${link.id}`
+        );
+      })
+    ] }),
+    showLegend && /* @__PURE__ */ jsxs2("div", { style: {
+      position: "absolute",
+      bottom: 20,
+      left: 20,
+      display: "flex",
+      gap: 16,
+      flexWrap: "wrap",
+      padding: "12px 16px",
+      background: "rgba(0, 10, 20, 0.9)",
+      borderRadius: 8,
+      border: "1px solid rgba(0, 240, 255, 0.2)"
+    }, children: [
+      Object.entries(nodeTypes).filter(([key]) => !["visitor", "device", "identity_link"].includes(key)).map(([key, config]) => /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+        /* @__PURE__ */ jsxs2("svg", { width: 16, height: 16, viewBox: "0 0 24 24", children: [
+          config.shape === "hexagon" && /* @__PURE__ */ jsx3("polygon", { points: "12,2 22,7 22,17 12,22 2,17 2,7", fill: config.color, fillOpacity: 0.3, stroke: config.color, strokeWidth: 2 }),
+          config.shape === "diamond" && /* @__PURE__ */ jsx3("polygon", { points: "12,2 22,12 12,22 2,12", fill: config.color, fillOpacity: 0.3, stroke: config.color, strokeWidth: 2 }),
+          config.shape === "circle" && /* @__PURE__ */ jsx3("circle", { cx: 12, cy: 12, r: 9, fill: config.color, fillOpacity: 0.3, stroke: config.color, strokeWidth: 2 }),
+          config.shape === "triangle" && /* @__PURE__ */ jsx3("polygon", { points: "12,2 22,20 2,20", fill: config.color, fillOpacity: 0.3, stroke: config.color, strokeWidth: 2 })
+        ] }),
+        /* @__PURE__ */ jsx3("span", { style: { fontSize: 10, color: "rgba(255, 255, 255, 0.7)" }, children: config.label })
+      ] }, key)),
+      /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+        /* @__PURE__ */ jsx3("div", { style: { width: 20, height: 3, background: "#ff6b6b", borderRadius: 2 } }),
+        /* @__PURE__ */ jsx3("span", { style: { fontSize: 10, color: "rgba(255, 255, 255, 0.7)" }, children: "Same Identity" })
+      ] })
+    ] }),
+    showIdentityCount && identityLinks.length > 0 && /* @__PURE__ */ jsxs2("div", { style: {
+      position: "absolute",
+      top: 20,
+      left: 20,
+      padding: "10px 14px",
+      background: "rgba(255, 107, 107, 0.15)",
+      borderRadius: 8,
+      border: "1px solid rgba(255, 107, 107, 0.4)"
+    }, children: [
+      /* @__PURE__ */ jsx3("div", { style: { fontSize: 10, color: "rgba(255, 255, 255, 0.6)", marginBottom: 4 }, children: "Cross-Device Identities" }),
+      /* @__PURE__ */ jsx3("div", { style: { fontSize: 20, fontWeight: "bold", color: "#ff6b6b" }, children: identityLinks.length })
+    ] })
+  ] });
+}
 function IdentityMesh({
   apiUrl,
   vaultId,
@@ -552,14 +931,14 @@ function IdentityMesh({
   showLegend = true,
   showIdentityCount = true
 }) {
-  const [selectedVisitor, setSelectedVisitor] = useState2(null);
+  const [selectedVisitor, setSelectedVisitor] = useState3(null);
   const { links, visitorDetails, loading, error } = useMeshData({
     apiUrl,
     vaultId,
     visitorId,
     onError
   });
-  const nodeTypes = useMemo(() => {
+  const nodeTypes = useMemo2(() => {
     const merged = { ...defaultNodeTypes };
     if (theme == null ? void 0 : theme.nodeColors) {
       Object.entries(theme.nodeColors).forEach(([key, value]) => {
@@ -580,8 +959,8 @@ function IdentityMesh({
     ...style
   };
   if (loading) {
-    return /* @__PURE__ */ jsx2("div", { className, style: { ...containerStyle, height, display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsxs("div", { style: { textAlign: "center" }, children: [
-      /* @__PURE__ */ jsx2("div", { style: {
+    return /* @__PURE__ */ jsx3("div", { className, style: { ...containerStyle, height, display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsxs2("div", { style: { textAlign: "center" }, children: [
+      /* @__PURE__ */ jsx3("div", { style: {
         width: 40,
         height: 40,
         border: "3px solid rgba(0, 240, 255, 0.3)",
@@ -590,24 +969,24 @@ function IdentityMesh({
         animation: "spin 1s linear infinite",
         margin: "0 auto 12px"
       } }),
-      /* @__PURE__ */ jsx2("style", { children: `@keyframes spin { to { transform: rotate(360deg); } }` }),
-      /* @__PURE__ */ jsx2("div", { style: { color: "rgba(255, 255, 255, 0.6)", fontSize: 14 }, children: "Loading mesh data..." })
+      /* @__PURE__ */ jsx3("style", { children: `@keyframes spin { to { transform: rotate(360deg); } }` }),
+      /* @__PURE__ */ jsx3("div", { style: { color: "rgba(255, 255, 255, 0.6)", fontSize: 14 }, children: "Loading mesh data..." })
     ] }) });
   }
   if (error) {
-    return /* @__PURE__ */ jsx2("div", { className, style: { ...containerStyle, height, display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", padding: 24 }, children: [
-      /* @__PURE__ */ jsx2("div", { style: { fontSize: 32, marginBottom: 12 }, children: "\u26A0\uFE0F" }),
-      /* @__PURE__ */ jsx2("div", { style: { color: "#ff6b6b", fontSize: 14, marginBottom: 8 }, children: "Failed to load mesh" }),
-      /* @__PURE__ */ jsx2("div", { style: { color: "rgba(255, 255, 255, 0.5)", fontSize: 12 }, children: error.message })
+    return /* @__PURE__ */ jsx3("div", { className, style: { ...containerStyle, height, display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsxs2("div", { style: { textAlign: "center", padding: 24 }, children: [
+      /* @__PURE__ */ jsx3("div", { style: { fontSize: 32, marginBottom: 12 }, children: "\u26A0\uFE0F" }),
+      /* @__PURE__ */ jsx3("div", { style: { color: "#ff6b6b", fontSize: 14, marginBottom: 8 }, children: "Failed to load mesh" }),
+      /* @__PURE__ */ jsx3("div", { style: { color: "rgba(255, 255, 255, 0.5)", fontSize: 12 }, children: error.message })
     ] }) });
   }
   if (links.length === 0) {
-    return /* @__PURE__ */ jsx2("div", { className, style: { ...containerStyle, height, display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", padding: 24 }, children: [
-      /* @__PURE__ */ jsx2("div", { style: { fontSize: 32, marginBottom: 12 }, children: "\u{1F517}" }),
-      /* @__PURE__ */ jsx2("div", { style: { color: "rgba(255, 255, 255, 0.6)", fontSize: 14 }, children: "No connections found" })
+    return /* @__PURE__ */ jsx3("div", { className, style: { ...containerStyle, height, display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsxs2("div", { style: { textAlign: "center", padding: 24 }, children: [
+      /* @__PURE__ */ jsx3("div", { style: { fontSize: 32, marginBottom: 12 }, children: "\u{1F517}" }),
+      /* @__PURE__ */ jsx3("div", { style: { color: "rgba(255, 255, 255, 0.6)", fontSize: 14 }, children: "No connections found" })
     ] }) });
   }
-  return /* @__PURE__ */ jsx2("div", { className, style: containerStyle, children: /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx3("div", { className, style: containerStyle, children: /* @__PURE__ */ jsx3(
     MeshRenderer,
     {
       links,
@@ -623,6 +1002,7 @@ function IdentityMesh({
 }
 export {
   IdentityMesh,
+  IdentityMeshRenderer,
   defaultNodeTypes,
   getBrowserIcon,
   getCountryFlag,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@emblemvault/identity-mesh",
-  "version": "1.0.0",
-  "description": "Embeddable Identity Mesh visualization component for displaying cross-device identity connections",
+  "version": "2.0.0",
+  "description": "Identity Mesh visualization component - use with @emblemvault/embeddable for embedding",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",