Morph Search

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, motion, useMotionValue, useTransform } from "motion/react";

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

/* ─────────────────────────────────────────────────────────
 * MORPH SEARCH STORYBOARD
 *
 *  open     the trigger stretches into a search field, one
 *           shape the whole way: its own look fades into the
 *           field's, the magnifier slides to the field's left
 *           edge, and the caret is already in the input
 *  unfold   ~90ms later the field's bottom edge keeps growing
 *           into the results; rows ripple in top to bottom
 *  type     results filter as you type; the panel's height
 *           follows on a spring and each match lights up
 *  move     ↑ ↓ (or the pointer) slides one highlight between
 *           rows
 *  close    Esc, a click outside, or picking a result: the
 *           results fold up, then the field shrinks back into
 *           the trigger, exactly where it started. Grab it on
 *           the way back to open it again
 *  palette  instead of growing in place, the field travels to
 *           the middle of the screen over a dimmed page, and
 *           flies back to the trigger on close
 * ───────────────────────────────────────────────────────── */

const MORPH = {
  open: { type: "spring", visualDuration: 0.36, bounce: 0.16 },
  travel: { type: "spring", visualDuration: 0.42, bounce: 0.08 }, // palette: a longer trip, less overshoot
  close: { type: "spring", visualDuration: 0.3, bounce: 0, delay: 0.05 },
  unfold: { type: "spring", visualDuration: 0.34, bounce: 0.1, delay: 0.09 },
  resize: { type: "spring", visualDuration: 0.26, bounce: 0.06 },
  fold: { type: "spring", visualDuration: 0.2, bounce: 0 },
  highlight: { type: "spring", visualDuration: 0.18, bounce: 0.12 },
  fade: { duration: 0.16, ease: "easeOut" },
  stagger: 0.022, // s between rows as they ripple in
  margin: 12, // px kept clear of the viewport edges
} as const;

const SIZES = {
  // `pad` is the gap before the magnifier; `radius` rounds the field and
  // eases to `panelRadius` once results open under it.
  inline: { width: 360, height: 44, radius: 22, panelRadius: 18, glyph: 16, pad: 14, maxList: 340 },
  palette: { width: 560, height: 56, radius: 18, panelRadius: 18, glyph: 18, pad: 18, maxList: 380 },
} as const;

const FOOTER_HEIGHT = 40;

export interface MorphSearchItem {
  id: string;
  label: string;
  /** Muted text after the label. */
  description?: string;
  /** Results are grouped under this heading, in order of each group's best match. */
  group?: string;
  icon?: React.ReactNode;
  /** Keys shown on the right, e.g. `["⌘", "N"]`. */
  shortcut?: string[];
  /** Extra words that should find this item. */
  keywords?: string[];
}

export interface MorphSearchProps
  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onSelect" | "children"> {
  items: MorphSearchItem[];
  /** Shown before anything is typed. Defaults to `items`. */
  suggestions?: MorphSearchItem[];
  onSelect?: (item: MorphSearchItem) => void;
  onQueryChange?: (query: string) => void;
  /** `inline` grows in place; `palette` travels to the middle of the screen. */
  variant?: "inline" | "palette";
  placeholder?: string;
  /** Width of the open field, in px. */
  width?: number;
  /** Inline only: which edge of the trigger the field grows from. Defaults to the side with more room. */
  align?: "start" | "end";
  /** `"k"` for ⌘K / Ctrl+K, `"/"` for a bare slash. */
  hotkey?: string;
  /** Scores an item against the query; 0 hides it, higher ranks first. */
  filter?: (item: MorphSearchItem, query: string) => number;
  emptyMessage?: (query: string) => React.ReactNode;
  /** Keyboard hints under the results. Defaults to on for the palette. */
  footer?: boolean;
  /** Classes for the open surface's background. */
  surfaceClassName?: string;
  /** Custom trigger content. Mark its magnifier with `MorphSearchIcon` so it slides into the field. */
  children?: React.ReactNode;
}

type Rect = { x: number; y: number; width: number; height: number; radius: number };
type Geometry = {
  from: Rect; // the trigger
  to: Rect; // the open field
  // The magnifier's center, relative to the shape's top-left, at each end.
  glyphFrom: { x: number; y: number; scale: number };
  glyphTo: { x: number; y: number };
  glyphFades: boolean; // no magnifier in the trigger: fade it in instead
  detached: boolean; // trigger off screen: fade in place instead of morphing
};

