@estiva-app/ui 0.4.0 → 0.6.0

package/src/Menu.tsx

@@ -1,7 +1,9 @@
-import { useEffect, useRef, type ComponentPropsWithRef, type CSSProperties, type ReactNode } from 'react'
+import { createContext, useCallback, useContext, useEffect, useLayoutEffect, useRef, useState, type ComponentPropsWithRef, type CSSProperties, type ReactNode } from 'react'
 import { IconChevronRight } from '@tabler/icons-react'
 import { createPortal } from 'react-dom'
 import { cn } from './cn'
+import { Kbd } from './Kbd'
+import { clampBox, fitMenu, fitSubmenu } from './fit'
 import { SectionLabel } from './SectionLabel'
 
 /**
@@ -21,21 +23,100 @@ import { SectionLabel } from './SectionLabel'
  * row; and the two exits every menu has — Escape and a click outside —
  * owned by the menu, never copied into a caller.
  *
- * Two anchorings: `position` portals it to the body at fixed viewport
- * coordinates (for menus opened inside scrolling containers that clip);
- * without it the menu hangs below its trigger, right-aligned, and the
- * caller's wrapper is `relative`.
+ * Where it goes is owned here too (2026-09-03), because the two ways a menu
+ * goes wrong are both placement: it opens inside a stacking context or a
+ * scroll container and something covers or clips it, or it opens near an
+ * edge and runs off the screen. Both shipped — the identity menu vanished
+ * under a z-indexed panel header, a submenu was cut by the right edge — so
+ * the shell now portals to the body (nothing in an app can cover the body's
+ * last child at z-50) and fits itself to the viewport (fit.ts, the same
+ * measured geometry Select uses). A caller hands over a trigger, not
+ * coordinates.
+ *
+ * Three anchorings, in order of preference:
+ * - `anchor` (an element, usually the trigger): portalled, measured, and
+ *   placed by `fitMenu` — under the anchor, flipped above when the room
+ *   below is worse, clamped inside the viewport, height-capped with its own
+ *   scrollbar. `align="right"` hangs the menu's right edge from the
+ *   anchor's. Closes on resize and on any page scroll, because both move
+ *   the anchor out from under it.
+ * - `position` (viewport coordinates the caller computed): portalled and
+ *   clamped (`clampBox`) — the caller's corner survives, but can no longer
+ *   land off screen.
+ * - neither: in-flow under a `relative` wrapper, right-aligned. For stories
+ *   and static surfaces only — inside an app this mode inherits every
+ *   ancestor's stacking context and clip, which is how the identity menu
+ *   got covered.
  */
 export interface MenuProps {
   onClose: () => void
-  /** Viewport coordinates; the menu is portalled, hung from `top`, and aligned to whichever edge is given. */
+  /** The trigger — an element, or the rect a click handler already measured.
+   *  The menu portals to the body and places itself against it. */
+  anchor?: HTMLElement | DOMRect | null
+  /** With `anchor`: which of the menu's edges hangs from the anchor's. Default left. */
+  align?: 'left' | 'right'
+  /** Viewport coordinates; the menu is portalled, hung from `top`, aligned to whichever edge is given, and clamped on screen. */
   position?: { top: number; right: number } | { top: number; left: number }
+  /** Close 150ms after the pointer leaves the menu — the hover-flow menus
+   *  (quick-menu cards) dismiss this way. The grace period is shared with any
+   *  open MenuSub panel, so crossing into a portalled submenu never counts as
+   *  leaving. */
+  closeOnLeave?: boolean
   children: ReactNode
   className?: string
 }
 
