npm - @estiva-app/ui - Versions diffs - 0.16.1 → 0.18.0 - Mend

@estiva-app/ui 0.16.1 → 0.18.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (60) hide show

package/README.md +3 -1
package/dist/Button.d.ts.map +1 -1
package/dist/Checkbox.d.ts +14 -1
package/dist/Checkbox.d.ts.map +1 -1
package/dist/CommandPalette.d.ts.map +1 -1
package/dist/FilePicker.d.ts +22 -0
package/dist/FilePicker.d.ts.map +1 -0
package/dist/Form.d.ts +49 -0
package/dist/Form.d.ts.map +1 -0
package/dist/IconButton.d.ts.map +1 -1
package/dist/SearchInput.d.ts.map +1 -1
package/dist/TextInput.d.ts.map +1 -1
package/dist/Textarea.d.ts.map +1 -1
package/dist/eslint/index.d.ts +1 -1
package/dist/eslint/index.d.ts.map +1 -1
package/dist/eslint/index.js +88 -8
package/dist/eslint/index.js.map +4 -4
package/dist/eslint/no-raw-element.d.ts +88 -0
package/dist/eslint/no-raw-element.d.ts.map +1 -0
package/dist/formBusy.d.ts +15 -0
package/dist/formBusy.d.ts.map +1 -0
package/dist/index.d.ts +2 -0
package/dist/index.d.ts.map +1 -1
package/dist/index.js +479 -350
package/dist/index.js.map +4 -4
package/package.json +1 -1
package/src/Button.tsx +4 -1
package/src/Checkbox.mdx +19 -1
package/src/Checkbox.stories.tsx +12 -0
package/src/Checkbox.test.tsx +54 -0
package/src/Checkbox.tsx +40 -3
package/src/CommandPalette.mdx +6 -2
package/src/CommandPalette.stories.tsx +6 -3
package/src/CommandPalette.test.tsx +15 -0
package/src/CommandPalette.tsx +34 -46
package/src/FilePicker.mdx +49 -0
package/src/FilePicker.stories.tsx +61 -0
package/src/FilePicker.test.tsx +79 -0
package/src/FilePicker.tsx +40 -0
package/src/Form.mdx +78 -0
package/src/Form.stories.tsx +68 -0
package/src/Form.test.tsx +385 -0
package/src/Form.tsx +173 -0
package/src/IconButton.tsx +4 -1
package/src/SearchInput.mdx +2 -2
package/src/SearchInput.tsx +3 -1
package/src/TextInput.mdx +2 -2
package/src/TextInput.test.tsx +7 -0
package/src/TextInput.tsx +4 -1
package/src/Textarea.tsx +4 -1
package/src/eslint/index.test.ts +24 -15
package/src/eslint/index.ts +6 -5
package/src/eslint/{no-raw-button.test.ts → no-raw-element.test.ts} +53 -8
package/src/eslint/no-raw-element.ts +180 -0
package/src/formBusy.ts +19 -0
package/src/index.ts +2 -0
package/stories/Choosing.mdx +3 -0
package/dist/eslint/no-raw-button.d.ts +0 -11
package/dist/eslint/no-raw-button.d.ts.map +0 -1
package/src/eslint/no-raw-button.ts +0 -39

package/src/Form.tsx ADDED Viewed

