Thinking indicator

export const ThinkingIndicatorStyle = forSlots(ThinkingIndicatorSlots)(
  Recipes.ThinkingIndicator({}),
)

// A polite status: three dots and shimmering words, and what it is doing.
export const thinkingIndicator = (
  style: NamedStyle<typeof ThinkingIndicatorSlots>,
  h: HtmlBuilder<never>,
): Html => ThinkingIndicator.view({ detail: 'Searching the web', style }, h)

export const ThinkingIndicatorKinds = [
  { mark: 'dots', label: 'shimmer' },
  { mark: 'pulse', label: 'plain' },
  { mark: 'none', label: 'shimmer' },
  { mark: 'dots', label: 'hidden' },
] as const

const thinkingKindStyles = ThinkingIndicatorKinds.map(selection =>
  forSlots(ThinkingIndicatorSlots)(Recipes.ThinkingIndicator(selection)),
)

// Dots or a pulse beside the words, the words alone, or the dots alone with
// the words said, not shown. Each holds still under reduced motion.
export const thinkingIndicatorKinds = (h: HtmlBuilder<never>): Html =>
  h.div(
    [h.Style({ display: 'grid', gap: '1rem', justifyItems: 'start' })],
    thinkingKindStyles.map(style => ThinkingIndicator.view({ label: 'Thinking', style }, h)),
  )

// In the accent's ink: `thinkingIndicator(ThinkingAccentStyle, h)`.
export const ThinkingAccentStyle = forSlots(ThinkingIndicatorSlots)(
  Recipes.ThinkingIndicator({ tone: 'accent' }),
)