@estiva-app/ui 0.41.0 → 0.43.0

package/dist/looks.d.ts

@@ -10,12 +10,14 @@
  * Only looks — colour, text, border, corner, shadow. Where a part sits and how
  * 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 declare 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 declare 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 declare const FIELD_TEXT_CLASSES = "text-text-primary placeholder:text-text-muted";
 /** A field that cannot be used: TextInput, Textarea and Select. */
-export declare const FIELD_DISABLED_CLASSES = "disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled";
+export declare 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 declare const FIELD_FOCUS_RING_CLASSES = "signal:transition-shadow signal:focus:shadow-focus-ring";
 /** A field's two sizes, its padding and its words: TextInput, Textarea (default only) and Select. The small one is the small Select's trigger. */
@@ -24,7 +26,7 @@ export declare const FIELD_SIZE_CLASSES: {
     readonly small: "h-6 min-h-6 px-2 text-caption";
 };
 /** The box around an input that sits inside it, before its focus look: SearchInput and ChipInput. */
-export declare const FIELD_SHELL_CLASSES = "bg-bg-field border border-border-field shadow-field hover:border-border-strong rounded-lg transition-colors";
+export declare 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 declare const FLOATING_SURFACE_CLASSES = "rounded-lg border border-border-default bg-bg-elevated shadow-lg";
 /** A chip's words: Chip's label and Reaction's count. */

package/dist/looks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"looks.d.ts","sourceRoot":"","sources":["../src/looks.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,6JAA6J;AAC7J,eAAO,MAAM,iBAAiB,wHAAwH,CAAA;AAEtJ,wFAAwF;AACxF,eAAO,MAAM,kBAAkB,kDAAkD,CAAA;AAEjF,mEAAmE;AACnE,eAAO,MAAM,sBAAsB,qFAAqF,CAAA;AAExH,wEAAwE;AACxE,eAAO,MAAM,wBAAwB,4DAA4D,CAAA;AAEjG,kJAAkJ;AAClJ,eAAO,MAAM,kBAAkB;;;CAGrB,CAAA;AAEV,qGAAqG;AACrG,eAAO,MAAM,mBAAmB,gHAAgH,CAAA;AAEhJ,mEAAmE;AACnE,eAAO,MAAM,wBAAwB,qEAAqE,CAAA;AAE1G,yDAAyD;AACzD,eAAO,MAAM,iBAAiB,0FAA0F,CAAA;AAExH,4FAA4F;AAC5F,eAAO,MAAM,kBAAkB,8EAA8E,CAAA"}
+{"version":3,"file":"looks.d.ts","sourceRoot":"","sources":["../src/looks.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH;;GAEG;AACH,eAAO,MAAM,iBAAiB,2MAA2M,CAAA;AAEzO,wFAAwF;AACxF,eAAO,MAAM,kBAAkB,kDAAkD,CAAA;AAEjF,mEAAmE;AACnE,eAAO,MAAM,sBAAsB,iKAAiK,CAAA;AAEpM,wEAAwE;AACxE,eAAO,MAAM,wBAAwB,4DAA4D,CAAA;AAEjG,kJAAkJ;AAClJ,eAAO,MAAM,kBAAkB;;;CAGrB,CAAA;AAEV,qGAAqG;AACrG,eAAO,MAAM,mBAAmB,uJAAuJ,CAAA;AAEvL,mEAAmE;AACnE,eAAO,MAAM,wBAAwB,qEAAqE,CAAA;AAE1G,yDAAyD;AACzD,eAAO,MAAM,iBAAiB,0FAA0F,CAAA;AAExH,4FAA4F;AAC5F,eAAO,MAAM,kBAAkB,8EAA8E,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@estiva-app/ui",
-  "version": "0.41.0",
+  "version": "0.43.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,9 +4,9 @@
     "kind": "package",
     "repo": "estiva-ui",
     "package": "@estiva-app/ui",
-    "packageVersion": "0.41.0",
-    "exports": 90,
-    "typeExports": 101,
+    "packageVersion": "0.43.0",
+    "exports": 91,
+    "typeExports": 102,
     "files": null
   },
   "storybook": {
@@ -966,7 +966,6 @@
       "looks": [
         "bg-bg-elevated border border-border-subtle rounded-md",
         "bg-bg-field border border-border-field shadow-field hover:border-border-strong rounded-lg transition-colors focus-within:border-border-focus focus-within:hover:border-border-focus cursor-text signal:transition-shadow signal:focus-within:shadow-focus-ring",
-        "focus-within:border-border-focus focus-within:hover:border-border-focus cursor-text signal:transition-shadow signal:focus-within:shadow-focus-ring",
         "text-body-2 border-none bg-transparent text-text-primary placeholder:text-text-muted outline-none"
       ]
     },
@@ -1281,6 +1280,44 @@
       "app": null,
       "looks": []
     },
