crafts

"use client";

import { useEffect, useRef, useState } from "react";
import { Check, Copy } from "lucide-react";
import { cn } from "../../lib/cn";

type Props = {
  /** Text placed on the clipboard. */
  value: string;
  /** Optional visible label. Omit for an icon-only button. */
  label?: string;
  className?: string;
  /** How long the confirmed state holds, in ms. */
  timeout?: number;
};

/**
 * Copy button with a blur-masked state morph.
 *
 * The blur is the whole trick. A plain crossfade between two icons shows you
 * two distinct objects overlapping for 200ms, which looks wrong however you
 * tune the easing. A couple of pixels of blur during the swap blends them, and
 * the eye reads one object transforming instead of two objects trading places.
 *
 * Press feedback is `scale(0.97)` on `:active` so the button answers the press
 * itself, not the async result.
 */
export function CopyButton({ value, label, className, timeout = 1600 }: Props) {
  const [copied, setCopied] = useState(false);
  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);

  useEffect(
    () => () => {
      if (timer.current) clearTimeout(timer.current);
    },
    [],
  );

  async function copy() {
    try {
      await navigator.clipboard.writeText(value);
    } catch {
      return; // clipboard blocked (insecure origin, denied permission)
    }
    setCopied(true);
    if (timer.current) clearTimeout(timer.current);
    timer.current = setTimeout(() => setCopied(false), timeout);
  }

  return (
    <button
      type="button"
      onClick={copy}
      aria-label={copied ? "Copied" : `Copy ${label ?? "to clipboard"}`}
      data-copied={copied || undefined}
      className={cn(
        "group relative inline-flex h-8 select-none items-center gap-1.5 rounded-md",
        "border border-line bg-surface px-2.5 text-[13px] font-medium text-muted",
        "transition-[transform,background-color,color,border-color] duration-fast ease-out",
        "hover:bg-surface-hover hover:text-fg active:scale-[0.97]",
        "data-[copied]:border-live/40 data-[copied]:text-live",
        className,
      )}
    >
      {/* Both states occupy the same box so the button never changes width. */}
      <span className="relative grid h-4 w-4 place-items-center">
        <Icon show={!copied}>
          <Copy size={14} strokeWidth={2} />
        </Icon>
        <Icon show={copied}>
          <Check size={14} strokeWidth={2.5} />
        </Icon>
      </span>

      {label ? (
        <span className="relative block">
          <span className="invisible" aria-hidden>
            {/* reserves the wider of the two labels, so no layout shift on swap */}
            {label.length >= 6 ? label : "copied"}
          </span>
          <Label show={!copied}>{label}</Label>
          <Label show={copied}>copied</Label>
        </span>
      ) : null}

      <span className="sr-only" role="status" aria-live="polite">
        {copied ? "Copied to clipboard" : ""}
      </span>
    </button>
  );
}

function Icon({
  show,
  children,
}: {
  show: boolean;
  children: React.ReactNode;
}) {
  return (
    <span
      aria-hidden
      className={cn(
        "col-start-1 row-start-1 transition-[opacity,filter,transform] duration-[200ms] ease-out",
        show
          ? "scale-100 opacity-100 blur-0"
          : "scale-[0.6] opacity-0 blur-[3px]",
      )}
    >
      {children}
    </span>
  );
}

function Label({
  show,
  children,
}: {
  show: boolean;
  children: React.ReactNode;
}) {
  return (
    <span
      aria-hidden
      className={cn(
        "absolute inset-0 whitespace-nowrap transition-[opacity,filter] duration-[200ms] ease-out",
        show ? "opacity-100 blur-0" : "opacity-0 blur-[3px]",
      )}
    >
      {children}
    </span>
  );
}

export default CopyButton;

"use client";

import {
  createContext,
  useCallback,
  useContext,
  useEffect,
  useId,
  useMemo,
  useRef,
  useState,
} from "react";
import { cn } from "../../lib/cn";

type Side = "top" | "bottom" | "left" | "right";

type GroupState = { openUntil: number };
const TooltipGroup = createContext<{ get(): GroupState; touch(): void } | null>(
  null,
);

/**
 * Wrap a cluster of tooltips (a toolbar, an icon row) so the *first* one waits
 * out the delay but the rest open instantly while the user is still sweeping
 * across the group. The delay exists to stop tooltips firing on a pointer
 * merely passing through; once the user has demonstrably stopped to read one,
 * that reason is gone, and keeping the delay just makes the toolbar feel slow.
 */
export function TooltipProvider({
  children,
  /** How long instant-mode survives after the last tooltip closes, in ms. */
  grace = 400,
}: {
  children: React.ReactNode;
  grace?: number;
}) {
  const state = useRef<GroupState>({ openUntil: 0 });
  const api = useMemo(
    () => ({
      get: () => state.current,
      touch: () => {
        state.current.openUntil = Date.now() + grace;
      },
    }),
    [grace],
  );
  return <TooltipGroup.Provider value={api}>{children}</TooltipGroup.Provider>;
}

type Props = {
  children: React.ReactNode;
  label: string;
  description?: string;
  side?: Side;
  /** Delay before the first tooltip in a group appears, in ms. */
  delay?: number;
};

