@estiva-app/ui 0.58.0 → 0.59.0

package/src/MembersDialog.tsx

@@ -0,0 +1,184 @@
+import { useId, useState, type ReactNode } from 'react'
+import { IconArrowLeft, IconUserMinus, IconUserPlus } from '@tabler/icons-react'
+import { Avatar } from './Avatar'
+import { Button } from './Button'
+import { Chip } from './Chip'
+import { ChipInput, type ChipInputOption } from './ChipInput'
+import { DialogShell } from './DialogShell'
+import { Field } from './Field'
+import { Form } from './Form'
+import { IconButton } from './IconButton'
+import { MenuItem } from './Menu'
+
+/** One row of the roster: a face, a name, and an optional second line. */
+export interface MembersDialogMember {
+  id: string
+  name: string
+  /** A picture URL, resolved by the caller, as `Avatar` takes its `src`. */
+  picture?: string
+  /** The line under the name: a role, a relation ("Assignee"), or a state. */
+  caption?: string
+}
+
+/** Somebody who can be added: a `ChipInput` option with a face. */
+export interface MembersDialogCandidate extends ChipInputOption {
+  picture?: string
+}
+
+/** What the viewer's own row offers: in when they are out, out when they are in. */
+export type MembersDialogSelfAction = 'join' | 'leave'
+
+export interface MembersDialogProps {
+  /** The roster, in the order to draw it. The viewer's own row is the caller's to name ("You"). */
+  members: MembersDialogMember[]
+  /** 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.
+   */
+  self?: {
+    action: MembersDialogSelfAction
+    onToggle: () => void | Promise<unknown>
+  }
+  /** Who "Add members" may offer. Members are left out by id. */
+  candidates?: MembersDialogCandidate[]
+  /**
+   * Adds the people chosen. With it, the "Add members" row shows and opens the
+   * add layer. Return `false` (or a promise of it) to stay on the add layer —
+   * nothing was added; anything else goes back to the roster.
+   */
+  onAdd?: (chosen: MembersDialogCandidate[]) => void | boolean | Promise<void | boolean>
+  /** One line under the roster — what membership does and does not cover. */
+  note?: ReactNode
+  /** `add` opens straight on the add layer. */
+  initialView?: 'list' | 'add'
+  onClose: () => void
+}
+
+const LEADING_CLASSES = 'size-8 rounded-md bg-accent-muted flex items-center justify-center shrink-0 text-accent-primary'
+
+/**
+ * Who is in this, with joining, leaving and adding people — the list a
+ * `MembersPill` opens.
+ *
+ * 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
+ * roster so the new people are visible at once.
+ */
+export function MembersDialog({ members, count, self, candidates = [], onAdd, note, initialView = 'list', onClose }: MembersDialogProps) {
+  const [view, setView] = useState<'list' | 'add'>(onAdd ? initialView : 'list')
+  const [chosen, setChosen] = useState<MembersDialogCandidate[]>([])
+  const [toggling, setToggling] = useState(false)
+  const formId = useId()
+
+  const toggle = async () => {
+    if (!self || toggling) return
+    setToggling(true)
+    try {
+      await self.onToggle()
+    } finally {
+      setToggling(false)
+    }
+  }
+
+  const add = async () => {
+    if (!onAdd || chosen.length === 0) return
+    if ((await onAdd(chosen)) === false) return
+    setChosen([])
+    setView('list')
+  }
+
+  if (view === 'add' && onAdd) {
+    return (
+      <DialogShell
+        title="Add members"
+        onClose={onClose}
+        headerContent={
+          <div className="flex min-w-0 items-center gap-2">
+            <IconButton tooltip="Back to members" aria-label="Back to members" className="-ml-2" onClick={() => setView('list')}>
+              <IconArrowLeft size={16} stroke={1.5} />
+            </IconButton>
+            <span className="truncate text-h4 text-text-primary">Add members</span>
+          </div>
+        }
+        bodyClassName="flex flex-col gap-6"
+        footer={
+          <>
+            <Button variant="muted" onClick={onClose}>Cancel</Button>
+            <Button variant="primary" type="submit" form={formId} disabled={chosen.length === 0}>Invite</Button>
+          </>
+        }
+      >
+        <Form id={formId} onSubmit={add}>
+          <Field label="Invite people" required>
+            <ChipInput
+              value={chosen}
+              onChange={setChosen}
+              options={candidates}
+              placeholder="Search people..."
+              excludeIds={members.map((m) => m.id)}
+              chipLeading={(o) => <Avatar name={o.label} src={o.picture} size={16} />}
+              rowLeading={(o) => <Avatar name={o.label} src={o.picture} size={32} />}
+              autoFocus
+            />
+          </Field>
+        </Form>
+      </DialogShell>
+    )
+  }
+
+  return (
+    <DialogShell
+      title="Members"
+      onClose={onClose}
+      headerContent={
+        <div className="flex min-w-0 items-center gap-2">
+          <span className="truncate text-h4 text-text-primary">Members</span>
+          <Chip label={String(count ?? members.length)} />
+        </div>
+      }
+      bodyMaxHeight="max-h-[400px]"
+      bodyClassName="p-0 py-2"
+    >
+      {/* 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) && (
+        <div className="flex flex-col px-2">
+          {self && (
+            <MenuItem
+              size="tall"
+              className="py-2"
+              disabled={toggling}
+              onClick={() => void toggle()}
+              leading={<span className={LEADING_CLASSES}>{self.action === 'join' ? <IconUserPlus size={16} stroke={1.5} /> : <IconUserMinus size={16} stroke={1.5} />}</span>}
+              label={self.action === 'join' ? 'Join' : 'Leave'}
+            />
+          )}
+          {onAdd && (
+            <MenuItem
+              size="tall"
+              className="py-2"
+              onClick={() => setView('add')}
+              leading={<span className={LEADING_CLASSES}><IconUserPlus size={16} stroke={1.5} /></span>}
+              label="Add members"
+            />
+          )}
+        </div>
+      )}
+      {members.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>
+        </div>
+      ))}
+      {note && <div className="px-5 pb-2 pt-3 text-caption text-text-secondary">{note}</div>}
+    </DialogShell>
+  )
+}

package/src/MembersPill.mdx

@@ -0,0 +1,45 @@
+import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks'
+import * as MembersPillStories from './MembersPill.stories'
+
+<Meta of={MembersPillStories} />
+
+# MembersPill
+
+Who is in this: up to three faces and the total, in a small outlined pill
+that opens the full list.
+
+<Canvas of={MembersPillStories.TwoMembers} />
+
+## When
+
+- A page or conversation header that says, at a glance, who is in it, and
+  opens the list — a **MembersDialog** — on a press.
+
+## When not
+
+- The faces alone, with nothing to open → **AvatarGroup**.
+- The people need to be readable → **MembersDialog**, or a list of **Person** rows.
+
+## How
+
+```tsx
+import { MembersPill } from '@estiva-app/ui'
+
+const people: { name: string; picture?: string }[] = []
+const [open, setOpen] = useState(false)
+
+<MembersPill members={people} onClick={() => setOpen(true)} />
+```
+
+- `members` is what **AvatarGroup** takes; the first three are drawn.
+- `count` is the number beside the faces when it is not `members.length` —
+  pass three faces and the real total.
+- No `onClick` disables it; no members draws nothing.
+
+## What it owns
+
+Nothing. It only draws. Clicks and keys are yours.
+
+## Props
+
+<Controls of={MembersPillStories.TwoMembers} />

package/src/MembersPill.stories.tsx

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { MembersPill } from './MembersPill'
+
+const meta = {
+  title: 'Primitives/MembersPill',
+  component: MembersPill,
+  args: {
+    members: [{ name: 'Ana Duarte' }, { name: 'Ravi Mehta' }],
+    onClick: () => {},
+  },
+} satisfies Meta<typeof MembersPill>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const TwoMembers: Story = {}
+
+export const One: Story = {
+  args: { members: [{ name: 'Ana Duarte' }] },
+}
+
+/** Twelve members, three faces: the count says the rest. */
+export const Many: Story = {
+  args: {
+    members: [{ name: 'Ana Duarte' }, { name: 'Ravi Mehta' }, { name: 'Marta Silva' }],
+    count: 12,
+  },
+}
+
+/** Nothing to open — the pill is disabled, not another element. */
+export const Disabled: Story = {
+  args: { onClick: undefined },
+}
+
+/** No members draws nothing at all. */
+export const Empty: Story = {
+  args: { members: [] },
+}

package/src/MembersPill.tsx

@@ -0,0 +1,35 @@
+import { AvatarGroup, type AvatarGroupMember } from './AvatarGroup'
+import { Button } from './Button'
+import { cn } from './cn'
+import { MONO_CAPTION_CLASSES } from './looks'
+
+export interface MembersPillProps {
+  /** Who is in it, in order. Up to three faces are drawn. */
+  members: AvatarGroupMember[]
+  /** The number beside the faces. Defaults to how many members there are. */
+  count?: number
+  /** Opens the list — usually a `MembersDialog`. Without it the pill is disabled. */
+  onClick?: () => void
+  className?: string
+}
+
+/**
+ * Who is in this: up to three faces and the total, in a small outlined pill
+ * that opens the full list.
+ *
+ * Moved from Peek's `MembersPill` (2026-10-06), unchanged: the package's
+ * Button, outlined, at its default 32px — the faces sit 3px inside the
+ * hairline on the top, the bottom and the left, 8px from the count (Katerina's
+ * pick of 15 September). `disabled` rather than another element when there is
+ * nothing to press, so one element keeps one set of pixels.
+ */
+export function MembersPill({ members, count, onClick, className }: MembersPillProps) {
+  const total = count ?? members.length
+  if (total === 0) return null
+  return (
+    <Button variant="outlined" aria-label={`${total} ${total === 1 ? 'member' : 'members'}`} disabled={!onClick} onClick={onClick} className={cn('gap-2 pl-[3px] pr-2', className)}>
+      <AvatarGroup members={members} />
+      <span className={cn(MONO_CAPTION_CLASSES, 'signal:tabular-nums')}>{total}</span>
+    </Button>
+  )
+}

package/src/Tabs.mdx

@@ -17,8 +17,13 @@ is a neutral fill, not the accent — selection is a place, not a highlight.
   baseline — the one way a number sits beside a label. A count of `0` is
   still drawn ("Assigned to me · 0" is an answer); an absent count draws
   nothing.
+- A tab with `unread` draws the **UnreadDot** after its label (and count),
+  without the dot's 24px slot so the row keeps one height, and says "new" in
+  its accessible name.
 - Two sizes: `default` (14px) and `small` (12px, the denser geometry).
 
+<Canvas of={TabsStories.WithUnread} />
+
 <Canvas of={TabsStories.WithAZero} />
 
 ## When not

package/src/Tabs.stories.tsx

@@ -74,6 +74,21 @@ export const WithAnIcon: Story = {
   ),
 }
 
+/** `unread`: something new behind a tab you are not on — the accent dot after the label. */
+export const WithUnread: Story = {
+  args: { tabs: [], active: 'overview', onChange: () => {} },
+  render: () => (
+    <Demo
+      initial="overview"
+      tabs={[
+        { id: 'overview', label: 'Overview' },
+        { id: 'activity', label: 'Activity', unread: true },
+        { id: 'all', label: 'All', count: 12, unread: true },
+      ]}
+    />
+  ),
+}
+
 /** `small` is the 12px geometry. */
 export const Small: Story = {
   args: { tabs: [], active: 'conversations', onChange: () => {} },

package/src/Tabs.test.tsx

@@ -123,6 +123,14 @@ describe('Tabs', () => {
     expect(list.getAttribute('aria-labelledby')).toBeNull()
   })
 
+  it('an unread tab draws the dot and says "new" in its name; the others draw neither', () => {
+    const tabs: TabDef<Id>[] = [{ id: 'one', label: 'One' }, { id: 'two', label: 'Two', count: 3, unread: true }, { id: 'three', label: 'Three' }]
+    render(<Tabs tabs={tabs} active="one" onChange={() => {}} />)
+    expect(screen.getByRole('tab', { name: /^Two.*\bnew$/ }).querySelector('[data-unread]')).not.toBeNull()
+    expect(screen.getByRole('tab', { name: 'One' }).querySelector('[data-unread]')).toBeNull()
+    expect(screen.getByRole('tab', { name: 'Three' }).querySelector('[data-unread]')).toBeNull()
+  })
+
   it('puts className on the outer box, around the row', () => {
     const { container } = render(<Tabs tabs={THREE} active="one" onChange={() => {}} className="mt-4" />)
     const outer = container.firstElementChild as HTMLElement

package/src/Tabs.tsx

@@ -1,6 +1,7 @@
 import type { ReactNode } from 'react'
 import { Tabs as BaseTabs } from '@base-ui/react/tabs'
 import { cn } from './cn'
+import { UnreadDot } from './UnreadDot'
 
 /**
  * A row of tabs. Ship's Tabs (2026-09-01), which was Peek's TopicTabs with
@@ -26,6 +27,8 @@ export interface TabDef<T extends string> {
   count?: number
   /** 16px, stroke 1.5. */
   icon?: ReactNode
+  /** Something new behind this tab: the `UnreadDot` after the label, and "new" in the tab's accessible name. */
+  unread?: boolean
 }
 
 export interface TabsProps<T extends string> {
@@ -91,6 +94,15 @@ export function Tabs<T extends string>({ tabs, active, onChange, size = 'default
                 <span className="ml-2.5 font-mono text-caption tabular-nums text-text-secondary">{tab.count}</span>
               ) : null}
             </span>
+            {/* The dot without its 24px slot: a tab is a line of text, and the
+                slot would make an unread tab taller than its neighbours. The
+                disc says nothing to a screen reader, so the name says "new". */}
+            {tab.unread ? (
+              <>
+                <UnreadDot className="h-auto w-auto" />
+                <span className="sr-only">new</span>
+              </>
+            ) : null}
           </BaseTabs.Tab>
         ))}
       </BaseTabs.List>

package/src/index.ts

@@ -13,6 +13,8 @@ export { AppShell, type AppShellProps } from './AppShell'
 export { AttachmentCard, type AttachmentCardProps, type AttachmentCardState } from './AttachmentCard'
 export { Avatar, hueFor, initialsFor, type AvatarProps } from './Avatar'
 export { AvatarGroup, type AvatarGroupMember, type AvatarGroupProps } from './AvatarGroup'
+export { MembersPill, type MembersPillProps } from './MembersPill'
+export { MembersDialog, type MembersDialogCandidate, type MembersDialogMember, type MembersDialogProps, type MembersDialogSelfAction } from './MembersDialog'
 export { Banner, type BannerProps, type BannerTone } from './Banner'
 export { BlockHandle, blockAtY, type BlockHandleProps, type BlockHandleEditing, type HandleBlock } from './BlockHandle'
 export { Button, type ButtonProps, type ButtonSize, type ButtonVariant } from './Button'

package/src/looks.ts

@@ -43,6 +43,9 @@ export const COUNT_TEXT_CLASSES = 'font-mono text-caption tabular-nums text-text
 /** A chip's words: Chip's label and Reaction's count. */
 export const CHIP_TEXT_CLASSES = 'text-chip signal:font-mono signal:text-small signal:font-semibold signal:tabular-nums'
 
+/** Small secondary words that turn mono under signal: Kbd's key, CommandPalette's footer and MembersPill's count. */
+export const MONO_CAPTION_CLASSES = 'text-caption text-text-secondary signal:font-mono signal:text-small'
+
 /** Words typed straight into an input with no box of its own: SearchInput and ChipInput. */
 export const BARE_INPUT_CLASSES = 'bg-transparent text-text-primary placeholder:text-text-muted outline-none'
 

package/src/registry/registry.test.ts

@@ -48,19 +48,19 @@ describe('the registry builds', () => {
     expect(registry.entries.map((one) => one.name).sort()).toEqual(values.map((one) => one.name).sort())
   })
 
-  it('counts 131 names over 70 files: 101 components, 29 helpers and 1 hook (NavTree, NavTreeSection, the composer triggers and UnreadDot joined on 2 October; BlockHandle and EditorBlockHandle (RIC-18) on 2 October, moveBlock and blockDropCursor, the drop in the gutter, on 5 October, and ShowMore on 7 October)', () => {
+  it('counts 133 names over 72 files: 103 components, 29 helpers and 1 hook (NavTree, NavTreeSection, the composer triggers and UnreadDot joined on 2 October; BlockHandle and EditorBlockHandle (RIC-18) on 2 October, moveBlock and blockDropCursor, the drop in the gutter, on 5 October, MembersPill and MembersDialog, moved from Peek (SHI-31), on 6 October, and ShowMore on 7 October)', () => {
     // The reconciliation GATES.md §24 explains. If this changes, that changes.
     // The ten `EDITOR_EXTENSIONS` count as components by their names; they are
     // editor extensions, documented on SelectionToolbar's, BlockNodes' and
     // ComposerTriggers' pages.
     const kinds = registry.entries.reduce<Record<string, number>>((all, one) => ({ ...all, [one.kind]: (all[one.kind] ?? 0) + 1 }), {})
-    expect(kinds).toEqual({ component: 101, helper: 29, hook: 1 })
-    expect(new Set(registry.entries.map((one) => one.sourceFile)).size).toBe(70)
+    expect(kinds).toEqual({ component: 103, helper: 29, hook: 1 })
+    expect(new Set(registry.entries.map((one) => one.sourceFile)).size).toBe(72)
   })
 
   it('gives every entry a purpose, from its own page or from the comment above it', () => {
     expect(registry.entries.filter((one) => one.purpose.trim() === '')).toEqual([])
-    expect(registry.entries.filter((one) => one.purposeFrom === 'page').length).toBe(66)
+    expect(registry.entries.filter((one) => one.purposeFrom === 'page').length).toBe(68)
     expect(registry.entries.filter((one) => one.purposeFrom === 'comment').length).toBe(65)
   })
 

package/stories/Choosing.mdx

@@ -51,6 +51,8 @@ fork freely, owe nothing back, mention it on the package's ticket.
 |---|---|
 | One face | **Avatar** |
 | Several faces, overlapping | **AvatarGroup** |
+| Who is in it, at a glance, opening the list | **MembersPill** |
+| Who is in it, with Join, Leave and adding people | **MembersDialog** |
 | Face and name in a row | **Person** |
 | The face that opens a menu | **PersonTrigger** |
 | Who you are, where you are, sign out | **IdentityMenu** — the account menu, ready-made |