@estiva-app/ui 0.3.0 → 0.5.0

package/src/Menu.tsx

@@ -1,7 +1,8 @@
-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 { clampBox, fitMenu, fitSubmenu } from './fit'
 import { SectionLabel } from './SectionLabel'
 
 /**
@@ -21,21 +22,68 @@ 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)
+
+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 +100,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 }}>
+      <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',
+          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}
+      </div>
+    </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(
+          <div
+            ref={panelRef}
+            role="menu"
+            data-interactive
+            className={cn('fixed z-50 flex w-[160px] flex-col rounded-lg border border-border-default bg-bg-elevated p-2 shadow-lg', className)}
+            style={placed ?? { left: 0, top: 0, visibility: 'hidden' }}
+            onMouseEnter={enter}
+            onMouseLeave={leave}
+          >
+            {children}
+          </div>,
+          document.body,
+        )}
     </div>
   )
-  return position ? createPortal(node, document.body) : node
 }
 
 export interface MenuItemProps extends Omit<ComponentPropsWithRef<'button'>, 'children'> {

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])

package/src/TextInput.tsx

@@ -1,5 +1,6 @@
 import { forwardRef, type InputHTMLAttributes } from 'react'
 import { cn } from './cn'
+import { useFieldControlId } from './Field'
 
 /**
  * Peek's TextInput (2026-08-28): the inset field with a 8px radius, 14px
@@ -10,10 +11,13 @@ import { cn } from './cn'
  */
 export type TextInputProps = InputHTMLAttributes<HTMLInputElement>
 