const NO_RECT: Rect = { x: 0, y: 0, width: 0, height: 0, radius: 0 };
const NO_GEOMETRY: Geometry = {
  from: NO_RECT,
  to: NO_RECT,
  glyphFrom: { x: 0, y: 0, scale: 1 },
  glyphTo: { x: 0, y: 0 },
  glyphFades: true,
  detached: true,
};

export function MorphSearch({
  items,
  suggestions,
  onSelect,
  onQueryChange,
  variant = "inline",
  placeholder = "Search…",
  width,
  align,
  hotkey,
  filter = defaultFilter,
  emptyMessage = defaultEmptyMessage,
  footer = variant === "palette",
  surfaceClassName,
  className,
  children,
  onClick,
  ...props
}: MorphSearchProps) {
  const size = SIZES[variant];
  const id = React.useId();
  const listId = `${id}-list`;
  const optionId = (index: number) => `${id}-option-${index}`;

  const triggerRef = React.useRef<HTMLButtonElement>(null);
  const layerRef = React.useRef<HTMLElement | null>(null);
  const surfaceRef = React.useRef<HTMLDivElement>(null);
  const inputRef = React.useRef<HTMLInputElement>(null);
  const panelRef = React.useRef<HTMLDivElement>(null);
  const listRef = React.useRef<HTMLDivElement>(null);
  const highlightRef = React.useRef<HTMLDivElement>(null);
  const setLayer = React.useCallback((element: HTMLElement | null) => {
    layerRef.current = element;
  }, []);

  const [mounted, setMounted] = React.useState(false);
  const [query, setQuery] = React.useState("");
  const [active, setActive] = React.useState(0);
  const [maxList, setMaxList] = React.useState<number>(size.maxList);
  // True for the first frames of each opening, so rows ripple in once.
  const [revealing, setRevealing] = React.useState(true);
  const [reduceMotion, setReduceMotion] = React.useState(false);

  const live = React.useRef({
    phase: "closed" as "closed" | "open" | "closing",
    generation: 0,
    panelTarget: 0,
    reduceMotion: false,
    query: "",
    returnFocus: null as HTMLElement | null,
  });

  // 0 = the trigger, 1 = the open field. Everything about the shape follows it.
  const progress = useMotionValue(0);
  const panel = useMotionValue(0); // height of the results under the field
  const veil = useMotionValue(1); // fades the whole thing when it can't morph
  const geometry = useMotionValue<Geometry>(NO_GEOMETRY);
  const highlightY = useMotionValue(0);
  const highlightHeight = useMotionValue(0);

  const at = (key: "x" | "y" | "width" | "height" | "radius") =>
    lerp(geometry.get().from[key], geometry.get().to[key], progress.get());
  const x = useTransform(() => at("x"));
  const y = useTransform(() => at("y"));
  const shapeWidth = useTransform(() => at("width"));
  const fieldHeight = useTransform(() => at("height"));
  const shapeHeight = useTransform(() => fieldHeight.get() + panel.get());
  const radius = useTransform(() => {
    const extra = (geometry.get().to.radius - size.panelRadius) * clamp(panel.get() / 48, 0, 1);
    return Math.max(at("radius") - extra, 0);
  });
  // The trigger's look hands over to the surface's over the first third.
  const look = useTransform(() => clamp(progress.get() / 0.35, 0, 1) * veil.get());
  const skin = useTransform(() =>
    geometry.get().detached ? 0 : (1 - clamp(progress.get() / 0.35, 0, 1)) * veil.get(),
  );
  const content = useTransform(() => clamp((progress.get() - 0.3) / 0.45, 0, 1) * veil.get());
  const glyphX = useTransform(() => {
    const g = geometry.get();
    return lerp(g.glyphFrom.x, g.glyphTo.x, progress.get()) - size.glyph / 2;
  });
  const glyphY = useTransform(() => {
    const g = geometry.get();
    return lerp(g.glyphFrom.y, g.glyphTo.y, progress.get()) - size.glyph / 2;
  });
  const glyphScale = useTransform(() => lerp(geometry.get().glyphFrom.scale, 1, progress.get()));
  const glyphOpacity = useTransform(() => (geometry.get().glyphFades ? content.get() : veil.get()));
  const backdrop = useTransform(() => clamp(progress.get(), 0, 1) * veil.get());
  const divider = useTransform(() => clamp(panel.get() / 12, 0, 1));

  // ── Results ─────────────────────────────────────────────

  const trimmed = query.trim();
  const groups = React.useMemo(() => {
    const ranked = trimmed
      ? items
          .map((item, index) => ({ item, index, score: filter(item, trimmed) }))
          .filter((entry) => entry.score > 0)
          .sort((a, b) => b.score - a.score || a.index - b.index)
          .map((entry) => entry.item)
      : (suggestions ?? items);
    return groupItems(ranked);
  }, [trimmed, items, suggestions, filter]);
  const ordered = React.useMemo(() => groups.flatMap((group) => group.items), [groups]);
  const activeIndex = Math.min(active, Math.max(ordered.length - 1, 0));
  const showPanel = ordered.length > 0 || trimmed !== "";

  // ── Open and close ──────────────────────────────────────

  const open = () => {
    const state = live.current;
    if (state.phase === "open") return;
    if (state.phase === "closing") {
      // Caught on its way back: grow out again from wherever it is.
      state.phase = "open";
      state.generation++;
      animate(progress, 1, state.reduceMotion ? { duration: 0 } : MORPH.resize);
      animate(panel, state.panelTarget, state.reduceMotion ? { duration: 0 } : MORPH.resize);
      animate(veil, 1, MORPH.fade);
      inputRef.current?.focus({ preventScroll: true });
      return;
    }

    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    const g = measure(triggerRef.current, variant, width, align);
    state.phase = "open";
    state.reduceMotion = reduce;
    state.returnFocus = document.activeElement instanceof HTMLElement ? document.activeElement : null;
    geometry.set(g);
    progress.jump(reduce ? 1 : 0);
    panel.jump(0);
    veil.jump(reduce || g.detached ? 0 : 1);
    setMaxList(listLimit(g.to, variant, footer));
    setReduceMotion(reduce);
    setMounted(true);

    if (!reduce) animate(progress, 1, variant === "palette" ? MORPH.travel : MORPH.open);
    if (reduce || g.detached) animate(veil, 1, MORPH.fade);
  };

  const close = () => {
    const state = live.current;
    if (state.phase !== "open") return;
    state.phase = "closing";
    const generation = ++state.generation;
    const fadeOnly = state.reduceMotion || geometry.get().detached;
    if (!fadeOnly) animate(panel, 0, MORPH.fold);
    const done = fadeOnly ? animate(veil, 0, MORPH.fade) : animate(progress, 0, MORPH.close);
    done.then(() => {
      if (live.current.generation === generation) finish();
    });
  };

  // Landed back on the trigger: show it, put the layer away and return focus,
  // all in one task so no frame shows both or neither.
  const finish = () => {
    const state = live.current;
    if (state.phase === "closed") return;
    state.phase = "closed";
    const trigger = triggerRef.current;
    if (trigger) trigger.style.opacity = "";
    const layer = layerRef.current;
    const hadFocus = !!layer?.contains(document.activeElement);
    if (layer instanceof HTMLDialogElement) layer.close();
    else if (layer?.matches(":popover-open")) layer.hidePopover();
    if (hadFocus || document.activeElement === document.body) {
      const target = state.returnFocus?.isConnected ? state.returnFocus : trigger;
      target?.focus({ preventScroll: true });
    }
    if (state.query) onQueryChange?.("");
    state.query = "";
    setMounted(false);
    setQuery("");
    setActive(0);
    setRevealing(true);
  };

  const toggle = () => (live.current.phase === "open" ? close() : open());

  const select = (item: MorphSearchItem) => {
    if (live.current.phase !== "open") return;
    onSelect?.(item);
    close();
  };

  const changeQuery = (value: string) => {
    live.current.query = value;
    setQuery(value);
    setActive(0);
    onQueryChange?.(value);
  };

  // Global listeners call the latest versions of these.
  const actions = React.useRef({ open, close, toggle });
  React.useLayoutEffect(() => {
    actions.current = { open, close, toggle };
  });

  // Mounted: lift the layer into the top layer, hide the trigger behind the
  // shape, focus the input and unfold the results.
  React.useLayoutEffect(() => {
    const layer = layerRef.current;
    if (!mounted || !layer) return;
    const state = live.current;
    if (layer instanceof HTMLDialogElement) {
      if (!layer.open) layer.showModal();
    } else if (!layer.matches(":popover-open")) {
      layer.popover = "manual";
      layer.showPopover();
    }
    const trigger = triggerRef.current;
    if (trigger && !state.reduceMotion && !geometry.get().detached) trigger.style.opacity = "0";
    inputRef.current?.focus({ preventScroll: true });

    const height = panelRef.current?.offsetHeight ?? 0;
    state.panelTarget = height;
    animate(panel, height, state.reduceMotion ? { duration: 0 } : MORPH.unfold);
    const timer = window.setTimeout(() => setRevealing(false), 500);
    return () => window.clearTimeout(timer);
  }, [mounted, panel, geometry]);

  // The panel follows its content: more results, a taller panel.
  React.useLayoutEffect(() => {
    const element = panelRef.current;
    if (!mounted || !element) return;
    const observer = new ResizeObserver(() => {
      const state = live.current;
      const height = element.offsetHeight;
      if (state.phase !== "open" || Math.abs(height - state.panelTarget) < 0.5) return;
      state.panelTarget = height;
      animate(panel, height, state.reduceMotion ? { duration: 0 } : MORPH.resize);
    });
    observer.observe(element);
    return () => observer.disconnect();
  }, [mounted, panel]);

  // The highlight is drawn straight from its motion values rather than bound
  // to a motion element, which would reset them when remounted (as StrictMode
  // does in development).
  const hasResults = ordered.length > 0;
  React.useLayoutEffect(() => {
    const element = highlightRef.current;
    if (!mounted || !hasResults || !element) return;
    const draw = () => {
      element.style.transform = `translateY(${highlightY.get()}px)`;
      element.style.height = `${highlightHeight.get()}px`;
    };
    draw();
    const offY = highlightY.on("change", draw);
    const offHeight = highlightHeight.on("change", draw);
    return () => {
      offY();
      offHeight();
    };
  }, [mounted, hasResults, highlightY, highlightHeight]);

  // Slide the highlight to the active row and keep that row in view.
  React.useLayoutEffect(() => {
    if (!mounted || !ordered.length) return;
    const row = document.getElementById(`${id}-option-${activeIndex}`);
    const list = listRef.current;
    if (!row || !list) return;
    const top = row.offsetTop;
    const height = row.offsetHeight;
    if (highlightHeight.get() === 0 || live.current.reduceMotion) {
      highlightY.jump(top);
      highlightHeight.jump(height);
    } else {
      animate(highlightY, top, MORPH.highlight);
      animate(highlightHeight, height, MORPH.highlight);
    }
    if (top < list.scrollTop) list.scrollTop = top - 6;
    else if (top + height > list.scrollTop + list.clientHeight) {
      list.scrollTop = top + height - list.clientHeight + 6;
    }
  }, [mounted, ordered, activeIndex, id, highlightY, highlightHeight]);

  React.useEffect(() => {
    if (!mounted) highlightHeight.jump(0);
  }, [mounted, highlightHeight]);

  // Keep the shape on its trigger if the page scrolls or resizes.
  React.useEffect(() => {
    if (!mounted) return;
    let frame = 0;
    const update = (event: Event) => {
      if (event.target instanceof Node && layerRef.current?.contains(event.target)) return;
      cancelAnimationFrame(frame);
      frame = requestAnimationFrame(() => {
        const next = measure(triggerRef.current, variant, width, align);
        // A trigger that scrolled away stays where it was last seen.
        if (!next.detached) geometry.set(next);
      });
    };
    window.addEventListener("resize", update);
    window.addEventListener("scroll", update, true);
    return () => {
      cancelAnimationFrame(frame);
      window.removeEventListener("resize", update);
      window.removeEventListener("scroll", update, true);
    };
  }, [mounted, variant, width, align, geometry]);

  // Inline: a click anywhere else closes it. The palette has its backdrop.
  React.useEffect(() => {
    if (!mounted || variant !== "inline") return;
    const onPointerDown = (event: PointerEvent) => {
      const target = event.target as Node;
      if (surfaceRef.current?.contains(target) || triggerRef.current?.contains(target)) return;
      actions.current.close();
    };
    document.addEventListener("pointerdown", onPointerDown, true);
    return () => document.removeEventListener("pointerdown", onPointerDown, true);
  }, [mounted, variant]);

  // Palette: the wheel scrolls results, never the page behind.
  React.useEffect(() => {
    const layer = layerRef.current;
    if (!mounted || variant !== "palette" || !layer) return;
    const onWheel = (event: WheelEvent) => {
      if (!listRef.current?.contains(event.target as Node)) event.preventDefault();
    };
    layer.addEventListener("wheel", onWheel, { passive: false });
    return () => layer.removeEventListener("wheel", onWheel);
  }, [mounted, variant]);

  React.useEffect(() => {
    if (!hotkey) return;
    const onKeyDown = (event: KeyboardEvent) => {
      if (event.defaultPrevented || event.repeat || event.isComposing) return;
      const key = event.key.toLowerCase();
      if (hotkey === "/") {
        const target = event.target instanceof Element ? event.target : null;
        const typing = target?.closest("input, textarea, select, [contenteditable]");
        if (key !== "/" || typing || event.metaKey || event.ctrlKey || event.altKey) return;
        event.preventDefault();
        actions.current.open();
        return;
      }
      if (key !== hotkey.toLowerCase() || !(event.metaKey || event.ctrlKey)) return;
      if (event.altKey || event.shiftKey) return;
      event.preventDefault();
      actions.current.toggle();
    };
    window.addEventListener("keydown", onKeyDown);
    return () => window.removeEventListener("keydown", onKeyDown);
  }, [hotkey]);

  const onKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
    if (event.key === "Escape") {
      // First Esc clears what was typed; the next one closes.
      event.preventDefault();
      if (query) {
        changeQuery("");
        inputRef.current?.focus();
      } else close();
      return;
    }
    if (event.target !== inputRef.current || event.nativeEvent.isComposing) return;
    const down = event.key === "ArrowDown" || (event.ctrlKey && event.key === "n");
    const up = event.key === "ArrowUp" || (event.ctrlKey && event.key === "p");
    if (down || up) {
      event.preventDefault();
      if (ordered.length) setActive((activeIndex + (down ? 1 : -1) + ordered.length) % ordered.length);
    } else if (event.key === "Enter") {
      event.preventDefault();
      const item = ordered[activeIndex];
      if (item) select(item);
    }
  };

  // ── Render ──────────────────────────────────────────────

  const iconOnly = children === undefined;
  const triggerClassName = cn(
    "relative shrink-0 cursor-pointer bg-background text-foreground/80 ring-1 ring-foreground/10 outline-none select-none [-webkit-tap-highlight-color:transparent]",
    "transition-[background-color,scale] duration-150 ease-out hover:bg-foreground/[0.03] active:scale-[0.97] motion-reduce:active:scale-100",
    "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-foreground",
    iconOnly
      ? "grid size-9 place-items-center rounded-full"
      : "inline-flex h-9 items-center gap-2 rounded-full px-3 text-sm text-muted-foreground",
    className,
  );
  const triggerContent = iconOnly ? <MorphSearchIcon /> : children;

  const shape = (
    <>
      {variant === "palette" ? (
        <motion.div
          aria-hidden
          className="absolute inset-0 bg-black/25 backdrop-blur-[2px] dark:bg-black/55"
          style={{ opacity: backdrop }}
          onPointerDown={() => close()}
        />
      ) : null}

      {/* Ring and shadow sit behind the shape so they can fade in on their own. */}
      <motion.div
        aria-hidden
        className="pointer-events-none absolute top-0 left-0 shadow-[0_18px_50px_-12px_rgb(0_0_0/0.22),0_4px_14px_-6px_rgb(0_0_0/0.1)] ring-1 ring-foreground/10 dark:shadow-[0_18px_50px_-12px_rgb(0_0_0/0.7)]"
        style={{ x, y, width: shapeWidth, height: shapeHeight, borderRadius: radius, opacity: look }}
      />

      <motion.div
        ref={surfaceRef}
        className="pointer-events-auto absolute top-0 left-0 overflow-hidden"
        style={{ x, y, width: shapeWidth, height: shapeHeight, borderRadius: radius }}
        // Caught on its way back to the trigger: open it again.
        onPointerDown={() => {
          if (live.current.phase === "closing") open();
        }}
        // Clicks anywhere but the input and buttons keep the caret in the input.
        onMouseDown={(event) => {
          const target = event.target as Element;
          if (target !== inputRef.current && !target.closest("button")) event.preventDefault();
        }}
        onKeyDown={onKeyDown}
        onBlur={(event) => {
          // Inline: tabbing out closes it.
          const next = event.relatedTarget;
          if (variant === "inline" && next && !surfaceRef.current?.contains(next)) close();
        }}
      >
        <motion.div
          aria-hidden
          className={cn("absolute inset-0 bg-background", surfaceClassName)}
          style={{ opacity: look }}
        />
        {/* A copy of the trigger that stretches with the shape as it fades. */}
        <motion.div
          aria-hidden
          className={cn(triggerClassName, "pointer-events-none absolute top-0 left-0 [&_[data-morph-search-icon]]:invisible")}
          style={{ width: "100%", height: fieldHeight, opacity: skin }}
        >
          {triggerContent}
        </motion.div>

        <motion.div className="absolute inset-x-0 top-0" style={{ height: fieldHeight }}>
          <motion.span
            aria-hidden
            className="absolute top-0 left-0 text-muted-foreground"
            style={{ x: glyphX, y: glyphY, scale: glyphScale, opacity: glyphOpacity, width: size.glyph, height: size.glyph }}
          >
            <SearchGlyph className="size-full" />
          </motion.span>
          <motion.div className="flex h-full items-center" style={{ opacity: content }}>
            <input
              ref={inputRef}
              role="combobox"
              aria-label={placeholder}
              aria-expanded={showPanel}
              aria-controls={listId}
              aria-autocomplete="list"
              aria-activedescendant={ordered.length ? optionId(activeIndex) : undefined}
              value={query}
              onChange={(event) => changeQuery(event.target.value)}
              placeholder={placeholder}
              autoComplete="off"
              autoCorrect="off"
              autoCapitalize="off"
              spellCheck={false}
              enterKeyHint="go"
              className={cn(
                "h-full min-w-0 flex-1 bg-transparent text-base text-foreground outline-none placeholder:text-muted-foreground",
                variant === "inline" ? "pl-10 sm:text-sm" : "pl-12 sm:text-[15px]",
              )}
            />
            {query ? (
              <button
                type="button"
                aria-label="Clear search"
                className="mr-2.5 grid size-7 shrink-0 place-items-center rounded-full text-muted-foreground transition-colors hover:bg-foreground/[0.06] hover:text-foreground focus-visible:outline-2 focus-visible:outline-foreground"
                onClick={() => {
                  changeQuery("");
                  inputRef.current?.focus();
                }}
              >
                <svg aria-hidden viewBox="0 0 24 24" className="size-3.5" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round">
                  <path d="M6 6l12 12M18 6L6 18" />
                </svg>
              </button>
            ) : (
              <Kbd className={cn("shrink-0 pointer-coarse:hidden", variant === "inline" ? "mr-3" : "mr-4")}>esc</Kbd>
            )}
          </motion.div>
        </motion.div>

        <motion.div className="absolute inset-x-0" style={{ top: fieldHeight }}>
          <div ref={panelRef}>
            {showPanel ? (
              <>
                <motion.div className="h-px bg-foreground/[0.07]" style={{ opacity: divider }} />
                <div
                  ref={listRef}
                  id={listId}
                  role="listbox"
                  aria-label="Results"
                  className="relative overflow-y-auto overscroll-contain p-1.5 [scrollbar-width:thin]"
                  style={{ maxHeight: maxList }}
                >
                  {hasResults ? (
                    <motion.div
                      aria-hidden
                      initial={revealing && !reduceMotion ? { opacity: 0 } : false}
                      animate={{ opacity: 1 }}
                      transition={{ duration: 0.2, delay: 0.1 }}
                      className="pointer-events-none absolute inset-0"
                    >
                      <div
                        ref={highlightRef}
                        className="absolute inset-x-1.5 top-0 h-0 rounded-[10px] bg-foreground/[0.06]"
                      />
                    </motion.div>
                  ) : (
                    <div className="px-3 py-8 text-center text-sm text-muted-foreground">
                      {emptyMessage(trimmed)}
                    </div>
                  )}
                  {groups.map((group) => (
                    <div key={group.name ?? "_"} role="group" aria-label={group.name}>
                      {group.name ? (
                        <div aria-hidden className="px-2.5 pt-2 pb-1 text-[11px] font-medium text-muted-foreground">
                          {group.name}
                        </div>
                      ) : null}
                      {group.items.map((item, offset) => {
                        const index = group.start + offset;
                        const isActive = index === activeIndex;
                        return (
                          <motion.div
                            key={item.id}
                            id={optionId(index)}
                            role="option"
                            aria-selected={isActive}
                            initial={
                              reduceMotion
                                ? false
                                : revealing
                                  ? { opacity: 0, y: 6 }
                                  : { opacity: 0 }
                            }
                            animate={{ opacity: 1, y: 0 }}
                            transition={
                              revealing
                                ? { duration: 0.3, ease: [0.22, 1, 0.36, 1], delay: 0.1 + Math.min(index, 10) * MORPH.stagger }
                                : { duration: 0.12 }
                            }
                            className={cn(
                              "relative flex cursor-default items-center gap-3 rounded-[10px] px-2.5 select-none",
                              variant === "inline" ? "h-10" : "h-11",
                            )}
                            onPointerMove={() => {
                              if (!isActive) setActive(index);
                            }}
                            onClick={() => select(item)}
                          >
                            {item.icon ? (
                              <span className="grid size-7 shrink-0 place-items-center rounded-lg bg-foreground/[0.05] text-foreground/70 ring-1 ring-foreground/[0.06] ring-inset [&_svg]:size-4">
                                {item.icon}
                              </span>
                            ) : null}
                            <span className="flex min-w-0 flex-1 items-baseline gap-2">
                              <span className="truncate text-sm text-foreground">
                                <Match text={item.label} query={trimmed} />
                              </span>
                              {item.description ? (
                                <span className="truncate text-xs text-muted-foreground">{item.description}</span>
                              ) : null}
                            </span>
                            {item.shortcut ? (
                              <span className="flex shrink-0 gap-1">
                                {item.shortcut.map((key) => (
                                  <Kbd key={key}>{key}</Kbd>
                                ))}
                              </span>
                            ) : (
                              <Kbd
                                aria-hidden
                                className={cn(
                                  "shrink-0 transition-opacity duration-150 pointer-coarse:hidden",
                                  isActive ? "opacity-100" : "opacity-0",
                                )}
                              >
                                ↵
                              </Kbd>
                            )}
                          </motion.div>
                        );
                      })}
                    </div>
                  ))}
                </div>
                {footer ? (
                  <div
                    className="flex items-center justify-between border-t border-foreground/[0.07] px-3.5 text-[11px] text-muted-foreground pointer-coarse:hidden"
                    style={{ height: FOOTER_HEIGHT }}
                  >
                    <span className="flex items-center gap-3">
                      <span className="flex items-center gap-1.5">
                        <Kbd>↑</Kbd>
                        <Kbd>↓</Kbd>
                        to navigate
                      </span>
                      <span className="flex items-center gap-1.5">
                        <Kbd>↵</Kbd>
                        to select
                      </span>
                    </span>
                    <span className="flex items-center gap-1.5">
                      <Kbd>esc</Kbd>
                      to close
                    </span>
                  </div>
                ) : null}
              </>
            ) : null}
          </div>
        </motion.div>

        <p className="sr-only" aria-live="polite">
          {trimmed ? `${ordered.length} ${ordered.length === 1 ? "result" : "results"}` : ""}
        </p>
      </motion.div>
    </>
  );

  return (
    <>
      <button
        ref={triggerRef}
        type="button"
        aria-label={iconOnly ? "Search" : undefined}
        aria-haspopup={variant === "palette" ? "dialog" : "listbox"}
        aria-expanded={mounted}
        className={triggerClassName}
        {...props}
        onClick={(event) => {
          onClick?.(event);
          if (!event.defaultPrevented) toggle();
        }}
      >
        {triggerContent}
      </button>

      {mounted ? (
        variant === "palette" ? (
          <dialog
            ref={setLayer}
            aria-label={placeholder}
            onCancel={(event) => {
              event.preventDefault();
              close();
            }}
            onClose={finish}
            className="fixed inset-0 m-0 size-full max-h-none max-w-none overflow-hidden border-0 bg-transparent p-0 text-foreground outline-none backdrop:bg-transparent"
          >
            {shape}
          </dialog>
        ) : (
          <div
            ref={setLayer}
            className="pointer-events-none fixed inset-0 m-0 size-full max-h-none max-w-none overflow-visible border-0 bg-transparent p-0 text-foreground"
          >
            {shape}
          </div>
        )
      ) : null}
    </>
  );
}

