AI surfaces

Flab marks machine assistance with a warm yellow glow and a faint green insight wash — deliberately never blue, so AI never reads as a processing system state. These tokens are scoped so the identity stays contained and cannot leak into ordinary UI.

AiComposer

<AiComposer  placeholder="Ask anything"  leading={<button aria-label="Attach"><Paperclip className="size-4" /></button>}/>

Enter submits, Shift+Enter inserts a newline. Pass onSubmit to receive the trimmed message.

AiInsight

Revenue is trending 12% above forecast this week.

<AiInsight>Revenue is trending 12% above forecast this week.</AiInsight>

SuggestionCard

<SuggestionCard icon={<TrendingUp className="size-4" />} label="Summarise this quarter" /><SuggestionCard icon={<FileText className="size-4" />} label="Draft a status update" />

AiGlow

How can I help?

<AiGlow>  <div className="flex items-center gap-2">    <Sparkles className="size-4" />    <Text>How can I help?</Text>  </div></AiGlow>

Props

Prop	Type	Default	Notes
`AiComposer.onSubmit`	`(message: string) => void`	—	Called with the trimmed message.
`AiComposer.leading`	`ReactNode`	—	Leading affordance slot.
`AiInsight.icon`	`ReactNode`	—	Override the sparkle icon.
`SuggestionCard.label`	`ReactNode`	—	Tile text.
`SuggestionCard.icon`	`ReactNode`	—	Tinted leading icon.