Domain Switch

import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

"use client";

import * as React from "react";
import { animate, useMotionValue, useReducedMotion, type MotionValue } from "motion/react";

import { cn } from "@/lib/utils";

/**
 * Keep:
 * - Every frame is written straight to the DOM from one motion value, `progress`: the inside's
 *   `clip-path` circle, the lens scale and the canvas seam. Nothing in a frame re-renders React.
 * - Both worlds are real markup stacked in one grid cell, the inside clipped on top. The world not
 *   in charge is `inert` and `aria-hidden`, and focus moves to the same toggle in the other world.
 * - A toggle mid-flight turns around from the current progress, never from the start; the move
 *   scales with the square root of the distance left and never drops under `TIMING.shortest`.
 * - The sphere opens from the pressed toggle, measured in the unmagnified outside world, and grows
 *   past the farthest corner by the seam's width so the seam leaves with it.
 * - Reduced motion drops the clip, lens and seam and crossfades the inside world's opacity.
 */
const TIMING = {
  /** The domain growing across the scope, in seconds (the `duration` prop). */
  duration: 1.1,
  /** A collapse, as a share of `duration` (the `collapseRatio` prop). */
  collapseRatio: 0.8,
  /** The curve it grows on: a heavy ease-out, fast start, long settle. */
  grow: [0.2, 0.72, 0.12, 1],
  /** The curve it collapses on: it gathers, then draws in to the toggle. */
  collapse: [0.5, 0, 0.18, 1],
  /** The shortest a move takes, so a reversal near the end still takes this long, in seconds. */
  shortest: 0.35,
  /** The reduced-motion crossfade, in seconds. */
  fade: 0.15,
  /** The stars sliding along the seam, in rad per ms. */
  drift: 0.00004,
  /** A star's twinkle, in rad per ms: the slowest, plus up to `spread` more. */
  twinkle: { base: 0.003, spread: 0.007 },
  /** The toggle's press scale, as Tailwind classes. */
  press: "duration-150 ease-out",
} as const;

/* ─────────────────────────────────────────────────────────
 * DOMAIN SWITCH STORYBOARD
 *
 *  press     the toggle flips and a domain opens from its center
 *  grow      a sphere of the new world swells across the scope:
 *            fast at first, then a long settle out to the
 *            farthest corner. Everything inside it is already the
 *            other world, real markup, so text stays crisp
 *  seam      the edge is a thin band of space, dark with star
 *            points, where the two worlds meet. The inside is
 *            magnified a touch and relaxes as it grows, so the
 *            edge reads as a lens, not a wipe
 *  settle    the sphere passes the last corner, the seam leaves
 *            with it and the old world is put away
 *  collapse  toggle back and the domain draws in to the toggle
 *            on the same seam
 *  reverse   toggle mid-flight and it turns around from where it
 *            is, never from the start
 *  reduced   with reduced motion the worlds crossfade in 150ms
 * ───────────────────────────────────────────────────────── */

const SEAM = {
  stars: 1.7, // px of seam per star
  maxStars: 4800,
  starFade: 48, // stars that fade in as the seam lengthens
} as const;

type World = "inside" | "outside";

type Toggle = { element: HTMLElement; world: World | null };

type Scope = {
  measure: (origin: { x: number; y: number } | null) => void;
  render: (p: number) => void;
  inside: HTMLElement;
  outside: HTMLElement;
  /** The element in the scope that last had focus, kept through the blur that `inert` causes. */
  focused: () => Element | null;
};

