# JS: Controls


<!-- WARNING: THIS FILE WAS AUTOGENERATED! DO NOT EDIT! -->

## Width Management

Syncs the width slider value with localStorage and the card stack inner
container’s `max-width`. Debounces server persistence.

``` python
# Test width management JS generation
ids = CardStackHtmlIds(prefix="cs0")
config = CardStackConfig(prefix="cs0")
urls = CardStackUrls(save_width="/cs/save_width")

js = _generate_width_mgmt_js(ids, config, urls)
assert "Width Management" in js
assert ids.card_stack_inner in js
assert ids.width_slider in js
assert "ns.updateWidth" in js
assert "ns.decreaseWidth" in js
assert "ns.increaseWidth" in js
assert "ns.applyWidth" in js
assert "ns.triggerAutoAdjust" in js
assert urls.save_width in js
print("Width management JS tests passed!")
```

    Width management JS tests passed!

## Scale Management

Syncs the scale slider value with localStorage and a CSS custom property
(`--card-stack-scale`). Debounces server persistence.

``` python
# Test scale management JS generation
js = _generate_scale_mgmt_js(ids, config, urls)
assert "Scale Management" in js
assert ids.card_stack in js
assert ids.scale_slider in js
assert "ns.updateScale" in js
assert "ns.decreaseScale" in js
assert "ns.increaseScale" in js
assert "ns.applyScale" in js
assert "--card-stack-scale" in js
assert "ns.triggerAutoAdjust" in js
print("Scale management JS tests passed!")
```

    Scale management JS tests passed!

## Card Count Management

Manages the visible card count dropdown, localStorage persistence, and
the auto/manual mode toggle. Fires HTMX viewport updates when the count
changes.

``` python
# Test card count management JS generation
urls_full = CardStackUrls(update_viewport="/cs/update_viewport")
js = _generate_card_count_mgmt_js(ids, config, urls_full)
assert "Card Count Management" in js
assert ids.card_stack in js
assert ids.card_count_select in js
assert "ns.updateCardCount" in js
assert "ns._autoUpdateCount" in js
assert "ns.handleCountChange" in js
assert "ns.syncCountDropdown" in js  # Exposed for external callers
assert "_isAutoMode" in js
assert "_syncCountDropdown" in js
assert "_AUTO_KEY" in js
assert "swap: 'none'" in js
# Valid count options from config
assert "1, 3, 5, 7, 9" in js
# is_auto parameter passed in both functions
assert "is_auto: 'false'" in js  # Manual selection
assert "is_auto: 'true'" in js   # Auto-adjustment
print("Card count management JS tests passed!")
```

    Card count management JS tests passed!