Saving my work beforeI rename the notes module to journals module. Finally.

src/routes/events/+layout.svelte

@@ -1,14 +1,35 @@
 <script lang="ts">
-/** @type {import('./$types').LayoutData} */
-export let data: any;
+
 
 // Imports
+// *** Import Svelte specific
 import { browser } from '$app/environment';
+// *** Import other supporting libraries
+import { AppShell, AppBar, initializeStores } from '@skeletonlabs/skeleton';
+import { Modal } from '@skeletonlabs/skeleton';
+import type {
+    ModalComponent
+    } from '@skeletonlabs/skeleton';
+
+const modalRegistry: Record<string, ModalComponent> = {
+	// Set a unique modal ID, then pass the component reference
+	// modalComponentEditSponsorshipObj: { ref: ModalComponentEditSponsorshipObj },
+	// modalComponentTwo: { ref: ModalComponentTwo },
+	// ...
+};
 
 import type { key_val } from '$lib/ae_stores';
 // import { ae_util } from '$lib/ae_utils/ae_utils';
 import { ae_loc, ae_sess, ae_api, slct } from '$lib/ae_stores';
+import Element_data_store from '$lib/element_data_store_v2.svelte';
 import { events_loc, events_sess, events_slct, events_trigger, events_trig_kv } from '$lib/ae_events_stores';
+    interface Props {
+        /** @type {import('./$types').LayoutData} */
+        data: any;
+        children?: import('svelte').Snippet;
+    }
+
+let { data, children }: Props = $props();
 // import { events_func } from '$lib/ae_events_functions';
 
 // import Element_data_store from '$lib/element_data_store_v2.svelte';
@@ -101,4 +122,89 @@ if (browser) {
 	<title>Presentation Management - {$events_loc.title ?? 'Æ loading...'}</title>
 </svelte:head>
 
-<slot></slot>
+
+<Modal components={modalRegistry}
+    regionBackdrop=''
+    regionBody=''
+    regionHeader='modal-header card-header text-2xl font-bold'
+    regionFooter='modal-footer flex justify-between space-x-2'
+    />
+
+<!-- App Shell -->
+<AppShell
+    regionPage={($ae_loc.iframe ? 'iframe' : '')}
+    slotHeader={($ae_loc.iframe ? 'iframe' : '')}
+    slotFooter={($ae_loc.iframe ? 'iframe' : '')}
+    >
+
+    {#snippet header()}
+
+            <!-- App Bar -->
+            <AppBar
+                gridColumns="grid-cols-3"
+                slotDefault="place-self-center"
+                slotTrail="place-content-end"
+                padding="px-4"
+                >
+                {#snippet lead()}
+
+                        <Element_data_store
+                            ds_code="hub__page__appshell_header_lead"
+                            ds_type="html"
+                            />
+
+
+                            {/snippet}
+                <!-- OSIT's Aether App -->
+                <!-- {@html (browser ? JSON.parse(localStorage.getItem('ae_ds__hub__site__appshell_header')).html : '-- not found --')} -->
+                <!-- {@html $ae_sess.site_appshell_header} -->
+                <Element_data_store
+                    ds_code="hub__site__appshell_header"
+                    ds_type="html"
+                    />
+                {#snippet trail()}
+
+                        <Element_data_store
+                            ds_code="hub__page__appshell_header_trail"
+                            ds_type="html"
+                            />
+
+                            {/snippet}
+            </AppBar>
+
+
+            {/snippet}
+
+
+    <!-- !($ae_loc.site_access_key && $ae_loc.site_domain_access_key)
+    || ($ae_loc.site_access_key == access_key || $ae_loc.site_domain_access_key == access_key)} -->
+
+
+        <!-- {$ae_loc?.site_access_key ?? '-- site access key not set --'} -->
+        <!-- {$ae_loc?.site_domain_access_key ?? '-- site domain access key not set --'} -->
+        <!-- {access_key ?? '-- param key not set --'} -->
+
+        <!-- Page Route Content -->
+        {@render children?.()}
+
+
+
+    {#snippet footer()}
+
+        <div
+            class="flex text-sm sm:text-sm md:text-md lg:text-md xl:text-md 2xl:text-lg text-slate-400 hover:text-slate-800 transition px-1"
+            class:ae_debug={$ae_loc.debug}
+            >
+
+            <Element_data_store
+                ds_code="hub__site__appshell_footer"
+                ds_type="html"
+                class_li="grow flex flex-row justify-between"
+                />
+
+        </div>
+
+    {/snippet}
+
+
+</AppShell>

src/routes/events/+page.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-export let data: any;
 // console.log(`ae_events_pres_mgmt +page data:`, data);
 // console.log(`ae_events_pres_mgmt Data Params:`, data.url.searchParams.get('event_id'));
 
@@ -10,19 +9,24 @@ import { db_events } from "$lib/ae_events/db_events";
 import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
 import { events_loc, events_slct, events_trigger } from '$lib/ae_events_stores';
 import { ae_util } from '$lib/ae_utils/ae_utils';
+    interface Props {
+        data: any;
+    }
+
+    let { data }: Props = $props();
 
 // import Element_data_store from '$lib/element_data_store_v2.svelte';
 
 let ae_acct = data[$slct.account_id];
 
-$: lq__event_obj_li = liveQuery(async () => {
+let lq__event_obj_li = $derived(liveQuery(async () => {
     let results = await db_events.events
     .where('account_id')
     .equals(ae_acct.slct.account_id)
     .reverse()
     .sortBy('start_datetime')
     return results;
-});
+}));
 
 
 onMount(() => {
@@ -88,8 +92,7 @@ onMount(() => {
                     new Date(event_obj.start_datetime ?? '').getTime())
                     >
                     (new Date().getTime() - (1000 * 60 * 60 * 24 * 30 * 8))
-                    || $ae_loc.trusted_access
-                    }
+                    || $ae_loc.trusted_access}
 
                     <!-- {#if $events_slct.event_id === event_obj.event_id_random} -->
                     <a