export function Tooltip({
  children,
  label,
  description,
  side = "top",
  delay = 350,
}: Props) {
  const group = useContext(TooltipGroup);
  const [open, setOpen] = useState(false);
  const [instant, setInstant] = useState(false);
  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
  const id = useId();

  const clear = () => {
    if (timer.current) clearTimeout(timer.current);
    timer.current = null;
  };
  useEffect(() => clear, []);

  const show = useCallback(
    (immediate = false) => {
      clear();
      const skip =
        immediate || (group ? Date.now() < group.get().openUntil : false);
      setInstant(skip);
      if (skip) {
        setOpen(true);
        return;
      }
      timer.current = setTimeout(() => setOpen(true), delay);
    },
    [delay, group],
  );

  const hide = useCallback(() => {
    clear();
    if (open) group?.touch();
    setOpen(false);
  }, [group, open]);

  // Escape closes without moving the pointer. A tooltip must never trap focus
  // or sit stubbornly over the thing you are trying to read.
  useEffect(() => {
    if (!open) return;
    const onKey = (e: KeyboardEvent) => e.key === "Escape" && hide();
    document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, [open, hide]);

  return (
    <span
      className="relative inline-flex"
      onPointerEnter={(e) => e.pointerType !== "touch" && show()}
      onPointerLeave={hide}
      onFocus={() => show(true)}
      onBlur={hide}
    >
      <span aria-describedby={open ? id : undefined}>{children}</span>

      <span
        id={id}
        role="tooltip"
        data-side={side}
        data-open={open || undefined}
        // The origin is the trigger, not the tooltip's own centre: a popover
        // that scales out of the element you are pointing at keeps the
        // relationship between the two obvious.
        className={cn(
          "pointer-events-none absolute z-50 w-max max-w-[220px] rounded-md",
          "border border-line bg-surface px-2.5 py-1.5 shadow-md",
          "transition-[opacity,transform] ease-out",
          instant ? "duration-0" : "duration-[150ms]",
          "opacity-0 scale-[0.96]",
          "data-[open]:opacity-100 data-[open]:scale-100",
          side === "top" &&
            "bottom-full left-1/2 mb-2 -translate-x-1/2 origin-bottom",
          side === "bottom" &&
            "top-full left-1/2 mt-2 -translate-x-1/2 origin-top",
          side === "left" &&
            "right-full top-1/2 mr-2 -translate-y-1/2 origin-right",
          side === "right" &&
            "left-full top-1/2 ml-2 -translate-y-1/2 origin-left",
        )}
      >
        <span className="block whitespace-nowrap text-[12px] font-medium text-fg">
          {label}
        </span>
        {description ? (
          <span className="mt-0.5 block text-[11px] leading-snug text-dim">
            {description}
          </span>
        ) : null}
      </span>
    </span>
  );
}

export default Tooltip;

"use client";

import {
  useCallback,
  useEffect,
  useLayoutEffect,
  useRef,
  useState,
} from "react";
import { cn } from "../../lib/cn";

type Option<T extends string> = { value: T; label: string };

type Props<T extends string> = {
  options: readonly Option<T>[];
  value: T;
  onChange: (value: T) => void;
  "aria-label": string;
  className?: string;
};

const useIsoLayoutEffect =
  typeof window !== "undefined" ? useLayoutEffect : useEffect;

/**
 * Segmented control with a clip-path colour transition.
 *
 * The label row is rendered twice. The lower copy is styled inactive; the upper
 * copy is styled active and clipped to exactly the selected segment. Sliding
 * the clip in lockstep with the thumb means the text colour changes *as the
 * thumb passes over it*, pixel by pixel, which you cannot get by timing a
 * `color` transition on each label, where the text always flips slightly ahead
 * of or behind the thumb.
 *
 * Arrow keys move the selection, as a native radio group would.
 */
export function SegmentedControl<T extends string>({
  options,
  value,
  onChange,
  className,
  ...rest
}: Props<T>) {
  const list = useRef<HTMLDivElement>(null);
  const items = useRef<(HTMLButtonElement | null)[]>([]);
  const [rect, setRect] = useState({ left: 0, width: 0, track: 0 });
  const [ready, setReady] = useState(false);

  const index = Math.max(
    0,
    options.findIndex((o) => o.value === value),
  );

  const measure = useCallback(() => {
    const el = items.current[index];
    const parent = list.current;
    if (!el || !parent) return;
    // Track width is measured here and kept in state rather than read off the
    // ref during render, where it would be null on first pass and stale after.
    setRect({
      left: el.offsetLeft,
      width: el.offsetWidth,
      track: parent.offsetWidth,
    });
  }, [index]);

  useIsoLayoutEffect(() => {
    measure();
    // Skip the transition on first paint so the thumb doesn't slide in from 0.
    const id = requestAnimationFrame(() => setReady(true));
    return () => cancelAnimationFrame(id);
  }, [measure]);

  useEffect(() => {
    if (!list.current || typeof ResizeObserver === "undefined") return;
    const ro = new ResizeObserver(measure);
    ro.observe(list.current);
    return () => ro.disconnect();
  }, [measure]);

  function onKeyDown(e: React.KeyboardEvent) {
    const delta = e.key === "ArrowRight" ? 1 : e.key === "ArrowLeft" ? -1 : 0;
    if (!delta) return;
    e.preventDefault();
    const next = (index + delta + options.length) % options.length;
    onChange(options[next].value);
    items.current[next]?.focus();
  }

  const track = rect.track || 1;
  const right = Math.max(0, 100 - ((rect.left + rect.width) / track) * 100);
  const left = (rect.left / track) * 100;
  const clip = `inset(0 ${right}% 0 ${left}%)`;

  const transition = ready
    ? "transition-[transform,width,clip-path] duration-slow ease-in-out"
    : "";

  return (
    <div
      ref={list}
      role="radiogroup"
      onKeyDown={onKeyDown}
      className={cn(
        "relative isolate inline-flex rounded-lg border border-line bg-bg-subtle p-1",
        className,
      )}
      {...rest}
    >
      {/* thumb */}
      <span
        aria-hidden
        className={cn(
          "absolute inset-y-1 left-0 -z-10 rounded-md bg-surface shadow-sm",
          transition,
        )}
        style={{ width: rect.width, transform: `translateX(${rect.left}px)` }}
      />

      {/* base (inactive) layer */}
      {options.map((o, i) => (
        <button
          key={o.value}
          ref={(el) => {
            items.current[i] = el;
          }}
          type="button"
          role="radio"
          aria-checked={o.value === value}
          tabIndex={o.value === value ? 0 : -1}
          onClick={() => onChange(o.value)}
          className={cn(
            "relative rounded-md px-3 py-1.5 text-[13px] font-medium text-dim",
            "transition-transform duration-fast ease-out active:scale-[0.97]",
          )}
        >
          {o.label}
        </button>
      ))}

      {/* active layer, clipped to the thumb */}
      <div
        aria-hidden
        className={cn(
          "pointer-events-none absolute inset-0 flex p-1 text-fg",
          transition,
        )}
        style={{ clipPath: clip }}
      >
        {options.map((o) => (
          <span
            key={o.value}
            className="rounded-md px-3 py-1.5 text-[13px] font-semibold"
          >
            {o.label}
          </span>
        ))}
      </div>
    </div>
  );
}

export default SegmentedControl;

"use client";

import { useEffect, useRef, useState } from "react";
import { useInView } from "./use-in-view";
import { cn } from "../../lib/cn";

type Props = {
  value: number;
  /** Rendered before the number, e.g. "$". */
  prefix?: string;
  /** Rendered after the number, e.g. "%" or "ms". */
  suffix?: string;
  /** Locale-aware grouping, on by default. */
  format?: boolean;
  /**
   * Count up from zero the first time it scrolls into view. Worth it for a
   * headline figure the page is making an argument with; noise for a value the
   * reader is only glancing at.
   */
  countUp?: boolean;
  className?: string;
};

/**
 * A number that rolls to its new value one digit at a time.
 *
 * Only the digits that actually changed move: each column is a 0–9 strip
 * translated on the Y axis, so going 199 → 200 rolls three columns while
 * 200 → 201 rolls one. Rolling the whole number for a single-digit change
 * reads as noise.
 *
 * Everything is `font-variant-numeric: tabular-nums`, which is what stops the
 * layout twitching as glyph widths change mid-roll, which is why most
 * hand-rolled counters look unstable.
 *
 * Under reduced motion the value simply updates. A rolling number is
 * decorative; the number is the information.
 */
export function AnimatedNumber({
  value,
  prefix,
  suffix,
  format = true,
  countUp = false,
  className,
}: Props) {
  const [mounted, setMounted] = useState(false);
  useEffect(() => setMounted(true), []);

  const [ref, { inView, armed }] = useInView<HTMLSpanElement>(-40);
  const [shown, setShown] = useState(countUp ? 0 : value);
  const raf = useRef<number | null>(null);

  useEffect(() => {
    if (!countUp) {
      setShown(value);
      return;
    }
    // Only count when the reveal actually armed; otherwise show the value.
    if (!armed) {
      setShown(value);
      return;
    }
    if (!inView) return;

    // Ease-out so it arrives quickly and settles, rather than crawling the
    // whole way. A linear count reads as a progress bar, not an arrival.
    const start = performance.now();
    const D = 900;
    const tick = (now: number) => {
      const t = Math.min(1, (now - start) / D);
      const eased = 1 - Math.pow(1 - t, 3);
      setShown(Math.round(value * eased));
      if (t < 1) raf.current = requestAnimationFrame(tick);
    };
    raf.current = requestAnimationFrame(tick);
    return () => {
      if (raf.current) cancelAnimationFrame(raf.current);
    };
  }, [countUp, inView, armed, value]);

  // While counting, the per-digit roll is suppressed: thirty updates a second
  // against a 520ms transition is a blur, not an odometer.
  const counting = countUp && shown !== value;
  const display = countUp ? shown : value;
  const text = format ? display.toLocaleString("en-US") : String(display);
  const chars = text.split("");

  return (
    <span
      ref={ref}
      className={cn("tnum inline-flex items-baseline", className)}
    >
      {/* The digit strips are decoration. Screen readers get real text, because
          aria-label on a generic span is not reliably announced and role="text"
          only exists in Safari. */}
      {/* The final value, always. A screen reader should never be read a
          number that is mid-count. */}
      <span className="sr-only">{`${prefix ?? ""}${
        format ? value.toLocaleString("en-US") : String(value)
      }${suffix ?? ""}`}</span>
      <span aria-hidden className="inline-flex items-baseline">
        {prefix ? <span>{prefix}</span> : null}
        {chars.map((c, i) =>
          /\d/.test(c) ? (
            <Digit key={i} digit={Number(c)} animate={mounted && !counting} />
          ) : (
            <span key={i}>{c}</span>
          ),
        )}
        {suffix ? <span>{suffix}</span> : null}
      </span>
    </span>
  );
}

function Digit({ digit, animate }: { digit: number; animate: boolean }) {
  const first = useRef(true);
  useEffect(() => {
    first.current = false;
  }, []);

  return (
    <span
      className="relative inline-block overflow-hidden tabular-nums"
      style={{ height: "1em", width: "1ch", verticalAlign: "bottom" }}
    >
      <span
        className="absolute inset-x-0 top-0 flex flex-col motion-reduce:!transition-none"
        style={{
          transform: `translateY(${-digit}em)`,
          transition:
            animate && !first.current
              ? "transform 520ms var(--ease-out)"
              : undefined,
        }}
      >
        {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((n) => (
          <span key={n} style={{ height: "1em", lineHeight: "1em" }}>
            {n}
          </span>
        ))}
      </span>
    </span>
  );
}

export default AnimatedNumber;

"use client";

import { useCallback, useEffect, useRef, useState } from "react";
import { cn } from "../../lib/cn";

type Props = {
  children: React.ReactNode;
  onConfirm: () => void;
  /** How long the hold must last, in ms. */
  duration?: number;
  /** Destructive styling: red fill instead of accent. */
  destructive?: boolean;
  className?: string;
};

/**
 * Hold-to-confirm: a destructive action that needs deliberate intent but no
 * modal.
 *
 * Two details do the work.
 *
 * The fill is a `clip-path: inset()` overlay rather than an animated width, so
 * it composites on the GPU and never reflows the label underneath.
 *
 * The timing is deliberately asymmetric: slow going in (the user is deciding),
 * snappy coming back (the system is responding). A release that unwound as
 * slowly as the press would feel like the button was arguing with you.
 *
 * Escape aborts, and the whole thing is keyboard-operable via Space/Enter hold.
 */
export function HoldToConfirm({
  children,
  onConfirm,
  duration = 1200,
  destructive = true,
  className,
}: Props) {
  const [holding, setHolding] = useState(false);
  const [done, setDone] = useState(false);
  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);

  const cancel = useCallback(() => {
    if (timer.current) clearTimeout(timer.current);
    timer.current = null;
    setHolding(false);
  }, []);

  const begin = useCallback(() => {
    if (timer.current || done) return;
    setHolding(true);
    timer.current = setTimeout(() => {
      timer.current = null;
      setHolding(false);
      setDone(true);
      onConfirm();
      setTimeout(() => setDone(false), 1400);
    }, duration);
  }, [duration, onConfirm, done]);

  useEffect(() => cancel, [cancel]);

  useEffect(() => {
    if (!holding) return;
    const onKey = (e: KeyboardEvent) => e.key === "Escape" && cancel();
    document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, [holding, cancel]);

  return (
    <button
      type="button"
      onPointerDown={(e) => {
        e.currentTarget.setPointerCapture(e.pointerId);
        begin();
      }}
      onPointerUp={cancel}
      onPointerCancel={cancel}
      onKeyDown={(e) => {
        if (e.key === " " || e.key === "Enter") {
          e.preventDefault();
          begin();
        }
      }}
      onKeyUp={cancel}
      aria-label={done ? "Confirmed" : "Press and hold to confirm"}
      className={cn(
        "relative isolate select-none overflow-hidden rounded-md border px-3.5 py-2",
        "text-[13px] font-medium",
        "transition-[transform,border-color,color] duration-fast ease-out",
        "active:scale-[0.98] touch-none",
        done
          ? "border-live/50 text-live"
          : destructive
            ? "border-line text-muted hover:border-red-500/40 hover:text-fg"
            : "border-line text-muted hover:border-accent/40 hover:text-fg",
        className,
      )}
    >
      {/* Fill layer. Slow in, fast out. The whole feel lives in these two
          transition declarations. */}
      <span
        aria-hidden
        className={cn(
          "absolute inset-0 -z-10",
          destructive ? "bg-red-500/20" : "bg-accent-soft",
        )}
        style={{
          clipPath: holding ? "inset(0 0 0 0)" : "inset(0 100% 0 0)",
          transition: holding
            ? `clip-path ${duration}ms linear`
            : "clip-path 200ms var(--ease-out)",
        }}
      />
      <span className="relative">{done ? "confirmed" : children}</span>
    </button>
  );
}

export default HoldToConfirm;

"use client";

import { useCallback, useEffect, useRef } from "react";
import { cn } from "../../lib/cn";
import { project, rubberband, useReducedMotion, useSpring } from "./use-spring";

type Props = {
  open: boolean;
  onClose: () => void;
  children: React.ReactNode;
  title: string;
  className?: string;
};

const CLOSE_VELOCITY = 350; // px/s. A flick this fast dismisses regardless of distance
const CLOSE_FRACTION = 0.45; // or drag past this share of the sheet's height

/**
 * A bottom sheet you can throw.
 *
 * This is the piece where a CSS transition genuinely cannot get you there, and
 * the reasons are worth naming:
 *
 * **1:1 tracking with the grab offset.** The sheet stays glued to the finger
 * from wherever you grabbed it. Snapping to a fixed point on press breaks the
 * illusion in the first frame.
 *
 * **Momentum projection.** On release it does not snap to whichever end is
 * closer. It asks where the sheet *would* come to rest given the release
 * velocity, using Apple's exponential-decay projection rather than the textbook v²/2a, and
 * commits to the outcome nearest that. A short fast flick dismisses; a long
 * slow drag that stops halfway springs back.
 *
 * **Velocity handoff.** The spring starts at the exact velocity the finger left
 * at, so there is no seam between dragging and animating.
 *
 * **Rubber-banding.** Dragging up past the top meets progressive resistance
 * instead of a wall. A hard stop reads as frozen.
 *
 * **Interruptible.** Grab a sheet that is already animating closed and it
 * follows your finger again from wherever it currently is, because the spring
 * animates from the on-screen value rather than a logical target.
 *
 * Note: the whole panel is the drag surface, which is right for short sheets
 * and wrong for scrollable ones. If you put a scroll region inside, move the
 * pointer handlers onto the grab handle and only allow the drag to start when
 * the region is already at scrollTop 0.
 */
export function Sheet({ open, onClose, children, title, className }: Props) {
  const panel = useRef<HTMLDivElement>(null);
  const scrim = useRef<HTMLDivElement>(null);
  const reduced = useReducedMotion();

  const drag = useRef({
    active: false,
    pointerId: -1,
    startPointerY: 0,
    startY: 0,
    history: [] as { y: number; t: number }[],
  });

  const paint = useCallback((y: number) => {
    const el = panel.current;
    if (!el) return;
    el.style.transform = `translate3d(0, ${y}px, 0)`;
    const h = el.offsetHeight || 1;
    // Scrim opacity tracks the sheet, so the background dims continuously
    // during the drag instead of only at the end.
    scrim.current?.style.setProperty("opacity", String(Math.max(0, 1 - y / h)));
  }, []);

  const y = useSpring(9999, { bounce: 0, duration: 0.38 }, paint);

  const height = () => panel.current?.offsetHeight ?? 0;

  // Open / close. Bounce stays at 0 here: nothing the user did carried
  // momentum, so overshoot would be decoration pretending to be physics.
  const mounted = useRef(false);
  useEffect(() => {
    const settle = () => height() || window.innerHeight;
    if (reduced || !mounted.current) {
      mounted.current = true;
      y.jump(open ? 0 : settle());
      return;
    }
    if (open) {
      const h = height() || window.innerHeight;
      if (y.value.current > h - 1) y.jump(h);
      y.set(0);
    } else {
      y.set(height() || window.innerHeight);
    }
  }, [open, y, reduced]);

  // Escape, and a scroll lock that does not reflow the page.
  useEffect(() => {
    if (!open) return;
    const onKey = (e: KeyboardEvent) => e.key === "Escape" && onClose();
    document.addEventListener("keydown", onKey);
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => {
      document.removeEventListener("keydown", onKey);
      document.body.style.overflow = prev;
    };
  }, [open, onClose]);

  function onPointerDown(e: React.PointerEvent) {
    if (drag.current.active) return; // ignore a second finger mid-drag
    const el = panel.current;
    if (!el) return;
    // Capture so tracking survives the pointer leaving the sheet's bounds.
    // Throws NotFoundError if the pointer is no longer active, which happens
    // with synthetic events and with a pointer cancelled by the OS between the
    // event firing and this handler running. A throw here would kill the drag
    // outright, so it is swallowed and tracking continues uncaptured.
    try {
      el.setPointerCapture(e.pointerId);
    } catch {
      /* uncaptured drag still tracks while the pointer is over the sheet */
    }
    y.stop(); // take over from any in-flight animation, at its current value
    drag.current = {
      active: true,
      pointerId: e.pointerId,
      startPointerY: e.clientY,
      // Anchor to wherever the sheet currently *is* on screen. Grab one
      // mid-flight and it keeps its position instead of jumping to a target.
      startY: y.value.current,
      history: [{ y: e.clientY, t: performance.now() }],
    };
  }

  function onPointerMove(e: React.PointerEvent) {
    const d = drag.current;
    if (!d.active || e.pointerId !== d.pointerId) return;
    const el = panel.current;
    if (!el) return;

    // Pure delta: the sheet moves exactly as far as the finger did, from
    // wherever it was grabbed.
    const raw = d.startY + (e.clientY - d.startPointerY);
    // Past the top, resist rather than stop.
    const next = raw < 0 ? rubberband(raw, el.offsetHeight) : raw;
    y.jump(next);

    d.history.push({ y: e.clientY, t: performance.now() });
    if (d.history.length > 6) d.history.shift();
  }

  function onPointerUp(e: React.PointerEvent) {
    const d = drag.current;
    if (!d.active || e.pointerId !== d.pointerId) return;
    d.active = false;

    const h = height() || 1;
    const first = d.history[0];
    const last = d.history[d.history.length - 1];
    const dt = Math.max(1, last.t - first.t);
    const velocity = ((last.y - first.y) / dt) * 1000; // px/s, downward positive

    // Where would it land? Decide from the projection, not the release point.
    const landing = y.value.current + project(velocity);
    const dismiss =
      velocity > CLOSE_VELOCITY ||
      (velocity > -CLOSE_VELOCITY && landing > h * CLOSE_FRACTION);

    // Hand the finger's velocity to the spring. A little bounce is earned here
    // and only here, because the motion that follows continues a real throw.
    if (dismiss) {
      y.set(h, { velocity });
      onClose();
    } else {
      y.set(0, { velocity });
    }
  }

  return (
    <div
      className={cn("fixed inset-0 z-50", !open && "pointer-events-none")}
      aria-hidden={!open}
    >
      <div
        ref={scrim}
        onClick={onClose}
        className="material absolute inset-0 bg-black/50 backdrop-blur-[2px] transition-opacity duration-slow ease-out"
        style={{ opacity: 0 }}
      />

      <div
        ref={panel}
        role="dialog"
        aria-modal="true"
        aria-label={title}
        onPointerDown={onPointerDown}
        onPointerMove={onPointerMove}
        onPointerUp={onPointerUp}
        onPointerCancel={onPointerUp}
        style={{ transform: "translate3d(0, 100%, 0)" }}
        className={cn(
          "absolute inset-x-0 bottom-0 mx-auto w-full max-w-lg touch-none",
          "rounded-t-xl border border-line bg-surface pb-[env(safe-area-inset-bottom)] shadow-lg",
          "will-change-transform",
          className,
        )}
      >
        <div className="flex cursor-grab justify-center py-3 active:cursor-grabbing">
          <span aria-hidden className="h-1 w-9 rounded-full bg-line-strong" />
        </div>
        <div className="px-5 pb-6">{children}</div>
      </div>
    </div>
  );
}

export default Sheet;

"use client";

import { useCallback, useEffect, useRef, useState } from "react";

export type SpringConfig = {
  /**
   * Overshoot, 0–1. `0` is critically damped (settles without bouncing) and is
   * the right default for almost all UI. Reach for bounce only when the gesture
   * that triggered the motion carried momentum: a flick, a throw, a drag
   * release. Overshoot on a menu that merely faded in reads as wrong.
   */
  bounce?: number;
  /**
   * How quickly the value reaches its target, in seconds. This is not a
   * duration; a spring has no fixed duration, its settle time emerges from the
   * parameters. Lower is snappier.
   */
  duration?: number;
  /** Stop threshold in value units. */
  restDelta?: number;
};

const DEFAULTS: Required<SpringConfig> = {
  bounce: 0,
  duration: 0.4,
  restDelta: 0.01,
};

/**
 * A minimal, interruptible spring driven by requestAnimationFrame.
 *
 * Two properties matter and are the whole reason not to use a CSS transition
 * for gesture-driven motion:
 *
 * 1. It always animates from the *presentation* value, the number currently on
 *    screen, so re-targeting mid-flight never produces a visible jump.
 * 2. It carries velocity through a re-target. Swapping one tween for another at
 *    a gesture reversal creates a velocity discontinuity that reads as hitting a
 *    brick wall; blending velocity is what makes a reversal feel physical.
 *
 * Returns a live ref rather than React state so the animation never costs a
 * render. Read `value.current` inside your own rAF loop, or pass `onChange`.
 *
 * @example
 * const y = useSpring(0, { bounce: 0.2, duration: 0.4 });
 * y.set(240, { velocity: releaseVelocity }); // hand off the pointer's velocity
 */
export function useSpring(
  initial: number,
  config: SpringConfig = {},
  onChange?: (value: number) => void,
) {
  const { bounce, duration, restDelta } = { ...DEFAULTS, ...config };

  const value = useRef(initial);
  const velocity = useRef(0);
  const target = useRef(initial);
  const raf = useRef<number | null>(null);
  const last = useRef(0);
  const cb = useRef(onChange);
  cb.current = onChange;

  const stop = useCallback(() => {
    if (raf.current !== null) cancelAnimationFrame(raf.current);
    raf.current = null;
  }, []);

  const tick = useCallback(
    (now: number) => {
      const dt = Math.min((now - last.current) / 1000, 1 / 30); // clamp tab-switch jumps
      last.current = now;

      // Apple's designer-facing parameters mapped onto the physics.
      const dampingRatio = 1 - bounce;
      const undampedFreq = (2 * Math.PI) / duration;
      const stiffness = undampedFreq * undampedFreq;
      const damping = 2 * dampingRatio * undampedFreq;

      // Sub-step so a dropped frame can't destabilise the integration.
      const steps = Math.max(1, Math.ceil(dt / (1 / 240)));
      const h = dt / steps;
      for (let i = 0; i < steps; i++) {
        const displacement = value.current - target.current;
        const accel = -stiffness * displacement - damping * velocity.current;
        velocity.current += accel * h;
        value.current += velocity.current * h;
      }

      const settled =
        Math.abs(value.current - target.current) < restDelta &&
        Math.abs(velocity.current) < restDelta * 10;

      if (settled) {
        value.current = target.current;
        velocity.current = 0;
        cb.current?.(value.current);
        raf.current = null;
        return;
      }

      cb.current?.(value.current);
      raf.current = requestAnimationFrame(tick);
    },
    [bounce, duration, restDelta],
  );

  const start = useCallback(() => {
    if (raf.current !== null) return; // already running: it will pick up the new target
    last.current = performance.now();
    raf.current = requestAnimationFrame(tick);
  }, [tick]);

  /** Re-target. Pass `velocity` to hand off a gesture's release velocity. */
  const set = useCallback(
    (to: number, opts?: { velocity?: number }) => {
      target.current = to;
      if (opts?.velocity !== undefined) velocity.current = opts.velocity;
      start();
    },
    [start],
  );

  /** Jump without animating, for 1:1 tracking while a pointer is down. */
  const jump = useCallback(
    (to: number) => {
      stop();
      value.current = to;
      target.current = to;
      velocity.current = 0;
      cb.current?.(to);
    },
    [stop],
  );

  useEffect(() => stop, [stop]);

  return { value, velocity, set, jump, stop };
}

/**
 * Apple's momentum projection, from the Designing Fluid Interfaces sample code.
 * Given a release velocity, where would the content come to rest? Snap to the
 * target nearest *that* point rather than the nearest point to the release
 * position. This is what makes a flick feel like it throws the element.
 *
 * Note this is exponential decay, not the physics-textbook `v² / 2a`.
 */
export function project(velocity: number, decelerationRate = 0.998) {
  return ((velocity / 1000) * decelerationRate) / (1 - decelerationRate);
}

/**
 * Progressive resistance past a boundary. Real things slow before they stop; a
 * hard stop reads as frozen, continuous resistance reads as "responsive, but
 * there is nothing more here".
 */
export function rubberband(
  overshoot: number,
  dimension: number,
  constant = 0.55,
) {
  return (
    (overshoot * dimension * constant) /
    (dimension + constant * Math.abs(overshoot))
  );
}

/** Live `prefers-reduced-motion`, kept in sync if the user changes it. */
export function useReducedMotion() {
  const [reduced, setReduced] = useState(false);
  useEffect(() => {
    const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
    setReduced(mq.matches);
    const on = () => setReduced(mq.matches);
    mq.addEventListener("change", on);
    return () => mq.removeEventListener("change", on);
  }, []);
  return reduced;
}

"use client";

import { useCallback, useEffect, useRef } from "react";
import { cn } from "../../lib/cn";
import { useReducedMotion, useSpring } from "./use-spring";

type Props = {
  children: React.ReactNode;
  className?: string;
  /** Radius of the glow in px. */
  size?: number;
  as?: "div" | "article" | "li";
};

/**
 * A card with a spotlight that follows the pointer on a spring.
 *
 * Binding the glow straight to the pointer position looks artificial, because
 * nothing in the physical world tracks you with zero lag. Running the position
 * through a spring gives it a trace of momentum and weight, and that is the
 * entire difference between "a gradient that follows the mouse" and something
 * that feels like a material.
 *
 * X and Y get their own independent springs. A single spring over 2D distance
 * desynchronises the moment the two axes have different velocities, which shows
 * up as the glow cutting a corner on diagonal movement.
 *
 * This is decoration and it knows it: it writes CSS custom properties from
 * inside a rAF loop rather than through React state, it never runs on touch or
 * coarse pointers, and it turns itself off entirely under reduced motion.
 */
export function SpotlightCard({
  children,
  className,
  size = 380,
  as = "div",
}: Props) {
  // Widened deliberately: the element varies with `as`, and pinning the ref to
  // one tag's interface buys nothing here: the only thing read off it is
  // getBoundingClientRect, which every element has.
  const Tag = as as React.ElementType;
  const ref = useRef<HTMLElement>(null);
  const reduced = useReducedMotion();

  const write = useCallback((axis: "x" | "y", v: number) => {
    ref.current?.style.setProperty(`--spot-${axis}`, `${v}px`);
  }, []);

  const x = useSpring(0, { bounce: 0, duration: 0.45 }, (v) => write("x", v));
  const y = useSpring(0, { bounce: 0, duration: 0.45 }, (v) => write("y", v));

  useEffect(() => {
    const el = ref.current;
    if (!el || reduced) return;
    if (!window.matchMedia("(hover: hover) and (pointer: fine)").matches)
      return;

    const onMove = (e: PointerEvent) => {
      const r = el.getBoundingClientRect();
      x.set(e.clientX - r.left);
      y.set(e.clientY - r.top);
    };
    const onEnter = (e: PointerEvent) => {
      const r = el.getBoundingClientRect();
      // Jump on entry rather than springing in from the last position, or the
      // glow swings across the card every time you re-enter it.
      x.jump(e.clientX - r.left);
      y.jump(e.clientY - r.top);
      el.style.setProperty("--spot-opacity", "1");
    };
    const onLeave = () => el.style.setProperty("--spot-opacity", "0");

    el.addEventListener("pointerenter", onEnter);
    el.addEventListener("pointermove", onMove);
    el.addEventListener("pointerleave", onLeave);
    return () => {
      el.removeEventListener("pointerenter", onEnter);
      el.removeEventListener("pointermove", onMove);
      el.removeEventListener("pointerleave", onLeave);
    };
  }, [x, y, reduced]);

  return (
    <Tag
      ref={ref}
      className={cn(
        "group relative isolate overflow-hidden rounded-lg border border-line bg-surface",
        "transition-colors duration-slow ease-out hover:border-line-strong",
        className,
      )}
      style={{ ["--spot-opacity" as string]: "0" }}
    >
      <span
        aria-hidden
        className="pointer-events-none absolute inset-0 -z-10 transition-opacity duration-slow ease-out motion-reduce:hidden"
        style={{
          opacity: "var(--spot-opacity)",
          background: `radial-gradient(${size}px circle at var(--spot-x, 50%) var(--spot-y, 50%), var(--accent-soft), transparent 70%)`,
        }}
      />
      {children}
    </Tag>
  );
}

export default SpotlightCard;

"use client";

import { useCallback, useEffect, useRef, useState } from "react";

export type SpringConfig = {
  /**
   * Overshoot, 0–1. `0` is critically damped (settles without bouncing) and is
   * the right default for almost all UI. Reach for bounce only when the gesture
   * that triggered the motion carried momentum: a flick, a throw, a drag
   * release. Overshoot on a menu that merely faded in reads as wrong.
   */
  bounce?: number;
  /**
   * How quickly the value reaches its target, in seconds. This is not a
   * duration; a spring has no fixed duration, its settle time emerges from the
   * parameters. Lower is snappier.
   */
  duration?: number;
  /** Stop threshold in value units. */
  restDelta?: number;
};

const DEFAULTS: Required<SpringConfig> = {
  bounce: 0,
  duration: 0.4,
  restDelta: 0.01,
};

/**
 * A minimal, interruptible spring driven by requestAnimationFrame.
 *
 * Two properties matter and are the whole reason not to use a CSS transition
 * for gesture-driven motion:
 *
 * 1. It always animates from the *presentation* value, the number currently on
 *    screen, so re-targeting mid-flight never produces a visible jump.
 * 2. It carries velocity through a re-target. Swapping one tween for another at
 *    a gesture reversal creates a velocity discontinuity that reads as hitting a
 *    brick wall; blending velocity is what makes a reversal feel physical.
 *
 * Returns a live ref rather than React state so the animation never costs a
 * render. Read `value.current` inside your own rAF loop, or pass `onChange`.
 *
 * @example
 * const y = useSpring(0, { bounce: 0.2, duration: 0.4 });
 * y.set(240, { velocity: releaseVelocity }); // hand off the pointer's velocity
 */
export function useSpring(
  initial: number,
  config: SpringConfig = {},
  onChange?: (value: number) => void,
) {
  const { bounce, duration, restDelta } = { ...DEFAULTS, ...config };

  const value = useRef(initial);
  const velocity = useRef(0);
  const target = useRef(initial);
  const raf = useRef<number | null>(null);
  const last = useRef(0);
  const cb = useRef(onChange);
  cb.current = onChange;

  const stop = useCallback(() => {
    if (raf.current !== null) cancelAnimationFrame(raf.current);
    raf.current = null;
  }, []);

  const tick = useCallback(
    (now: number) => {
      const dt = Math.min((now - last.current) / 1000, 1 / 30); // clamp tab-switch jumps
      last.current = now;

      // Apple's designer-facing parameters mapped onto the physics.
      const dampingRatio = 1 - bounce;
      const undampedFreq = (2 * Math.PI) / duration;
      const stiffness = undampedFreq * undampedFreq;
      const damping = 2 * dampingRatio * undampedFreq;

      // Sub-step so a dropped frame can't destabilise the integration.
      const steps = Math.max(1, Math.ceil(dt / (1 / 240)));
      const h = dt / steps;
      for (let i = 0; i < steps; i++) {
        const displacement = value.current - target.current;
        const accel = -stiffness * displacement - damping * velocity.current;
        velocity.current += accel * h;
        value.current += velocity.current * h;
      }

      const settled =
        Math.abs(value.current - target.current) < restDelta &&
        Math.abs(velocity.current) < restDelta * 10;

      if (settled) {
        value.current = target.current;
        velocity.current = 0;
        cb.current?.(value.current);
        raf.current = null;
        return;
      }

      cb.current?.(value.current);
      raf.current = requestAnimationFrame(tick);
    },
    [bounce, duration, restDelta],
  );

  const start = useCallback(() => {
    if (raf.current !== null) return; // already running: it will pick up the new target
    last.current = performance.now();
    raf.current = requestAnimationFrame(tick);
  }, [tick]);

  /** Re-target. Pass `velocity` to hand off a gesture's release velocity. */
  const set = useCallback(
    (to: number, opts?: { velocity?: number }) => {
      target.current = to;
      if (opts?.velocity !== undefined) velocity.current = opts.velocity;
      start();
    },
    [start],
  );

  /** Jump without animating, for 1:1 tracking while a pointer is down. */
  const jump = useCallback(
    (to: number) => {
      stop();
      value.current = to;
      target.current = to;
      velocity.current = 0;
      cb.current?.(to);
    },
    [stop],
  );

  useEffect(() => stop, [stop]);

  return { value, velocity, set, jump, stop };
}

/**
 * Apple's momentum projection, from the Designing Fluid Interfaces sample code.
 * Given a release velocity, where would the content come to rest? Snap to the
 * target nearest *that* point rather than the nearest point to the release
 * position. This is what makes a flick feel like it throws the element.
 *
 * Note this is exponential decay, not the physics-textbook `v² / 2a`.
 */
export function project(velocity: number, decelerationRate = 0.998) {
  return ((velocity / 1000) * decelerationRate) / (1 - decelerationRate);
}

/**
 * Progressive resistance past a boundary. Real things slow before they stop; a
 * hard stop reads as frozen, continuous resistance reads as "responsive, but
 * there is nothing more here".
 */
export function rubberband(
  overshoot: number,
  dimension: number,
  constant = 0.55,
) {
  return (
    (overshoot * dimension * constant) /
    (dimension + constant * Math.abs(overshoot))
  );
}

/** Live `prefers-reduced-motion`, kept in sync if the user changes it. */
export function useReducedMotion() {
  const [reduced, setReduced] = useState(false);
  useEffect(() => {
    const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
    setReduced(mq.matches);
    const on = () => setReduced(mq.matches);
    mq.addEventListener("change", on);
    return () => mq.removeEventListener("change", on);
  }, []);
  return reduced;
}

"use client";

import { Children } from "react";
import { cn } from "../../lib/cn";

type Props = {
  children: React.ReactNode;
  /** Seconds for one full pass. Longer = slower. */
  speed?: number;
  reverse?: boolean;
  /** Pause when the pointer is over the track. */
  pauseOnHover?: boolean;
  className?: string;
};

/**
 * An infinite horizontal ticker.
 *
 * Constant motion is the one case where `linear` is correct, because easing a loop
 * makes it visibly pulse once per cycle. The content is duplicated and the
 * track translated by exactly -50%, which is what keeps the seam invisible at
 * any width without measuring anything.
 *
 * Under reduced motion the track stops and becomes a normal scrollable row,
 * because a permanently moving band is exactly the kind of thing that setting
 * exists to switch off.
 */
export function Marquee({
  children,
  speed = 40,
  reverse = false,
  pauseOnHover = true,
  className,
}: Props) {
  const items = Children.toArray(children);

  return (
    <div
      className={cn(
        "edge-fade group relative flex overflow-hidden",
        "motion-reduce:overflow-x-auto motion-reduce:no-scrollbar",
        className,
      )}
    >
      {[0, 1].map((copy) => (
        <div
          key={copy}
          aria-hidden={copy === 1}
          className={cn(
            "flex shrink-0 items-center gap-3 pr-3",
            pauseOnHover && "group-hover:[animation-play-state:paused]",
            "motion-reduce:!animate-none",
          )}
          style={{
            animation: `marquee-track ${speed}s linear infinite`,
            animationDirection: reverse ? "reverse" : "normal",
          }}
        >
          {items}
        </div>
      ))}

      <style>{`
        @keyframes marquee-track {
          from { transform: translateX(0); }
          to   { transform: translateX(-100%); }
        }
      `}</style>
    </div>
  );
}

export default Marquee;

import { cn } from "../../lib/cn";

type Props = {
  children: React.ReactNode;
  /** `live` gets the pulsing ring; the rest are static dots. */
  tone?: "live" | "neutral" | "accent";
  className?: string;
};

/**
 * A small labelled status dot.
 *
 * The pulse is a pseudo-element ring rather than an animation on the dot
 * itself, so the dot stays crisp and the ring can be dropped entirely under
 * reduced motion without the dot vanishing with it. Status is never carried by
 * colour alone: the label always says what the colour means.
 */
export function StatusPill({ children, tone = "neutral", className }: Props) {
  const color =
    tone === "live" ? "bg-live" : tone === "accent" ? "bg-accent" : "bg-dim";

  return (
    <span
      className={cn(
        "inline-flex items-center gap-2 rounded-full border border-line bg-surface",
        "py-1 pl-2.5 pr-3 font-mono text-[11px] uppercase tracking-[0.08em] text-muted",
        className,
      )}
    >
      <span className="relative grid h-1.5 w-1.5 place-items-center">
        <span className={cn("h-1.5 w-1.5 rounded-full", color)} />
        {tone === "live" ? (
          <span
            aria-hidden
            className={cn(
              "absolute inset-0 rounded-full motion-reduce:hidden",
              color,
            )}
            style={{ animation: "pulse-ring 2.4s var(--ease-out) infinite" }}
          />
        ) : null}
      </span>
      {children}
    </span>
  );
}

export default StatusPill;

import { cn } from "../../lib/cn";

/**
 * Samples a superellipse, |x|ⁿ + |y|ⁿ = 1, normalised into a 0..1 box.
 *
 * An iOS icon is not a rounded rectangle. A rounded rectangle joins a straight
 * edge to a circular arc, and curvature jumps at that seam; the eye reads the
 * discontinuity as a faintly pinched corner even when it cannot name why. A
 * superellipse has continuous curvature the whole way round, which is what
 * makes the shape look poured rather than cut.
 *
 * Deriving it from the equation rather than copying the bezier constants that
 * circulate for this means the shape is checkable: every sampled point
 * satisfies the equation to within floating-point error, and `n` stays a real
 * dial instead of a magic number.
 */
function superellipse(n: number, steps: number) {
  const pts: [number, number][] = [];
  for (let i = 0; i < steps; i++) {
    const t = (i / steps) * 2 * Math.PI;
    const ct = Math.cos(t);
    const st = Math.sin(t);
    pts.push([
      50 + Math.sign(ct) * Math.abs(ct) ** (2 / n) * 50,
      50 + Math.sign(st) * Math.abs(st) ** (2 / n) * 50,
    ]);
  }
  return pts;
}

/**
 * The shape as a CSS `polygon()` in percentages.
 *
 * Percentages resolve against the element's own box, so one string scales to
 * any size with no measuring, no resize observer, and no `path()` carrying
 * baked-in pixel coordinates that break the moment the box changes.
 *
 * It deliberately does not use an SVG `<clipPath>`. Referencing one means
 * putting the definition somewhere in the DOM: inside the clipped element it
 * gets clipped away along with everything else, and outside it, it becomes a
 * stray node that a flex or grid parent counts as a child. A polygon has
 * neither problem.
 *
 * Straight chords between 64 samples sit ~0.04px inside the true curve at icon
 * size, under a device pixel even at 3× density.
 */
export function squirclePolygon(n = 4.5, steps = 64) {
  return `polygon(${superellipse(n, steps)
    .map(([x, y]) => `${x.toFixed(3)}% ${y.toFixed(3)}%`)
    .join(",")})`;
}

type Props = {
  children?: React.ReactNode;
  /**
   * Superellipse exponent. 2 is an ellipse, high values approach a square.
   * iOS icons sit around 4.5, which is the default.
   */
  n?: number;
  className?: string;
  style?: React.CSSProperties;
  as?: "div" | "span" | "li" | "a";
} & React.HTMLAttributes<HTMLElement>;

/** Clips its children to a squircle. */
export function Squircle({
  children,
  n = 4.5,
  className,
  style,
  as = "div",
  ...rest
}: Props) {
  const As = as as React.ElementType;
  return (
    <As
      className={cn("relative", className)}
      style={{ ...style, clipPath: squirclePolygon(n) }}
      {...rest}
    >
      {children}
    </As>
  );
}

export default Squircle;

"use client";

import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { cn } from "../../lib/cn";
import { Search } from "lucide-react";
import { Kbd } from "./kbd";

export type CommandItem = {
  id: string;
  label: string;
  /** Grouping header. */
  group: string;
  /** Extra words that should match, but are not shown. */
  keywords?: string;
  hint?: string;
  onSelect: () => void;
};

type Props = { items: CommandItem[]; placeholder?: string };

/**
 * ⌘K menu.
 *
 * Three decisions worth naming.
 *
 * **It does not animate.** This is the one thing on the site opened by a
 * keyboard shortcut, which means it gets used tens of times by anyone who finds
 * it. An entrance animation here is a tax charged on every single use, and at
 * that frequency even 150ms reads as the interface hesitating. Raycast has no
 * open animation for exactly this reason.
 *
 * **Scoring, not substring matching.** A prefix match ranks above a word-start
 * match, which ranks above a match buried mid-word, so typing "cr" puts Crafts
 * first instead of whatever happens to appear earliest in the array.
 *
 * **Focus goes back where it came from.** The trigger element is captured on
 * open and refocused on close, so a keyboard user is not dumped at the top of
 * the document.
 */
export function CommandMenu({ items, placeholder = "Search…" }: Props) {
  const [open, setOpen] = useState(false);
  const [query, setQuery] = useState("");
  const [index, setIndex] = useState(0);
  const input = useRef<HTMLInputElement>(null);
  const list = useRef<HTMLDivElement>(null);
  const restoreTo = useRef<HTMLElement | null>(null);

  const results = useMemo(() => score(items, query), [items, query]);

  const close = useCallback(() => {
    setOpen(false);
    setQuery("");
    setIndex(0);
    restoreTo.current?.focus();
  }, []);

  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
        e.preventDefault();
        restoreTo.current = document.activeElement as HTMLElement;
        setOpen((v) => !v);
      }
      if (e.key === "Escape" && open) close();
    };
    document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, [open, close]);

  useEffect(() => {
    if (!open) return;
    input.current?.focus();
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => {
      document.body.style.overflow = prev;
    };
  }, [open]);

  // Keep the active row in view during keyboard navigation, without smooth
  // scrolling, because held arrow keys would queue a backlog of animations.
  useEffect(() => {
    list.current
      ?.querySelector('[data-active="true"]')
      ?.scrollIntoView({ block: "nearest" });
  }, [index]);

  function onKeyDown(e: React.KeyboardEvent) {
    if (e.key === "ArrowDown" || (e.key === "n" && e.ctrlKey)) {
      e.preventDefault();
      setIndex((i) => (i + 1) % Math.max(1, results.length));
    } else if (e.key === "ArrowUp" || (e.key === "p" && e.ctrlKey)) {
      e.preventDefault();
      setIndex((i) => (i - 1 + results.length) % Math.max(1, results.length));
    } else if (e.key === "Enter") {
      e.preventDefault();
      const item = results[index];
      if (item) {
        close();
        item.onSelect();
      }
    }
  }

  if (!open)
    return (
      <Trigger
        onOpen={(from) => {
          restoreTo.current = from;
          setOpen(true);
        }}
      />
    );

  let lastGroup = "";

  return (
    <>
      <Trigger onOpen={() => {}} />
      <div
        className="fixed inset-0 z-[60]"
        role="dialog"
        aria-modal="true"
        aria-label="Command menu"
      >
        <div className="absolute inset-0 bg-black/50" onClick={close} />
        <div
          className={cn(
            "material absolute left-1/2 top-[12vh] w-[min(560px,calc(100vw-2rem))] -translate-x-1/2",
            "overflow-hidden rounded-lg border border-line bg-surface/95 shadow-lg backdrop-blur-2xl backdrop-saturate-150",
          )}
        >
          <div className="flex items-center gap-3 border-b border-line px-4">
            <input
              ref={input}
              value={query}
              onChange={(e) => {
                setQuery(e.target.value);
                setIndex(0);
              }}
              onKeyDown={onKeyDown}
              placeholder={placeholder}
              aria-label="Search"
              className="h-12 flex-1 bg-transparent text-[15px] text-fg outline-none placeholder:text-dim"
            />
            <Kbd>esc</Kbd>
          </div>

          <div ref={list} className="max-h-[46vh] overflow-y-auto p-2">
            {results.length === 0 ? (
              <p className="px-3 py-6 text-center text-[13px] text-dim">
                Nothing matches “{query}”.
              </p>
            ) : (
              results.map((item, i) => {
                const header = item.group !== lastGroup ? item.group : null;
                lastGroup = item.group;
                return (
                  <div key={item.id}>
                    {header ? (
                      <p className="label px-3 pb-1.5 pt-3">{header}</p>
                    ) : null}
                    <button
                      type="button"
                      data-active={i === index}
                      onPointerMove={() => setIndex(i)}
                      onClick={() => {
                        close();
                        item.onSelect();
                      }}
                      className={cn(
                        "flex w-full items-center gap-3 rounded-md px-3 py-2 text-left",
                        "text-[14px] text-muted",
                        // A tint, not a shade. bg-bg-subtle sits 5/255 from the panel in dark
                        // mode: technically a selection, visually nothing.
                        "data-[active=true]:bg-accent/15 data-[active=true]:text-fg",
                      )}
                    >
                      <span className="flex-1 truncate">{item.label}</span>
                      {item.hint ? (
                        <span className="mono shrink-0 text-[11px] text-dim">
                          {item.hint}
                        </span>
                      ) : null}
                    </button>
                  </div>
                );
              })
            )}
          </div>
        </div>
      </div>
    </>
  );
}