/** Keeps the toggles and scopes out of React, so a frame never re-renders anything. */
function createDomain(progress: MotionValue<number>) {
  const toggles = new Set<Toggle>();
  const scopes = new Set<Scope>();
  let pressed: { world: World | null; element: HTMLElement; index: number } | null = null;
  let options = {
    duration: TIMING.duration as number,
    collapseRatio: TIMING.collapseRatio as number,
    reduced: false,
    onChange: undefined as ((inside: boolean) => void) | undefined,
  };
  let target = progress.get();

  // Toggles of one world in document order, so the second toggle outside
  // pairs with the second toggle inside.
  const inWorld = (world: World | null) =>
    [...toggles]
      .filter((toggle) => toggle.world === world)
      .map((toggle) => toggle.element)
      .sort((a, b) => (a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1));

  // The sphere opens from the toggle that was pressed, measured in the
  // world that isn't magnified: a toggle outside the scopes, else its twin
  // in the outside world.
  const origin = () => {
    const index = pressed?.index ?? 0;
    const element =
      (pressed?.world === null && pressed.element.isConnected ? pressed.element : null) ??
      inWorld("outside")[index] ??
      inWorld(null)[0] ??
      inWorld("outside")[0] ??
      inWorld("inside")[index] ??
      inWorld("inside")[0];
    if (!element) return null;
    const rect = element.getBoundingClientRect();
    return { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 };
  };

  // The world that was left goes inert, which drops focus on the body. If
  // focus was in it, hand it to the same toggle in the world taking over.
  // A task later: an Enter that closed the domain from a keydown would
  // otherwise go on to click the toggle it lands on, and the app may want
  // to focus something itself.
  const handoff = (inside: boolean) => {
    const active = document.activeElement;
    for (const scope of scopes) {
      const was = active && active !== document.body ? active : scope.focused();
      if (!was || !(inside ? scope.outside : scope.inside).contains(was)) continue;
      const index = pressed?.index ?? 0;
      const next = inWorld(inside ? "inside" : "outside");
      const toggle = next[index] ?? next[0] ?? inWorld(null)[0];
      setTimeout(() => {
        const now = document.activeElement;
        if (now && now !== document.body && !now.closest("[inert]")) return;
        toggle?.focus({ preventScroll: true });
      });
      return;
    }
  };

  return {
    progress,
    setOptions(next: typeof options) {
      options = next;
    },
    reduced: () => options.reduced,
    target: () => target,
    addToggle(element: HTMLElement, world: World | null) {
      const toggle = { element, world };
      toggles.add(toggle);
      return () => void toggles.delete(toggle);
    },
    press(element: HTMLElement, world: World | null) {
      pressed = { element, world, index: Math.max(0, inWorld(world).indexOf(element)) };
    },
    addScope(scope: Scope) {
      scopes.add(scope);
      scope.measure(origin());
      scope.render(progress.get());
      return () => void scopes.delete(scope);
    },
    remeasure(scope: Scope) {
      scope.measure(origin());
      scope.render(progress.get());
    },
    // Runs in the commit that flips `inert`, so the incoming world is shown
    // (clipped to nothing) before anything tries to focus inside it.
    go(inside: boolean) {
      const to = inside ? 1 : 0;
      if (to === target) return;
      target = to;
      const at = origin();
      scopes.forEach((scope) => {
        scope.measure(at);
        scope.render(progress.get());
      });
      handoff(inside);
      const distance = Math.abs(to - progress.get());
      const transition = options.reduced
        ? { duration: TIMING.fade * distance, ease: "linear" as const }
        : {
            duration: Math.max(
              TIMING.shortest,
              options.duration * (inside ? 1 : options.collapseRatio) * Math.sqrt(distance),
            ),
            ease: inside ? TIMING.grow : TIMING.collapse,
          };
      animate(progress, to, transition).then(() => {
        if (target === to) options.onChange?.(inside);
      });
    },
  };
}

type Domain = ReturnType<typeof createDomain>;

type DomainSwitchContextValue = {
  checked: boolean;
  setChecked: (checked: boolean) => void;
  domain: Domain;
};

const DomainSwitchContext = React.createContext<DomainSwitchContextValue | null>(null);
const WorldContext = React.createContext<World | null>(null);

function useDomainSwitchContext(part: string) {
  const context = React.useContext(DomainSwitchContext);
  if (!context) throw new Error(`<${part}> must be used inside <DomainSwitch>.`);
  return context;
}

