@estiva-app/ui 0.12.1 → 0.12.3

package/src/Popover.test.tsx

@@ -186,3 +186,23 @@ describe('Popover', () => {
     expect(onOpenChange).toHaveBeenCalledWith(false)
   })
 })
+
+/**
+ * `align="center"` (0.12.2, ADOPTION B21). Peek's selection toolbar is centred
+ * over the text you selected, and kept its own placement arithmetic while only
+ * the two edges were mapped.
+ */
+describe('Popover, centred on its anchor', () => {
+  it('asks Base UI for the middle', async () => {
+    render(
+      <Popover trigger={<Button>Open</Button>} align="center" ariaLabel="A panel">
+        <span>Inside</span>
+      </Popover>,
+    )
+    await userEvent.click(screen.getByRole('button', { name: 'Open' }))
+    const panel = await screen.findByRole('dialog')
+    // Base UI writes the resolved placement on the positioner it owns.
+    const positioner = panel.closest('[data-align]') ?? panel.parentElement
+    expect(positioner?.getAttribute('data-align')).toBe('center')
+  })
+})

package/src/Popover.tsx

@@ -51,8 +51,17 @@ export interface PopoverProps {
    * Render it always and toggle `open`; do not mount it only while it is open.
    */
   anchor?: HTMLElement | DOMRect | null
-  /** Which of the panel's edges hangs from the trigger's. Default left. */
-  align?: 'left' | 'right'
+  /**
+   * Which of the panel's edges hangs from the trigger's, or `center` to put
+   * the panel's middle over the anchor's. Default left.
+   *
+   * **`center` is what a toolbar over a text selection wants** (Katerina,
+   * PEE-19, after Linear): the panel sits over the middle of what you
+   * selected, wherever in the line that is. Until 0.12.2 only the two edges
+   * were mapped, so Peek's selection toolbar kept the placement arithmetic
+   * the move onto this component was meant to delete (ADOPTION B21).
+   */
+  align?: 'left' | 'center' | 'right'
   /**
    * Which side of the trigger, or of the anchor, the panel prefers. Default
    * `bottom`.
@@ -117,7 +126,7 @@ export function Popover({ trigger, anchor, align = 'left', side = 'bottom', open
         <BasePopover.Positioner
           anchor={anchorTarget}
           side={side}
-          align={align === 'right' ? 'end' : 'start'}
+          align={align === 'right' ? 'end' : align === 'center' ? 'center' : 'start'}
           sideOffset={GAP}
           collisionPadding={VIEWPORT_PAD}
           className="z-50 data-[anchor-hidden]:hidden"

package/src/ScrollArea.mdx

@@ -39,6 +39,11 @@ import { ScrollArea } from '@estiva-app/ui'
 - `className` sizes and places the region; `viewportClassName` styles the
   scrolling box inside it — padding, gap, the layout of the content.
 - The region needs a height (or a `max-h-*`) to have anything to scroll.
+- **`viewportRef` and `onScroll` hand back the box that scrolls**, for a
+  region that reads or drives its own scrolling: a conversation that arrives
+  at its newest message, keeps its place when older ones load above it, and
+  jumps to the bottom when a reply is sent. Nothing else here can do that for
+  the caller, and the caller cannot do it without the box.
 - The native scrollbar is hidden by Base UI; a native `overflow-y-auto` on
   the same element would draw a second one.
 - A region keeps the wheel only in an axis it can actually scroll: a list

package/src/ScrollArea.test.tsx

@@ -5,8 +5,9 @@
  * it shows, is measured in Chrome (2026-09-08: the viewport keeps its full
  * width with 40 rows overflowing; the native bar is hidden).
  */
+import { createRef } from 'react'
 import { afterEach, describe, expect, it } from 'vitest'
-import { cleanup, render, screen } from '@testing-library/react'
+import { cleanup, fireEvent, render, screen } from '@testing-library/react'
 import { ScrollArea } from './ScrollArea'
 
 afterEach(cleanup)
@@ -63,3 +64,28 @@ describe('ScrollArea and the page behind it', () => {
     expect(viewport.className).not.toMatch(/(^|\s)overscroll-contain(\s|$)/)
   })
 })