function Trigger({ onOpen }: { onOpen: (from: HTMLElement) => void }) {
  return (
    <button
      type="button"
      onClick={(e) => onOpen(e.currentTarget)}
      aria-label="Open command menu"
      className={cn(
        "inline-flex h-8 shrink-0 items-center gap-2 rounded-md border border-line",
        "bg-surface px-2 text-[12px] text-dim md:px-2.5",
        "transition-[transform,color,background-color] duration-fast ease-out",
        "hover:bg-surface-hover hover:text-fg active:scale-[0.97]",
      )}
    >
      <Search size={14} className="md:hidden" />
      <span className="hidden md:inline">Search</span>
      <span className="hidden items-center gap-1 md:inline-flex">
        <Kbd>mod</Kbd>
        <Kbd>K</Kbd>
      </span>
    </button>
  );
}

/**
 * Ranked match. Prefix beats word-start beats mid-word; ties keep the original
 * order, so an empty query renders the list exactly as it was authored.
 */
function score(items: CommandItem[], query: string) {
  const q = query.trim().toLowerCase();
  if (!q) return items;

  return items
    .map((item) => {
      const hay = `${item.label} ${item.keywords ?? ""}`.toLowerCase();
      const at = hay.indexOf(q);
      if (at === -1) return null;
      const rank = at === 0 ? 0 : hay[at - 1] === " " ? 1 : 2;
      return { item, rank, at };
    })
    .filter(
      (v): v is { item: CommandItem; rank: number; at: number } => v !== null,
    )
    .sort((a, b) => a.rank - b.rank || a.at - b.at)
    .map((v) => v.item);
}