@@ -0,0 +1,173 @@
+import { useLayoutEffect, useRef, type FormHTMLAttributes, type KeyboardEvent, type ReactNode } from 'react'
+import { Fieldset } from '@base-ui/react/fieldset'
+import { Form as BaseForm } from '@base-ui/react/form'
+import { cn } from './cn'
+import { FormBusyContext, useFormBusy } from './formBusy'
+/**
+ * A form: Enter in a field, or a submit button, sends it, and the page never
+ * reloads. On Base UI's `Form` (UIG-7, 16 September), which the apps' five
+ * forms had each written around a plain `<form>`: `preventDefault`, a busy
+ * flag, and `disabled={busy}` on every field one by one.
+ *
+ * Base UI's part, as it renders it: a `<form noValidate>` — the browser's own
+ * validation bubbles are off, which no field in either app used — that, on
+ * submit, checks every `Field` inside and moves focus to the first one that is
+ * invalid instead of sending. `Field`'s `error` is still how an error shows.
+ *
+ * `busy` is ours. While it is on, the children sit in a disabled
+ * `<fieldset>` (Base UI's `Fieldset`, with no box of its own), so every field
+ * and button inside is switched off at once — the package's Button,
+ * IconButton and Checkbox wearing their own switched-off look, which a
+ * fieldset alone does not give them (`formBusy.ts`) — and focus waits on the form
+ * rather than falling to the page. Chrome drops focus to `<body>` the moment
+ * the focused field is disabled, before any effect runs, and jsdom does not —
+ * so the form remembers the last element inside it that had focus, and takes
+ * focus back from the page on its behalf (measured in Chrome, 16 September).
+ * When `busy` ends, focus goes to the first invalid field, else to what sent
+ * the form, else to the first control. That is `CommandPalette`'s order
+ * too, so the two read the same (UIG-29).
+ *
+ * The keys are ours, the same in every form (Katerina, 16 September): Enter in
+ * a one-line field sends; Enter in a text area is a new line; Enter in a list
+ * or a people picker picks; Ctrl+Enter (Cmd+Enter) sends from anywhere inside.
+ * The form sends on Enter itself rather than leaving it to the browser, whose
+ * implicit submission depends on whether the form has a submit button and how
+ * many fields it holds. `enterSends={false}` keeps Enter in a one-line field
+ * from sending, for a form where only Ctrl+Enter may send (`CommandPalette`).
+ * Every way of sending goes through the form's submit, so Base UI's field
+ * check runs for each.
+ */
+export interface FormProps extends Omit<FormHTMLAttributes<HTMLFormElement>, 'onSubmit' | 'children' | 'noValidate'> {
+  /** Enter in a field, or a submit button. The page's own submit is already prevented. */
+  onSubmit: () => void | Promise<void>
+  /** While sending: every field and button inside is switched off, and focus waits on the form. */
+  busy?: boolean
+  /**
+   * Whether Enter in a one-line field sends. On by default. Off where only
+   * Ctrl+Enter may send — a form inside `CommandPalette`. Ctrl+Enter sends either way.
+   */
+  enterSends?: boolean
+  children: ReactNode
+}
+const CONTROL = 'input:not([type="hidden"]), textarea, select, button, [role="checkbox"], [role="combobox"], [tabindex]:not([tabindex="-1"])'
+/** The inputs a person types one line into; a picker's input (`role="combobox"`) is not one. */
+const ONE_LINE = new Set(['', 'text', 'search', 'email', 'url', 'tel', 'password', 'number'])
+function usable(element: Element | null): element is HTMLElement {
+  return element instanceof HTMLElement && element.isConnected && element.matches(CONTROL) && !element.matches(':disabled') && element.getAttribute('aria-disabled') !== 'true'
+}
+/** A marked field's own control: Base UI marks the control and the `Field` around it. */
+function firstInvalid(form: HTMLElement): HTMLElement | undefined {
+  for (const marked of form.querySelectorAll('[data-invalid]')) {
+    if (usable(marked)) return marked
+    const inside = Array.from(marked.querySelectorAll(CONTROL)).find(usable)
+    if (inside) return inside
+  }
+  return undefined
+}
+export function Form({ onSubmit, busy: ownBusy = false, enterSends = true, className, children, ...props }: FormProps) {
+  // A form inside a busy form is busy too.
+  const outerBusy = useFormBusy()
+  const busy = ownBusy || outerBusy
+  const form = useRef<HTMLFormElement>(null)
+  // Read at submit time: a form that is sending does not send again (Ctrl+Enter reaches it while busy).
+  const busyNow = useRef(busy)
+  busyNow.current = busy
+  // What had focus when the form went busy, and whether the form took focus from it.
+  const sender = useRef<Element | null>(null)
+  const holding = useRef(false)
+  // The last element inside the form that had focus, until focus moves to something outside it.
+  const lastInside = useRef<Element | null>(null)
+  useLayoutEffect(() => {
+    const element = form.current
+    if (!element) return
+    if (busy) {
+      const active = document.activeElement
+      // Focus is still inside (jsdom, or a field that stayed enabled), or the
+      // browser has already dropped it to the page from a field inside (Chrome).
+      const from =
+        active && active !== element && element.contains(active)
+          ? active
+          : !active || active === document.body
+            ? lastInside.current
+            : null
+      if (from?.isConnected) {
+        sender.current = from
+        holding.current = true
+        element.focus()
+      }
+      return
+    }
+    if (!holding.current) return
+    holding.current = false
+    // Someone who moved focus on while waiting keeps it where they put it.
+    if (document.activeElement !== element && document.activeElement !== document.body) return
+    const target = firstInvalid(element) ?? (usable(sender.current) ? sender.current : Array.from(element.querySelectorAll(CONTROL)).find(usable))
+    sender.current = null
+    target?.focus()
+  }, [busy])
+  /*
+    Bubble phase, after the field's own handler: a picker picks on Enter and
+    says so by preventing it, and a field that handles Enter itself does too.
+  */
+  const onKeyDown = (event: KeyboardEvent<HTMLFormElement>) => {
+    props.onKeyDown?.(event)
+    if (event.key !== 'Enter' || event.defaultPrevented || event.nativeEvent.isComposing) return
+    const target = event.target
+    const inInput = target instanceof HTMLInputElement
+    /*
+      In an input the browser sends a form on its own — on Enter with Shift or
+      Alt too (measured in Chrome: Shift+Enter sent Peek's comment box, 16
+      September) — so the form stops that every time and sends only by these
+      rules. A text area's Enter is a new line and a button's Enter presses it:
+      those are left to the browser.
+    */
+    if (inInput) event.preventDefault()
+    if (event.altKey || event.shiftKey) return
+    if (event.ctrlKey || event.metaKey) {
+      event.preventDefault()
+      form.current?.requestSubmit()
+      return
+    }
+    if (!inInput) return
+    const oneLine = ONE_LINE.has((target.getAttribute('type') ?? '').toLowerCase()) && target.getAttribute('role') !== 'combobox'
+    if (enterSends && oneLine) form.current?.requestSubmit()
+  }
+  return (
+    <BaseForm
+      ref={form}
+      {...props}
+      // Focus waits here only while busy; the rest of the time a click between two fields must not land on the form.
+      tabIndex={busy ? -1 : props.tabIndex}
+      // A form that holds focus for a moment must not draw a focus ring.
+      className={cn('outline-none', className)}
+      onFocus={(event) => {
+        if (event.target !== form.current) lastInside.current = event.target
+        props.onFocus?.(event)
+      }}
+      onBlur={(event) => {
+        const next = event.relatedTarget
+        if (next && !form.current?.contains(next)) lastInside.current = null
+        props.onBlur?.(event)
+      }}
+      onKeyDown={onKeyDown}
+      onSubmit={(event) => {
+        event.preventDefault()
+        if (busyNow.current) return
+        void onSubmit()
+      }}
+    >
+      <Fieldset.Root disabled={busy} className="contents">
+        <FormBusyContext.Provider value={busy}>{children}</FormBusyContext.Provider>
+      </Fieldset.Root>
+    </BaseForm>
+  )
+}

