Fix graph sidebar state closure issue

Event handlers now read fresh state from State.get() instead of
using captured values from when bindSidebarEvents was called.
This ensures the sidebar updates correctly with each render.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

deck-frontend/deck-v4.6.html

@@ -1399,10 +1399,9 @@ const GraphView = {
   },
 
   bindSidebarEvents(sidebar) {
-    const { graphFilters, graphSettings } = State.get();
-
     sidebar.querySelectorAll("[data-category]").forEach(cb => {
       cb.onchange = () => {
+        const { graphFilters } = State.get();
         const cats = new Set(graphFilters.categories);
         cb.checked ? cats.add(cb.dataset.category) : cats.delete(cb.dataset.category);
         State.set({ graphFilters: { ...graphFilters, categories: cats } });
@@ -1412,6 +1411,7 @@ const GraphView = {
 
     sidebar.querySelectorAll("[data-edge]").forEach(cb => {
       cb.onchange = () => {
+        const { graphFilters } = State.get();
         const edges = new Set(graphFilters.edgeTypes);
         cb.checked ? edges.add(cb.dataset.edge) : edges.delete(cb.dataset.edge);
         State.set({ graphFilters: { ...graphFilters, edgeTypes: edges } });
@@ -1419,16 +1419,16 @@ const GraphView = {
       };
     });
 
-    sidebar.querySelector("#gs-images").onchange = (e) => { State.set({ graphSettings: { ...graphSettings, showImages: e.target.checked } }); Events.emit('render'); };
+    sidebar.querySelector("#gs-images").onchange = (e) => { const { graphSettings } = State.get(); State.set({ graphSettings: { ...graphSettings, showImages: e.target.checked } }); Events.emit('render'); };
-    sidebar.querySelector("#gs-labels").onchange = (e) => { State.set({ graphSettings: { ...graphSettings, showLabels: e.target.checked } }); Events.emit('render'); };
+    sidebar.querySelector("#gs-labels").onchange = (e) => { const { graphSettings } = State.get(); State.set({ graphSettings: { ...graphSettings, showLabels: e.target.checked } }); Events.emit('render'); };
 
     const sizeSlider = sidebar.querySelector("#gs-size");
     sizeSlider.oninput = (e) => { sidebar.querySelector("#gs-size-val").textContent = e.target.value + "px"; };
-    sizeSlider.onchange = (e) => { State.set({ graphSettings: { ...graphSettings, nodeSize: parseInt(e.target.value) } }); Events.emit('render'); };
+    sizeSlider.onchange = (e) => { const { graphSettings } = State.get(); State.set({ graphSettings: { ...graphSettings, nodeSize: parseInt(e.target.value) } }); Events.emit('render'); };
 
     const distSlider = sidebar.querySelector("#gs-dist");
     distSlider.oninput = (e) => { sidebar.querySelector("#gs-dist-val").textContent = e.target.value + "px"; };
-    distSlider.onchange = (e) => { State.set({ graphSettings: { ...graphSettings, linkDist: parseInt(e.target.value) } }); Events.emit('render'); };
+    distSlider.onchange = (e) => { const { graphSettings } = State.get(); State.set({ graphSettings: { ...graphSettings, linkDist: parseInt(e.target.value) } }); Events.emit('render'); };
   },
 
   renderControls(container) {