Function CursorGhost

web/components/collaboration/CursorGhost.tsx:67–122

({ textareaRef }: CursorGhostProps)

// ─── CursorGhost ─────────────────────────────────────────────────────────────

export function CursorGhost({ textareaRef }: CursorGhostProps) {
  const ctx = useCollaborationContextOptional();
  const [rendered, setRendered] = useState<RenderedCursor[]>([]);

  useEffect(() => {
    if (!ctx || !textareaRef.current) return;
    const textarea = textareaRef.current;
    const { presence, otherUsers } = ctx;

    const next: RenderedCursor[] = [];
    for (const user of otherUsers) {
      const cursor = presence.cursors.get(user.id);
      if (!cursor) continue;
      try {
        const pos = measureCursorPosition(textarea, cursor.position);
        next.push({ user, cursor, ...pos });
      } catch {
        // ignore measurement errors
      }
    }
    setRendered(next);
  });

  if (!ctx || rendered.length === 0) return null;

  return (
    <div className="pointer-events-none absolute inset-0 overflow-hidden">
      <AnimatePresence>
        {rendered.map(({ user, top, left }) => (
          <motion.div
            key={user.id}
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ duration: 0.15 }}
            className="absolute flex flex-col items-start"
            style={{ top, left }}
          >
            {/* Cursor caret */}
            <div
              className="w-0.5 h-4"
              style={{ backgroundColor: user.color }}
            />
            {/* Name tag */}
            <div
              className="px-1 py-0.5 rounded text-[9px] font-semibold text-white whitespace-nowrap"
              style={{ backgroundColor: user.color }}
            >
              {user.name}
            </div>
          </motion.div>
        ))}
      </AnimatePresence>
    </div>
  );
}