@elizaos/agent 2.0.0-alpha.519 → 2.0.0-alpha.521

package/packages/app-core/src/components/pages/RelationshipsGraphPanel.js

@@ -1,696 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "@elizaos/ui";
-import { Crown, Fingerprint, Frown, Link2, Meh, MessageCircle, Minus, Plus, Smile, } from "lucide-react";
-import { useCallback, useEffect, useMemo, useRef, useState, } from "react";
-const GRAPH_WIDTH = 1320;
-const GRAPH_HEIGHT = 760;
-const GRAPH_PADDING = 92;
-const MIN_ZOOM = 0.4;
-const MAX_ZOOM = 2.0;
-const ZOOM_STEP = 0.12;
-const WHEEL_ZOOM_FACTOR = 0.0015;
-const MAX_GLOBAL_NODES = 60;
-const MAX_FOCUSED_NODES = 60;
-const MAX_DIRECT_NEIGHBORS = 36;
-const MAX_SECOND_WAVE_NEIGHBORS = 18;
-const EDGE_COLORS = {
-    positive: "rgba(34, 197, 94, 0.64)",
-    neutral: "rgba(240, 185, 11, 0.48)",
-    negative: "rgba(239, 68, 68, 0.62)",
-};
-function toTimestamp(value) {
-    if (!value)
-        return 0;
-    const timestamp = Date.parse(value);
-    return Number.isFinite(timestamp) ? timestamp : 0;
-}
-function nodeRadius(person) {
-    return Math.min(46, 18 +
-        Math.sqrt(Math.max(1, person.memberEntityIds.length * 2 + person.relationshipCount * 3)) *
-            4);
-}
-function shortLabel(value, maxLength = 18) {
-    return value.length > maxLength ? `${value.slice(0, maxLength - 1)}…` : value;
-}
-function edgeTone(sentiment) {
-    if (sentiment === "positive" || sentiment === "negative")
-        return sentiment;
-    return "neutral";
-}
-function edgeColor(edge) {
-    return EDGE_COLORS[edgeTone(edge.sentiment)];
-}
-function nodeInitials(value) {
-    const words = value.trim().split(/\s+/).filter(Boolean);
-    const source = words.length >= 2
-        ? `${words[0]?.charAt(0) ?? ""}${words[1]?.charAt(0) ?? ""}`
-        : value.trim().slice(0, 2);
-    return source.toUpperCase();
-}
-function rankPerson(person) {
-    return (person.relationshipCount * 10 +
-        person.memberEntityIds.length * 4 +
-        person.factCount * 2 +
-        toTimestamp(person.lastInteractionAt) / 1000000000000);
-}
-function sortEdges(edges) {
-    return [...edges].sort((left, right) => {
-        const strengthDiff = right.strength - left.strength;
-        if (strengthDiff !== 0)
-            return strengthDiff;
-        const interactionDiff = right.interactionCount - left.interactionCount;
-        if (interactionDiff !== 0)
-            return interactionDiff;
-        return (toTimestamp(right.lastInteractionAt) - toTimestamp(left.lastInteractionAt));
-    });
-}
-function otherEndpoint(edge, personId) {
-    return edge.sourcePersonId === personId
-        ? edge.targetPersonId
-        : edge.sourcePersonId;
-}
-function buildEdgeIndex(edges) {
-    const index = new Map();
-    for (const edge of edges) {
-        if (!index.has(edge.sourcePersonId)) {
-            index.set(edge.sourcePersonId, []);
-        }
-        if (!index.has(edge.targetPersonId)) {
-            index.set(edge.targetPersonId, []);
-        }
-        index.get(edge.sourcePersonId)?.push(edge);
-        index.get(edge.targetPersonId)?.push(edge);
-    }
-    return index;
-}
-function buildVisibleGraph(snapshot, included, modeLabel) {
-    const people = snapshot.people.filter((person) => included.has(person.groupId));
-    return {
-        people,
-        relationships: snapshot.relationships.filter((edge) => included.has(edge.sourcePersonId) && included.has(edge.targetPersonId)),
-        modeLabel,
-        truncated: people.length < snapshot.people.length,
-    };
-}
-function selectVisibleGraph(snapshot, selectedGroupId) {
-    const edgeIndex = buildEdgeIndex(snapshot.relationships);
-    const peopleById = new Map(snapshot.people.map((person) => [person.groupId, person]));
-    const rankedPeople = [...snapshot.people].sort((left, right) => rankPerson(right) - rankPerson(left));
-    const included = new Set();
-    if (selectedGroupId && peopleById.has(selectedGroupId)) {
-        included.add(selectedGroupId);
-        const directEdges = sortEdges(edgeIndex.get(selectedGroupId) ?? []);
-        for (const edge of directEdges.slice(0, MAX_DIRECT_NEIGHBORS)) {
-            included.add(otherEndpoint(edge, selectedGroupId));
-        }
-        const secondWaveScores = new Map();
-        for (const groupId of included) {
-            if (groupId === selectedGroupId)
-                continue;
-            for (const edge of edgeIndex.get(groupId) ?? []) {
-                const neighborId = otherEndpoint(edge, groupId);
-                if (included.has(neighborId))
-                    continue;
-                const score = edge.strength * 6 +
-                    Math.log1p(edge.interactionCount) * 2 +
-                    (edge.sentiment === "positive" ? 0.75 : 0);
-                secondWaveScores.set(neighborId, (secondWaveScores.get(neighborId) ?? 0) + score);
-            }
-        }
-        const secondWave = Array.from(secondWaveScores.entries())
-            .sort((left, right) => right[1] - left[1])
-            .slice(0, MAX_SECOND_WAVE_NEIGHBORS)
-            .map(([groupId]) => groupId);
-        for (const groupId of secondWave) {
-            included.add(groupId);
-        }
-        for (const person of rankedPeople) {
-            if (included.size >= MAX_FOCUSED_NODES)
-                break;
-            included.add(person.groupId);
-        }
-        return buildVisibleGraph(snapshot, included, `Focused on ${peopleById.get(selectedGroupId)?.displayName ?? "selected person"}`);
-    }
-    if (snapshot.people.length <= MAX_GLOBAL_NODES) {
-        return {
-            people: snapshot.people,
-            relationships: snapshot.relationships,
-            modeLabel: "All visible people",
-            truncated: false,
-        };
-    }
-    for (const person of rankedPeople) {
-        if (included.size >= MAX_GLOBAL_NODES)
-            break;
-        included.add(person.groupId);
-    }
-    for (const edge of sortEdges(snapshot.relationships)) {
-        if (included.size >= MAX_GLOBAL_NODES)
-            break;
-        included.add(edge.sourcePersonId);
-        included.add(edge.targetPersonId);
-    }
-    return buildVisibleGraph(snapshot, included, "Most connected subgraph");
-}
-function buildConnectedComponents(people, edges) {
-    const adjacency = new Map();
-    for (const person of people) {
-        adjacency.set(person.groupId, new Set());
-    }
-    for (const edge of edges) {
-        adjacency.get(edge.sourcePersonId)?.add(edge.targetPersonId);
-        adjacency.get(edge.targetPersonId)?.add(edge.sourcePersonId);
-    }
-    const components = [];
-    const visited = new Set();
-    for (const person of people) {
-        if (visited.has(person.groupId)) {
-            continue;
-        }
-        const queue = [person.groupId];
-        const component = [];
-        visited.add(person.groupId);
-        while (queue.length > 0) {
-            const current = queue.shift();
-            if (!current)
-                continue;
-            component.push(current);
-            for (const neighbor of adjacency.get(current) ?? []) {
-                if (visited.has(neighbor))
-                    continue;
-                visited.add(neighbor);
-                queue.push(neighbor);
-            }
-        }
-        components.push(component);
-    }
-    return components.sort((left, right) => right.length - left.length);
-}
-function seededUnit(seed, salt) {
-    let hash = 2166136261 ^ salt;
-    for (let index = 0; index < seed.length; index += 1) {
-        hash ^= seed.charCodeAt(index);
-        hash = Math.imul(hash, 16777619);
-    }
-    return ((hash >>> 0) % 1000) / 1000;
-}
-function clamp(value, min, max) {
-    return Math.max(min, Math.min(max, value));
-}
-function runForceLayout(componentPeople, componentEdges, center, options) {
-    const { width, height, pinnedGroupId, iterations = 320 } = options;
-    const positions = new Map();
-    if (componentPeople.length === 1) {
-        const only = componentPeople[0];
-        positions.set(only.groupId, {
-            x: center.x,
-            y: center.y,
-            vx: 0,
-            vy: 0,
-            pinned: true,
-        });
-        return new Map(Array.from(positions, ([groupId, position]) => [
-            groupId,
-            { x: position.x, y: position.y },
-        ]));
-    }
-    // Strength-weighted seed: stronger neighbors of the pinned node start closer.
-    for (const person of componentPeople) {
-        if (person.groupId === pinnedGroupId) {
-            positions.set(person.groupId, {
-                x: center.x,
-                y: center.y,
-                vx: 0,
-                vy: 0,
-                pinned: true,
-            });
-            continue;
-        }
-        const seedAngle = seededUnit(person.groupId, 3) * Math.PI * 2;
-        const seedRadius = (0.18 + seededUnit(person.groupId, 4) * 0.36) *
-            Math.min(width, height) *
-            0.5;
-        positions.set(person.groupId, {
-            x: center.x + Math.cos(seedAngle) * seedRadius,
-            y: center.y + Math.sin(seedAngle) * seedRadius,
-            vx: 0,
-            vy: 0,
-            pinned: false,
-        });
-    }
-    const edgeStrengthByPair = new Map();
-    for (const edge of componentEdges) {
-        const key = edge.sourcePersonId < edge.targetPersonId
-            ? `${edge.sourcePersonId}|${edge.targetPersonId}`
-            : `${edge.targetPersonId}|${edge.sourcePersonId}`;
-        edgeStrengthByPair.set(key, Math.max(edgeStrengthByPair.get(key) ?? 0, edge.strength));
-    }
-    const peopleCount = componentPeople.length;
-    const halfWidth = width * 0.46;
-    const halfHeight = height * 0.46;
-    for (let iteration = 0; iteration < iterations; iteration += 1) {
-        const cooling = 1 - iteration / (iterations * 1.4);
-        const forces = new Map();
-        for (const person of componentPeople) {
-            forces.set(person.groupId, { x: 0, y: 0 });
-        }
-        // Repulsion: every pair pushes apart, scaled to keep readable spacing.
-        for (let leftIndex = 0; leftIndex < peopleCount; leftIndex += 1) {
-            const left = componentPeople[leftIndex];
-            const leftPosition = positions.get(left.groupId);
-            const leftForces = forces.get(left.groupId);
-            if (!leftPosition || !leftForces)
-                continue;
-            for (let rightIndex = leftIndex + 1; rightIndex < peopleCount; rightIndex += 1) {
-                const right = componentPeople[rightIndex];
-                const rightPosition = positions.get(right.groupId);
-                const rightForces = forces.get(right.groupId);
-                if (!rightPosition || !rightForces)
-                    continue;
-                const dx = rightPosition.x - leftPosition.x;
-                const dy = rightPosition.y - leftPosition.y;
-                const distance = Math.max(8, Math.hypot(dx, dy));
-                const minimumDistance = nodeRadius(left) + nodeRadius(right) + 64;
-                const repulsion = minimumDistance * minimumDistance * 1.4;
-                const forceMagnitude = repulsion / (distance * distance);
-                const fx = (dx / distance) * forceMagnitude;
-                const fy = (dy / distance) * forceMagnitude;
-                leftForces.x -= fx;
-                leftForces.y -= fy;
-                rightForces.x += fx;
-                rightForces.y += fy;
-            }
-        }
-        // Spring attraction: stronger edges pull harder + sit closer.
-        for (const edge of componentEdges) {
-            const sourcePosition = positions.get(edge.sourcePersonId);
-            const targetPosition = positions.get(edge.targetPersonId);
-            const sourceForces = forces.get(edge.sourcePersonId);
-            const targetForces = forces.get(edge.targetPersonId);
-            if (!sourcePosition ||
-                !targetPosition ||
-                !sourceForces ||
-                !targetForces) {
-                continue;
-            }
-            const dx = targetPosition.x - sourcePosition.x;
-            const dy = targetPosition.y - sourcePosition.y;
-            const distance = Math.max(1, Math.hypot(dx, dy));
-            const strength = clamp(edge.strength, 0.05, 1);
-            // Strong edges pull to ~110px, weak edges drift to ~260px.
-            const idealDistance = 280 - strength * 170;
-            const springStrength = 0.012 + strength * 0.06;
-            const forceMagnitude = (distance - idealDistance) * springStrength;
-            const fx = (dx / distance) * forceMagnitude;
-            const fy = (dy / distance) * forceMagnitude;
-            sourceForces.x += fx;
-            sourceForces.y += fy;
-            targetForces.x -= fx;
-            targetForces.y -= fy;
-        }
-        // Mild centering — keeps disconnected stragglers from drifting forever.
-        for (const person of componentPeople) {
-            const position = positions.get(person.groupId);
-            const force = forces.get(person.groupId);
-            if (!position || !force)
-                continue;
-            force.x += (center.x - position.x) * 0.012;
-            force.y += (center.y - position.y) * 0.012;
-        }
-        // Integrate.
-        for (const person of componentPeople) {
-            const position = positions.get(person.groupId);
-            const force = forces.get(person.groupId);
-            if (!position || !force)
-                continue;
-            if (position.pinned) {
-                position.x = center.x;
-                position.y = center.y;
-                position.vx = 0;
-                position.vy = 0;
-                continue;
-            }
-            const damping = 0.78 + 0.16 * cooling;
-            position.vx = (position.vx + force.x * 0.04) * damping;
-            position.vy = (position.vy + force.y * 0.04) * damping;
-            position.x = clamp(position.x + position.vx, center.x - halfWidth, center.x + halfWidth);
-            position.y = clamp(position.y + position.vy, center.y - halfHeight, center.y + halfHeight);
-        }
-    }
-    return new Map(Array.from(positions, ([groupId, position]) => [
-        groupId,
-        { x: position.x, y: position.y },
-    ]));
-}
-function buildFocusedNodePositions(people, edges, selectedGroupId) {
-    if (!people.some((person) => person.groupId === selectedGroupId)) {
-        return null;
-    }
-    const center = { x: GRAPH_WIDTH / 2, y: GRAPH_HEIGHT / 2 };
-    return runForceLayout(people, edges, center, {
-        width: GRAPH_WIDTH - GRAPH_PADDING,
-        height: GRAPH_HEIGHT - GRAPH_PADDING,
-        pinnedGroupId: selectedGroupId,
-        iterations: 360,
-    });
-}
-function buildNodePositions(people, edges, selectedGroupId) {
-    if (selectedGroupId) {
-        const focusedPositions = buildFocusedNodePositions(people, edges, selectedGroupId);
-        if (focusedPositions) {
-            return focusedPositions;
-        }
-    }
-    const components = buildConnectedComponents(people, edges);
-    const peopleById = new Map(people.map((person) => [person.groupId, person]));
-    const componentCount = Math.max(components.length, 1);
-    const columns = Math.ceil(Math.sqrt(componentCount));
-    const rows = Math.ceil(componentCount / columns);
-    const innerWidth = GRAPH_WIDTH - GRAPH_PADDING * 2;
-    const innerHeight = GRAPH_HEIGHT - GRAPH_PADDING * 2;
-    const cellWidth = innerWidth / columns;
-    const cellHeight = innerHeight / rows;
-    const positions = new Map();
-    components.forEach((component, index) => {
-        const column = index % columns;
-        const row = Math.floor(index / columns);
-        const center = {
-            x: GRAPH_PADDING + cellWidth * (column + 0.5),
-            y: GRAPH_PADDING + cellHeight * (row + 0.5),
-        };
-        const componentPeople = component
-            .map((groupId) => peopleById.get(groupId))
-            .filter((person) => person !== undefined);
-        const componentSet = new Set(component);
-        const componentEdges = edges.filter((edge) => componentSet.has(edge.sourcePersonId) &&
-            componentSet.has(edge.targetPersonId));
-        const componentPositions = runForceLayout(componentPeople, componentEdges, center, {
-            width: cellWidth,
-            height: cellHeight,
-            pinnedGroupId: null,
-            iterations: 280,
-        });
-        for (const [groupId, position] of componentPositions) {
-            positions.set(groupId, position);
-        }
-    });
-    return positions;
-}
-function GraphIconButton({ label, disabled = false, onClick, children, }) {
-    return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { type: "button", size: "sm", variant: "outline", className: "h-8 w-8 rounded-full p-0", "aria-label": label, disabled: disabled, onClick: onClick, children: children }) }), _jsx(TooltipContent, { children: label })] }));
-}
-function GraphLegend() {
-    const items = [
-        {
-            icon: _jsx(Crown, { className: "h-3.5 w-3.5 text-[rgba(99,102,241,0.86)]" }),
-            label: "Owner",
-        },
-        {
-            icon: _jsx(Smile, { className: "h-3.5 w-3.5 text-[rgba(34,197,94,0.9)]" }),
-            label: "Positive",
-        },
-        {
-            icon: _jsx(Meh, { className: "h-3.5 w-3.5 text-[rgba(240,185,11,0.9)]" }),
-            label: "Neutral",
-        },
-        {
-            icon: _jsx(Frown, { className: "h-3.5 w-3.5 text-[rgba(239,68,68,0.9)]" }),
-            label: "Negative",
-        },
-    ];
-    return (_jsx("div", { className: "flex items-center gap-1", children: items.map((item) => (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { role: "img", "aria-label": item.label, className: "inline-flex h-7 w-7 items-center justify-center rounded-full border border-border/24 bg-card/40", children: item.icon }) }), _jsx(TooltipContent, { children: item.label })] }, item.label))) }));
-}
-function GraphTooltip({ state }) {
-    if (!state)
-        return null;
-    const style = {
-        position: "absolute",
-        left: state.x,
-        top: state.y,
-        transform: "translate(-50%, -100%) translateY(-12px)",
-        pointerEvents: "none",
-        zIndex: 50,
-    };
-    if (state.kind === "node") {
-        const { person } = state;
-        return (_jsxs("div", { style: style, className: "rounded-xl border border-border/40 bg-card/95 px-3 py-2.5 shadow-lg backdrop-blur-md", children: [_jsxs("div", { className: "flex items-center gap-1.5 text-sm font-semibold text-txt", children: [person.isOwner ? (_jsx(Crown, { className: "h-3.5 w-3.5 text-[rgba(99,102,241,0.86)]" })) : null, person.displayName] }), _jsxs("div", { className: "mt-1.5 flex flex-wrap items-center gap-1.5 text-2xs text-muted", children: [_jsxs("span", { className: "inline-flex items-center gap-1", children: [_jsx(Fingerprint, { className: "h-3 w-3" }), person.memberEntityIds.length] }), _jsxs("span", { className: "inline-flex items-center gap-1", children: [_jsx(Link2, { className: "h-3 w-3" }), person.relationshipCount] }), _jsxs("span", { className: "inline-flex items-center gap-1", children: [_jsx(MessageCircle, { className: "h-3 w-3" }), person.factCount] })] })] }));
-    }
-    const { edge } = state;
-    const SentimentIcon = edge.sentiment === "positive"
-        ? Smile
-        : edge.sentiment === "negative"
-            ? Frown
-            : Meh;
-    return (_jsxs("div", { style: style, className: "rounded-xl border border-border/40 bg-card/95 px-3 py-2.5 shadow-lg backdrop-blur-md", children: [_jsxs("div", { className: "text-sm font-semibold text-txt", children: [edge.sourcePersonName, " / ", edge.targetPersonName] }), _jsxs("div", { className: "mt-1.5 flex items-center gap-1.5 text-2xs text-muted", children: [_jsxs("span", { className: "inline-flex items-center gap-1", style: { color: EDGE_COLORS[edgeTone(edge.sentiment)] }, children: [_jsx(SentimentIcon, { className: "h-3 w-3" }), Math.round(edge.strength * 100), "%"] }), _jsxs("span", { className: "inline-flex items-center gap-1", children: [_jsx(MessageCircle, { className: "h-3 w-3" }), edge.interactionCount] })] })] }));
-}
-export function RelationshipsGraphPanel({ snapshot, selectedGroupId, compact = false, onSelectPersonId, }) {
-    const [tooltip, setTooltip] = useState(null);
-    const fittedZoom = compact ? 0.68 : 0.9;
-    const [zoom, setZoom] = useState(fittedZoom);
-    const visibleGraph = useMemo(() => selectVisibleGraph(snapshot, selectedGroupId), [snapshot, selectedGroupId]);
-    const positions = useMemo(() => buildNodePositions(visibleGraph.people, visibleGraph.relationships, selectedGroupId), [selectedGroupId, visibleGraph]);
-    const directNeighborIds = useMemo(() => {
-        const ids = new Set();
-        if (!visibleGraph || !selectedGroupId) {
-            return ids;
-        }
-        for (const edge of visibleGraph.relationships) {
-            if (edge.sourcePersonId === selectedGroupId ||
-                edge.targetPersonId === selectedGroupId) {
-                ids.add(otherEndpoint(edge, selectedGroupId));
-            }
-        }
-        return ids;
-    }, [selectedGroupId, visibleGraph]);
-    const showTooltipForNode = (person, event) => {
-        const container = event.currentTarget.closest("[data-graph-container]");
-        if (!container)
-            return;
-        const rect = container.getBoundingClientRect();
-        setTooltip({
-            kind: "node",
-            person,
-            x: event.clientX - rect.left,
-            y: event.clientY - rect.top,
-        });
-    };
-    const showTooltipForEdge = (edge, event) => {
-        const container = event.currentTarget.closest("[data-graph-container]");
-        if (!container)
-            return;
-        const rect = container.getBoundingClientRect();
-        setTooltip({
-            kind: "edge",
-            edge,
-            x: event.clientX - rect.left,
-            y: event.clientY - rect.top,
-        });
-    };
-    const hideTooltip = () => setTooltip(null);
-    const containerRef = useRef(null);
-    const pointersRef = useRef(new Map());
-    const shouldSuppressClickRef = useRef(false);
-    const panStateRef = useRef(null);
-    const pinchStateRef = useRef(null);
-    const activePointerPoints = () => Array.from(pointersRef.current.values());
-    const distanceBetweenPointers = () => {
-        const points = Array.from(pointersRef.current.values());
-        if (points.length < 2)
-            return 0;
-        const [a, b] = points;
-        return Math.hypot(b.x - a.x, b.y - a.y);
-    };
-    const pointerCenter = () => {
-        const points = activePointerPoints();
-        if (points.length < 2)
-            return null;
-        const [a, b] = points;
-        return { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };
-    };
-    const viewportCenter = () => {
-        const container = containerRef.current;
-        if (!container)
-            return null;
-        const rect = container.getBoundingClientRect();
-        return {
-            x: rect.left + rect.width / 2,
-            y: rect.top + rect.height / 2,
-        };
-    };
-    const zoomTo = useCallback((nextZoom, focalPoint = null) => {
-        const container = containerRef.current;
-        const clampedZoom = Number(clamp(nextZoom, MIN_ZOOM, MAX_ZOOM).toFixed(3));
-        if (!container || !focalPoint) {
-            setZoom(clampedZoom);
-            return;
-        }
-        const rect = container.getBoundingClientRect();
-        const offsetX = focalPoint.x - rect.left;
-        const offsetY = focalPoint.y - rect.top;
-        setZoom((currentZoom) => {
-            const graphX = (container.scrollLeft + offsetX) / currentZoom;
-            const graphY = (container.scrollTop + offsetY) / currentZoom;
-            window.requestAnimationFrame(() => {
-                container.scrollLeft = graphX * clampedZoom - offsetX;
-                container.scrollTop = graphY * clampedZoom - offsetY;
-            });
-            return clampedZoom;
-        });
-    }, []);
-    const cancelPan = () => {
-        panStateRef.current = null;
-    };
-    const beginPan = (event) => {
-        if (event.pointerType === "mouse" && event.button !== 0)
-            return;
-        const container = containerRef.current;
-        if (!container)
-            return;
-        pointersRef.current.set(event.pointerId, {
-            x: event.clientX,
-            y: event.clientY,
-        });
-        if (pointersRef.current.size === 1) {
-            panStateRef.current = {
-                pointerId: event.pointerId,
-                startX: event.clientX,
-                startY: event.clientY,
-                scrollLeft: container.scrollLeft,
-                scrollTop: container.scrollTop,
-                moved: false,
-            };
-        }
-        else if (pointersRef.current.size === 2) {
-            cancelPan();
-            pinchStateRef.current = {
-                startDistance: distanceBetweenPointers(),
-                startZoom: zoom,
-            };
-            hideTooltip();
-        }
-    };
-    const updatePan = (event) => {
-        if (pointersRef.current.has(event.pointerId)) {
-            pointersRef.current.set(event.pointerId, {
-                x: event.clientX,
-                y: event.clientY,
-            });
-        }
-        const pinch = pinchStateRef.current;
-        if (pinch && pointersRef.current.size >= 2) {
-            const distance = distanceBetweenPointers();
-            if (pinch.startDistance > 0 && distance > 0) {
-                zoomTo(pinch.startZoom * (distance / pinch.startDistance), pointerCenter());
-            }
-            return;
-        }
-        const state = panStateRef.current;
-        if (!state || state.pointerId !== event.pointerId)
-            return;
-        const container = containerRef.current;
-        if (!container)
-            return;
-        const dx = event.clientX - state.startX;
-        const dy = event.clientY - state.startY;
-        if (!state.moved && Math.hypot(dx, dy) > 4) {
-            state.moved = true;
-            hideTooltip();
-            container.setPointerCapture(event.pointerId);
-        }
-        if (state.moved) {
-            container.scrollLeft = state.scrollLeft - dx;
-            container.scrollTop = state.scrollTop - dy;
-        }
-    };
-    const endPan = (event) => {
-        pointersRef.current.delete(event.pointerId);
-        if (pointersRef.current.size < 2) {
-            pinchStateRef.current = null;
-        }
-        const state = panStateRef.current;
-        if (state && state.pointerId === event.pointerId) {
-            const container = containerRef.current;
-            if (container?.hasPointerCapture(event.pointerId)) {
-                container.releasePointerCapture(event.pointerId);
-            }
-            if (state.moved) {
-                shouldSuppressClickRef.current = true;
-                window.setTimeout(() => {
-                    shouldSuppressClickRef.current = false;
-                }, 0);
-            }
-            panStateRef.current = null;
-        }
-    };
-    const leavePan = (event) => {
-        if (event.currentTarget.hasPointerCapture(event.pointerId))
-            return;
-        endPan(event);
-    };
-    // Attach a non-passive wheel listener so we can preventDefault native scroll/zoom.
-    useEffect(() => {
-        const container = containerRef.current;
-        if (!container)
-            return;
-        const onWheel = (event) => {
-            if (Math.abs(event.deltaY) === 0)
-                return;
-            event.preventDefault();
-            event.stopPropagation();
-            setTooltip(null);
-            zoomTo(zoom * (1 - event.deltaY * WHEEL_ZOOM_FACTOR), {
-                x: event.clientX,
-                y: event.clientY,
-            });
-        };
-        container.addEventListener("wheel", onWheel, { passive: false });
-        return () => container.removeEventListener("wheel", onWheel);
-    }, [zoom, zoomTo]);
-    const zoomOut = () => zoomTo(zoom - ZOOM_STEP, viewportCenter());
-    const zoomIn = () => zoomTo(zoom + ZOOM_STEP, viewportCenter());
-    const handleZoomPercentClick = () => zoomTo(Math.abs(zoom - fittedZoom) < 0.01 ? 1 : fittedZoom, viewportCenter());
-    const zoomPercent = `${Math.round(zoom * 100)}%`;
-    const graphWidth = GRAPH_WIDTH * zoom;
-    const graphHeight = GRAPH_HEIGHT * zoom;
-    return (_jsx(TooltipProvider, { delayDuration: 160, skipDelayDuration: 80, children: _jsxs("div", { className: compact ? "space-y-3" : "space-y-4", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-end gap-2", children: [_jsx(GraphLegend, {}), _jsxs("div", { className: "inline-flex items-center gap-0.5 rounded-full border border-border/24 bg-card/40 px-1 py-0.5", children: [_jsx(GraphIconButton, { label: "Zoom out", disabled: zoom <= MIN_ZOOM, onClick: zoomOut, children: _jsx(Minus, { className: "h-3.5 w-3.5" }) }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", onClick: handleZoomPercentClick, className: "min-w-10 rounded-full px-1 text-2xs font-semibold tabular-nums text-muted transition hover:text-txt", "aria-label": "Toggle zoom (fit / 100%)", children: zoomPercent }) }), _jsx(TooltipContent, { children: "Toggle fit / 100%" })] }), _jsx(GraphIconButton, { label: "Zoom in", disabled: zoom >= MAX_ZOOM, onClick: zoomIn, children: _jsx(Plus, { className: "h-3.5 w-3.5" }) })] })] }), _jsxs("div", { ref: containerRef, className: `${compact ? "max-h-[34rem]" : "max-h-[42rem]"} relative cursor-grab touch-none overflow-auto overscroll-contain rounded-2xl border border-border/26 bg-[radial-gradient(circle_at_top,rgba(240,185,11,0.12),transparent_42%),linear-gradient(180deg,color-mix(in_srgb,var(--card)_92%,transparent),color-mix(in_srgb,var(--bg)_97%,transparent))] active:cursor-grabbing`, "data-graph-container": true, onMouseLeave: hideTooltip, onPointerDown: beginPan, onPointerMove: updatePan, onPointerUp: endPan, onPointerCancel: endPan, onPointerLeave: leavePan, children: [_jsx(GraphTooltip, { state: tooltip }), _jsxs("svg", { viewBox: `0 0 ${GRAPH_WIDTH} ${GRAPH_HEIGHT}`, className: "block max-w-none", style: { width: graphWidth, height: graphHeight }, role: "img", "aria-label": "Relationships graph", children: [_jsxs("defs", { children: [_jsxs("radialGradient", { id: "relationships-node-fill", cx: "50%", cy: "35%", r: "70%", children: [_jsx("stop", { offset: "0%", stopColor: "rgba(255,240,199,0.96)" }), _jsx("stop", { offset: "100%", stopColor: "rgba(240,185,11,0.9)" })] }), _jsxs("radialGradient", { id: "relationships-owner-fill", cx: "50%", cy: "35%", r: "70%", children: [_jsx("stop", { offset: "0%", stopColor: "rgba(199,210,255,0.98)" }), _jsx("stop", { offset: "100%", stopColor: "rgba(99,102,241,0.86)" })] })] }), visibleGraph.relationships.map((edge) => {
-                                    const source = positions.get(edge.sourcePersonId);
-                                    const target = positions.get(edge.targetPersonId);
-                                    if (!source || !target) {
-                                        return null;
-                                    }
-                                    const touchesSelected = selectedGroupId !== null &&
-                                        (edge.sourcePersonId === selectedGroupId ||
-                                            edge.targetPersonId === selectedGroupId);
-                                    return (_jsxs("g", { children: [_jsx("line", { x1: source.x, y1: source.y, x2: target.x, y2: target.y, stroke: edgeColor(edge), strokeWidth: Math.max(touchesSelected ? 3 : 1.5, edge.strength * (touchesSelected ? 8 : 5.5)), strokeLinecap: "round", opacity: selectedGroupId ? (touchesSelected ? 0.95 : 0.24) : 0.78 }), _jsx("line", { x1: source.x, y1: source.y, x2: target.x, y2: target.y, stroke: "transparent", strokeWidth: 18, className: "cursor-pointer", onMouseEnter: (event) => showTooltipForEdge(edge, event), onMouseMove: (event) => showTooltipForEdge(edge, event), onMouseLeave: hideTooltip })] }, edge.id));
-                                }), visibleGraph.people.map((person) => {
-                                    const position = positions.get(person.groupId);
-                                    if (!position) {
-                                        return null;
-                                    }
-                                    const selected = selectedGroupId === person.groupId;
-                                    const directlyConnected = directNeighborIds.has(person.groupId);
-                                    const muted = selectedGroupId !== null && !selected && !directlyConnected;
-                                    const radius = nodeRadius(person) + (selected ? 6 : 0);
-                                    const isOwner = person.isOwner;
-                                    const showLabel = isOwner || selected || directlyConnected;
-                                    return (_jsxs("g", { children: [_jsxs("g", { transform: `translate(${position.x}, ${position.y})`, className: "pointer-events-none", opacity: muted ? 0.52 : 1, children: [_jsx("circle", { r: radius + (selected ? 18 : directlyConnected ? 8 : 0), fill: "transparent", stroke: selected
-                                                            ? "rgba(240,185,11,0.52)"
-                                                            : directlyConnected
-                                                                ? "rgba(34,197,94,0.38)"
-                                                                : "transparent", strokeWidth: selected ? 3 : directlyConnected ? 2 : 0 }), isOwner ? (_jsx("circle", { r: radius + 11, fill: "transparent", stroke: "rgba(99,102,241,0.56)", strokeWidth: 2, strokeDasharray: "5 4" })) : null, _jsx("circle", { r: radius, fill: isOwner
-                                                            ? "url(#relationships-owner-fill)"
-                                                            : "url(#relationships-node-fill)", stroke: selected
-                                                            ? "rgba(255,255,255,0.96)"
-                                                            : isOwner
-                                                                ? "rgba(99,102,241,0.78)"
-                                                                : "rgba(28,34,43,0.56)", strokeWidth: selected ? 3.5 : isOwner ? 2.5 : 1.5 }), _jsx("text", { textAnchor: "middle", y: 5, className: `text-sm font-semibold ${isOwner ? "fill-white" : "fill-black"}`, children: nodeInitials(person.displayName) }), showLabel ? (_jsx("text", { textAnchor: "middle", y: radius + 24, className: "text-xs font-semibold", fill: "var(--txt)", stroke: "rgba(255,255,255,0.82)", strokeWidth: 4, paintOrder: "stroke", children: shortLabel(person.displayName, 19) })) : null] }), _jsx("foreignObject", { x: position.x - 90, y: position.y - radius - 18, width: 180, height: radius + 72, children: _jsx("button", { type: "button", onClick: (event) => {
-                                                        if (shouldSuppressClickRef.current) {
-                                                            event.preventDefault();
-                                                            event.stopPropagation();
-                                                            shouldSuppressClickRef.current = false;
-                                                            return;
-                                                        }
-                                                        onSelectPersonId(person.primaryEntityId);
-                                                    }, onMouseEnter: (event) => showTooltipForNode(person, event), onMouseMove: (event) => showTooltipForNode(person, event), onMouseLeave: hideTooltip, className: "h-full w-full rounded-2xl bg-transparent", "aria-label": `Select ${person.displayName}` }) })] }, person.groupId));
-                                })] })] })] }) }));
-}