library / 16

Installation

tokens.css + fine-tune.css + button.css
head.html
<link rel="stylesheet" href="tokens.css">
<link rel="stylesheet" href="components/fine-tune/fine-tune.css">

Basic

Preview

fine-tune / Basicinteractive

Inspector card with layout toggles and native range inputs.

Code

fine-tune.html
<p class="fixture-note">Inspector card with layout toggles and native range inputs.</p><div class="au-fine-tune" data-au-component="fine-tune" data-au-state="idle"></div>

Component contract

Install
tokens.css · fine-tune.css · button.css
States
Host-owned via data-au-state and documented variants
Host
content, state transitions, and execution behind actions
For agents
fine-tune.contract
# agent-ui / fine-tune
component: fine-tune
selector: .au-fine-tune
data_au_component: fine-tune
purpose: Inspector card with layout toggles and native range inputs.

install:
  - tokens.css
  - fine-tune.css
  - button.css when rendering actions

states: Host-owned via data-au-state and documented variants.
css_variables: Uses shared semantic tokens.
events: native form, focus, and click only — no custom events or runtime required
no_javascript: Markup and native controls remain usable without script.
host_owns: The host owns content, state transitions, and execution behind actions.
accessibility: Prefer labelled regions and text status, not color alone.
security: Escape untrusted model and tool text before insertion.

rules:
  - Host owns execution, authorization, persistence, validation, and state transitions.
  - Components render host-provided state; they never execute tools or imply approval.
  - Escape untrusted model output, tool args, and tool output before insertion.
  - Use only documented data-au-* attributes and data-au-state values.
  - Keep the no-JS path usable. Do not add React, Tailwind, bundlers, or remote assets.
source: components/fine-tune/fine-tune.{html,css} + README.md + fixture.html