package/src/IconButton.tsx CHANGED Viewed

@@ -1,6 +1,7 @@
 import type { ComponentPropsWithRef, ReactNode } from 'react'
 import { Button as BaseButton } from '@base-ui/react/button'
 import { cn } from './cn'
+import { useFormBusy } from './formBusy'
 import { TooltipTrigger } from './Tooltip'
 /**
@@ -42,10 +43,12 @@ export function IconButton({
   type = 'button',
   ...props
 }: IconButtonProps) {
+  // Inside a busy Form: switched off, and looking it (formBusy.ts).
+  const formBusy = useFormBusy()
   const button = (
     <BaseButton
       type={type}
-      disabled={disabled || !!disabledReason}
+      disabled={disabled || !!disabledReason || formBusy}
       focusableWhenDisabled={!!disabledReason}
       className={(state) =>
         cn(

package/src/SearchInput.mdx CHANGED Viewed

@@ -5,8 +5,8 @@ import * as SearchInputStories from './SearchInput.stories'
 # SearchInput
-An inset field with a hairline border that strengthens on focus, and an
-optional keyboard hint at the right edge.
+An inset field with a hairline border that strengthens on hover and on
+focus, and an optional keyboard hint at the right edge.
 <Canvas of={SearchInputStories.WithShortcut} />

package/src/SearchInput.tsx CHANGED Viewed

@@ -33,7 +33,9 @@ export function SearchInput({ shortcut, className, placeholder = 'Search…', ..
       className={cn(
         'flex gap-2 items-center px-3 py-2 rounded-lg',
         'bg-bg-inset border border-border-default',
-        'focus-within:border-border-strong transition-colors',
+        // Hover strengthens the border as it does on every other field (16 September). Here that
+        // is also the focus look, which was the stronger border before hover existed.
+        'hover:border-border-strong focus-within:border-border-strong transition-colors',
         className,
       )}
     >

package/src/TextInput.mdx CHANGED Viewed

@@ -5,8 +5,8 @@ import * as TextInputStories from './TextInput.stories'
 # TextInput
-The single-line field: inset surface, 8px radius, 14px text, the focus
-border in every theme.
+The single-line field: inset surface, 8px radius, 14px text, a stronger
+border on hover, the focus border in every theme.
 <Canvas of={TextInputStories.Filled} />

package/src/TextInput.test.tsx CHANGED Viewed

@@ -35,4 +35,11 @@ describe('TextInput', () => {
     for (const c of ['px-3', 'py-2', 'text-input-value']) expect(classes).not.toContain(c)
     expect(input.hasAttribute('size')).toBe(false)
   })
+  it("a stronger border on hover, as Select's, and the focus border still wins while focused", () => {
+    render(<TextInput aria-label="Title" />)
+    const classes = screen.getByRole('textbox').className.split(' ')
+    // Both survive cn(); Tailwind emits focus after hover, so the order in CSS decides, not here.
+    for (const c of ['border-border-default', 'hover:border-border-strong', 'focus:border-border-focus']) expect(classes).toContain(c)
+  })
 })

package/src/TextInput.tsx CHANGED Viewed

@@ -32,7 +32,10 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(function T
       ref={ref}
       type={type}
       className={cn(
-        'bg-bg-inset border border-border-default focus:border-border-focus rounded-lg',
+        // The border strengthens on hover, as Select's and ChipInput's do (Katerina, 16 September:
+        // "aren't there hover states in text input and text area?"). Focus comes after hover in
+        // Tailwind's order, so a focused field keeps the focus border under the pointer.
+        'bg-bg-inset border border-border-default hover:border-border-strong focus:border-border-focus rounded-lg',
         // The small size is the small Select's trigger, class for class.
         size === 'default' && 'px-3 py-2 text-input-value',
         size === 'small' && 'h-6 px-2 text-caption',

package/src/Textarea.tsx CHANGED Viewed

@@ -21,7 +21,10 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function
       ref={ref as React.Ref<HTMLElement>}
       render={<textarea />}
       className={cn(
-        'bg-bg-inset border border-border-default focus:border-border-focus rounded-lg px-3 py-2',
+        // The border strengthens on hover, as Select's and ChipInput's do (Katerina, 16 September:
+        // "aren't there hover states in text input and text area?"). Focus comes after hover in
+        // Tailwind's order, so a focused field keeps the focus border under the pointer.
+        'bg-bg-inset border border-border-default hover:border-border-strong focus:border-border-focus rounded-lg px-3 py-2',
         'text-input-value text-text-primary placeholder:text-text-muted',
         'resize-none outline-none transition-colors',
         'disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled',

package/src/eslint/index.test.ts CHANGED Viewed

@@ -7,7 +7,7 @@ import estiva, { APP_RULE_IDS, countGates, PACKAGE_RULE_IDS, PLUGIN_KEY } from '
 /**
  * The plugin as an app uses it: a flat config with `configs.recommended`,
  * linting text the way Peek's editor hook does (`lintText`). The rule's own
- * cases are in no-raw-button.test.ts.
+ * cases are in no-raw-element.test.ts.
  */
 const tsx: Linter.Config = {
   files: ['**/*.tsx'],
@@ -34,7 +34,7 @@ describe('the plugin object', () => {
   it('carries every rule, the app ones and the inward ones', () => {
     expect(Object.keys(estiva.rules)).toEqual([
-      'no-raw-button',
+      'no-raw-element',
       'raw-element-outside-a-wrapper',
       'no-hand-rolled-behaviour',
       'component-has-a-page',
@@ -44,17 +44,19 @@ describe('the plugin object', () => {
   /**
    * The apps spread `recommended`. A rule added for the package (UIG-5) must not
-   * arrive in Peek or Ship with the next version bump: an app is full of raw
-   * elements it may keep until UIG-7, and has no `.mdx` pages at all. This is
+   * arrive in Peek or Ship with the next version bump: an app's components are
+   * not primitives, so "buried inside a component" means nothing there
+   * (`no-raw-element` is the app's version, UIG-7), and an app has no `.mdx`
+   * pages at all. This is
    * the test that holds that line — if you add an app-facing rule on purpose,
    * change it deliberately, here.
    */
   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-button': 'error' })
+      expect(config.rules).toEqual({ 'estiva/no-raw-element': 'error' })
     }
-    expect(APP_RULE_IDS).toEqual(['estiva/no-raw-button'])
+    expect(APP_RULE_IDS).toEqual(['estiva/no-raw-element'])
   })
   it('gives this package its own set, as errors, and it reaches no app config', () => {
@@ -77,7 +79,14 @@ describe('an app lint with configs.recommended', () => {
   it('reports a raw <button>, naming Button', async () => {
     const [result] = await lint(component('    <button type="button">x</button>'))
     expect(result.messages.map((m) => [m.ruleId, m.severity, m.message])).toEqual([
-      ['estiva/no-raw-button', 2, 'Use `Button` from @estiva-app/ui instead of a raw <button>.'],
+      ['estiva/no-raw-element', 2, 'Use `Button` from @estiva-app/ui instead of a raw <button>.'],
+    ])
+  })
+  it('reports a raw <a>, naming Link', async () => {
+    const [result] = await lint(component('    <a href="/x">x</a>'))
+    expect(result.messages.map((m) => [m.ruleId, m.severity, m.message])).toEqual([
+      ['estiva/no-raw-element', 2, 'Use `Link` from @estiva-app/ui instead of a raw <a>. For a chip, `InlineChip`; for a whole card, `Card` with `href`.'],
     ])
   })
@@ -90,25 +99,25 @@ describe('an app lint with configs.recommended', () => {
 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>')
-    expect(countGates(await lint(code)).rules).toEqual({ 'estiva/no-raw-button': { errors: 1, warnings: 0, escapes: 0 } })
-    expect(countGates(await lint(code, [countMode])).rules).toEqual({ 'estiva/no-raw-button': { errors: 1, warnings: 0, escapes: 1 } })
+    expect(countGates(await lint(code)).rules).toEqual({ 'estiva/no-raw-element': { errors: 1, warnings: 0, escapes: 0 } })
+    expect(countGates(await lint(code, [countMode])).rules).toEqual({ 'estiva/no-raw-element': { errors: 1, warnings: 0, escapes: 1 } })
   })
   it('lists a report an eslint-disable silenced, and counts it as neither an error nor an escape', async () => {
-    const results = await lint(component('    // eslint-disable-next-line estiva/no-raw-button\n    <button>x</button>'), [countMode])
+    const results = await lint(component('    // eslint-disable-next-line estiva/no-raw-element\n    <button>x</button>'), [countMode])
     const count = countGates(results)
-    expect(count.rules['estiva/no-raw-button']).toEqual({ errors: 0, warnings: 0, escapes: 0 })
-    expect(count.disabled).toEqual([{ filePath: results[0].filePath, line: 4, ruleId: 'estiva/no-raw-button' }])
+    expect(count.rules['estiva/no-raw-element']).toEqual({ errors: 0, warnings: 0, escapes: 0 })
+    expect(count.disabled).toEqual([{ filePath: results[0].filePath, line: 4, ruleId: 'estiva/no-raw-element' }])
   })
   it('counts a marker inside that directive as an error of the rule', async () => {
-    const results = await lint(component('    // eslint-disable-next-line estiva/no-raw-button -- @estiva-escape: a preview drawn from its own palette\n    <button>x</button>'), [countMode])
+    const results = await lint(component('    // eslint-disable-next-line estiva/no-raw-element -- @estiva-escape: a preview drawn from its own palette\n    <button>x</button>'), [countMode])
     const count = countGates(results)
-    expect(count.rules['estiva/no-raw-button']).toEqual({ errors: 1, warnings: 0, escapes: 0 })
+    expect(count.rules['estiva/no-raw-element']).toEqual({ errors: 1, warnings: 0, escapes: 0 })
     expect(count.disabled).toHaveLength(1)
   })
   it('lists every rule of the plugin, even with nothing found', () => {
-    expect(countGates([])).toEqual({ rules: { 'estiva/no-raw-button': { errors: 0, warnings: 0, escapes: 0 } }, disabled: [] })
+    expect(countGates([])).toEqual({ rules: { 'estiva/no-raw-element': { errors: 0, warnings: 0, escapes: 0 } }, disabled: [] })
   })
 })

package/src/eslint/index.ts CHANGED Viewed

@@ -20,7 +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 { noRawButton } from './no-raw-button'
+import { noRawElement } from './no-raw-element'
 import { rawElementOutsideAWrapper } from './raw-element-outside-a-wrapper'
 export { ESCAPE_MARKER, MIN_REASON, SETTINGS_KEY, isEscaped, type EstivaSettings } from './escape'
@@ -35,7 +35,7 @@ export const PLUGIN_KEY = 'estiva'
  * already has. `recommended` and `strict` carry these and only these.
  */
 const appRules = {
-  'no-raw-button': noRawButton,
+  'no-raw-element': noRawElement,
 }
 /**
@@ -45,8 +45,9 @@ const appRules = {
  *
  * They are in `configs.package`, never in `recommended`, on purpose. Peek and
  * Ship spread `recommended`, so a rule added here must not arrive in an app
- * with the next version bump: an app is full of raw elements it is allowed to
- * have until UIG-7, and has no `.mdx` pages at all. `index.test.ts` holds the
+ * with the next version bump: an app's components are not primitives, so
+ * "buried inside a component" means nothing there (`no-raw-element` is the
+ * app's version, UIG-7), and an app has no `.mdx` pages at all. `index.test.ts` holds the
  * apps' list to exactly the app rules.
  */
 const packageRules = {
@@ -80,7 +81,7 @@ export const PACKAGE_RULE_IDS = Object.keys(packageRules).map((name) => `${PLUGI
 plugin.configs.recommended = {
   name: '@estiva-app/ui/recommended',
   plugins: { [PLUGIN_KEY]: plugin },
-  rules: { [`${PLUGIN_KEY}/no-raw-button`]: 'error' },
+  rules: { [`${PLUGIN_KEY}/no-raw-element`]: 'error' },
 }
 plugin.configs.strict = {
   name: '@estiva-app/ui/strict',

package/src/eslint/{no-raw-button.test.ts → no-raw-element.test.ts} RENAMED Viewed

@@ -1,7 +1,7 @@
 import { RuleTester } from 'eslint'
 import { parser } from 'typescript-eslint'
 import { describe, it } from 'vitest'
-import { noRawButton } from './no-raw-button'
+import { noRawElement, RAW_ELEMENT_PARTS, RAW_INPUT_PARTS } from './no-raw-element'
 RuleTester.describe = describe
 RuleTester.it = it
@@ -14,12 +14,27 @@ const tester = new RuleTester({
 })
 const component = (body: string) => `export function Probe() {\n  return (\n${body}\n  )\n}\n`
+const noPart = (element: string) => `@estiva-app/ui has no part for a raw ${element} yet. Do not build one here: ask Katerina, and it gets made in @estiva-app/ui.`
-tester.run('no-raw-button', noRawButton, {
+/** Every element the mapping names, drawn the simplest way that makes it a control. */
+const withControls: Record<string, string> = { audio: '<audio controls />', video: '<video controls />', img: '<img usemap="#m" alt="" />' }
+const mapped = Object.entries(RAW_ELEMENT_PARTS).map(([name, part]) => ({ name, part, code: withControls[name] ?? `<${name} />` }))
+tester.run('no-raw-element', noRawElement, {
   valid: [
     { name: "the package's Button", code: component('<Button>Save</Button>') },
     { name: 'a member expression named button', code: component('<Foo.button>Save</Foo.button>') },
     { name: 'a name that starts with button', code: component('<buttonish />') },
+    {
+      name: 'the elements that are not controls',
+      code: component('    <section>\n      <h1>Title</h1>\n      <p>Text <strong>and</strong> <em>more</em></p>\n      <ul><li>One</li></ul>\n      <img src="x.png" alt="" />\n      <hr />\n      <kbd>Enter</kbd>\n      <svg><path d="M0 0" /></svg>\n      <time dateTime="2026-09-16">today</time>\n    </section>'),
+    },
+    { name: 'a hidden input is data, not a control', code: component('<input type="hidden" name="id" value="1" />') },
+    { name: "a summary is reported through its details, not twice", code: component('<Foo>\n<summary>More</summary>\n</Foo>') },
+    { name: 'a fieldset and its legend are a frame', code: component('<fieldset><legend>Group</legend></fieldset>') },
+    { name: 'an option and a datalist are parts of another control', code: component('<Foo><option value="a">A</option><datalist id="d" /></Foo>') },
+    { name: 'a video with no controls is a picture that moves', code: component('<video src="a.mp4" autoPlay muted loop />') },
+    { name: 'controls written as false', code: component('<audio src="a.mp3" controls={false} />') },
     {
       name: 'a line comment escape directly above',
       code: component('    // @estiva-escape: a preview drawn from its own palette\n    <button type="button">x</button>'),
@@ -40,25 +55,55 @@ tester.run('no-raw-button', noRawButton, {
       name: 'exactly ten characters of reason, spaces not counted',
       code: component('    // @estiva-escape: ab cd ef gh ij\n    <button>x</button>'),
     },
+    {
+      name: 'an element with no part, escaped',
+      code: component('    // @estiva-escape: a map from another service, until the package has a frame\n    <iframe src="https://example.com" title="Map" />'),
+    },
   ],
   invalid: [
     { name: 'a raw button', code: component('    <button type="button">x</button>'), errors: [{ messageId: 'raw', line: 3 }] },
-    { name: 'a self-closing raw button', code: component('    <button />'), errors: [{ messageId: 'raw' }] },
     {
       name: 'an opening tag that spans lines (what grep misses)',
-      code: component('    <button\n      type="button"\n    >\n      x\n    </button>'),
+      code: component('    <input\n      type="text"\n      value={x}\n    />'),
       errors: [{ messageId: 'raw', line: 3 }],
     },
     {
-      name: 'a raw button nested in other elements',
-      code: component('    <div>\n      <span>\n        <button>x</button>\n      </span>\n    </div>'),
+      name: 'a raw element nested in other elements',
+      code: component('    <div>\n      <span>\n        <a href="/x">x</a>\n      </span>\n    </div>'),
       errors: [{ messageId: 'raw', line: 5 }],
     },
     {
-      name: 'the message names the component',
+      name: "the button's message is UIG-3's, word for word",
       code: component('    <button>x</button>'),
       errors: [{ message: 'Use `Button` from @estiva-app/ui instead of a raw <button>.' }],
     },
+    // Every element in the mapping names its part, or says there is none yet.
+    ...mapped.map(({ name, part, code }) => ({
+      name: part ? `<${name}> names ${part.use}` : `<${name}> has no part yet`,
+      code: component(`    ${code}`),
+      errors: [{ message: part ? `Use \`${part.use}\` from @estiva-app/ui instead of a raw <${name}>.${part.more ?? ''}` : noPart(`<${name}>`) }],
+    })),
+    ...Object.entries(RAW_INPUT_PARTS).map(([type, part]) => ({
+      name: part ? `<input type="${type}"> names ${part.use}` : `<input type="${type}"> has no part yet`,
+      code: component(`    <input type="${type}" />`),
+      errors: [{ message: part ? `Use \`${part.use}\` from @estiva-app/ui instead of a raw <input type="${type}">.` : noPart(`<input type="${type}">`) }],
+    })),
+    { name: 'an input with no type is a text box', code: component('    <input />'), errors: [{ message: 'Use `TextInput` from @estiva-app/ui instead of a raw <input>.' }] },
+    { name: 'an email box is a text box', code: component('    <input type="email" />'), errors: [{ message: 'Use `TextInput` from @estiva-app/ui instead of a raw <input>.' }] },
+    { name: 'a type the browser does not know is a text box', code: component('    <input type="wibble" />'), errors: [{ message: 'Use `TextInput` from @estiva-app/ui instead of a raw <input>.' }] },
+    { name: 'a type written in capitals', code: component('    <input type="CHECKBOX" />'), errors: [{ message: 'Use `Checkbox` from @estiva-app/ui instead of a raw <input type="checkbox">.' }] },
+    { name: 'a type in braces', code: component("    <input type={'file'} />"), errors: [{ message: 'Use `FilePicker` from @estiva-app/ui instead of a raw <input type="file">.' }] },
+    { name: 'a type in a template with nothing computed', code: component('    <input type={`search`} />'), errors: [{ message: 'Use `SearchInput` from @estiva-app/ui instead of a raw <input type="search">.' }] },
+    {
+      name: 'a computed type names every input part',
+      code: component('    <input type={kind} />'),
+      errors: [{ message: 'Use `TextInput` from @estiva-app/ui instead of a raw <input>. For a search, `SearchInput`; for a tick box, `Checkbox`; to pick files, `FilePicker`.' }],
+    },
+    { name: 'a video with controls', code: component('    <video src="a.mp4" controls={true} />'), errors: [{ message: noPart('<video>') }] },
+    { name: 'an image map written the React way', code: component('    <img useMap="#m" alt="" />'), errors: [{ message: noPart('<img>') }] },
     {
       name: 'an escape with no reason is an error, and hides nothing',
       code: component('    // @estiva-escape:\n    <button>x</button>'),
@@ -100,7 +145,7 @@ tester.run('no-raw-button', noRawButton, {
     },
     {
       name: 'a marker inside a directive that names this rule is refused',
-      code: component('    // eslint-disable-next-line rule-to-test/no-raw-button -- @estiva-escape: a preview drawn from its own palette\n    <button>x</button>'),
+      code: component('    // eslint-disable-next-line rule-to-test/no-raw-element -- @estiva-escape: a preview drawn from its own palette\n    <button>x</button>'),
       errors: [{ messageId: 'escapeInDirective', line: 3 }],
     },
     {