@estiva-app/ui 0.16.0 → 0.17.0

package/src/eslint/index.test.ts

@@ -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

@@ -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}

@@ -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 }],
     },
     {

package/src/eslint/no-raw-element.ts

@@ -0,0 +1,180 @@
+import type { Rule } from 'eslint'
+import { ESCAPE_MESSAGES, isEscaped } from './escape'
+
+interface JSXAttributeValue {
+  type: string
+  value?: unknown
+  expression?: { type: string; value?: unknown; expressions?: unknown[]; quasis?: { value: { cooked: string | null } }[] }
+}
+
+interface JSXAttribute {
+  type: 'JSXAttribute'
+  name: { type: string; name?: string }
+  value: JSXAttributeValue | null
+}
+
+interface JSXOpeningElement {
+  name: { type: string; name?: string }
+  attributes: (JSXAttribute | { type: 'JSXSpreadAttribute' })[]
+  loc: NonNullable<Rule.Node['loc']>
+  range: [number, number]
+}
+
+/**
+ * What the package has instead of one raw element: the component the message
+ * names, and where one element does more than one job, the others after it.
+ * `null` is an element the package has no part for yet.
+ */
+export interface RawElementPart {
+  use: string
+  more?: string
+}
+
+/**
+ * The mapping (UIG-7), derived from the package's exports: every interactive
+ * element in the HTML standard's list ("interactive content"), plus `<dialog>`,
+ * `<form>` and `<progress>`, which have a part here. docs/GATES.md prints it.
+ *
+ * Not here, on purpose: `<summary>` (it lives inside a `<details>`, which is
+ * reported), `<option>`, `<optgroup>` and `<datalist>` (they live inside a
+ * `<select>` or beside an input), `<fieldset>` and `<legend>` (a group's frame,
+ * no control of its own), and `<img>` without `usemap`, `<hr>`, `<kbd>`, which
+ * are not controls. An `<audio>` or `<video>` is a control only with `controls`.
+ */
+export const RAW_ELEMENT_PARTS: Record<string, RawElementPart | null> = {
+  a: { use: 'Link', more: ' For a chip, `InlineChip`; for a whole card, `Card` with `href`.' },
+  button: { use: 'Button' },
+  textarea: { use: 'Textarea' },
+  select: { use: 'Select' },
+  dialog: { use: 'DialogShell', more: ' To ask yes or no, `ConfirmDialog`.' },
+  label: { use: 'Field', more: ' For words beside a tick box, `Checkbox` with `label`.' },
+  details: { use: 'CollapsibleSection' },
+  progress: { use: 'ProgressBar' },
+  form: { use: 'Form' },
+  meter: null,
+  iframe: null,
+  embed: null,
+  object: null,
+  audio: null,
+  video: null,
+  img: null,
+}
+
+/**
+ * An `<input>` is as many controls as its `type`. A type missing from here
+ * (text, email, password, url, tel, number, or one the browser does not know)
+ * is a text box.
+ */
+export const RAW_INPUT_PARTS: Record<string, RawElementPart | null> = {
+  search: { use: 'SearchInput' },
+  checkbox: { use: 'Checkbox' },
+  file: { use: 'FilePicker' },
+  submit: { use: 'Button' },
+  button: { use: 'Button' },
+  reset: { use: 'Button' },
+  image: { use: 'Button' },
+  radio: null,
+  range: null,
+  color: null,
+  date: null,
+  'datetime-local': null,
+  month: null,
+  week: null,
+  time: null,
+}
+
+const TEXT_INPUT: RawElementPart = { use: 'TextInput' }
+const ANY_INPUT: RawElementPart = {
+  use: 'TextInput',
+  more: ' For a search, `SearchInput`; for a tick box, `Checkbox`; to pick files, `FilePicker`.',
+}
+
+function attribute(element: JSXOpeningElement, name: string): JSXAttribute | undefined {
+  return element.attributes.find((a): a is JSXAttribute => a.type === 'JSXAttribute' && a.name.name === name)
+}
+
+/** An attribute's value when the code spells it out, `undefined` when it is computed. */
+function literal(attr: JSXAttribute): string | boolean | undefined {
+  const value = attr.value
+  if (value === null) return true
+  if (value.type === 'Literal') return typeof value.value === 'string' ? value.value : undefined
+  if (value.type !== 'JSXExpressionContainer' || !value.expression) return undefined
+  const expression = value.expression
+  if (expression.type === 'Literal' && (typeof expression.value === 'string' || typeof expression.value === 'boolean')) return expression.value
+  if (expression.type === 'TemplateLiteral' && expression.expressions?.length === 0) return expression.quasis?.[0]?.value.cooked ?? undefined
+  return undefined
+}
+
+/** Present, and not written as `={false}`. */
+function isOn(element: JSXOpeningElement, name: string): boolean {
+  const attr = attribute(element, name)
+  return attr !== undefined && literal(attr) !== false
+}
+
+type Found = { report: 'raw'; element: string; part: RawElementPart } | { report: 'noPart'; element: string } | null
+
+/** What this element is to the rule: a raw element with a part, one with none yet, or none of its business. */
+export function classify(element: JSXOpeningElement): Found {
+  if (element.name.type !== 'JSXIdentifier' || !element.name.name) return null
+  const name = element.name.name
+
+  if (name === 'input') {
+    const attr = attribute(element, 'type')
+    const type = attr ? literal(attr) : 'text'
+    if (typeof type !== 'string') return { report: 'raw', element: '<input>', part: ANY_INPUT }
+    const key = type.toLowerCase()
+    // A hidden input draws nothing and takes no focus: it is data, not a control.
+    if (key === 'hidden') return null
+    if (!(key in RAW_INPUT_PARTS)) return { report: 'raw', element: '<input>', part: TEXT_INPUT }
+    const part = RAW_INPUT_PARTS[key]
+    const shown = `<input type="${key}">`
+    return part ? { report: 'raw', element: shown, part } : { report: 'noPart', element: shown }
+  }
+
+  if (!Object.hasOwn(RAW_ELEMENT_PARTS, name)) return null
+  if ((name === 'audio' || name === 'video') && !isOn(element, 'controls')) return null
+  if (name === 'img' && !attribute(element, 'usemap') && !attribute(element, 'useMap')) return null
+
+  const part = RAW_ELEMENT_PARTS[name]
+  return part ? { report: 'raw', element: `<${name}>`, part } : { report: 'noPart', element: `<${name}>` }
+}
+
+/**
+ * A raw interactive element in an app, where the package has a part for it
+ * (UIG-3 began it with `<button>`; UIG-7 made it every element). A control
+ * the app writes itself has a look, a focus ring and keys that nobody else
+ * keeps in step with — and it looks nearly right, which is why nobody catches
+ * it by eye. Every message names the part to use.
+ *
+ * An element the package has no part for yet is refused too, with a message
+ * that says so: the part is made in the package, not by hand in an app
+ * (Katerina, 16 September).
+ *
+ * Only a JSX element written with a lowercase name. `<Button>`,
+ * `<Foo.button>` and `createElement('button')` are not this rule's business.
+ */
+export const noRawElement: Rule.RuleModule = {
+  meta: {
+    type: 'problem',
+    docs: { description: 'A raw interactive element where @estiva-app/ui has a part, or where it needs one' },
+    schema: [],
+    messages: {
+      raw: 'Use `{{use}}` from @estiva-app/ui instead of a raw {{element}}.{{more}}',
+      noPart: '@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.',
+      ...ESCAPE_MESSAGES,
+    },
+  },
+  create(context) {
+    return {
+      // ESLint's types know ESTree's nodes, not JSX's; the parser hands this one over.
+      JSXOpeningElement(node: Rule.Node) {
+        const element = node as unknown as JSXOpeningElement
+        const found = classify(element)
+        if (!found) return
+        if (isEscaped(context, element)) return
+        if (found.report === 'noPart') context.report({ loc: element.loc, messageId: 'noPart', data: { element: found.element } })
+        else context.report({ loc: element.loc, messageId: 'raw', data: { element: found.element, use: found.part.use, more: found.part.more ?? '' } })
+      },
+    }
+  },
+}

package/src/formBusy.ts

@@ -0,0 +1,19 @@
+import { createContext, useContext } from 'react'
+
+/**
+ * Whether a `Form` around this is busy (UIG-7).
+ *
+ * `Form` switches its children off with a disabled `<fieldset>`, which the
+ * browser applies to every native control inside — but a part that draws its
+ * look from Base UI's own `disabled` (Button, IconButton, Checkbox) is not
+ * told, so it kept its normal look while it could not be pressed, and a
+ * Checkbox, which is a `<span>`, could still be ticked (Katerina saw the busy
+ * story's button unchanged, 16 September). Those parts read this and switch
+ * off the way their own `disabled` does. Not exported: it is the package's
+ * wiring between Form and its parts.
+ */
+export const FormBusyContext = createContext(false)
+
+export function useFormBusy(): boolean {
+  return useContext(FormBusyContext)
+}

package/src/index.ts

@@ -50,6 +50,8 @@ export { Kbd, type KbdProps } from './Kbd'
 export { IdentityMenu, IdentityPanel, type Identity, type IdentityMenuProps, type IdentityPanelProps } from './IdentityMenu'
 export { Tooltip, TooltipProvider, WithTooltip, type TooltipProps, type TooltipProviderProps, type WithTooltipProps } from './Tooltip'
 export { Field, FieldLine, type FieldLineProps, type FieldLineTone, type FieldProps } from './Field'
+export { FilePicker, type FilePickerProps } from './FilePicker'
+export { Form, type FormProps } from './Form'
 export { Select, type SelectOption, type SelectProps } from './Select'
 export { TextInput, type TextInputProps } from './TextInput'
 export { Textarea, type TextareaProps } from './Textarea'

package/stories/Choosing.mdx

@@ -25,6 +25,7 @@ fork freely, owe nothing back, mention it on the package's ticket.
 | One value for a form field | **Select** | a Menu — Select's trigger shows the value |
 | Several values, typed then removable | **ChipInput** | checkboxes in a Menu |
 | Yes or no | **Checkbox** | a toggle we don't have |
+| Yes or no, with words beside it that toggle it too | **Checkbox** `label` | words written beside it by hand — they name nothing and toggle nothing |
 | Switching between views of one thing | **Tabs** | a row of Buttons |
 | View options behind a `…` | **Menu**, `selected` on the current row | Select |
 | Rows of checkboxes that stay open | a list in a **DialogShell** | a Menu — a Checkbox inside a `menuitem` is invalid HTML |
@@ -39,6 +40,8 @@ fork freely, owe nothing back, mention it on the package's ticket.
 | Typing that filters a list | **SearchInput** |
 | A title edited in place | **EditableText** |
 | Label and required-mark around any control | **Field** |
+| The fields and the button that sends them | **Form** — Enter sends; `busy` switches everything inside off while it waits |
+| A button that opens the file picker | **FilePicker**, opened by your own **Button** or **IconButton** |
 | A hint or a failure under **one** control | **Field**'s `helper` / `error` — wired to it, and announced |
 | A hint or an outcome under a **group** of controls | **FieldLine** — the same line on its own, with a `warning` tone Field has not got |
 

package/dist/eslint/no-raw-button.d.ts

@@ -1,11 +0,0 @@
-import type { Rule } from 'eslint';
-/**
- * A raw `<button>` in an app (UIG-3, the tracer). The package's `Button`,
- * `IconButton`, `MenuItem` and chips are buttons already; an app that writes
- * its own has a look and a behaviour nobody else keeps in step with.
- *
- * Only the JSX element named `button`. `<Button>`, `<Foo.button>` and
- * `createElement('button')` are not this rule's business.
- */
-export declare const noRawButton: Rule.RuleModule;
-//# sourceMappingURL=no-raw-button.d.ts.map

package/dist/eslint/no-raw-button.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"no-raw-button.d.ts","sourceRoot":"","sources":["../../src/eslint/no-raw-button.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AASlC;;;;;;;GAOG;AACH,eAAO,MAAM,WAAW,EAAE,IAAI,CAAC,UAqB9B,CAAA"}

package/src/eslint/no-raw-button.ts

@@ -1,39 +0,0 @@
-import type { Rule } from 'eslint'
-import { ESCAPE_MESSAGES, isEscaped } from './escape'
-
-interface JSXOpeningElement {
-  name: { type: string; name?: string }
-  loc: NonNullable<Rule.Node['loc']>
-  range: [number, number]
-}
-
-/**
- * A raw `<button>` in an app (UIG-3, the tracer). The package's `Button`,
- * `IconButton`, `MenuItem` and chips are buttons already; an app that writes
- * its own has a look and a behaviour nobody else keeps in step with.
- *
- * Only the JSX element named `button`. `<Button>`, `<Foo.button>` and
- * `createElement('button')` are not this rule's business.
- */
-export const noRawButton: Rule.RuleModule = {
-  meta: {
-    type: 'problem',
-    docs: { description: 'A raw <button> where @estiva-app/ui has one' },
-    schema: [],
-    messages: {
-      raw: 'Use `Button` from @estiva-app/ui instead of a raw <button>.',
-      ...ESCAPE_MESSAGES,
-    },
-  },
-  create(context) {
-    return {
-      // ESLint's types know ESTree's nodes, not JSX's; the parser hands this one over.
-      JSXOpeningElement(node: Rule.Node) {
-        const element = node as unknown as JSXOpeningElement
-        if (element.name.type !== 'JSXIdentifier' || element.name.name !== 'button') return
-        if (isEscaped(context, element)) return
-        context.report({ loc: element.loc, messageId: 'raw' })
-      },
-    }
-  },
-}