Morphing Command Nav

"use client";

import { useEffect, useId, useMemo, useRef, useState, useSyncExternalStore } from "react";
import type { CSSProperties, KeyboardEvent as ReactKeyboardEvent } from "react";

/**
 * MorphingCommandNav — a nav pill that grows into a command palette.
 *
 * The same surface animates from a floating pill (brand, links, a search
 * button with a Cmd K keycap, sign in, a call to action) into a palette:
 * the links fade out, a search field fades in, and results are grouped
 * with a light that slides between them. Cmd/Ctrl + K, the search button,
 * Escape, a pick or a click outside open and close it; focus goes to the
 * field and back to the trigger. hotkey="focus" limits the shortcut to
 * when focus is inside, so a host page's own palette never opens too.
 *
 * Once measured, the shell floats over the page, so opening it never
 * pushes content down.

  // ---------------------------------------------------------------
  // Full source available with a viberdy Pro subscription.
  // https://viberdy.dev/pricing
  // ---------------------------------------------------------------
}