+    {
+      "name": "CommandPaletteProposal",
+      "repo": "estiva-ui",
+      "kind": "component",
+      "importPath": "@estiva-app/ui",
+      "sourceFile": "src/CommandPalette.tsx",
+      "purpose": "Something the palette offers to make, before anything is made: a card with where it would be made on top, then what it would be.",
+      "purposeFrom": "comment",
+      "props": [
+        {
+          "name": "source",
+          "takes": "text",
+          "required": true,
+          "note": "Where it would be made: the app and the action — \"App › New item\"."
+        },
+        {
+          "name": "mark",
+          "takes": "anything",
+          "required": false,
+          "note": "The app's mark before the source, as small as the line (about 10px)."
+        },
+        {
+          "name": "children",
+          "takes": "text",
+          "required": true,
+          "note": "What would be made, in a sentence."
+        }
+      ],
+      "variants": [],
+      "ownsBehaviours": [],
+      "status": "stable",
+      "migrationStage": null,
+      "docsId": "overlays-commandpalette--docs",
+      "storyId": "overlays-commandpalette--first-level",
+      "docPage": null,
+      "app": null,
+      "looks": []
+    },
     {
       "name": "CommandPaletteQuote",
       "repo": "estiva-ui",
@@ -2109,6 +2146,12 @@
           "required": false,
           "note": "Whether Enter in a one-line field sends."
         },
+        {
+          "name": "layout",
+          "takes": "fields | free",
+          "required": false,
+          "note": "`fields`, the default: everything inside stacks 24px apart."
+        },
         {
           "name": "children",
           "takes": "anything",
@@ -2116,7 +2159,15 @@
           "note": null
         }
       ],
