@estiva-app/ui 0.30.0 → 0.31.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@estiva-app/ui",
-  "version": "0.30.0",
+  "version": "0.31.0",
   "description": "Estiva's design tokens (the contract) and a small set of primitives (a convenience) for every Estiva app.",
   "type": "module",
   "license": "MIT",

package/registry.json

@@ -4,7 +4,7 @@
     "kind": "package",
     "repo": "estiva-ui",
     "package": "@estiva-app/ui",
-    "packageVersion": "0.30.0",
+    "packageVersion": "0.31.0",
     "exports": 87,
     "typeExports": 96,
     "files": null

package/src/CommandPalette.tsx

@@ -553,6 +553,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 */}
       <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/ContainerHeader.mdx

@@ -23,10 +23,11 @@ with a hairline under it.
 - 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.
+- A dialog's title → **DialogShell**, which draws this bar with the dialog's own 18px title.
 
 - A row you draw yourself at the top of a column — your own padding and a line
-  under it → this part. Its numbers are every column's.
+  under it → this part. Its numbers are every column's. The lint refuses the
+  hand-made row (`estiva/no-handmade-header`).
 - A whole list column, header and scrolling list → **ListColumn**, which draws
   this bar at its top.
 

package/src/DialogShell.tsx

@@ -3,6 +3,7 @@ import { Dialog } from '@base-ui/react/dialog'
 import { AlertDialog } from '@base-ui/react/alert-dialog'
 import { IconX } from '@tabler/icons-react'
 import { cn } from './cn'
+import { ContainerHeader } from './ContainerHeader'
 import { IconButton } from './IconButton'
 import { ScrollArea } from './ScrollArea'
 
