@estiva-app/ui 0.44.1 → 0.46.0

package/registry.json

@@ -4,9 +4,9 @@
     "kind": "package",
     "repo": "estiva-ui",
     "package": "@estiva-app/ui",
-    "packageVersion": "0.44.1",
-    "exports": 91,
-    "typeExports": 102,
+    "packageVersion": "0.46.0",
+    "exports": 100,
+    "typeExports": 109,
     "files": null
   },
   "storybook": {
@@ -832,14 +832,14 @@
       "docPage": "src/Chip.mdx",
       "app": null,
       "looks": [
-        "bg-accent-muted text-accent-primary signal:border signal:border-accent-outline",
+        "bg-accent-muted text-accent-text signal:border signal:border-accent-outline",
         "bg-info-muted text-info-default signal:border signal:border-info-outline",
         "bg-warning-muted text-warning-default signal:border signal:border-warning-outline signal:shadow-glow-warning",
         "bg-success-muted text-success-default signal:border signal:border-success-outline",
         "bg-error-muted text-error-default signal:border signal:border-error-outline",
         "overflow-x-clip text-ellipsis whitespace-nowrap signal:tracking-wide text-chip signal:font-mono signal:text-small signal:font-semibold signal:tabular-nums",
         "overflow-x-clip text-ellipsis whitespace-nowrap signal:tracking-wide",
-        "rounded-full bg-accent-muted text-accent-primary signal:border signal:border-accent-outline",
+        "rounded-full bg-accent-muted text-accent-text signal:border signal:border-accent-outline",
         "rounded-full bg-info-muted text-info-default signal:border signal:border-info-outline",
         "rounded-full bg-warning-muted text-warning-default signal:border signal:border-warning-outline signal:shadow-glow-warning",
         "rounded-full bg-success-muted text-success-default signal:border signal:border-success-outline",
@@ -1045,6 +1045,12 @@
           "required": false,
           "note": null
         },
+        {
+          "name": "look",
+          "takes": "heading | row",
+          "required": false,
+          "note": "`heading` (default): the title is a section heading."
+        },
         {
           "name": "children",
           "takes": "anything",
@@ -1071,6 +1077,13 @@
             "hover",
             "always"
           ]
+        },
+        {
+          "prop": "look",
+          "values": [
+            "heading",
+            "row"
+          ]
         }
       ],
       "ownsBehaviours": [
@@ -2651,6 +2664,63 @@
         "text-caption font-medium text-text-primary truncate"
       ]
     },
+    {
+      "name": "isApplePlatform",
+      "repo": "estiva-ui",
+      "kind": "helper",
+      "importPath": "@estiva-app/ui",
+      "sourceFile": "src/shortcuts.ts",
+      "purpose": "Whether this machine calls the modifier Cmd rather than Ctrl.",
+      "purposeFrom": "comment",
+      "props": [],
+      "variants": [],
+      "ownsBehaviours": [],
+      "status": "stable",
+      "migrationStage": null,
+      "docsId": null,
+      "storyId": null,
+      "docPage": null,
+      "app": null,
+      "looks": []
+    },
+    {
+      "name": "isSuggestionActive",
+      "repo": "estiva-ui",
+      "kind": "helper",
+      "importPath": "@estiva-app/ui/editor",
+      "sourceFile": "src/suggestionPopup.tsx",
+      "purpose": "Open, or closed less than 100ms ago — what an Enter handler asks.",
+      "purposeFrom": "comment",
+      "props": [],
+      "variants": [],
+      "ownsBehaviours": [],
+      "status": "stable",
+      "migrationStage": null,
+      "docsId": null,
+      "storyId": null,
+      "docPage": null,
+      "app": null,
+      "looks": []
+    },
+    {
+      "name": "isSuggestionOpen",
+      "repo": "estiva-ui",
+      "kind": "helper",
+      "importPath": "@estiva-app/ui/editor",
+      "sourceFile": "src/suggestionPopup.tsx",
+      "purpose": "Open *now*, with no grace period — what an Escape handler asks.",
+      "purposeFrom": "comment",
+      "props": [],
+      "variants": [],
+      "ownsBehaviours": [],
+      "status": "stable",
+      "migrationStage": null,
+      "docsId": null,
+      "storyId": null,
+      "docPage": null,
+      "app": null,
+      "looks": []
+    },
     {
       "name": "Kbd",
       "repo": "estiva-ui",
@@ -2704,6 +2774,25 @@
         "border-border-tooltip-key bg-bg-tooltip-key text-text-tooltip-key signal:bg-bg-tooltip-key ship:bg-bg-tooltip-key"
       ]
     },
