@estiva-app/ui 0.22.0 → 0.23.0

package/src/Banner.mdx

@@ -28,8 +28,8 @@ line, one of four tones, gone when there is nothing to say.
   under the header at the app's full width; a floating pill is not one, even
   a permanent one (Katerina, D21).
 - A standing property of one thing → **Chip** on that thing.
-- A notice inside the content flow with its own action — that is a
-  different component (not in the package yet).
+- More than one action, or a second line of text — that is a different
+  component (not in the package yet).
 
 ## How
 
@@ -41,8 +41,21 @@ import { Banner } from '@estiva-app/ui'
 
 - Render it only while there is something to say — an empty strip is not
   a state.
-- One line of plain text, `body-2`. If it needs a **second line or an
-  action of its own**, it has outgrown this component.
+- One line of text, `body-2`. If it needs a **second line**, it has outgrown
+  this component.
+- `icon` puts a 16px icon before the line and `action` one small muted Button
+  at the end of it, both in the tone (Katerina, 2026-09-18: Peek's strip above
+  the composer became a Banner, `info`). With either, the banner is one line
+  and the text truncates. One action at most.
+
+<Canvas of={BannerStories.WithIconAndAction} />
+
+```tsx
+<Banner tone="info" icon={<IconUserPlus size={16} stroke={1.5} />} action={{ label: 'Join', onClick: join }}>
+  You are not in <span className="font-medium">{title}</span> yet
+</Banner>
+```
+
 - `onDismiss` adds an ✕ at the right-hand end (Katerina, D21). Use it where
   the reader decides the notice is done with, rather than the app. The row
   is 40px rather than 36px with it, because the button is taller than the

package/src/Banner.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
+import { IconPencilMinus, IconUserPlus } from '@tabler/icons-react'
 import { Banner } from './Banner'
 
 const meta = {
@@ -34,6 +35,27 @@ export const Dismissible: Story = {
   args: { tone: 'warning', children: 'This workspace is read-only until sign-in.', onDismiss: () => {} },
 }
 
+/**
+ * With an icon and one action (Katerina, 2026-09-18). One line: the text
+ * truncates, and the Button stays at the end.
+ */
+export const WithIconAndAction: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex w-full max-w-xl flex-col gap-2">
+      <Banner tone="info" icon={<IconPencilMinus size={16} stroke={1.5} />} action={{ label: 'Invite people', onClick: () => {} }}>
+        This is the start of the conversation in <span className="font-medium">Project Alpha</span>
+      </Banner>
+      <Banner tone="info" icon={<IconPencilMinus size={16} stroke={1.5} />}>
+        This is the start of your conversation with <span className="font-medium">Sam Lee</span>
+      </Banner>
+      <Banner tone="info" icon={<IconUserPlus size={16} stroke={1.5} />} action={{ label: 'Join', onClick: () => {} }}>
+        You are not in <span className="font-medium">Project Alpha</span> yet — join to take part in the conversation
+      </Banner>
+    </div>
+  ),
+}
+
 /** All four tones, stacked. */
 export const AllTones: Story = {
   parameters: { controls: { disable: true } },

package/src/Banner.test.tsx

@@ -57,4 +57,39 @@ describe('Banner', () => {
     )
     expect(container.firstElementChild!.getAttribute('role')).toBe('alert')
   })
+
+  it('puts an icon before the line and one small muted action after it, on one line (Katerina, 2026-09-18)', async () => {
+    const onClick = vi.fn()
+    const { container } = render(
+      <Banner tone="info" icon={<svg data-testid="icon" />} action={{ label: 'Join', onClick }}>
+        You are not in <b>Alpha</b> yet
+      </Banner>,
+    )
+    const row = container.firstElementChild!
+    expect(row.getAttribute('role')).toBe('status')
+    expect(row.firstElementChild!.querySelector('[data-testid="icon"]')).not.toBeNull()
+    const line = screen.getByText(/You are not in/)
+    expect(line.className).toContain('truncate')
+    const button = screen.getByRole('button', { name: 'Join' })
+    expect(line.nextElementSibling).toBe(button)
+    await userEvent.click(button)
+    expect(onClick).toHaveBeenCalledOnce()
+    // No dismiss unless asked for.
+    expect(screen.queryByRole('button', { name: 'Dismiss' })).toBeNull()
+  })
+
+  it('an icon alone still keeps the line on one line, and a dismiss alone still wraps', () => {
+    const { rerender } = render(
+      <Banner tone="info" icon={<svg />}>
+        One line
+      </Banner>,
+    )
+    expect(screen.getByText('One line').className).toContain('truncate')
+    rerender(
+      <Banner tone="info" onDismiss={() => {}}>
+        One line
+      </Banner>,
+    )
+    expect(screen.getByText('One line').className).not.toContain('truncate')
+  })
 })

