fix: stabilize root layout reactivity and badge template form

- Fix infinite loops in '+layout.svelte' by using 'untrack' for store synchronization effects.
- Correctly define 'ae_acct' as a derived rune to resolve ReferenceErrors and ensure site styles hydrate properly.
- Modernize 'ae_comp__badge_template_form.svelte' with Svelte 5 Runes and callback props (onsuccess, onerror, oncancel).
- Fix illegal async  in badge form by moving logic to a dedicated load function untracked by the effect.
- Add Presentation Management Reports to TODO list for tracking.

TODO.md

@@ -50,6 +50,8 @@ This is a list of tasks to be completed before the next event/show/conference.
 
 
 
+- [ ] **Reports:** Investigate and fix Events Presentation Management Reports (currently not working).
+
 ## Recent Accomplishments (Jan 28, 2026)
 
 - [x] **Search Standard:** Completed the migration of IDAA, Journals, Badges, Sessions, and Exhibits to the high-performance reactive pattern.

src/routes/+layout.svelte

@@ -48,19 +48,14 @@
     // import { api } from '$lib/api';
     import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/stores/ae_stores';
     import { events_loc, events_slct } from '$lib/stores/ae_events_stores';
-    // import type { key_val } from '$lib/ae_stores';
+    import type { LayoutData } from './$types';
 
     import MyClipboard from '$lib/app_components/e_app_clipboard.svelte';
     import E_app_debug_menu from '$lib/app_components/e_app_debug_menu.svelte';
     import E_app_sys_menu from '$lib/app_components/e_app_sys_menu.svelte';
-    // import Element_access_type from '$lib/element_access_type.svelte';
-    // import Element_app_cfg from '$lib/element_app_cfg.svelte';
-    // import Element_sign_in_out from '$lib/element_sign_in_out.svelte';
-
-    // import Element_data_store from '$lib/element_data_store_v2.svelte';
 
     interface Props {
-        data: any;
+        data: LayoutData;
         children?: import('svelte').Snippet;
     }
 
@@ -70,51 +65,36 @@
         console.log(`ae_root +layout.svelte data:`, data);
     }
 
-    // Quickly save the data passed from the parent(s) to the Svelte stores, localStorage, and other. This should catch anything that is a child of this layout.svelte file.
+    // Define ae_acct as a derived rune so it's reactive and available globally in the component
-    $slct.account_id = data.account_id;
+    let ae_acct = $derived(data.account_id ? (data as any)[data.account_id] : null);
-    if (log_lvl) {
-        console.log(`*ae_root +layout.svelte* $slct.account_id = ${$slct.account_id}`);
-    }
-    let ae_acct = data[$slct.account_id];
 
