Inspect

"use client";

import {
  useCallback,
  useEffect,
  useRef,
  useState,
  type ComponentProps,
  type FocusEvent,
  type PointerEvent,
  type ReactNode,
  type Ref,
} from "react";
import "./inspect.css";

type Modifier = "Alt+Shift" | "Alt" | "Shift";

export type InspectProps = ComponentProps<"div"> & {
  /** Always measuring, without holding a key. */
  active?: boolean;
  /** Keys to hold to measure. Ignored when active is set. */
  modifier?: Modifier;
  /** CSS selector for which descendants can be picked. The closest match to the pointer wins. */
  match?: string;
  children: ReactNode;
};

type Box = { x: number; y: number; w: number; h: number };
type Reading = {
  box: Box;
  pad: [number, number, number, number];
  name: string;
  rows: [string, string][];
  card: { left: number; top: number };
};

const px = (value: string) => parseFloat(value) || 0;
const fmt = (n: number) => String(Math.round(n * 10) / 10);

function held(event: KeyboardEvent, modifier: Modifier) {
  if (event.ctrlKey || event.metaKey) return false;
  if (modifier === "Alt+Shift") return event.altKey && event.shiftKey;
  if (modifier === "Alt") return event.altKey && !event.shiftKey;
  return event.shiftKey && !event.altKey;
}

function assignRef<T>(ref: Ref<T> | undefined, node: T | null) {
  if (typeof ref === "function") ref(node);
  else if (ref) ref.current = node;
}

function sides([t, r, b, l]: number[]) {
  if (t === b && r === l) return t === r ? fmt(t) : `${fmt(t)} ${fmt(r)}`;
  return [t, r, b, l].map(fmt).join(" ");
}

/** Computed values in CSS px, with the box placed relative to the root's padding box. */
function read(el: Element, root: HTMLElement): Reading {
  const cs = getComputedStyle(el);
  const rect = el.getBoundingClientRect();
  const base = root.getBoundingClientRect();
  const box = {
    x: rect.left - base.left - root.clientLeft + root.scrollLeft,
    y: rect.top - base.top - root.clientTop + root.scrollTop,
    w: rect.width,
    h: rect.height,
  };
  const pad = [cs.paddingTop, cs.paddingRight, cs.paddingBottom, cs.paddingLeft].map(px) as Reading["pad"];
  const rows: [string, string][] = [["Size", `${fmt(rect.width)} × ${fmt(rect.height)}`]];
  rows.push(["Padding", pad.some(Boolean) ? sides(pad) : "0"]);
  if (/flex|grid/.test(cs.display)) {
    const row = px(cs.rowGap);
    const column = px(cs.columnGap);
    rows.push(["Gap", row === column ? fmt(row) : `${fmt(row)} ${fmt(column)}`]);
  }
  const radii = [cs.borderTopLeftRadius, cs.borderTopRightRadius, cs.borderBottomRightRadius, cs.borderBottomLeftRadius].map(px);
  if (radii.some(Boolean)) {
    const pill = Math.min(...radii) >= Math.min(rect.width, rect.height) / 2;
    rows.push(["Radius", pill ? "full" : sides(radii)]);
  }
  rows.push(["Font size", fmt(px(cs.fontSize))]);

  const eq = [...el.classList].find((c) => c.startsWith("eq-"));
  const first = el.classList[0];
  const name = eq ? `.${eq}` : `${el.tagName.toLowerCase()}${first ? `.${first}` : ""}`;

  // The card goes below the element when the viewport has room there, otherwise above it.
  const height = 34 + rows.length * 18;
  const roomBelow = window.innerHeight - rect.bottom;
  const below = roomBelow >= height + 12 || roomBelow >= rect.top;
  const card = { left: Math.max(0, box.x), top: below ? box.y + box.h + 10 : box.y - height - 22 };
  return { box, pad, name, rows, card };
}