package/src/Banner.tsx

@@ -1,4 +1,6 @@
+import type { ReactNode } from 'react'
 import { IconX } from '@tabler/icons-react'
+import { Button } from './Button'
 import { cn } from './cn'
 import { IconButton } from './IconButton'
 
@@ -13,6 +15,11 @@ import { IconButton } from './IconButton'
  * An `error` announces itself (`role="alert"`); the other tones are
  * polite (`role="status"`).
  *
+ * `icon` and `action` put a 16px icon before the line and one small muted
+ * Button after it (Katerina, 2026-09-18, UIG-13: Peek's composer strip became
+ * a Banner in the `info` tone). With either, the banner is one line and the
+ * text truncates.
+ *
  * `onDismiss` adds an `✕` at the right-hand end (Katerina, D21,
  * 2026-09-07). Without it the strip is exactly what it was — a banner an
  * app removes by not rendering it. With it the row is 40px rather than
@@ -28,7 +35,16 @@ export type BannerTone = 'ok' | 'error' | 'info' | 'warning'
 
 export interface BannerProps {
   tone: BannerTone
-  children: string
+  /** The one line. Text, or text with a name in `font-medium`. */
+  children: ReactNode
+  /**
+   * A 16px icon before the line, in the tone's colour (Katerina, 2026-09-18:
+   * Peek's composer strip became a Banner). With an icon or an action the
+   * banner is one line, and the text truncates.
+   */
+  icon?: ReactNode
+  /** The one thing to do: the package's Button, muted and small, at the end of the line. */
+  action?: { label: string; onClick?: () => void }
   /** Adds an `✕` at the right-hand end. Absent: the app removes the banner. */
   onDismiss?: () => void
   /** The dismiss button's accessible name. Defaults to "Dismiss". */
@@ -43,25 +59,34 @@ const TONE_STYLES: Record<BannerTone, string> = {
   warning: 'bg-warning-muted text-warning-default',
 }
 
-export function Banner({ tone, children, onDismiss, dismissLabel = 'Dismiss', className }: BannerProps) {
+export function Banner({ tone, children, icon, action, onDismiss, dismissLabel = 'Dismiss', className }: BannerProps) {
   const role = tone === 'error' ? 'alert' : 'status'
-  // No dismiss, no row: every banner that predates the prop keeps the DOM and
-  // the height it had.
-  if (!onDismiss) {
+  // Nothing beside the line, no row: every banner that predates the props keeps
+  // the DOM and the height it had.
+  if (!onDismiss && !icon && !action) {
     return (
       <div role={role} className={cn('px-4 py-2 text-body-2', TONE_STYLES[tone], className)}>
         {children}
       </div>
     )
   }
+  const oneLine = Boolean(icon || action)
   return (
     <div role={role} className={cn('flex items-center gap-3 px-4 py-2 text-body-2', TONE_STYLES[tone], className)}>
-      <span className="min-w-0 flex-1">{children}</span>
+      {icon && <span className="flex shrink-0">{icon}</span>}
+      <span className={cn('min-w-0 flex-1', oneLine && 'truncate')}>{children}</span>
+      {action && (
+        <Button variant="muted" size="small" className="shrink-0" onClick={action.onClick}>
+          {action.label}
+        </Button>
+      )}
       {/* `current` so the ✕ takes the tone's colour rather than the
           muted grey an IconButton wears on a neutral surface. */}
-      <IconButton variant="current" aria-label={dismissLabel} onClick={onDismiss} className="-mr-1 shrink-0">
-        <IconX size={16} stroke={1.5} />
-      </IconButton>
+      {onDismiss && (
+        <IconButton variant="current" aria-label={dismissLabel} onClick={onDismiss} className="-mr-1 shrink-0">
+          <IconX size={16} stroke={1.5} />
+        </IconButton>
+      )}
     </div>
   )
 }

package/src/ContainerHeader.mdx

@@ -0,0 +1,56 @@
+import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks'
+import * as ContainerHeaderStories from './ContainerHeader.stories'
+
+<Meta of={ContainerHeaderStories} />
+
+# ContainerHeader
+
+The bar across the top of a column — a list, a thread, a side panel: its
+title, and the buttons that act on the whole column at the right edge. 48px,
+with a hairline under it. Peek's ContainerHeader, moved into the package as it
+looks (Katerina, 2026-09-18).
+
+<Canvas of={ContainerHeaderStories.WithActions} />
+
+## When
+
+- The top of a column in a frame: the list beside the conversation, the
+  thread, a side panel. One per column.
+- The column's own actions — new, sort, close — as IconButtons with tooltips
+  in `actions`.
+
+## When not
+
+- One section inside a column → **SectionHeader**, the 32px row with a
+  SectionLabel.
+- The top of the whole app → **TopBar**.
+- A dialog's title → **DialogShell** draws its own.
+
+## How
+
+```tsx
+import { ContainerHeader, IconButton } from '@estiva-app/ui'
+
+<ContainerHeader
+  title="All items"
+  chevron
+  actions={
+    <IconButton tooltip="New item" aria-label="New item" onClick={openNew}>
+      <IconEdit size={16} stroke={1.5} />
+    </IconButton>
+  }
+/>
+```
+
+- A string title is one line in `body-2-strong` and keeps its width. Anything
+  else — an EditableText, a title over a caption — takes the room left and is
+  drawn as given.
+
+<Canvas of={ContainerHeaderStories.WithRichTitle} />
+
+- Only offer a button that does something: a button with nothing behind it is
+  a promise the column cannot keep.
+
+## Props
+
+<Controls of={ContainerHeaderStories.Default} />

package/src/ContainerHeader.stories.tsx

@@ -0,0 +1,62 @@
+import type { Decorator, Meta, StoryObj } from '@storybook/react-vite'
+import { IconEdit, IconSortDescending, IconX } from '@tabler/icons-react'
+import { ContainerHeader } from './ContainerHeader'
+import { IconButton } from './IconButton'
+
+// The top of a column: a surface with a hairline, so the bar's own hairline and height can be seen.
+const inColumn: Decorator = (Story) => <div className="w-96 overflow-hidden rounded-lg border border-border-default bg-bg-surface">{Story()}</div>
+
+const meta = {
+  title: 'Navigation/ContainerHeader',
+  component: ContainerHeader,
+  args: { title: 'Items' },
+  argTypes: { actions: { control: false } },
+  decorators: [inColumn],
+} satisfies Meta<typeof ContainerHeader>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/** A string title, one line, alone. */
+export const Default: Story = {}
+
+/** A chevron after the title, for a title that opens something. */
+export const WithChevron: Story = { args: { title: 'All items', chevron: true } }
+
+/** The column's own buttons at the right edge: IconButtons with tooltips. */
+export const WithActions: Story = {
+  args: {
+    title: 'All items',
+    chevron: true,
+    actions: (
+      <>
+        <IconButton tooltip="Sort by" aria-label="Sort by">
+          <IconSortDescending size={16} stroke={1.5} />
+        </IconButton>
+        <IconButton tooltip="New item" aria-label="New item">
+          <IconEdit size={16} stroke={1.5} />
+        </IconButton>
+      </>
+    ),
+  },
+}
+
+/** A title that is not a string — a name over its caption — takes the room left and is drawn as given. */
+export const WithRichTitle: Story = {
+  // axe color-contrast is off here until PLAN.md stage 0.10 is ruled: the caption
+  // is muted text, 3.94:1 in signal (AA 4.5:1) — as Peek's file page draws it.
+  parameters: { a11y: { config: { rules: [{ id: 'color-contrast', enabled: false }] } } },
+  args: {
+    title: (
+      <div className="min-w-0">
+        <p className="truncate text-body-2-strong text-text-primary">Quarterly plan</p>
+        <p className="truncate text-caption text-text-muted">In Project Alpha</p>
+      </div>
+    ),
+    actions: (
+      <IconButton tooltip="Close" aria-label="Close">
+        <IconX size={16} stroke={1.5} />
+      </IconButton>
+    ),
+  },
+}

package/src/ContainerHeader.test.tsx

@@ -0,0 +1,47 @@
+// @vitest-environment jsdom
+/**
+ * What `ContainerHeader.mdx` claims: a string title is one line that keeps its
+ * width, a node is drawn as given and takes the room left, and the column's
+ * buttons sit at the right edge. The pixels are proved against Peek's own
+ * (docs/GATES.md, UIG-13: A).
+ */
+import { afterEach, describe, expect, it } from 'vitest'
+import { cleanup, render, screen } from '@testing-library/react'
+import { ContainerHeader } from './ContainerHeader'
+
+afterEach(cleanup)
+
+describe('ContainerHeader', () => {
+  it('is the 48px bar with a hairline under it', () => {
+    const { container } = render(<ContainerHeader title="Items" />)
+    const bar = container.firstElementChild!.className.split(' ')
+    expect(bar).toContain('h-12')
+    expect(bar).toContain('border-b')
+    expect(bar).toContain('border-border-subtle')
+  })
+
+  it('a string title is one line in body-2-strong, and keeps its width', () => {
+    render(<ContainerHeader title="Items" />)
+    const title = screen.getByText('Items')
+    expect(title.className).toContain('text-body-2-strong')
+    expect(title.className).toContain('whitespace-nowrap')
+    expect(title.parentElement!.className).toContain('shrink-0')
+  })
+
+  it('a node title is drawn as given and takes the room left', () => {
+    render(<ContainerHeader title={<em>Plan</em>} />)
+    const holder = screen.getByText('Plan').parentElement!
+    expect(holder.className).toContain('flex-1')
+    expect(holder.className).toContain('min-w-0')
+  })
+
+  it('draws a chevron only when asked, and the buttons at the right edge', () => {
+    const { container, rerender } = render(<ContainerHeader title="Items" />)
+    expect(container.querySelector('svg')).toBeNull()
+    expect(container.firstElementChild!.children).toHaveLength(1)
+    rerender(<ContainerHeader title="Items" chevron actions={<button type="button">New</button>} />)
+    expect(container.querySelector('svg')).not.toBeNull()
+    expect(container.firstElementChild!.children).toHaveLength(2)
+    expect(screen.getByRole('button', { name: 'New' }).closest('div')!.className).toContain('gap-1')
+  })
+})

package/src/ContainerHeader.tsx

@@ -0,0 +1,45 @@
+import type { ReactNode } from 'react'
+import { IconChevronDown } from '@tabler/icons-react'
+import { cn } from './cn'
+
+/**
+ * The bar across the top of a column — a list, a thread, a side panel: its
+ * title, and the buttons that act on the whole column at the right edge.
+ * Peek's ContainerHeader, moved into the package exactly as it looks
+ * (Katerina, 2026-09-18, UIG-13).
+ *
+ * 48px tall, a hairline under it. A string title is one line in
+ * `body-2-strong` and keeps its width; anything else — an EditableText, a
+ * title over a caption — takes the room that is left and is drawn as given.
+ *
+ * Not a SectionHeader: that is the 32px row one section of a column starts
+ * with. This is the column's own bar, one per column.
+ */
+export interface ContainerHeaderProps {
+  /** A string keeps the one-line treatment; a node is drawn as given. */
+  title: ReactNode
+  /** A chevron after the title, for a title that opens something. */
+  chevron?: boolean
+  /** The column's own buttons, at the right edge: IconButtons with tooltips, 4px apart. */
+  actions?: ReactNode
+  className?: string
+}
+
+export function ContainerHeader({ title, chevron = false, actions, className }: ContainerHeaderProps) {
+  const text = typeof title === 'string'
+  return (
+    <div className={cn('flex h-12 shrink-0 items-center justify-between overflow-hidden border-b border-border-subtle py-2 pr-4 pl-5', className)}>
+      <div className={cn('flex items-center gap-2 overflow-hidden', text ? 'shrink-0' : 'min-w-0 flex-1')}>
+        <div className={cn('flex items-center gap-1', text ? 'shrink-0' : 'min-w-0 flex-1')}>
+          {text ? <span className="whitespace-nowrap text-body-2-strong text-text-primary">{title}</span> : <div className="min-w-0 flex-1">{title}</div>}
+          {chevron && <IconChevronDown size={12} stroke={1.5} className="shrink-0 text-text-secondary" />}
+        </div>
+      </div>
+      {actions && (
+        <div className="flex shrink-0 items-center justify-end gap-3">
+          <div className="flex shrink-0 items-center gap-1">{actions}</div>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/EmptyState.mdx

@@ -53,6 +53,18 @@ import { EmptyState } from '@estiva-app/ui'
 <EmptyState scope="section" message="No comments yet." />
 ```
 
+**When there is one thing to do about it, give it as `action`.** It is drawn
+16px under the line as the package's Button, outlined — the same look wherever
+it appears (Katerina, 2026-09-18). Never put a Button beside an EmptyState in a
+box of your own: the box places it, and no two boxes place it alike. A `page`
+only; a section's line takes no action.
+
+<Canvas of={EmptyStateStories.WithAction} />
+
+```tsx
+<EmptyState icon={<IconMessagePlus size={16} stroke={1.5} />} message="No topics yet." action={{ label: 'New topic', onClick: openNewTopic }} />
+```
+
 **Put a section's empty state inside the box its rows live in, and give it no
 padding.** Write the box once; inside it goes either the rows or the empty
 state. The box's padding then places both, and the line starts where the first

package/src/EmptyState.stories.tsx

@@ -1,5 +1,5 @@
 import type { Decorator, Meta, StoryObj } from '@storybook/react-vite'
-import { IconLock } from '@tabler/icons-react'
+import { IconLock, IconMessagePlus } from '@tabler/icons-react'
 import { EmptyState } from './EmptyState'
 
 // A box with a hairline, so where the state sits inside its room can be seen: a page's in the middle both ways, a section's at the top left.
@@ -25,6 +25,11 @@ const sectionContrastDeferred = { a11y: { config: { rules: [{ id: 'color-contras
 export const Section: Story = { args: { scope: 'section' }, decorators: [inBox], parameters: sectionContrastDeferred }
 export const LongerMessage: Story = { args: { message: 'No items yet. Add one from any list.' }, decorators: [inBox] }
 export const CustomIcon: Story = { args: { icon: <IconLock size={16} stroke={1.5} />, message: 'Nothing you can read here yet.' }, decorators: [inBox] }
+/** The one thing to do about it, under the line: the package's Button, outlined. */
+export const WithAction: Story = {
+  args: { icon: <IconMessagePlus size={16} stroke={1.5} />, message: 'No topics yet.', action: { label: 'New topic', onClick: () => {} } },
+  decorators: [inBox],
+}
 
 /** One box, written once, holding the rows or the empty state: its padding places both, so the line starts where the first row does. */
 export const InsideTheRowsBox: Story = {

package/src/EmptyState.test.tsx

@@ -6,7 +6,7 @@
  * structure.
  */
 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 { EmptyState } from './EmptyState'
 
 afterEach(cleanup)
@@ -59,4 +59,21 @@ describe('EmptyState', () => {
     expect(container.querySelector('[data-testid="own"]')).not.toBeNull()
     expect(container.querySelector('svg')).toBeNull()
   })
+
+  it('draws its action under the line as the package Button, outlined (Katerina, 2026-09-18)', () => {
+    let clicked = 0
+    render(<EmptyState message="No topics yet." action={{ label: 'New topic', onClick: () => (clicked += 1) }} />)
+    const button = screen.getByRole('button', { name: 'New topic' })
+    expect(button.className).toContain('border-border-default')
+    expect(button.className).toContain('mt-2')
+    // Under the line, in the same column.
+    expect(screen.getByText('No topics yet.').nextElementSibling).toBe(button)
+    fireEvent.click(button)
+    expect(clicked).toBe(1)
+  })
+
+  it('a section takes no action', () => {
+    render(<EmptyState scope="section" message="Nothing here yet." action={{ label: 'Add', onClick: () => {} }} />)
+    expect(screen.queryByRole('button')).toBeNull()
+  })
 })

package/src/EmptyState.tsx

@@ -1,5 +1,6 @@
 import type { ReactNode } from 'react'
 import { IconMessage2 } from '@tabler/icons-react'
+import { Button } from './Button'
 import { cn } from './cn'
 
 /**
@@ -28,10 +29,16 @@ export interface EmptyStateProps {
   message: string
   /** `page` when the whole page is empty; `section` when one part of it is. */
   scope?: 'page' | 'section'
+  /**
+   * The one thing to do about it — "New topic", "Try again" — drawn 16px under
+   * the line as the package's Button, outlined (Katerina, 2026-09-18). A `page`
+   * only: a section's empty line is one line among others, not a stage.
+   */
+  action?: { label: string; onClick: () => void }
   className?: string
 }
 
-export function EmptyState({ icon, message, scope = 'page', className }: EmptyStateProps) {
+export function EmptyState({ icon, message, scope = 'page', action, className }: EmptyStateProps) {
   if (scope === 'section') {
     return <p className={cn('text-caption text-text-muted', className)}>{message}</p>
   }
@@ -39,6 +46,12 @@ export function EmptyState({ icon, message, scope = 'page', className }: EmptySt
     <div className={cn('flex flex-1 flex-col items-center justify-center gap-2', className)}>
       <span className="text-text-secondary">{icon ?? <IconMessage2 size={16} stroke={1.5} />}</span>
       <p className="text-body-2 text-text-secondary text-center">{message}</p>
+      {/* 8px of the column's gap and 8px of its own: 16px under the line, as Peek had it. */}
+      {action && (
+        <Button variant="outlined" className="mt-2" onClick={action.onClick}>
+          {action.label}
+        </Button>
+      )}
     </div>
   )
 }

package/src/gates/app-checks.ts

@@ -43,6 +43,7 @@ export const APP_TICKET_TITLES: Record<string, string> = {
   'UIG-7': 'Lint rule — every remaining raw element',
   'UIG-8': 'Lint rule — forbid the reach',
   'UIG-9': 'Lint rule — the className allow-list',
+  'UIG-10': 'create-app — a command that makes a new Estiva app that runs',
   'UIG-13': "The registry widens to Peek's 115 and Ship's 74, with classification",
   'UIG-19': 'Lock the contract in CI, and make the three Storybooks one search',
   'UIG-20': 'The Claude skill, reading the registry',
@@ -164,8 +165,29 @@ export function appChecks(h: GateHelpers, { app = '.', page, chain = { ref: 'UIG
       } },
       { what: 'a real page gets no error', run: realPage },
     ]),
+    // UIG-10, reopened 18 September: a tab holds one relay client, the way Peek and Ship hold
+    // theirs and a made app is written to. Measured on both mains that day: one each, and no
+    // socket opened any other way. A second holder, or a socket of the app's own, is a second
+    // connection the relay signs in and budgets separately.
+    ticket('UIG-10', [
+      { what: 'the app holds one relay client, at module level, and opens no socket of its own', run: () => {
+        const sources = h.listFiles(at('src'), (n) => /\.tsx?$/.test(n) && !/\.(test|stories)\.tsx?$/.test(n))
+        const own = sources.filter((f) => /\bcreateLiveClient\(|\bcreateLiveRelay\(|\bnew WebSocket\(/.test(h.read(f)))
+        if (own.length) return h.FAIL(`opens a socket of its own (${own.join(', ')}): hold one client from createLiveClientHolder()`)
+        const holders = sources.filter((f) => /^\s*(?:export\s+)?const\s+\w+\s*=\s*createLiveClientHolder\(\)/m.test(h.read(f)))
+        if (holders.length !== 1) return h.FAIL(holders.length ? `${holders.length} client holders (${holders.join(', ')}): a tab holds one` : 'no module-level createLiveClientHolder(): the app has no relay client')
+        return h.PASS(`one client for the tab, held in ${holders[0]}`)
+      } },
+    ]),
+    // Built by UIG-13, 18 September. An app's catalogue is built fresh from its code
+    // and never committed: the package is public and the apps are private (Katerina).
     ticket('UIG-13', [
-      { what: 'registry.json is committed and has entries', run: () => h.json(h.exists('registry.json') ? 'registry.json' : at('registry.json'), (d) => ((d as { entries?: unknown[]; components?: unknown[] }).entries ?? (d as { components?: unknown[] }).components ?? []).length > 0, 'registry.json has entries') },
+      { what: "npm run ui:find is the package's search, over the package and this app", run: () => h.contains(at('package.json'), /"ui:find":\s*"estiva-ui find\b/, "ui:find runs the package's estiva-ui find") },
+      { what: "npm run registry:check is the package's check", run: () => h.contains(at('package.json'), /"registry:check":\s*"estiva-ui check\b/, 'registry:check runs estiva-ui check') },
+      { what: "CI's job gate refuses a part with no description", run: () => h.ciJob('gate', 'registry:check') },
+      // In the .gitignore of the app's own folder, where `estiva-ui build` would write it.
+      { what: 'the catalogue is never committed: git ignores registry.json', run: () => h.contains(at('.gitignore'), /^\/?registry\.json\r?$/m, `${at('.gitignore')} ignores registry.json`) },
+      { what: 'every part is described and sorted, and every file is accounted for', run: () => h.catalogue(at('.')) },
     ]),
     ticket('UIG-19', [
       { what: 'the usage-page contract runs in CI', run: () => h.ci(/[\w:-]*contract[\w:-]*/) },