{last}

{level.kind === 'form' ? ( void submitForm()} working={working ? { button: 'Creating…', line: 'Creating the item…' } : undefined} error={refused ? 'Group two is archived. Choose another one.' : undefined} > setDraft({ ...draft, title: e.target.value })} />

setDraft({ ...draft, notes: e.target.value })} />
            </Field>
            <Field label="Kind">
              <Select value={draft.kind} onChange={(value) => setDraft({ ...draft, kind: value })} options={KINDS} />
            </Field>
            <Field label="Group" required error={missing.group}>
              <Select value={draft.group} onChange={(value) => setDraft({ ...draft, group: value })} options={GROUPS} placeholder="Choose a group…" />
            </Field>
          </CommandPaletteForm>
        ) : level.kind === 'one-list' ? (
          <CommandPaletteForm
            chip={{ label: 'Item one · Change kind', onBack: back }}
            icon={icon}
            submitLabel="Change kind"
            onSubmit={() => void submitKind()}
            submitWaits={kind === 'one' ? 'Choose a different kind first' : undefined}
            working={working ? { button: 'Saving…', line: 'Saving the kind…' } : undefined}
          >
            <Field label="Kind">
              <Select value={kind} onChange={setKind} options={KINDS} />
            </Field>
          </CommandPaletteForm>
        ) : (
          <CommandPaletteSearch
            query={frame.query}
            onQueryChange={setQuery}
            placeholder={
              level.kind === 'place'
                ? `Search ${level.name}'s actions`
                : level.kind === 'ask'
                  ? '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}
            chip={
              level.kind === 'place'
                ? { label: level.name, leading: icon, onBack: back }
                : level.kind === 'ask'
                  ? { 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}
            // What the later group left out: a line to read, not a row to pick.
            notes={level.kind === 'first' && q && !searching && LATER.some((l) => l.toLowerCase().includes(q)) ? ['1 more in a place you cannot open.'] : undefined}
            empty={
              level.kind === 'first' && q && !searching
                ? `Nothing is called “${q}”.`
                : level.kind === 'place'
                  ? `${level.name} has no action called “${q}”.`
                  : undefined
            }
          >
            {body}
          </CommandPaletteSearch>
        )}
      </CommandPalette>
    </div>
  )
}

const story = (start: Start): Story => ({
  render: (args) => <Demo start={start} label={args.label} where={args.where} modKey={args.modKey} />,
})

/** The first level: rows in groups, the first one lit. ↑ ↓ stop at the ends, Tab goes into a place, Ctrl+Backspace forgets a recent row. */
export const FirstLevel: Story = story('first')

/** Typing: the rows that match now, a line while a later group is on its way, that group arriving without moving the lit row, and a note about what it left out. */
export const WhileRowsArrive: Story = story('arriving')

/** Nothing matches: the empty line, where the first row would be. */
export const NothingFound: Story = story('nothing')

/** Inside a level: the chip names it. Backspace at the start of the field, or the chip's ✕, goes back with the text you had. */
export const InsideALevel: Story = story('place')

/** Something is being worked on: the line says what, the grey bars hold the place. */
export const Working: Story = story('working')

/** An answer, its marks, and the rows they point at. Change the question and an "Again" row comes first. */
export const Answer: Story = story('answer')

/** Text written to be used somewhere else, above what you can do with it. */
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. */
export const FormRefused: Story = story('refused')

/** A form that is one list. It waits, and says why, until the value changes; Backspace goes back from the list. */
export const FormThatWaits: Story = story('one-list')