export default CommandMenu;

"use client";

import { useEffect, useState } from "react";
import { cn } from "../../lib/cn";

/**
 * A keyboard key.
 *
 * The one thing it does that a styled `<kbd>` does not: it resolves `mod` to ⌘
 * on Apple platforms and Ctrl everywhere else, after mount. Hardcoding ⌘ is
 * wrong for most visitors, and rendering the platform guess on the server
 * guarantees a hydration mismatch, so it starts neutral and settles.
 */
export function Kbd({
  children,
  className,
}: {
  children: string;
  className?: string;
}) {
  const [apple, setApple] = useState<boolean | null>(null);

  useEffect(() => {
    setApple(/Mac|iPhone|iPad|iPod/.test(navigator.platform ?? ""));
  }, []);

  const label =
    children === "mod"
      ? apple === null
        ? ""
        : apple
          ? "⌘"
          : "Ctrl"
      : children;

  return (
    <kbd
      className={cn(
        "inline-grid h-5 min-w-[20px] place-items-center rounded-[5px] border border-line",
        "border-b-2 bg-surface px-1.5 font-mono text-[10px] font-medium text-dim",
        className,
      )}
    >
      {/* Reserve the slot so the row does not reflow when the platform resolves. */}
      <span className={label ? "" : "opacity-0"}>{label || "⌘"}</span>
    </kbd>
  );
}

