@@ -2,6 +2,25 @@ import { CURATED_PRESETS, CURATED_PALETTES } from './data';
22import type { TermController } from './terminal' ;
33import type { ChromeHandles } from './chrome' ;
44
5+ // Chevron accent per palette: a lifted, slime-parallel sample of each palette's
6+ // hue (same lightness/chroma profile the Slime green carries as the UI accent).
7+ const PALETTE_ACCENT : Record < string , string > = {
8+ Slime : '#6dbf66' ,
9+ Warm : '#d2ab5f' ,
10+ Ocean : '#79aff7' ,
11+ Mono : '#b0adaa' ,
12+ Heat : '#f18c64' ,
13+ } ;
14+
15+ // One-line character note per preset, shown after the first preset cycle.
16+ const PRESET_INFO : Record < string , string > = {
17+ Network : 'dense, interconnected veins with rapid branching' ,
18+ Organic : 'balanced, natural-looking growth' ,
19+ Vortex : 'rotational currents that coil into spirals' ,
20+ Lightning : 'fast dendritic branching, like lightning' ,
21+ Tendrils : 'long arms reaching across the field' ,
22+ } ;
23+
524// A clickable command-line token that cycles a curated list and live-swaps.
625function cycler ( el : HTMLElement , names : string [ ] , onPick : ( n : string ) => void , onChange : ( ) => void ) {
726 let i = 0 ;
@@ -26,18 +45,41 @@ export function wireControls(h: ChromeHandles, c: TermController, agents: number
2645 ` <span class="leg">· space pauses</span>` ;
2746 } ;
2847
29- // The cursor + hint guide first use; they retire once the user cycles a value.
48+ // The cursor + "click a value to cycle" guide retire on the first cycle of
49+ // either token. The preset info line only appears once a preset is cycled — a
50+ // palette-first interaction leaves the line empty until then.
3051 let guided = true ;
31- const onCycle = ( ) => {
32- readout ( ) ;
33- if ( guided ) {
34- guided = false ;
35- h . hint . setAttribute ( 'data-done' , '' ) ;
36- h . cursor . style . display = 'none' ;
37- }
52+ const retireGuide = ( ) => {
53+ if ( ! guided ) return ;
54+ guided = false ;
55+ h . cursor . style . display = 'none' ;
56+ h . hint . textContent = '' ;
57+ } ;
58+
59+ // Show the preset note, then let it fade out gently after a long-ish dwell.
60+ // A fresh cycle cancels the pending fade and brings the line back.
61+ let fadeTimer : number | undefined ;
62+ const showPresetInfo = ( text : string ) => {
63+ if ( fadeTimer ) clearTimeout ( fadeTimer ) ;
64+ h . hint . removeAttribute ( 'data-faded' ) ;
65+ h . hint . textContent = text ;
66+ fadeTimer = window . setTimeout ( ( ) => h . hint . setAttribute ( 'data-faded' , '' ) , 7000 ) ;
3867 } ;
39- cycler ( h . tokPreset , CURATED_PRESETS , ( n ) => c . setPresetByName ( n ) , onCycle ) ;
40- cycler ( h . tokPalette , CURATED_PALETTES , ( n ) => c . setPaletteByName ( n ) , onCycle ) ;
68+ cycler ( h . tokPreset , CURATED_PRESETS , ( n ) => c . setPresetByName ( n ) , ( ) => {
69+ retireGuide ( ) ;
70+ showPresetInfo ( PRESET_INFO [ h . tokPreset . textContent ?? '' ] ?? '' ) ;
71+ readout ( ) ;
72+ } ) ;
73+ cycler ( h . tokPalette , CURATED_PALETTES , ( n ) => {
74+ c . setPaletteByName ( n ) ;
75+ const col = PALETTE_ACCENT [ n ] ?? 'var(--acc)' ;
76+ h . chevron . style . color = col ;
77+ h . tokPalette . style . color = col ;
78+ h . tokPalette . style . borderBottomColor = col ;
79+ } , ( ) => {
80+ retireGuide ( ) ;
81+ readout ( ) ;
82+ } ) ;
4183 readout ( ) ;
4284
4385 // Pause/resume: space (global) or clicking the status tag.
0 commit comments