+    {
+      "name": "KeptSelection",
+      "repo": "estiva-ui",
+      "kind": "component",
+      "importPath": "@estiva-app/ui/editor",
+      "sourceFile": "src/SelectionToolbar.tsx",
+      "purpose": "The extension an editor registers so a selection can stay drawn while a field has the focus.",
+      "purposeFrom": "comment",
+      "props": [],
+      "variants": [],
+      "ownsBehaviours": [],
+      "status": "stable",
+      "migrationStage": null,
+      "docsId": "primitives-selectiontoolbar--docs",
+      "storyId": "primitives-selectiontoolbar--default",
+      "docPage": null,
+      "app": null,
+      "looks": []
+    },
     {
       "name": "Lightbox",
       "repo": "estiva-ui",
@@ -3373,6 +3462,18 @@
           "required": false,
           "note": "16px, stroke 1.5."
         },
+        {
+          "name": "menu",
+          "takes": "anything",
+          "required": false,
+          "note": "The row's \"More options\" menu: `MenuItem`s."
+        },
+        {
+          "name": "menuLabel",
+          "takes": "text",
+          "required": false,
+          "note": "The ⋮'s accessible name and tooltip. Default \"More options for {label}\"."
+        },
         {
           "name": "className",
           "takes": "text",
@@ -3389,11 +3490,31 @@
       "docPage": "src/NavItem.mdx",
       "app": null,
       "looks": [
-        "rounded-md text-body-2 transition-colors bg-bg-active text-text-primary",
-        "rounded-md text-body-2 transition-colors text-text-secondary hover:bg-bg-hover hover:text-text-primary",
-        "text-center font-mono text-caption tabular-nums text-text-muted"
+        "text-body-2 rounded-md transition-colors bg-bg-active text-text-primary",
+        "text-body-2 rounded-md transition-colors text-text-secondary hover:text-text-primary hover:bg-bg-hover",
+        "text-center font-mono text-caption tabular-nums text-text-muted",
+        "text-center font-mono text-caption tabular-nums text-text-muted transition-opacity"
       ]
     },
+    {
+      "name": "normalizeHref",
+      "repo": "estiva-ui",
+      "kind": "helper",
+      "importPath": "@estiva-app/ui/editor",
+      "sourceFile": "src/SelectionToolbar.tsx",
+      "purpose": "What somebody typed into the link field → an `href`, or null when it cannot be one.",
+      "purposeFrom": "comment",
+      "props": [],
+      "variants": [],
+      "ownsBehaviours": [],
+      "status": "stable",
+      "migrationStage": null,
+      "docsId": "primitives-selectiontoolbar--docs",
+      "storyId": "primitives-selectiontoolbar--default",
+      "docPage": null,
+      "app": null,
+      "looks": []
+    },
     {
       "name": "Panel",
       "repo": "estiva-ui",
@@ -4091,9 +4212,9 @@
       "docPage": "src/Reaction.mdx",
       "app": null,
       "looks": [
-        "rounded-full border transition-colors disabled:cursor-not-allowed disabled:opacity-50 border-accent-primary bg-accent-muted text-accent-primary hover:border-accent-hover ship:text-text-primary",
+        "rounded-full border transition-colors disabled:cursor-not-allowed disabled:opacity-50 border-accent-primary bg-accent-muted text-accent-text hover:border-accent-hover ship:text-text-primary",
         "rounded-full border transition-colors disabled:cursor-not-allowed disabled:opacity-50 border-border-default bg-bg-inset text-text-primary hover:border-border-strong hover:bg-bg-hover",
-        "border-accent-primary bg-accent-muted text-accent-primary hover:border-accent-hover ship:text-text-primary",
+        "border-accent-primary bg-accent-muted text-accent-text hover:border-accent-hover ship:text-text-primary",
         "border-border-default bg-bg-inset text-text-primary hover:border-border-strong hover:bg-bg-hover",
         "text-chip signal:font-mono signal:text-small signal:font-semibold signal:tabular-nums"
       ]
@@ -4423,6 +4544,12 @@
           "required": false,
           "note": "`fill` lights the row under the pointer when it does something (a toggle, actions); `none` keeps it still — a heading whose actions are always shown, where the buttons light up on their own (UIG-14, Katerina, 19 September)."
         },
