@estiva-app/ui 0.9.0 → 0.10.1

package/src/Tooltip.test.tsx

@@ -0,0 +1,195 @@
+// @vitest-environment jsdom
+/**
+ * What the Tooltip page claims, pinned.
+ *
+ * The page said "it shows on hover only — there is no focus or touch trigger"
+ * for as long as the component was hand-written, and that sentence was the
+ * reason `disabledReason` could not be read without a mouse. Stage 4 put it on
+ * Base UI's `Tooltip`; these are the tests that let the sentence be deleted.
+ *
+ * The motion (D26) is not here: jsdom runs no transitions, so it is proved in
+ * a browser instead and the numbers live in the page.
+ */
+import { afterEach, describe, expect, it } from 'vitest'
+import { cleanup, render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { IconSquareRounded } from '@tabler/icons-react'
+import { Tooltip, TooltipProvider, WithTooltip } from './Tooltip'
+import { Button } from './Button'
+import { IconButton } from './IconButton'
+
+afterEach(cleanup)
+
+describe('Tooltip, the surface', () => {
+  it('is a tooltip, and draws the shortcut after the label', () => {
+    render(<Tooltip label="Bold" shortcut="Cmd+B" />)
+    const tip = screen.getByRole('tooltip')
+    expect(tip.textContent).toBe('BoldCmd+B')
+  })
+
+  it('takes a caller class without losing its own', () => {
+    render(<Tooltip label="Bold" className="w-40" />)
+    const tip = screen.getByRole('tooltip')
+    expect(tip.className).toContain('w-40')
+    expect(tip.className).toContain('bg-bg-elevated')
+  })
+})
+
+describe('WithTooltip', () => {
+  it('wraps its child in the inline-flex wrapper, and the child is untouched', () => {
+    const { container } = render(
+      <WithTooltip label="Add to starred">
+        <button type="button">Star</button>
+      </WithTooltip>,
+    )
+    const wrapper = container.firstElementChild as HTMLElement
+    expect(wrapper.tagName).toBe('DIV')
+    expect(wrapper.className).toContain('inline-flex')
+    expect(wrapper.className).toContain('shrink-0')
+    expect(wrapper.firstElementChild?.tagName).toBe('BUTTON')
+  })
+
+  it('takes wrapperClassName, which is what keeps a truncating label truncating', () => {
+    const { container } = render(
+      <WithTooltip label="A long name" wrapperClassName="min-w-0 shrink">
+        <span className="truncate">A long name</span>
+      </WithTooltip>,
+    )
+    expect((container.firstElementChild as HTMLElement).className).toContain('min-w-0')
+  })
+
+  it('opens on hover and closes when the pointer leaves', async () => {
+    const user = userEvent.setup()
+    render(
+      <WithTooltip label="Add to starred">
+        <button type="button">Star</button>
+      </WithTooltip>,
+    )
+    expect(screen.queryByRole('tooltip')).toBeNull()
+    await user.hover(screen.getByRole('button', { name: 'Star' }))
+    // The 300ms wait is D23; it was instant before.
+    expect((await screen.findByRole('tooltip')).textContent).toBe('Add to starred')
+    await user.unhover(screen.getByRole('button', { name: 'Star' }))
+    await waitFor(() => expect(screen.queryByRole('tooltip')).toBeNull())
+  })
+
+  it('closes on Escape while it is up', async () => {
+    const user = userEvent.setup()
+    render(
+      <WithTooltip label="Add to starred">
+        <button type="button">Star</button>
+      </WithTooltip>,
+    )
+    await user.tab()
+    expect(await screen.findByRole('tooltip')).toBeTruthy()
+    await user.keyboard('{Escape}')
+    await waitFor(() => expect(screen.queryByRole('tooltip')).toBeNull())
+  })
+
+  it('a click on the trigger closes it — the tooltip has said its piece', async () => {
+    const user = userEvent.setup()
+    render(
+      <WithTooltip label="Add to starred">
+        <button type="button">Star</button>
+      </WithTooltip>,
+    )
+    const star = screen.getByRole('button', { name: 'Star' })
+    await user.hover(star)
+    expect(await screen.findByRole('tooltip')).toBeTruthy()
+    await user.click(star)
+    await waitFor(() => expect(screen.queryByRole('tooltip')).toBeNull())
+  })
+
+  /** The gap the page wrote down about itself, and the reason Tooltip went first. */
+  it('opens when the control inside it is reached by keyboard', async () => {
+    const user = userEvent.setup()
+    render(
+      <WithTooltip label="Add to starred">
+        <button type="button">Star</button>
+      </WithTooltip>,
+    )
+    await user.tab()
+    expect(document.activeElement).toBe(screen.getByRole('button', { name: 'Star' }))
+    expect((await screen.findByRole('tooltip')).textContent).toBe('Add to starred')
+  })
+
+  it('closes again when focus moves on', async () => {
+    const user = userEvent.setup()
+    render(
+      <>
+        <WithTooltip label="Add to starred">
+          <button type="button">Star</button>
+        </WithTooltip>
+        <button type="button">Next</button>
+      </>,
+    )
+    await user.tab()
+    expect(await screen.findByRole('tooltip')).toBeTruthy()
+    await user.tab()
+    expect(document.activeElement).toBe(screen.getByRole('button', { name: 'Next' }))
+    await waitFor(() => expect(screen.queryByRole('tooltip')).toBeNull())
+  })
+})
+
+describe('a control that IS its own trigger', () => {
+  /**
+   * The finding stage 3 ended on: an `IconButton` carrying a tooltip returned
+   * `WithTooltip`'s wrapper `<div>` as its root, so a `Dialog.Close` composed
+   * onto the wrapper instead of the button. The root is the button now.
+   */
+  it('IconButton with a tooltip has the button as its root, not a wrapper', () => {
+    const { container } = render(
+      <IconButton aria-label="Settings" tooltip="Settings">
+        <IconSquareRounded size={16} stroke={1.5} />
+      </IconButton>,
+    )
+    const root = container.firstElementChild as HTMLElement
+    expect(root.tagName).toBe('BUTTON')
+    expect(root).toBe(screen.getByRole('button', { name: 'Settings' }))
+  })
+
+  it('Button with a disabledReason has the button as its root too', () => {
+    const { container } = render(<Button disabledReason="Sign in first">Add</Button>)
+    expect((container.firstElementChild as HTMLElement).tagName).toBe('BUTTON')
+  })
+
+  /** Disabled-with-a-reason must still be hoverable, or the reason never shows:
+   *  `pointer-events-none` is dropped in that one case and Base UI swallows the
+   *  click instead. */
+  it('a disabled-with-a-reason button keeps its pointer events, and its click does nothing', async () => {
+    const user = userEvent.setup()
+    let clicks = 0
+    render(
+      <Button disabledReason="Sign in first" onClick={() => { clicks += 1 }}>
+        Add
+      </Button>,
+    )
+    const button = screen.getByRole('button', { name: 'Add' })
+    expect(button.className).not.toContain('pointer-events-none')
+    await user.click(button)
+    expect(clicks).toBe(0)
+  })
+
+  it('a plainly disabled button keeps pointer-events-none', () => {
+    render(<Button disabled>Add</Button>)
+    expect(screen.getByRole('button', { name: 'Add' }).className).toContain('pointer-events-none')
+  })
+})
+
+describe('TooltipProvider', () => {
+  /** The grouping itself is a matter of timers in a real browser; what jsdom
+   *  can say is that a tooltip under a provider behaves the same as one
+   *  without, which is the promise the page makes to an app that forgets it. */
+  it('changes nothing about whether a tooltip opens', async () => {
+    const user = userEvent.setup()
+    render(
+      <TooltipProvider>
+        <WithTooltip label="Add to starred">
+          <button type="button">Star</button>
+        </WithTooltip>
+      </TooltipProvider>,
+    )
+    await user.hover(screen.getByRole('button', { name: 'Star' }))
+    expect((await screen.findByRole('tooltip')).textContent).toBe('Add to starred')
+  })
+})

package/src/Tooltip.tsx

@@ -1,29 +1,72 @@
-import { useCallback, useLayoutEffect, useRef, useState, type CSSProperties, type ReactNode } from 'react'
-import { createPortal } from 'react-dom'
+import type { ComponentPropsWithRef, ReactElement, ReactNode } from 'react'
+import { Tooltip as BaseTooltip } from '@base-ui/react/tooltip'
 import { cn } from './cn'
 import { Kbd } from './Kbd'
 
 /**
- * Peek's Tooltip and WithTooltip (2026-08-28), verbatim, in one file.
+ * Peek's Tooltip and WithTooltip (2026-08-28) — the same 30px elevated pill,
+ * on Base UI's `Tooltip` since stage 4 of the migration (2026-09-07).
  *
- * `Tooltip` is the surface: a 30px elevated pill with a caption. `WithTooltip`
- * wraps a trigger and portals the surface above or below it on hover, fixed
- * to the viewport and kept 8px inside it. The wrapper is `inline-flex` and
- * shrinks nothing — wrap a control, never a block (a form inside it
- * collapses to its content width; Ship learnt that).
+ * **What that fixed, and this page used to say it did not: it shows on
+ * keyboard focus.** `WithTooltip` was hover-only, which meant the reason a
+ * disabled control gives — the whole point of `disabledReason` — could not be
+ * read without a mouse. Base UI opens it on `:focus-visible` too, so tabbing
+ * to a control says what it is.
+ *
+ * Gone with it: the `createPortal`, the `getBoundingClientRect` arithmetic and
+ * the two clamps this file kept against the viewport's edges. Floating UI
+ * places and flips it now.
+ */
+
+/**
+ * How long the pointer must rest on a trigger before the tooltip appears
+ * (Katerina, D23, 2026-09-07). It was instant, which flashed a pill per
+ * button when sweeping a toolbar; 300ms is long enough to be a decision and
+ * short enough not to feel like waiting.
+ *
+ * Inside a `TooltipProvider` the *neighbours* then open instantly, so a row
+ * of icon buttons pauses once and reads freely after that.
+ */
+const OPEN_DELAY = 300
+
+export interface TooltipProviderProps {
+  /** Before the first tooltip in the group opens. Default 300ms (D23). */
+  delay?: number
+  /** Before one closes. Default: immediately, as it always has. */
+  closeDelay?: number
+  /** How long after one closes its neighbours still open instantly. */
+  timeout?: number
+  children: ReactNode
+}
+
+/**
+ * Mount once at the top of an app: it makes every tooltip below it share one
+ * delay, so the second and third open instantly while the group is warm.
+ *
+ * Without it each tooltip still waits its own 300ms — nothing breaks, the row
+ * simply pauses on every button instead of once.
  */
-export interface TooltipProps {
+export function TooltipProvider({ delay = OPEN_DELAY, closeDelay, timeout, children }: TooltipProviderProps) {
+  return (
+    <BaseTooltip.Provider delay={delay} closeDelay={closeDelay} timeout={timeout}>
+      {children}
+    </BaseTooltip.Provider>
+  )
+}
+
+/** `ComponentPropsWithRef` because the pill is what `Tooltip.Popup` renders —
+ *  Base UI merges its own props and ref into this element, so both must land. */
+export interface TooltipProps extends Omit<ComponentPropsWithRef<'div'>, 'children'> {
   label: string
   /** The key that does the same thing, drawn as the `Kbd` chip after the label.
    *  Pass it already formatted for the platform — this renders, it does not
    *  decide whether the modifier is a glyph or a word. */
   shortcut?: string
-  className?: string
 }
 
-export function Tooltip({ label, shortcut, className }: TooltipProps) {
+export function Tooltip({ label, shortcut, className, ...props }: TooltipProps) {
   return (
-    <div role="tooltip" className={cn('bg-bg-elevated border border-border-default rounded-lg h-[30px] flex items-center justify-center gap-1.5 px-2 shadow-lg', className)}>
+    <div role="tooltip" className={cn('bg-bg-elevated border border-border-default rounded-lg h-[30px] flex items-center justify-center gap-1.5 px-2 shadow-lg', className)} {...props}>
       <span className="text-caption text-text-primary whitespace-nowrap">{label}</span>
       {shortcut && <Kbd>{shortcut}</Kbd>}
     </div>
@@ -40,47 +83,106 @@ export interface WithTooltipProps {
   children: ReactNode
 }
 
+/** The 6px between the trigger and the pill, and the 8px it keeps clear of
+ *  every viewport edge — the two numbers the deleted arithmetic used. */
 const GAP = 6
 const VIEWPORT_PAD = 8
 
-export function WithTooltip({ label, shortcut, placement = 'top', wrapperClassName, children }: WithTooltipProps) {
-  const [show, setShow] = useState(false)
-  const ref = useRef<HTMLDivElement>(null)
-  const tooltipRef = useRef<HTMLDivElement>(null)
-  const [style, setStyle] = useState<CSSProperties>({ position: 'fixed', zIndex: 9999, pointerEvents: 'none', visibility: 'hidden' })
-
-  const reposition = useCallback(() => {
-    const trigger = ref.current
-    const tip = tooltipRef.current
-    if (!trigger || !tip) return
-    const triggerRect = trigger.getBoundingClientRect()
-    const tipRect = tip.getBoundingClientRect()
-    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' })
-  }, [placement])
+/**
+ * The portalled surface: everything after the trigger, written once because
+ * `WithTooltip` and the two buttons all need it.
+ *
+ * `pointer-events-none` and `disableHoverablePopup` together keep the pill
+ * untouchable, as it has always been — a tooltip is not somewhere you can put
+ * the pointer, and anything you must reach belongs in a Menu or a dialog.
+ */
+function TooltipSurface({ label, shortcut, placement }: { label: string; shortcut?: string; placement: 'top' | 'bottom' }) {
+  return (
+    <BaseTooltip.Portal>
+      <BaseTooltip.Positioner
+        side={placement}
+        align="center"
+        sideOffset={GAP}
+        collisionPadding={VIEWPORT_PAD}
+        // `fixed`, as the hand-written one was: the pill is placed against the
+        // viewport, so a scroll container between it and the body cannot drag
+        // it out of place.
+        positionMethod="fixed"
+        className="pointer-events-none z-[9999]"
+      >
+        <BaseTooltip.Popup
+          render={
+            <Tooltip
+              label={label}
+              shortcut={shortcut}
+              /*
+               * The motion (Katerina, D26, 2026-09-07). It had none — it was
+               * mounted and instantly there — and Base UI is what makes one
+               * possible: `data-starting-style` on the opening frame,
+               * `data-ending-style` while it closes, and the popup is kept in
+               * the DOM until the transition finishes, which is the half a
+               * hand-written tooltip cannot do.
+               *
+               * It fades and travels 4px away from the trigger: from below
+               * when it stands above the control (`data-side=top`), from above
+               * when it hangs beneath it. 120ms in, 80ms out.
+               *
+               * `data-instant` is Base UI saying skip it — the pointer moved
+               * to a neighbouring trigger inside the warm delay group, or the
+               * tooltip was dismissed. Sweeping a toolbar therefore moves the
+               * pill without re-animating it, which is the whole point of the
+               * shared delay (D23).
+               */
+              className={cn(
+                'transition-[opacity,transform] duration-[120ms] ease-out motion-reduce:transition-none',
+                'data-[ending-style]:duration-[80ms] data-[instant]:duration-0',
+                'data-[starting-style]:opacity-0 data-[ending-style]:opacity-0',
+                'data-[side=top]:data-[starting-style]:translate-y-[4px] data-[side=top]:data-[ending-style]:translate-y-[4px]',
+                'data-[side=bottom]:data-[starting-style]:-translate-y-[4px] data-[side=bottom]:data-[ending-style]:-translate-y-[4px]',
+              )}
+            />
+          }
+        />
+      </BaseTooltip.Positioner>
+    </BaseTooltip.Portal>
+  )
+}
 
-  useLayoutEffect(() => {
-    if (show) reposition()
-  }, [show, reposition])
+export function WithTooltip({ label, shortcut, placement = 'top', wrapperClassName, children }: WithTooltipProps) {
+  return (
+    <BaseTooltip.Root disableHoverablePopup>
+      {/* The wrapper stays the trigger: `WithTooltip` wraps whatever it is
+          given — a raw button, a span, a Chip — and only an element of its own
+          can carry the handlers for all of them. A control that IS the trigger
+          (Button, IconButton) composes the part onto itself instead, which is
+          what lets a `Dialog.Close` or a `Menu.Trigger` be one of those. */}
+      <BaseTooltip.Trigger delay={OPEN_DELAY} render={<div className={cn('inline-flex shrink-0', wrapperClassName)} />}>
+        {children}
+      </BaseTooltip.Trigger>
+      <TooltipSurface label={label} shortcut={shortcut} placement={placement} />
+    </BaseTooltip.Root>
+  )
+}
 
+/**
+ * The tooltip a control wears itself, rather than through a wrapper.
+ *
+ * `Button` and `IconButton` call this: the Base UI button element becomes the
+ * `Tooltip.Trigger`, so the component's root stays the `<button>`. That is
+ * what stage 3 ran into and could not fix — an `IconButton` with a tooltip
+ * returned the wrapper `<div>`, so a `Dialog.Close` composed onto the wrapper
+ * and the ✕ could never be the part.
+ *
+ * Internal: the two buttons' `tooltip` / `disabledReason` props are the API.
+ */
+export function TooltipTrigger({ label, shortcut, placement = 'top', children }: { label: string; shortcut?: string; placement?: 'top' | 'bottom'; children: ReactElement }) {
   return (
-    <div ref={ref} className={cn('inline-flex shrink-0', wrapperClassName)} onMouseEnter={() => setShow(true)} onMouseLeave={() => setShow(false)}>
-      {children}
-      {show &&
-        createPortal(
-          <div ref={tooltipRef} style={style}>
-            <Tooltip label={label} shortcut={shortcut} />
-          </div>,
-          document.body,
-        )}
-    </div>
+    <BaseTooltip.Root disableHoverablePopup>
+      {/* `children` is the control itself, so it is what the part renders —
+          a `ReactElement`, not a `ReactNode`, because `render` takes one
+          element and there is nothing sensible to do with two. */}
+      <BaseTooltip.Trigger delay={OPEN_DELAY} render={children} />
+      <TooltipSurface label={label} shortcut={shortcut} placement={placement} />
+    </BaseTooltip.Root>
   )
 }

package/src/cn.ts

@@ -28,7 +28,7 @@ const FONT_SIZE_TOKENS = [
  * `shadow-glow-warning` beside `shadow-md` kept both (measured 2026-09-06).
  * `cn.test.ts` pins these to the preset too.
  */
-const BOX_SHADOW_TOKENS = ['sm', 'md', 'lg', 'focus-ring', 'glow-warning', 'highlight-inset']
+const BOX_SHADOW_TOKENS = ['sm', 'md', 'lg', 'focus-ring', 'glow-warning', 'glow-success', 'glow-accent', 'highlight-inset']
 const DROP_SHADOW_TOKENS = ['glow-success', 'glow-accent']
 
 const twMerge = extendTailwindMerge({

package/src/fit.test.ts

@@ -0,0 +1,101 @@
+import { describe, expect, it } from 'vitest'
+import { fitMenu } from './fit'
+
+/**
+ * The last hand-written geometry in the package, and its one remaining
+ * caller's.
+ *
+ * These were the Menu shell's tests (Katerina, 2026-09-03: the identity menu
+ * vanished under a z-indexed panel header, and a reply menu's highlight
+ * submenu was cut off by the right screen edge — its hand-rolled flip read a
+ * ref that was never attached, so it measured nothing). Stage 4 gave that job
+ * to Floating UI, so the `clampBox` and `fitSubmenu` blocks are gone with the
+ * functions, and what is left is `fitMenu` as **`ChipInput`** uses it: a
+ * suggestion list under a text field, capped at 240.
+ *
+ * When `ChipInput` moves onto Base UI's `Combobox` at stage 5, this file and
+ * `fit.ts` go together.
+ */
+const viewport = { width: 1280, height: 800 }
+/** ChipInput's call: 48px rows, and the old `max-h-[240px]`. */
+const fitList = (args: Omit<Parameters<typeof fitMenu>[0], 'cap'>) => fitMenu({ ...args, cap: 240 })
+
+describe('fitMenu, as ChipInput calls it', () => {
+  it('leaves a comfortable list exactly where the field put it', () => {
+    const fit = fitList({
+      anchor: { left: 100, top: 200, bottom: 232 },
+      menu: { width: 240, contentHeight: 144 },
+      viewport,
+    })
+    expect(fit.left).toBe(100)
+    expect(fit.top).toBe(236)
+    expect(fit.bottom).toBeUndefined()
+  })
+
+  it('clamps a list that would run off the right edge', () => {
+    const fit = fitList({
+      anchor: { left: 1200, top: 200, bottom: 232 },
+      menu: { width: 340, contentHeight: 144 },
+      viewport,
+    })
+    // 1280 - 340 - 8 margin: fully on screen, margin kept.
+    expect(fit.left).toBe(932)
+  })
+
+  it('never pushes a list past the LEFT edge either', () => {
+    const fit = fitList({
+      anchor: { left: -20, top: 200, bottom: 232 },
+      menu: { width: 240, contentHeight: 144 },
+      viewport,
+    })
+    expect(fit.left).toBe(8)
+  })
+
+  it('opens upward when the room above is better — the field low on the screen', () => {
+    const fit = fitList({
+      anchor: { left: 100, top: 700, bottom: 732 },
+      menu: { width: 240, contentHeight: 480 },
+      viewport,
+    })
+    expect(fit.top).toBeUndefined()
+    expect(fit.bottom).toBe(800 - 700 + 4) // anchored to the field's top
+    expect(fit.maxHeight).toBe(240) // still capped
+  })
+
+  it('stays below when the room below is bad but the room above is worse', () => {
+    const fit = fitList({
+      anchor: { left: 100, top: 60, bottom: 92 },
+      menu: { width: 240, contentHeight: 480 },
+      viewport,
+    })
+    expect(fit.top).toBe(96)
+    expect(fit.maxHeight).toBe(240)
+  })
+
+  it('caps a long list at 240 with plenty of room — the old max-h-[240px]', () => {
+    const fit = fitList({
+      anchor: { left: 100, top: 100, bottom: 132 },
+      menu: { width: 240, contentHeight: 900 },
+      viewport,
+    })
+    expect(fit.maxHeight).toBe(240)
+  })
+
+  it('keeps a 120px floor in a cramped corner — scrollable beats invisible', () => {
+    const fit = fitList({
+      anchor: { left: 100, top: 740, bottom: 772 },
+      menu: { width: 240, contentHeight: 480 },
+      viewport,
+    })
+    expect(fit.maxHeight).toBeGreaterThanOrEqual(120)
+  })
+
+  it('with no cap, a tall list stands at its full height when the room is there', () => {
+    const fit = fitMenu({
+      anchor: { left: 1100, top: 20, bottom: 56 },
+      menu: { width: 288, contentHeight: 450 },
+      viewport: { width: 1440, height: 900 },
+    })
+    expect(fit.maxHeight).toBeGreaterThanOrEqual(450)
+  })
+})

package/src/fit.ts

@@ -1,30 +1,31 @@
 /**
- * Viewport geometry for everything that floats — pure, so the decisions are
- * testable without a browser.
+ * The last of the hand-written viewport geometry.
  *
- * 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
+ * This module existed because the same failure kept recurring one floating
+ * surface at a time: the files-panel picker was cut off at the right edge
+ * (Select, 2026-09-01), then a reply menu's highlight submenu was cut 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.
+ * (2026-09-03). Stage 4 handed that job to Floating UI, so `Menu`, `MenuSub`
+ * and `Select` no longer call any of it, and `clampBox` and `fitSubmenu` are
+ * gone with them.
+ *
+ * **`fitMenu` survives for exactly one caller: `ChipInput`**, whose suggestion
+ * list is still hand-placed. It goes when `ChipInput` moves onto Base UI's
+ * `Combobox` at stage 5, and this file goes with it. `PLAN.md` §6 said the
+ * geometry had three callers and could be deleted at stage 4; it had four.
  */
-
 const MARGIN = 8
 const GAP = 4
 
 /**
- * Where a menu of this size goes, given its anchor and the viewport.
+ * Where a list 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.
+ * Left is clamped inside the viewport with an 8px margin. Height is capped at
+ * `cap` — `ChipInput` passes 240, its old `max-h-[240px]` — but never taller
+ * than the room there is; when the room below the anchor is smaller than both
+ * the content and the room above, the list opens UPWARD (anchored to the
+ * trigger's top via `bottom`). The 120px floor keeps it usable even in a
+ * cramped corner — scrollable beats invisible.
  */
 export function fitMenu({
   anchor,
@@ -47,48 +48,3 @@ export function fitMenu({
     ? { 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,8 +20,8 @@ export { ChipInput, InputChip, type ChipInputOption, type ChipInputProps, type I
 export { IconButton, type IconButtonProps, type IconButtonVariant } from './IconButton'
 export { Kbd, type KbdProps } from './Kbd'
 export { IdentityMenu, IdentityPanel, type Identity, type IdentityMenuProps, type IdentityPanelProps } from './IdentityMenu'
-export { Tooltip, WithTooltip, type TooltipProps, type WithTooltipProps } from './Tooltip'
-export { Field, useFieldControlId, type FieldProps } from './Field'
+export { Tooltip, TooltipProvider, WithTooltip, type TooltipProps, type TooltipProviderProps, type WithTooltipProps } from './Tooltip'
+export { Field, type FieldProps } from './Field'
 export { Select, type SelectOption, type SelectProps } from './Select'
 export { TextInput, type TextInputProps } from './TextInput'
 export { Textarea, type TextareaProps } from './Textarea'
@@ -33,8 +33,11 @@ export { EmptyState, type EmptyStateProps } from './EmptyState'
 export { SkeletonBar, SkeletonList, SkeletonRow } from './Skeleton'
 export { Breadcrumb, type BreadcrumbProps, type Crumb } from './Breadcrumb'
 export { EnterHint, Menu, MenuItem, MenuPanel, MenuRow, MenuSection, MenuSub, type MenuItemProps, type MenuPanelProps, type MenuProps, type MenuSubProps } from './Menu'
-export { clampBox, fitMenu, fitSubmenu } from './fit'
 export { NavItem, type NavItemProps } from './NavItem'
+export { Popover, type PopoverProps } from './Popover'
+export { ReactionPicker, type ReactionOption, type ReactionPickerProps } from './ReactionPicker'
+export { Toolbar, ToolbarButton, ToolbarInput, ToolbarSeparator, type ToolbarProps, type ToolbarButtonProps, type ToolbarInputProps } from './Toolbar'
+export { PreviewCard, type PreviewCardProps } from './PreviewCard'
 export { Person, type PersonProps } from './Person'
 export { Rail, type RailProps } from './Rail'
 export { RailItem, type RailItemProps } from './RailItem'