export default Kbd;

import Image from "next/image";
import { cn } from "../../lib/cn";
import { Squircle } from "./squircle";

type Props = {
  src: string;
  alt: string;
  /** Shown in the chrome bar. Also the accessible caption. */
  url: string;
  /** Width and height of the source, used to reserve the box. */
  width?: number;
  height?: number;
  priority?: boolean;
  className?: string;
};

/**
 * A screenshot in a browser frame.
 *
 * Deliberately without the three coloured traffic lights. They are the part of
 * this pattern that has become decoration: they say "this is a mockup" more
 * than they say "this is a real site". A single chrome bar carrying the actual
 * URL does the useful half of the job, which is telling the reader this is a
 * live page they can go and check.
 *
 * The aspect ratio is fixed and the intrinsic size is declared, so the box is
 * reserved before the image arrives and nothing below it jumps. A screenshot
 * that shifts the page while loading undoes the point of showing it.
 */
export function BrowserFrame({
  src,
  alt,
  url,
  width = 1600,
  height = 1000,
  priority = false,
  className,
}: Props) {
  return (
    <figure
      className={cn(
        "overflow-hidden rounded-lg border border-line bg-bg-subtle shadow-md",
        className,
      )}
    >
      <div className="flex items-center gap-2 border-b border-line px-3 py-2">
        <Squircle
          as="span"
          className="h-3 w-3 shrink-0 bg-line-strong"
          aria-hidden
        />
        <span className="mono truncate text-[11px] text-dim">{url}</span>
      </div>

      <div className="relative aspect-[16/10] w-full">
        <Image
          src={src}
          alt={alt}
          fill
          sizes="(max-width: 768px) 100vw, (max-width: 1200px) 90vw, 1100px"
          className="object-cover object-top"
          priority={priority}
          // Below the fold on every page that uses it, so it waits its turn
          // rather than competing with the text for the first paint.
          loading={priority ? undefined : "lazy"}
        />
      </div>
    </figure>
  );
}