-export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(function TextInput({ className, type = 'text', ...props }, ref) {
+export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(function TextInput({ className, type = 'text', id, ...props }, ref) {
+  // A surrounding Field names this control (SHA-17); an explicit id still wins.
+  const controlId = useFieldControlId(id)
   return (
     <input
       ref={ref}
+      id={controlId}
       type={type}
       className={cn(
         'bg-bg-inset border border-border-default focus:border-border-focus rounded-lg px-3 py-2',

package/src/Textarea.tsx

@@ -1,5 +1,6 @@
 import { forwardRef, type TextareaHTMLAttributes } from 'react'
 import { cn } from './cn'
+import { useFieldControlId } from './Field'
 
 /**
  * Peek's Textarea (2026-08-28), verbatim: TextInput's look on a textarea
@@ -7,10 +8,13 @@ import { cn } from './cn'
  */
 export type TextareaProps = TextareaHTMLAttributes<HTMLTextAreaElement>
 
-export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function Textarea({ className, ...props }, ref) {
+export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function Textarea({ className, id, ...props }, ref) {
+  // A surrounding Field names this control (SHA-17); an explicit id still wins.
+  const controlId = useFieldControlId(id)
   return (
     <textarea
       ref={ref}
+      id={controlId}
       className={cn(
         'bg-bg-inset border border-border-default focus:border-border-focus rounded-lg px-3 py-2',
         'text-[14px] leading-[1.4] font-normal text-text-primary placeholder:text-text-muted',

package/src/Tooltip.tsx

@@ -47,7 +47,13 @@ export function WithTooltip({ label, placement = 'top', wrapperClassName, childr
     if (!trigger || !tip) return
     const triggerRect = trigger.getBoundingClientRect()
     const tipRect = tip.getBoundingClientRect()
-    const top = placement === 'bottom' ? triggerRect.bottom + GAP : triggerRect.top - tipRect.height - GAP
+    let top = placement === 'bottom' ? triggerRect.bottom + GAP : triggerRect.top - tipRect.height - GAP
+    // The vertical axis flips and clamps like the horizontal one always has
+    // (2026-09-03): a `top` tooltip on a control near the viewport's top edge
+    // was the one floating surface left that could leave the screen.
+    if (placement === 'top' && top < VIEWPORT_PAD) top = triggerRect.bottom + GAP
+    else if (placement === 'bottom' && top + tipRect.height > window.innerHeight - VIEWPORT_PAD) top = triggerRect.top - tipRect.height - GAP
+    top = Math.max(VIEWPORT_PAD, Math.min(top, window.innerHeight - tipRect.height - VIEWPORT_PAD))
     let left = triggerRect.left + triggerRect.width / 2 - tipRect.width / 2
     left = Math.max(VIEWPORT_PAD, Math.min(left, window.innerWidth - tipRect.width - VIEWPORT_PAD))
     setStyle({ position: 'fixed', top, left, zIndex: 9999, pointerEvents: 'none', visibility: 'visible' })

package/src/fit.ts

@@ -0,0 +1,94 @@
+/**
+ * Viewport geometry for everything that floats — pure, so the decisions are
+ * testable without a browser.
+ *
+ * One module, because the failure it prevents keeps recurring one surface at
+ * a time: the files-panel picker was cut off at the right edge (fixed in
+ * Select, 2026-09-01), then a reply menu's highlight submenu was cut off the
+ * same way and the identity menu vanished under a z-indexed header
+ * (2026-09-03). A menu that hand-rolls its own geometry is a menu waiting to
+ * be the next screenshot; the shell calls these instead.
+ */
+
+const MARGIN = 8
+const GAP = 4
+
+/**
+ * Where a menu of this size goes, given its anchor and the viewport.
+ *
+ * Left is clamped inside the viewport with an 8px margin. Height is capped
+ * at `cap` — Select's option list keeps the old `max-h-72` (288), a menu
+ * panel passes none and uses all the room it opens into, so it scrolls only
+ * when the screen truly has no space (the identity panel got Select's cap
+ * by accident and grew a scrollbar at full height, 2026-09-03) — but never
+ * taller than that room; 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,
+  cap = Number.POSITIVE_INFINITY,
+}: {
+  anchor: { left: number; top: number; bottom: number }
+  menu: { width: number; contentHeight: number }
+  viewport: { width: number; height: number }
+  /** Tallest the menu may stand even with room to spare. Absent: the room is the only limit. */
+  cap?: number
+}): { left: number; top?: number; bottom?: number; maxHeight: number } {
+  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 }
+}
+
+/**
+ * Keep a box a caller has already placed fully on screen.
+ *
+ * For the menus whose caller measured a rect and chose the corner itself
+ * (`position`): the caller's math stays authoritative, but its result can no
+ * longer land off screen — it is slid inside the viewport, never flipped,
+ * and capped to the viewport's height with the same 120px floor as fitMenu.
+ */
+export function clampBox({
+  box,
+  viewport,
+}: {
+  box: { left: number; top: number; width: number; height: number }
+  viewport: { width: number; height: number }
+}): { left: number; top: number; maxHeight: number } {
+  const left = Math.max(MARGIN, Math.min(box.left, viewport.width - box.width - MARGIN))
+  const maxHeight = Math.max(Math.min(box.height, viewport.height - 2 * MARGIN), 120)
+  const top = Math.max(MARGIN, Math.min(box.top, viewport.height - maxHeight - MARGIN))
+  return { left, top, maxHeight }
+}
+
+/**
+ * Where a submenu goes, given its trigger row and the viewport.
+ *
+ * To the RIGHT of the row when it fits, flipped to the LEFT when it does not
+ * — the measured flip two menus hand-rolled and one of them broke (the copy
+ * dropped the ref its measurement read, so it measured nothing and always
+ * opened rightward, off the screen). Top-aligned with the row, slid up when
+ * the tail would run past the bottom edge.
+ */
+export function fitSubmenu({
+  row,
+  panel,
+  viewport,
+}: {
+  row: { left: number; right: number; top: number }
+  panel: { width: number; height: number }
+  viewport: { width: number; height: number }
+}): { left: number; top: number } {
+  const fitsRight = row.right + GAP + panel.width <= viewport.width - MARGIN
+  const left = Math.max(MARGIN, fitsRight ? row.right + GAP : row.left - GAP - panel.width)
+  const top = Math.max(MARGIN, Math.min(row.top, viewport.height - panel.height - MARGIN))
+  return { left, top }
+}

package/src/index.ts

@@ -20,7 +20,7 @@ export { ChipInput, InputChip, type ChipInputOption, type ChipInputProps, type I
 export { IconButton, type IconButtonProps, type IconButtonVariant } from './IconButton'
 export { IdentityMenu, IdentityPanel, type Identity, type IdentityMenuProps, type IdentityPanelProps } from './IdentityMenu'
 export { Tooltip, WithTooltip, type TooltipProps, type WithTooltipProps } from './Tooltip'
-export { Field, type FieldProps } from './Field'
+export { Field, useFieldControlId, type FieldProps } from './Field'
 export { Select, type SelectOption, type SelectProps } from './Select'
 export { TextInput, type TextInputProps } from './TextInput'
 export { Textarea, type TextareaProps } from './Textarea'
@@ -31,7 +31,8 @@ export { EditableText, type EditableTextProps } from './EditableText'
 export { EmptyState, type EmptyStateProps } from './EmptyState'
 export { SkeletonBar, SkeletonList, SkeletonRow } from './Skeleton'
 export { Breadcrumb, type BreadcrumbProps, type Crumb } from './Breadcrumb'
-export { EnterHint, Menu, MenuItem, MenuRow, MenuSection, type MenuItemProps, type MenuProps } from './Menu'
+export { EnterHint, Menu, MenuItem, MenuRow, MenuSection, MenuSub, type MenuItemProps, type MenuProps, type MenuSubProps } from './Menu'
+export { clampBox, fitMenu, fitSubmenu } from './fit'
 export { NavItem, type NavItemProps } from './NavItem'
 export { Person, type PersonProps } from './Person'
 export { Rail, type RailProps } from './Rail'