-export function Menu({ onClose, position, children, className }: MenuProps) {
+/** MenuSub reports its hover into the enclosing Menu's leave-grace timer, so
+ *  a `closeOnLeave` menu survives the pointer crossing into a portalled
+ *  submenu panel — the one hover region the old inline submenus had for free. */
+const MenuHoverContext = createContext<{ hold: () => void; release: () => void } | null>(null)
+
+/**
+ * The menu's surface, with none of its behaviour — an elevated box with a
+ * hairline border, 8px radius, 8px padding and the large shadow.
+ *
+ * Split out of `Menu` on 2026-09-05. `Menu` owns Escape, outside-click and
+ * placement, and that is right for a menu opened from a trigger — but a
+ * type-ahead popup inside a text editor cannot have them: the editor's
+ * suggestion plugin already owns the keyboard and positions the popup, and a
+ * second Escape handler fights it. So Peek's `@`, `/` and `[` menus each drew
+ * this box by hand, and the three had already drifted apart.
+ *
+ * `Menu` renders this, so there is still exactly one definition of the
+ * surface — change it here and every menu in every app follows.
+ *
+ * Width, height and internal rhythm belong to the caller: a picker that lists
+ * people is not the width of one that lists verbs.
+ */
+export interface MenuPanelProps extends Omit<ComponentPropsWithRef<'div'>, 'children'> {
+  children: ReactNode
+}
+
+export function MenuPanel({ children, className, ...props }: MenuPanelProps) {
+  return (
+    <div
+      className={cn('flex flex-col rounded-lg border border-border-default bg-bg-elevated p-2 shadow-lg', className)}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
+
+export function Menu({ onClose, anchor, align = 'left', position, closeOnLeave = false, children, className }: MenuProps) {
   const ref = useRef<HTMLDivElement>(null)
+  const leaveTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
+  const hold = useCallback(() => clearTimeout(leaveTimer.current), [])
+  const release = useCallback(() => {
+    if (!closeOnLeave) return
+    clearTimeout(leaveTimer.current)
+    leaveTimer.current = setTimeout(onClose, 150)
+  }, [closeOnLeave, onClose])
+  useEffect(() => () => clearTimeout(leaveTimer.current), [])
+  const portalled = Boolean(anchor || position)
+  /** Where the menu actually goes — measured against the viewport after a
+   *  hidden provisional render, so it is never covered and never cut off. */
+  const [placed, setPlaced] = useState<{ left: number; top?: number; bottom?: number; maxHeight: number } | null>(null)
 
   useEffect(() => {
     const onDown = (event: MouseEvent) => {
@@ -52,24 +133,158 @@ export function Menu({ onClose, position, children, className }: MenuProps) {
     }
   }, [onClose])
 
-  const style: CSSProperties | undefined = position ? { top: position.top, ...('left' in position ? { left: position.left } : { right: position.right }) } : undefined
+  // Callers build `position` inline every render; depending on its
+  // coordinates rather than the object keeps the effect from re-running
+  // (and re-placing) on every parent render.
+  const posLeft = position && 'left' in position ? position.left : undefined
+  const posRight = position && 'right' in position ? position.right : undefined
+  const posTop = position?.top
+
+  useLayoutEffect(() => {
+    if (!portalled || !ref.current) return
+    const viewport = { width: window.innerWidth, height: window.innerHeight }
+    const menu = ref.current
+    if (anchor) {
+      const rect = anchor instanceof Element ? anchor.getBoundingClientRect() : anchor
+      const left = align === 'right' ? rect.right - menu.offsetWidth : rect.left
+      setPlaced(
+        fitMenu({
+          anchor: { left, top: rect.top, bottom: rect.bottom },
+          menu: { width: menu.offsetWidth, contentHeight: menu.scrollHeight },
+          viewport,
+        }),
+      )
+    } else if (posTop !== undefined) {
+      const left = posLeft ?? viewport.width - (posRight ?? 0) - menu.offsetWidth
+      setPlaced(clampBox({ box: { left, top: posTop, width: menu.offsetWidth, height: menu.offsetHeight }, viewport }))
+    }
+  }, [portalled, anchor, align, posLeft, posRight, posTop])
+
+  /* An anchored menu is placed against its trigger's rect, and a resize or a
+     page scroll moves the trigger out from under it — close, as Select does.
+     A scroll INSIDE the menu is its own capped list working; leave those. */
+  useEffect(() => {
+    if (!anchor) return
+    const onScroll = (event: Event) => {
+      if (event.target instanceof Node && ref.current?.contains(event.target)) return
+      onClose()
+    }
+    window.addEventListener('resize', onClose)
+    window.addEventListener('scroll', onScroll, true)
+    return () => {
+      window.removeEventListener('resize', onClose)
+      window.removeEventListener('scroll', onScroll, true)
+    }
+  }, [anchor, onClose])
+
+  const style: CSSProperties | undefined = portalled
+    ? placed
+      ? { left: placed.left, top: placed.top, bottom: placed.bottom, maxHeight: placed.maxHeight }
+      : // The provisional render: measured by the layout effect, never seen.
+        { left: 0, top: 0, visibility: 'hidden' }
+    : undefined
   const node = (
-    <div
-      ref={ref}
-      role="menu"
-      data-interactive
-      className={cn(
-        'z-50 flex min-w-[180px] flex-col rounded-lg border border-border-default bg-bg-elevated p-2 shadow-lg',
-        position ? 'fixed' : 'absolute right-0 top-full mt-1',
-        className,
-      )}
-      style={style}
-      onClick={(event) => event.stopPropagation()}
-    >
-      {children}
+    <MenuHoverContext.Provider value={{ hold, release }}>
+      <MenuPanel
+        ref={ref}
+        role="menu"
+        data-interactive
+        className={cn(
+          'z-50 min-w-[180px]',
+          portalled ? 'fixed overflow-y-auto' : 'absolute right-0 top-full mt-1',
+          className,
+        )}
+        style={style}
+        onClick={(event) => event.stopPropagation()}
+        onMouseEnter={closeOnLeave ? hold : undefined}
+        onMouseLeave={closeOnLeave ? release : undefined}
+      >
+        {children}
+      </MenuPanel>
+    </MenuHoverContext.Provider>
+  )
+  return portalled ? createPortal(node, document.body) : node
+}
+
+/**
+ * A row that opens another menu beside it — the submenu two Peek menus
+ * hand-rolled before this, one of which dropped the ref its edge-flip
+ * measured and shipped a submenu cut off by the screen (2026-09-03).
+ *
+ * Hover-timed like those were: opens at once, closes 150ms after the
+ * pointer leaves row and panel both, so the diagonal from row to panel
+ * survives. The panel portals to the body and is placed by `fitSubmenu` —
+ * right of the row when it fits, left when it does not, never past an edge
+ * — so it also escapes whatever container its menu happens to be in.
+ */
+export interface MenuSubProps {
+  /** The trigger row's label. */
+  label: string
+  leading?: ReactNode
+  /** Mark the trigger row as holding a current value. */
+  selected?: boolean
+  /** The submenu's rows. */
+  children: ReactNode
+  /** On the submenu panel. */
+  className?: string
+}
+
+export function MenuSub({ label, leading, selected, children, className }: MenuSubProps) {
+  const [open, setOpen] = useState(false)
+  const rowRef = useRef<HTMLDivElement>(null)
+  const panelRef = useRef<HTMLDivElement>(null)
+  const closeTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
+  const [placed, setPlaced] = useState<{ left: number; top: number } | null>(null)
+  // The panel portals out of the menu's DOM, so hovering it would read as
+  // "left the menu" to a closeOnLeave shell — report hover upward instead.
+  const menuHover = useContext(MenuHoverContext)
+
+  const enter = () => {
+    clearTimeout(closeTimer.current)
+    menuHover?.hold()
+    setOpen(true)
+  }
+  const leave = () => {
+    closeTimer.current = setTimeout(() => setOpen(false), 150)
+    menuHover?.release()
+  }
+  useEffect(() => () => clearTimeout(closeTimer.current), [])
+
+  useLayoutEffect(() => {
+    if (!open || !rowRef.current || !panelRef.current) {
+      setPlaced(null)
+      return
+    }
+    const row = rowRef.current.getBoundingClientRect()
+    setPlaced(
+      fitSubmenu({
+        row: { left: row.left, right: row.right, top: row.top },
+        panel: { width: panelRef.current.offsetWidth, height: panelRef.current.offsetHeight },
+        viewport: { width: window.innerWidth, height: window.innerHeight },
+      }),
+    )
+  }, [open])
+
+  return (
+    <div ref={rowRef} onMouseEnter={enter} onMouseLeave={leave}>
+      <MenuItem label={label} leading={leading} selected={selected} submenu />
+      {open &&
+        createPortal(
+          <MenuPanel
+            ref={panelRef}
+            role="menu"
+            data-interactive
+            className={cn('fixed z-50 w-[160px]', className)}
+            style={placed ?? { left: 0, top: 0, visibility: 'hidden' }}
+            onMouseEnter={enter}
+            onMouseLeave={leave}
+          >
+            {children}
+          </MenuPanel>,
+          document.body,
+        )}
     </div>
   )
-  return position ? createPortal(node, document.body) : node
 }
 
 export interface MenuItemProps extends Omit<ComponentPropsWithRef<'button'>, 'children'> {
@@ -87,6 +302,23 @@ export interface MenuItemProps extends Omit<ComponentPropsWithRef<'button'>, 'ch
   leading?: ReactNode
   /** At the right edge: a hint, a value — anything. Wins over `shortcut` and `submenu`. */
   trailing?: ReactNode
+  /**
+   * Shown at the right edge **only while this row is the one you are pointing
+   * at or have arrowed onto** — an `EnterHint`, typically.
+   *
+   * Pass it unconditionally. Do not do `trailing={active ? <EnterHint/> : undefined}`:
+   * that mounts the hint, and a mount is instant while the row's own fill is a
+   * 150ms fade, so the hint lands ahead of the highlight on the way in and
+   * vanishes ahead of it on the way out (measured 2026-09-05 — ~7 frames of a
+   * chip sitting on an unhighlighted row, and two rows lit at once when
+   * sweeping). This slot is always in the DOM and revealed by the *same*
+   * `:hover` / `selected` the fill uses, on the same duration and curve, so
+   * the two cannot come apart — and the row does not reflow when it appears.
+   *
+   * It cross-fades with `trailing`/`shortcut`/`submenu` rather than displacing
+   * them, and reserves the wider of the two, so nothing moves either way.
+   */
+  hint?: ReactNode
   /** A keyboard hint, drawn as the kbd chip. */
   shortcut?: string
   /** The row opens another menu: draws the chevron at the right edge. */
@@ -96,13 +328,11 @@ export interface MenuItemProps extends Omit<ComponentPropsWithRef<'button'>, 'ch
   selected?: boolean
 }
 
-export function MenuItem({ label, children, size = 'default', description, leading, trailing, shortcut, submenu, destructive, selected, className, ...props }: MenuItemProps) {
+export function MenuItem({ label, children, size = 'default', description, leading, trailing, hint, shortcut, submenu, destructive, selected, className, ...props }: MenuItemProps) {
   const edge =
     trailing ??
     (shortcut ? (
-      <kbd className="inline-flex shrink-0 items-center justify-center rounded-sm border border-border-strong bg-bg-inset px-1 py-px text-caption text-text-secondary">
-        {shortcut}
-      </kbd>
+      <Kbd>{shortcut}</Kbd>
     ) : submenu ? (
       <IconChevronRight size={16} stroke={1.5} className="shrink-0 text-text-muted" />
     ) : null)
@@ -111,7 +341,21 @@ export function MenuItem({ label, children, size = 'default', description, leadi
       type="button"
       role="menuitem"
       className={cn(
-        'flex w-full cursor-pointer items-center rounded-lg text-left hover:bg-bg-hover transition-colors',
+        // shrink-0: a menu is a flex column that scrolls at its max height,
+        // and a flex child shrinks before its container does — so every row
+        // in an overflowing menu was squashed to its `min-h`, and a row given
+        // an explicit height silently lost it (Peek's `[` menu: h-12 rows
+        // measured 40px). The same fix NavItem took on 2026-09-02.
+        // `group`: the `hint` slot reveals itself from this row's own :hover,
+        // so the hint and the fill are one CSS state change, not two engines.
+        //
+        // No transition on the fill (Katerina, 2026-09-05). It faded over
+        // 150ms, and anything appearing with it had to fade too or arrive
+        // ahead of it — which, sweeping a pointer down a list, read as the
+        // hint flickering in and out. Both are instant now: they still change
+        // on exactly the same :hover, so they cannot come apart, and a row
+        // lights and unlights crisply as the pointer crosses it.
+        'group flex w-full shrink-0 cursor-pointer items-center rounded-lg text-left hover:bg-bg-hover',
         // tall: as tall as its content, never shorter than 40px (Katerina,
         // 2026-09-01) — a single-line picker row sits at 40, a row with a
         // 32px face and a role line comes out at its natural 48. One rule,
@@ -134,20 +378,52 @@ export function MenuItem({ label, children, size = 'default', description, leadi
           {description && <span className="truncate text-[12px] leading-[120%] text-text-secondary">{description}</span>}
         </span>
       )}
-      {edge && <span className="flex shrink-0 items-center">{edge}</span>}
+      {(edge || hint) && (
+        // One grid cell holding both, right-aligned: the slot is as wide as
+        // the wider of the two and never changes, so revealing the hint moves
+        // nothing. No transition here either — the hint switches on the same
+        // :hover / `selected` as the fill, in the same frame.
+        <span className="grid shrink-0 items-center justify-items-end [&>*]:col-start-1 [&>*]:row-start-1">
+          {edge && (
+            <span className={cn('flex items-center', hint && 'group-hover:opacity-0', hint && selected && 'opacity-0')}>
+              {edge}
+            </span>
+          )}
+          {hint && (
+            <span className={cn('flex items-center opacity-0 group-hover:opacity-100', selected && 'opacity-100')}>
+              {hint}
+            </span>
+          )}
+        </span>
+      )}
     </button>
   )
 }
 
 /**
- * The keyboard hint a picker row shows while highlighted — "↩ Enter",
- * "↩ #topic" — hand-rolled in five files before this (2026-09-01).
+ * The keyboard hint a picker row shows while highlighted — hand-rolled in
+ * five files before this (2026-09-01), and drawn as its own thing until
+ * 2026-09-05, when it became the `Kbd` chip every other key hint uses. A
+ * picker row and a menu row sit in the same menu; they named the same key
+ * two ways.
+ *
+ * `target` is what pressing it gives you, when that is worth saying — the
+ * topic picker's "↩ Enter #topic". It sits after the chip, in the picker's
+ * own 9px voice, because it is not a key.
+ *
+ * Katerina, 2026-09-05, told the measurement and asked again: the chip keeps
+ * the `↩` character. It is not in Geist Mono — the browser borrows it, so it
+ * advances 8.63px where the font's own characters advance 6 — and that is a
+ * knowing trade for the glyph, not an oversight. If the width ever has to go,
+ * Tabler's IconCornerDownLeft draws the same shape.
  */
-export function EnterHint({ label = 'Enter' }: { label?: string }) {
+export function EnterHint({ target }: { target?: string }) {
   return (
-    <span className="flex shrink-0 items-center gap-2 text-text-muted">
-      <span className="text-[12px] leading-[120%]">↩</span>
-      <span className="text-[9px] font-medium leading-[115%] signal:font-mono signal:text-[9.5px] signal:tracking-[0.04em]">{label}</span>
+    <span className="flex shrink-0 items-center gap-1.5 text-text-muted">
+      <Kbd>↩ Enter</Kbd>
+      {target && (
+        <span className="text-[9px] font-medium leading-[115%] signal:font-mono signal:text-[9.5px] signal:tracking-[0.04em]">{target}</span>
+      )}
     </span>
   )
 }

package/src/MenuItem.mdx

@@ -39,7 +39,7 @@ import { IconPencil } from '@tabler/icons-react'
 <MenuItem
   label="Rename"
   leading={<IconPencil size={16} stroke={1.5} className="text-text-secondary" />}
-  shortcut="⌘ R"
+  shortcut="Ctrl+R"
   onClick={rename}
 />
 ```

package/src/MenuItem.stories.tsx

@@ -40,7 +40,7 @@ export const WithAnIcon: Story = {
 }
 
 export const WithAShortcut: Story = {
-  args: { label: 'Copy link', leading: <IconCopy size={16} stroke={1.5} className="text-text-secondary" />, shortcut: '⌘ C' },
+  args: { label: 'Copy link', leading: <IconCopy size={16} stroke={1.5} className="text-text-secondary" />, shortcut: 'Ctrl+C' },
 }
 
 /** The row opens another menu. */
@@ -54,7 +54,7 @@ export const APerson: Story = {
     label: 'Ana Duarte',
     description: 'Product designer',
     leading: <Avatar name="Ana Duarte" size={32} />,
-    trailing: <span className="text-[12px] leading-[120%] text-text-muted">↩</span>,
+    trailing: <EnterHint />,
   },
 }
 
@@ -74,10 +74,10 @@ export const AllVariants: Story = {
     <>
       <MenuItem label="Bare" onClick={() => {}} />
       <MenuItem label="With an icon" leading={<IconPin size={16} stroke={1.5} className="text-text-secondary" />} onClick={() => {}} />
-      <MenuItem label="With a shortcut" shortcut="⌘ K" onClick={() => {}} />
-      <MenuItem label="Icon and shortcut" leading={<IconCopy size={16} stroke={1.5} className="text-text-secondary" />} shortcut="⌘ C" onClick={() => {}} />
+      <MenuItem label="With a shortcut" shortcut="Ctrl+K" onClick={() => {}} />
+      <MenuItem label="Icon and shortcut" leading={<IconCopy size={16} stroke={1.5} className="text-text-secondary" />} shortcut="Ctrl+C" onClick={() => {}} />
       <MenuItem label="Opens another menu" submenu onClick={() => {}} />
-      <MenuItem label="Ana Duarte" description="Product designer" leading={<Avatar name="Ana Duarte" size={32} />} trailing={<span className="text-[12px] leading-[120%] text-text-muted">↩</span>} onClick={() => {}} />
+      <MenuItem label="Ana Duarte" description="Product designer" leading={<Avatar name="Ana Duarte" size={32} />} trailing={<EnterHint />} onClick={() => {}} />
       <MenuItem label="The chosen value" selected onClick={() => {}} />
       <MenuItem label="Destructive" destructive leading={<IconTrash size={16} stroke={1.5} className="text-error-default" />} onClick={() => {}} />
       <MenuItem label="A very long label that runs out of room and truncates" onClick={() => {}} />

package/src/SearchInput.mdx

@@ -15,7 +15,7 @@ optional keyboard hint at the right edge.
 - Filtering a list, live, above the list it filters.
 - As a **launcher affordance**: keep the input `pointer-events-none` and
   open your command surface from a click on the surround — the component
-  is the same either way, and `shortcut` shows the way in ("⌘ K").
+  is the same either way, and `shortcut` shows the way in ("Ctrl+K").
 
 ## When not
 
@@ -27,7 +27,7 @@ optional keyboard hint at the right edge.
 ```tsx
 import { SearchInput } from '@estiva-app/ui'
 
-<SearchInput value={query} onChange={(e) => setQuery(e.target.value)} shortcut="⌘ K" />
+<SearchInput value={query} onChange={(e) => setQuery(e.target.value)} shortcut="Ctrl+K" />
 ```
 
 - The default placeholder is "Search…" — override it with your own.

package/src/SearchInput.stories.tsx

@@ -15,10 +15,10 @@ export const Default: Story = {}
 
 /** The keyboard hint at the right edge. */
 export const WithShortcut: Story = {
-  args: { shortcut: '⌘ K' },
+  args: { shortcut: 'Ctrl+K' },
 }
 
 /** The default placeholder says only "Search…" — the app names what is searched. */
 export const OwnPlaceholder: Story = {
-  args: { placeholder: 'Search documents…', shortcut: '⌘ K' },
+  args: { placeholder: 'Search documents…', shortcut: 'Ctrl+K' },
 }

package/src/SearchInput.tsx

@@ -1,5 +1,6 @@
 import { type InputHTMLAttributes } from 'react'
 import { cn } from './cn'
+import { Kbd } from './Kbd'
 
 /**
  * Peek's SearchInput (2026-09-01), verbatim: an inset field with a hairline
@@ -15,7 +16,7 @@ import { cn } from './cn'
  * command launcher. The component is the same either way.
  */
 export interface SearchInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className'> {
-  /** A keyboard hint drawn at the right edge, e.g. "⌘ K". */
+  /** A keyboard hint drawn at the right edge, e.g. "Ctrl+K". */
   shortcut?: string
   className?: string
 }
@@ -35,11 +36,7 @@ export function SearchInput({ shortcut, className, placeholder = 'Search…', ..
         placeholder={placeholder}
         {...props}
       />
-      {shortcut && (
-        <div className="flex items-center justify-center px-1 py-px rounded-sm bg-bg-inset border border-border-strong shrink-0 signal:bg-[rgba(255,255,255,.05)] signal:border-b-2">
-          <span className="text-caption text-text-secondary whitespace-nowrap signal:font-mono signal:text-[10px]">{shortcut}</span>
-        </div>
-      )}
+      {shortcut && <Kbd>{shortcut}</Kbd>}
     </div>
   )
 }

package/src/Select.fit.test.ts

@@ -1,6 +1,10 @@
 import { describe, expect, it } from 'vitest'
 import { fitMenu } from './Select'
 
+/** Select's calls carry its option-list cap (the old max-h-72); the cap is
+ *  the caller's now, so these pin it alongside the geometry. */
+const fitSelect = (args: Omit<Parameters<typeof fitMenu>[0], 'cap'>) => fitMenu({ ...args, cap: 288 })
+
 /**
  * The Select menu's viewport geometry (Katerina, 2026-09-01): the files-panel
  * picker was cut off at the right edge, its tail ran past the bottom of the
@@ -11,7 +15,7 @@ const viewport = { width: 1280, height: 800 }
 
 describe('fitMenu', () => {
   it('leaves a comfortable menu exactly where the trigger put it', () => {
-    const fit = fitMenu({
+    const fit = fitSelect({
       anchor: { left: 100, top: 200, bottom: 232 },
       menu: { width: 240, contentHeight: 180 },
       viewport,
@@ -23,7 +27,7 @@ describe('fitMenu', () => {
   })
 
   it('clamps a menu that would run off the right edge (the files-panel cut)', () => {
-    const fit = fitMenu({
+    const fit = fitSelect({
       anchor: { left: 1200, top: 200, bottom: 232 },
       menu: { width: 340, contentHeight: 180 },
       viewport,
@@ -33,7 +37,7 @@ describe('fitMenu', () => {
   })
 
   it('never pushes a menu past the LEFT edge either', () => {
-    const fit = fitMenu({
+    const fit = fitSelect({
       anchor: { left: -20, top: 200, bottom: 232 },
       menu: { width: 240, contentHeight: 180 },
       viewport,
@@ -42,7 +46,7 @@ describe('fitMenu', () => {
   })
 
   it('caps height to the room below, so the last option is never off screen', () => {
-    const fit = fitMenu({
+    const fit = fitSelect({
       anchor: { left: 100, top: 560, bottom: 592 },
       menu: { width: 240, contentHeight: 200 },
       viewport,
@@ -56,7 +60,7 @@ describe('fitMenu', () => {
   })
 
   it('opens upward when the room above is better (the low trigger)', () => {
-    const fit = fitMenu({
+    const fit = fitSelect({
       anchor: { left: 100, top: 700, bottom: 732 },
       menu: { width: 240, contentHeight: 400 },
       viewport,
@@ -67,7 +71,7 @@ describe('fitMenu', () => {
   })
 
   it('stays below when the room below is bad but the room above is worse', () => {
-    const fit = fitMenu({
+    const fit = fitSelect({
       anchor: { left: 100, top: 60, bottom: 92 },
       menu: { width: 240, contentHeight: 400 },
       viewport,
@@ -78,7 +82,7 @@ describe('fitMenu', () => {
   })
 
   it('keeps a 120px floor in a cramped corner — scrollable beats invisible', () => {
-    const fit = fitMenu({
+    const fit = fitSelect({
       anchor: { left: 100, top: 740, bottom: 772 },
       menu: { width: 240, contentHeight: 400 },
       viewport: { width: 1280, height: 800 },
@@ -87,7 +91,7 @@ describe('fitMenu', () => {
   })
 
   it('caps a long list at 288 with plenty of room — the old max-h-72', () => {
-    const fit = fitMenu({
+    const fit = fitSelect({
       anchor: { left: 100, top: 100, bottom: 132 },
       menu: { width: 240, contentHeight: 900 },
       viewport,

package/src/Select.tsx

@@ -38,38 +38,11 @@ export interface SelectProps {
   className?: string
 }
 
-/**
- * Where a menu of this size goes, given its anchor and the viewport — pure,
- * so the geometry is testable without a browser.
- *
- * Left is clamped inside the viewport with an 8px margin. Height is capped
- * at 288px (the old `max-h-72`) but never taller than the space it opens
- * into; when the room below the anchor is smaller than both the content and
- * the room above, the menu opens UPWARD (anchored to the trigger's top via
- * `bottom`). The 120px floor keeps a menu usable even in a cramped corner —
- * scrollable beats invisible.
- */
-export function fitMenu({
-  anchor,
-  menu,
-  viewport,
-}: {
-  anchor: { left: number; top: number; bottom: number }
-  menu: { width: number; contentHeight: number }
-  viewport: { width: number; height: number }
-}): { left: number; top?: number; bottom?: number; maxHeight: number } {
-  const MARGIN = 8
-  const GAP = 4
-  const CAP = 288
-  const left = Math.max(MARGIN, Math.min(anchor.left, viewport.width - menu.width - MARGIN))
-  const below = viewport.height - anchor.bottom - GAP - MARGIN
-  const above = anchor.top - GAP - MARGIN
-  const openUp = below < Math.min(menu.contentHeight, CAP) && above > below
-  const maxHeight = Math.max(Math.min(CAP, openUp ? above : below), 120)
-  return openUp
-    ? { left, bottom: viewport.height - anchor.top + GAP, maxHeight }
-    : { left, top: anchor.bottom + GAP, maxHeight }
-}
+// The geometry lives in fit.ts now (2026-09-03) — shared with the Menu
+// shell, so a cut-off surface is fixed once. Re-exported because this is
+// where it grew up and its test still names it by this address.
+import { fitMenu } from './fit'
+export { fitMenu }
 
 export function Select({ value, onChange, options, size = 'default', ariaLabel, placeholder = 'Select…', disabled, className }: SelectProps) {
   const id = useId()
@@ -119,6 +92,9 @@ export function Select({ value, onChange, options, size = 'default', ariaLabel,
         anchor: { left: rect.left, top: rect.top, bottom: rect.bottom },
         menu: { width: menuRef.current.offsetWidth, contentHeight: menuRef.current.scrollHeight },
         viewport: { width: window.innerWidth, height: window.innerHeight },
+        // The option list keeps its classic height (the old max-h-72); a menu
+        // panel passes no cap and stands as tall as the room it opens into.
+        cap: 288,
       }),
     )
   }, [rect, options.length])