@estiva-app/ui 0.3.0 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@estiva-app/ui",
-  "version": "0.3.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",
@@ -42,12 +42,16 @@
     "@storybook/addon-docs": "^10.5.10",
     "@storybook/react-vite": "^10.5.10",
     "@tabler/icons-react": "^3.41.1",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/react": "^16.3.3",
+    "@testing-library/user-event": "^14.6.7",
     "@types/node": "^24.12.0",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^6.0.1",
     "autoprefixer": "^10.4.27",
     "esbuild": "^0.28.0",
+    "jsdom": "^30.0.1",
     "postcss": "^8.5.8",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",

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/Field.test.tsx

@@ -0,0 +1,117 @@
+// @vitest-environment jsdom
+/**
+ * The label names its control — SHA-17.
+ *
+ * It did not. `Field` rendered a `<label>` with no `htmlFor` and the control as
+ * its *sibling*, so there was neither an explicit nor an implicit association:
+ * a screen reader announced an unlabelled edit box, and clicking the label
+ * focused nothing.
+ *
+ * These are the first DOM tests in this package, and they exist because the
+ * defect cannot be seen without a document. It surfaced in a *consumer's* test
+ * — `getByLabelText(/title/i)` in Peek's ActionFormPanel suite, failing with
+ * "Found a label with the text of: /title/i, however no form control was found
+ * associated to that label". That message is the bug stated precisely, and the
+ * consumer worked around it by querying by role. The guard belongs here, where
+ * the next primitive added under Field will meet it.
+ */
+import { afterEach, describe, expect, it } from 'vitest'
+import { cleanup, render, screen } from '@testing-library/react'
+import { Field } from './Field'
+import { TextInput } from './TextInput'
+import { Textarea } from './Textarea'
+
+// Testing Library registers its own cleanup only when vitest runs with
+// `globals: true`, and this package does not — so the first two tests passed,
+// the third found two elements labelled "Title", and the failure read like a
+// bug in the component.
+afterEach(cleanup)
+
+describe('Field', () => {
+  it('names a TextInput, so it is reachable by its label', () => {
+    render(
+      <Field label="Title">
+        <TextInput defaultValue="" />
+      </Field>,
+    )
+    expect(screen.getByLabelText('Title').tagName).toBe('INPUT')
+  })
+
+  it('names a Textarea too', () => {
+    render(
+      <Field label="Description">
+        <Textarea defaultValue="" />
+      </Field>,
+    )
+    expect(screen.getByLabelText('Description').tagName).toBe('TEXTAREA')
+  })
+
+  it('points the label at the control it wraps, not at some other field', () => {
+    // Two Fields on one form is the case a single hardcoded id gets wrong, and
+    // `useId` is what makes it right. Asserted because "it works with one
+    // field" is the version of this that ships broken.
+    const { container } = render(
+      <form>
+        <Field label="Title">
+          <TextInput defaultValue="" />
+        </Field>
+        <Field label="Description">
+          <Textarea defaultValue="" />
+        </Field>
+      </form>,
+    )
+    const labels = [...container.querySelectorAll('label')]
+    const ids = labels.map((l) => l.getAttribute('for'))
+    expect(ids.filter(Boolean)).toHaveLength(2)
+    expect(new Set(ids).size).toBe(2)
+    expect(screen.getByLabelText('Title')).toBe(container.querySelector(`#${CSS.escape(ids[0]!)}`))
+    expect(screen.getByLabelText('Description')).toBe(container.querySelector(`#${CSS.escape(ids[1]!)}`))
+  })
+
+  it('wins over an id the caller put on the control, rather than breaking the pair', () => {
+    // The first version of this asserted the opposite — that a control keeps
+    // its own id inside a Field — and it failed with this ticket's own error
+    // message, because the label went on pointing at the generated id. Two
+    // halves of one association cannot be set from two places.
+    //
+    // So the Field wins, and `htmlFor` below is how a caller chooses. Silently
+    // overriding an id is a smaller surprise than silently unlabelling a
+    // control, and only one of the two is invisible until somebody uses a
+    // screen reader.
+    render(
+      <Field label="Title">
+        <TextInput id="chosen-by-the-caller" defaultValue="" />
+      </Field>,
+    )
+    const input = screen.getByLabelText('Title')
+    expect(input.tagName).toBe('INPUT')
+    expect(input.id).not.toBe('chosen-by-the-caller')
+  })
+
+  it('lets the Field be told the id instead, for the same reason', () => {
+    render(
+      <Field label="Title" htmlFor="named-outside">
+        <TextInput defaultValue="" />
+      </Field>,
+    )
+    expect(screen.getByLabelText('Title').id).toBe('named-outside')
+  })
+
+  it('leaves a control outside a Field alone', () => {
+    // `useFieldControlId` returns undefined outside a provider, so nothing
+    // acquires a stray id — a control with an id it did not ask for is its own
+    // small bug.
+    const { container } = render(<TextInput defaultValue="" />)
+    expect(container.querySelector('input')?.getAttribute('id')).toBeNull()
+  })
+
+  it('still marks a required field, which was the only thing it did before', () => {
+    render(
+      <Field label="Title" required>
+        <TextInput defaultValue="" />
+      </Field>,
+    )
+    expect(screen.getByText('*')).toBeTruthy()
+    expect(screen.getByLabelText(/Title/).tagName).toBe('INPUT')
+  })
+})

