Chat composer

<div className="composer">                       {/* grey frame */}
  <div className="composer__box">                {/* white box */}
    <textarea placeholder="Ask anything…" />
    <div className="composer__row">
      <Button variant="ghost" icon={Paperclip} aria-label="Attach files" />
      <ComposerMenu label="Output" value={output} options={OUTPUTS} onChange={setOutput} />
      <ModelModeMenu value={mode} onChange={setMode} />
      <button className="composer__send" aria-label="Send" disabled={!text.trim()}>
        <ArrowUp size={18} weight="bold" />
      </button>
    </div>
  </div>
  <div className="composer__tray">               {/* build options */}
    <Button variant="ghost">Design system <b>Meridian</b></Button>
  </div>
</div>

AnatomyCopy Anchor Link

• White box: the text field, attach, what to make (Output), the model, and send. Nothing else.
• Grey tray: options that shape what gets built, such as template, format, style and design system. It changes with the Output choice.
• Send: a round primary button, grey and disabled until there is text.

BehaviourCopy Anchor Link

• Enter sends; Shift and Enter adds a new line.
• The placeholder describes the current Output ("Describe the page you want…").
• Attached files appear as chips above the text, each with a remove button.
• The model choice is remembered for the next visit.

Prompts under the composerCopy Anchor Link

Starter prompts sit under the composer as pills, at most two rows. Each pill names a specific thing to build ("Demo page for the Q4 campaign"), with an icon for its type in the brand blue.