export default BrowserFrame;

import { cn } from "../../lib/cn";

/**
 * Samples a superellipse, |x|ⁿ + |y|ⁿ = 1, normalised into a 0..1 box.
 *
 * An iOS icon is not a rounded rectangle. A rounded rectangle joins a straight
 * edge to a circular arc, and curvature jumps at that seam; the eye reads the
 * discontinuity as a faintly pinched corner even when it cannot name why. A
 * superellipse has continuous curvature the whole way round, which is what
 * makes the shape look poured rather than cut.
 *
 * Deriving it from the equation rather than copying the bezier constants that
 * circulate for this means the shape is checkable: every sampled point
 * satisfies the equation to within floating-point error, and `n` stays a real
 * dial instead of a magic number.
 */
function superellipse(n: number, steps: number) {
  const pts: [number, number][] = [];
  for (let i = 0; i < steps; i++) {
    const t = (i / steps) * 2 * Math.PI;
    const ct = Math.cos(t);
    const st = Math.sin(t);
    pts.push([
      50 + Math.sign(ct) * Math.abs(ct) ** (2 / n) * 50,
      50 + Math.sign(st) * Math.abs(st) ** (2 / n) * 50,
    ]);
  }
  return pts;
}

/**
 * The shape as a CSS `polygon()` in percentages.
 *
 * Percentages resolve against the element's own box, so one string scales to
 * any size with no measuring, no resize observer, and no `path()` carrying
 * baked-in pixel coordinates that break the moment the box changes.
 *
 * It deliberately does not use an SVG `<clipPath>`. Referencing one means
 * putting the definition somewhere in the DOM: inside the clipped element it
 * gets clipped away along with everything else, and outside it, it becomes a
 * stray node that a flex or grid parent counts as a child. A polygon has
 * neither problem.
 *
 * Straight chords between 64 samples sit ~0.04px inside the true curve at icon
 * size, under a device pixel even at 3× density.
 */
