Challenge 2: Tracing the Settings Button Click — Possible Solution
====================================================================

TRACING THE CLICK
------------------------------
Per this capstone's own main.js, an event listener is attached to the
settings button using an async function. When the button is actually
clicked:

1. The async click handler runs.
2. `await import('./settings-panel.js')` executes — this is a DYNAMIC
   import, which triggers the browser (or, in production, the
   bundled app) to fetch settings-panel.js's own code AT THIS EXACT
   MOMENT, not before.
3. Once that fetch completes, the handler destructures
   openSettingsPanel out of the resulting module.
4. openSettingsPanel(apiUrl) is called, actually opening the panel.

WHICH CHAPTER'S CONCEPT THIS EXERCISES
------------------------------
This is build-tooling1-8's own CODE SPLITTING material. Per that
chapter, a dynamic import() is "the real signal telling a bundler
this is a valid split point" — it's what tells Vite/Rollup to package
settings-panel.js as its own separate chunk, rather than folding it
into the same file as everything else needed for the initial page.

THE REAL BENEFIT FOR THE FIRST PAGE LOAD
------------------------------
Per build-tooling1-8's own explanation, code splitting answers the
question "is this code needed RIGHT NOW?" — and for a user who loads
the dashboard page and never clicks the settings button at all, the
answer is no. Because settings-panel.js is split into its own chunk
rather than bundled into the main, always-loaded output, every user's
very first page load is smaller and faster — they never pay the cost
of downloading the settings panel's own code unless and until they
actually click the button that needs it. This is exactly the "don't
make a user download something they don't need yet" principle
build-tooling1-8 explicitly tied back to web-vitals1-6's own lazy-
loading material.

WHY THIS WORKS AS AN ANSWER
------------------------------
It traces the click handler's own execution step by step using this
capstone's actual code, correctly identifies the dynamic import as
build-tooling1-8's own code-splitting mechanism, and explains the
concrete first-load benefit (a smaller initial bundle for users who
never click the button) rather than a vague "it's more efficient."