@estiva-app/ui 0.41.0 → 0.43.0

package/src/ListColumn.stories.tsx

@@ -97,7 +97,7 @@ export const WithARowAbove: Story = {
       <ListColumn
         title="Items"
         above={
-          <Form onSubmit={() => setName('')} className="flex items-center gap-2 px-3 pt-3 pb-1">
+          <Form onSubmit={() => setName('')} layout="free" className="flex items-center gap-2 px-3 pt-3 pb-1">
             <TextInput className="min-w-0 flex-1" value={name} onChange={(e) => setName(e.target.value)} placeholder="New item name" aria-label="New item name" />
             <Button className="shrink-0" type="submit" disabled={!name.trim()}>
               Create

package/src/Select.tsx

@@ -94,7 +94,10 @@ export function Select({ value, onChange, options, size = 'default', ariaLabel,
           // The focused border survives a hover: hover alone strengthens the
           // hairline, but hover while focused must not grey the focus colour —
           // the stacked variant outranks plain hover by specificity.
+          // Anywhere in the `Field` around it counts as over it (Katerina, 28 September).
           !held && 'hover:border-border-strong focus-visible:hover:border-border-focus aria-expanded:hover:border-border-focus',
+          // Left out while focused or open, so their colour stays under the pointer.
+          !held && 'group-hover/field:border-border-strong group-hover/field:focus-visible:border-border-focus group-hover/field:aria-expanded:border-border-focus',
           FIELD_DISABLED_CLASSES,
           held && 'cursor-not-allowed bg-bg-disabled text-text-disabled',
           'focus-visible:border-border-focus aria-expanded:border-border-focus',

package/src/eslint/no-restyled-part.test.ts

@@ -74,6 +74,9 @@ tester.run('no-restyled-part', noRestyledPart, {
     { name: 'style the code works out while it runs passes', filename: app, code: ui('Card', '    <Card style={props.style} />') },
     { name: 'style on a component that hands on only its className is not read', filename: app, code: local('ConversationCard', './components/ConversationCard', '    <ConversationCard title="x" style={{ opacity: 0.5 }} />') },
     { name: 'EmptyState placed', filename: app, code: ui('EmptyState', '    <EmptyState className="mt-2 flex-1" message="Nothing yet" />') },
+    { name: 'Form placed, its fields its own', filename: app, code: ui('Form', '    <Form onSubmit={send} className="min-h-0 flex-1 px-5">x</Form>') },
+    { name: 'a free Form lays itself out', filename: app, code: ui('Form', '    <Form onSubmit={send} layout="free" className="flex items-center gap-2">x</Form>') },
+    { name: 'a Form whose layout the rule cannot read passes', filename: app, code: ui('Form', '    <Form onSubmit={send} layout={how} className="flex gap-2">x</Form>') },
     // escapes
     { name: 'escaped, with its reason', filename: app, code: ui('Link', '    // @estiva-escape(no-restyled-part): the whole row is the link, and no part does that yet\n    <Link href="/x" className="after:absolute after:inset-0">x</Link>') },
     // the package itself
@@ -186,6 +189,18 @@ tester.run('no-restyled-part', noRestyledPart, {
       code: "import { Link, type LinkProps } from '@estiva-app/ui'\nfunction RouterLink({ href, ...props }: LinkProps) {\n  return <Link href={href} {...props} />\n}\nexport function Probe() {\n  return <RouterLink href=\"/x\" className=\"text-h5\">x</RouterLink>\n}\n",
       errors: [{ message: restyled('`text-h5`', '`RouterLink` (it hands its props to `Link`)', ' Use its `variant`, `truncate` or `cover`.') }],
     },
+    {
+      name: 'a Form laid out by hand',
+      filename: app,
+      code: ui('Form', '    <Form onSubmit={send} className="flex flex-col gap-2 sm:gap-4 mt-2">x</Form>'),
+      errors: [{ message: '`flex` `flex-col` `gap-2` `sm:gap-4` lays out the fields of `Form`. A Form places its own fields, 24px apart (Katerina, 28 September), so every form reads the same: remove it. A form that is not a list of fields (a field and its button, a composer) says `layout="free"` and lays itself out.' }],
+    },
+    {
+      name: 'a Form that says fields is laid out by the Form',
+      filename: app,
+      code: ui('Form', '    <Form onSubmit={send} layout="fields" className="space-y-3">x</Form>'),
+      errors: [{ message: '`space-y-3` lays out the fields of `Form`. A Form places its own fields, 24px apart (Katerina, 28 September), so every form reads the same: remove it. A form that is not a list of fields (a field and its button, a composer) says `layout="free"` and lays itself out.' }],
+    },
     {
       name: 'EmptyState padded directly',
       filename: app,
@@ -307,7 +322,8 @@ describe('the look props the message names are the package’s own', () => {
   })
 
   /** Named like a look, and not one: AttachmentCard's `size` is the file's, in bytes. */
-  const NOT_A_LOOK: Record<string, string[]> = { AttachmentCard: ['size'] }
+  // Form's `layout` says whether it places its fields at all, not how anything looks.
+  const NOT_A_LOOK: Record<string, string[]> = { AttachmentCard: ['size'], Form: ['layout'] }
 
   it('every look prop a part has is named', () => {
     for (const part of PARTS) {

package/src/eslint/no-restyled-part.ts

@@ -36,6 +36,10 @@ import { ESCAPE_MESSAGES, isEscaped } from './escape'
  *
  * `EmptyState` takes no padding either (Katerina's ruling 6 of 14 September):
  * its room comes from the box its rows live in.
+ *
+ * `Form` takes no layout for its fields (Katerina, 28 September): it stacks
+ * them 24px apart itself, so every form reads the same. A form that is not a
+ * list of fields says `layout="free"`, and then lays itself out.
  */
 
 // ---------------------------------------------------------------- the classes
@@ -93,6 +97,14 @@ export function isPlacement(token: string): boolean {
   return PLACEMENT.some(({ pattern }) => pattern.test(utility))
 }
 
+/** How a form's fields are laid out: its display, direction, gaps and alignment. */
+const FIELDS_LAYOUT = /^(?:block|flex|grid|inline-flex|inline-grid|contents|flow-root)$|^(?:gap|gap-x|gap-y|space-x|space-y|grid-cols|grid-rows|grid-flow|auto-cols|auto-rows|items|justify|justify-items|place-content|place-items)-|^flex-(?:row|col|wrap|nowrap)|^content-(?!\[)/
+
+const isFieldsLayout = (token: string) => {
+  const { variants, utility } = splitClass(token)
+  return !variants.some((variant) => REACHING_VARIANT.test(variant)) && FIELDS_LAYOUT.test(utility)
+}
+
 const isPadding = (token: string) => {
   const { variants, utility } = splitClass(token)
   return !variants.some((variant) => REACHING_VARIANT.test(variant)) && /^p[xytrblse]?-/.test(utility)
@@ -608,6 +620,8 @@ export const noRestyledPart: Rule.RuleModule = {
         '{{keys}} in the `style` of {{where}} changes how it looks. A part of @estiva-app/ui is placed from outside, never restyled, by class or by style: only space, size, flex and grid, and position pass in.{{use}} A look for what is around it goes on your own element around it.',
       emptyStatePadding:
         '{{classes}} pads {{where}}. EmptyState takes no padding (Katerina, 14 September): its room comes from the box its rows live in, so put the padding on that box.',
+      formLayout:
+        '{{classes}} lays out the fields of {{where}}. A Form places its own fields, 24px apart (Katerina, 28 September), so every form reads the same: remove it. A form that is not a list of fields (a field and its button, a composer) says `layout="free"` and lays itself out.',
       ...ESCAPE_MESSAGES,
     },
   },
@@ -623,6 +637,15 @@ export const noRestyledPart: Rule.RuleModule = {
       return escapes.get(anchor) === true
     }
 
+    /** A `Form` lays out its own fields unless it says `layout="free"`; a layout the rule cannot read passes. */
+    const placesItsFields = (element: Node) =>
+      !children(element, 'attributes').some((attribute) => {
+        if (attribute?.type !== 'JSXAttribute' || nameOf(child(attribute, 'name')) !== 'layout') return false
+        const value = child(attribute, 'value')
+        const literal = value?.type === 'JSXExpressionContainer' ? child(value, 'expression') : value
+        return !(literal?.type === 'Literal' && literal.value === 'fields')
+      })
+
     const check = (element: Node, binding: PartBinding, prop: string, value: Node | null | undefined, at: Node) => {
       const partProp = binding.props === 'all' ? prop : binding.props[prop]
       if (!partProp || !value) return
@@ -632,7 +655,8 @@ export const noRestyledPart: Rule.RuleModule = {
       const where = `${via}${partProp === 'className' ? '' : `'s \`${partProp}\``}`
       const restyled = [...new Set(classes.filter((token) => !isPlacement(token)))]
       const padding = binding.part === 'EmptyState' && binding.props === 'all' ? [...new Set(classes.filter(isPadding))] : []
-      if (!restyled.length && !padding.length) return
+      const layout = binding.part === 'Form' && partProp === 'className' && placesItsFields(element) ? [...new Set(classes.filter(isFieldsLayout))] : []
+      if (!restyled.length && !padding.length && !layout.length) return
       if (escaped(element)) return
       if (restyled.length) {
         const props = PART_LOOK_PROPS[binding.part]
@@ -640,6 +664,7 @@ export const noRestyledPart: Rule.RuleModule = {
         context.report({ loc: at.loc as NonNullable<Rule.Node['loc']>, messageId: 'restyled', data: { classes: code(restyled), where, use } })
       }
       if (padding.length) context.report({ loc: at.loc as NonNullable<Rule.Node['loc']>, messageId: 'emptyStatePadding', data: { classes: code(padding), where } })
+      if (layout.length) context.report({ loc: at.loc as NonNullable<Rule.Node['loc']>, messageId: 'formLayout', data: { classes: code(layout), where } })
     }
 
     /** `style` on a part: every key it can read must be placement (B6). */

package/src/index.ts

@@ -22,6 +22,7 @@ export {
   CommandPalette,
   CommandPaletteAnswer,
   CommandPaletteForm,
+  CommandPaletteProposal,
   CommandPaletteQuote,
   CommandPaletteSearch,
   CommandPaletteWorking,
@@ -30,6 +31,7 @@ export {
   type CommandPaletteFormProps,
   type CommandPaletteGroup,
   type CommandPaletteProps,
+  type CommandPaletteProposalProps,
   type CommandPaletteQuoteProps,
   type CommandPaletteRow,
   type CommandPaletteSearchProps,

package/src/looks.ts

@@ -11,14 +11,16 @@
  * much room it takes stay in the part.
  */
 
-/** A field's box: TextInput and Textarea. The hairline strengthens on hover; focus comes after it, so a focused field keeps its colour under the pointer. */
-export const FIELD_BOX_CLASSES = 'bg-bg-field border border-border-field shadow-field hover:border-border-strong focus:border-border-focus rounded-lg'
+/**
+ * A field's box: TextInput and Textarea. The hairline strengthens on hover — of the box, or of anywhere in the `Field` around it, label included, so the field is one thing under the pointer (Katerina, 28 September) — and not while switched off: a label passes its hover to its box, switched off or not (FIELD_DISABLED_CLASSES holds it back). Focus outranks it, so a focused field keeps its colour under the pointer.
+ */
+export const FIELD_BOX_CLASSES = 'bg-bg-field border border-border-field shadow-field hover:border-border-strong group-hover/field:border-border-strong focus:border-border-focus group-hover/field:focus:border-border-focus rounded-lg'
 
 /** What a field's words look like, typed or waiting: TextInput, Textarea and Select. */
 export const FIELD_TEXT_CLASSES = 'text-text-primary placeholder:text-text-muted'
 
 /** A field that cannot be used: TextInput, Textarea and Select. */
-export const FIELD_DISABLED_CLASSES = 'disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled'
+export const FIELD_DISABLED_CLASSES = 'disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled disabled:border-border-field group-hover/field:disabled:border-border-field'
 
 /** The ring a focused field wears in Signal: TextInput and Textarea. */
 export const FIELD_FOCUS_RING_CLASSES = 'signal:transition-shadow signal:focus:shadow-focus-ring'
@@ -30,7 +32,7 @@ export const FIELD_SIZE_CLASSES = {
 } as const
 
 /** The box around an input that sits inside it, before its focus look: SearchInput and ChipInput. */
-export const FIELD_SHELL_CLASSES = 'bg-bg-field border border-border-field shadow-field hover:border-border-strong rounded-lg transition-colors'
+export const FIELD_SHELL_CLASSES = 'bg-bg-field border border-border-field shadow-field hover:border-border-strong group-hover/field:border-border-strong rounded-lg transition-colors'
 
 /** A panel that floats over the page: Menu's panel and Tooltip. */
 export const FLOATING_SURFACE_CLASSES = 'rounded-lg border border-border-default bg-bg-elevated shadow-lg'

package/src/registry/registry.test.ts

@@ -45,17 +45,17 @@ describe('the registry builds', () => {
     expect(registry.entries.map((one) => one.name).sort()).toEqual(values.map((one) => one.name).sort())
   })
 
-  it('counts 90 names over 59 files: 82 components, 7 helpers and 1 hook (RichText and richTextClassName joined on 28 September)', () => {
+  it('counts 91 names over 59 files: 83 components, 7 helpers and 1 hook (CommandPaletteProposal joined on 28 September)', () => {
     // The reconciliation GATES.md §24 explains. If this changes, that changes.
     const kinds = registry.entries.reduce<Record<string, number>>((all, one) => ({ ...all, [one.kind]: (all[one.kind] ?? 0) + 1 }), {})
-    expect(kinds).toEqual({ component: 82, helper: 7, hook: 1 })
+    expect(kinds).toEqual({ component: 83, helper: 7, hook: 1 })
     expect(new Set(registry.entries.map((one) => one.sourceFile)).size).toBe(59)
   })
 
   it('gives every entry a purpose, from its own page or from the comment above it', () => {
     expect(registry.entries.filter((one) => one.purpose.trim() === '')).toEqual([])
     expect(registry.entries.filter((one) => one.purposeFrom === 'page').length).toBe(59)
-    expect(registry.entries.filter((one) => one.purposeFrom === 'comment').length).toBe(31)
+    expect(registry.entries.filter((one) => one.purposeFrom === 'comment').length).toBe(32)
   })
 
   it('takes a name with a page of its own from the page, and a name without one from the code', () => {