Org Chart

"use client";

import {
  useEffect,
  useLayoutEffect,
  useMemo,
  useRef,
  useState,
  type KeyboardEvent,
  type PointerEvent as ReactPointerEvent,
  type ReactNode,
} from "react";
import { AnimatePresence, MotionConfig, animate, motion, useMotionValue, useReducedMotion, useTransform, type MotionValue } from "motion/react";
import { IconFocusCentered, IconMinus, IconPlus, IconSearch, IconX } from "@tabler/icons-react";
import { cn } from "@/lib/utils";
import { Avatar, EASE_OUT, FOCUS, LABEL, SHELL } from "../_app/app-kit";

// Org chart explorer. The tree pans (drag, or scroll on a trackpad) and zooms
// (pinch, Ctrl/Cmd-scroll, or the buttons) around the pointer. Every node
// expands and collapses its reports: children grow out of their manager and
// fold back into it, connectors stretch with them, and the camera follows so
// the node you pressed stays under your pointer. Large teams of individual
// contributors stack in a column instead of spreading the tree wide.
//