@justanarthur/modo-ui 0.6.0-canary.8 → 0.6.0

package/components/overlays/dropdown/index.tsx

@@ -1,1241 +0,0 @@
-// biome-ignore-all lint: vendored upstream code keeps its own patterns (see the header)
-/*
- * Ported from Fluid Functionalism — github.com/mickadesign/fluid-functionalism
- * `registry/base/dropdown.tsx` @ b3587bdbd83fc66c2a6aae3817ffb856cb09260b
- * MIT License © 2026 Micka Touillaud — fluidfunctionalism.com (notice: LICENSE.fluid-functionalism)
- * Local modifications:
- * - `"use client"` dropped; `framer-motion` → `motion/react`; `@/lib/*` and
- *   `@/hooks/*` → `../../../lib/*` (`SizeProvider` → `../../../primitives/sizes`);
- *   `@/lib/elevated` → `../../../primitives/surface`; `@/components/ui/scroll-area`
- *   → `../../../primitives/scroll-area`; `@/components/ui/fluid-hover-highlight` →
- *   `../../../lib/fluid-hover-highlight`; `@/components/ui/menu-item` and
- *   `@/components/ui/dropdown-search` → `./menu-item`, `./dropdown-search`
- *   (both vendored into this folder).
- * - Uncontrolled selection (Base UI's contract) on `Dropdown` and
- *   `Dropdown.Content`: `defaultCheckedIndex` / `defaultCheckedIndices` plus
- *   `onCheckedIndexChange` / `onCheckedIndicesChange`, through
- *   `useControllableState`. With a `default*` the panel owns the selection,
- *   so rows need no `checked` or `onSelect` of their own. `checkedIndex` /
- *   `checkedIndices` keep working exactly as upstream.
- * - Uncontrolled search: `Dropdown.Search` with `filter` hands the query to
- *   the panel, which drops the `Dropdown.Item` rows whose `label` doesn't
- *   match, re-indexes the survivors for fluid hover, and shows
- *   `Dropdown.Empty` only when nothing matched — the work the controlled
- *   form asks the consumer to do. Selection stays keyed on the authored
- *   index (`sourceIndex` on the row), so it survives re-indexing.
- * - `DropdownProps` members re-declared one per line with the FF docs
- *   API-table descriptions (modo's props table lists only members declared in
- *   the interface body).
- * - `items[next].focus()` guarded for `noUncheckedIndexedAccess`.
- * - Compound statics `Dropdown.Menu/.Trigger/.Content/.Item/.Label/
- *   .Separator/.Search/.Empty` attached with `Object.assign`, typed through a
- *   `DropdownComponent` cast on the forwardRef. Upstream's named exports are
- *   kept.
- * - modo item: TSDoc + examples from the FF "Dropdown" docs page (its
- *   "Create from the query" section is skipped — adding a row to the list is
- *   real consumer state, not something an uncontrolled panel can stand in
- *   for), and a default export.
- * - Styling reads DS tokens (AGENTS.md styling): `text-[Npx]` →
- *   `text-<role>[-compact]`; the hex focus-ring fallback →
- *   `ring-focus-ring` / `border-focus-ring`; `duration-80|120|160` and
- *   tier-length JS durations → `duration-<tier>` / `spring.*`.
- * - The popup menu morphs out of its trigger through the shared morph layer
- *   (`lib/use-morph.ts` + `MorphSurface`, goo by default on
- *   `spring.goo`; `Dropdown.Content` takes `from` / `effect` /
- *   `hideSource` / `tier`), the origin captured from `Menu.Root`'s
- *   `onOpenChange`. The `scaleY` motion wrapper and the `actionsRef` deferred
- *   unmount are gone: Menu ignores `actionsRef`, and the wrapper animated
- *   outside `Menu.Popup`, so Base UI unmounted the menu before its exit
- *   played. The popup paints its level through the morph's surface layers
- *   instead of `render={<Elevated/>}`, re-providing it with `SurfaceProvider`.
- * - `renderMenuItem` passes the row's activation to the Menu item primitive's
- *   `onClick` (see menu-item.tsx), so Enter and Space pick a row instead of
- *   only closing the menu.
- * - `effect="morph"` with `hideSource` opens the menu in place over its
- *   trigger: the positioner's `sideOffset` becomes the engine's `inPlaceOffset`.
- * - shadcn DropdownMenu parity (local parts in `menu-parts.tsx`, numbering in
- *   `row-order.tsx`): children-based rows with an optional `index` (both
- *   panels provide `RowOrderContext`), `Dropdown.Group`, `Dropdown.Shortcut`,
- *   value-keyed `Dropdown.CheckboxItem` and `Dropdown.RadioGroup` /
- *   `Dropdown.RadioItem` (their checked rows join the merged selection
- *   background), and submenus (`Dropdown.Sub` / `.SubTrigger` /
- *   `.SubContent`). `Dropdown.Label` takes `inset` and names a surrounding
- *   group (`Menu.GroupLabel`); labels and separators take a place in the row
- *   order so selection runs never melt across them.
- * - `Dropdown.Trigger` also takes Radix-style `asChild` (`lib/slot.ts`).
- * - Radix-parity options, all optional: `Dropdown.Menu` forwards Base UI's
- *   change details (`reason`, `cancel()`) to `onOpenChange` and takes `modal`;
- *   `Dropdown.Content` / `Dropdown.SubContent` take `finalFocus`,
- *   `initialFocus` (modo's own: Base UI 1.4.1's Menu.Popup has none),
- *   `collisionPadding`, `positionerClassName`, `container`, and spread HTML
- *   attributes onto the popup (the panel's own handlers run after theirs);
- *   `Dropdown.Content` also takes `alignOffset` and `collisionBoundary`;
- *   `Dropdown.Item` takes `render` / `asChild` and `textValue`, the other row
- *   parts `textValue`.
- * - `initialFocus={false}` only drops modo's own first-row focus. Base UI still
- *   focuses the first row on a keyboard open and the popup on a pointer open;
- *   that initial focus can't be suppressed.
- * - `onKeyDownCapture` on `Dropdown.Content` / `Dropdown.SubContent` runs first.
- *   `preventDefault` there is harmless: navigation and typeahead still run.
- *   `stopPropagation` there stops Base UI's key handling and the panel's own
- *   arrow navigation (both bubble-phase); the panel's capture-phase bookkeeping
- *   (the keyboard ring, typing redirected into `Dropdown.Search`) still runs.
- * - The popup panel shares `useMenuPanel` with `Dropdown.SubContent`: a
- *   keyboard focus ring gated on keyboard use (as in Select), the highlight
- *   pinned on a submenu trigger while its submenu is open, and handlers that
- *   ignore events bubbling up (through the portal) from a submenu. Its
- *   `renderMenuItem` is the shared `renderPopupItem`.
- */
-
-import type { MenuRootChangeEventDetails, MenuTriggerProps } from '@base-ui/react/menu'
-// Aliased: a bare `Menu` import makes the .d.ts bundler rename the `Menu` static too
-import { Menu as BaseMenu } from '@base-ui/react/menu'
-import { AnimatePresence, motion } from 'motion/react'
-import {
-  Children,
-  type ComponentProps,
-  cloneElement,
-  createContext,
-  type ForwardRefExoticComponent,
-  forwardRef,
-  type HTMLAttributes,
-  isValidElement,
-  type ReactElement,
-  type ReactNode,
-  type RefAttributes,
-  type RefObject,
-  useCallback,
-  useContext,
-  useEffect,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-  useState,
-} from 'react'
-import { FluidHoverHighlight } from '../../../lib/fluid-hover-highlight'
-import { FocusRing } from '../../../lib/focus-ring'
-import { MorphSurface } from '../../../lib/morph-layers'
-import { isDisabledRow, popupScrollAreaClass, popupViewportClass } from '../../../lib/popup'
-import { RowOrderContext, useRowOrder, useRowSlot } from '../../../lib/row-order'
-import { shapeMap } from '../../../lib/shape-context'
-import { type SizeVariant, useSize } from '../../../lib/size-context'
-import { slotId } from '../../../lib/slot'
-import { spring } from '../../../lib/springs'
-import { SURFACE_BG, SURFACE_SHADOW } from '../../../lib/surface-classes'
-import { SurfaceProvider, useSurface } from '../../../lib/surface-context'
-import { useControllableState } from '../../../lib/use-controllable-state'
-import { type ItemRect, useFluidHover } from '../../../lib/use-fluid-hover'
-import { SelectionBackgrounds, useMergeSplitBlocks, useSelectionRuns } from '../../../lib/use-merge-split'
-import { inPlaceOffset, type MorphOrigin, opensInPlace, useMorph, useMorphOrigin } from '../../../lib/use-morph'
-import { cn } from '../../../lib/utils'
-import { ScrollArea } from '../../../primitives/scroll-area'
-import { SizeProvider } from '../../../primitives/sizes'
-import { Elevated } from '../../../primitives/surface'
-import {
-  DropdownEmpty,
-  DropdownFilterContext,
-  type DropdownFilterContextValue,
-  DropdownSearch,
-  DropdownSearchHostContext,
-  type DropdownSearchProps,
-  useDropdownSearchHost,
-} from './dropdown-search'
-import {
-  DropdownContext,
-  type DropdownContextValue,
-  DropdownShortcut,
-  type DropdownShortcutProps,
-  INSET_PX,
-  MenuItem,
-  type MenuItemProps,
-  type MenuItemRenderOptions,
-  useDropdown,
-  useDropdownMaybe,
-} from './menu-item'
-import {
-  chain,
-  DropdownCheckboxItem,
-  type DropdownCheckboxItemProps,
-  DropdownGroup,
-  DropdownGroupContext,
-  type DropdownGroupProps,
-  DropdownRadioGroup,
-  type DropdownRadioGroupProps,
-  DropdownRadioItem,
-  type DropdownRadioItemProps,
-  DropdownSub,
-  DropdownSubContent,
-  type DropdownSubContentProps,
-  type DropdownSubProps,
-  DropdownSubTrigger,
-  type DropdownSubTriggerProps,
-  type MenuPopupProps,
-  type MenuPortalProps,
-  mergeRefs,
-  ownEvent,
-  renderPopupItem,
-  useMenuPanel,
-  useValueChecked,
-} from './menu-parts'
-
-// Dropdown opts out of the global pill/rounded shape context — popover surfaces
-// look cleaner with the smaller "rounded" radii regardless of how the rest of
-// the UI is shaped (the heavy pill bubbling distorts perceived padding at this
-// scale and produces the corner-shadow asymmetry).
-const shape = shapeMap.rounded
-
-// ---------------------------------------------------------------------------
-// Panel context — shared by the inline Dropdown and the popup DropdownContent.
-//
-// The context object itself lives in menu-item.tsx so MenuItem resolves
-// whichever dropdown provider actually wraps it, even when dropdowns built
-// on different primitives render side by side. Re-exported here so the
-// public dropdown API is unchanged.
-// ---------------------------------------------------------------------------
-
-export type { DropdownContextValue, MenuItemRenderOptions }
-export { useDropdown, useDropdownMaybe }
-
-/* "Nothing checked", so useControllableState always sees a defined value
-   while the caller drives the selection (`undefined` is what it reads as
-   "uncontrolled"). */
-const NONE = -1
-const NO_INDICES: number[] = []
-/* Stable empty rect list, so a closed popup's merge/split pass gets the same
-   array every render instead of a fresh literal. */
-const NO_RECTS: ItemRect[] = []
-
-interface PanelSelectionProps {
-  checkedIndex?: number
-  defaultCheckedIndex?: number
-  onCheckedIndexChange?: (index: number | undefined) => void
-  checkedIndices?: number[]
-  defaultCheckedIndices?: number[]
-  onCheckedIndicesChange?: (indices: number[]) => void
-}
-
-/*
- * The panel's selection, in the two index spaces it lives in: every prop and
- * callback speaks the AUTHORED index (what a row was written with), while the
- * overlays and the row context speak the RENDERED index (what a filtering
- * panel re-indexed the visible rows to). They are the same list unless a
- * `Dropdown.Search filter` is dropping rows.
- */
-function usePanelSelection(
-  {
-    checkedIndex,
-    defaultCheckedIndex,
-    onCheckedIndexChange,
-    checkedIndices,
-    defaultCheckedIndices,
-    onCheckedIndicesChange,
-  }: PanelSelectionProps,
-  sourceOf: number[],
-  filtering: boolean,
-) {
-  const [single, setSingle] = useControllableState<number>(
-    defaultCheckedIndex === undefined ? (checkedIndex ?? NONE) : undefined,
-    defaultCheckedIndex ?? NONE,
-    index => onCheckedIndexChange?.(index === NONE ? undefined : index),
-  )
-  const [many, setMany] = useControllableState<number[]>(
-    defaultCheckedIndices === undefined ? (checkedIndices ?? NO_INDICES) : undefined,
-    defaultCheckedIndices ?? NO_INDICES,
-    indices => onCheckedIndicesChange?.(indices),
-  )
-
-  const multiple = checkedIndices != null || defaultCheckedIndices != null
-  // Only a `default*` makes the panel answer for rows that brought no
-  // `checked` of their own.
-  const selfManaged = defaultCheckedIndex !== undefined || defaultCheckedIndices !== undefined
-
-  const toggleIndex = useCallback(
-    (source: number) => {
-      if (multiple) {
-        setMany(prev =>
-          prev.includes(source) ? prev.filter(i => i !== source) : [...prev, source].sort((a, b) => a - b),
-        )
-        return
-      }
-      setSingle(source)
-    },
-    [multiple, setMany, setSingle],
-  )
-
-  const renderedIndex = useMemo(() => {
-    if (single === NONE) return undefined
-    const i = filtering ? sourceOf.indexOf(single) : single
-    return i === -1 ? undefined : i
-  }, [single, filtering, sourceOf])
-
-  const renderedIndices = useMemo(() => {
-    if (!multiple) return undefined
-    if (!filtering) return many
-    return many.map(s => sourceOf.indexOf(s)).filter(i => i !== -1)
-  }, [multiple, many, filtering, sourceOf])
-
-  return {
-    checkedIndex: renderedIndex,
-    checkedIndices: renderedIndices,
-    multiple,
-    selfManaged,
-    toggleIndex,
-  }
-}
-
-interface PanelRows {
-  /** What to render: the rows re-indexed and `Dropdown.Empty` dropped while
-   *  anything matched, or the children untouched when nothing filters. */
-  content: ReactNode
-  /** Rendered index → authored index. Empty while nothing filters. */
-  sourceOf: number[]
-  filtering: boolean
-  /** The query to publish to a `Dropdown.Search filter`, or null. */
-  filterCtx: DropdownFilterContextValue | null
-}
-
-/*
- * Uncontrolled search. A `Dropdown.Search` with `filter` among the panel's
- * direct children hands the panel the query; the panel then keeps only the
- * rows (anything with a string `label` and a numeric `index` — MenuItem, or a
- * wrapper that forwards both) whose label contains it, re-indexes them from 0
- * for fluid hover, and stamps each with the index it was authored with so the
- * selection survives. `Dropdown.Empty` children are held back and rendered
- * only when no row matched.
- */
-function usePanelRows(children: ReactNode): PanelRows {
-  const [query, setQuery] = useState('')
-
-  const filtering = useMemo(
-    () =>
-      Children.toArray(children).some(
-        child => isValidElement(child) && child.type === DropdownSearch && (child.props as { filter?: boolean }).filter,
-      ),
-    [children],
-  )
-
-  const filterCtx = useMemo(() => ({ query, setQuery }), [query])
-
-  const { content, sourceOf } = useMemo(() => {
-    if (!filtering) return { content: children, sourceOf: NO_INDICES }
-    const needle = query.trim().toLowerCase()
-    const rendered: ReactNode[] = []
-    const empties: ReactNode[] = []
-    const sources: number[] = []
-    for (const child of Children.toArray(children)) {
-      if (!isValidElement(child)) {
-        rendered.push(child)
-        continue
-      }
-
-      if (child.type === DropdownEmpty) {
-        empties.push(child)
-        continue
-      }
-
-      const rowProps = child.props as { label?: unknown; index?: unknown }
-      if (typeof rowProps.label !== 'string' || typeof rowProps.index !== 'number') {
-        rendered.push(child)
-        continue
-      }
-
-      if (needle && !rowProps.label.toLowerCase().includes(needle)) continue
-
-      rendered.push(
-        cloneElement(child as ReactElement<Record<string, unknown>>, {
-          index: sources.length,
-          sourceIndex: rowProps.index,
-        }),
-      )
-      sources.push(rowProps.index)
-    }
-    if (sources.length === 0) rendered.push(...empties)
-    return { content: rendered as ReactNode, sourceOf: sources }
-  }, [children, filtering, query])
-
-  return { content, sourceOf, filtering, filterCtx: filtering ? filterCtx : null }
-}
-
-// ---------------------------------------------------------------------------
-// Dropdown (inline panel)
-//
-// An always-rendered panel — no trigger, positioning, or dismissal. Because it
-// sits statically in the page it does NOT claim popup menu semantics: the
-// container is a plain role="group" (pass `aria-label` to name it). The real
-// role="menu" lives on the popup DropdownContent below, which Base UI wires to
-// a trigger. Consumers who hand-roll a trigger around the inline panel get
-// grouping semantics rather than a falsely-announced popup menu.
-// ---------------------------------------------------------------------------
-
-interface DropdownProps extends HTMLAttributes<HTMLDivElement> {
-  /** `Dropdown.Item` rows, plus `Dropdown.Label` and `Dropdown.Separator`. */
-  children: ReactNode
-  /** The checked row: drives the animated selected background and the rows' radio semantics. */
-  checkedIndex?: number
-  /** Uncontrolled twin of `checkedIndex`: the panel owns the selection, so rows need no `checked` or `onSelect` of their own. */
-  defaultCheckedIndex?: number
-  /** Called with the newly checked row, or `undefined` when nothing is checked. */
-  onCheckedIndexChange?: (index: number | undefined) => void
-  /** Multiple selection: the checked rows. Rows become checkbox items and contiguous runs share one merged background (see Checkbox.Group). */
-  checkedIndices?: number[]
-  /** Uncontrolled twin of `checkedIndices`: the panel toggles rows itself. */
-  defaultCheckedIndices?: number[]
-  /** Called with every checked row after a toggle. */
-  onCheckedIndicesChange?: (indices: number[]) => void
-  /** Pins the panel's rows to one step of the size ladder (default 36px, compact 28px — see Sizes). Omitted, they follow the surrounding SizeProvider. */
-  size?: SizeVariant
-  /** Extra classes for the panel surface — it is 18rem wide by default. */
-  className?: string
-}
-
-type DropdownComponent = ForwardRefExoticComponent<DropdownProps & RefAttributes<HTMLDivElement>> & {
-  Menu: typeof DropdownMenu
-  Trigger: typeof DropdownTrigger
-  Content: typeof DropdownContent
-  Item: typeof MenuItem
-  Label: typeof DropdownLabel
-  Separator: typeof DropdownSeparator
-  Search: typeof DropdownSearch
-  Empty: typeof DropdownEmpty
-  Group: typeof DropdownGroup
-  Shortcut: typeof DropdownShortcut
-  CheckboxItem: typeof DropdownCheckboxItem
-  RadioGroup: typeof DropdownRadioGroup
-  RadioItem: typeof DropdownRadioItem
-  Sub: typeof DropdownSub
-  SubTrigger: typeof DropdownSubTrigger
-  SubContent: typeof DropdownSubContent
-}
-
-/**
- * A menu in two forms: an inline panel that sits in the page, or a popup on
- * any trigger you like.
- *
- * `Dropdown` is the inline panel — an elevated surface with the fluid hover
- * background gliding between rows, a selected background that springs to the
- * picked one, contiguous picks merging into a single block in multiple mode,
- * and an animated focus ring. `Dropdown.Menu` + `Dropdown.Trigger` +
- * `Dropdown.Content` is the same panel as a popup on Base UI's Menu, which
- * brings the positioning, dismissal, roving highlight, typeahead and
- * close-on-select; the popup oozes out of its trigger and back through the
- * shared morph (see Morph), goo by default. Both take `checkedIndex` / `checkedIndices` to be driven
- * from outside, or `defaultCheckedIndex` / `defaultCheckedIndices` to run
- * themselves — and a `Dropdown.Search` marked `filter` makes the panel own
- * the query too, keeping only the rows whose `label` matches and showing
- * `Dropdown.Empty` when none do.
- *
- * Rows also come shadcn-style: children instead of a `label`, no `index` (a
- * row takes its place in document order, so the hover, the keyboard ring and
- * the selection backgrounds still find it, inside groups and behind
- * conditions alike), `inset` to line up with rows that have an icon and a
- * trailing `shortcut`. `Dropdown.CheckboxItem` and `Dropdown.RadioGroup` /
- * `Dropdown.RadioItem` select by their own state and value instead of by
- * index, their checked rows melting into one background like a multiple
- * selection. A `Dropdown.Sub` opens a submenu from its trigger row (ArrowRight,
- * a press, or a resting pointer) that grows out of that row and lifts above
- * the menu, with a highlight and a keyboard ring of its own. Every popup
- * lifts 2 surface levels off whatever it opens over, a Dialog included.
- *
- * Statics:
- * - `Dropdown.Menu` — the popup root: `open`, `defaultOpen`, `onOpenChange`, `disabled`, `size`.
- * - `Dropdown.Trigger` — the trigger: `render` or `asChild`.
- * - `Dropdown.Content` — the popup panel: `side`, `align`, `sideOffset`, the
- *   index selection, and the morph options `from`, `effect`, `hideSource`, `tier`.
- * - `Dropdown.Item` — a row: `label` or `children`, `index`, `icon`, `inset`,
- *   `shortcut`, `checked`, `onSelect`, `closeOnClick`, `disabled`.
- * - `Dropdown.CheckboxItem` — a row toggling itself: `checked`, `defaultChecked`, `onCheckedChange`.
- * - `Dropdown.RadioGroup` / `Dropdown.RadioItem` — one choice by value: `value`,
- *   `defaultValue`, `onValueChange` on the group, `value` on each row.
- * - `Dropdown.Group` / `Dropdown.Label` — a named run of rows and its caption (`inset`).
- * - `Dropdown.Separator` — a rule between runs.
- * - `Dropdown.Shortcut` — a muted caption at a row's end.
- * - `Dropdown.Sub` / `Dropdown.SubTrigger` / `Dropdown.SubContent` — a submenu:
- *   its state, its trigger row (`openOnHover`, `delay`), its panel (`side`,
- *   `align`, `sideOffset`, `alignOffset`, `from`, `effect`, `tier`).
- * - `Dropdown.Search` / `Dropdown.Empty` — a filter field and its no-match row.
- *
- * @example {@include ./examples.mdx}
- */
-const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
-  (
-    {
-      children,
-      checkedIndex,
-      defaultCheckedIndex,
-      onCheckedIndexChange,
-      checkedIndices,
-      defaultCheckedIndices,
-      onCheckedIndicesChange,
-      size,
-      className,
-      ...props
-    },
-    ref,
-  ) => {
-    const containerRef = useRef<HTMLDivElement>(null)
-    const hover = useFluidHover(containerRef, { isItemDisabled: isDisabledRow })
-    const { activeIndex, setActiveIndex, itemRects, handlers, registerItem } = hover
-
-    const [focusedIndex, setFocusedIndex] = useState<number | null>(null)
-    const rowOrder = useRowOrder()
-    const { valueChecked, reportChecked } = useValueChecked()
-
-    const rows = usePanelRows(children)
-    const selection = usePanelSelection(
-      {
-        checkedIndex,
-        defaultCheckedIndex,
-        onCheckedIndexChange,
-        checkedIndices,
-        defaultCheckedIndices,
-        onCheckedIndicesChange,
-      },
-      rows.sourceOf,
-      rows.filtering,
-    )
-
-    const multiple = selection.multiple
-    const checkedRect = !multiple && selection.checkedIndex != null ? itemRects[selection.checkedIndex] : null
-    const focusRect = focusedIndex !== null ? itemRects[focusedIndex] : null
-    // Multiple: one merged block per contiguous run of checked rows, value-
-    // checked rows (CheckboxItem, RadioItem) included.
-    const runs = useSelectionRuns(
-      useMemo(
-        () => [...(selection.checkedIndices ?? NO_INDICES), ...valueChecked],
-        [selection.checkedIndices, valueChecked],
-      ),
-    )
-    const blocks = useMergeSplitBlocks(runs, itemRects, shape.bgRadius)
-    const panelCtx = useMemo(
-      () => ({
-        registerItem,
-        activeIndex,
-        checkedIndex: selection.checkedIndex,
-        multiple,
-        checkedIndices: selection.checkedIndices,
-        selfManaged: selection.selfManaged,
-        toggleIndex: selection.toggleIndex,
-        reportChecked,
-      }),
-      [
-        registerItem,
-        activeIndex,
-        selection.checkedIndex,
-        multiple,
-        selection.checkedIndices,
-        selection.selfManaged,
-        selection.toggleIndex,
-        reportChecked,
-      ],
-    )
-    const panel = (
-      <RowOrderContext.Provider value={rowOrder}>
-        <DropdownContext.Provider value={panelCtx}>
-          <DropdownFilterContext.Provider value={rows.filterCtx}>
-            <Elevated
-              offset={2}
-              shadowLevel={3}
-              ref={node => {
-                ;(containerRef as React.MutableRefObject<HTMLDivElement | null>).current = node
-                if (typeof ref === 'function') ref(node)
-                else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node
-              }}
-              onMouseEnter={handlers.onMouseEnter}
-              onMouseMove={handlers.onMouseMove}
-              onMouseLeave={handlers.onMouseLeave}
-              onClick={handlers.onClick}
-              onFocus={e => {
-                const indexAttr = (e.target as HTMLElement)
-                  .closest('[data-fluid-hover-index]')
-                  ?.getAttribute('data-fluid-hover-index')
-                if (indexAttr != null) {
-                  const idx = Number(indexAttr)
-                  setActiveIndex(idx)
-                  setFocusedIndex((e.target as HTMLElement).matches(':focus-visible') ? idx : null)
-                }
-              }}
-              onBlur={e => {
-                if (containerRef.current?.contains(e.relatedTarget as Node)) return
-                setFocusedIndex(null)
-                setActiveIndex(null)
-              }}
-              onKeyDown={e => {
-                const items = Array.from(
-                  containerRef.current?.querySelectorAll(
-                    '[role="menuitem"], [role="menuitemradio"], [role="menuitemcheckbox"]',
-                  ) ?? [],
-                ) as HTMLElement[]
-                const currentIdx = items.indexOf(e.target as HTMLElement)
-                if (currentIdx === -1) return
-
-                if (['ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft'].includes(e.key)) {
-                  e.preventDefault()
-                  const next = ['ArrowDown', 'ArrowRight'].includes(e.key)
-                    ? (currentIdx + 1) % items.length
-                    : (currentIdx - 1 + items.length) % items.length
-                  items[next]?.focus()
-                } else if (e.key === 'Home') {
-                  e.preventDefault()
-                  items[0]?.focus()
-                } else if (e.key === 'End') {
-                  e.preventDefault()
-                  items[items.length - 1]?.focus()
-                }
-              }}
-              role="group"
-              className={cn(`relative flex flex-col w-72 max-w-full  p-1 select-none`, className)}
-              {...props}
-            >
-              {/* Selected backgrounds — merged runs in multiple mode and value-checked rows */}
-              <SelectionBackgrounds blocks={blocks} />
-
-              {/* Selected background */}
-              <AnimatePresence>
-                {checkedRect && (
-                  <motion.div
-                    className={`absolute ${shape.bg} bg-active pointer-events-none`}
-                    initial={false}
-                    animate={{
-                      top: checkedRect.top,
-                      left: checkedRect.left,
-                      width: checkedRect.width,
-                      height: checkedRect.height,
-                      opacity: 1,
-                    }}
-                    exit={{ opacity: 0, transition: spring.moderate.exit }}
-                    transition={{
-                      ...spring.moderate,
-                      opacity: { duration: spring.fast.duration },
-                    }}
-                  />
-                )}
-              </AnimatePresence>
-
-              {/* Hover background */}
-              <FluidHoverHighlight hover={hover} from={checkedRect} className={shape.bg} />
-
-              {/* Focus ring */}
-              <AnimatePresence>
-                {focusRect && (
-                  <motion.div
-                    className={`absolute ${shape.focusRing} pointer-events-none z-20 border border-focus-ring`}
-                    initial={false}
-                    animate={{
-                      left: focusRect.left - 2,
-                      top: focusRect.top - 2,
-                      width: focusRect.width + 4,
-                      height: focusRect.height + 4,
-                    }}
-                    exit={{ opacity: 0, transition: spring.fast.exit }}
-                    transition={{
-                      ...spring.fast,
-                      opacity: { duration: spring.fast.duration },
-                    }}
-                  />
-                )}
-              </AnimatePresence>
-
-              {rows.content}
-            </Elevated>
-          </DropdownFilterContext.Provider>
-        </DropdownContext.Provider>
-      </RowOrderContext.Provider>
-    )
-
-    // A size prop pins every row in the panel to one ladder step.
-    return size ? <SizeProvider size={size}>{panel}</SizeProvider> : panel
-  },
-) as DropdownComponent
-
-Dropdown.displayName = 'Dropdown'
-
-// ---------------------------------------------------------------------------
-// DropdownMenu (popup root)
-//
-// Built on Base UI's Menu primitive, which owns the trigger wiring,
-// positioning (collision flipping, anchor tracking), dismissal (outside
-// press, focus-out, Escape), roving highlight, typeahead, and close-on-select.
-// This layer keeps the fluid-hover overlays and the morph open/close
-// (lib/use-morph.ts) — the same pattern as select.tsx.
-// ---------------------------------------------------------------------------
-
-interface DropdownMenuContextValue {
-  open: boolean
-  origin: RefObject<MorphOrigin>
-}
-
-const DropdownMenuContext = createContext<DropdownMenuContextValue | null>(null)
-
-function useDropdownMenuContext() {
-  const ctx = useContext(DropdownMenuContext)
-  if (!ctx) throw new Error('DropdownMenu compound components must be inside <DropdownMenu>')
-  return ctx
-}
-
-interface DropdownMenuProps {
-  /** `Dropdown.Trigger` and `Dropdown.Content`. */
-  children: ReactNode
-  /** Controlled open state. Pair with `onOpenChange`. */
-  open?: boolean
-  /** Initial open state — uncontrolled. Defaults to `false`. */
-  defaultOpen?: boolean
-  /** Called when the menu opens or closes, with Base UI's event details: `reason` (why: `'escape-key'`, `'outside-press'`, `'focus-out'`, `'item-press'`, `'trigger-press'`…), `event`, and `cancel()`, which keeps the menu as it is. A callback that takes only `open` keeps working. */
-  onOpenChange?: (open: boolean, details: MenuRootChangeEventDetails) => void
-  /** Disables the menu. Defaults to `false`. */
-  disabled?: boolean
-  /** Locks the page scroll while the menu is open and keeps the pointer off everything outside it. Non-modal, the page keeps scrolling and the popup follows its trigger. Defaults to `false`. */
-  modal?: boolean
-  /** Pins trigger-side content and the portalled popup rows to one step of the size ladder (default 36px, compact 28px — see Sizes). Omitted, they follow the surrounding SizeProvider. */
-  size?: SizeVariant
-}
-
-function DropdownMenu({
-  children,
-  open: openProp,
-  defaultOpen = false,
-  onOpenChange,
-  disabled = false,
-  modal = false,
-  size,
-}: DropdownMenuProps) {
-  const [internalOpen, setInternalOpen] = useState(defaultOpen)
-  const open = openProp !== undefined ? openProp : internalOpen
-  const { origin, capture } = useMorphOrigin()
-
-  const handleOpenChange = useCallback(
-    (next: boolean, details: MenuRootChangeEventDetails) => {
-      onOpenChange?.(next, details)
-      if (details.isCanceled) return
-      if (next) capture(details)
-      if (openProp === undefined) setInternalOpen(next)
-    },
-    [openProp, onOpenChange, capture],
-  )
-
-  const ctx = useMemo(() => ({ open, origin }), [open, origin])
-
-  // A size prop pins the whole compound (trigger content + portalled popup —
-  // React context crosses portals) to one ladder step.
-  const root = (
-    <DropdownMenuContext.Provider value={ctx}>
-      <BaseMenu.Root
-        open={open}
-        onOpenChange={handleOpenChange}
-        disabled={disabled}
-        // Non-modal by default: the page keeps scrolling and the Positioner
-        // tracks the anchor, so the popup follows its trigger instead of detaching.
-        modal={modal}
-      >
-        {children}
-      </BaseMenu.Root>
-    </DropdownMenuContext.Provider>
-  )
-
-  return size ? <SizeProvider size={size}>{root}</SizeProvider> : root
-}
-
-DropdownMenu.displayName = 'DropdownMenu'
-
-// ---------------------------------------------------------------------------
-// DropdownTrigger
-//
-// Base UI's Menu.Trigger under the library name. Composes via the `render`
-// prop, or Radix-style `asChild` onto its single child, so any element can
-// be the trigger:
-//
-//   <DropdownTrigger render={<Button variant="secondary">Open</Button>} />
-//   <DropdownTrigger asChild><Button variant="secondary">Open</Button></DropdownTrigger>
-// ---------------------------------------------------------------------------
-
-type DropdownTriggerProps = MenuTriggerProps & {
-  /** Compose onto the single child instead of `render`. Defaults to `false`. */
-  asChild?: boolean
-}
-
-const DropdownTrigger = forwardRef<HTMLButtonElement, DropdownTriggerProps>(
-  ({ asChild, render, children, ...props }, ref) =>
-    asChild && isValidElement(children) ? (
-      <BaseMenu.Trigger
-        ref={ref}
-        render={children as ReactElement<Record<string, unknown>>}
-        {...props}
-        id={slotId(children, props.id)}
-      />
-    ) : (
-      <BaseMenu.Trigger ref={ref} render={render} {...props} id={slotId(render, props.id)}>
-        {children}
-      </BaseMenu.Trigger>
-    ),
-)
-
-DropdownTrigger.displayName = 'DropdownTrigger'
-
-// ---------------------------------------------------------------------------
-// DropdownContent (popup panel)
-//
-// Portal > Positioner > Popup carrying the exact inline-panel visuals: the
-// surface (painted by the morph layer), fluid-hover overlays, animated
-// selected background, and animated focus ring. Children are wrapped in a Menu.RadioGroup so
-// radio-style MenuItems (boolean `checked`) get correct aria-checked from
-// `checkedIndex`.
-// ---------------------------------------------------------------------------
-
-type MenuPositionerProps = ComponentProps<typeof BaseMenu.Positioner>
-
-interface DropdownContentProps extends Omit<HTMLAttributes<HTMLDivElement>, 'className'> {
-  /** `Dropdown.Item` rows, plus `Dropdown.Label`, `Dropdown.Separator`, `Dropdown.Search`, `Dropdown.Empty`. */
-  children: ReactNode
-  /** Extra classes for the popup surface. */
-  className?: string
-  /** Classes for the portalled positioner element: a z utility here lifts the menu above other fixed layers (the positioner is `z-50`), e.g. `z-[60]`. */
-  positionerClassName?: string
-  /** Index of the checked item. Drives the animated selected background and
-   *  the radio-group value announced to assistive tech. */
-  checkedIndex?: number
-  /** Uncontrolled twin of `checkedIndex`: the popup owns the selection, so rows need no `checked` or `onSelect` of their own. */
-  defaultCheckedIndex?: number
-  /** Called with the newly checked row, or `undefined` when nothing is checked. */
-  onCheckedIndexChange?: (index: number | undefined) => void
-  /** Multiple selection: the checked rows. Rows become checkbox items that
-   *  keep the menu open when toggled, and contiguous runs share one merged
-   *  background (see Checkbox.Group). */
-  checkedIndices?: number[]
-  /** Uncontrolled twin of `checkedIndices`: the popup toggles rows itself. */
-  defaultCheckedIndices?: number[]
-  /** Called with every checked row after a toggle. */
-  onCheckedIndicesChange?: (indices: number[]) => void
-  /** Side of the trigger the popup prefers. Defaults to `"bottom"`. */
-  side?: MenuPositionerProps['side']
-  /** Alignment against the trigger. Defaults to `"start"`. */
-  align?: MenuPositionerProps['align']
-  /** Gap to the trigger, in px. Ignored when the menu opens in place over its trigger (`effect="morph"` with `hideSource`). Defaults to `6`. */
-  sideOffset?: number
-  /** Shift along the trigger's edge, in px. Defaults to `0`. */
-  alignOffset?: MenuPositionerProps['alignOffset']
-  /** Space to keep between the menu and the edge of the collision boundary, in px (a number, or per side). Defaults to `5`. */
-  collisionPadding?: MenuPositionerProps['collisionPadding']
-  /** The element or rectangle the menu stays inside when it flips and shifts. Defaults to `'clipping-ancestors'`. */
-  collisionBoundary?: MenuPositionerProps['collisionBoundary']
-  /** The element the portalled menu mounts into, e.g. a Dialog's popup so it stays inside its focus trap. Defaults to `document.body`. */
-  container?: MenuPortalProps['container']
-  /** Where focus goes once the menu has closed: `false` leaves it, a ref moves it there (a text field after a pick), a function picks by how it closed. Defaults to `undefined`: Base UI's own return to the trigger. */
-  finalFocus?: MenuPopupProps['finalFocus']
-  /** An element to focus once the menu has opened, in place of the first row, or `false` to drop modo's own first-row focus. Base UI 1.4.1's Menu.Popup has no such option, so this is modo's: it acts a frame after the open. `false` does not silence Base UI's own initial focus, which still lands on the first row after a keyboard open and on the popup after a pointer open. The ref may be a fresh object each render: it is read when the menu opens, and only a change to or from `false` re-runs it. Defaults to `undefined`: the first row (the search field when there is one). */
-  initialFocus?: boolean | RefObject<HTMLElement | null>
-  /** Key handler on the popup, in the capture phase, ahead of the panel's own. `preventDefault` is harmless: navigation and typeahead still run. `stopPropagation` stops Base UI's key handling and the panel's arrow navigation; the keyboard ring and typing redirected into `Dropdown.Search` still run. Defaults to `undefined`. */
-  onKeyDownCapture?: HTMLAttributes<HTMLDivElement>['onKeyDownCapture']
-  /** Where the menu grows from (see Morph): the trigger, the pointer, its own center, a viewport edge, or a ref to any element. Defaults to `'trigger'`. */
-  from?: 'trigger' | 'pointer' | 'center' | 'top' | 'right' | 'bottom' | 'left' | RefObject<HTMLElement | null>
-  /** How it grows (see Morph): with the liquid goo neck, a plain morph, a slide or a fade. Defaults to `'goo'`. */
-  effect?: 'goo' | 'morph' | 'slide' | 'fade'
-  /** Hide the trigger while open, so it reads as turning into the menu. Defaults to `false`. */
-  hideSource?: boolean
-  /** Spring tier of a plain morph, slide or fade; goo runs on its own `spring.goo`. Defaults to `'moderate'`. */
-  tier?: 'moderate' | 'slow'
-  /** Keep the rows mounted (hidden) while the menu is closed, so rows that run their own state — `Dropdown.CheckboxItem defaultChecked`, `Dropdown.RadioGroup defaultValue`, an uncontrolled `Dropdown.Sub` — keep it across opens. Defaults to `false`. */
-  keepMounted?: boolean
-}
-
-const DropdownContent = forwardRef<HTMLDivElement, DropdownContentProps>(
-  (
-    {
-      className,
-      children,
-      checkedIndex,
-      defaultCheckedIndex,
-      onCheckedIndexChange,
-      checkedIndices,
-      defaultCheckedIndices,
-      onCheckedIndicesChange,
-      side = 'bottom',
-      align = 'start',
-      sideOffset = 6,
-      alignOffset,
-      collisionPadding,
-      collisionBoundary,
-      container,
-      finalFocus,
-      initialFocus,
-      positionerClassName,
-      from,
-      effect,
-      hideSource,
-      tier = 'moderate',
-      keepMounted = false,
-      onKeyDownCapture,
-      onMouseEnter,
-      onMouseMove,
-      onMouseLeave,
-      onClick,
-      onFocus,
-      onBlur,
-      ...popupProps
-    },
-    ref,
-  ) => {
-    const { open, origin } = useDropdownMenuContext()
-    const morph = useMorph(open, origin, { from, effect, hideSource, tier })
-    useImperativeHandle(ref, () => morph.popup as HTMLDivElement, [morph.popup])
-    // Lifts 2 levels off its substrate with a fixed shadow (see Elevated).
-    const level = Math.min(useSurface() + 2, 8)
-    const containerRef = useRef<HTMLDivElement>(null)
-
-    const panel = useMenuPanel(containerRef, open)
-    const { hover, focusRow, setFocusedIndex } = panel
-    const { setActiveIndex, itemRects, handlers, registerItem, remeasure } = hover
-
-    const rows = usePanelRows(children)
-    const selection = usePanelSelection(
-      {
-        checkedIndex,
-        defaultCheckedIndex,
-        onCheckedIndexChange,
-        checkedIndices,
-        defaultCheckedIndices,
-        onCheckedIndicesChange,
-      },
-      rows.sourceOf,
-      rows.filtering,
-    )
-
-    // An optional DropdownSearch child: typing on a focused row is
-    // redirected into the field. (The field takes focus itself, a frame
-    // after the primitive's own open autofocus.)
-    const {
-      host: searchHost,
-      hasSearch,
-      searchMounted,
-      onKeyDownCapture: redirectTypingToSearch,
-      isSearchField,
-      highlightFirst,
-    } = useDropdownSearchHost(open, { containerRef, setActiveIndex })
-
-    // Open ready to act: focus the first enabled row (a mounted search field
-    // takes focus itself instead). A frame after the primitive's own open
-    // autofocus, which lands on the popup for pointer opens.
-    // Read through a ref: a fresh `{ current }` object each render must not re-run the effect.
-    const initialFocusRef = useRef(initialFocus)
-    initialFocusRef.current = initialFocus
-    const keepsFocus = initialFocus === false
-    useEffect(() => {
-      if (!open || keepsFocus) return
-      let inner: number | undefined
-      const outer = requestAnimationFrame(() => {
-        inner = requestAnimationFrame(() => {
-          const target = initialFocusRef.current
-          if (typeof target === 'object') return target.current?.focus()
-          if (hasSearch()) return
-          const rows = containerRef.current
-          if (!rows || (rows.contains(document.activeElement) && document.activeElement !== rows)) return
-          const first = rows.querySelector<HTMLElement>(
-            '[role="menuitem"]:not([aria-disabled="true"]), [role="menuitemradio"]:not([aria-disabled="true"]), [role="menuitemcheckbox"]:not([aria-disabled="true"])',
-          )
-          first?.focus()
-        })
-      })
-      return () => {
-        cancelAnimationFrame(outer)
-        if (inner !== undefined) cancelAnimationFrame(inner)
-      }
-    }, [open, hasSearch, keepsFocus])
-
-    // The popup keeps its rows registered between opens, so their rects
-    // were taken while it was hidden: re-measure once it is open and laid out.
-    useEffect(() => {
-      if (!open) return
-      remeasure()
-    }, [open, remeasure])
-
-    const multiple = selection.multiple
-    const checkedRect = !multiple && selection.checkedIndex != null ? itemRects[selection.checkedIndex] : null
-    // Multiple: one merged block per contiguous run of checked rows, value-
-    // checked rows (CheckboxItem, RadioItem) included.
-    const runs = useSelectionRuns(
-      useMemo(
-        () => [...(selection.checkedIndices ?? NO_INDICES), ...panel.valueChecked],
-        [selection.checkedIndices, panel.valueChecked],
-      ),
-    )
-    const blocks = useMergeSplitBlocks(runs, open ? itemRects : NO_RECTS, shape.bgRadius)
-    // Inside the popup, Base UI's Menu.Item / Menu.RadioItem own the role,
-    // aria-checked, tabIndex, roving highlight, typeahead, and Enter/Space/
-    // click activation. Keyboard activation reaches only the primitive's own
-    // onClick, so the row's activation rides there. The render div carries the
-    // Fluid Functionalism visuals and the fluid-hover registration.
-    // (`renderPopupItem`, shared with Dropdown.SubContent.)
-
-    const contentCtx = useMemo(
-      () => ({
-        registerItem,
-        activeIndex: panel.lit,
-        checkedIndex: selection.checkedIndex,
-        multiple,
-        checkedIndices: selection.checkedIndices,
-        inMenu: true,
-        renderMenuItem: renderPopupItem,
-        selfManaged: selection.selfManaged,
-        toggleIndex: selection.toggleIndex,
-        pin: panel.pin,
-        reportChecked: panel.reportChecked,
-      }),
-      [
-        registerItem,
-        panel.lit,
-        selection.checkedIndex,
-        multiple,
-        selection.checkedIndices,
-        selection.selfManaged,
-        selection.toggleIndex,
-        panel.pin,
-        panel.reportChecked,
-      ],
-    )
-
-    return (
-      <BaseMenu.Portal keepMounted={keepMounted} container={container}>
-        <BaseMenu.Positioner
-          side={side}
-          align={align}
-          sideOffset={opensInPlace({ effect, hideSource }) ? inPlaceOffset : sideOffset}
-          alignOffset={alignOffset}
-          collisionPadding={collisionPadding}
-          collisionBoundary={collisionBoundary}
-          className={cn('z-50 outline-none', positionerClassName)}
-        >
-          <DropdownContext.Provider value={contentCtx}>
-            <DropdownFilterContext.Provider value={rows.filterCtx}>
-              <DropdownSearchHostContext.Provider value={searchHost}>
-                <BaseMenu.Popup
-                  {...popupProps}
-                  ref={morph.popupRef}
-                  finalFocus={finalFocus}
-                  onKeyDownCapture={chain(onKeyDownCapture, e => {
-                    // A submenu's keys bubble here through the portal.
-                    if (!ownEvent(e)) return
-                    panel.trackKeyboardNav(e)
-                    redirectTypingToSearch(e)
-                  })}
-                  onMouseEnter={chain(onMouseEnter, () => {
-                    handlers.onMouseEnter()
-                    setFocusedIndex(null)
-                  })}
-                  onMouseMove={chain(onMouseMove, e => ownEvent(e) && handlers.onMouseMove(e))}
-                  onClick={chain(onClick, e => ownEvent(e) && handlers.onClick(e))}
-                  onMouseLeave={chain(onMouseLeave, () => {
-                    handlers.onMouseLeave()
-                    // The pointer's session is over; a focused search field
-                    // gets its first-row highlight back.
-                    if (isSearchField(document.activeElement)) highlightFirst()
-                  })}
-                  onFocus={chain(onFocus, e => {
-                    // Keyboard navigation moves the hover background, and the
-                    // ring once the keyboard earned it (useKeyboardNavGate).
-                    if (!ownEvent(e) || focusRow(e)) return
-                    if (isSearchField(e.target)) {
-                      // The search field: the first row (what Enter picks)
-                      // carries the highlight while it has focus.
-                      highlightFirst()
-                    } else if (e.target !== e.currentTarget) {
-                      // Focus moved to some other non-row inside the popup: no
-                      // row is highlighted any more. The popup focusing itself
-                      // (pointer leaving a row) doesn't count.
-                      setActiveIndex(null)
-                    }
-                  })}
-                  onBlur={chain(onBlur, e => {
-                    // The popup itself takes focus when the pointer leaves a row; only a
-                    // departure from the whole popup ends the hover session.
-                    if (!ownEvent(e) || e.currentTarget.contains(e.relatedTarget as Node)) return
-                    setFocusedIndex(null)
-                    setActiveIndex(null)
-                  })}
-                  className="relative select-none outline-none"
-                >
-                  <SurfaceProvider value={level}>
-                    <MorphSurface
-                      morph={morph}
-                      bg={SURFACE_BG[level]}
-                      shadow={SURFACE_SHADOW[3]}
-                      radius={shape.container}
-                      className={cn(
-                        // min-w tracks the trigger via the Positioner's
-                        // --anchor-width var.
-                        `flex flex-col w-72 max-w-full min-w-[var(--anchor-width)] max-h-[min(480px,var(--available-height))] overflow-hidden ${shape.container}`,
-                        className,
-                      )}
-                    >
-                      {/* The list scrolls inside a ScrollArea; this wrapper is the rows'
-                    offsetParent, so the overlays scroll with them. */}
-                      <ScrollArea
-                        className={popupScrollAreaClass}
-                        viewportClassName={cn(popupViewportClass, !searchMounted && 'scroll-fade')}
-                      >
-                        <div ref={containerRef} className="relative flex flex-col p-1">
-                          {/* Selected backgrounds — merged runs in multiple mode and value-checked rows */}
-                          <SelectionBackgrounds blocks={blocks} />
-
-                          {/* Selected background */}
-                          <AnimatePresence>
-                            {checkedRect && (
-                              <motion.div
-                                className={`absolute ${shape.bg} bg-active pointer-events-none`}
-                                initial={false}
-                                animate={{
-                                  top: checkedRect.top,
-                                  left: checkedRect.left,
-                                  width: checkedRect.width,
-                                  height: checkedRect.height,
-                                  opacity: 1,
-                                }}
-                                exit={{ opacity: 0, transition: spring.moderate.exit }}
-                                transition={{
-                                  ...spring.moderate,
-                                  opacity: { duration: spring.fast.duration },
-                                }}
-                              />
-                            )}
-                          </AnimatePresence>
-
-                          {/* Hover background (pinned on an open submenu's trigger) */}
-                          <FluidHoverHighlight hover={panel.shownHover} from={checkedRect} className={shape.bg} />
-
-                          {/* Focus ring, keyboard only */}
-                          <FocusRing rect={open ? panel.focusRect : null} shape="rounded" />
-
-                          {/* display: contents keeps items direct flex children of the
-                    wrapper so fluid hover measurement and gap layout still work,
-                    while the group provides the radio value context. */}
-                          <RowOrderContext.Provider value={panel.rowOrder}>
-                            <BaseMenu.RadioGroup value={selection.checkedIndex ?? null} className="contents">
-                              {rows.content}
-                            </BaseMenu.RadioGroup>
-                          </RowOrderContext.Provider>
-                        </div>
-                      </ScrollArea>
-                    </MorphSurface>
-                  </SurfaceProvider>
-                </BaseMenu.Popup>
-              </DropdownSearchHostContext.Provider>
-            </DropdownFilterContext.Provider>
-          </DropdownContext.Provider>
-        </BaseMenu.Positioner>
-      </BaseMenu.Portal>
-    )
-  },
-)
-
-DropdownContent.displayName = 'DropdownContent'
-
-// ---------------------------------------------------------------------------
-// DropdownLabel
-// ---------------------------------------------------------------------------
-
-interface DropdownLabelProps extends HTMLAttributes<HTMLDivElement> {
-  /** The caption. */
-  children?: ReactNode
-  /** Indents the caption to the label column of rows with an icon. Defaults to `false`. */
-  inset?: boolean
-  /** Extra classes. */
-  className?: string
-}
-
-const DropdownLabel = forwardRef<HTMLDivElement, DropdownLabelProps>(({ className, inset, ...props }, ref) => {
-  // Group labels are the caption role of the type scale — see /docs/sizes.
-  const size = useSize()
-  const own = useRef<HTMLDivElement>(null)
-  // A place in the row order, so a selection run never melts across it.
-  useRowSlot(own, undefined, true)
-  const classes = cn(
-    'py-1.5 shrink-0 text-muted-foreground',
-    inset ? INSET_PX[size.variant] : 'px-2',
-    size.variant === 'compact' ? 'text-caption-compact' : 'text-caption',
-    className,
-  )
-  // Inside a Dropdown.Group it names the group.
-  return useContext(DropdownGroupContext) ? (
-    <BaseMenu.GroupLabel ref={mergeRefs(own, ref)} className={classes} {...props} />
-  ) : (
-    <div ref={mergeRefs(own, ref)} className={classes} {...props} />
-  )
-})
-
-DropdownLabel.displayName = 'DropdownLabel'
-
-// ---------------------------------------------------------------------------
-// DropdownSeparator
-// ---------------------------------------------------------------------------
-
-const DropdownSeparator = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => {
-  const own = useRef<HTMLDivElement>(null)
-  useRowSlot(own, undefined, true)
-  return (
-    <div
-      ref={mergeRefs(own, ref)}
-      role="separator"
-      className={cn('my-1 -mx-1 h-px shrink-0 bg-border/60', className)}
-      {...props}
-    />
-  )
-})
-
-DropdownSeparator.displayName = 'DropdownSeparator'
-
-Object.assign(Dropdown, {
-  Menu: DropdownMenu,
-  Trigger: DropdownTrigger,
-  Content: DropdownContent,
-  Item: MenuItem,
-  Label: DropdownLabel,
-  Separator: DropdownSeparator,
-  Search: DropdownSearch,
-  Empty: DropdownEmpty,
-  Group: DropdownGroup,
-  Shortcut: DropdownShortcut,
-  CheckboxItem: DropdownCheckboxItem,
-  RadioGroup: DropdownRadioGroup,
-  RadioItem: DropdownRadioItem,
-  Sub: DropdownSub,
-  SubTrigger: DropdownSubTrigger,
-  SubContent: DropdownSubContent,
-})
-
-// DropdownContextValue and MenuItemRenderOptions are already re-exported
-// above next to their import — repeating them here is a duplicate-export
-// build error.
-export type {
-  DropdownCheckboxItemProps,
-  DropdownContentProps,
-  DropdownGroupProps,
-  DropdownLabelProps,
-  DropdownMenuProps,
-  DropdownProps,
-  DropdownRadioGroupProps,
-  DropdownRadioItemProps,
-  DropdownSearchProps,
-  DropdownShortcutProps,
-  DropdownSubContentProps,
-  DropdownSubProps,
-  DropdownSubTriggerProps,
-  DropdownTriggerProps,
-  MenuItemProps,
-}
-export {
-  Dropdown,
-  DropdownCheckboxItem,
-  DropdownContent,
-  DropdownEmpty,
-  DropdownGroup,
-  DropdownLabel,
-  DropdownMenu,
-  DropdownRadioGroup,
-  DropdownRadioItem,
-  DropdownSearch,
-  DropdownSeparator,
-  DropdownShortcut,
-  DropdownSub,
-  DropdownSubContent,
-  DropdownSubTrigger,
-  DropdownTrigger,
-  MenuItem,
-}
-export default Dropdown