/** The switch's state, and which world the caller is rendered in (`null` outside a scope). */
export function useDomainSwitch() {
  const { checked, setChecked } = useDomainSwitchContext("useDomainSwitch");
  const world = React.useContext(WorldContext);
  return { checked, setChecked, world };
}

export interface DomainSwitchProps {
  /** Whether the inside world has taken over. Control it with `onCheckedChange`. */
  checked?: boolean;
  defaultChecked?: boolean;
  /** Called the moment the toggle is pressed. */
  onCheckedChange?: (checked: boolean) => void;
  /** Called once the domain has finished growing or collapsing, with the world that now covers the scope. Not called when a toggle reverses it mid-flight. */
  onChange?: (inside: boolean) => void;
  /** Seconds the domain takes to grow across the scope. Collapsing is a little quicker. */
  duration?: number;
  /** How long collapsing takes, as a share of `duration`. `1` draws the domain in as slowly as it grew. */
  collapseRatio?: number;
  children?: React.ReactNode;
}

export function DomainSwitch({
  checked: checkedProp,
  defaultChecked = false,
  onCheckedChange,
  onChange,
  duration = TIMING.duration,
  collapseRatio = TIMING.collapseRatio,
  children,
}: DomainSwitchProps) {
  const [uncontrolled, setUncontrolled] = React.useState(defaultChecked);
  const checked = checkedProp ?? uncontrolled;
  const progress = useMotionValue(checked ? 1 : 0);
  const [domain] = React.useState(() => createDomain(progress));
  const reduced = useReducedMotion() ?? false;

  React.useEffect(() => {
    domain.setOptions({ duration, collapseRatio, reduced, onChange });
  }, [domain, duration, collapseRatio, reduced, onChange]);

  React.useLayoutEffect(() => {
    domain.go(checked);
  }, [domain, checked]);

  const setChecked = React.useCallback(
    (next: boolean) => {
      if (checkedProp === undefined) setUncontrolled(next);
      onCheckedChange?.(next);
    },
    [checkedProp, onCheckedChange],
  );

  const value = React.useMemo(() => ({ checked, setChecked, domain }), [checked, setChecked, domain]);

  return <DomainSwitchContext.Provider value={value}>{children}</DomainSwitchContext.Provider>;
}

export interface DomainSwitchToggleProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  children?: React.ReactNode;
}

/**
 * The switch itself. Put it outside the scope, or inside the worlds: one in
 * each world at the same spot, and the domain opens from it.
 */
export function DomainSwitchToggle({ className, children, onClick, ...props }: DomainSwitchToggleProps) {
  const { checked, setChecked, domain } = useDomainSwitchContext("DomainSwitchToggle");
  const world = React.useContext(WorldContext);
  const ref = React.useRef<HTMLButtonElement>(null);

  React.useLayoutEffect(() => {
    if (!ref.current) return;
    return domain.addToggle(ref.current, world);
  }, [domain, world]);

  return (
    <button
      ref={ref}
      type="button"
      role="switch"
      aria-checked={checked}
      data-state={checked ? "on" : "off"}
      onClick={(event) => {
        onClick?.(event);
        if (event.defaultPrevented) return;
        domain.press(event.currentTarget, world);
        setChecked(!checked);
      }}
      className={cn(
        `relative inline-flex cursor-pointer items-center justify-center transition-transform ${TIMING.press} outline-none select-none focus-visible:ring-2 focus-visible:ring-current/40 focus-visible:ring-offset-2 focus-visible:ring-offset-transparent active:scale-[0.94]`,
        className,
      )}
      {...props}
    >
      {children}
    </button>
  );
}