@@ -113,14 +114,17 @@ export function DialogShell({ title, onClose, headerContent, footer, children, b
             className="bg-bg-elevated border border-border-subtle rounded-lg shadow-lg pointer-events-auto flex flex-col overflow-hidden outline-none"
             style={{ width }}
           >
-            {/* Header */}
-            <div className="h-12 flex items-center justify-between pl-5 pr-4 border-b border-border-subtle shrink-0">
-              {headerContent ?? (
-                <Parts.Title className="text-h4 text-text-primary" render={<span />}>
-                  {title}
-                </Parts.Title>
-              )}
-              {/*
+            {/* Header: the package's one header bar, with the dialog's own title in it (UIG-22). */}
+            <ContainerHeader
+              title={
+                headerContent ?? (
+                  <Parts.Title className="text-h4 text-text-primary" render={<span />}>
+                    {title}
+                  </Parts.Title>
+                )
+              }
+              actions={
+                /*
                 The ✕ IS the `Close` part now, rather than a button that calls
                 `onClose` beside one (stage 4, 2026-09-07). Stage 3 could not do
                 this: an `IconButton` carrying a `tooltip` returned the tooltip
@@ -131,15 +135,16 @@ export function DialogShell({ title, onClose, headerContent, footer, children, b
                 What it buys: the dialog closes through its own state machine,
                 so the ✕, Escape and the outside press are one path with one
                 reason attached, instead of one of the three going around.
-              */}
-              <Parts.Close
-                render={
-                  <IconButton tooltip="Close" aria-label="Close">
-                    <IconX size={16} stroke={1.5} />
-                  </IconButton>
-                }
-              />
-            </div>
+              */
+                <Parts.Close
+                  render={
+                    <IconButton tooltip="Close" aria-label="Close">
+                      <IconX size={16} stroke={1.5} />
+                    </IconButton>
+                  }
+                />
+              }
+            />
 
             {/* Body. With a cap it scrolls in the package's bar: the cap goes
                 on the viewport (ScrollArea's rule — on the region the viewport

package/src/eslint/index.test.ts

@@ -37,6 +37,7 @@ describe('the plugin object', () => {
       'no-raw-element',
       'no-rebuilt-behaviour',
       'no-restyled-part',
+      'no-handmade-header',
       'raw-element-outside-a-wrapper',
       'no-hand-rolled-behaviour',
       'component-has-a-page',
@@ -56,17 +57,18 @@ describe('the plugin object', () => {
   it('gives an app only the app rules, as errors, under estiva/', () => {
     for (const config of [estiva.configs.recommended, estiva.configs.strict]) {
       expect(config.plugins?.[PLUGIN_KEY]).toBe(estiva)
-      expect(config.rules).toEqual({ 'estiva/no-raw-element': 'error', 'estiva/no-rebuilt-behaviour': 'error', 'estiva/no-restyled-part': 'error' })
+      expect(config.rules).toEqual({ 'estiva/no-raw-element': 'error', 'estiva/no-rebuilt-behaviour': 'error', 'estiva/no-restyled-part': 'error', 'estiva/no-handmade-header': 'error' })
     }
-    expect(APP_RULE_IDS).toEqual(['estiva/no-raw-element', 'estiva/no-rebuilt-behaviour', 'estiva/no-restyled-part'])
+    expect(APP_RULE_IDS).toEqual(['estiva/no-raw-element', 'estiva/no-rebuilt-behaviour', 'estiva/no-restyled-part', 'estiva/no-handmade-header'])
   })
 
   /**
-   * `no-restyled-part` is the one rule in both sets (UIG-9): the package restyles
-   * none of its own parts either (Katerina, 17 September). Every other inward
-   * rule still reaches no app.
+   * `no-restyled-part` (UIG-9) and `no-handmade-header` (UIG-22) are in both
+   * sets: the package restyles none of its own parts either (Katerina, 17
+   * September), and draws no header bar by hand ("my review isn't enough",
+   * 23 September). Every other inward rule still reaches no app.
    */
-  it('gives this package its own set, as errors, and only the shared rule reaches an app config', () => {
+  it('gives this package its own set, as errors, and only the shared rules reach an app config', () => {
     expect(estiva.configs.package.plugins?.[PLUGIN_KEY]).toBe(estiva)
     expect(estiva.configs.package.rules).toEqual({
       'estiva/raw-element-outside-a-wrapper': 'error',
@@ -74,9 +76,10 @@ describe('the plugin object', () => {
       'estiva/component-has-a-page': 'error',
       'estiva/component-has-a-story': 'error',
       'estiva/no-restyled-part': 'error',
+      'estiva/no-handmade-header': 'error',
     })
     expect(PACKAGE_RULE_IDS).toEqual(Object.keys(estiva.configs.package.rules ?? {}))
-    for (const id of PACKAGE_RULE_IDS.filter((id) => id !== 'estiva/no-restyled-part')) {
+    for (const id of PACKAGE_RULE_IDS.filter((id) => id !== 'estiva/no-restyled-part' && id !== 'estiva/no-handmade-header')) {
       expect(estiva.configs.recommended.rules?.[id]).toBeUndefined()
       expect(estiva.configs.strict.rules?.[id]).toBeUndefined()
     }
@@ -143,8 +146,8 @@ describe('countGates', () => {
   it('counts an error, and an escape only when the lint reports escapes', async () => {
     const code = component('    <div>\n      <button>x</button>\n      {/* @estiva-escape: a preview drawn from its own palette */}\n      <button>y</button>\n    </div>')
     const none = { errors: 0, warnings: 0, escapes: 0 }
-    expect(countGates(await lint(code)).rules).toEqual({ 'estiva/no-raw-element': { errors: 1, warnings: 0, escapes: 0 }, 'estiva/no-rebuilt-behaviour': none, 'estiva/no-restyled-part': none })
-    expect(countGates(await lint(code, [countMode])).rules).toEqual({ 'estiva/no-raw-element': { errors: 1, warnings: 0, escapes: 1 }, 'estiva/no-rebuilt-behaviour': none, 'estiva/no-restyled-part': none })
+    expect(countGates(await lint(code)).rules).toEqual({ 'estiva/no-raw-element': { errors: 1, warnings: 0, escapes: 0 }, 'estiva/no-rebuilt-behaviour': none, 'estiva/no-restyled-part': none, 'estiva/no-handmade-header': none })
+    expect(countGates(await lint(code, [countMode])).rules).toEqual({ 'estiva/no-raw-element': { errors: 1, warnings: 0, escapes: 1 }, 'estiva/no-rebuilt-behaviour': none, 'estiva/no-restyled-part': none, 'estiva/no-handmade-header': none })
   })
 
   it('lists a report an eslint-disable silenced, and counts it as neither an error nor an escape', async () => {
@@ -165,6 +168,7 @@ describe('countGates', () => {
     expect(countGates([])).toEqual({
       rules: { 'estiva/no-raw-element': { errors: 0, warnings: 0, escapes: 0 }, 'estiva/no-rebuilt-behaviour': { errors: 0, warnings: 0, escapes: 0 },
         'estiva/no-restyled-part': { errors: 0, warnings: 0, escapes: 0 },
+        'estiva/no-handmade-header': { errors: 0, warnings: 0, escapes: 0 },
       },
       disabled: [],
     })

package/src/eslint/index.ts

@@ -20,6 +20,7 @@ import { createRequire } from 'node:module'
 import type { ESLint, Linter } from 'eslint'
 import { componentHasAPage, componentHasAStory } from './has-a-page-and-a-story'
 import { noHandRolledBehaviour } from './no-hand-rolled-behaviour'
+import { noHandmadeHeader } from './no-handmade-header'
 import { noRawElement } from './no-raw-element'
 import { noRebuiltBehaviour } from './no-rebuilt-behaviour'
 import { noRestyledPart } from './no-restyled-part'
@@ -44,6 +45,7 @@ const appRules = {
   'no-raw-element': noRawElement,
   'no-rebuilt-behaviour': noRebuiltBehaviour,
   'no-restyled-part': noRestyledPart,
+  'no-handmade-header': noHandmadeHeader,
 }
 
 /**
@@ -67,6 +69,7 @@ const packageRules = {
   'component-has-a-page': componentHasAPage,
   'component-has-a-story': componentHasAStory,
   'no-restyled-part': noRestyledPart,
+  'no-handmade-header': noHandmadeHeader,
 }
 
 const rules = { ...appRules, ...packageRules }
@@ -97,6 +100,7 @@ plugin.configs.recommended = {
     [`${PLUGIN_KEY}/no-raw-element`]: 'error',
     [`${PLUGIN_KEY}/no-rebuilt-behaviour`]: 'error',
     [`${PLUGIN_KEY}/no-restyled-part`]: 'error',
+    [`${PLUGIN_KEY}/no-handmade-header`]: 'error',
   },
 }
 plugin.configs.strict = {

package/src/eslint/no-handmade-header.test.ts

@@ -0,0 +1,89 @@
+import { RuleTester } from 'eslint'
+import { parser } from 'typescript-eslint'
+import { describe, it } from 'vitest'
+import { noHandmadeHeader } from './no-handmade-header'
+
+RuleTester.describe = describe
+RuleTester.it = it
+RuleTester.itOnly = it.only
+
+const tester = new RuleTester({
+  languageOptions: { parser, parserOptions: { ecmaFeatures: { jsx: true } } },
+  linterOptions: { reportUnusedDisableDirectives: 'off' },
+})
+
+const component = (body: string) => `export function Probe({ title, open }: { title: string; open: boolean }) {\n  return (\n${body}\n  )\n}\n`
+const handmade = [{ messageId: 'handmade' }]
+
+tester.run('no-handmade-header', noHandmadeHeader, {
+  valid: [
+    { name: 'the part itself', code: component('<div className="flex h-full flex-col">\n<ContainerHeader title="Files" />\n<div />\n</div>') },
+    {
+      name: "a group heading inside a list: SectionHeader's row, not a column's bar (Ship's issue groups)",
+      code: component('<section className="flex flex-col gap-px">\n<h3 className="flex h-8 items-center gap-2 px-3"><StatusLabel value="todo" /><span>{3}</span></h3>\n<div />\n</section>'),
+    },
+    {
+      name: "a label strip on a card (Peek's huddle card)",
+      code: component('<Card className="flex flex-col h-[130px]">\n<div className="h-6 bg-bg-inset px-2 flex items-center shrink-0"><span className="text-caption">Huddle</span></div>\n<div />\n</Card>'),
+    },
+    { name: 'a row a person presses is a row, not a header', code: component('<div className="flex h-full flex-col">\n<div className="flex items-center px-3 py-2" onClick={() => {}}><span>{title}</span></div>\n<div />\n</div>') },
+    { name: 'a row with no title: a toolbar, a field', code: component('<div className="flex h-full flex-col">\n<div className="flex items-center gap-1 px-3"><Button>One</Button><Button>Two</Button></div>\n<div />\n</div>') },
+    { name: 'a row with nothing after it heads nothing', code: component('<div className="flex h-full flex-col">\n<div className="flex items-center px-3 py-2"><span>{title}</span></div>\n</div>') },
+    { name: 'a row with no side padding of its own', code: component('<div className="flex h-full flex-col">\n<div className="flex items-center py-2"><span>{title}</span></div>\n<div />\n</div>') },
+    { name: 'a column of rows', code: component('<div className="flex h-full flex-col">\n<div className="flex flex-col px-3"><span>{title}</span></div>\n<div />\n</div>') },
+    {
+      name: 'an escape with its reason',
+      code: component('<div className="flex h-full flex-col">\n{/* @estiva-escape: a print header that must not follow the theme */}\n<div className="flex items-center px-3 py-2"><span>{title}</span></div>\n<div />\n</div>'),
+    },
+  ],
+  invalid: [
+    {
+      // The Folders page's right pane, at the commit before 3dc663b.
+      name: 'a pane that heads itself around an editable name',
+      code: component('<div className="flex h-full flex-col">\n{/* ContainerHeader draws a static title, so this pane heads itself. */}\n<div className="flex items-center gap-2 px-3 py-2">\n<div className="min-w-0 flex-1"><EditableText value={title} label="Folder name" /></div>\n<IconButton icon={<IconX />} label="Close" />\n</div>\n<div className="min-h-0 flex-1" />\n</div>'),
+      errors: handmade,
+    },
+    {
+      // The Folders page's thread pane, at the commit before 3dc663b.
+      name: 'a pane that heads itself with a title and a caption',
+      code: component('<div className="flex h-full flex-col">\n<div className="flex items-center gap-2 px-3 py-2">\n<div className="min-w-0 flex-1">\n<p className="truncate text-body-2-strong text-text-primary">{title ?? "Conversation"}</p>\n{open && <p className="truncate text-caption text-text-muted">In Ship</p>}\n</div>\n</div>\n<div />\n</div>'),
+      errors: handmade,
+    },
+    {
+      name: "ContainerHeader's exact class list, typed by hand (Peek's FilesPanel and ThreadPanel)",
+      code: component('<div className="flex flex-col h-full">\n<div className="h-12 shrink-0 flex items-center justify-between pl-5 pr-4 py-2 border-b border-border-subtle">\n<span className="text-body-2-strong text-text-primary">Files</span>\n</div>\n<div />\n</div>'),
+      errors: handmade,
+    },
+    {
+      name: 'the shape, not the class names: other padding, other gap, a heading, a column that grows',
+      code: component('<aside className="flex grow flex-col">\n<header className="flex items-baseline gap-4 pl-6 pr-2 py-3"><h2>{title}</h2></header>\n<ul />\n</aside>'),
+      errors: handmade,
+    },
+    {
+      name: "a header bar's height and hairline, whatever the column is",
+      code: component('<section className="flex flex-col">\n<div className="flex h-11 items-center border-b px-4"><span>{title}</span></div>\n<div />\n</section>'),
+      errors: handmade,
+    },
+    {
+      name: 'a bar shown only while something is open',
+      code: component('<div className="flex h-full flex-col">\n{open && (\n<div className="flex items-center px-3 py-2"><span>{title}</span></div>\n)}\n<div />\n</div>'),
+      errors: handmade,
+    },
+    {
+      name: 'classes put together with cn() and a variant',
+      code: component('<div className={cn("flex flex-col", "h-full")}>\n<div className={cn("flex items-center", "md:px-4 py-2")}><span>{title}</span></div>\n<div />\n</div>'),
+      errors: handmade,
+    },
+    {
+      // DialogShell's bar, before it drew ContainerHeader: a part's title, named as one.
+      name: "a bar whose title is a part's Title",
+      code: component('<div className="flex flex-col">\n<div className="h-12 flex items-center justify-between pl-5 pr-4 border-b shrink-0">\n{open ?? <Parts.Title render={<span />}>{title}</Parts.Title>}\n</div>\n<div />\n</div>'),
+      errors: handmade,
+    },
+    {
+      name: 'an escape with no reason escapes nothing',
+      code: component('<div className="flex h-full flex-col">\n{/* @estiva-escape: */}\n<div className="flex items-center px-3 py-2"><span>{title}</span></div>\n<div />\n</div>'),
+      errors: [{ messageId: 'escapeWithoutReason' }, { messageId: 'handmade' }],
+    },
+  ],
+})

package/src/eslint/no-handmade-header.ts

@@ -0,0 +1,153 @@
+import type { Rule } from 'eslint'
+import { ESCAPE_MESSAGES, isEscaped } from './escape'
+
+/** The JSX an element is made of, as far as this rule reads it. */
+interface Node {
+  type: string
+  [key: string]: unknown
+}
+
+interface JSXElement extends Node {
+  type: 'JSXElement'
+  openingElement: {
+    name: { type: string; name?: string; object?: { name?: string }; property?: { name?: string } }
+    attributes: { type: string; name?: { name?: string }; value?: Node | null }[]
+    loc: NonNullable<Rule.Node['loc']>
+    range: [number, number]
+  }
+  children: Node[]
+}
+
+const isElement = (n: unknown): n is JSXElement => typeof n === 'object' && n !== null && (n as Node).type === 'JSXElement'
+
+function tagOf(el: JSXElement): string {
+  const n = el.openingElement.name
+  if (n.type === 'JSXIdentifier') return n.name ?? ''
+  if (n.type === 'JSXMemberExpression') return `${n.object?.name ?? ''}.${n.property?.name ?? ''}`
+  return ''
+}
+
+function attribute(el: JSXElement, name: string) {
+  return el.openingElement.attributes.find((a) => a.type === 'JSXAttribute' && a.name?.name === name)
+}
+
+/** Every string literal under a node: a `cn()` call, a template, a ternary. */
+function strings(node: Node | null | undefined, out: string[] = []): string[] {
+  if (!node || typeof node !== 'object') return out
+  if (node.type === 'Literal' && typeof node.value === 'string') out.push(node.value)
+  else if (node.type === 'TemplateLiteral') for (const q of node.quasis as { value: { cooked: string | null } }[]) out.push(q.value.cooked ?? '')
+  for (const [key, value] of Object.entries(node)) {
+    if (key === 'parent' || key === 'loc' || key === 'range') continue
+    if (Array.isArray(value)) for (const v of value) strings(v as Node, out)
+    else if (value && typeof value === 'object' && (value as Node).type) strings(value as Node, out)
+  }
+  return out
+}
+
+/** The classes an element is given, variants taken off: `md:px-3` is `px-3`. */
+function classesOf(el: JSXElement): string[] {
+  const value = attribute(el, 'className')?.value
+  if (!value) return []
+  const text = value.type === 'Literal' ? String(value.value) : strings(value.expression as Node).join(' ')
+  return text
+    .split(/\s+/)
+    .filter(Boolean)
+    .map((c) => c.replace(/^(?:[^:\s[\]]+:)+/, ''))
+}
+
+/**
+ * An element's children as a reader sees them: whitespace and comments gone,
+ * `{open && <X />}` read as `<X />`.
+ */
+function meaningful(el: JSXElement): Node[] {
+  const out: Node[] = []
+  for (const child of el.children) {
+    if (child.type === 'JSXText') {
+      if (String(child.value).trim()) out.push(child)
+    } else if (child.type === 'JSXExpressionContainer') {
+      const e = child.expression as Node
+      if (e.type === 'JSXEmptyExpression') continue
+      if (e.type === 'LogicalExpression' && isElement(e.right)) out.push(e.right as Node)
+      else if (isElement(e)) out.push(e)
+      else out.push(child)
+    } else if (child.type === 'JSXElement' || child.type === 'JSXFragment') out.push(child)
+  }
+  return out
+}
+
+/** Parts that draw a line of text: a title made of one is still a title. */
+const TEXT_PARTS = new Set(['EditableText', 'Person', 'Breadcrumb', 'Link', 'SectionLabel', 'InlineChip'])
+/** What a title written as an expression looks like: a name, a field, a template, a fallback. */
+const VALUE_EXPRESSIONS = new Set(['Identifier', 'MemberExpression', 'TemplateLiteral', 'Literal', 'LogicalExpression', 'ConditionalExpression', 'ChainExpression', 'CallExpression'])
+
+/** Whether the row carries a title: text, a value, a heading, or a part that draws text, three boxes deep at most. */
+function carriesTitle(el: JSXElement, depth = 0): boolean {
+  if (depth > 3) return false
+  for (const child of meaningful(el)) {
+    if (child.type === 'JSXText') return true
+    if (child.type === 'JSXExpressionContainer') {
+      if (VALUE_EXPRESSIONS.has((child.expression as Node).type)) return true
+      continue
+    }
+    if (!isElement(child)) continue
+    const tag = tagOf(child)
+    // `Dialog.Title`, `Parts.Title`: a part's title, named as one.
+    if (/^h[1-6]$/.test(tag) || TEXT_PARTS.has(tag) || /\.(?:Title|Heading)$/.test(tag)) return true
+    // A part's own words are its label, a Button's "Save": only plain boxes are looked into.
+    if (/^[a-z]/.test(tag) && carriesTitle(child, depth + 1)) return true
+  }
+  return false
+}
+
+const ROW = (c: string[]) => c.includes('flex') && !c.includes('flex-col')
+const OWN_SIDE_PADDING = (c: string[]) => c.some((x) => /^-?(?:p|px|pl|pr|ps|pe)-/.test(x))
+/** A column that takes the height it is given: the pane a header bar tops. */
+const FILLS = (c: string[]) => c.includes('flex-col') && c.some((x) => /^(?:h-full|h-screen|flex-1|grow|min-h-0|h-dvh)$/.test(x))
+/** A header bar's own geometry: a column bar's height, or the hairline under it. */
+const BAR = (c: string[]) => c.some((x) => /^(?:h|min-h)-(?:10|11|12|13|14|\[(?:4[0-9]|5[0-6])px\])$/.test(x)) || c.some((x) => /^border-b(?:-|$)/.test(x))
+/** A row a person presses is a row of its own kind, not a header. */
+const INTERACTIVE = ['onClick', 'href', 'role', 'onKeyDown', 'onPointerDown']
+
+/**
+ * UIG-22: a column's header bar built by hand.
+ *
+ * The general rules cannot see this one: a hand-made header is made entirely of
+ * legal parts, a box, some text, some padding. So this rule reads the shape.
+ * A row, first in a column, with side padding of its own and a title in it,
+ * where the column fills the height it is given, or the row has a header bar's
+ * height or the hairline under one. `ContainerHeader` is that bar: 48px, the
+ * title, the column's buttons at the right edge, a hairline under it.
+ *
+ * What it leaves alone, on purpose: a group heading inside a list (the row one
+ * section starts with), a label strip on a card, and a row a person presses.
+ * Only a lowercase element is judged: a part is already a part.
+ */
+export const noHandmadeHeader: Rule.RuleModule = {
+  meta: {
+    type: 'problem',
+    docs: { description: "A column's header bar drawn by hand where ContainerHeader is the part" },
+    schema: [],
+    messages: {
+      handmade:
+        "A column's header bar drawn by hand. Use `ContainerHeader` from @estiva-app/ui: 48px, the title, the column's buttons at the right edge (`actions`), a hairline under it.",
+      ...ESCAPE_MESSAGES,
+    },
+  },
+  create(context) {
+    return {
+      JSXElement(node: Rule.Node) {
+        const column = node as unknown as JSXElement
+        const kids = meaningful(column)
+        const first = kids[0]
+        if (kids.length < 2 || !isElement(first) || !/^[a-z]/.test(tagOf(first))) return
+        const own = classesOf(first)
+        if (!ROW(own) || !OWN_SIDE_PADDING(own)) return
+        if (INTERACTIVE.some((name) => attribute(first, name))) return
+        if (!FILLS(classesOf(column)) && !BAR(own)) return
+        if (!carriesTitle(first)) return
+        if (isEscaped(context, first.openingElement)) return
+        context.report({ loc: first.openingElement.loc, messageId: 'handmade' })
+      },
+    }
+  },
+}

package/src/gates/app-checks.ts

@@ -31,7 +31,7 @@ export interface AppCheckOptions {
   chain?: { ref: string; owner: boolean }
   /** The token lint configs the app has, relative to the app. */
   tokenConfigs?: string[]
-  /** The name of the app's header component a hand-made header row should name (UIG-22's first guess). */
+  /** The part a hand-made column header should name (UIG-22): `ContainerHeader`. */
   headers?: string[]
 }
 
@@ -70,7 +70,7 @@ function all(h: GateHelpers, steps: (() => CheckResult | Promise<CheckResult>)[]
   }
 }
 
-export function appChecks(h: GateHelpers, { app = '.', page, chain = { ref: 'UIG-3', owner: false }, tokenConfigs = ['eslint.tokens.config.js', 'eslint.config.js'], headers = ['ContainerHeader', 'SectionHeader'] }: AppCheckOptions): GateTicket[] {
+export function appChecks(h: GateHelpers, { app = '.', page, chain = { ref: 'UIG-3', owner: false }, tokenConfigs = ['eslint.tokens.config.js', 'eslint.config.js'], headers = ['ContainerHeader'] }: AppCheckOptions): GateTicket[] {
   const WEB = app === '.' ? '' : `${app.replace(/\/$/, '')}/`
   const cwd = app === '.' ? undefined : app
   const PROBE = 'src/components/__gates_probe__.tsx'
@@ -219,7 +219,9 @@ export function appChecks(h: GateHelpers, { app = '.', page, chain = { ref: 'UIG
       { what: "a plain tailwind-merge is an error naming the package's cn()", run: tokenProbe("import { twMerge } from 'tailwind-merge'\nexport const merged = twMerge('p-2', 'p-3')\n", 'error', 'cn()', 'src/lib/__gates_probe__.ts') },
     ]),
     ticket('UIG-22', [
-      { what: 'a hand-made header row is an error naming the header part', run: all(h, headers.map((name) => probe(component(`<section className="flex flex-col"><div className="flex items-center px-3 py-2"><span>${name === 'SectionHeader' ? 'Issues' : 'Folders'}</span></div><div /></section>`), 'error', name)), 'a hand-made header row is an error naming the header part') },
+      // The Folders pane's own row, at the commit before peek 3dc663b.
+      { what: 'a hand-made column header is an error naming ContainerHeader', run: all(h, headers.map((name) => probe(component('<div className="flex h-full flex-col"><div className="flex items-center gap-2 px-3 py-2"><span>Folders</span></div><div /></div>'), 'error', name)), 'a hand-made column header is an error naming ContainerHeader') },
+      { what: 'a group heading inside a list is left alone', run: probe(component('<section className="flex flex-col gap-px"><h3 className="flex h-8 items-center gap-2 px-3"><span>Todo</span></h3><div /></section>'), 'none') },
     ]),
     ticket('UIG-23', [
       { what: 'a hand-made empty line is an error naming EmptyState', run: probe("export function Probe({ items }: { items: string[] }) {\n  return <div>{items.length === 0 ? <p className=\"text-text-secondary\">Nothing here</p> : items.map((i) => <span key={i}>{i}</span>)}</div>\n}\n", 'error', 'EmptyState') },

package/src/gates/create-app.test.ts

@@ -59,7 +59,7 @@ describe('create-estiva-app', () => {
 
   it('starts the count at zero and keeps the CI job named gate', () => {
     const count = JSON.parse(files['.gates-count.json'])
-    expect(Object.values(count.rules)).toEqual([{ errors: 0, warnings: 0, escapes: 0 }, { errors: 0, warnings: 0, escapes: 0 }, { errors: 0, warnings: 0, escapes: 0 }])
+    expect(Object.values(count.rules)).toEqual([{ errors: 0, warnings: 0, escapes: 0 }, { errors: 0, warnings: 0, escapes: 0 }, { errors: 0, warnings: 0, escapes: 0 }, { errors: 0, warnings: 0, escapes: 0 }])
     expect(files['.github/workflows/deploy.yml']).toMatch(/\n {2}gate:\n[\s\S]*npm run lint:rules/)
     expect(files['docs/GATES-DEBT.md']).toContain('Nothing.')
   })

package/src/gates/gates.test.ts

@@ -153,7 +153,7 @@ describe('writeGateCount', () => {
     const written = JSON.parse(readFileSync(join(dir, '.gates-count.json'), 'utf8'))
     expect(written).toMatchObject({ schemaVersion: 1, repo: 'probe' })
     expect(written.rules['estiva/no-raw-element']).toEqual({ errors: 0, warnings: 0, escapes: 1 })
-    expect(Object.keys(written.rules)).toEqual(['estiva/no-raw-element', 'estiva/no-rebuilt-behaviour', 'estiva/no-restyled-part'])
+    expect(Object.keys(written.rules)).toEqual(['estiva/no-raw-element', 'estiva/no-rebuilt-behaviour', 'estiva/no-restyled-part', 'estiva/no-handmade-header'])
 
     expect((await writeGateCount({ root: dir, repo: 'probe' })).changed).toBe(false)