update

app/ui-alphabet-browser.js

@@ -100,9 +100,16 @@
       state,
       normalizeId,
       getDomRefs,
-      renderDetail
+      renderDetail,
+      onStateChange
     } = dependencies || {};
 
+    function notifyStateChange() {
+      if (typeof onStateChange === "function") {
+        onStateChange();
+      }
+    }
+
     function capitalize(value) {
       return value ? value.charAt(0).toUpperCase() + value.slice(1) : "";
     }
@@ -405,6 +412,7 @@
 
       if (selected) {
         renderDetail(selected);
+        notifyStateChange();
         return;
       }
 
@@ -413,6 +421,7 @@
       if (detailSubEl) {
         detailSubEl.textContent = "No letters match the current filter.";
       }
+      notifyStateChange();
     }
 
     function bindFilterControls() {
@@ -530,6 +539,7 @@
       }
       if (detailSubEl) detailSubEl.textContent = "Select a letter to explore";
       if (detailBodyEl) detailBodyEl.innerHTML = "";
+      notifyStateChange();
     }
 
     function selectLetter(key) {
@@ -539,6 +549,8 @@
       const letter = letters.find((entry) => letterKey(entry) === key) || getLetters().find((entry) => letterKey(entry) === key);
       if (letter) {
         renderDetail(letter);
+      } else {
+        notifyStateChange();
       }
     }
 
@@ -561,10 +573,14 @@
         const letter = letters.find((entry) => letterKey(entry) === selectKey) || getLetters().find((entry) => letterKey(entry) === selectKey);
         if (letter) {
           renderDetail(letter);
+        } else {
+          notifyStateChange();
         }
       } else {
         resetDetail();
       }
+
+      notifyStateChange();
     }
 
     return {