-    if (ae_acct) {
+    // Use an effect to sync data to stores whenever it changes
-        $ae_api = {
+    import { untrack } from 'svelte';
-            ...$ae_api,
+    $effect(() => {
-            ...(ae_acct.api || {})
+        const account_id = data.account_id;
-        };
+        const acct_data = ae_acct;
-        if (log_lvl > 1) {
-            console.log(`$ae_api = `, $ae_api);
-        }
 
-        // FORCE UPDATE: If the incoming data is a valid site (not a fallback ghost), 
+        if (account_id) {
-        // we must ensure the ae_loc store is updated regardless of what's in localStorage.
+            untrack(() => {
-        if (ae_acct.loc?.account_id && ae_acct.loc.account_id !== 'ghost') {
+                if ($slct.account_id !== account_id) {
-            $ae_loc = {
+                    $slct.account_id = account_id;
-                ...$ae_loc,
+                }
-                ...(ae_acct.loc || {})
+                
-            };
+                if (acct_data) {
-        } else {
+                    // Merging stores with untracked reads to prevent loops
-            // If it IS a ghost, we still update it to show the correct fallback message
+                    if (acct_data.api) {
-            $ae_loc = {
+                        $ae_api = { ...untrack(() => $ae_api), ...acct_data.api };
-                ...$ae_loc,
+                    }
-                ...(ae_acct.loc || {})
+                    if (acct_data.loc) {
-            };
+                        $ae_loc = { ...untrack(() => $ae_loc), ...acct_data.loc };
+                    }
+                    if (acct_data.slct) {
+                        $slct = { ...untrack(() => $slct), ...acct_data.slct };
+                    }
+                }
+            });
         }
-        
+    });
-        if (log_lvl > 1) {
-            console.log(`$ae_loc = `, $ae_loc);
-        }
-
-        $slct = {
-            ...$slct,
-            ...(ae_acct.slct || {})
-        };
-        if (log_lvl > 1) {
-            console.log(`$slct = `, $slct);
-        }
-    } else {
-        console.warn('ae_root +layout.svelte: ae_acct not found for account_id:', $slct.account_id);
-    }
 
     let flag_clear_idb: boolean = $state(false);
     let flag_clear_local: boolean = $state(false);
@@ -709,13 +689,16 @@
 
     // Sync JWT from local storage to API config for V3 endpoints
     $effect(() => {
-        if ($ae_api.jwt !== $ae_loc.jwt) {
+        const loc_jwt = $ae_loc.jwt;
-            if (log_lvl) console.log('ROOT: Syncing JWT to API config');
+        untrack(() => {
-            $ae_api = {
+            if ($ae_api.jwt !== loc_jwt) {
-                ...$ae_api,
+                if (log_lvl) console.log('ROOT: Syncing JWT to API config');
-                jwt: $ae_loc.jwt
+                $ae_api = {
-            };
+                    ...$ae_api,
-        }
+                    jwt: loc_jwt
+                };
+            }
+        });
     });
 
     let is_hydrating = $state(true);
@@ -980,7 +963,7 @@
                 title="Reload and clear the page cache"
                 onclick={() => {
                     clear_idb();
-                    window.location.reload(true);
+                    window.location.reload();
                 }}
             >
                 <!-- <span class="fas fa-sync mx-1"></span> -->

src/routes/events/[event_id]/(badges)/templates/ae_comp__badge_template_form.svelte

@@ -1,79 +1,92 @@
 <script lang="ts">
-    import { createEventDispatcher } from 'svelte';
     import type { key_val } from '$lib/stores/ae_stores';
     import { events_func } from '$lib/ae_events_functions';
     import { ae_api } from '$lib/stores/ae_stores';
+    import { untrack } from 'svelte';
 
     interface Props {
         event_id: string;
         template_id?: string | null; // Null for creation, string for editing
+        onsuccess?: (result: any) => void;
+        onerror?: (error: any) => void;
+        oncancel?: () => void;
     }
 
-    let { event_id, template_id = null }: Props = $props();
+    let { 
+        event_id, 
+        template_id = null,
+        onsuccess,
+        onerror,
+        oncancel
+    }: Props = $props();
 
-    function preventDefault<T extends Event>(fn: (event: T) => void) {
+    function preventDefault(fn: () => void) {
-        return function (event: T) {
+        return function (event: Event) {
             event.preventDefault();
-            fn(event);
+            fn();
         };
     }
 
-    const dispatch = createEventDispatcher();
+    // Form fields (Runes)
+    let name = $state('');
+    let header_path = $state('');
+    let logo_path = $state('');
+    let header_row_1 = $state('');
+    let header_row_2 = $state('');
+    let secondary_header_path = $state('');
+    let footer_text = $state('');
+    let show_qr_front = $state(true);
+    let show_qr_back = $state(true);
+    let wireless_ssid = $state('');
+    let wireless_password = $state('');
+    let ticket_1_text = $state('');
+    let ticket_2_text = $state('');
+    let ticket_3_text = $state('');
 
-    // Form fields
+    let submit_status = $state('idle'); // idle, loading, success, error
-    let name: string = '';
-    let header_path: string = '';
-    let logo_path: string = '';
-    let header_row_1: string = '';
-    let header_row_2: string = '';
-    let secondary_header_path: string = '';
-    let footer_text: string = '';
-    let show_qr_front: boolean = true;
-    let show_qr_back: boolean = true;
-    let wireless_ssid: string = '';
-    let wireless_password: string = '';
-    let ticket_1_text: string = '';
-    let ticket_2_text: string = '';
-    let ticket_3_text: string = '';
-
-    let submit_status: string = 'idle'; // idle, loading, success, error
 
     // Load template data if in edit mode
-    $effect(async () => {
+    $effect(() => {
         if (template_id) {
-            submit_status = 'loading';
+            untrack(() => {
-            try {
+                load_template(template_id);
-                const template_obj = await events_func.load_ae_obj_id__event_badge_template({
+            });
-                    api_cfg: $ae_api,
-                    event_badge_template_id: template_id
-                });
-                if (template_obj) {
-                    name = template_obj.name || '';
-                    header_path = template_obj.header_path || '';
-                    logo_path = template_obj.logo_path || '';
-                    header_row_1 = template_obj.header_row_1 || '';
-                    header_row_2 = template_obj.header_row_2 || '';
-                    secondary_header_path = template_obj.secondary_header_path || '';
-                    footer_text = template_obj.footer_text || '';
-                    show_qr_front = template_obj.show_qr_front ?? true;
-                    show_qr_back = template_obj.show_qr_back ?? true;
-                    wireless_ssid = template_obj.wireless_ssid || '';
-                    wireless_password = template_obj.wireless_password || '';
-                    ticket_1_text = template_obj.ticket_1_text || '';
-                    ticket_2_text = template_obj.ticket_2_text || '';
-                    ticket_3_text = template_obj.ticket_3_text || '';
-                    submit_status = 'idle';
-                } else {
-                    submit_status = 'error';
-                    console.error('Template not found for editing.');
-                }
-            } catch (error) {
-                submit_status = 'error';
-                console.error('Error loading template for editing:', error);
-            }
         }
     });
 
+    async function load_template(id: string) {
+        submit_status = 'loading';
+        try {
+            const template_obj = await events_func.load_ae_obj_id__event_badge_template({
+                api_cfg: $ae_api,
+                event_badge_template_id: id
+            });
+            if (template_obj) {
+                name = template_obj.name || '';
+                header_path = template_obj.header_path || '';
+                logo_path = template_obj.logo_path || '';
+                header_row_1 = template_obj.header_row_1 || '';
+                header_row_2 = template_obj.header_row_2 || '';
+                secondary_header_path = template_obj.secondary_header_path || '';
+                footer_text = template_obj.footer_text || '';
+                show_qr_front = template_obj.show_qr_front ?? true;
+                show_qr_back = template_obj.show_qr_back ?? true;
+                wireless_ssid = template_obj.wireless_ssid || '';
+                wireless_password = template_obj.wireless_password || '';
+                ticket_1_text = template_obj.ticket_1_text || '';
+                ticket_2_text = template_obj.ticket_2_text || '';
+                ticket_3_text = template_obj.ticket_3_text || '';
+                submit_status = 'idle';
+            } else {
+                submit_status = 'error';
+                console.error('Template not found for editing.');
+            }
+        } catch (error) {
+            submit_status = 'error';
+            console.error('Error loading template for editing:', error);
+        }
+    }
+
     async function handle_submit() {
         submit_status = 'loading';
         const data_to_save: key_val = {
@@ -111,24 +124,24 @@
 
             if (result) {
                 submit_status = 'success';
-                dispatch('success', result);
+                if (onsuccess) onsuccess(result);
             } else {
                 submit_status = 'error';
-                dispatch('error', 'Failed to save template');
+                if (onerror) onerror('Failed to save template');
             }
         } catch (error) {
             submit_status = 'error';
             console.error('Error saving template:', error);
-            dispatch('error', error);
+            if (onerror) onerror(error);
         }
     }
 
     function handle_cancel() {
-        dispatch('cancel');
+        if (oncancel) oncancel();
     }
 </script>
 
-<form onsubmit={preventDefault(() => {handle_submit})} class="p-4 space-y-4">
+<form onsubmit={preventDefault(handle_submit)} class="p-4 space-y-4">
     <h3 class="h3">{template_id ? 'Edit' : 'Create New'} Badge Template</h3>
 
     <label class="label">