@@ -416,69 +416,75 @@ export function ConfigSidebar() {
416
416
) }
417
417
</ KTabs . Content >
418
418
< KTabs . Content value = "cursor" class = "flex flex-col gap-6" >
419
- < Field name = "Cursor" icon = { < IconCapCursor /> } >
420
- { /* <Subfield name="Hide cursor when not moving">
419
+ < Field
420
+ name = "Cursor"
421
+ icon = { < IconCapCursor /> }
422
+ value = {
421
423
< Toggle
422
- checked={project.cursor.hideWhenIdle}
423
- onChange={(v) => setProject("cursor", "hideWhenIdle", v)}
424
+ checked = { ! project . cursor . hide }
425
+ onChange = { ( v ) => {
426
+ setProject ( "cursor" , "hide" , ! v ) ;
427
+ } }
424
428
/>
425
- </Subfield> */ }
426
- </ Field >
427
- < Field name = "Size" icon = { < IconCapEnlarge /> } >
428
- < Slider
429
- value = { [ project . cursor . size ] }
430
- onChange = { ( v ) => setProject ( "cursor" , "size" , v [ 0 ] ) }
431
- minValue = { 20 }
432
- maxValue = { 300 }
433
- step = { 1 }
434
- />
435
- </ Field >
436
- < KCollapsible open = { ! project . cursor . raw } >
437
- < Field
438
- name = "Smooth Movement"
439
- icon = { < IconHugeiconsEaseCurveControlPoints /> }
440
- value = {
441
- < Toggle
442
- checked = { ! project . cursor . raw }
443
- onChange = { ( value ) => {
444
- setProject ( "cursor" , "raw" , ! value ) ;
445
- } }
446
- />
447
- }
448
- />
449
- < KCollapsible . Content class = "overflow-hidden border-b border-gray-200 opacity-0 transition-opacity animate-collapsible-up ui-expanded:animate-collapsible-down ui-expanded:opacity-100" >
450
- { /* if Content has padding or margin the animation doesn't look as good */ }
451
- < div class = "flex flex-col gap-4 pt-4 pb-6" >
452
- < Field name = "Tension" >
453
- < Slider
454
- value = { [ project . cursor . tension ] }
455
- onChange = { ( v ) => setProject ( "cursor" , "tension" , v [ 0 ] ) }
456
- minValue = { 1 }
457
- maxValue = { 500 }
458
- step = { 1 }
459
- />
460
- </ Field >
461
- < Field name = "Friction" >
462
- < Slider
463
- value = { [ project . cursor . friction ] }
464
- onChange = { ( v ) => setProject ( "cursor" , "friction" , v [ 0 ] ) }
465
- minValue = { 0 }
466
- maxValue = { 50 }
467
- step = { 0.1 }
468
- />
469
- </ Field >
470
- < Field name = "Mass" >
471
- < Slider
472
- value = { [ project . cursor . mass ] }
473
- onChange = { ( v ) => setProject ( "cursor" , "mass" , v [ 0 ] ) }
474
- minValue = { 0.1 }
475
- maxValue = { 10 }
476
- step = { 0.01 }
429
+ }
430
+ />
431
+ < Show when = { ! project . cursor . hide } >
432
+ < Field name = "Size" icon = { < IconCapEnlarge /> } >
433
+ < Slider
434
+ value = { [ project . cursor . size ] }
435
+ onChange = { ( v ) => setProject ( "cursor" , "size" , v [ 0 ] ) }
436
+ minValue = { 20 }
437
+ maxValue = { 300 }
438
+ step = { 1 }
439
+ />
440
+ </ Field >
441
+ < KCollapsible open = { ! project . cursor . raw } >
442
+ < Field
443
+ name = "Smooth Movement"
444
+ icon = { < IconHugeiconsEaseCurveControlPoints /> }
445
+ value = {
446
+ < Toggle
447
+ checked = { ! project . cursor . raw }
448
+ onChange = { ( value ) => {
449
+ setProject ( "cursor" , "raw" , ! value ) ;
450
+ } }
477
451
/>
478
- </ Field >
479
- </ div >
480
- </ KCollapsible . Content >
481
- </ KCollapsible >
452
+ }
453
+ />
454
+ < KCollapsible . Content class = "overflow-hidden border-b border-gray-200 opacity-0 transition-opacity animate-collapsible-up ui-expanded:animate-collapsible-down ui-expanded:opacity-100" >
455
+ { /* if Content has padding or margin the animation doesn't look as good */ }
456
+ < div class = "flex flex-col gap-4 pt-4 pb-6" >
457
+ < Field name = "Tension" >
458
+ < Slider
459
+ value = { [ project . cursor . tension ] }
460
+ onChange = { ( v ) => setProject ( "cursor" , "tension" , v [ 0 ] ) }
461
+ minValue = { 1 }
462
+ maxValue = { 500 }
463
+ step = { 1 }
464
+ />
465
+ </ Field >
466
+ < Field name = "Friction" >
467
+ < Slider
468
+ value = { [ project . cursor . friction ] }
469
+ onChange = { ( v ) => setProject ( "cursor" , "friction" , v [ 0 ] ) }
470
+ minValue = { 0 }
471
+ maxValue = { 50 }
472
+ step = { 0.1 }
473
+ />
474
+ </ Field >
475
+ < Field name = "Mass" >
476
+ < Slider
477
+ value = { [ project . cursor . mass ] }
478
+ onChange = { ( v ) => setProject ( "cursor" , "mass" , v [ 0 ] ) }
479
+ minValue = { 0.1 }
480
+ maxValue = { 10 }
481
+ step = { 0.01 }
482
+ />
483
+ </ Field >
484
+ </ div >
485
+ </ KCollapsible . Content >
486
+ </ KCollapsible >
487
+ </ Show >
482
488
483
489
{ /* <Field name="Motion Blur">
484
490
<Slider
0 commit comments