export function Inspect({
  active = false,
  modifier = "Alt+Shift",
  match = "*",
  className,
  children,
  ref,
  onPointerOver,
  onPointerLeave,
  onFocus,
  onBlur,
  ...rest
}: InspectProps) {
  const root = useRef<HTMLDivElement | null>(null);
  const overlay = useRef<HTMLDivElement | null>(null);
  // The raw element last pointed at and last focused, kept so that pressing the
  // modifier with the pointer already resting draws at once.
  const pointed = useRef<Element | null>(null);
  const focused = useRef<Element | null>(null);
  const lastBy = useRef<"pointer" | "focus">("pointer");
  const [holding, setHolding] = useState(false);
  const [reading, setReading] = useState<Reading | null>(null);
  const on = active || holding;

  const pick = useCallback(
    (raw: Element | null) => {
      const own = root.current;
      if (!own || !raw || overlay.current?.contains(raw)) return null;
      let el: Element | null = null;
      try {
        el = raw.closest(match);
      } catch {
        return null;
      }
      return el && el !== own && own.contains(el) ? el : null;
    },
    [match],
  );

  const measure = useCallback(() => {
    const own = root.current;
    const source = lastBy.current === "pointer" ? (pointed.current ?? focused.current) : (focused.current ?? pointed.current);
    const el = own && on ? pick(source) : null;
    setReading(el && own && el.isConnected ? read(el, own) : null);
  }, [on, pick]);

  // Track the modifier. Not needed, and not added, when always active.
  useEffect(() => {
    if (active) return;
    const update = (event: KeyboardEvent) => setHolding(held(event, modifier));
    const release = () => setHolding(false);
    window.addEventListener("keydown", update);
    window.addEventListener("keyup", update);
    window.addEventListener("blur", release);
    return () => {
      window.removeEventListener("keydown", update);
      window.removeEventListener("keyup", update);
      window.removeEventListener("blur", release);
    };
  }, [active, modifier]);

  useEffect(() => {
    measure();
  }, [measure]);

  // Follow the target through scrolling and resizing while something is drawn.
  const drawn = reading !== null;
  useEffect(() => {
    if (!drawn) return;
    let frame = 0;
    const later = () => {
      cancelAnimationFrame(frame);
      frame = requestAnimationFrame(measure);
    };
    window.addEventListener("scroll", later, { capture: true, passive: true });
    window.addEventListener("resize", later);
    return () => {
      cancelAnimationFrame(frame);
      window.removeEventListener("scroll", later, { capture: true });
      window.removeEventListener("resize", later);
    };
  }, [drawn, measure]);

  const [pt, pr, pb, pl] = reading?.pad ?? [0, 0, 0, 0];

  return (
    <div
      {...rest}
      ref={(node) => {
        root.current = node;
        assignRef(ref, node);
      }}
      className={["eq-inspect", className].filter(Boolean).join(" ")}
      data-active={on || undefined}
      onPointerOver={(event: PointerEvent<HTMLDivElement>) => {
        onPointerOver?.(event);
        pointed.current = event.target instanceof Element ? event.target : null;
        lastBy.current = "pointer";
        if (on) measure();
      }}
      onPointerLeave={(event: PointerEvent<HTMLDivElement>) => {
        onPointerLeave?.(event);
        pointed.current = null;
        if (on) measure();
      }}
      onFocus={(event: FocusEvent<HTMLDivElement>) => {
        onFocus?.(event);
        // Keyboard focus only: a mouse click would otherwise leave the button measured.
        if (!event.target.matches(":focus-visible")) return;
        focused.current = event.target;
        lastBy.current = "focus";
        if (on) measure();
      }}
      onBlur={(event: FocusEvent<HTMLDivElement>) => {
        onBlur?.(event);
        if (event.relatedTarget instanceof Node && event.currentTarget.contains(event.relatedTarget)) return;
        focused.current = null;
        if (on) measure();
      }}
    >
      {children}
      {reading && (
        <div ref={overlay} className="eq-inspect-overlay" aria-hidden="true">
          <div
            className="eq-inspect-box"
            style={{ left: reading.box.x, top: reading.box.y, width: reading.box.w, height: reading.box.h }}
          >
            {pt > 0 && <i className="eq-inspect-pad" style={{ inset: "0 0 auto 0", height: pt }} />}
            {pb > 0 && <i className="eq-inspect-pad" style={{ inset: "auto 0 0 0", height: pb }} />}
            {pl > 0 && <i className="eq-inspect-pad" style={{ inset: `${pt}px auto ${pb}px 0`, width: pl }} />}
            {pr > 0 && <i className="eq-inspect-pad" style={{ inset: `${pt}px 0 ${pb}px auto`, width: pr }} />}
          </div>
          <div
            className="eq-inspect-dim"
            data-axis="width"
            style={{ left: reading.box.x, top: reading.box.y - 11, width: reading.box.w }}
          >
            <b className="eq-inspect-label">{fmt(reading.box.w)}</b>
          </div>
          <div
            className="eq-inspect-dim"
            data-axis="height"
            style={{ left: reading.box.x - 11, top: reading.box.y, height: reading.box.h }}
          >
            <b className="eq-inspect-label">{fmt(reading.box.h)}</b>
          </div>
          <div className="eq-inspect-card" style={{ left: reading.card.left, top: reading.card.top }}>
            <div className="eq-inspect-name">{reading.name}</div>
            <dl className="eq-inspect-list">
              {reading.rows.map(([label, value]) => (
                <div key={label} className="eq-inspect-row">
                  <dt>{label}</dt>
                  <dd>{value}</dd>
                </div>
              ))}
            </dl>
          </div>
        </div>
      )}
    </div>
  );
}