export function squirclePolygon(n = 4.5, steps = 64) {
  return `polygon(${superellipse(n, steps)
    .map(([x, y]) => `${x.toFixed(3)}% ${y.toFixed(3)}%`)
    .join(",")})`;
}

type Props = {
  children?: React.ReactNode;
  /**
   * Superellipse exponent. 2 is an ellipse, high values approach a square.
   * iOS icons sit around 4.5, which is the default.
   */
  n?: number;
  className?: string;
  style?: React.CSSProperties;
  as?: "div" | "span" | "li" | "a";
} & React.HTMLAttributes<HTMLElement>;

/** Clips its children to a squircle. */
export function Squircle({
  children,
  n = 4.5,
  className,
  style,
  as = "div",
  ...rest
}: Props) {
  const As = as as React.ElementType;
  return (
    <As
      className={cn("relative", className)}
      style={{ ...style, clipPath: squirclePolygon(n) }}
      {...rest}
    >
      {children}
    </As>
  );
}

export default Squircle;

"use client";

import { cn } from "../../lib/cn";
import { useInView } from "./use-in-view";

type Props = {
  children: React.ReactNode;
  /** Stagger index. Each step adds ~55ms. */
  index?: number;
  /** How far below the fold it fires, in px. Negative means "further in". */
  margin?: number;
  className?: string;
  as?: "div" | "li" | "section" | "article";
} & React.HTMLAttributes<HTMLElement>;