+        {
+          "name": "look",
+          "takes": "heading | quiet | row",
+          "required": false,
+          "note": "`heading` (default): a section's title, the `SectionLabel`."
+        },
         {
           "name": "render",
           "takes": "useRender.RenderProp",
@@ -4450,6 +4577,14 @@
             "fill",
             "none"
           ]
+        },
+        {
+          "prop": "look",
+          "values": [
+            "heading",
+            "quiet",
+            "row"
+          ]
         }
       ],
       "ownsBehaviours": [],
@@ -4460,7 +4595,9 @@
       "docPage": "src/SectionHeader.mdx",
       "app": null,
       "looks": [
-        "text-text-secondary transition-transform duration-150 rotate-90",
+        "transition-transform duration-150 text-text-secondary rotate-90",
+        "rounded-md transition-colors text-text-secondary hover:text-text-primary",
+        "rounded-md transition-colors text-text-secondary hover:text-text-primary hover:bg-bg-hover",
         "-mr-1 opacity-0 transition-opacity focus-within:opacity-100 group-hover:opacity-100",
         "opacity-0 transition-opacity focus-within:opacity-100 group-hover:opacity-100"
       ]
@@ -4658,6 +4795,84 @@
         "rounded-lg border bg-bg-field shadow-field text-left"
       ]
     },
+    {
+      "name": "SelectionToolbar",
+      "repo": "estiva-ui",
+      "kind": "component",
+      "importPath": "@estiva-app/ui/editor",
+      "sourceFile": "src/SelectionToolbar.tsx",
+      "purpose": "Bold, italic and underline — and code or a link where the editor has them — over text you have already selected in an editor.",
+      "purposeFrom": "page",
+      "props": [
+        {
+          "name": "editor",
+          "takes": "Editor | null",
+          "required": true,
+          "note": "The editor whose selection the strip follows."
+        },
+        {
+          "name": "marks",
+          "takes": "readonly MarkId[]",
+          "required": false,
+          "note": "Which marks the strip toggles, in order."
+        },
+        {
+          "name": "link",
+          "takes": "true/false",
+          "required": false,
+          "note": "The Link button and its address field. Needs a link mark in the editor and `KeptSelection`."
+        }
+      ],
+      "variants": [],
+      "ownsBehaviours": [
+        {
+          "id": "portal",
+          "behaviour": "Floats on top of the page"
+        },
+        {
+          "id": "press-outside",
+          "behaviour": "Closes on a press outside"
+        },
+        {
+          "id": "page-keys",
+          "behaviour": "Takes its keys by itself"
+        },
+        {
+          "id": "focus",
+          "behaviour": "Holds focus inside while open, and gives it back"
+        },
+        {
+          "id": "follow",
+          "behaviour": "Stays attached to its anchor on scroll and resize"
+        }
+      ],
+      "status": "stable",
+      "migrationStage": null,
+      "docsId": "primitives-selectiontoolbar--docs",
+      "storyId": "primitives-selectiontoolbar--default",
+      "docPage": "src/SelectionToolbar.mdx",
+      "app": null,
+      "looks": []
+    },
+    {
+      "name": "shortcutLabel",
+      "repo": "estiva-ui",
+      "kind": "helper",
+      "importPath": "@estiva-app/ui",
+      "sourceFile": "src/shortcuts.ts",
+      "purpose": "`Mod-B` → `Cmd+B` on a Mac, `Ctrl+B` elsewhere.",
+      "purposeFrom": "comment",
+      "props": [],
+      "variants": [],
+      "ownsBehaviours": [],
+      "status": "stable",
+      "migrationStage": null,
+      "docsId": null,
+      "storyId": null,
+      "docPage": null,
+      "app": null,
+      "looks": []
+    },
     {
       "name": "Sidebar",
       "repo": "estiva-ui",
@@ -4786,6 +5001,171 @@
       "app": null,
       "looks": []
     },
