@estiva-app/ui 0.60.2 → 0.62.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@estiva-app/ui",
-  "version": "0.60.2",
+  "version": "0.62.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/registry.json

@@ -4,7 +4,7 @@
     "kind": "package",
     "repo": "estiva-ui",
     "package": "@estiva-app/ui",
-    "packageVersion": "0.60.2",
+    "packageVersion": "0.62.0",
     "exports": 134,
     "typeExports": 141,
     "files": null
@@ -3480,7 +3480,7 @@
           "name": "self",
           "takes": "a handler",
           "required": false,
-          "note": "The viewer's own row on top: \"Join\" when they are not in, \"Leave\" when they are."
+          "note": "What the viewer can do: \"Leave\" on their own row when they are in, which is drawn first; a \"Join\" row on top when they are not."
         },
         {
           "name": "candidates",
@@ -5872,6 +5872,12 @@
           "required": false,
           "note": "What the content sits on, for the fade to end in: a panel's `surface` (default), or an inset card's `inset`."
         },
+        {
+          "name": "action",
+          "takes": "anything",
+          "required": false,
+          "note": "A small muted `Button` with a leading icon, at the right of the toggle's row: the way out to where the content lives."
+        },
         {
           "name": "className",
           "takes": "text",

package/src/MembersDialog.mdx

@@ -25,6 +25,7 @@ Who is in this, with joining, leaving and adding people — the list a
 ```tsx
 import { MembersDialog } from '@estiva-app/ui'
 
+const myId = ''
 const roster: { id: string; name: string; picture?: string; caption?: string }[] = []
 const directory: { id: string; label: string; picture?: string }[] = []
 const [open, setOpen] = useState(false)
@@ -32,7 +33,7 @@ const [open, setOpen] = useState(false)
 {open && (
   <MembersDialog
     members={roster}
-    self={{ action: 'join', onToggle: () => {} }}
+    self={{ action: 'join', onToggle: () => {}, id: myId }}
     candidates={directory}
     onAdd={(chosen) => {}}
     onClose={() => setOpen(false)}
@@ -43,9 +44,11 @@ const [open, setOpen] = useState(false)
 - A row is `{ id, name, picture?, caption? }`. The caption is the second
   line: a role, a relation such as "Assignee", or a state. Name the viewer's
   own row "You".
-- `self` puts **Join** or **Leave** on top. Leave it out while membership is
-  still being read: no row is better than a wrong one. The row waits while
-  `onToggle`'s promise runs.
+- `self` gives the viewer **Join** or **Leave**. `self.id` is their row in
+  `members`. A member's row comes first, with a small red **Leave** at its end.
+  A non-member has no row: **Join** is a row on top, like "Add members". Leave
+  `self` out while membership is still being read: no button is better than a
+  wrong one. The button waits while `onToggle`'s promise runs.
 - `onAdd` shows **Add members**, which opens the add layer: an "Invite people"
   **ChipInput** over `candidates`, leaving out anyone already a member by id.
   Return `false` to stay on the layer; otherwise it returns to the roster.

package/src/MembersDialog.stories.tsx

@@ -16,7 +16,7 @@ const meta = {
       { id: 'me', name: 'You', caption: 'Product designer' },
       { id: 'ana', name: 'Ana Duarte', caption: 'Assignee' },
     ],
-    self: { action: 'leave', onToggle: () => {} },
+    self: { action: 'leave', onToggle: () => {}, id: 'me' },
     candidates: people,
     onAdd: () => {},
     onClose: () => {},
@@ -26,23 +26,34 @@ const meta = {
 export default meta
 type Story = StoryObj<typeof meta>
 
-/** A member: Leave and "Add members" on top. */
+/** A member: "Add members" on top, and Leave on your own row. */
 export const Member: Story = {}
 
-/** Not a member yet: Join on top, and nothing to add until you are in. */
+/** Not a member yet: Join on top, no row of your own, and nothing to add until you are in. */
 export const NotAMember: Story = {
   args: {
     members: [{ id: 'ana', name: 'Ana Duarte', caption: 'Assignee' }],
-    self: { action: 'join', onToggle: () => {} },
+    self: { action: 'join', onToggle: () => {}, id: 'me' },
     onAdd: undefined,
   },
 }
 
-/** Membership still being read: no row on top rather than a wrong one. */
+/** Membership still being read: no Join or Leave rather than a wrong one. */
 export const Unknown: Story = {
   args: { self: undefined, onAdd: undefined },
 }
 
+/** Your row comes first, whatever order the roster is given in. */
+export const YouListedLast: Story = {
+  args: {
+    members: [
+      { id: 'ana', name: 'Ana Duarte', caption: 'Assignee' },
+      { id: 'ravi', name: 'Ravi Mehta' },
+      { id: 'me', name: 'You', caption: 'Author' },
+    ],
+  },
+}
+
 /** Someone who left but still holds a role, and a line about what membership covers. */
 export const WithNote: Story = {
   args: {

package/src/MembersDialog.test.tsx

@@ -31,10 +31,24 @@ describe('MembersDialog', () => {
   it('says Join to a non-member and Leave to a member, and calls onToggle once', async () => {
     const user = userEvent.setup()
     const onToggle = vi.fn()
-    const { rerender } = render(<MembersDialog members={members} self={{ action: 'join', onToggle }} onClose={() => {}} />)
+    const { rerender } = render(<MembersDialog members={members.slice(1)} self={{ action: 'join', onToggle, id: 'me' }} onClose={() => {}} />)
     await user.click(await screen.findByRole('button', { name: 'Join' }))
     expect(onToggle).toHaveBeenCalledTimes(1)
-    rerender(<MembersDialog members={members} self={{ action: 'leave', onToggle }} onClose={() => {}} />)
+    rerender(<MembersDialog members={members} self={{ action: 'leave', onToggle, id: 'me' }} onClose={() => {}} />)
+    await user.click(await screen.findByRole('button', { name: 'Leave' }))
+    expect(onToggle).toHaveBeenCalledTimes(2)
+  })
+
+  it("puts Leave on the viewer's own row, and that row first", async () => {
+    render(<MembersDialog members={[...members].reverse()} self={{ action: 'leave', onToggle: () => {}, id: 'me' }} onClose={() => {}} />)
+    const leave = await screen.findByRole('button', { name: 'Leave' })
+    const row = leave.parentElement!
+    expect(row.textContent).toContain('You')
+    expect(row.parentElement!.textContent!.indexOf('You')).toBeLessThan(row.parentElement!.textContent!.indexOf('Ana Duarte'))
+  })
+
+  it('keeps Leave on top when the viewer has no row of their own', async () => {
+    render(<MembersDialog members={members.slice(1)} self={{ action: 'leave', onToggle: () => {}, id: 'me' }} onClose={() => {}} />)
     expect(await screen.findByRole('button', { name: 'Leave' })).toBeTruthy()
   })
 

package/src/MembersDialog.tsx

@@ -34,13 +34,16 @@ export interface MembersDialogProps {
   /** The number in the title's chip. Defaults to how many rows there are. */
   count?: number
   /**
-   * The viewer's own row on top: "Join" when they are not in, "Leave" when
-   * they are. Absent while it is not known, or where they cannot change it —
-   * no row is better than a wrong one.
+   * What the viewer can do: "Leave" on their own row when they are in, which
+   * is drawn first; a "Join" row on top when they are not. Absent while it is
+   * not known, or where they cannot change it — no button is better than a
+   * wrong one.
    */
   self?: {
     action: MembersDialogSelfAction
     onToggle: () => void | Promise<unknown>
+    /** The viewer's id: the row in `members` that carries Leave and comes first. */
+    id: string
   }
   /** Who "Add members" may offer. Members are left out by id. */
   candidates?: MembersDialogCandidate[]
@@ -65,8 +68,10 @@ const LEADING_CLASSES = 'size-8 rounded-md bg-accent-muted flex items-center jus
  *
  * Moved from Peek's `MembersDialog` (2026-10-06; Katerina's design of 22 July,
  * with the row and inset rulings of 15 September). Two layers in one dialog:
- * the roster, with the viewer's Join or Leave and "Add members" on top, and the
- * add layer, whose back arrow returns to the roster. Adding returns to the
+ * the roster, with "Add members" (and Join, for a non-member) on top, and the
+ * add layer, whose back arrow returns to the roster. Leave is a small red
+ * button on the viewer's own row, which always comes first (Katerina, 8
+ * October: a Leave row on top looked like an invite, the same as Add members). Adding returns to the
  * roster so the new people are visible at once.
  */
 export function MembersDialog({ members, count, self, candidates = [], onAdd, note, initialView = 'list', onClose }: MembersDialogProps) {
@@ -92,6 +97,11 @@ export function MembersDialog({ members, count, self, candidates = [], onAdd, no
     setView('list')
   }
 
+  // Leave sits on the viewer's own row, drawn first. A viewer with no row of their own gets Leave on top, as Join is.
+  const ownRow = self?.action === 'leave' ? members.find((m) => m.id === self.id) : undefined
+  const roster = ownRow ? [ownRow, ...members.filter((m) => m !== ownRow)] : members
+  const selfOnTop = self && !ownRow
+
   if (view === 'add' && onAdd) {
     return (
       <DialogShell
@@ -146,9 +156,9 @@ export function MembersDialog({ members, count, self, candidates = [], onAdd, no
     >
       {/* MenuItem outside a Menu is a plain button. Its fill sits 8px in from the dialog's sides,
           and its own 12px inset puts the square over the rows' faces, 20px in, at the same 48px. */}
-      {(self || onAdd) && (
+      {(selfOnTop || onAdd) && (
         <div className="flex flex-col px-2">
-          {self && (
+          {selfOnTop && (
             <MenuItem
               size="tall"
               className="py-2"
@@ -169,13 +179,18 @@ export function MembersDialog({ members, count, self, candidates = [], onAdd, no
           )}
         </div>
       )}
-      {members.map((member) => (
+      {roster.map((member) => (
         <div key={member.id} className="flex h-12 items-center gap-3 px-5">
           <Avatar size={32} name={member.name} src={member.picture} />
           <div className="flex min-w-0 flex-1 flex-col justify-center gap-[2px]">
             <div className="truncate text-body-2 text-text-primary">{member.name}</div>
             {member.caption && <div className="truncate text-caption text-text-secondary">{member.caption}</div>}
           </div>
+          {member === ownRow && (
+            <Button variant="destructive" size="small" disabled={toggling} onClick={() => void toggle()}>
+              Leave
+            </Button>
+          )}
         </div>
       ))}
       {note && <div className="px-5 pb-2 pt-3 text-caption text-text-secondary">{note}</div>}

package/src/ShowMore.mdx

@@ -42,6 +42,13 @@ import { ShowMore } from '@estiva-app/ui'
   (a panel, the default) or `inset` (inside an inset card). A fade into the
   wrong colour shows as a band.
 - `maxHeight` is in px, 96 by default.
+- The toggle is a small outlined `Button` with a chevron: down on "Show more",
+  up on "Show less". Its edge starts where the content does.
+- `action` is one more small muted `Button`, with a leading icon, on the toggle's row, at its
+  right: the way out to where the content lives ("Open in Estiva Ship"). The
+  row is drawn for it even when the content fits and there is no toggle.
+
+<Canvas of={ShowMoreStories.WithAnAction} />
 
 <Canvas of={ShowMoreStories.InACard} />
 

package/src/ShowMore.stories.tsx

@@ -1,4 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
+import { IconExternalLink } from '@tabler/icons-react'
+import { Button } from './Button'
 import { Card } from './Card'
 import { ShowMore } from './ShowMore'
 
@@ -37,3 +39,15 @@ export const InACard: Story = {
     </Card>
   ),
 }
+
+/** `action`: one more small button, level with Show more at the right of its row. */
+export const WithAnAction: Story = {
+  args: { surface: 'inset', action: <Button size="small" leadingIcon={<IconExternalLink stroke={1.5} className="size-3.5" />}>Open in Estiva Ship</Button> },
+  render: InACard.render,
+}
+
+/** Short content with an action: no toggle, and the action keeps its place at the right. */
+export const ShortWithAnAction: Story = {
+  args: { ...WithAnAction.args, children: <p className="text-caption text-text-secondary">One line of description.</p> },
+  render: InACard.render,
+}

package/src/ShowMore.test.tsx

@@ -6,6 +6,7 @@
 import { afterEach, describe, expect, it, vi } from 'vitest'
 import { cleanup, render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
+import { Button } from './Button'
 import { ShowMore } from './ShowMore'
 
 afterEach(() => {
@@ -41,4 +42,19 @@ describe('ShowMore', () => {
     expect(screen.queryByRole('button')).toBeNull()
     expect(screen.getByText('Short').parentElement!.style.maxHeight).toBe('')
   })
+
+  it('puts an action level with the toggle, at the right of its row', () => {
+    contentHeight(300)
+    render(<ShowMore maxHeight={96} action={<Button>Open</Button>}><p>Long</p></ShowMore>)
+    const row = screen.getByRole('button', { name: 'Show more' }).parentElement!
+    expect(row.contains(screen.getByRole('button', { name: 'Open' }))).toBe(true)
+    expect(row.className).toMatch(/justify-between/)
+  })
+
+  it('keeps the action when the content fits, with no toggle', () => {
+    contentHeight(40)
+    render(<ShowMore maxHeight={96} action={<Button>Open</Button>}><p>Short</p></ShowMore>)
+    expect(screen.queryByRole('button', { name: /Show/ })).toBeNull()
+    expect(screen.getByRole('button', { name: 'Open' })).toBeTruthy()
+  })
 })

package/src/ShowMore.tsx

@@ -1,4 +1,5 @@
 import { useLayoutEffect, useRef, useState, type ReactNode } from 'react'
+import { IconChevronDown, IconChevronUp } from '@tabler/icons-react'
 import { Button } from './Button'
 import { cn } from './cn'
 
@@ -17,6 +18,10 @@ import { cn } from './cn'
  *
  * Focus arriving inside the cut content opens it: a field or a link there,
  * reached by Tab or a click, is never worked on out of sight.
+ *
+ * `action` is one more small button on the toggle's row, at its right
+ * (Katerina, 8 October: Peek's block card puts "Open in Estiva Ship" level with
+ * Show more). The row is drawn for it whether or not the content is cut.
  */
 export interface ShowMoreProps {
   children: ReactNode
@@ -24,12 +29,14 @@ export interface ShowMoreProps {
   maxHeight?: number
   /** What the content sits on, for the fade to end in: a panel's `surface` (default), or an inset card's `inset`. */
   surface?: 'surface' | 'inset'
+  /** A small muted `Button` with a leading icon, at the right of the toggle's row: the way out to where the content lives. Its words end where the content does. */
+  action?: ReactNode
   className?: string
 }
 
 const FADE_CLASSES = { surface: 'from-bg-surface', inset: 'from-bg-inset' } as const
 
-export function ShowMore({ children, maxHeight = 96, surface = 'surface', className }: ShowMoreProps) {
+export function ShowMore({ children, maxHeight = 96, surface = 'surface', action, className }: ShowMoreProps) {
   const box = useRef<HTMLDivElement>(null)
   const [open, setOpen] = useState(false)
   const [overflows, setOverflows] = useState(false)
@@ -52,12 +59,36 @@ export function ShowMore({ children, maxHeight = 96, surface = 'surface', classN
         {children}
         {cut && <div aria-hidden className={cn('pointer-events-none absolute inset-x-0 bottom-0 h-10 bg-gradient-to-t to-transparent', FADE_CLASSES[surface])} />}
       </div>
-      {overflows && (
-        // `-ml-1.5`: the small button's own 6px inset, so its words start where the content's do.
-        <Button variant="muted" size="small" className="-ml-1.5 mt-1" aria-expanded={open} onClick={() => setOpen((o) => !o)}>
-          {open ? 'Show less' : 'Show more'}
-        </Button>
+      {action ? (
+        <div className={cn('mt-1 flex w-full items-center gap-2', overflows ? 'justify-between' : 'justify-end')}>
+          {overflows && <Toggle open={open} onToggle={() => setOpen((o) => !o)} />}
+          {/* `-mr-2`: a small button's 8px right inset beside a leading icon, so its words end where the content's do. */}
+          <div className="-mr-2 flex shrink-0">{action}</div>
+        </div>
+      ) : (
+        overflows && <Toggle open={open} onToggle={() => setOpen((o) => !o)} className="mt-1" />
       )}
     </div>
   )
 }
+
+/**
+ * Outlined, with a chevron that says which way it goes (Katerina, 8 October):
+ * the one control of the part, so it has an edge. Its edge starts where the
+ * content does.
+ */
+function Toggle({ open, onToggle, className }: { open: boolean; onToggle: () => void; className?: string }) {
+  const Icon = open ? IconChevronUp : IconChevronDown
+  return (
+    <Button
+      variant="outlined"
+      size="small"
+      leadingIcon={<Icon stroke={1.5} className="size-3.5" />}
+      className={className}
+      aria-expanded={open}
+      onClick={onToggle}
+    >
+      {open ? 'Show less' : 'Show more'}
+    </Button>
+  )
+}