beads-map 0.1.0 → 0.2.0

package/components/BeadsGraph.tsx

@@ -35,6 +35,8 @@ interface BeadsGraphProps {
   onBackgroundClick: () => void;
   onNodeRightClick?: (node: GraphNode, event: MouseEvent) => void;
   commentedNodeIds?: Map<string, number>;
+  claimedNodeAvatars?: Map<string, { avatar?: string; handle: string; claimedAt: string }>;
+  onAvatarHover?: (info: { handle: string; avatar?: string; claimedAt: string; x: number; y: number } | null) => void;
   timelineActive?: boolean;
   stats?: { total: number; edges: number; prefixes: string[] };
 }
@@ -85,6 +87,55 @@ function easeOutQuad(t: number): number {
   return 1 - (1 - t) * (1 - t);
 }
 
+// --- Module-level avatar image cache for canvas rendering ---
+const avatarImageCache = new Map<
+  string,
+  HTMLImageElement | "loading" | "failed"
+>();
+
+function getAvatarImage(
+  url: string,
+  onLoad: () => void
+): HTMLImageElement | null {
+  const cached = avatarImageCache.get(url);
+  if (cached === "loading" || cached === "failed") return null;
+  if (cached) return cached;
+
+  avatarImageCache.set(url, "loading");
+  const img = new Image();
+  img.onload = () => {
+    avatarImageCache.set(url, img);
+    onLoad();
+  };
+  img.onerror = () => {
+    avatarImageCache.set(url, "failed");
+  };
+  img.src = url;
+  return null;
+}
+
+function drawAvatarFallback(
+  ctx: CanvasRenderingContext2D,
+  x: number,
+  y: number,
+  radius: number,
+  handle: string,
+  globalScale: number
+) {
+  ctx.beginPath();
+  ctx.arc(x, y, radius, 0, Math.PI * 2);
+  ctx.fillStyle = "#e4e4e7"; // zinc-200
+  ctx.fill();
+
+  const letter = handle.replace("@", "").charAt(0).toUpperCase();
+  const fontSize = Math.min(7, Math.max(3, radius * 1.3));
+  ctx.font = `600 ${fontSize}px 'Inter', system-ui, sans-serif`;
+  ctx.textAlign = "center";
+  ctx.textBaseline = "middle";
+  ctx.fillStyle = "#71717a"; // zinc-500
+  ctx.fillText(letter, x, y + 0.3);
+}
+
 /**
  * Compute connected subgraph via BFS (depth 2) - pure function, no React state
  */