/** The magnifier. Put it in a custom trigger and it slides into the open field. */
export function MorphSearchIcon({ className, ...props }: React.SVGProps<SVGSVGElement>) {
  return <SearchGlyph data-morph-search-icon="" className={cn("size-4 shrink-0", className)} {...props} />;
}

function SearchGlyph(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      aria-hidden
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth={2}
      strokeLinecap="round"
      strokeLinejoin="round"
      {...props}
    >
      <circle cx="11" cy="11" r="7" />
      <path d="m20 20-3.5-3.5" />
    </svg>
  );
}

function Kbd({ className, ...props }: React.HTMLAttributes<HTMLElement>) {
  return (
    <kbd
      className={cn(
        "inline-grid h-5 min-w-5 place-items-center rounded-[5px] bg-foreground/[0.06] px-1 font-mono text-[10.5px] leading-none text-muted-foreground ring-1 ring-foreground/[0.06] ring-inset",
        className,
      )}
      {...props}
    />
  );
}

/** The label with the matched text in full strength and the rest dimmed. */
function Match({ text, query }: { text: string; query: string }) {
  if (!query) return text;
  const lower = text.toLowerCase();
  const needle = [query, ...query.split(/\s+/)].find((part) => part && lower.includes(part.toLowerCase()));
  if (!needle) return text;
  const start = lower.indexOf(needle.toLowerCase());
  const end = start + needle.length;
  return (
    <>
      <span className="text-foreground/55">{text.slice(0, start)}</span>
      {text.slice(start, end)}
      <span className="text-foreground/55">{text.slice(end)}</span>
    </>
  );
}

