@estiva-app/ui 0.57.4 → 0.59.0

package/src/ShowMore.test.tsx

@@ -0,0 +1,44 @@
+// @vitest-environment jsdom
+/**
+ * The page's claims: content taller than the limit is cut with "Show more",
+ * which opens it and says so; content that fits has no button at all.
+ */
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { cleanup, render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { ShowMore } from './ShowMore'
+
+afterEach(() => {
+  cleanup()
+  vi.restoreAllMocks()
+})
+
+/** jsdom lays nothing out: every box says it is this tall. */
+const contentHeight = (px: number) => vi.spyOn(HTMLElement.prototype, 'scrollHeight', 'get').mockReturnValue(px)
+
+describe('ShowMore', () => {
+  it('cuts content taller than the limit, and opens it', async () => {
+    contentHeight(300)
+    render(<ShowMore maxHeight={96}><p>Long</p></ShowMore>)
+    const button = screen.getByRole('button', { name: 'Show more' })
+    expect(button.getAttribute('aria-expanded')).toBe('false')
+    expect(screen.getByText('Long').parentElement!.style.maxHeight).toBe('96px')
+    await userEvent.click(button)
+    expect(screen.getByRole('button', { name: 'Show less' }).getAttribute('aria-expanded')).toBe('true')
+    expect(screen.getByText('Long').parentElement!.style.maxHeight).toBe('')
+  })
+
+  it('opens when focus arrives inside the cut content', async () => {
+    contentHeight(300)
+    render(<ShowMore maxHeight={96}><input aria-label="Field" /></ShowMore>)
+    await userEvent.click(screen.getByRole('textbox', { name: 'Field' }))
+    expect(screen.getByRole('button', { name: 'Show less' })).toBeTruthy()
+  })
+
+  it('draws content that fits whole, with no button', () => {
+    contentHeight(40)
+    render(<ShowMore maxHeight={96}><p>Short</p></ShowMore>)
+    expect(screen.queryByRole('button')).toBeNull()
+    expect(screen.getByText('Short').parentElement!.style.maxHeight).toBe('')
+  })
+})

package/src/ShowMore.tsx

@@ -0,0 +1,63 @@
+import { useLayoutEffect, useRef, useState, type ReactNode } from 'react'
+import { Button } from './Button'
+import { cn } from './cn'
+
+/**
+ * Long content cut at a height behind a fade, with "Show more" under it
+ * (Katerina, 7 October: a long description on a side panel pushed what was
+ * under it out of sight).
+ *
+ * Content no taller than `maxHeight` is drawn whole, with no fade and no
+ * button: the cut is for what would not fit, never a look. The height is
+ * measured, and measured again whenever the content changes size, so an
+ * edit that makes it long or short brings the button or takes it away.
+ *
+ * The fade ends in the surface the content sits on, which only the caller
+ * knows: `surface`, by name, so no app writes a colour into the part.
+ *
+ * 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.
+ */
+export interface ShowMoreProps {
+  children: ReactNode
+  /** The height to cut at, in px. Default 96: about seven lines of caption text. */
+  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'
+  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) {
+  const box = useRef<HTMLDivElement>(null)
+  const [open, setOpen] = useState(false)
+  const [overflows, setOverflows] = useState(false)
+
+  useLayoutEffect(() => {
+    const el = box.current
+    if (!el) return
+    const measure = () => setOverflows(el.scrollHeight > maxHeight + 1)
+    measure()
+    if (typeof ResizeObserver === 'undefined') return
+    const observer = new ResizeObserver(measure)
+    observer.observe(el)
+    return () => observer.disconnect()
+  }, [maxHeight])
+
+  const cut = overflows && !open
+  return (
+    <div className={cn('flex flex-col items-start', className)}>
+      <div ref={box} className={cn('relative w-full', cut && 'overflow-hidden')} style={cut ? { maxHeight } : undefined} onFocus={cut ? () => setOpen(true) : undefined}>
+        {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>
+      )}
+    </div>
+  )
+}

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/eslint/no-restyled-part.ts

@@ -151,6 +151,7 @@ export const PART_LOOK_PROPS: Record<string, string[]> = {
   RichText: ['size'],
   SectionHeader: ['hover', 'look'],
   SectionLabel: ['tone', 'truncate'],
+  ShowMore: ['surface'],
   Select: ['size'],
   Tabs: ['size'],
   TextInput: ['size'],

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'
@@ -76,6 +78,7 @@ export { NavTree, NavTreeSection, type NavTreeGroup, type NavTreeNode, type NavT
 export { Popover, type PopoverProps } from './Popover'
 export { SuggestionMenu, type SuggestionMenuHandle, type SuggestionMenuProps, type SuggestionMenuRow, type SuggestionMenuSection } from './SuggestionMenu'
 export { ScrollArea, type ScrollAreaProps } from './ScrollArea'
+export { ShowMore, type ShowMoreProps } from './ShowMore'
 export { ReactionPicker, type ReactionOption, type ReactionPickerProps } from './ReactionPicker'
 export { Toolbar, ToolbarButton, ToolbarInput, ToolbarLink, ToolbarSeparator, type ToolbarProps, type ToolbarButtonProps, type ToolbarInputProps, type ToolbarLinkProps } from './Toolbar'
 export { PreviewCard, type PreviewCardProps } from './PreviewCard'

package/src/looks.ts

@@ -37,9 +37,15 @@ export const FIELD_SHELL_CLASSES = 'bg-bg-field border border-border-field shado
 /** A panel that floats over the page: Menu's panel and Tooltip. */
 export const FLOATING_SURFACE_CLASSES = 'rounded-lg border border-border-default bg-bg-elevated shadow-lg'
 
+/** A count beside a label, in the muted colour: NavItem's number and SectionHeader's `count`. */
+export const COUNT_TEXT_CLASSES = 'font-mono text-caption tabular-nums text-text-muted'
+
 /** 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 130 names over 69 files: 100 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, and moveBlock and blockDropCursor, the drop in the gutter, on 5 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: 100, helper: 29, hook: 1 })
-    expect(new Set(registry.entries.map((one) => one.sourceFile)).size).toBe(69)
+    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(65)
+    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 |
@@ -83,10 +85,11 @@ fork freely, owe nothing back, mention it on the package's ticket.
 | Label–value rows (a details rail) | **Property** — `row` and `stacked` |
 | The bar across the top of a column: its title, and the buttons that act on the whole column | **ContainerHeader** — inside the package's columns; in an app, the header comes with **Panel** or **ListColumn** |
 | A box that can hold more than fits — a list that grows with its data counts, even when today's data fits | **ScrollArea** — its bar is drawn over the content and takes no width |
+| Text that can run long above things the reader needs, cut behind a fade | **ShowMore** — measures; what fits has no button |
 | A status, a count or a category, in a small pill | **Chip** — six colour types; the colour is the message, the label makes it legible |
 | Something new on a row or a card, no count | **UnreadDot** — the 6px dot in a 24px slot; in a sidebar row, **NavItem** `unread` draws it |
 | One thing — a conversation, a project, an object — as a box you can pick | **Card** — the fill by what it sits on; `href` for a link, `hover="fill"` in a feed |
-| A section heading, chevron, hover actions | **SectionHeader** |
+| A section heading, chevron, hover actions, a count beside the title | **SectionHeader** |
 | A group of rows that opens and closes, and stays how you left it | **CollapsibleSection** — `storageKey` remembers |
 | The uppercase micro-label | **SectionLabel** |
 | A hairline | **Divider** |