building-tuning-panelslisted

# Building Tuning Panels ## Quick start workflow 1. Read the target code and extract tunable values: - numeric literals in styling/animation/layout - color literals - booleans for visual variants - enums/modes - spring/easing configs 2. Choose one default panel library using the routing rules below. 3. Create controls with defaults set to current code values. 4. Infer sensible ranges and steps (see [Control ranges](#control-ranges-defaults)). 5. Wire controls directly to rendered values so updates are immediate. 6. Add one export path (JSON copy button preferred; console fallback). 7. Gate panel to development-only and keep runtime behavior unchanged without it. ## Library routing defaults Choose a single default; do not list many options unless needed: 1. If React + Motion/Framer Motion is present: use **DialKit**. 2. Else if React: use **Leva**. 3. Else if project already has `tweakpane` or `lil-gui`: use the installed one. 4. Else if vanilla/no framework: use **Tweakpane**. 5. Else if no package manager / zero-dependency requirement: use native HTML controls + CSS custom properties. 6. Use Theatre.js only when timeline/keyframe editing is explicitly required. For detailed selection criteria and library capabilities, read: - [references/01-concepts-and-library-selection.md](references/01-concepts-and-library-selection.md) ## Control mapping defaults Map value types to controls: - Number with clear bounds → slider (`min`, `max`, `step` required) - Num