+
+/**
+ * The viewport is the box a caller reads and drives (0.12.2, ADOPTION B20).
+ * A conversation arrives at its newest message and jumps to the bottom on a
+ * reply; neither is something the region can do for the caller, and neither is
+ * possible without the box.
+ */
+describe('ScrollArea, the viewport it hands back', () => {
+  it('gives the caller the box that scrolls, and reports its scrolling', () => {
+    const ref = createRef<HTMLDivElement>()
+    let scrolled = 0
+    render(
+      <ScrollArea className="h-40" viewportRef={ref} onScroll={() => { scrolled += 1 }}>
+        <p>Inside</p>
+      </ScrollArea>,
+    )
+    // The box the caller gets is the one the content sits in, not the region.
+    expect(ref.current).not.toBe(null)
+    expect(ref.current!.contains(screen.getByText('Inside'))).toBe(true)
+    expect(ref.current!.className).toContain('overflow')
+
+    fireEvent.scroll(ref.current!)
+    expect(scrolled).toBe(1)
+  })
+})

package/src/ScrollArea.tsx

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react'
+import type { ReactNode, Ref, UIEventHandler } from 'react'
 import { ScrollArea as BaseScrollArea } from '@base-ui/react/scroll-area'
 import { cn } from './cn'
 
@@ -43,13 +43,25 @@ export interface ScrollAreaProps {
   viewportClassName?: string
   /** On the content, the box the children sit in: padding, gap, layout. */
   contentClassName?: string
+  /**
+   * The scrolling box itself, for a region that reads or drives its own
+   * scrolling: `ref.current.scrollTop`, `scrollTo`, `scrollHeight`.
+   *
+   * A conversation is the case this exists for (ADOPTION B20): it arrives at
+   * the newest message, keeps its place when older ones load above, and jumps
+   * to the bottom when a reply is sent — none of which the region can do for
+   * the caller, and all of which the caller cannot do without the box.
+   */
+  viewportRef?: Ref<HTMLDivElement>
+  /** Fires as the viewport scrolls — the unread policy's input, beside `viewportRef`. */
+  onScroll?: UIEventHandler<HTMLDivElement>
   children: ReactNode
 }
 
 const BAR = 'flex touch-none select-none rounded-full opacity-0 transition-opacity delay-300 data-[hovering]:opacity-100 data-[hovering]:delay-0 data-[scrolling]:opacity-100 data-[scrolling]:delay-0'
 const THUMB = 'rounded-full bg-border-strong'
 
