@emblemvault/identity-mesh 1.0.0

package/dist/index.mjs

@@ -0,0 +1,632 @@
+// 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/utils.tsx
+import { jsx } from "react/jsx-runtime";
+var defaultNodeTypes = {
+  visitor: { color: "#00f0ff", glow: "rgba(0, 240, 255, 0.5)", label: "Visitor", shape: "circle" },
+  device: { color: "#8b5cf6", glow: "rgba(139, 92, 246, 0.5)", label: "Device", shape: "circle" },
+  vault_account: { color: "#00f0ff", glow: "rgba(0, 240, 255, 0.6)", label: "Vault", shape: "hexagon" },
+  wallet: { color: "#a855f7", glow: "rgba(168, 85, 247, 0.6)", label: "Wallet", shape: "diamond" },
+  user_account: { color: "#00ff88", glow: "rgba(0, 255, 136, 0.6)", label: "User", shape: "circle" },
+  session: { color: "#ffb800", glow: "rgba(255, 184, 0, 0.5)", label: "Session", shape: "triangle" },
+  identity_link: { color: "#ff6b6b", glow: "rgba(255, 107, 107, 0.6)", label: "Same Identity", shape: "circle" }
+};
+function getCountryFlag(code) {
+  if (!code) return "";
+  const codePoints = code.toUpperCase().split("").map((char) => 127397 + char.charCodeAt(0));
+  return String.fromCodePoint(...codePoints);
+}
+function getDeviceIcon(platform, touch) {
+  const p = (platform == null ? void 0 : platform.toLowerCase()) || "";
+  if (p.includes("iphone") || p.includes("android")) return "\u{1F4F1}";
+  if (p.includes("ipad")) return "\u{1F4F1}";
+  if (touch) return "\u{1F4F1}";
+  if (p.includes("mac") || p.includes("win") || p.includes("linux")) return "\u{1F4BB}";
+  return "\u{1F5A5}\uFE0F";
+}
+function getBrowserIcon(browser) {
+  const b = (browser == null ? void 0 : browser.toLowerCase()) || "";
+  if (b.includes("chrome")) return "\u{1F310}";
+  if (b.includes("firefox")) return "\u{1F98A}";
+  if (b.includes("safari")) return "\u{1F9ED}";
+  if (b.includes("edge")) return "\u{1F4D0}";
+  return "\u{1F310}";
+}
+function renderNodeShape(nodeTypes, type, x, y, size, isHovered, isSelected) {
+  const config = nodeTypes[type] || nodeTypes.session || defaultNodeTypes.session;
+  const scale = isHovered ? 1.2 : isSelected ? 1.1 : 1;
+  const actualSize = size * scale;
+  const glowIntensity = isHovered ? 20 : isSelected ? 15 : 8;
+  const filter = `drop-shadow(0 0 ${glowIntensity}px ${config.glow})`;
+  const style = { filter, transition: "all 0.3s ease" };
+  switch (config.shape) {
+    case "hexagon": {
+      const hexPoints = Array.from({ length: 6 }, (_, i) => {
+        const angle = i / 6 * Math.PI * 2 - Math.PI / 2;
+        return `${x + Math.cos(angle) * actualSize},${y + Math.sin(angle) * actualSize}`;
+      }).join(" ");
+      return /* @__PURE__ */ jsx(
+        "polygon",
+        {
+          points: hexPoints,
+          fill: `${config.color}22`,
+          stroke: config.color,
+          strokeWidth: 2,
+          style
+        }
+      );
+    }
+    case "diamond": {
+      const diamondPoints = [
+        `${x},${y - actualSize}`,
+        `${x + actualSize * 0.7},${y}`,
+        `${x},${y + actualSize}`,
+        `${x - actualSize * 0.7},${y}`
+      ].join(" ");
+      return /* @__PURE__ */ jsx(
+        "polygon",
+        {
+          points: diamondPoints,
+          fill: `${config.color}22`,
+          stroke: config.color,
+          strokeWidth: 2,
+          style
+        }
+      );
+    }
+    case "triangle": {
+      const triPoints = [
+        `${x},${y - actualSize}`,
+        `${x + actualSize * 0.866},${y + actualSize * 0.5}`,
+        `${x - actualSize * 0.866},${y + actualSize * 0.5}`
+      ].join(" ");
+      return /* @__PURE__ */ jsx(
+        "polygon",
+        {
+          points: triPoints,
+          fill: `${config.color}22`,
+          stroke: config.color,
+          strokeWidth: 2,
+          style
+        }
+      );
+    }
+    default:
+      return /* @__PURE__ */ jsx(
+        "circle",
+        {
+          cx: x,
+          cy: y,
+          r: actualSize,
+          fill: `${config.color}22`,
+          stroke: config.color,
+          strokeWidth: 2,
+          style
+        }
+      );
+  }
+}
+
+// src/IdentityMesh.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function MeshRenderer({
+  links,
+  visitorDetails,
+  selectedVisitor,
+  onSelectVisitor,
+  nodeTypes,
+  height,
+  showLegend,
+  showIdentityCount
+}) {
+  const [hoveredNode, setHoveredNode] = useState2(null);
+  const [animationPhase, setAnimationPhase] = useState2(0);
+  useEffect2(() => {
+    const interval = setInterval(() => {
+      setAnimationPhase((p) => (p + 1) % 360);
+    }, 50);
+    return () => clearInterval(interval);
+  }, []);
+  const visitorGroups = useMemo(() => {
+    const groups = {};
+    links.forEach((link) => {
+      if (!groups[link.visitorId]) groups[link.visitorId] = [];
+      groups[link.visitorId].push(link);
+    });
+    return groups;
+  }, [links]);
+  const identityLinks = useMemo(() => {
+    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 = useMemo(() => {
+    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 = useMemo(() => {
+    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__ */ jsxs("div", { style: { position: "relative", width: "100%", height, overflow: "hidden" }, children: [
+    /* @__PURE__ */ jsxs("svg", { width: "100%", height: "100%", style: { position: "absolute", top: 0, left: 0, opacity: 0.1 }, children: [
+      /* @__PURE__ */ jsx2("defs", { children: /* @__PURE__ */ jsx2("pattern", { id: "mesh-grid", width: "40", height: "40", patternUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsx2("path", { d: "M 40 0 L 0 0 0 40", fill: "none", stroke: "currentColor", strokeWidth: "0.5" }) }) }),
+      /* @__PURE__ */ jsx2("rect", { width: "100%", height: "100%", fill: "url(#mesh-grid)" })
+    ] }),
+    /* @__PURE__ */ jsxs("svg", { width: "100%", height: "100%", viewBox: "0 0 800 600", style: { position: "relative" }, children: [
+      /* @__PURE__ */ jsx2("defs", { children: /* @__PURE__ */ jsxs("radialGradient", { id: "mesh-centerGlow", children: [
+        /* @__PURE__ */ jsx2("stop", { offset: "0%", stopColor: "rgba(0, 240, 255, 0.2)" }),
+        /* @__PURE__ */ jsx2("stop", { offset: "100%", stopColor: "rgba(0, 240, 255, 0)" })
+      ] }) }),
+      /* @__PURE__ */ jsx2("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__ */ jsxs("g", { children: [
+          /* @__PURE__ */ jsx2(
+            "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__ */ jsx2(
+            "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__ */ jsxs("g", { transform: `translate(${ctrlX}, ${ctrlY})`, children: [
+            /* @__PURE__ */ jsx2("rect", { x: -45, y: -12, width: 90, height: 24, rx: 12, fill: "rgba(255, 107, 107, 0.9)" }),
+            /* @__PURE__ */ jsxs("text", { x: 0, y: 4, textAnchor: "middle", fill: "white", fontSize: 9, fontWeight: "bold", children: [
+              "SAME ",
+              link.type === "wallet" ? "WALLET" : "VAULT"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx2("circle", { r: "4", fill: "#ff6b6b", children: /* @__PURE__ */ jsx2("animateMotion", { dur: "3s", repeatCount: "indefinite", path: `M ${p1.x} ${p1.y} Q ${ctrlX} ${ctrlY} ${p2.x} ${p2.y}` }) }),
+          /* @__PURE__ */ jsx2("circle", { r: "4", fill: "#ffd93d", children: /* @__PURE__ */ jsx2("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__ */ jsx2(
+            "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__ */ jsxs("g", { children: [
+          /* @__PURE__ */ jsx2(
+            "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__ */ jsx2("circle", { r: "3", fill: config.color, children: /* @__PURE__ */ jsx2("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__ */ jsxs(
+          "g",
+          {
+            style: { cursor: "pointer" },
+            onMouseEnter: () => setHoveredNode(`visitor-${visitorId}`),
+            onMouseLeave: () => setHoveredNode(null),
+            onClick: () => onSelectVisitor(isSelected ? null : visitorId),
+            children: [
+              hasIdentityLink && /* @__PURE__ */ jsx2(
+                "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__ */ jsx2(
+                "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__ */ jsx2(
+                "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__ */ jsx2("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__ */ jsx2("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__ */ jsxs("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__ */ jsxs(
+          "g",
+          {
+            style: { cursor: "pointer", opacity: selectedVisitor && !isVisitorSelected ? 0.3 : 1 },
+            onMouseEnter: () => setHoveredNode(link.id),
+            onMouseLeave: () => setHoveredNode(null),
+            children: [
+              isSharedId && /* @__PURE__ */ jsx2(
+                "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__ */ jsx2(
+                "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__ */ jsxs("g", { children: [
+                /* @__PURE__ */ jsx2("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__ */ jsxs("text", { x: pos.x, y: pos.y - 42, textAnchor: "middle", fill: config.color, fontSize: 10, fontWeight: "bold", children: [
+                  isSharedId ? "\u{1F517} " : "",
+                  config.label
+                ] }),
+                /* @__PURE__ */ jsx2("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__ */ jsxs("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__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+        /* @__PURE__ */ jsxs("svg", { width: 16, height: 16, viewBox: "0 0 24 24", children: [
+          config.shape === "hexagon" && /* @__PURE__ */ jsx2("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__ */ jsx2("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__ */ jsx2("circle", { cx: 12, cy: 12, r: 9, fill: config.color, fillOpacity: 0.3, stroke: config.color, strokeWidth: 2 }),
+          config.shape === "triangle" && /* @__PURE__ */ jsx2("polygon", { points: "12,2 22,20 2,20", fill: config.color, fillOpacity: 0.3, stroke: config.color, strokeWidth: 2 })
+        ] }),
+        /* @__PURE__ */ jsx2("span", { style: { fontSize: 10, color: "rgba(255, 255, 255, 0.7)" }, children: config.label })
+      ] }, key)),
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+        /* @__PURE__ */ jsx2("div", { style: { width: 20, height: 3, background: "#ff6b6b", borderRadius: 2 } }),
+        /* @__PURE__ */ jsx2("span", { style: { fontSize: 10, color: "rgba(255, 255, 255, 0.7)" }, children: "Same Identity" })
+      ] })
+    ] }),
+    showIdentityCount && identityLinks.length > 0 && /* @__PURE__ */ jsxs("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__ */ jsx2("div", { style: { fontSize: 10, color: "rgba(255, 255, 255, 0.6)", marginBottom: 4 }, children: "Cross-Device Identities" }),
+      /* @__PURE__ */ jsx2("div", { style: { fontSize: 20, fontWeight: "bold", color: "#ff6b6b" }, children: identityLinks.length })
+    ] })
+  ] });
+}
+function IdentityMesh({
+  apiUrl,
+  vaultId,
+  visitorId,
+  onError,
+  onNodeSelect,
+  theme,
+  className,
+  style,
+  height = 600,
+  showLegend = true,
+  showIdentityCount = true
+}) {
+  const [selectedVisitor, setSelectedVisitor] = useState2(null);
+  const { links, visitorDetails, loading, error } = useMeshData({
+    apiUrl,
+    vaultId,
+    visitorId,
+    onError
+  });
+  const nodeTypes = useMemo(() => {
+    const merged = { ...defaultNodeTypes };
+    if (theme == null ? void 0 : theme.nodeColors) {
+      Object.entries(theme.nodeColors).forEach(([key, value]) => {
+        if (value) merged[key] = value;
+      });
+    }
+    return merged;
+  }, [theme == null ? void 0 : theme.nodeColors]);
+  const handleSelectVisitor = (id) => {
+    setSelectedVisitor(id);
+    onNodeSelect == null ? void 0 : onNodeSelect(id, id ? "visitor" : null);
+  };
+  const containerStyle = {
+    background: (theme == null ? void 0 : theme.background) || "#0a0a0f",
+    color: (theme == null ? void 0 : theme.gridColor) || "#ffffff",
+    borderRadius: 8,
+    overflow: "hidden",
+    ...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: {
+        width: 40,
+        height: 40,
+        border: "3px solid rgba(0, 240, 255, 0.3)",
+        borderTopColor: "#00f0ff",
+        borderRadius: "50%",
+        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..." })
+    ] }) });
+  }
+  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 })
+    ] }) });
+  }
+  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__ */ jsx2("div", { className, style: containerStyle, children: /* @__PURE__ */ jsx2(
+    MeshRenderer,
+    {
+      links,
+      visitorDetails,
+      selectedVisitor,
+      onSelectVisitor: handleSelectVisitor,
+      nodeTypes,
+      height,
+      showLegend,
+      showIdentityCount
+    }
+  ) });
+}
+export {
+  IdentityMesh,
+  defaultNodeTypes,
+  getBrowserIcon,
+  getCountryFlag,
+  getDeviceIcon,
+  renderNodeShape,
+  useMeshData
+};

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@emblemvault/identity-mesh",
+  "version": "1.0.0",
+  "description": "Embeddable Identity Mesh visualization component for displaying cross-device identity connections",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts --clean",
+    "dev": "tsup src/index.ts --format cjs,esm --dts --watch",
+    "lint": "eslint src/",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0"
+  },
+  "keywords": [
+    "identity",
+    "mesh",
+    "fingerprint",
+    "visualization",
+    "react",
+    "emblemvault"
+  ],
+  "author": "EmblemVault",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/emblemvault/identity-mesh"
+  }
+}