Keep a date picker's and an app bar's settings on their own component

materialDatepicker set its first day, format, min, max and year range in
init() without declaring them, and materialAppBar did the same with its
resize observer and scroll handler. Alpine writes an undeclared property to
the outermost x-data scope, so two pickers inside one page scope (ReStride's
plan setup wraps its form in x-data) shared the last one's min and first day,
and a second app bar would have taken the first one's observer. Both now
declare them; a browser test puts two pickers in an outer scope.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01RHoXZSHc8gGpZjFmA5fPc2

resources/js/app-bar.js

@@ -11,6 +11,10 @@ document.addEventListener('alpine:init', () => {
         collapsed: false,
         height: null,
         frame: null,
+        // Set in init(). Declared here, or Alpine writes them to the outermost x-data scope,
+        // where a second app bar in the same page scope would take the first one's observer.
+        schedule: null,
+        resizes: null,
 
         init() {
             this.measure = this.measure.bind(this)

resources/js/datepicker.js

@@ -178,6 +178,16 @@ document.addEventListener('alpine:init', () => {
         today: localToday(),
         compact: false,
         refocus: true,
+        // Set in init() from the config. Declared here, or Alpine writes them to the outermost
+        // x-data scope, where every picker inside the same page scope would share the last one's.
+        firstDay: 0,
+        format: null,
+        numbers: null,
+        formats: {},
+        min: null,
+        max: null,
+        yearsFrom: null,
+        yearsTo: null,
 
         init() {
             const locale = config.locale || document.documentElement.lang || 'en'