The vault.
Small components for AI interfaces, finished down to the motion. React and Tailwind, running on lunato: install it, copy a file into your app, and it works.
AI input
Where the prompt is typed. Enter sends, and while the model answers, the send button stops it. Every version takes value, onChange, onSubmit, busy, onStop, size and hints. Starlight and Composer also carry files with attachments, onAttach and onRemove, pick their send button and shape, drop the model chip when you leave out models, and end its menu in a Fast responses switch with fast and onFastChange. When a send fails, error says why in a note just above the panel, with a Retry for onRetry; a file whose upload failed says so on its chip and holds the send until it is taken off.
Send button
Sends the prompt, then stops the answer: a night sky or its snowy daylight twin, an ink square whose arrow folds into stop, a label with its key, a paper plane that takes off, or voice bars that fold into the arrow once there is text. Every version takes busy, disabled, onSend and onStop; Voice also takes onVoice, and listening sets its bars dancing while dictation runs.
Model picker
Chooses the model a chat runs on. The name and icon morph to the choice. Every version takes models, value and onChange.
Effort meter
How hard the model thinks, from Low to Max in deepening purple: a ruler you throw under a mark, segments with a sliding thumb, a dial you hold to charge, a dot you drag along a track, or one quiet chip. Drag, hold or press to pick; reaching Max throws a burst and runs it once through the rainbow, and atMax chooses which of those happen, with a phone tap and your own onReach. Every version takes value, onChange and levels.
Thinking indicator
What the model is doing right now: its reasoning folded into a line that counts the seconds and opens, its run as named phases, one line it keeps rewriting, or a list of steps. Thoughts takes thoughts; Phases takes phases and phase; the line and the shimmer take status; the steps take steps. Each takes done once the run finishes, and all but the shimmer take stopped for a run that ends short, stopped or failed, marked with a grey cross rather than a check.
Loader
What runs while a model thinks. Each takes a size, a speed and a colour, and drops into the thinking line or the steps, as your own svg can.
Code changes
What an agent is changing while it works: a diff as it streams, the files it has touched, or lines rewritten in place, where lunato moves only the characters that changed.
Sources
Where a research run is reading from, as it finds each place: a stack of marks, a row of badges, or moons round the thinking line. Emoji, favicons or svgs, or a letter when there is none. Every version takes sources; the stack and the moons also show a status.
Streaming text
The answer as it streams in. Rise runs on lunato, so a word the model revises morphs in place. Every version takes text.
Token meter
How much of the context window a chat has used. The numbers roll, and the meter turns red from 90%. Every version takes used and limit.