-export function ScrollArea({ orientation = 'vertical', className, viewportClassName, contentClassName, children }: ScrollAreaProps) {
+export function ScrollArea({ orientation = 'vertical', className, viewportClassName, contentClassName, viewportRef, onScroll, children }: ScrollAreaProps) {
   const vertical = orientation !== 'horizontal'
   const horizontal = orientation !== 'vertical'
   return (
@@ -66,6 +78,8 @@ export function ScrollArea({ orientation = 'vertical', className, viewportClassN
           Finding 40). `data-has-overflow-x` / `-y` are Base UI's word for
           "this axis really overflows", written on the viewport as it changes. */}
       <BaseScrollArea.Viewport
+        ref={viewportRef}
+        onScroll={onScroll}
         className={cn(
           'h-full w-full outline-none data-[has-overflow-x]:overscroll-x-contain data-[has-overflow-y]:overscroll-y-contain',
           viewportClassName,

package/src/SectionHeader.mdx

@@ -46,6 +46,10 @@ import { IconPlus } from '@tabler/icons-react'
 - An action is `{ icon, tooltip, onClick }` — the tooltip doubles as the
   action's accessible name. The actions sit beside the title button, not
   inside it, so a click on one never also toggles the section.
+- `trailing` is a count beside the title, held on screen while the actions
+  come and go: a count is information, not an affordance. It sits outside
+  the title button too, so it is neither part of the toggle's name nor part
+  of its hit target.
 - `render` swaps the title's element in Base UI's manner; it is how
   CollapsibleSection makes the title a `Collapsible.Trigger`.
 

package/src/SectionHeader.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import { IconPlus, IconSortDescending } from '@tabler/icons-react'
+import { Chip } from './Chip'
 import { SectionHeader } from './SectionHeader'
 
 /** The 32px row a section starts with. Hover it: the row fills, and its actions appear. A section that folds is CollapsibleSection, whose header this is. */
@@ -8,7 +9,7 @@ const meta = {
   component: SectionHeader,
   decorators: [(Story) => <div className="w-[280px]"><Story /></div>],
   args: { title: 'Section', showActions: 'hover' },
-  argTypes: { showActions: { control: 'inline-radio', options: ['hover', 'always'] }, chevron: { control: false }, isExpanded: { control: false } },
+  argTypes: { showActions: { control: 'inline-radio', options: ['hover', 'always'] }, chevron: { control: false }, isExpanded: { control: false }, trailing: { control: false } },
 } satisfies Meta<typeof SectionHeader>
 
 export default meta
@@ -33,3 +34,11 @@ export const PersistentActions: Story = {
     actions: [{ icon: <IconPlus size={16} stroke={1.5} />, tooltip: 'Add', onClick: () => {} }],
   },
 }
+
+/** A count beside the title, held on screen while the actions come and go. */
+export const WithTrailing: Story = {
+  args: {
+    trailing: <Chip type="brand" label="2" />,
+    actions: [{ icon: <IconPlus size={16} stroke={1.5} />, tooltip: 'Add', onClick: () => {} }],
+  },
+}

package/src/SectionHeader.test.tsx

@@ -38,3 +38,28 @@ describe('SectionHeader', () => {
     expect(screen.getByText('Section')).not.toBeNull()
   })
 })
+
+/**
+ * The trailing slot (0.12.2, ADOPTION B23). Peek's Screener header carries its
+ * count as a Chip there, and was the last hand-drawn folding header in the app
+ * for want of it.
+ */
+describe('SectionHeader, the trailing slot', () => {
+  it('holds a count beside the title, outside the button and outside the hover', () => {
+    render(
+      <SectionHeader
+        title="Section"
+        chevron
+        trailing={<span data-testid="count">2</span>}
+        actions={[{ icon: <span />, tooltip: 'Add', onClick: () => {} }]}
+      />,
+    )
+    const count = screen.getByTestId('count')
+    const title = screen.getByRole('button', { name: /section/i })
+    // Not part of the toggle: neither its name nor its hit target.
+    expect(title.contains(count)).toBe(false)
+    expect(title.textContent).toBe('Section')
+    // Not part of the hover reveal either — a count is information, not an affordance.
+    expect(count.closest('.opacity-0')).toBe(null)
+  })
+})

package/src/SectionHeader.tsx

@@ -46,6 +46,15 @@ export interface SectionHeaderProps {
   chevron?: boolean
   isExpanded?: boolean
   onToggle?: () => void
+  /**
+   * Beside the title and always visible, before the actions — a count.
+   *
+   * The actions come and go with the hover; this does not, because a count is
+   * information rather than an affordance. Peek's Screener header carries its
+   * number as a `Chip` here, and was the last hand-drawn folding header in the
+   * app for want of the slot (ADOPTION B23).
+   */
+  trailing?: ReactNode
   /** Right-aligned, in the order given. */
   actions?: SectionAction[]
   /** `hover` reveals the actions while the row is hovered or focused; `always` keeps them. */
@@ -58,7 +67,7 @@ export interface SectionHeaderProps {
   className?: string
 }
 
-export function SectionHeader({ title, chevron = false, isExpanded = true, onToggle, actions, showActions = 'hover', render, className }: SectionHeaderProps) {
+export function SectionHeader({ title, chevron = false, isExpanded = true, onToggle, trailing, actions, showActions = 'hover', render, className }: SectionHeaderProps) {
   const titleElement = useRender({
     render: render ?? (chevron ? <button type="button" onClick={onToggle} aria-expanded={isExpanded} /> : <span />),
     props: {
@@ -93,6 +102,10 @@ export function SectionHeader({ title, chevron = false, isExpanded = true, onTog
       )}
     >
       {titleElement}
+      {/* Outside the title button, like the actions: a chip inside a button
+          would be part of the button's accessible name and part of its hit
+          target, and the count is neither. */}
+      {trailing != null && <div className="flex shrink-0 items-center">{trailing}</div>}
       {actions && actions.length > 0 && (
         <div
           // `-mr-1`: an IconButton is 24px around a 16px icon, so at the row's

package/src/Toast.mdx

@@ -17,8 +17,14 @@ the positioning (bottom-left), the portal, and the auto-dismiss.
   "Changes saved".
 - `actionLabel` + `onAction` add the one follow-up worth offering — an
   "Undo", a "View".
-- `neutral` states, `success` celebrates, `brand` speaks with the
-  accent's voice.
+- **The leading icon says which type it is**: a check for `success`,
+  `brand` and `neutral`, a `!` for `warning`, an `×` for `error`. It was a
+  check on all of them, so a warning arrived with a tick beside it and a
+  caller with bad news turned the icon off instead.
+- `neutral` states, `success` celebrates, `brand` speaks with the accent's
+  voice, `error` reports a failure, and `warning` says something needs
+  knowing — a notice usually paired with `durationMs: 0` and a Dismiss,
+  because a warning that fades takes itself with it.
 
 <Canvas of={ToastStories.WithAction} />
 

package/src/Toast.stories.tsx

@@ -12,7 +12,7 @@ const meta = {
     leadingIcon: true,
   },
   argTypes: {
-    type: { control: 'inline-radio', options: ['success', 'brand', 'neutral'] },
+    type: { control: 'inline-radio', options: ['success', 'brand', 'neutral', 'warning', 'error'] },
     onAction: { control: false },
   },
 } satisfies Meta<typeof Toast>
@@ -30,6 +30,16 @@ export const Brand: Story = {
   args: { type: 'brand', label: 'Session started' },
 }
 
+/** Something that needs saying rather than celebrating — usually with `durationMs: 0` and a Dismiss, because a warning that fades takes itself with it. */
+export const Warning: Story = {
+  args: { type: 'warning', label: 'Not everything went through' },
+}
+
+/** It did not happen. The icon is an ×, not a tick. */
+export const Error: Story = {
+  args: { type: 'error', label: 'That did not go through' },
+}
+
 /** With a right-side action. */
 export const WithAction: Story = {
   args: {
@@ -44,12 +54,12 @@ export const NoIcon: Story = {
   args: { leadingIcon: false, label: 'Copied to clipboard' },
 }
 
-/** All three surfaces, with and without an action. */
+/** All five surfaces, with and without an action — and each with its own icon. */
 export const AllTypes: Story = {
   parameters: { controls: { disable: true } },
   render: () => (
     <div className="flex flex-col items-start gap-2">
-      {(['success', 'brand', 'neutral'] as const).map((type) => (
+      {(['success', 'brand', 'neutral', 'warning', 'error'] as const).map((type) => (
         <div key={type} className="flex items-center gap-2">
           <Toast type={type} label="Changes saved" />
           <Toast type={type} label="Changes saved" actionLabel="Undo" onAction={() => {}} />

package/src/Toast.tsx

@@ -1,13 +1,14 @@
 import { createContext, useCallback, useContext, useEffect, useMemo, useState, type ReactNode } from 'react'
 import { createPortal } from 'react-dom'
-import { IconCircleCheck } from '@tabler/icons-react'
+import { IconAlertCircle, IconCircleCheck, IconCircleX } from '@tabler/icons-react'
 import { cn } from './cn'
 
 /**
  * Peek's Toast (Figma: Alert) and its provider (2026-09-01), verbatim.
  *
- * The pill: three types — `success`, `brand`, `neutral` — an optional leading
- * circle-check, an optional action on the right. Under Signal every toast is
+ * The pill: five types — `success`, `brand`, `neutral`, `warning`, `error` —
+ * a leading icon that says which (a check, a `!`, an `×`), an optional action
+ * on the right. Under Signal every toast is
  * the same dark overlay pill; the type lives in the icon's colour and glow,
  * not the surface.
  *
@@ -15,13 +16,22 @@ import { cn } from './cn'
  * (5 s; pass `durationMs: 0` to keep one up). One toast at a time — a new
  * one replaces the standing one, it does not queue.
  */
-export type ToastType = 'success' | 'brand' | 'neutral'
+export type ToastType = 'success' | 'brand' | 'neutral' | 'warning' | 'error'
 
 export interface ToastProps {
   label: string
-  /** Visual variant per Figma (Alert component): success, brand, or neutral. */
+  /**
+   * Which of the five this is. It decides the surface in the light themes,
+   * and under Signal — where every pill is the same dark overlay — the icon
+   * and its colour.
+   *
+   * `warning` and `error` arrived at 0.12.2, for a notice that has to stay up
+   * and for one that reports a failure. Until then the set had no way to say
+   * either, so a caller with bad news passed `leadingIcon: false` rather than
+   * put a tick beside it.
+   */
   type?: ToastType
-  /** Show the leading circle-check icon. Defaults to true. */
+  /** Show the leading icon — a check, a `!` or an `×`, per `type`. Defaults to true. */
   leadingIcon?: boolean
   /** When set together with onAction, renders a clickable action on the right side. */
   actionLabel?: string
@@ -35,22 +45,47 @@ const SURFACE_STYLES: Record<ToastType, string> = {
   success: 'bg-success-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-[shadow:var(--shadow-md)]',
   brand: 'bg-accent-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-[shadow:var(--shadow-md)]',
   neutral: 'bg-bg-inset border border-border-subtle signal:border-border-default signal:shadow-[shadow:var(--shadow-md)]',
+  warning: 'bg-warning-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-[shadow:var(--shadow-md)]',
+  error: 'bg-error-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-[shadow:var(--shadow-md)]',
+}
+
+/**
+ * The leading icon says which of the five this is (Katerina, 2026-09-10:
+ * *"the icons should be representative, x for error, ! for warning"*). It was
+ * a circle-check on all of them, so a warning and a failure both arrived with
+ * a tick beside them — the reason Peek passed `leadingIcon: false` rather than
+ * show one.
+ */
+const ICONS: Record<ToastType, typeof IconCircleCheck> = {
+  success: IconCircleCheck,
+  brand: IconCircleCheck,
+  neutral: IconCircleCheck,
+  warning: IconAlertCircle,
+  error: IconCircleX,
 }
 
 const ICON_STYLES: Record<ToastType, string> = {
   success: 'signal:text-success-default signal:drop-shadow-glow-success',
   brand: 'signal:text-text-interactive signal:drop-shadow-glow-accent',
   neutral: 'signal:text-text-secondary',
+  warning: 'signal:text-warning-default signal:drop-shadow-glow-warning',
+  // No glow: the theme defines `--glow-warning`, `--glow-success` and
+  // `--glow-accent` and no error glow, and a colour with no token is not
+  // approximated here (D16).
+  error: 'signal:text-error-default',
 }
 
 const ACTION_BORDER_STYLES: Record<ToastType, string> = {
   success: 'signal:border signal:border-border-default signal:hover:border-border-strong',
   brand: 'signal:border signal:border-border-default signal:hover:border-border-strong',
   neutral: 'border border-border-default',
+  warning: 'signal:border signal:border-border-default signal:hover:border-border-strong',
+  error: 'signal:border signal:border-border-default signal:hover:border-border-strong',
 }
 
 export function Toast({ label, type = 'neutral', leadingIcon = true, actionLabel, onAction, className }: ToastProps) {
   const hasAction = !!(actionLabel && onAction)
+  const LeadingIcon = ICONS[type]
   return (
     <div
       className={cn(
@@ -63,9 +98,7 @@ export function Toast({ label, type = 'neutral', leadingIcon = true, actionLabel
       )}
     >
       <div className="flex items-center gap-2 shrink-0">
-        {leadingIcon && (
-          <IconCircleCheck size={16} stroke={1.5} className={cn('text-text-primary shrink-0', ICON_STYLES[type])} />
-        )}
+        {leadingIcon && <LeadingIcon size={16} stroke={1.5} className={cn('text-text-primary shrink-0', ICON_STYLES[type])} />}
         <span className="font-normal text-[14px] leading-[1.4] text-text-primary whitespace-nowrap">{label}</span>
       </div>
       {hasAction && (
@@ -87,12 +120,12 @@ export function Toast({ label, type = 'neutral', leadingIcon = true, actionLabel
 
 export interface ToastOptions {
   label: string
-  /** Visual variant per Figma (Alert component). Defaults to 'neutral'. */
+  /** Which of the five this is — it decides the surface and the leading icon. Defaults to 'neutral'. */
   type?: ToastType
   /** When set, renders a clickable action on the right side. */
   actionLabel?: string
   onAction?: () => void
-  /** Show the leading circle-check icon. Defaults to true. */
+  /** Show the leading icon — a check, a `!` or an `×`, per `type`. Defaults to true. */
   leadingIcon?: boolean
   /** Auto-dismiss after this many ms. Defaults to 5000. Pass 0 to disable. */
   durationMs?: number

package/src/cn.ts

@@ -29,7 +29,7 @@ const FONT_SIZE_TOKENS = [
  * `cn.test.ts` pins these to the preset too.
  */
 const BOX_SHADOW_TOKENS = ['sm', 'md', 'lg', 'focus-ring', 'glow-warning', 'glow-success', 'glow-accent', 'highlight-inset']
-const DROP_SHADOW_TOKENS = ['glow-success', 'glow-accent']
+const DROP_SHADOW_TOKENS = ['glow-success', 'glow-accent', 'glow-warning']
 
 const twMerge = extendTailwindMerge({
   extend: {

package/src/index.ts

@@ -21,7 +21,7 @@ export { IconButton, type IconButtonProps, type IconButtonVariant } from './Icon
 export { Kbd, type KbdProps } from './Kbd'
 export { IdentityMenu, IdentityPanel, type Identity, type IdentityMenuProps, type IdentityPanelProps } from './IdentityMenu'
 export { Tooltip, TooltipProvider, WithTooltip, type TooltipProps, type TooltipProviderProps, type WithTooltipProps } from './Tooltip'
-export { Field, type FieldProps } from './Field'
+export { Field, FieldLine, type FieldLineProps, type FieldLineTone, type FieldProps } from './Field'
 export { Select, type SelectOption, type SelectProps } from './Select'
 export { TextInput, type TextInputProps } from './TextInput'
 export { Textarea, type TextareaProps } from './Textarea'

package/stories/Choosing.mdx

@@ -38,6 +38,8 @@ fork freely, owe nothing back, mention it on the package's ticket.
 | Typing that filters a list | **SearchInput** |
 | A title edited in place | **EditableText** |
 | Label and required-mark around any control | **Field** |
+| A hint or a failure under **one** control | **Field**'s `helper` / `error` — wired to it, and announced |
+| A hint or an outcome under a **group** of controls | **FieldLine** — the same line on its own, with a `warning` tone Field has not got |
 
 ## People
 

package/tailwind-preset.js

@@ -183,6 +183,10 @@ export default {
         // The icon glows (D16), as `drop-shadow-glow-*`; a filter, so they follow the icon's shape.
         'glow-success': 'var(--glow-success)',
         'glow-accent':  'var(--glow-accent)',
+        // Added at 0.12.2 with the warning toast, so the set is symmetric:
+        // all three glows are a box shadow (a glow on a surface) and a drop
+        // shadow (a glow on an icon).
+        'glow-warning': 'var(--glow-warning)',
       },
       keyframes: {
         'skeleton-in': {