/**
 * Reveals its children when they scroll into view: once, then it stops.
 *
 * The point is the *once*. A page-load entrance animation on content below the
 * fold plays to nobody: by the time the visitor scrolls down it finished
 * minutes ago, so it costs the same work and buys nothing. Worse, if anything
 * pauses animations (a background tab, an occluded window, a screenshot
 * pipeline), the content is stranded at opacity 0.
 *
 * So the observer disconnects after firing, the element is visible by default
 * for anyone without IntersectionObserver or JavaScript, and reduced motion
 * skips straight to the resting state rather than fading.
 */
export function Reveal({
  children,
  index = 0,
  margin = -80,
  className,
  as = "div",
  ...rest
}: Props) {
  // Widened for the same reason as SpotlightCard: the element varies with
  // `as`, and the only thing read off the ref is getBoundingClientRect.
  const As = as as React.ElementType;
  const [ref, { inView }] = useInView<HTMLDivElement>(margin);

  return (
    <As
      ref={ref}
      data-hidden={!inView || undefined}
      style={{ transitionDelay: inView ? `${index * 55}ms` : "0ms" }}
      className={cn(
        "transition-[opacity,transform] duration-[520ms] ease-out",
        "data-[hidden]:translate-y-2.5 data-[hidden]:opacity-0",
        "motion-reduce:!translate-y-0 motion-reduce:!opacity-100 motion-reduce:transition-none",
        className,
      )}
    >
      {children}
    </As>
  );
}

export default Reveal;

"use client";

import { useCallback, useEffect, useRef, useState } from "react";
import { Moon, Sun } from "lucide-react";
import { cn } from "../../lib/cn";
import { THEME_KEY } from "../../lib/theme-script";
import { useReducedMotion } from "./use-spring";

type Theme = "light" | "dark";
const KEY = THEME_KEY;

/**
 * Theme toggle with a circular View Transitions reveal.
 *
 * The new theme wipes in as an expanding circle centred on the button you just
 * pressed, so the change is anchored to its cause rather than appearing to come
 * from nowhere. Where `startViewTransition` is unavailable it degrades to a
 * plain attribute flip. The feature is the polish, never the function.
 *
 * The abrupt light/dark jump is exactly the kind of brightness change reduced
 * motion is meant to soften, so that path skips the reveal too.
 */
export function ThemeToggle({ className }: { className?: string }) {
  const [theme, setTheme] = useState<Theme>("dark");
  const [ready, setReady] = useState(false);
  const btn = useRef<HTMLButtonElement>(null);
  const reduced = useReducedMotion();

  useEffect(() => {
    const stored = localStorage.getItem(KEY) as Theme | null;
    const system = window.matchMedia("(prefers-color-scheme: dark)").matches
      ? "dark"
      : "light";
    setTheme(stored ?? system);
    setReady(true);
  }, []);

  const apply = useCallback((next: Theme) => {
    document.documentElement.setAttribute("data-theme", next);
    document.documentElement.style.colorScheme = next;
    localStorage.setItem(KEY, next);
    setTheme(next);
  }, []);

  const toggle = useCallback(() => {
    const next: Theme = theme === "dark" ? "light" : "dark";
    const doc = document as Document & {
      startViewTransition?: (cb: () => void) => { ready: Promise<void> };
    };

    if (!doc.startViewTransition || reduced) {
      apply(next);
      return;
    }

    const rect = btn.current?.getBoundingClientRect();
    const cx = rect ? rect.left + rect.width / 2 : innerWidth / 2;
    const cy = rect ? rect.top + rect.height / 2 : innerHeight / 2;
    // Radius to the furthest corner, so the circle always clears the viewport.
    const r = Math.hypot(
      Math.max(cx, innerWidth - cx),
      Math.max(cy, innerHeight - cy),
    );

    const transition = doc.startViewTransition(() => apply(next));
    transition.ready.then(() => {
      document.documentElement.animate(
        {
          clipPath: [
            `circle(0px at ${cx}px ${cy}px)`,
            `circle(${r}px at ${cx}px ${cy}px)`,
          ],
        },
        {
          duration: 520,
          easing: "cubic-bezier(0.23, 1, 0.32, 1)",
          pseudoElement: "::view-transition-new(root)",
        },
      );
    });
  }, [theme, apply, reduced]);

  return (
    <button
      ref={btn}
      type="button"
      onClick={toggle}
      aria-label={`Switch to ${theme === "dark" ? "light" : "dark"} theme`}
      className={cn(
        "relative grid h-8 w-8 place-items-center rounded-md border border-line",
        "bg-surface text-muted transition-[transform,color,background-color] duration-fast ease-out",
        "hover:bg-surface-hover hover:text-fg active:scale-[0.94]",
        className,
      )}
    >
      {/* The icon shows where the click takes you, matching the label. Until
          the stored preference is read neither renders, rather than guessing
          and visibly flipping on hydration. */}
      <span
        className={cn(
          "col-start-1 row-start-1 transition-[opacity,transform] duration-[200ms] ease-out",
          ready && theme === "light"
            ? "rotate-0 opacity-100"
            : "-rotate-90 opacity-0",
        )}
      >
        <Moon size={15} strokeWidth={2} />
      </span>
      <span
        className={cn(
          "absolute transition-[opacity,transform] duration-[200ms] ease-out",
          ready && theme === "dark"
            ? "rotate-0 opacity-100"
            : "rotate-90 opacity-0",
        )}
      >
        <Sun size={15} strokeWidth={2} />
      </span>
    </button>
  );
}

export default ThemeToggle;