@estiva-app/ui 0.4.0 → 0.5.0

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/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

@@ -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'