Generation Controls

Core component

<loquix-generation-controls> maps generation state to the right set of controls and emits framework-neutral events for your orchestration layer.

loquix-generation-controlsstate-drivenaccessible toolbar

Preview

Running and paused states Live component

Usage

import '@loquix/core/define/define-generation-controls';

<loquix-generation-controls
  state="running"
  show-pause
></loquix-generation-controls>

controls.addEventListener('loquix-stop', () => generation.abort());
controls.addEventListener('loquix-pause', () => generation.pause());
controls.addEventListener('loquix-resume', () => generation.resume());

Properties

Property	Attribute	Type	Default	Description
`state`	`state`	`'idle' \| 'running' \| 'paused' \| 'complete' \| 'error'`	`'idle'`	Controls which buttons are visible.
`showPause`	`show-pause`	`boolean`	`false`	Adds Pause next to Stop while running.
`showSkip`	`show-skip`	`boolean`	`false`	Reserved for a future Skip control.

State behavior

State	Visible controls
`running`	Stop, plus Pause when `show-pause` is set.
`paused`	Resume.
`idle`, `complete`, `error`	Nothing is rendered.

Events

Event	Detail	Trigger
`loquix-stop`	`{}`	Stop button click.
`loquix-pause`	`{}`	Pause button click.
`loquix-resume`	`{}`	Resume button click.

CSS parts

Part	Purpose
`controls`	Outer toolbar.
`button`	Every control button.

CSS custom properties

Variable	Purpose
`--loquix-gen-controls-gap`	Gap between controls.
`--loquix-gen-button-bg`	Default button background.
`--loquix-gen-button-color`	Default button text color.
`--loquix-gen-stop-bg`	Stop button background.
`--loquix-gen-stop-color`	Stop button text color.