+    {
+      "name": "SuggestionMenu",
+      "repo": "estiva-ui",
+      "kind": "component",
+      "importPath": "@estiva-app/ui",
+      "sourceFile": "src/SuggestionMenu.tsx",
+      "purpose": "The list a text editor opens as you type — `/` for commands, `@` for people — while focus stays in the text.",
+      "purposeFrom": "page",
+      "props": [
+        {
+          "name": "rect",
+          "takes": "DOMRect | null",
+          "required": true,
+          "note": "The caret's rect, from the editor. `null` closes the box."
+        },
+        {
+          "name": "editorElement",
+          "takes": "HTMLElement | null",
+          "required": false,
+          "note": "The editor's own element — told which row is active."
+        },
+        {
+          "name": "ariaLabel",
+          "takes": "text",
+          "required": true,
+          "note": "Names the list — \"Commands\", \"People\"."
+        },
+        {
+          "name": "width",
+          "takes": "text",
+          "required": true,
+          "note": "The box's width, e.g. `w-[300px]`."
+        },
+        {
+          "name": "maxHeight",
+          "takes": "text",
+          "required": true,
+          "note": "The cap before the rows scroll, e.g. `max-h-[400px]`."
+        },
+        {
+          "name": "sections",
+          "takes": "readonly SuggestionMenuSection<T>[]",
+          "required": true,
+          "note": null
+        },
+        {
+          "name": "itemKey",
+          "takes": "a handler",
+          "required": true,
+          "note": "A stable key for a row."
+        },
+        {
+          "name": "row",
+          "takes": "a handler",
+          "required": true,
+          "note": "What a row shows."
+        },
+        {
+          "name": "onSelect",
+          "takes": "a handler",
+          "required": true,
+          "note": null
+        },
+        {
+          "name": "handle",
+          "takes": "Ref<SuggestionMenuHandle>",
+          "required": false,
+          "note": null
+        }
+      ],
+      "variants": [],
+      "ownsBehaviours": [
+        {
+          "id": "portal",
+          "behaviour": "Floats on top of the page"
+        },
+        {
+          "id": "press-outside",
+          "behaviour": "Closes on a press outside"
+        },
+        {
+          "id": "page-keys",
+          "behaviour": "Takes its keys by itself"
+        },
+        {
+          "id": "focus",
+          "behaviour": "Holds focus inside while open, and gives it back"
+        },
+        {
+          "id": "follow",
+          "behaviour": "Stays attached to its anchor on scroll and resize"
+        },
+        {
+          "id": "walking",
+          "behaviour": "Moves through its items with the arrow keys"
+        },
+        {
+          "id": "role",
+          "behaviour": "Says what it is to assistive technology"
+        }
+      ],
+      "status": "stable",
+      "migrationStage": null,
+      "docsId": "primitives-suggestionmenu--docs",
+      "storyId": "primitives-suggestionmenu--default",
+      "docPage": "src/SuggestionMenu.mdx",
+      "app": null,
+      "looks": []
+    },
+    {
+      "name": "suggestionPopup",
+      "repo": "estiva-ui",
+      "kind": "helper",
+      "importPath": "@estiva-app/ui/editor",
+      "sourceFile": "src/suggestionPopup.tsx",
+      "purpose": "The `render` of a Tiptap suggestion plugin, drawn as a `SuggestionMenu` — the popup controller Peek wrote four times (`mention.tsx`, `slashCommands.tsx`), once.",
+      "purposeFrom": "comment",
+      "props": [
+        {
+          "name": "ariaLabel",
+          "takes": "text",
+          "required": true,
+          "note": "Names the list — \"Commands\", \"People\"."
+        },
+        {
+          "name": "width",
+          "takes": "text",
+          "required": true,
+          "note": "The box's width, e.g. `w-[300px]`."
+        },
+        {
+          "name": "maxHeight",
+          "takes": "text",
+          "required": true,
+          "note": "The cap before the rows scroll, e.g. `max-h-[400px]`."
+        },
+        {
+          "name": "sections",
+          "takes": "a handler",
+          "required": false,
+          "note": "The plugin's items, and the typed query, → the sections to draw."
+        },
+        {
+          "name": "itemKey",
+          "takes": "a handler",
+          "required": true,
+          "note": null
+        },
+        {
+          "name": "row",
+          "takes": "a handler",
+          "required": true,
+          "note": null
+        }
+      ],
+      "variants": [],
+      "ownsBehaviours": [],
+      "status": "stable",
+      "migrationStage": null,
+      "docsId": null,
+      "storyId": null,
+      "docPage": null,
+      "app": null,
+      "looks": []
+    },
     {
       "name": "Tabs",
       "repo": "estiva-ui",

package/src/Chip.tsx

@@ -33,7 +33,7 @@ export interface ChipProps {
 
 const typeStyles: Record<ChipType, string> = {
   neutral: 'bg-bg-inset text-text-primary',
-  brand: 'bg-accent-muted text-accent-primary signal:border signal:border-accent-outline',
+  brand: 'bg-accent-muted text-accent-text signal:border signal:border-accent-outline',
   info: 'bg-info-muted text-info-default signal:border signal:border-info-outline',
   warning: 'bg-warning-muted text-warning-default signal:border signal:border-warning-outline signal:shadow-glow-warning',
   success: 'bg-success-muted text-success-default signal:border signal:border-success-outline',

package/src/CollapsibleSection.mdx

@@ -22,6 +22,11 @@ toggle, and the rows under it, sliding shut and open.
 - `open` + `onOpenChange` when the app owns the state.
 - `actions` for add, sort, filter beside the title — SectionHeader's,
   revealed on hover or focus.
+- `look="row"` when the section is a row among rows — a folder in a
+  sidebar, under a quiet label: the title at a row's weight, and its rows
+  indented under it, past the chevron.
+
+<Canvas of={CollapsibleSectionStories.AsARow} />
 
 In a sidebar — the Sidebar's own Composed canvas, which is where that
 composition lives:

package/src/CollapsibleSection.stories.tsx

@@ -42,3 +42,8 @@ export const WithTrailing: Story = {
 /** Close it and reload the page: still closed. This browser remembers, under the key. */
 export const Remembered: Story = { args: { storageKey: 'estiva-ui.stories.collapsible-section' } }
 
+
+/** `look="row"`: a fold that is a row among rows — a folder in a sidebar. The title at a row's weight, the rows indented under it, past the chevron. */
+export const AsARow: Story = {
+  args: { title: 'Folder', look: 'row' },
+}

package/src/CollapsibleSection.tsx

@@ -36,6 +36,12 @@ export interface CollapsibleSectionProps {
   /** Beside the title, revealed on hover or focus — `SectionHeader`'s. */
   actions?: SectionAction[]
   showActions?: 'hover' | 'always'
+  /**
+   * `heading` (default): the title is a section heading. `row`: the fold is a
+   * row among rows — a folder in a sidebar — and its rows sit indented under
+   * its title, past the chevron (`SectionHeader`'s `look`).
+   */
+  look?: 'heading' | 'row'
   /** The rows. */
   children: ReactNode
   /** On the section's box: `mt-2` between groups, `shrink-0` in a scrolling column. */
@@ -66,7 +72,7 @@ function writeStored(key: string | undefined, open: boolean) {
   }
 }
 
-export function CollapsibleSection({ title, defaultOpen = true, open: openProp, onOpenChange, storageKey, trailing, actions, showActions, children, className, contentClassName }: CollapsibleSectionProps) {
+export function CollapsibleSection({ title, defaultOpen = true, open: openProp, onOpenChange, storageKey, trailing, actions, showActions, look = 'heading', children, className, contentClassName }: CollapsibleSectionProps) {
   const [openState, setOpenState] = useState(() => readStored(storageKey) ?? defaultOpen)
   const open = openProp ?? openState
   const setOpen = (next: boolean) => {
@@ -76,7 +82,7 @@ export function CollapsibleSection({ title, defaultOpen = true, open: openProp,
   }
   return (
     <Collapsible.Root open={open} onOpenChange={setOpen} className={cn('flex flex-col', className)}>
-      <SectionHeader title={title} chevron isExpanded={open} trailing={trailing} actions={actions} showActions={showActions} className="shrink-0" render={<Collapsible.Trigger />} />
+      <SectionHeader title={title} chevron isExpanded={open} trailing={trailing} actions={actions} showActions={showActions} look={look} className="shrink-0" render={<Collapsible.Trigger />} />
       {/* The slide: Base UI measures the panel and writes its height to a
           variable — `auto` again once the slide ends, so rows that arrive
           later are not clipped — and the panel is 0 high on its opening frame
@@ -87,7 +93,8 @@ export function CollapsibleSection({ title, defaultOpen = true, open: openProp,
         hiddenUntilFound
         className="h-[var(--collapsible-panel-height)] overflow-hidden transition-[height] duration-150 ease-out motion-reduce:transition-none data-[starting-style]:h-0 data-[ending-style]:h-0"
       >
-        <div className={cn('flex flex-col', contentClassName)}>{children}</div>
+        {/* A row's rows start under its title: the 16px chevron and its 8px gap (pl-6). */}
+        <div className={cn('flex flex-col', look === 'row' && 'pl-6', contentClassName)}>{children}</div>
       </Collapsible.Panel>
     </Collapsible.Root>
   )

package/src/CommandPalette.tsx

@@ -639,7 +639,7 @@ export function CommandPaletteAnswer({ children, note }: CommandPaletteAnswerPro
               before "[1]" would stand between them as a gap. */}
           {paragraph.split(/\s*(\[\d+\])/).map((part, j) =>
             /^\[\d+\]$/.test(part) ? (
-              <sup key={j} className="ml-0.5 font-mono text-small text-accent-primary">
+              <sup key={j} className="ml-0.5 font-mono text-small text-accent-text">
                 {part.slice(1, -1)}
               </sup>
             ) : (

package/src/InlineChip.test.tsx

@@ -52,7 +52,7 @@ describe('InlineChip', () => {
     expect(neutral).toContain('text-text-primary')
     const person = inlineChipClassName('person').split(' ')
     expect(person).toContain('text-body-2')
-    expect(person).toContain('text-accent-primary')
+    expect(person).toContain('text-accent-text')
     const urgent = inlineChipClassName('urgent').split(' ')
     expect(urgent).toContain('text-warning-default')
     // quiet is smaller: its caption size replaces the body size, and its colour survives beside it

package/src/InlineChip.tsx

@@ -33,7 +33,7 @@ export const INLINE_CHIP_TONE_CLASSES = {
   /** A thing or a place — anything that is not a person. */
   neutral: 'bg-bg-active text-text-primary',
   /** A person. */
-  person: 'bg-accent-muted text-accent-primary',
+  person: 'bg-accent-muted text-accent-text',
   /** A person, called urgently. */
   urgent: 'bg-warning-muted text-warning-default',
   /**

package/src/NavItem.mdx

@@ -22,6 +22,12 @@ count — a muted mono number whose tooltip says what it counts.
 
 <Canvas of={NavItemStories.ZeroDrawsNothing} />
 
+- A row with things to do to it — move it, rename it — takes them as
+  `menu`: pass `MenuItem`s, and the row draws the ⋮, shows it while the row
+  is pointed at or focused, and moves the count aside for it.
+
+<Canvas of={NavItemStories.WithMenu} />
+
 ## When not
 
 - An icon rail's tile → **RailItem**.
@@ -47,6 +53,8 @@ import { NavItem } from '@estiva-app/ui'
   `active` from the location, intercept the click, navigate — every
   anchor prop passes through.
 - The label truncates; the count never gives up its width.
+- `menu` is the items only: `menu={<MenuItem label="Move to Folder…" onClick={move} />}`.
+  The ⋮'s name is `More options for {label}` unless `menuLabel` says otherwise.
 
 - A row is 32px tall, 8px in on each side, 8px between the icon and the label,
   the label 14px regular, 6px corners.
@@ -59,6 +67,7 @@ It does these by itself. Write none of them around it.
 |---|---|---|
 | Marks the current place for assistive technology when `active` | `aria-current` |  |
 | Keeps its 32px in a scrolling column | `shrink-0` |  |
+| Shows a ⋮ over the count while pointed at, focused or open, and keeps the row's hover look under it | a positioned `IconButton` + `Menu` over the row, `group-hover` reveals |  |
 
 ## Props
 

package/src/NavItem.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import { IconSquareRounded } from '@tabler/icons-react'
+import { MenuItem } from './Menu'
 import { NavItem } from './NavItem'
 
 const placeholder = <IconSquareRounded size={16} stroke={1.5} />
@@ -37,3 +38,25 @@ export const ZeroDrawsNothing: Story = {
 export const LongLabelTruncates: Story = {
   args: { label: 'An item whose label runs much longer than the column has room for', count: 7, countLabel: '7 open' },
 }
+
+const MENU = (
+  <>
+    <MenuItem label="Action one" onClick={() => {}} />
+    <MenuItem label="Action two" onClick={() => {}} />
+  </>
+)
+
+/** A row with a menu: point at it (or Tab to it) and a ⋮ takes the count's place; the count comes back when you leave. */
+export const WithMenu: Story = {
+  args: { icon: placeholder, count: 6, countLabel: '6 open', menu: MENU },
+}
+
+/** The active row keeps its fill; the ⋮ sits on it the same way. */
+export const WithMenuActive: Story = {
+  args: { icon: placeholder, count: 6, countLabel: '6 open', menu: MENU, active: true },
+}
+
+/** No count: the ⋮ still appears in the same place, and a long label stops short of it. */
+export const WithMenuNoCount: Story = {
+  args: { label: 'An item whose label runs much longer than the column has room for', icon: placeholder, menu: MENU },
+}