-      "variants": [],
+      "variants": [
+        {
+          "prop": "layout",
+          "values": [
+            "fields",
+            "free"
+          ]
+        }
+      ],
       "ownsBehaviours": [
         {
           "id": "base-ui",
@@ -4596,14 +4647,14 @@
       "docPage": "src/Select.mdx",
       "app": null,
       "looks": [
-        "rounded-lg border bg-bg-field shadow-field text-left border-border-field outline-none transition-colors text-text-primary placeholder:text-text-muted disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled focus-visible:border-border-focus aria-expanded:border-border-focus signal:transition-shadow signal:focus-visible:shadow-focus-ring text-input-value",
-        "rounded-lg border bg-bg-field shadow-field text-left border-border-field outline-none transition-colors text-text-primary placeholder:text-text-muted disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled focus-visible:border-border-focus aria-expanded:border-border-focus signal:transition-shadow signal:focus-visible:shadow-focus-ring text-caption",
-        "rounded-lg border bg-bg-field shadow-field text-left border-border-field outline-none transition-colors text-text-primary placeholder:text-text-muted disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled cursor-not-allowed bg-bg-disabled text-text-disabled focus-visible:border-border-focus aria-expanded:border-border-focus signal:transition-shadow signal:focus-visible:shadow-focus-ring text-input-value",
-        "rounded-lg border bg-bg-field shadow-field text-left border-border-field outline-none transition-colors text-text-primary placeholder:text-text-muted disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled cursor-not-allowed bg-bg-disabled text-text-disabled focus-visible:border-border-focus aria-expanded:border-border-focus signal:transition-shadow signal:focus-visible:shadow-focus-ring text-caption",
-        "rounded-lg border bg-bg-field shadow-field text-left border-border-field outline-none transition-colors text-text-primary placeholder:text-text-muted hover:border-border-strong focus-visible:hover:border-border-focus aria-expanded:hover:border-border-focus disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled focus-visible:border-border-focus aria-expanded:border-border-focus signal:transition-shadow signal:focus-visible:shadow-focus-ring text-input-value",
-        "rounded-lg border bg-bg-field shadow-field text-left border-border-field outline-none transition-colors text-text-primary placeholder:text-text-muted hover:border-border-strong focus-visible:hover:border-border-focus aria-expanded:hover:border-border-focus disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled focus-visible:border-border-focus aria-expanded:border-border-focus signal:transition-shadow signal:focus-visible:shadow-focus-ring text-caption",
-        "rounded-lg border bg-bg-field shadow-field text-left border-border-field outline-none transition-colors text-text-primary placeholder:text-text-muted hover:border-border-strong focus-visible:hover:border-border-focus aria-expanded:hover:border-border-focus disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled cursor-not-allowed bg-bg-disabled text-text-disabled focus-visible:border-border-focus aria-expanded:border-border-focus signal:transition-shadow signal:focus-visible:shadow-focus-ring text-input-value",
-        "rounded-lg border bg-bg-field shadow-field text-left border-border-field outline-none transition-colors text-text-primary placeholder:text-text-muted hover:border-border-strong focus-visible:hover:border-border-focus aria-expanded:hover:border-border-focus disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled cursor-not-allowed bg-bg-disabled text-text-disabled focus-visible:border-border-focus aria-expanded:border-border-focus signal:transition-shadow signal:focus-visible:shadow-focus-ring text-caption",
+        "rounded-lg border bg-bg-field shadow-field text-left border-border-field outline-none transition-colors text-text-primary placeholder:text-text-muted disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled disabled:border-border-field focus-visible:border-border-focus aria-expanded:border-border-focus signal:transition-shadow signal:focus-visible:shadow-focus-ring text-input-value",
+        "rounded-lg border bg-bg-field shadow-field text-left border-border-field outline-none transition-colors text-text-primary placeholder:text-text-muted disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled disabled:border-border-field focus-visible:border-border-focus aria-expanded:border-border-focus signal:transition-shadow signal:focus-visible:shadow-focus-ring text-caption",
+        "rounded-lg border bg-bg-field shadow-field text-left border-border-field outline-none transition-colors text-text-primary placeholder:text-text-muted disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled disabled:border-border-field cursor-not-allowed bg-bg-disabled text-text-disabled focus-visible:border-border-focus aria-expanded:border-border-focus signal:transition-shadow signal:focus-visible:shadow-focus-ring text-input-value",
+        "rounded-lg border bg-bg-field shadow-field text-left border-border-field outline-none transition-colors text-text-primary placeholder:text-text-muted disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled disabled:border-border-field cursor-not-allowed bg-bg-disabled text-text-disabled focus-visible:border-border-focus aria-expanded:border-border-focus signal:transition-shadow signal:focus-visible:shadow-focus-ring text-caption",
+        "rounded-lg border bg-bg-field shadow-field text-left border-border-field outline-none transition-colors text-text-primary placeholder:text-text-muted hover:border-border-strong focus-visible:hover:border-border-focus aria-expanded:hover:border-border-focus disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled disabled:border-border-field focus-visible:border-border-focus aria-expanded:border-border-focus signal:transition-shadow signal:focus-visible:shadow-focus-ring text-input-value",
+        "rounded-lg border bg-bg-field shadow-field text-left border-border-field outline-none transition-colors text-text-primary placeholder:text-text-muted hover:border-border-strong focus-visible:hover:border-border-focus aria-expanded:hover:border-border-focus disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled disabled:border-border-field focus-visible:border-border-focus aria-expanded:border-border-focus signal:transition-shadow signal:focus-visible:shadow-focus-ring text-caption",
+        "rounded-lg border bg-bg-field shadow-field text-left border-border-field outline-none transition-colors text-text-primary placeholder:text-text-muted hover:border-border-strong focus-visible:hover:border-border-focus aria-expanded:hover:border-border-focus disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled disabled:border-border-field cursor-not-allowed bg-bg-disabled text-text-disabled focus-visible:border-border-focus aria-expanded:border-border-focus signal:transition-shadow signal:focus-visible:shadow-focus-ring text-input-value",
+        "rounded-lg border bg-bg-field shadow-field text-left border-border-field outline-none transition-colors text-text-primary placeholder:text-text-muted hover:border-border-strong focus-visible:hover:border-border-focus aria-expanded:hover:border-border-focus disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled disabled:border-border-field cursor-not-allowed bg-bg-disabled text-text-disabled focus-visible:border-border-focus aria-expanded:border-border-focus signal:transition-shadow signal:focus-visible:shadow-focus-ring text-caption",
         "rounded-lg border bg-bg-field shadow-field text-left"
       ]
     },
@@ -4851,7 +4902,7 @@
       "docPage": "src/Textarea.mdx",
       "app": null,
       "looks": [
-        "bg-bg-field border border-border-field shadow-field hover:border-border-strong focus:border-border-focus rounded-lg 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 signal:transition-shadow signal:focus:shadow-focus-ring"
+        "bg-bg-field border border-border-field shadow-field hover:border-border-strong focus:border-border-focus rounded-lg 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 disabled:border-border-field signal:transition-shadow signal:focus:shadow-focus-ring"
       ]
     },
     {
@@ -4892,8 +4943,8 @@
       "docPage": "src/TextInput.mdx",
       "app": null,
       "looks": [
-        "bg-bg-field border border-border-field shadow-field hover:border-border-strong focus:border-border-focus rounded-lg text-input-value text-text-primary placeholder:text-text-muted outline-none transition-colors disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled signal:transition-shadow signal:focus:shadow-focus-ring",
-        "bg-bg-field border border-border-field shadow-field hover:border-border-strong focus:border-border-focus rounded-lg text-caption text-text-primary placeholder:text-text-muted outline-none transition-colors disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled signal:transition-shadow signal:focus:shadow-focus-ring"
+        "bg-bg-field border border-border-field shadow-field hover:border-border-strong focus:border-border-focus rounded-lg text-input-value text-text-primary placeholder:text-text-muted outline-none transition-colors disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled disabled:border-border-field signal:transition-shadow signal:focus:shadow-focus-ring",
+        "bg-bg-field border border-border-field shadow-field hover:border-border-strong focus:border-border-focus rounded-lg text-caption text-text-primary placeholder:text-text-muted outline-none transition-colors disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled disabled:border-border-field signal:transition-shadow signal:focus:shadow-focus-ring"
       ]
     },
     {

package/src/ChipInput.tsx

@@ -246,7 +246,7 @@ export function ChipInput<T extends ChipInputOption = ChipInputOption>({
     >
       {/* The box the chips and the input share. `Combobox.Chips` is what makes
           the two one control for the keyboard; the look is what it always was. */}
-      <Combobox.Chips ref={setBox} className={cn(FIELD_SHELL_CLASSES, 'focus-within:border-border-focus focus-within:hover:border-border-focus px-3 py-1.5 flex flex-wrap items-center gap-1.5 min-h-[38px] cursor-text signal:transition-shadow signal:focus-within:shadow-focus-ring')}>
+      <Combobox.Chips ref={setBox} className={cn(FIELD_SHELL_CLASSES, 'focus-within:border-border-focus focus-within:hover:border-border-focus group-hover/field:focus-within:border-border-focus px-3 py-1.5 flex flex-wrap items-center gap-1.5 min-h-[38px] cursor-text signal:transition-shadow signal:focus-within:shadow-focus-ring')}>
         {value.map((option) => (
           <Combobox.Chip key={option.id} className={cn(CHIP_BOX, chipPadding(!!chipLeading, true))}>
             {chipLeading && <span className="flex shrink-0 items-center">{chipLeading(option)}</span>}

package/src/CommandPalette.mdx

@@ -23,6 +23,12 @@ form — and the app keeps the levels.
   above the rows, for a result that is written rather than listed: a line while
   it is on its way, an answer with marks pointing at the rows it came from, and
   text written to be used somewhere else.
+- **`CommandPaletteProposal`** — above the rows, for something the palette
+  offers to make before anything is made: a card with where it would be made
+  (`source`, with the app's `mark`), then what it would be. The rows under it
+  say what happens next.
+
+<Canvas of={CommandPaletteStories.Proposal} />
 
 <Canvas of={CommandPaletteStories.Answer} />
 

package/src/CommandPalette.stories.tsx

@@ -7,6 +7,7 @@ import {
   CommandPalette,
   CommandPaletteAnswer,
   CommandPaletteForm,
+  CommandPaletteProposal,
   CommandPaletteQuote,
   CommandPaletteSearch,
   CommandPaletteWorking,
@@ -54,6 +55,7 @@ type Level =
   | { kind: 'place'; name: string }
   | { kind: 'ask' }
   | { kind: 'draft' }
+  | { kind: 'make' }
   | { kind: 'form' }
   | { kind: 'one-list' }
 
@@ -62,7 +64,7 @@ interface Frame {
   query: string
 }
 
-type Start = 'first' | 'arriving' | 'nothing' | 'place' | 'working' | 'answer' | 'draft' | 'form' | 'refused' | 'one-list'
+type Start = 'first' | 'arriving' | 'nothing' | 'place' | 'working' | 'answer' | 'draft' | 'make' | 'form' | 'refused' | 'one-list'
 
 const PLACES = ['Place one', 'Place two']
 const ACTIONS = [
@@ -81,6 +83,7 @@ const GROUPS = [
 ]
 const ANSWER = 'Item one moved on Monday [1], and item two is waiting on a reply [2].\n\nNothing else changed this week.'
 const DRAFT = 'Thanks, both. I will look at item one today\nand reply on item two tomorrow.'
+const PROPOSAL = 'An item for the reply on item two, due tomorrow.'
 
 function startStack(start: Start): Frame[] {
   const first: Frame = { level: { kind: 'first' }, query: '' }
@@ -96,6 +99,8 @@ function startStack(start: Start): Frame[] {
       return [first, { level: { kind: 'ask' }, query: 'What changed this week?' }]
     case 'draft':
       return [first, { level: { kind: 'draft' }, query: 'Say I will look today' }]
+    case 'make':
+      return [first, { level: { kind: 'make' }, query: '' }]
     case 'form':
     case 'refused':
       return [first, { level: { kind: 'place', name: 'Place one' }, query: '' }, { level: { kind: 'form' }, query: '' }]
@@ -180,6 +185,17 @@ function Demo({ start, where, modKey, label }: { start: Start; where?: string; m
         },
       ]
     }
+    if (level.kind === 'make') {
+      return [
+        {
+          label: 'Next',
+          rows: [
+            { id: 'make-open', label: 'Open the form', description: 'Place one › Action one · nothing is made until you submit', icon, onSelect: () => push({ kind: 'form' }) },
+            { id: 'make-again', label: 'Suggest something else', icon, onSelect: () => close('Suggest something else') },
+          ],
+        },
+      ]
+    }
     if (level.kind === 'ask' || level.kind === 'draft') {
       if (!asked?.done) return []
       const changed = frame.query.trim() !== asked.question.trim()
@@ -236,6 +252,7 @@ function Demo({ start, where, modKey, label }: { start: Start; where?: string; m
           rows: [
             { id: 'ask', label: 'Ask about this page', icon, onSelect: () => push({ kind: 'ask' }) },
             { id: 'draft', label: 'Write a draft', icon, onSelect: () => push({ kind: 'draft' }) },
+            { id: 'make', label: 'Make something from this page', icon, onSelect: () => push({ kind: 'make' }) },
             { id: 'one-list', label: 'Change kind', description: 'Item one', icon, onSelect: () => push({ kind: 'one-list' }) },
           ],
         },
@@ -289,6 +306,7 @@ function Demo({ start, where, modKey, label }: { start: Start; where?: string; m
   }
 
   const body = (() => {
+    if (level.kind === 'make') return <CommandPaletteProposal source="Place one › Action one" mark={<IconSquareRounded size={10} stroke={1.5} />}>{PROPOSAL}</CommandPaletteProposal>
     if (level.kind !== 'ask' && level.kind !== 'draft') return undefined
     if (!asked || !asked.done) return <CommandPaletteWorking>Reading 12 notes…</CommandPaletteWorking>
     const changed = frame.query.trim() !== asked.question.trim()
@@ -355,6 +373,8 @@ function Demo({ start, where, modKey, label }: { start: Start; where?: string; m
                   ? 'Ask anything about this page'
                   : level.kind === 'draft'
                     ? 'What should it say?'
+                    : level.kind === 'make'
+                    ? 'Looking at this page'
                     : 'Search, or choose a place'
             }
             groups={groups}
@@ -365,6 +385,8 @@ function Demo({ start, where, modKey, label }: { start: Start; where?: string; m
                   ? { label: 'Ask', onBack: back }
                   : level.kind === 'draft'
                     ? { label: 'Draft', onBack: back }
+                    : level.kind === 'make'
+                    ? { label: 'Make', onBack: back }
                     : undefined
             }
             pending={level.kind === 'first' && searching ? 'Searching…' : undefined}
@@ -412,6 +434,9 @@ export const Answer: Story = story('answer')
 export const Quote: Story = story('draft')
 
 /** A form. Ctrl+Enter creates; a missing field says so and takes focus; Backspace in an empty field goes back and keeps what was typed. */
+/** Something it offers to make: where, then what. Nothing is made until the form is sent. */
+export const Proposal: Story = story('make')
+
 export const Form: Story = story('form')
 
 /** Creating is refused: the fields unlock, the reason sits beside the button, and focus is back where it was. */

package/src/CommandPalette.test.tsx

@@ -17,6 +17,7 @@ import {
   CommandPalette,
   CommandPaletteAnswer,
   CommandPaletteForm,
+  CommandPaletteProposal,
   CommandPaletteQuote,
   CommandPaletteSearch,
   CommandPaletteWorking,
@@ -421,6 +422,19 @@ describe('what sits above the rows', () => {
     expect(screen.getByText(/Line one/).textContent).toBe('Line one\nLine two')
   })
 
+  it('draws a proposal as a card: where it would be made, with its mark, then what', () => {
+    const { container } = render(
+      <CommandPaletteProposal source="Place one › Action one" mark={<svg data-testid="mark" />}>
+        An item for tomorrow.
+      </CommandPaletteProposal>,
+    )
+    const lines = container.firstElementChild?.children
+    expect(lines).toHaveLength(2)
+    expect(lines?.[0].textContent).toBe('Place one › Action one')
+    expect(lines?.[0].contains(screen.getByTestId('mark'))).toBe(true)
+    expect(lines?.[1].textContent).toBe('An item for tomorrow.')
+  })
+
   it('announces what is being worked on, with its grey bars', () => {
     const { container } = render(<CommandPaletteWorking bars={3}>Reading…</CommandPaletteWorking>)
     expect(screen.getByRole('status').textContent).toContain('Reading…')

package/src/CommandPalette.tsx

@@ -16,10 +16,11 @@ import type { BaseUIEvent } from '@base-ui/react/types'
 import { IconLoader2, IconSearch } from '@tabler/icons-react'
 import { cn } from './cn'
 import { Button } from './Button'
+import { Card } from './Card'
 import { InputChip } from './ChipInput'
 import { EmptyState } from './EmptyState'
 import { FieldLine } from './Field'
-import { Form } from './Form'
+import { FIELDS_CLASSES, Form } from './Form'
 import { Kbd } from './Kbd'
 import { EnterHint, MenuItemBody, menuItemClassName } from './Menu'
 import { ScrollArea } from './ScrollArea'
@@ -563,10 +564,12 @@ export function CommandPaletteForm({ chip, icon, submitLabel, onSubmit, submitWa
       {/* The package Form, from the fields to the button (UIG-7). The chip row
           stays outside it, so its ✕ still goes back while the form works; the
           button row is inside it, so focus that was on the button is held.
-          The fields are found through data-command-palette-fields. */}
-      <Form data-command-palette-fields="" busy={busy} enterSends={false} onSubmit={submit} className="flex min-h-0 flex-col">
+          The fields are found through data-command-palette-fields. The form is
+          `free`, a scrolling body over a button row; the fields inside stack as
+          every form's do, 24px apart (Katerina, 28 September: they were 16). */}
+      <Form data-command-palette-fields="" busy={busy} enterSends={false} onSubmit={submit} layout="free" className="flex min-h-0 flex-col">
         <ScrollArea viewportClassName="max-h-[420px]" contentClassName="flex flex-col px-5 py-4">
-          <div className="flex flex-col gap-4">{children}</div>
+          <div className={FIELDS_CLASSES}>{children}</div>
         </ScrollArea>
         <div className="flex shrink-0 items-center gap-3 px-5 pb-4">
           <div className="min-w-0 flex-1">
@@ -659,3 +662,31 @@ export interface CommandPaletteQuoteProps {
 export function CommandPaletteQuote({ children }: CommandPaletteQuoteProps) {
   return <p className="whitespace-pre-wrap border-l-2 border-border-default pl-3 text-body-2 text-text-primary">{children}</p>
 }
+
+export interface CommandPaletteProposalProps {
+  /** Where it would be made: the app and the action — "App › New item". */
+  source: string
+  /** The app's mark before the source, as small as the line (about 10px). */
+  mark?: ReactNode
+  /** What would be made, in a sentence. */
+  children: string
+}
+
+/**
+ * Something the palette offers to make, before anything is made: a card with
+ * where it would be made on top, then what it would be. A card because it is a
+ * thing about to exist, not text to read or use; the source first because two
+ * apps may offer something alike (UIG-40, Katerina 28 September: the look Peek's
+ * launcher already had, now drawn by the palette, ruling P4).
+ */
+export function CommandPaletteProposal({ source, mark, children }: CommandPaletteProposalProps) {
+  return (
+    <Card fill="surface" className="flex flex-col gap-1 p-3">
+      <span className="flex items-center gap-2 text-caption text-text-secondary">
+        {mark}
+        {source}
+      </span>
+      <span className="text-body-2 text-text-primary">{children}</span>
+    </Card>
+  )
+}

package/src/DialogShell.stories.tsx

@@ -6,6 +6,7 @@ import { Chip } from './Chip'
 import { DialogShell } from './DialogShell'
 import { IconButton } from './IconButton'
 import { Field } from './Field'
+import { Form } from './Form'
 import { TextInput } from './TextInput'
 import { Textarea } from './Textarea'
 
@@ -32,22 +33,22 @@ type Story = StoryObj<typeof meta>
  */
 export const Default: Story = {
   args: {
-    bodyClassName: 'flex flex-col gap-6',
     footer: (
       <>
         <Button variant="muted">Cancel</Button>
         <Button variant="primary">Confirm</Button>
       </>
     ),
+    // In a Form, as a dialog's fields always are: it places them 24px apart.
     children: (
-      <>
+      <Form onSubmit={() => {}} aria-label="Example">
         <Field label="Title" required>
           <TextInput placeholder="What is this about?" />
         </Field>
         <Field label="Notes">
           <Textarea placeholder="Optional notes…" className="h-[80px]" />
         </Field>
-      </>
+      </Form>
     ),
   },
 }

package/src/Field.mdx

@@ -53,6 +53,10 @@ import { Field, TextInput } from '@estiva-app/ui'
   `Field` has no `required` of its own, so the Field puts it there. A control
   that says so already is left alone, and a `children` of several elements
   keeps the asterisk and owes its own.
+- **The whole field is one thing under the pointer** (Katerina, 28
+  September): the label, the space under it, the box and the line under the
+  box. Anywhere on it strengthens the box's border, as hovering the box does;
+  a focused box keeps its focus colour, and a switched-off one stays as it is.
 
 ## What it owns
 
@@ -62,6 +66,7 @@ It does these by itself. Write none of them around it.
 |---|---|---|
 | Ties the label, the description and the error to the control inside it | `aria-label`, an `id` / `htmlFor` pair, or `aria-describedby` |  |
 | Marks the control invalid when it has an `error`, and announces it | `aria-invalid` |  |
+| Strengthens the box's border while the pointer is anywhere on the field | a hover of your own on the label or around the box |  |
 
 ## Props
 

package/src/Field.tsx

@@ -83,7 +83,10 @@ export function Field({ label, required = false, helper, error, children }: Fiel
         })
       : children
   return (
-    <BaseField.Root invalid={!!error} className="flex flex-col gap-2">
+    // `group/field`: the label, the box and the line under it are one thing under the pointer —
+    // anywhere in it strengthens the box's border, as hovering the box does (Katerina, 28 September).
+    // Before, the 8px between the label and the box was a gap where the border went out again.
+    <BaseField.Root invalid={!!error} className="group/field flex flex-col gap-2">
       {/* `cn`, like everywhere else. It was a template literal, with a comment
           saying the type token must never be merged — which stopped being true
           when `cn()` was taught the ramp: `input-label` is in it, and

package/src/Form.mdx

@@ -27,7 +27,7 @@ is switched off at once.
 ```tsx
 import { Button, Field, Form, TextInput } from '@estiva-app/ui'
 
-<Form onSubmit={send} busy={sending} className="flex flex-col gap-6">
+<Form onSubmit={send} busy={sending}>
   <Field label="Title" required error={titleError}>
     <TextInput value={title} onChange={(e) => { setTitle(e.target.value); setTitleError(undefined) }} />
   </Field>
@@ -55,8 +55,13 @@ import { Button, Field, Form, TextInput } from '@estiva-app/ui'
   standing keeps the form from ever sending.
 - The browser's own validation bubbles are off (`noValidate`). `Field`'s
   `required` marks a field; it does not block sending by itself.
-- `className` places the fields: the form draws no box, and neither does the
-  `<fieldset>` inside it.
+- **The form places its fields: one column, 24px apart** (Katerina, 28
+  September), so every form reads the same. Pass no layout of your own: the
+  gate lint refuses a gap, a direction or a grid on a `Form`. `className`
+  still places the form itself: its space around, its size.
+- **`layout="free"`** is for a form that is not a list of fields: a field and
+  its button, a composer. It places nothing, and `className` lays it out.
+- The form draws no box, and neither does the `<fieldset>` inside it.
 
 ## What it owns
 
@@ -67,6 +72,7 @@ It does these by itself. Write none of them around it.
 | Sends on Enter in a one-line field, and on Ctrl+Enter anywhere inside | a key handler that submits |  |
 | Leaves Enter alone where it means something else: a Textarea, a list, a people picker | exceptions of your own |  |
 | Does nothing while it is sending: no second send, and nothing inside takes focus | a busy flag on every control |  |
+| Stacks its fields in one column, 24px apart | a gap, a direction or a grid on the form | `no-restyled-part` |
 
 ## Keys
 

package/src/Form.stories.tsx

@@ -11,7 +11,7 @@ const meta = {
   title: 'Inputs/Form',
   component: Form,
   parameters: { layout: 'padded' },
-  args: { onSubmit: fn(), busy: false, className: 'flex flex-col gap-6', 'aria-label': 'Example', children: null },
+  args: { onSubmit: fn(), busy: false, 'aria-label': 'Example', children: null },
   argTypes: { children: { control: false }, onSubmit: { control: false } },
   decorators: [(Story) => <div className="w-96"><Story /></div>],
 } satisfies Meta<typeof Form>
@@ -35,6 +35,7 @@ const fields = (error?: string) => (
   </>
 )
 
+/** A list of fields: the form stacks them 24px apart itself. */
 export const Default: Story = { render: (args) => <Form {...args}>{fields()}</Form> }
 
 /** Sending: every field and button inside is switched off at once. */
@@ -43,6 +44,22 @@ export const Busy: Story = { args: { busy: true }, render: (args) => <Form {...a
 /** A field showing its error. The form does not send while it shows. */
 export const WithError: Story = { render: (args) => <Form {...args}>{fields('That is not a valid value.')}</Form> }
 
+/**
+ * **`layout="free"`**: a form that is not a list of fields, here a field and
+ * its button, places nothing, and lays itself out through `className`.
+ */
+export const Free: Story = {
+  args: { layout: 'free', className: 'flex items-center gap-2' },
+  render: (args) => (
+    <Form {...args}>
+      <TextInput placeholder="Add a name" aria-label="Name" className="min-w-0 flex-1" />
+      <Button variant="primary" type="submit">
+        Add
+      </Button>
+    </Form>
+  ),
+}
+
 /**
  * Live. Press Enter in the first field, or Send: the form is busy for a
  * second and a half, and focus comes back to where it was.

package/src/Form.test.tsx

@@ -26,7 +26,7 @@ afterEach(cleanup)
 
 function Harness({ onSubmit = vi.fn(), error, busy = false }: { onSubmit?: () => void; error?: string; busy?: boolean }) {
   return (
-    <Form onSubmit={onSubmit} busy={busy} aria-label="Probe" className="flex flex-col gap-6" id="probe">
+    <Form onSubmit={onSubmit} busy={busy} aria-label="Probe" id="probe">
       <Field label="First">
         <TextInput />
       </Field>
@@ -213,13 +213,27 @@ describe('Form', () => {
     expect(fireEvent.submit(form)).toBe(false)
   })
 
-  it('is a form with no browser validation bubbles, and passes id and className on', () => {
+  it('is a form with no browser validation bubbles, and passes id on', () => {
     render(<Harness />)
     const form = screen.getByRole('form', { name: 'Probe' }) as HTMLFormElement
     expect(form.tagName).toBe('FORM')
     expect(form.noValidate).toBe(true)
     expect(form.id).toBe('probe')
-    expect(form.className).toContain('flex-col')
+  })
+
+  it('stacks its fields 24px apart itself, and a free form places nothing', () => {
+    render(
+      <>
+        <Form onSubmit={() => {}} aria-label="Fields" className="px-5">x</Form>
+        <Form onSubmit={() => {}} aria-label="Free" layout="free" className="flex items-center gap-2">x</Form>
+      </>,
+    )
+    const fields = screen.getByRole('form', { name: 'Fields' }).className.split(' ')
+    expect(fields).toEqual(expect.arrayContaining(['flex', 'flex-col', 'gap-6', 'px-5']))
+    const free = screen.getByRole('form', { name: 'Free' }).className.split(' ')
+    expect(free).not.toContain('flex-col')
+    expect(free).not.toContain('gap-6')
+    expect(free).toEqual(expect.arrayContaining(['flex', 'items-center', 'gap-2']))
   })
 
   it('draws no box of its own around the fields', () => {

package/src/Form.tsx

@@ -37,6 +37,15 @@ import { FormBusyContext, useFormBusy } from './formBusy'
  * 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.
+ *
+ * **The form places its fields** (Katerina, 28 September). It drew no box and
+ * left the space between fields to every caller, and they chose three: Peek's
+ * dialogs 8px — the label's own distance from its box, so a label sat as close
+ * to the field above it as to its own — Ship's 24px, and the package's own
+ * launcher 16px. Everything inside now stacks 24px apart, and the gate lint
+ * refuses a layout passed in (`no-restyled-part`). A form that is not a list
+ * of fields — a field and its button, a composer — says `layout="free"` and
+ * lays itself out.
  */
 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. */
@@ -48,9 +57,18 @@ export interface FormProps extends Omit<FormHTMLAttributes<HTMLFormElement>, 'on
    * Ctrl+Enter may send — a form inside `CommandPalette`. Ctrl+Enter sends either way.
    */
   enterSends?: boolean
+  /**
+   * `fields`, the default: everything inside stacks 24px apart. `free`: the
+   * form places nothing, for a form that is not a list of fields — a field and
+   * its button, a composer — which lays itself out through `className`.
+   */
+  layout?: 'fields' | 'free'
   children: ReactNode
 }
 
+/** A list of fields: one column, 24px apart. `CommandPalette` stacks its fields with it too. */
+export const FIELDS_CLASSES = 'flex flex-col gap-6'
+
 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. */
@@ -70,7 +88,7 @@ function firstInvalid(form: HTMLElement): HTMLElement | undefined {
   return undefined
 }
 
-export function Form({ onSubmit, busy: ownBusy = false, enterSends = true, className, children, ...props }: FormProps) {
+export function Form({ onSubmit, busy: ownBusy = false, enterSends = true, layout = 'fields', className, children, ...props }: FormProps) {
   // A form inside a busy form is busy too.
   const outerBusy = useFormBusy()
   const busy = ownBusy || outerBusy
@@ -148,7 +166,7 @@ export function Form({ onSubmit, busy: ownBusy = false, enterSends = true, class
       // 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)}
+      className={cn('outline-none', layout === 'fields' && FIELDS_CLASSES, className)}
       onFocus={(event) => {
         if (event.target !== form.current) lastInside.current = event.target
         props.onFocus?.(event)