package/src/Field.tsx

@@ -1,24 +1,78 @@
-import type { ReactNode } from 'react'
+import { createContext, useContext, useId, type ReactNode } from 'react'
 
 /**
- * Peek's Field (2026-08-28), verbatim: a label over a control, 8px apart,
- * with a red asterisk when required. The label is the `input-label` type
- * token as a plain class, never merged.
+ * The id of the control this Field labels.
+ *
+ * **A control has to opt in by calling `useFieldControlId`.** The automatic
+ * alternative is nesting the control inside the `<label>`, which associates
+ * anything by construction and needs no cooperation — and it is not used here,
+ * because a control that is *both* nested in a label and named by its `htmlFor`
+ * can receive two activations from one click. That is a real hazard for a
+ * checkbox and a latent one for everything else, and this library has a
+ * `Checkbox`.
+ *
+ * So: one explicit mechanism, and a test that pins it for every primitive that
+ * uses it (`Field.test.tsx`). A new primitive that renders a labelable element
+ * calls this hook and spreads the result; one that does not is unlabelled, and
+ * the test is where that gets noticed.
+ */
+const FieldControlIdContext = createContext<string | undefined>(undefined)
+
+/**
+ * The id a surrounding `Field` wants this control to have, falling back to the
+ * caller's own outside one.
+ *
+ * **Inside a Field, the Field wins**, which is the opposite of what I wrote
+ * first and the test caught within the minute. Letting a control's own `id`
+ * take precedence leaves the label's `htmlFor` pointing at the id the Field
+ * generated and the control answering to a different one — which is this
+ * ticket's defect exactly, reproduced by the fix for it, and it fails with the
+ * same message: *"Found a label with the text of: Title, however no form
+ * control was found associated to that label."*
+ *
+ * A caller who needs to choose the id names it on the Field (`htmlFor`), which
+ * is the one place that can set both halves. Outside a Field there is nothing
+ * to disagree with, so the caller's id is used.
+ */
+export function useFieldControlId(ownId?: string): string | undefined {
+  const fromField = useContext(FieldControlIdContext)
+  return fromField ?? ownId
+}
+
+/**
+ * Peek's Field (2026-08-28): a label over a control, 8px apart, with a red
+ * asterisk when required. The label is the `input-label` type token as a plain
+ * class, never merged.
+ *
+ * The label names its control (SHA-17). It did not, and the control was a
+ * *sibling* of the label with no `htmlFor`, so there was neither an explicit
+ * nor an implicit association: a screen reader announced an unlabelled edit
+ * box and clicking the label focused nothing.
  */
 export interface FieldProps {
   label: string
   required?: boolean
+  /**
+   * Override the generated id. Only needed when something outside has to name
+   * the control — an `aria-describedby` elsewhere, or a form library.
+   */
+  htmlFor?: string
   children: ReactNode
 }
 
-export function Field({ label, required = false, children }: FieldProps) {
+export function Field({ label, required = false, htmlFor, children }: FieldProps) {
+  const generated = useId()
+  const id = htmlFor ?? generated
   return (
     <div className="flex flex-col gap-2">
-      <label className={`text-input-label text-text-primary${required ? ' flex items-center' : ''}`}>
+      <label
+        htmlFor={id}
+        className={`text-input-label text-text-primary${required ? ' flex items-center' : ''}`}
+      >
         {label}
         {required && <span className="text-error-default ml-0.5">*</span>}
       </label>
-      {children}
+      <FieldControlIdContext.Provider value={id}>{children}</FieldControlIdContext.Provider>
     </div>
   )
 }

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) => (