@estiva-app/ui 0.4.0 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@estiva-app/ui",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Estiva's design tokens (the contract) and a small set of primitives (a convenience) for every Estiva app.",
   "type": "module",
   "license": "MIT",

package/src/AppShell.tsx

@@ -63,7 +63,14 @@ export function AppShell({ variant = 'solid', menu, logo, search, identity, bann
   }
 
   return (
-    <div className="flex h-full min-h-0 flex-col bg-bg-base text-text-primary">
+    /* `relative overflow-hidden` is the seal the floating manner already has,
+       and it takes both halves: an absolutely positioned descendant with no
+       positioned ancestor belongs to the *viewport*, so a scroll container
+       never clips it and the document itself gains its position as scroll
+       range — the whole page scrolls, navigation and top bar included.
+       `relative` claims such strays for the shell; `overflow-hidden` clips
+       them at its edge. Either alone seals nothing. */
+    <div className="relative flex h-full min-h-0 flex-col overflow-hidden bg-bg-base text-text-primary">
       {bar}
       <div className="flex min-h-0 flex-1">
         {nav}

package/src/Avatar.tsx

@@ -65,7 +65,20 @@ export function Avatar({ src, name, alt = '', size = 36, className }: AvatarProp
         <img src={picture} alt={alt || name || ''} className="w-full h-full object-cover" onError={() => setBroken(true)} />
       ) : label ? (
         <div
-          className="w-full h-full flex items-center justify-center font-semibold"
+          /*
+            `leading-none` is load-bearing (2026-09-03). Centring a flex child
+            centres its LINE BOX, and a line box reserves room under the
+            baseline for descenders — which capitals never use — so initials
+            floated above the middle of every tile. It also inherited whatever
+            line-height surrounded it, so the same face sat differently in a
+            members pill and in a replies row. Measured over six letter pairs
+            at 18/24/36px: mean 0.64px high before, 0.06px after.
+
+            Per-letter variation stays (a "Y" carries its mass up top, a "ZB"
+            more than an "AJ") — that is the letterform, not the box, and it
+            is not something a rule here can flatten.
+          */
+          className="w-full h-full flex items-center justify-center font-semibold leading-none"
           style={{
             color: '#08121c',
             fontSize: Math.round(size * 0.36),

package/src/AvatarGroup.stories.tsx

@@ -33,6 +33,11 @@ export const OverflowShowsThree: Story = {
   },
 }
 
+/** The smaller face, for a dense row — a reply line's authors, say. */
+export const Small: Story = {
+  args: { size: 18 },
+}
+
 /**
  * Inside a members pill with the total count — the shape a conversation
  * header draws over the stack. The pill is the caller's; this is the group

package/src/AvatarGroup.tsx

@@ -8,10 +8,13 @@ import { Avatar } from './Avatar'
  * wrapper resolves pictures itself; a consumer without such a wrapper could
  * never have shown one.
  *
- * The ring sits on the Avatar itself: the old extra wrapper was a 24px
- * window minus a 2px border with a fixed 24px Avatar inside, so
- * overflow-hidden clipped 4px of face — and the right edge of the initials
- * with it, which is how "CO" rendered as "C(". One box, whole letters.
+ * The ring is drawn OUTSIDE the face, as a shadow (2026-09-03). It was a
+ * `border` before, which box-sizing takes out of the inside: a 24px avatar
+ * showed 20px of face, and at 18px only 14px — noticeably smaller than the
+ * number asked for. A shadow costs the face nothing, so `size` means the
+ * size. It replaced an even older wrapper whose `overflow-hidden` clipped
+ * 4px of face and the right edge of the initials with it ("CO" as "C(") —
+ * hence the rule this file keeps: nothing that clips ever wraps the face.
  */
 export interface AvatarGroupMember {
   name: string
@@ -21,21 +24,41 @@ export interface AvatarGroupMember {
 
 export interface AvatarGroupProps {
   members: AvatarGroupMember[]
+  /**
+   * Face size in pixels; the overlap follows it. 24 is the members pill,
+   * 18 the replies row (Katerina, 2026-09-03) — that row drew its own stack
+   * for two months for want of this one number, and drifted while it did.
+   */
+  size?: number
 }
 
-export function AvatarGroup({ members }: AvatarGroupProps) {
+export function AvatarGroup({ members, size = 24 }: AvatarGroupProps) {
   const visible = members.slice(0, 3)
+  /*
+    A third of the face, so a stack reads the same at any size — which is
+    exactly the ratio both hand-drawn stacks had arrived at independently
+    (8px on 24, 6px on 18). The container gives the last face its overlap
+    back as padding, so the group measures its true width.
+  */
+  const overlap = Math.round(size / 3)
+  // The ring scales with the face — 2px at 24, 1.5px at 18, which is what both
+  // hand-drawn stacks used before this component carried either of them.
+  const ring = size / 12
   return (
-    <div className="flex items-center pr-2">
+    <div className="flex items-center" style={{ paddingRight: overlap }}>
       {visible.map((member, i) => (
-        <Avatar
+        /*
+          The wrapper carries the overlap and the ring; the face carries
+          neither. It must never clip — see the note at the top of the file —
+          so it has the avatar's own radius and no overflow of its own.
+        */
+        <span
           key={i}
-          size={24}
-          name={member.name}
-          src={member.picture}
-          alt={member.name}
-          className="-mr-2 relative border-2 border-bg-surface"
-        />
+          className="relative flex rounded-sm"
+          style={{ marginRight: -overlap, boxShadow: `0 0 0 ${ring}px var(--bg-surface)` }}
+        >
+          <Avatar size={size} name={member.name} src={member.picture} alt={member.name} />
+        </span>
       ))}
     </div>
   )

package/src/ChipInput.tsx

@@ -2,6 +2,7 @@ import { useState, useRef, useMemo, useEffect, useLayoutEffect, type KeyboardEve
 import { createPortal } from 'react-dom'
 import { IconX } from '@tabler/icons-react'
 import { cn } from './cn'
+import { fitMenu } from './fit'
 import { MenuItem } from './Menu'
 
 /**
@@ -216,10 +217,21 @@ export function ChipInput<T extends ChipInputOption = ChipInputOption>({
 
       {showDropdown && anchorRect && createPortal(
         <div
-          className="fixed z-[60] max-h-[240px] overflow-y-auto bg-bg-elevated border border-border-default rounded-lg shadow-lg"
+          className="fixed z-[60] overflow-y-auto bg-bg-elevated border border-border-default rounded-lg shadow-lg"
+          /*
+            Placed by fitMenu (2026-09-03), not hung blindly below: an input
+            low on the screen flips its list upward instead of running the
+            tail past the bottom edge. The rows are a fixed 48px, so the
+            content height is arithmetic and needs no second render pass;
+            the 240px cap is the old max-h-[240px].
+          */
           style={{
-            top: anchorRect.bottom + 4,
-            left: anchorRect.left,
+            ...fitMenu({
+              anchor: { left: anchorRect.left, top: anchorRect.top, bottom: anchorRect.bottom },
+              menu: { width: anchorRect.width, contentHeight: matches.length * 48 },
+              viewport: { width: window.innerWidth, height: window.innerHeight },
+              cap: 240,
+            }),
             width: anchorRect.width,
           }}
         >

package/src/IdentityMenu.tsx

@@ -1,4 +1,4 @@
-import { useState, type ReactNode } from 'react'
+import { useRef, useState, type ReactNode } from 'react'
 import { cn } from './cn'
 import { Divider } from './Divider'
 import { Menu, MenuItem, MenuRow, MenuSection } from './Menu'
@@ -55,6 +55,11 @@ export interface IdentityMenuProps {
 
 export interface IdentityPanelProps extends Omit<IdentityMenuProps, 'compact' | 'className'> {
   onClose: () => void
+  /** The trigger to hang from — the panel portals to the body and fits the
+   *  viewport, so no header, sidebar or scroll container can cover it (the
+   *  z-10 floating top bar trapped the old in-flow panel under a z-20 panel
+   *  header, 2026-09-03). Absent, the panel stands in flow — the stories. */
+  anchor?: HTMLElement | null
   /** On the Menu surface — the stories pass `static` to stand it in flow. */
   className?: string
 }
@@ -62,14 +67,14 @@ export interface IdentityPanelProps extends Omit<IdentityMenuProps, 'compact' |
 /** The menu alone — what `IdentityMenu` opens. Exported so the stories show
  *  the designed artifact rather than a closed trigger, and for any surface
  *  that wants the panel without the trigger. */
-export function IdentityPanel({ me, signedIn, relayUrl, idBase, onCopyKey, onSignOut, onClose, className, children }: IdentityPanelProps) {
+export function IdentityPanel({ me, signedIn, relayUrl, idBase, onCopyKey, onSignOut, onClose, anchor, className, children }: IdentityPanelProps) {
   const act = (action: () => void) => () => {
     onClose()
     action()
   }
   const appRows = typeof children === 'function' ? children(onClose) : children
   return (
-    <Menu onClose={onClose} className={cn('w-72', className)}>
+    <Menu onClose={onClose} anchor={anchor} align="right" className={cn('w-72', className)}>
       <MenuSection label={signedIn ? 'Signed in as' : 'Acting as'}>
         <MenuRow>
           <Person name={me.name} picture={me.picture} fallback="Anonymous" size={28} className="text-body-2-strong" />
@@ -117,9 +122,13 @@ export function IdentityPanel({ me, signedIn, relayUrl, idBase, onCopyKey, onSig
 
 export function IdentityMenu({ me, signedIn, relayUrl, idBase, onCopyKey, onSignOut, compact = false, className, children }: IdentityMenuProps) {
   const [open, setOpen] = useState(false)
+  /* The wrapper is the anchor: the panel hangs its right edge from this
+     div's, exactly where the old in-flow `absolute right-0` put it — but
+     portalled, so nothing z-indexed in the app can cover it. */
+  const anchorRef = useRef<HTMLDivElement>(null)
 
   return (
-    <div className={cn('relative', className)}>
+    <div ref={anchorRef} className={cn('relative', className)}>
       <PersonTrigger
         name={me.name}
         picture={me.picture}
@@ -146,6 +155,7 @@ export function IdentityMenu({ me, signedIn, relayUrl, idBase, onCopyKey, onSign
           onCopyKey={onCopyKey}
           onSignOut={onSignOut}
           onClose={() => setOpen(false)}
+          anchor={anchorRef.current}
         >
           {children}
         </IdentityPanel>

package/src/Menu.fit.test.ts

@@ -0,0 +1,90 @@
+import { describe, expect, it } from 'vitest'
+import { clampBox, fitMenu, fitSubmenu } from './fit'
+
+/**
+ * The Menu shell's viewport geometry (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. The portal fixes the
+ * covering; these pin the pure half of the fitting.
+ */
+const viewport = { width: 1280, height: 800 }
+
+describe('fitMenu without a cap (the Menu shell)', () => {
+  it('lets a tall panel stand at its full height when the room is there — no scrollbar', () => {
+    // The identity panel: ~450px tall on a 900px screen. With Select's 288
+    // cap it grew a scrollbar at full height; without one it just stands.
+    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)
+  })
+
+  it('still caps to the room when the screen truly runs out', () => {
+    const fit = fitMenu({
+      anchor: { left: 100, top: 20, bottom: 56 },
+      menu: { width: 288, contentHeight: 1200 },
+      viewport: { width: 1440, height: 900 },
+    })
+    expect(fit.maxHeight).toBe(900 - 56 - 4 - 8)
+  })
+})
+
+describe('clampBox', () => {
+  it('leaves a well-placed box exactly where the caller put it', () => {
+    const fit = clampBox({ box: { left: 100, top: 200, width: 300, height: 400 }, viewport })
+    expect(fit).toEqual({ left: 100, top: 200, maxHeight: 400 })
+  })
+
+  it('slides a box back inside the right edge, margin kept', () => {
+    const fit = clampBox({ box: { left: 1100, top: 200, width: 300, height: 400 }, viewport })
+    expect(fit.left).toBe(1280 - 300 - 8)
+  })
+
+  it('never pushes a box past the left edge either', () => {
+    const fit = clampBox({ box: { left: -40, top: 200, width: 300, height: 400 }, viewport })
+    expect(fit.left).toBe(8)
+  })
+
+  it('slides a box up so its tail stays on screen', () => {
+    const fit = clampBox({ box: { left: 100, top: 700, width: 300, height: 400 }, viewport })
+    expect(fit.top).toBe(800 - 400 - 8)
+  })
+
+  it('caps a box taller than the viewport and pins it to the top margin', () => {
+    const fit = clampBox({ box: { left: 100, top: 100, width: 300, height: 900 }, viewport })
+    expect(fit.maxHeight).toBe(800 - 16)
+    expect(fit.top).toBe(8)
+  })
+
+  it('keeps the 120px floor — scrollable beats invisible', () => {
+    const fit = clampBox({ box: { left: 100, top: 200, width: 300, height: 40 }, viewport })
+    expect(fit.maxHeight).toBeGreaterThanOrEqual(120)
+  })
+})
+
+describe('fitSubmenu', () => {
+  const panel = { width: 160, height: 200 }
+
+  it('opens to the right of a row with room', () => {
+    const fit = fitSubmenu({ row: { left: 500, right: 740, top: 300 }, panel, viewport })
+    expect(fit).toEqual({ left: 744, top: 300 })
+  })
+
+  it('flips to the left at the right screen edge (the highlight submenu cut)', () => {
+    const fit = fitSubmenu({ row: { left: 1000, right: 1240, top: 300 }, panel, viewport })
+    expect(fit.left).toBe(1000 - 4 - 160)
+  })
+
+  it('never lands past the left edge even when flipped from a narrow spot', () => {
+    const fit = fitSubmenu({ row: { left: 60, right: 1240, top: 300 }, panel, viewport })
+    expect(fit.left).toBe(8)
+  })
+
+  it('slides up when the tail would run past the bottom', () => {
+    const fit = fitSubmenu({ row: { left: 500, right: 740, top: 700 }, panel, viewport })
+    expect(fit.top).toBe(800 - 200 - 8)
+  })
+})

package/src/Menu.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
-import { IconCopy, IconPencil, IconTrash } from '@tabler/icons-react'
+import { IconCopy, IconHighlight, IconPencil, IconTrash } from '@tabler/icons-react'
 import { Divider } from './Divider'
-import { Menu, MenuItem, MenuRow, MenuSection } from './Menu'
+import { Menu, MenuItem, MenuRow, MenuSection, MenuSub } from './Menu'
 import { SectionLabel } from './SectionLabel'
 
 /**
@@ -51,6 +51,29 @@ export const Sections: Story = {
   ),
 }
 
+/**
+ * A row that opens another menu beside it — hover it. The panel portals to
+ * the body and fits the viewport: right of the row with room, flipped left
+ * at the screen edge, never cut off. Live rather than pinned, because the
+ * placement IS the designed behaviour.
+ */
+export const WithASubmenu: Story = {
+  render: (args) => (
+    <Menu {...args}>
+      <MenuItem label="Rename" leading={<IconPencil size={16} stroke={1.5} className="text-text-secondary" />} onClick={() => {}} />
+      <MenuSub label="Mark as Highlight" leading={<IconHighlight size={16} stroke={1.5} className="text-text-secondary" />}>
+        <MenuItem label="Insight" onClick={() => {}} />
+        <MenuItem label="Concern" onClick={() => {}} />
+        <MenuItem label="Conclusion" onClick={() => {}} />
+        <MenuItem label="Question" onClick={() => {}} />
+        <MenuItem label="Summary" onClick={() => {}} />
+      </MenuSub>
+      <Divider className="my-1" />
+      <MenuItem label="Delete" destructive onClick={() => {}} />
+    </Menu>
+  ),
+}
+
 /** A non-interactive row at the item's geometry — identity lines, hints. */
 export const WithARow: Story = {
   render: (args) => (

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