@@ -150,6 +201,8 @@ const BeadsGraph = forwardRef<BeadsGraphHandle, BeadsGraphProps>(function BeadsG
   onBackgroundClick,
   onNodeRightClick,
   commentedNodeIds,
+  claimedNodeAvatars,
+  onAvatarHover,
   timelineActive,
   stats,
 }, ref) {
@@ -161,11 +214,21 @@ const BeadsGraph = forwardRef<BeadsGraphHandle, BeadsGraphProps>(function BeadsG
   const [dimensions, setDimensions] = useState({ width: 800, height: 600 });
   const initialLayoutApplied = useRef(false);
 
-  // Minimap constants
-  const MINIMAP_W = 160;
-  const MINIMAP_H = 120;
+  // Minimap dimensions (resizable via drag)
+  const [minimapSize, setMinimapSize] = useState({ w: 160, h: 120 });
+  const MINIMAP_W = minimapSize.w;
+  const MINIMAP_H = minimapSize.h;
   const MINIMAP_PAD = 8; // internal padding so dots aren't clipped at edges
 
+  // Minimap resize drag state
+  const minimapDragRef = useRef<{
+    edge: "top" | "right" | "top-right";
+    startX: number;
+    startY: number;
+    startW: number;
+    startH: number;
+  } | null>(null);
+
   // Lazy-load ForceGraph2D on the client (preserves ref forwarding)
   const [ForceGraph2D, setForceGraph2D] =
     useState<React.ComponentType<any> | null>(_ForceGraph2DModule);
@@ -192,6 +255,22 @@ const BeadsGraph = forwardRef<BeadsGraphHandle, BeadsGraphProps>(function BeadsG
   const hoveredNodeRef = useRef<GraphNode | null>(hoveredNode);
   const connectedNodesRef = useRef<Set<string>>(new Set());
   const commentedNodeIdsRef = useRef<Map<string, number>>(commentedNodeIds || new Map());
+  const claimedNodeAvatarsRef = useRef<Map<string, { avatar?: string; handle: string; claimedAt: string }>>(
+    claimedNodeAvatars || new Map()
+  );
+  // Callback ref for refreshing graph when avatar images finish loading
+  const avatarRefreshRef = useRef<() => void>(() => {});
+  avatarRefreshRef.current = () => refreshGraph(graphRef);
+
+  // Ref for avatar hover callback (avoids stale closures in mousemove handler)
+  const onAvatarHoverRef = useRef(onAvatarHover);
+  onAvatarHoverRef.current = onAvatarHover;
+
+  // Track which avatar is currently hovered to avoid redundant callbacks
+  const hoveredAvatarNodeRef = useRef<string | null>(null);
+
+  // Ref for current viewNodes (used by mousemove handler to respect epics view)
+  const viewNodesRef = useRef<GraphNode[]>(nodes);
 
   // Cluster data ref for semantic zoom: maps epic (parent) IDs to their
   // member node IDs so we can compute centroids and draw cluster labels
@@ -276,6 +355,9 @@ const BeadsGraph = forwardRef<BeadsGraphHandle, BeadsGraphProps>(function BeadsG
     return { viewNodes: filteredNodes, viewLinks: remappedLinks };
   }, [nodes, links, viewMode]);
 
+  // Keep viewNodesRef in sync for mousemove avatar hit-testing
+  viewNodesRef.current = viewNodes;
+
   // Build cluster info for semantic zoom: group nodes by parent epic.
   // This is used by onRenderFramePost to draw cluster labels when zoomed out.
   useEffect(() => {
@@ -367,6 +449,77 @@ const BeadsGraph = forwardRef<BeadsGraphHandle, BeadsGraphProps>(function BeadsG
     refreshGraph(graphRef);
   }, [commentedNodeIds]);
 
+  useEffect(() => {
+    claimedNodeAvatarsRef.current = claimedNodeAvatars || new Map();
+    refreshGraph(graphRef);
+  }, [claimedNodeAvatars]);
+
+  // Avatar hover detection: mousemove on container, hit-test against avatar positions
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const handleMouseMove = (e: MouseEvent) => {
+      const fg = graphRef.current;
+      const cb = onAvatarHoverRef.current;
+      if (!fg || !cb) return;
+
+      const claimedMap = claimedNodeAvatarsRef.current;
+      if (claimedMap.size === 0) {
+        if (hoveredAvatarNodeRef.current) {
+          hoveredAvatarNodeRef.current = null;
+          cb(null);
+        }
+        return;
+      }
+
+      // Convert screen coords to graph coords
+      const rect = container.getBoundingClientRect();
+      const screenX = e.clientX - rect.left;
+      const screenY = e.clientY - rect.top;
+      let graphCoords: { x: number; y: number };
+      try {
+        graphCoords = fg.screen2GraphCoords(screenX, screenY);
+      } catch {
+        return;
+      }
+
+      // Hit-test against each claimed node's avatar position
+      const globalScale = fg.zoom() || 1;
+      const avatarRadius = Math.max(4, 10 / globalScale);
+
+      for (const node of viewNodesRef.current) {
+        const n = node as any;
+        if (n.x == null || n.y == null) continue;
+        const claim = claimedMap.get(node.id);
+        if (!claim) continue;
+
+        const size = getNodeSize(node);
+        const avatarX = n.x + size * 0.7;
+        const avatarY = n.y + size * 0.7;
+        const dx = graphCoords.x - avatarX;
+        const dy = graphCoords.y - avatarY;
+
+        if (dx * dx + dy * dy <= avatarRadius * avatarRadius) {
+          if (hoveredAvatarNodeRef.current !== node.id) {
+            hoveredAvatarNodeRef.current = node.id;
+            cb({ handle: claim.handle, avatar: claim.avatar, claimedAt: claim.claimedAt, x: e.clientX, y: e.clientY });
+          }
+          return;
+        }
+      }
+
+      // No avatar hit
+      if (hoveredAvatarNodeRef.current) {
+        hoveredAvatarNodeRef.current = null;
+        cb(null);
+      }
+    };
+
+    container.addEventListener("mousemove", handleMouseMove);
+    return () => container.removeEventListener("mousemove", handleMouseMove);
+  }, []);
+
   // Track dimensions
   useEffect(() => {
     const updateDimensions = () => {
@@ -745,6 +898,67 @@ const BeadsGraph = forwardRef<BeadsGraphHandle, BeadsGraphProps>(function BeadsG
         ctx.restore();
       }
 
+      // Claimant avatar — small circular profile picture at bottom-right
+      const claimInfo = claimedNodeAvatarsRef.current.get(graphNode.id);
+      if (claimInfo) {
+        // Constant screen-space size: divide by globalScale so avatar stays
+        // roughly the same pixel size regardless of zoom level
+        const avatarSize = Math.max(4, 10 / globalScale);
+        const avatarX = node.x + animatedSize * 0.7;
+        const avatarY = node.y + animatedSize * 0.7;
+
+        ctx.save();
+        ctx.globalAlpha = 1;
+
+        if (claimInfo.avatar) {
+          const img = getAvatarImage(claimInfo.avatar, () =>
+            avatarRefreshRef.current()
+          );
+          if (img) {
+            // Clip to circle and draw image
+            ctx.save();
+            ctx.beginPath();
+            ctx.arc(avatarX, avatarY, avatarSize, 0, Math.PI * 2);
+            ctx.clip();
+            ctx.drawImage(
+              img,
+              avatarX - avatarSize,
+              avatarY - avatarSize,
+              avatarSize * 2,
+              avatarSize * 2
+            );
+            ctx.restore();
+          } else {
+            drawAvatarFallback(
+              ctx,
+              avatarX,
+              avatarY,
+              avatarSize,
+              claimInfo.handle,
+              globalScale
+            );
+          }
+        } else {
+          drawAvatarFallback(
+            ctx,
+            avatarX,
+            avatarY,
+            avatarSize,
+            claimInfo.handle,
+            globalScale
+          );
+        }
+
+        // White border ring for contrast
+        ctx.beginPath();
+        ctx.arc(avatarX, avatarY, avatarSize, 0, Math.PI * 2);
+        ctx.strokeStyle = "#ffffff";
+        ctx.lineWidth = Math.max(0.8, 1.2 / globalScale);
+        ctx.stroke();
+
+        ctx.restore();
+      }
+
       ctx.restore();
     },
     [] // No dependencies - reads from refs
@@ -921,7 +1135,10 @@ const BeadsGraph = forwardRef<BeadsGraphHandle, BeadsGraphProps>(function BeadsG
       const clusters = clustersRef.current;
       if (clusters.length === 0) return;
 
-      // Build a fast lookup from node ID to current position
+      // Build a fast lookup from node ID to current LIVE position.
+      // Only use viewNodes (the nodes actually in the simulation) — in epics
+      // view, child nodes are collapsed into parent epics and their positions
+      // are stale/frozen. Using stale positions causes centroids to drift.
       const nodeMap = new Map<string, { x: number; y: number }>();
       for (const node of viewNodes) {
         const n = node as any;
@@ -929,13 +1146,6 @@ const BeadsGraph = forwardRef<BeadsGraphHandle, BeadsGraphProps>(function BeadsG
           nodeMap.set(node.id, { x: n.x, y: n.y });
         }
       }
-      // Also check the full nodes array (viewNodes may be filtered in epics mode)
-      for (const node of nodes) {
-        const n = node as any;
-        if (!nodeMap.has(node.id) && n.x != null && n.y != null) {
-          nodeMap.set(node.id, { x: n.x, y: n.y });
-        }
-      }
 
       ctx.save();
 
@@ -1178,6 +1388,58 @@ const BeadsGraph = forwardRef<BeadsGraphHandle, BeadsGraphProps>(function BeadsG
     }
     ctx.globalAlpha = 1;
 
+    // Draw claimed avatars on minimap
+    const claimedMap = claimedNodeAvatarsRef.current;
+    if (claimedMap.size > 0) {
+      for (const node of viewNodes) {
+        const n = node as any;
+        if (n.x == null || n.y == null) continue;
+        const claim = claimedMap.get(node.id);
+        if (!claim) continue;
+
+        const mx = offsetX + (n.x - xMin) * scale;
+        const my = offsetY + (n.y - yMin) * scale;
+        const r = 5; // fixed pixel radius on minimap
+
+        ctx.save();
+        ctx.globalAlpha = 1;
+
+        if (claim.avatar) {
+          const img = getAvatarImage(claim.avatar, () =>
+            avatarRefreshRef.current()
+          );
+          if (img) {
+            ctx.save();
+            ctx.beginPath();
+            ctx.arc(mx, my, r, 0, Math.PI * 2);
+            ctx.clip();
+            ctx.drawImage(img, mx - r, my - r, r * 2, r * 2);
+            ctx.restore();
+          } else {
+            // Fallback circle
+            ctx.beginPath();
+            ctx.arc(mx, my, r, 0, Math.PI * 2);
+            ctx.fillStyle = "#d4d4d8";
+            ctx.fill();
+          }
+        } else {
+          ctx.beginPath();
+          ctx.arc(mx, my, r, 0, Math.PI * 2);
+          ctx.fillStyle = "#d4d4d8";
+          ctx.fill();
+        }
+
+        // White border
+        ctx.beginPath();
+        ctx.arc(mx, my, r, 0, Math.PI * 2);
+        ctx.strokeStyle = "#ffffff";
+        ctx.lineWidth = 1;
+        ctx.stroke();
+
+        ctx.restore();
+      }
+    }
+
     // Draw FOV rectangle
     try {
       const tl = fg.screen2GraphCoords(0, 0);
@@ -1466,15 +1728,106 @@ const BeadsGraph = forwardRef<BeadsGraphHandle, BeadsGraphProps>(function BeadsG
         </div>
       )}
 
-      {/* Minimap — bottom-left, hidden on mobile */}
-      <canvas
-        ref={minimapCanvasRef}
-        width={MINIMAP_W}
-        height={MINIMAP_H}
-        onClick={handleMinimapClick}
-        className="hidden sm:block absolute bottom-4 left-4 z-10 rounded-lg border border-zinc-200 shadow-sm cursor-crosshair"
+      {/* Minimap — bottom-left, hidden on mobile, resizable */}
+      <div
+        className="hidden sm:block absolute bottom-4 left-4 z-10"
         style={{ width: MINIMAP_W, height: MINIMAP_H }}
-      />
+      >
+        <canvas
+          ref={minimapCanvasRef}
+          width={MINIMAP_W}
+          height={MINIMAP_H}
+          onClick={handleMinimapClick}
+          className="rounded-lg border border-zinc-200 shadow-sm cursor-crosshair"
+          style={{ width: MINIMAP_W, height: MINIMAP_H }}
+        />
+        {/* Resize handle — top edge */}
+        <div
+          className="absolute top-0 left-2 right-2 h-1.5 cursor-n-resize hover:bg-zinc-300/40 rounded-t-lg transition-colors"
+          onMouseDown={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            minimapDragRef.current = {
+              edge: "top",
+              startX: e.clientX,
+              startY: e.clientY,
+              startW: MINIMAP_W,
+              startH: MINIMAP_H,
+            };
+            const onMove = (ev: MouseEvent) => {
+              if (!minimapDragRef.current) return;
+              const dy = minimapDragRef.current.startY - ev.clientY;
+              const newH = Math.max(80, Math.min(400, minimapDragRef.current.startH + dy));
+              setMinimapSize((prev) => ({ ...prev, h: newH }));
+            };
+            const onUp = () => {
+              minimapDragRef.current = null;
+              window.removeEventListener("mousemove", onMove);
+              window.removeEventListener("mouseup", onUp);
+            };
+            window.addEventListener("mousemove", onMove);
+            window.addEventListener("mouseup", onUp);
+          }}
+        />
+        {/* Resize handle — right edge */}
+        <div
+          className="absolute top-2 right-0 bottom-2 w-1.5 cursor-e-resize hover:bg-zinc-300/40 rounded-r-lg transition-colors"
+          onMouseDown={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            minimapDragRef.current = {
+              edge: "right",
+              startX: e.clientX,
+              startY: e.clientY,
+              startW: MINIMAP_W,
+              startH: MINIMAP_H,
+            };
+            const onMove = (ev: MouseEvent) => {
+              if (!minimapDragRef.current) return;
+              const dx = ev.clientX - minimapDragRef.current.startX;
+              const newW = Math.max(100, Math.min(500, minimapDragRef.current.startW + dx));
+              setMinimapSize((prev) => ({ ...prev, w: newW }));
+            };
+            const onUp = () => {
+              minimapDragRef.current = null;
+              window.removeEventListener("mousemove", onMove);
+              window.removeEventListener("mouseup", onUp);
+            };
+            window.addEventListener("mousemove", onMove);
+            window.addEventListener("mouseup", onUp);
+          }}
+        />
+        {/* Resize handle — top-right corner */}
+        <div
+          className="absolute top-0 right-0 w-3 h-3 cursor-ne-resize hover:bg-zinc-300/40 rounded-tr-lg transition-colors"
+          onMouseDown={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            minimapDragRef.current = {
+              edge: "top-right",
+              startX: e.clientX,
+              startY: e.clientY,
+              startW: MINIMAP_W,
+              startH: MINIMAP_H,
+            };
+            const onMove = (ev: MouseEvent) => {
+              if (!minimapDragRef.current) return;
+              const dx = ev.clientX - minimapDragRef.current.startX;
+              const dy = minimapDragRef.current.startY - ev.clientY;
+              const newW = Math.max(100, Math.min(500, minimapDragRef.current.startW + dx));
+              const newH = Math.max(80, Math.min(400, minimapDragRef.current.startH + dy));
+              setMinimapSize({ w: newW, h: newH });
+            };
+            const onUp = () => {
+              minimapDragRef.current = null;
+              window.removeEventListener("mousemove", onMove);
+              window.removeEventListener("mouseup", onUp);
+            };
+            window.addEventListener("mousemove", onMove);
+            window.addEventListener("mouseup", onUp);
+          }}
+        />
+      </div>
 
       {ForceGraph2D ? (
         <ForceGraph2D

package/components/BeadsLogo.tsx

@@ -0,0 +1,111 @@
+"use client";
+
+/**
+ * Animated geometric logo for beads-map.
+ * Inspired by plresearch.org's HexagonIcon — a rotating hexagonal network
+ * with pulsing nodes, representing the dependency graph.
+ */
+export function BeadsLogo({ className }: { className?: string }) {
+  return (
+    <svg
+      viewBox="0 0 32 32"
+      fill="none"
+      className={className}
+      aria-hidden="true"
+    >
+      {/* Outer hexagon — slow rotation */}
+      <polygon
+        points="16,3 27,9.5 27,22.5 16,29 5,22.5 5,9.5"
+        stroke="currentColor"
+        strokeWidth="1.2"
+        fill="none"
+        opacity="0.7"
+        strokeLinejoin="round"
+      >
+        <animateTransform
+          attributeName="transform"
+          type="rotate"
+          values="0 16 16;360 16 16"
+          dur="40s"
+          repeatCount="indefinite"
+        />
+      </polygon>
+
+      {/* Inner hexagon — counter-rotation, slightly smaller */}
+      <polygon
+        points="16,8 22.5,11.5 22.5,20.5 16,24 9.5,20.5 9.5,11.5"
+        stroke="currentColor"
+        strokeWidth="0.8"
+        fill="none"
+        opacity="0.35"
+        strokeLinejoin="round"
+      >
+        <animateTransform
+          attributeName="transform"
+          type="rotate"
+          values="360 16 16;0 16 16"
+          dur="30s"
+          repeatCount="indefinite"
+        />
+      </polygon>
+
+      {/* Connection lines from center to outer vertices */}
+      <line x1="16" y1="16" x2="16" y2="3" stroke="currentColor" strokeWidth="0.6" opacity="0.2">
+        <animate attributeName="opacity" values="0.15;0.35;0.15" dur="3s" repeatCount="indefinite" />
+      </line>
+      <line x1="16" y1="16" x2="27" y2="9.5" stroke="currentColor" strokeWidth="0.6" opacity="0.2">
+        <animate attributeName="opacity" values="0.15;0.35;0.15" dur="3s" repeatCount="indefinite" begin="0.5s" />
+      </line>
+      <line x1="16" y1="16" x2="27" y2="22.5" stroke="currentColor" strokeWidth="0.6" opacity="0.2">
+        <animate attributeName="opacity" values="0.15;0.35;0.15" dur="3s" repeatCount="indefinite" begin="1s" />
+      </line>
+      <line x1="16" y1="16" x2="16" y2="29" stroke="currentColor" strokeWidth="0.6" opacity="0.2">
+        <animate attributeName="opacity" values="0.15;0.35;0.15" dur="3s" repeatCount="indefinite" begin="1.5s" />
+      </line>
+      <line x1="16" y1="16" x2="5" y2="22.5" stroke="currentColor" strokeWidth="0.6" opacity="0.2">
+        <animate attributeName="opacity" values="0.15;0.35;0.15" dur="3s" repeatCount="indefinite" begin="2s" />
+      </line>
+      <line x1="16" y1="16" x2="5" y2="9.5" stroke="currentColor" strokeWidth="0.6" opacity="0.2">
+        <animate attributeName="opacity" values="0.15;0.35;0.15" dur="3s" repeatCount="indefinite" begin="2.5s" />
+      </line>
+
+      {/* Center node — breathing pulse */}
+      <circle cx="16" cy="16" r="2.5" fill="currentColor" opacity="0.8">
+        <animate attributeName="r" values="2;3;2" dur="3s" repeatCount="indefinite" />
+        <animate attributeName="opacity" values="0.7;1;0.7" dur="3s" repeatCount="indefinite" />
+      </circle>
+
+      {/* Vertex nodes — staggered pulse */}
+      <circle cx="16" cy="3" r="1.5" fill="currentColor" opacity="0.5">
+        <animate attributeName="r" values="1.2;2;1.2" dur="2.5s" repeatCount="indefinite" />
+        <animate attributeName="opacity" values="0.4;0.7;0.4" dur="2.5s" repeatCount="indefinite" />
+      </circle>
+      <circle cx="27" cy="9.5" r="1.5" fill="currentColor" opacity="0.5">
+        <animate attributeName="r" values="1.2;2;1.2" dur="2.5s" repeatCount="indefinite" begin="0.4s" />
+        <animate attributeName="opacity" values="0.4;0.7;0.4" dur="2.5s" repeatCount="indefinite" begin="0.4s" />
+      </circle>
+      <circle cx="27" cy="22.5" r="1.5" fill="currentColor" opacity="0.5">
+        <animate attributeName="r" values="1.2;2;1.2" dur="2.5s" repeatCount="indefinite" begin="0.8s" />
+        <animate attributeName="opacity" values="0.4;0.7;0.4" dur="2.5s" repeatCount="indefinite" begin="0.8s" />
+      </circle>
+      <circle cx="16" cy="29" r="1.5" fill="currentColor" opacity="0.5">
+        <animate attributeName="r" values="1.2;2;1.2" dur="2.5s" repeatCount="indefinite" begin="1.2s" />
+        <animate attributeName="opacity" values="0.4;0.7;0.4" dur="2.5s" repeatCount="indefinite" begin="1.2s" />
+      </circle>
+      <circle cx="5" cy="22.5" r="1.5" fill="currentColor" opacity="0.5">
+        <animate attributeName="r" values="1.2;2;1.2" dur="2.5s" repeatCount="indefinite" begin="1.6s" />
+        <animate attributeName="opacity" values="0.4;0.7;0.4" dur="2.5s" repeatCount="indefinite" begin="1.6s" />
+      </circle>
+      <circle cx="5" cy="9.5" r="1.5" fill="currentColor" opacity="0.5">
+        <animate attributeName="r" values="1.2;2;1.2" dur="2.5s" repeatCount="indefinite" begin="2s" />
+        <animate attributeName="opacity" values="0.4;0.7;0.4" dur="2.5s" repeatCount="indefinite" begin="2s" />
+      </circle>
+
+      {/* Orbiting ring — subtle depth */}
+      <circle cx="16" cy="16" r="10" stroke="currentColor" strokeWidth="0.4" fill="none" opacity="0.15">
+        <animate attributeName="r" values="9;11;9" dur="4s" repeatCount="indefinite" />
+        <animate attributeName="opacity" values="0.1;0.25;0.1" dur="4s" repeatCount="indefinite" />
+      </circle>
+    </svg>
+  );
+}