function defaultEmptyMessage(query: string) {
  return (
    <>
      No results for <span className="text-foreground">“{query}”</span>
    </>
  );
}

/**
 * Every word must appear somewhere in the item. Labels that start with the
 * query rank first, then labels with a word that does, then everything else.
 */
function defaultFilter(item: MorphSearchItem, query: string) {
  const needle = query.toLowerCase();
  const label = item.label.toLowerCase();
  const haystack = [item.label, item.description, item.group, ...(item.keywords ?? [])]
    .filter(Boolean)
    .join(" ")
    .toLowerCase();
  const words = needle.split(/\s+/).filter(Boolean);
  if (!words.every((word) => haystack.includes(word))) return 0;
  if (label.startsWith(needle)) return 4;
  if (label.split(/\s+/).some((word) => word.startsWith(words[0]))) return 3;
  if (label.includes(needle)) return 2;
  return 1;
}

/** Groups in order of each group's first (best) item, each with the index of its first row. */
function groupItems(items: MorphSearchItem[]) {
  const groups: { name?: string; items: MorphSearchItem[]; start: number }[] = [];
  for (const item of items) {
    const group = groups.find((entry) => entry.name === item.group);
    if (group) group.items.push(item);
    else groups.push({ name: item.group, items: [item], start: 0 });
  }
  let start = 0;
  for (const group of groups) {
    group.start = start;
    start += group.items.length;
  }
  return groups;
}