export interface DomainSwitchScopeProps extends React.HTMLAttributes<HTMLDivElement> {
  /** The world the domain brings in. */
  inside?: React.ReactNode;
  /** The world it takes over. */
  outside?: React.ReactNode;
  /** Rendered in whichever world `inside` or `outside` leaves out, e.g. one page that reads `useDomainSwitch().world` or uses `DomainSwitchAside`. */
  children?: React.ReactNode;
  /** Width of the seam of stars at the edge of the domain, in px. `0` gives a clean edge. */
  seam?: number;
  /** How much the inside is magnified while the domain is small, e.g. `0.05` for 5%. It relaxes to none as it grows. */
  lens?: number;
  /** Classes that set the seam's color (a `text-*` color). Its stars take the opposite shade. */
  seamClassName?: string;
}

/**
 * The area the domain takes over. Both worlds are real markup stacked in
 * one cell; the inside one is clipped to the sphere on top.
 */
export function DomainSwitchScope({
  inside,
  outside,
  children,
  seam = 10,
  lens = 0.05,
  className,
  seamClassName,
  ...props
}: DomainSwitchScopeProps) {
  const { checked, domain } = useDomainSwitchContext("DomainSwitchScope");
  const rootRef = React.useRef<HTMLDivElement>(null);
  const outsideRef = React.useRef<HTMLDivElement>(null);
  const insideRef = React.useRef<HTMLDivElement>(null);
  const lensRef = React.useRef<HTMLDivElement>(null);
  const canvasRef = React.useRef<HTMLCanvasElement>(null);
  // The first paint, before the effect takes over: only the world in charge shows.
  const [initial] = React.useState(checked);

  React.useLayoutEffect(() => {
    const root = rootRef.current;
    const outsideEl = outsideRef.current;
    const insideEl = insideRef.current;
    const lensEl = lensRef.current;
    const canvas = canvasRef.current;
    if (!root || !outsideEl || !insideEl || !lensEl || !canvas) return;
    const context = canvas.getContext("2d");

    let width = 0;
    let height = 0;
    let dpr = 1;
    let cx = 0;
    let cy = 0;
    let radius = 0;
    let band: [number, number, number] = [9, 9, 11];
    let star = "#fff";
    let drawn = false;
    let focused: Element | null = null;

    const scope: Scope = {
      inside: insideEl,
      outside: outsideEl,
      focused: () => focused,
      measure(origin) {
        const box = canvas.getBoundingClientRect();
        width = box.width;
        height = box.height;
        dpr = Math.min(window.devicePixelRatio || 1, 2);
        const w = Math.round(width * dpr);
        const h = Math.round(height * dpr);
        if (canvas.width !== w || canvas.height !== h) {
          canvas.width = w;
          canvas.height = h;
        }
        cx = origin ? origin.x - box.left : width / 2;
        cy = origin ? origin.y - box.top : height / 2;
        // Out to the farthest corner, plus the seam, so the seam leaves too.
        radius =
          Math.max(
            Math.hypot(cx, cy),
            Math.hypot(width - cx, cy),
            Math.hypot(cx, height - cy),
            Math.hypot(width - cx, height - cy),
          ) +
          seam +
          2;
        band = toRgb(getComputedStyle(canvas).color);
        star = luminance(band) < 0.5 ? "#f4f6ff" : "#0b0c10";
      },
      render(p) {
        const reduced = domain.reduced();
        const target = domain.target();
        const settledIn = p >= 1 && target === 1;
        const settledOut = p <= 0 && target === 0;
        insideEl.style.visibility = settledOut ? "hidden" : "";
        outsideEl.style.visibility = settledIn ? "hidden" : "";

        if (reduced || settledIn || settledOut) {
          insideEl.style.clipPath = "";
          insideEl.style.opacity = reduced && !settledIn ? String(p) : "";
          lensEl.style.transform = "";
          if (drawn && context) {
            context.clearRect(0, 0, canvas.width, canvas.height);
            drawn = false;
          }
          return;
        }

        const r = p * radius;
        insideEl.style.opacity = "";
        insideEl.style.clipPath = `circle(${r}px at ${cx}px ${cy}px)`;
        lensEl.style.transformOrigin = `${cx}px ${cy}px`;
        lensEl.style.transform = lens ? `scale(${1 + lens * (1 - p) * (1 - p)})` : "";
        if (context && seam > 0) {
          drawSeam(context, { width, height, dpr, cx, cy, r, seam, band, star, t: performance.now() });
          drawn = true;
        }
      },
    };

    const onFocusIn = (event: FocusEvent) => {
      focused = event.target as Element;
    };
    const onFocusOut = (event: FocusEvent) => {
      // Focus going somewhere else on the page, not just dropped.
      if (event.relatedTarget && !root.contains(event.relatedTarget as Node)) focused = null;
    };
    root.addEventListener("focusin", onFocusIn);
    root.addEventListener("focusout", onFocusOut);
    const remove = domain.addScope(scope);
    const unsubscribe = domain.progress.on("change", scope.render);
    const observer = new ResizeObserver(() => domain.remeasure(scope));
    observer.observe(root);
    return () => {
      root.removeEventListener("focusin", onFocusIn);
      root.removeEventListener("focusout", onFocusOut);
      remove();
      unsubscribe();
      observer.disconnect();
    };
  }, [domain, seam, lens]);

  const outsideWorld = outside ?? children;
  const insideWorld = inside ?? children;

  return (
    <div
      ref={rootRef}
      className={cn(
        "relative isolate grid grid-cols-[minmax(0,1fr)] grid-rows-[minmax(0,1fr)] overflow-hidden",
        className,
      )}
      {...props}
    >
      <div
        ref={outsideRef}
        inert={checked}
        aria-hidden={checked || undefined}
        className="relative [grid-area:1/1]"
        style={initial ? { visibility: "hidden" } : undefined}
      >
        <WorldContext.Provider value="outside">{outsideWorld}</WorldContext.Provider>
      </div>
      <div
        ref={insideRef}
        inert={!checked}
        aria-hidden={!checked || undefined}
        className="relative [grid-area:1/1]"
        style={initial ? undefined : { visibility: "hidden" }}
      >
        <div ref={lensRef} className="h-full w-full">
          <WorldContext.Provider value="inside">{insideWorld}</WorldContext.Provider>
        </div>
      </div>
      <canvas
        ref={canvasRef}
        aria-hidden
        className={cn("pointer-events-none absolute inset-0 z-10 size-full text-zinc-950", seamClassName)}
      />
    </div>
  );
}

