@estiva-app/ui 0.35.2 → 0.37.0

package/src/AttachmentCard.tsx

@@ -89,7 +89,7 @@ const formatBytes = (bytes: number) => {
 const typeLabelOf = (name: string) => extensionOf(name).toUpperCase() || 'FILE'
 
 const TILE_CLASSES = 'size-9 rounded-md bg-bg-active flex items-center justify-center shrink-0 text-text-secondary'
-// @estiva-escape: A6 (Katerina, 24 September: record only): a 12px medium name, the text style InputChip's label also uses, not a copy of a part
+// @estiva-escape(no-copied-look): A6 (Katerina, 24 September: record only): a 12px medium name, the text style InputChip's label also uses, not a copy of a part
 const NAME_CLASSES = 'text-caption font-medium text-text-primary truncate'
 const NOTE_CLASSES = 'text-small tracking-wide leading-tight truncate'
 
@@ -359,7 +359,7 @@ export function AttachmentCard({
     const failed = state === 'failed'
     const warning = state === 'warning'
     return (
-      // @estiva-escape: a failed or warning file's strong hairline is AttachmentCard's own state; Card's attention hairlines are the soft ones (UIG-9, Katerina 17 September)
+      // @estiva-escape(no-restyled-part): a failed or warning file's strong hairline is AttachmentCard's own state; Card's attention hairlines are the soft ones (UIG-9, Katerina 17 September)
       <Card
         fill="elevated"
         className={cn('group relative flex items-center gap-2 w-[200px] p-1.5 pr-3', failed ? 'border-error-default' : warning && 'border-warning-default', className)}
@@ -390,7 +390,7 @@ export function AttachmentCard({
         {/* On Base UI's Button, as InputChip's ✕ is (Katerina, 2026-09-14): IconButton is a 24px square
             that fills on hover, and this is Peek's 20px round badge on the card's corner. */}
         {onRemove && (
-          // @estiva-escape: N4 (Katerina, 24 September: record only): the small round button Lightbox's close also draws; a part if a third appears
+          // @estiva-escape(no-copied-look): N4 (Katerina, 24 September: record only): the small round button Lightbox's close also draws; a part if a third appears
           <BaseButton
             type="button"
             aria-label={`Remove ${name}`}
@@ -411,7 +411,7 @@ export function AttachmentCard({
 
   // Fades in with the card's hover or keyboard focus, and keeps its slot when hidden, so revealing it never shifts the row.
   const downloadControl = saving ? (
-    // @estiva-escape: Download shows when its card is pointed at or focused, AttachmentCard's own action; IconButton has no reveal on its card's hover (UIG-9, Katerina 17 September)
+    // @estiva-escape(no-restyled-part): Download shows when its card is pointed at or focused, AttachmentCard's own action; IconButton has no reveal on its card's hover (UIG-9, Katerina 17 September)
     <IconButton
       variant="muted"
       tooltip="Download"
@@ -430,7 +430,7 @@ export function AttachmentCard({
     return (
       // `role="status"`: a plain box may not carry a name (axe, aria-prohibited-attr), and a
       // status says what it is doing — loading — to a reader that cannot see the pulse.
-      // @estiva-escape: the loading pulse is AttachmentCard's own state; Card has no loading state (UIG-9, Katerina 17 September)
+      // @estiva-escape(no-restyled-part): the loading pulse is AttachmentCard's own state; Card has no loading state (UIG-9, Katerina 17 September)
       <Card role="status" fill="inset" aria-busy="true" aria-label={`Loading ${name}`} className={cn('w-[180px] h-28 animate-pulse', className)} {...props}>
         {null}
       </Card>
@@ -439,7 +439,7 @@ export function AttachmentCard({
 
   if (drawnState === 'unreadable') {
     return (
-      // @estiva-escape: a file that could not be read is faded as well as dashed, AttachmentCard's own state; Card has no faded state (UIG-9, Katerina 17 September)
+      // @estiva-escape(no-restyled-part): a file that could not be read is faded as well as dashed, AttachmentCard's own state; Card has no faded state (UIG-9, Katerina 17 September)
       <Card fill="inset" unreadable className={cn('flex items-center gap-2 w-[240px] p-1.5 opacity-70', className)} {...props}>
         <div className={TILE_CLASSES}>
           <TypeIcon name={name} />
@@ -494,7 +494,7 @@ export function AttachmentCard({
     </>
   )
   return (
-    // @estiva-escape: a file that cannot be opened is faded, AttachmentCard's own state; Card has no faded state (UIG-9, Katerina 17 September)
+    // @estiva-escape(no-restyled-part): a file that cannot be opened is faded, AttachmentCard's own state; Card has no faded state (UIG-9, Katerina 17 September)
     <Card fill="inset" hover={address ? 'hairline' : 'none'} className={cn('group flex items-center gap-2 w-[240px] p-1.5 pr-1', !address && 'opacity-70', className)} {...props}>
       {address ? (
         <Link href={address} external variant="plain" className="flex items-center gap-2 min-w-0 flex-1" onClick={(event) => event.stopPropagation()}>

package/src/Button.tsx

@@ -92,7 +92,7 @@ export function Button({
           size === 'default' && (hasLeadingIcon ? 'pl-2 pr-3' : 'px-2'),
           size === 'small' && (hasLeadingIcon ? 'pl-1.5 pr-2' : 'px-1.5'),
           !state.disabled && (variant === 'primary' || variant === 'resolve') && 'bg-accent-primary hover:bg-accent-hover text-text-inverse cursor-pointer signal:font-semibold',
-          // @estiva-escape: W2 (Katerina, 24 September: leave alone): an outlined button shares four words with Reaction's pill by coincidence
+          // @estiva-escape(no-copied-look): W2 (Katerina, 24 September: leave alone): an outlined button shares four words with Reaction's pill by coincidence
           !state.disabled && variant === 'outlined' && 'border border-border-default hover:bg-bg-hover text-text-primary cursor-pointer',
           !state.disabled && variant === 'muted' && 'hover:bg-bg-hover text-text-primary cursor-pointer',
           !state.disabled && variant === 'destructive' && 'hover:bg-error-muted text-error-default cursor-pointer',

package/src/Card.tsx

@@ -127,14 +127,14 @@ export function Card({
   if (href !== undefined) {
     const { ref, ...anchorProps } = props as ComponentPropsWithRef<'a'>
     return (
-      // @estiva-escape: a card that leads somewhere is drawn on Link's anchor (UIG-27 ruling 1), so this frame is Card's own look, not Link restyled
+      // @estiva-escape(no-copied-look, no-restyled-part): a card that leads somewhere is drawn on Link's anchor (UIG-27 ruling 1), so this frame is Card's own look, not Link restyled
       <Link href={href} variant="plain" ref={ref} className={classes} {...anchorProps}>
         {children}
       </Link>
     )
   }
   return (
-    // @estiva-escape: N6 (Katerina, 24 September: leave alone): a card that cuts its content to its corners shares four words with the palette's window by coincidence
+    // @estiva-escape(no-copied-look): N6 (Katerina, 24 September: leave alone): a card that cuts its content to its corners shares four words with the palette's window by coincidence
     <div className={classes} {...props}>
       {children}
     </div>

package/src/ChipInput.mdx

@@ -32,6 +32,8 @@ leading slots.
 ```tsx
 import { ChipInput } from '@estiva-app/ui'
 
+const directory: { id: string; label: string; picture?: string }[] = people
+
 <ChipInput
   value={chosen}
   onChange={setChosen}

package/src/ChipInput.tsx

@@ -62,7 +62,7 @@ export function InputChip({ label, leading, onRemove, removeLabel, truncate, cla
   return (
     <div className={cn(CHIP_BOX, chipPadding(!!leading, !!onRemove), className)}>
       {leading && <span className="flex shrink-0 items-center">{leading}</span>}
-      {/* @estiva-escape: A6 (Katerina, 24 September: record only): a 12px medium label, the text style AttachmentCard's name also uses, not a copy of a part */}
+      {/* @estiva-escape(no-copied-look): A6 (Katerina, 24 September: record only): a 12px medium label, the text style AttachmentCard's name also uses, not a copy of a part */}
       <span className={cn(CHIP_LABEL, truncate && 'min-w-0 truncate')}>{label}</span>
       {/* Base UI's `Button`, as every button in the package is (D6). Base UI
           has no chip of its own — its only chips are `Combobox.Chip` and

package/src/CommandPalette.tsx

@@ -123,7 +123,7 @@ export function CommandPalette({ open, onOpenChange, label, where, modKey = 'Ctr
       <Dialog.Portal>
         <Dialog.Backdrop className="fixed inset-0 z-40 bg-scrim" />
         <Dialog.Viewport className="fixed inset-0 z-50 flex items-start justify-center pt-[16vh]">
-          {/* @estiva-escape: A3 (Katerina, 24 September: leave CommandPalette alone): the palette's window keeps its own border */}
+          {/* @estiva-escape(no-copied-look): A3 (Katerina, 24 September: leave CommandPalette alone): the palette's window keeps its own border */}
           <Dialog.Popup
             ref={popupRef}
             aria-label={label}
@@ -374,7 +374,7 @@ export function CommandPaletteSearch({ query, onQueryChange, placeholder, groups
       <div className="flex h-12 shrink-0 items-center gap-3 border-b border-border-subtle px-5">
         <IconSearch size={16} stroke={1.5} className="shrink-0 text-text-secondary" />
         {chip && <LevelChip chip={chip} onBack={back} />}
-        {/* @estiva-escape: A5 (Katerina, 24 September: leave CommandPalette alone): the palette's search field keeps its own classes */}
+        {/* @estiva-escape(no-copied-look): A5 (Katerina, 24 September: leave CommandPalette alone): the palette's search field keeps its own classes */}
         <Autocomplete.Input
           ref={inputRef}
           data-command-palette-field=""
@@ -555,7 +555,7 @@ export function CommandPaletteForm({ chip, icon, submitLabel, onSubmit, submitWa
 
   return (
     <div ref={frameRef} tabIndex={-1} onKeyDown={onKeyDown} onFocus={measure} onBlur={measure} onInput={measure} className="flex min-h-0 flex-col outline-none">
-      {/* @estiva-escape: the palette's own input bar, the twin of its search row; the level chip stands where the field was */}
+      {/* @estiva-escape(no-handmade-header): the palette's own input bar, the twin of its search row; the level chip stands where the field was */}
       <div className="flex h-12 shrink-0 items-center gap-3 border-b border-border-subtle px-5">
         {icon != null && <span className="flex shrink-0 items-center text-text-secondary">{icon}</span>}
         <LevelChip chip={chip} onBack={back} />

package/src/DialogShell.tsx

@@ -86,7 +86,7 @@ export function DialogShell({ title, onClose, headerContent, footer, children, b
 
         {/* Dialog */}
         <div className="fixed inset-0 z-50 flex items-center justify-center pointer-events-none">
-          {/* @estiva-escape: A3 (Katerina, 24 September: leave CommandPalette alone): a dialog's window and the palette's are left as they are */}
+          {/* @estiva-escape(no-copied-look): A3 (Katerina, 24 September: leave CommandPalette alone): a dialog's window and the palette's are left as they are */}
           <Parts.Popup
             ref={popupRef}
             /*

package/src/EmptyState.mdx

@@ -36,9 +36,10 @@ need a height from the caller (`className="h-full"`).
 
 ## When not
 
-- Data is still on its way → **Skeleton**; empty and loading are different
-  truths. When the shape of what arrives is unknown, an EmptyState that says so
-  — "Opening…" — is fine.
+- Data is still on its way → **Skeleton**: **SkeletonList**, or a shape of
+  your own from **SkeletonBar**; empty and loading are different truths.
+  When the shape of what arrives is unknown, an EmptyState that says so —
+  "Opening…" — is fine.
 - Something went wrong → say what failed, in words. An EmptyState can carry
   it, in its usual look — never red. An empty state that hides a failure
   misleads.

package/src/Lightbox.tsx

@@ -74,7 +74,7 @@ export function Lightbox({ src, alt, onClose, className }: LightboxProps) {
             onClick={(e) => e.stopPropagation()}
             className={cn('max-w-full max-h-full object-contain rounded-lg', className)}
           />
-          {/* @estiva-escape: N4 (Katerina, 24 September: record only): the small round button AttachmentCard's remove also draws; a part if a third appears */}
+          {/* @estiva-escape(no-copied-look): N4 (Katerina, 24 September: record only): the small round button AttachmentCard's remove also draws; a part if a third appears */}
           <Dialog.Close
             aria-label="Close"
             className="absolute top-4 right-4 size-8 rounded-full bg-bg-elevated border border-border-strong flex items-center justify-center text-text-secondary hover:text-text-primary"

package/src/NavItem.tsx

@@ -28,7 +28,7 @@ export interface NavItemProps extends Omit<ComponentPropsWithoutRef<'a'>, 'href'
 
 export function NavItem({ label, href, count, countLabel, active = false, icon, className, ...props }: NavItemProps) {
   return (
-    // @estiva-escape: N5 (Katerina, 24 September: record only): a row that fills on hover, as PersonTrigger's row also does
+    // @estiva-escape(no-copied-look): N5 (Katerina, 24 September: record only): a row that fills on hover, as PersonTrigger's row also does
     <a
       href={href}
       aria-current={active ? 'page' : undefined}

package/src/Panel.mdx

@@ -0,0 +1,78 @@
+import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks'
+import * as PanelStories from './Panel.stories'
+
+<Meta of={PanelStories} />
+
+# Panel
+
+A panel of a page: its name in a header, a body that scrolls whenever it is
+taller than the room it has, and a row fixed at the bottom when there is one.
+
+<Canvas of={PanelStories.ALongBody} />
+
+## When
+
+- **Any panel of a page that is not a list**: a side column's details, a
+  thread, another app's card beside a file, the contents of what is open.
+  Its body scrolls by itself, so it is never cut off at the fold, even when
+  today's content fits.
+- `footer` for a row that stays put under the body while it scrolls: a reply
+  box.
+- Two panels in one column share it. Cap the first with a `max-h-*` in
+  `className`, and each scrolls in its own room.
+
+<Canvas of={PanelStories.WithAFooter} />
+
+<Canvas of={PanelStories.TwoInAColumn} />
+
+## When not
+
+- A list of things to open beside the page → **ListColumn**, which is a panel
+  with the list's own width and insets.
+- A window over the page → **DialogShell**.
+- A box inside a panel or a card that should scroll on its own → **ScrollArea**.
+
+## How
+
+```tsx
+import { Panel, IconButton } from '@estiva-app/ui'
+
+<Panel
+  title="Details"
+  actions={
+    <IconButton tooltip="More" aria-label="More" onClick={openMenu}>
+      <IconDotsVertical size={16} stroke={1.5} />
+    </IconButton>
+  }
+  bodyClassName="flex flex-col gap-3 px-4 pt-3 pb-4"
+>
+  {sections}
+</Panel>
+```
+
+- It takes the room its column gives it, never its content's height, so the
+  body is what scrolls. Put it straight into the column.
+- `bodyClassName` is the body's padding, gap and layout. The header is
+  ContainerHeader's: 48px, a hairline under it.
+- A panel that follows its scroll (a thread that opens at its newest reply)
+  reads it with `bodyRef` and `onBodyScroll`.
+- **A crash stays inside it.** If its body, its actions or its footer break,
+  it keeps its title and shows "Something went wrong in the panel… try again"
+  in the room the body had. It is **ErrorBoundary**'s.
+
+<Canvas of={PanelStories.WhenTheBodyBreaks} />
+
+## What it owns
+
+It does these by itself. Write none of them around it.
+
+| It does | So you never write | Refused when written by hand |
+|---|---|---|
+| Draws the header: a ContainerHeader with the title and the actions | a header row of your own over a box | ContainerHeader used on its own in an app |
+| Scrolls its body in a ScrollArea whenever it is taller than the panel, with the bar showing | `overflow-auto`, or a box that cuts off what does not fit |  |
+| Keeps the footer fixed under the body | a flex column of your own around the body and the footer |  |
+| Keeps a crash inside itself: its title stays, the message and Try again sit in the room the body had | an error boundary of your own around it |  |
+
+## Props
+
+<Controls of={PanelStories.Default} />

package/src/Panel.stories.tsx

@@ -0,0 +1,98 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { IconDotsVertical } from '@tabler/icons-react'
+import { IconButton } from './IconButton'
+import { Panel } from './Panel'
+
+/**
+ * A panel of a page: a header, a body that scrolls whenever it is taller than
+ * the panel, and a row fixed under it when there is one. The body's words are
+ * stand-ins.
+ */
+const meta = {
+  title: 'Layout/Panel',
+  component: Panel,
+  parameters: { layout: 'fullscreen' },
+  args: { title: 'Details', children: null, bodyClassName: 'flex flex-col gap-3 px-4 pt-3 pb-4' },
+  argTypes: { children: { control: false }, actions: { control: false }, footer: { control: false } },
+  // A side column of the frame: 380px wide and a fixed height, where a panel sits beside a page.
+  decorators: [
+    (Story) => (
+      <div className="flex h-[560px] w-[380px] flex-col border-l border-border-subtle bg-bg-surface">
+        {Story()}
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Panel>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const paragraph = (n: number) => (
+  <p key={n} className="text-body-2 text-text-secondary">
+    Paragraph {n}. What this item is for, who it is for, and what it leaves for later, written out in full the way a real description is.
+  </p>
+)
+const paragraphs = (count: number) => Array.from({ length: count }, (_, i) => paragraph(i + 1))
+const menu = <IconButton tooltip="More" aria-label="More"><IconDotsVertical size={16} stroke={1.5} /></IconButton>
+
+/** A short body: it fits, so there is no bar. */
+export const Default: Story = {
+  args: { actions: menu },
+  render: (args) => <Panel {...args}>{paragraphs(2)}</Panel>,
+}
+
+/** A title that opens something: the chevron after it, as ContainerHeader draws it. */
+export const WithChevron: Story = {
+  args: { chevron: true },
+  render: (args) => <Panel {...args}>{paragraphs(2)}</Panel>,
+}
+
+/** A body taller than the panel: it scrolls, and the bar shows at rest because there is more below. */
+export const ALongBody: Story = {
+  args: { actions: menu },
+  render: (args) => <Panel {...args}>{paragraphs(14)}</Panel>,
+}
+
+/** A row fixed under the body, such as a reply box: the body scrolls above it, and it stays put. */
+export const WithAFooter: Story = {
+  render: (args) => (
+    <Panel
+      {...args}
+      footer={
+        // A stand-in for whatever the footer holds: the part only keeps it in place.
+        <div className="border-t border-border-subtle p-3">
+          <div className="flex h-10 items-center justify-center rounded-md bg-bg-elevated text-caption text-text-muted">Footer</div>
+        </div>
+      }
+    >
+      {paragraphs(12)}
+    </Panel>
+  ),
+}
+
+/** Two panels in one column: the first capped at three fifths, each scrolls in its own room. */
+export const TwoInAColumn: Story = {
+  render: (args) => (
+    <>
+      <Panel {...args} title="Details" className="max-h-[60%]">
+        {paragraphs(10)}
+      </Panel>
+      <Panel {...args} title="Activity">
+        {paragraphs(6)}
+      </Panel>
+    </>
+  ),
+}
+
+function Broken(): never {
+  throw new Error('The body could not draw itself')
+}
+
+/** A crash inside it stays inside it: the title stays, and the message takes the body's room. */
+export const WhenTheBodyBreaks: Story = {
+  render: (args) => (
+    <Panel {...args}>
+      <Broken />
+    </Panel>
+  ),
+}

package/src/Panel.tsx

@@ -0,0 +1,80 @@
+import type { ReactNode, Ref, UIEventHandler } from 'react'
+import { cn } from './cn'
+import { ContainerHeader } from './ContainerHeader'
+import { ErrorBoundary } from './ErrorBoundary'
+import { ScrollArea } from './ScrollArea'
+
+/**
+ * A panel of a page: its name in a `ContainerHeader`, a body under it that
+ * scrolls whenever it is taller than the room it has, and, when there is one,
+ * a row fixed at the bottom that never scrolls — a reply box.
+ *
+ * Made so that scrolling comes from the package, not from each app remembering
+ * it (Katerina, 26 September 2026). The apps built their panels from the
+ * package's header and a box of their own, and a box without a `ScrollArea`
+ * simply cut off what did not fit: Peek's widget panel on a Ship file lost the
+ * end of a long description and the status control under it, with no bar and
+ * nothing to scroll. Here the body is always a `ScrollArea`, so the bar shows
+ * as soon as there is more, and an empty panel or a short one has none.
+ *
+ * It takes the room its column gives it (`flex-1 min-h-0`), never its content's
+ * height, so the body is what scrolls, not the page. Two panels in one column
+ * share it; a `max-h-*` in `className` caps one of them.
+ *
+ * It keeps a crash inside itself, as ListColumn does: if its body, its actions
+ * or its footer break, the panel keeps its title and shows `ErrorBoundary`'s
+ * message in the room the body had.
+ */
+export interface PanelProps {
+  /** The panel's name, in its header. A node for a title that is more than words. */
+  title: ReactNode
+  /** A chevron after the title, as `ContainerHeader` draws it. */
+  chevron?: boolean
+  /** The panel's own actions, at the header's right — a `Toolbar` of `ToolbarButton`s, or one `IconButton`. */
+  actions?: ReactNode
+  /** The body. It scrolls when it is taller than the panel. */
+  children: ReactNode
+  /** A row fixed under the body that never scrolls — a reply box. */
+  footer?: ReactNode
+  /** The body's own box: its padding, gap and layout — `px-4 pt-3 pb-4`, `flex flex-col gap-2`. */
+  bodyClassName?: string
+  /** The body's scrolling box, for a panel that reads or drives its scroll: a thread that opens at its newest reply. */
+  bodyRef?: Ref<HTMLDivElement>
+  /** Fires as the body scrolls. */
+  onBodyScroll?: UIEventHandler<HTMLDivElement>
+  /** Placement only: a cap such as `max-h-[60%]` when it shares a column. */
+  className?: string
+}
+
+function Frame({ title, chevron = false, actions, children, footer, bodyClassName, bodyRef, onBodyScroll, className, broken = false }: PanelProps & { broken?: boolean }) {
+  return (
+    <div className={cn('flex min-h-0 flex-1 flex-col', className)}>
+      <ContainerHeader title={title} chevron={chevron} actions={actions} />
+      {broken ? (
+        // The message takes the room the body had and centres itself in it.
+        <div className="flex min-h-0 flex-1 flex-col px-4">{children}</div>
+      ) : (
+        <ScrollArea className="min-h-0 flex-1" contentClassName={bodyClassName} viewportRef={bodyRef} onScroll={onBodyScroll}>
+          {children}
+        </ScrollArea>
+      )}
+      {!broken && footer && <div className="shrink-0">{footer}</div>}
+    </div>
+  )
+}
+
+export function Panel(props: PanelProps) {
+  return (
+    <ErrorBoundary
+      label="panel"
+      frame={(message) => (
+        // Only the name comes back with the message: the actions and the footer may be what threw.
+        <Frame title={props.title} chevron={props.chevron} className={props.className} broken>
+          {message}
+        </Frame>
+      )}
+    >
+      <Frame {...props} />
+    </ErrorBoundary>
+  )
+}

package/src/PersonTrigger.tsx

@@ -60,7 +60,7 @@ export function PersonTrigger({ name, picture, fallback, size, open = false, com
     )
   }
   return (
-    // @estiva-escape: N5 (Katerina, 24 September: record only): a row that fills on hover, as NavItem also does
+    // @estiva-escape(no-copied-look): N5 (Katerina, 24 September: record only): a row that fills on hover, as NavItem also does
     <BaseButton
       type="button"
       aria-haspopup="menu"

package/src/Reaction.tsx

@@ -63,7 +63,7 @@ export interface ReactionProps extends Omit<ButtonHTMLAttributes<HTMLButtonEleme
 
 export function Reaction({ emoji, count, pressed = false, className, ...props }: ReactionProps) {
   return (
-    // @estiva-escape: W1 (Katerina, 24 September: leave alone): a reaction pill shares four words with a field's box by coincidence
+    // @estiva-escape(no-copied-look): W1 (Katerina, 24 September: leave alone): a reaction pill shares four words with a field's box by coincidence
     <Toggle
       // Controlled: a reaction is yours when the data says so, not when the
       // pill was last pressed — a write can fail, and another client can

package/src/ScrollArea.mdx

@@ -6,8 +6,8 @@ import * as ScrollAreaStories from './ScrollArea.stories'
 # ScrollArea
 
 A region that scrolls without taking width for its scrollbar. The bar is
-drawn over the content and shows while the pointer is over the region or
-the content is moving; nothing moves when it appears.
+drawn over the content and shows whenever there is more to scroll to, so a
+long list says so before anyone hovers it; nothing moves when it appears.
 
 <Canvas of={ScrollAreaStories.Default} />
 
@@ -27,6 +27,10 @@ the content is moving; nothing moves when it appears.
 - A box that never overflows. A ScrollArea around it changes nothing, and
   is one more element.
 - The page itself. The browser owns that bar.
+- A whole list column → **ListColumn**, which scrolls its rows itself.
+
+No alternative for the first two: a box that never overflows needs nothing
+around it, and the page's bar is the browser's.
 
 ## How
 

package/src/ScrollArea.stories.tsx

@@ -15,7 +15,7 @@ type Story = StoryObj<typeof meta>
 
 const rows = Array.from({ length: 40 }, (_, i) => `Row ${i + 1}`)
 
-/** A list taller than its box. The bar shows while the pointer is over it or the list is moving. */
+/** A list taller than its box. The bar shows at rest, because there is more to scroll to. */
 export const Default: Story = {
   render: () => (
     <Card className="h-[240px] w-[280px]">

package/src/ScrollArea.tsx

@@ -10,8 +10,13 @@ import { cn } from './cn'
  * right-hand padding looks wider than the left. Katerina saw it in every
  * scrolling surface of both apps (2026-09-08). Base UI's `ScrollArea` hides
  * the native bar and draws its own over the content, so nothing moves when
- * it appears; the bar shows while the pointer is over the region or the
- * content is moving, and fades otherwise.
+ * it appears.
+ *
+ * The bar shows whenever the region has more to scroll to, at rest too
+ * (Katerina, 26 September: a long folder list in Peek's side column looked
+ * complete, because the bar waited for the pointer). Base UI writes
+ * `data-has-overflow-y` / `-x` on the bar while that axis overflows; a region
+ * with nothing more to show keeps no bar at all.
  *
  * Three boxes, and each class prop lands on one:
  *
@@ -99,12 +104,12 @@ export function ScrollArea({ orientation = 'vertical', className, viewportClassN
         </BaseScrollArea.Content>
       </BaseScrollArea.Viewport>
       {vertical && (
-        <BaseScrollArea.Scrollbar orientation="vertical" className={cn(BAR, 'w-1.5 justify-center py-0.5 pr-0.5')}>
+        <BaseScrollArea.Scrollbar orientation="vertical" className={cn(BAR, 'w-1.5 justify-center py-0.5 pr-0.5 data-[has-overflow-y]:opacity-100')}>
           <BaseScrollArea.Thumb className={cn(THUMB, 'w-full')} />
         </BaseScrollArea.Scrollbar>
       )}
       {horizontal && (
-        <BaseScrollArea.Scrollbar orientation="horizontal" className={cn(BAR, 'h-1.5 flex-col justify-center px-0.5 pb-0.5')}>
+        <BaseScrollArea.Scrollbar orientation="horizontal" className={cn(BAR, 'h-1.5 flex-col justify-center px-0.5 pb-0.5 data-[has-overflow-x]:opacity-100')}>
           <BaseScrollArea.Thumb className={cn(THUMB, 'h-full')} />
         </BaseScrollArea.Scrollbar>
       )}

package/src/Select.tsx

@@ -74,7 +74,7 @@ export function Select({ value, onChange, options, size = 'default', ariaLabel,
   // a native `disabled` button, which Tab skips and a tooltip cannot open on.
   const held = Boolean(disabledReason)
   const trigger = (
-      // @estiva-escape: N1 (Katerina, 24 September: record only): Select's box drops the hover while held, so it cannot take FIELD_SHELL_CLASSES as it is
+      // @estiva-escape(no-copied-look): N1 (Katerina, 24 September: record only): Select's box drops the hover while held, so it cannot take FIELD_SHELL_CLASSES as it is
       <BaseSelect.Trigger
         aria-label={ariaLabel}
         aria-required={aria['aria-required']}

package/src/TopBar.mdx

@@ -33,7 +33,7 @@ reachable.
 ## When not
 
 - Page-level headers inside the content → not this; this is the frame's
-  bar, once per app.
+  bar, once per app. The top of a column is **ContainerHeader**.
 - Anything the bar would need to know — who you are, what is searched —
   stays outside: pass composed slots.
 

package/src/eslint/escape.ts

@@ -4,15 +4,21 @@ import type { AST, Rule } from 'eslint'
  * The escape marker (UIG-3, seam S4 in docs/GATES.md §16): one written reason
  * why one element stays as it is.
  *
- * A line comment directly above the element,
+ * A line comment directly above the element, naming the rule it keeps off,
  *
- *     // @estiva-escape: <reason>
+ *     // @estiva-escape(no-raw-element): <reason>
  *
  * or, where the element is a JSX child, the JSX comment on the line above,
  *
- *     {/* @estiva-escape: <reason> *\/}
+ *     {/* @estiva-escape(no-raw-element): <reason> *\/}
  *
- * with at least ten characters of reason, spaces not counted.
+ * with at least ten characters of reason, spaces not counted. It escapes only
+ * the rules it names (Katerina's ruling B3, 25 September: one reason used to
+ * switch off every rule on the element, so a raw button that also wrote a
+ * dialog's role by hand passed under one reason). Two rules on one element are
+ * named together, `@estiva-escape(no-raw-element, no-rebuilt-behaviour)`, each
+ * on purpose. A marker that names no rule escapes nothing, and says which name
+ * to write.
  *
  * Not `eslint-disable`. A directive switches a rule off without saying it was
  * meant, and the count of escapes (`.gates-count.json`) could not see it. A
@@ -37,11 +43,29 @@ export const SETTINGS_KEY = 'estiva'
  * reports through the rule that called it.
  */
 export const ESCAPE_MESSAGES = {
-  escapeWithoutReason: `An escape needs its reason, at least ${MIN_REASON} characters: \`// ${ESCAPE_MARKER}: <why this stays>\`. An escape with no reason hides nothing.`,
-  escapeInDirective: `Write the escape as its own comment on the line above: \`// ${ESCAPE_MARKER}: <reason>\`. Inside an eslint-disable comment it switches the rule off instead of recording why.`,
+  escapeWithoutReason: `An escape needs its reason, at least ${MIN_REASON} characters: \`// ${ESCAPE_MARKER}({{rule}}): <why this stays>\`. An escape with no reason hides nothing.`,
+  escapeInDirective: `Write the escape as its own comment on the line above: \`// ${ESCAPE_MARKER}({{rule}}): <reason>\`. Inside an eslint-disable comment it switches the rule off instead of recording why.`,
+  escapeWithoutRule: `Name the rule this escape keeps off: \`${ESCAPE_MARKER}({{rule}}): <reason>\`. An escape now keeps off only the rules it names.`,
   escaped: 'Escaped: {{reason}}',
 } as const
 
+/** A rule's name as a marker writes it: `no-raw-element` for `estiva/no-raw-element`. */
+export const shortRuleName = (id: string) => id.slice(id.lastIndexOf('/') + 1)
+
+/**
+ * What a marker says, read from a comment's text: the rules it names (none when
+ * it names none) and its reason. Null when the comment carries no marker.
+ */
+export function readMarker(text: string): { rules: string[]; reason: string } | null {
+  const at = text.indexOf(ESCAPE_MARKER)
+  if (at === -1) return null
+  const rest = text.slice(at + ESCAPE_MARKER.length)
+  const named = /^\s*\(([^)]*)\)/.exec(rest)
+  const rules = named ? named[1].split(/[\s,]+/).filter(Boolean).map(shortRuleName) : []
+  const reason = (named ? rest.slice(named[0].length) : rest).replace(/^\s*:/, '').trim()
+  return { rules, reason }
+}
+
 export interface EstivaSettings {
   /**
    * Report every sanctioned escape as a message with the id `escaped`, so a
@@ -85,24 +109,29 @@ export function isEscaped(context: Rule.RuleContext, node: Located): boolean {
     .find((c) => c.loc && c.range && c.loc.end.line === line - 1 && BETWEEN.test(sourceCode.text.slice(c.range[1], nodeStart)))
   if (!comment?.loc) return false
 
-  const at = comment.value.indexOf(ESCAPE_MARKER)
-  if (at === -1) return false
+  const marker = readMarker(comment.value)
+  if (!marker) return false
+  const rule = shortRuleName(context.id)
 
   const directive = DIRECTIVE.exec(comment.value)
   if (directive) {
     const rules = directiveRules(directive[1])
     // A directive for other rules (the token lint's notes) is not an escape of this one.
     if (rules.length > 0 && !rules.includes(context.id)) return false
-    context.report({ loc: comment.loc, messageId: 'escapeInDirective' })
+    context.report({ loc: comment.loc, messageId: 'escapeInDirective', data: { rule } })
+    return false
+  }
+
+  // Named, but not this rule: another rule on the element may be the one it keeps off.
+  if (marker.rules.length > 0 && !marker.rules.includes(rule)) return false
+  if (marker.rules.length === 0) {
+    context.report({ loc: comment.loc, messageId: 'escapeWithoutRule', data: { rule } })
     return false
   }
 
-  const reason = comment.value
-    .slice(at + ESCAPE_MARKER.length)
-    .replace(/^:/, '')
-    .trim()
+  const { reason } = marker
   if (reason.replace(/\s/g, '').length < MIN_REASON) {
-    context.report({ loc: comment.loc, messageId: 'escapeWithoutReason' })
+    context.report({ loc: comment.loc, messageId: 'escapeWithoutReason', data: { rule } })
     return false
   }