// ── Geometry ──────────────────────────────────────────────

function measure(
  trigger: HTMLElement | null,
  variant: "inline" | "palette",
  width: number | undefined,
  align: "start" | "end" | undefined,
): Geometry {
  const size = SIZES[variant];
  const margin = MORPH.margin;
  const viewportWidth = document.documentElement.clientWidth;
  const viewportHeight = document.documentElement.clientHeight;
  const fieldWidth = Math.min(width ?? size.width, viewportWidth - margin * 2);
  const rect = trigger?.getBoundingClientRect();
  const visible =
    !!rect &&
    rect.width > 0 &&
    rect.height > 0 &&
    rect.bottom > 0 &&
    rect.right > 0 &&
    rect.top < viewportHeight &&
    rect.left < viewportWidth;

  let to: Rect;
  if (variant === "palette" || !rect) {
    to = {
      x: (viewportWidth - fieldWidth) / 2,
      y: clamp(viewportHeight * 0.14, margin, 120),
      width: fieldWidth,
      height: size.height,
      radius: size.radius,
    };
  } else {
    const side = align ?? (rect.left + rect.width / 2 > viewportWidth / 2 ? "end" : "start");
    const left = side === "end" ? rect.right - fieldWidth : rect.left;
    to = {
      x: clamp(left, margin, viewportWidth - margin - fieldWidth),
      y: Math.max(rect.top + rect.height / 2 - size.height / 2, margin),
      width: fieldWidth,
      height: size.height,
      radius: size.radius,
    };
  }

  const from: Rect =
    visible && trigger
      ? {
          x: rect.left,
          y: rect.top,
          width: rect.width,
          height: rect.height,
          radius: Math.min(
            parseFloat(getComputedStyle(trigger).borderTopLeftRadius) || 0,
            rect.width / 2,
            rect.height / 2,
          ),
        }
      : { ...to, x: to.x + to.width * 0.02, width: to.width * 0.96 };

  const glyphTo = { x: size.pad + size.glyph / 2, y: size.height / 2 };
  const icon = visible ? trigger?.querySelector("[data-morph-search-icon]") : null;
  const iconRect = icon?.getBoundingClientRect();
  const glyphFrom = iconRect
    ? {
        x: iconRect.left + iconRect.width / 2 - from.x,
        y: iconRect.top + iconRect.height / 2 - from.y,
        scale: iconRect.width / size.glyph,
      }
    : { ...glyphTo, scale: 1 };

  return { from, to, glyphFrom, glyphTo, glyphFades: !iconRect, detached: !visible };
}

/** How tall the list may grow before it scrolls. */
function listLimit(field: Rect, variant: "inline" | "palette", footer: boolean) {
  const viewportHeight = document.documentElement.clientHeight;
  const room = viewportHeight - (field.y + field.height) - MORPH.margin - (footer ? FOOTER_HEIGHT : 0);
  return Math.max(Math.min(SIZES[variant].maxList, room), 120);
}

function lerp(from: number, to: number, t: number) {
  return from + (to - from) * t;
}

function clamp(value: number, min: number, max: number) {
  return Math.min(Math.max(value, min), max);
}