export interface DomainSwitchAsideProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Classes it takes inside the domain. Replaces the default dim and blur. */
  insideClassName?: string;
}

/** Something non-essential: inside the domain it dims and blurs away, and can't be reached. */
export function DomainSwitchAside({ className, insideClassName, ...props }: DomainSwitchAsideProps) {
  const world = React.useContext(WorldContext);
  const isInside = world === "inside";
  return (
    <div
      inert={isInside || undefined}
      className={cn(
        className,
        isInside && (insideClassName ?? "scale-[0.98] opacity-[0.14] blur-[5px] saturate-50"),
      )}
      {...props}
    />
  );
}

export interface DomainSwitchMainProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Classes it takes inside the domain. Replaces the default scale. */
  insideClassName?: string;
}

/** The content that matters: inside the domain it comes forward a touch. */
export function DomainSwitchMain({ className, insideClassName, ...props }: DomainSwitchMainProps) {
  const world = React.useContext(WorldContext);
  return (
    <div
      className={cn(className, world === "inside" && (insideClassName ?? "scale-[1.04]"))}
      {...props}
    />
  );
}

/* ── the seam ─────────────────────────────────────────────── */

type SeamFrame = {
  width: number;
  height: number;
  dpr: number;
  cx: number;
  cy: number;
  r: number;
  seam: number;
  band: [number, number, number];
  star: string;
  t: number;
};

const TAU = Math.PI * 2;
const PHI = 0.6180339887498949;

// A stable random number per star, so a star keeps its place and size.
function hash(k: number, salt: number) {
  const x = Math.sin(k * 127.1 + salt * 311.7) * 43758.5453;
  return x - Math.floor(x);
}

function drawSeam(ctx: CanvasRenderingContext2D, f: SeamFrame) {
  const { width, height, cx, cy, r, seam, t } = f;
  ctx.setTransform(f.dpr, 0, 0, f.dpr, 0, 0);
  ctx.clearRect(0, 0, width, height);
  if (r <= 0.5) return;
  // A sphere the size of a toggle is all seam; let it come in.
  const grown = Math.min(1, r / (seam * 4));
  const [cr, cg, cb] = f.band;
  const rgba = (a: number) => `rgba(${cr},${cg},${cb},${a * grown})`;

  // The band: a strip of space across the edge, with a soft shadow
  // reaching in so the inside sits a little deeper.
  const inner = Math.max(0, r - seam * 3.2);
  const outer = r + seam * 0.75;
  const at = (x: number) => Math.min(1, Math.max(0, (x - inner) / (outer - inner)));
  const gradient = ctx.createRadialGradient(cx, cy, inner, cx, cy, outer);
  gradient.addColorStop(0, rgba(0));
  gradient.addColorStop(at(r - seam * 1.2), rgba(0.12));
  gradient.addColorStop(at(r - seam * 0.4), rgba(0.85));
  gradient.addColorStop(at(r + seam * 0.3), rgba(0.85));
  gradient.addColorStop(1, rgba(0));
  ctx.fillStyle = gradient;
  ctx.beginPath();
  ctx.arc(cx, cy, outer, 0, TAU);
  ctx.arc(cx, cy, inner, 0, TAU, true);
  ctx.fill();

  // Stars on a low-discrepancy sequence of angles: any first n of them are
  // spread evenly, so the seam fills in as it lengthens and none jump.
  const count = Math.min(SEAM.maxStars, (TAU * r) / SEAM.stars);
  const last = Math.min(SEAM.maxStars, Math.ceil(count + SEAM.starFade));
  const spin = t * TIMING.drift;
  ctx.fillStyle = f.star;
  for (let k = 0; k < last; k++) {
    const u = hash(k, 1);
    const v = hash(k, 2);
    const angle = ((k * PHI) % 1) * TAU + spin;
    // Across the strip, thickest at the edge itself.
    const d = r + (u - 0.5) * (0.4 + 0.6 * hash(k, 4)) * seam * 1.3;
    const x = cx + Math.cos(angle) * d;
    const y = cy + Math.sin(angle) * d;
    if (x < -2 || y < -2 || x > width + 2 || y > height + 2) continue;
    const twinkle = 0.55 + 0.45 * Math.sin(t * (TIMING.twinkle.base + TIMING.twinkle.spread * v) + u * TAU);
    let alpha = (0.45 + 0.55 * hash(k, 3)) * twinkle * grown;
    if (k > count) alpha *= 1 - (k - count) / SEAM.starFade;
    if (alpha <= 0.02) continue;
    const size = 0.7 + v * v * 1.3;
    ctx.globalAlpha = alpha;
    ctx.fillRect(x - size / 2, y - size / 2, size, size);
    // One in thirty is a glint with a faint halo.
    if (v > 0.967) {
      ctx.globalAlpha = alpha * 0.22;
      ctx.fillRect(x - 1.75, y - 1.75, 3.5, 3.5);
    }
  }
  ctx.globalAlpha = 1;
}

// Canvas gradients need rgb. Computed colors can be oklch, so let the
// canvas resolve it.
let probe: CanvasRenderingContext2D | null = null;
function toRgb(color: string): [number, number, number] {
  probe ??= document.createElement("canvas").getContext("2d", { willReadFrequently: true });
  if (!probe) return [9, 9, 11];
  probe.clearRect(0, 0, 1, 1);
  probe.fillStyle = "#000";
  probe.fillStyle = color;
  probe.fillRect(0, 0, 1, 1);
  const [r, g, b] = probe.getImageData(0, 0, 1, 1).data;
  return [r, g, b];
}

function luminance([r, g, b]: [number, number, number]) {
  return (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255;
}