diff --git a/src/lib/ae_stores.ts b/src/lib/ae_stores.ts
index 4040dbb9..1b9a9bb1 100644
--- a/src/lib/ae_stores.ts
+++ b/src/lib/ae_stores.ts
@@ -66,9 +66,10 @@ const ae_app_local_data_defaults: key_val = {
     iframe: false,
     title: `OSIT's Æ`, // - Dev SvelteKit`, // Æ
 
-    debug: false, // A simple flag to know if we should show debug information.
-    edit_mode: false, // A simple flag to know if we should show edit mode options.
-    sync_local_config: true, // A simple flag to know if we should sync local config with the remote API server.
+    debug_menu: false, // Flag show debug menu.
+    debug_mode: false, // Flag to know if we should be in debug mode and show show debug options.
+    edit_mode: false, // Flag to know if we should be in edit mode and show edit options.
+    sync_local_config: true, // Flag to know if we should sync local config with the remote API server.
 
     'account_id': ae_account_id, // OSIT Demo _XY7DXtc9MY
     'account_code': 'not_set',
diff --git a/src/lib/element_access_type.svelte b/src/lib/e_app_access_type.svelte
similarity index 100%
rename from src/lib/element_access_type.svelte
rename to src/lib/e_app_access_type.svelte
diff --git a/src/lib/element_app_cfg.svelte b/src/lib/e_app_cfg.svelte
similarity index 99%
rename from src/lib/element_app_cfg.svelte
rename to src/lib/e_app_cfg.svelte
index 05fe32aa..3a450666 100644
--- a/src/lib/element_app_cfg.svelte
+++ b/src/lib/e_app_cfg.svelte
@@ -5,7 +5,7 @@ import { RadioGroup, RadioItem } from '@skeletonlabs/skeleton';
 import { ae_util } from '$lib/ae_utils/ae_utils';
 import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
 
-import Element_theme from '$lib/element_theme.svelte';
+import Element_theme from '$lib/e_app_theme.svelte';
 
 let notes: null|string = null;
 let all: boolean = false;
diff --git a/src/lib/e_app_debug_menu.svelte b/src/lib/e_app_debug_menu.svelte
new file mode 100644
index 00000000..2b5e0ea2
--- /dev/null
+++ b/src/lib/e_app_debug_menu.svelte
@@ -0,0 +1,247 @@
+<script lang="ts">
+// *** Import Svelte specific
+
+// *** Import other supporting libraries
+import {
+    Bug,
+    CircleX,
+    ToggleLeft, ToggleRight,
+    X
+    } from '@lucide/svelte';
+
+
+// *** Import Aether specific variables and functions
+// import { ae_util } from '$lib/ae_utils/ae_utils';
+import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
+
+
+// *** Setup Svelte properties
+interface Props {
+    log_lvl?: number;
+    show_debug_menu: boolean;
+    hidden: null|boolean;
+}
+
+let {
+    log_lvl = 0,
+    show_debug_menu = false,
+    hidden = true,
+    }: Props = $props();
+
+
+</script>
+
+
+<!-- App Debug Menu -->
+<!-- opacity-25
+hover:opacity-100 -->
+<!-- text-slate-400 hover:text-slate-800 -->
+<div
+    class="
+        absolute bottom-0 left-0
+        flex
+        text-sm sm:text-sm md:text-md lg:text-md xl:text-md 2xl:text-lg
+
+        dark:text-slate-400 dark:hover:text-slate-200
+        bg-red-100/60 dark:bg-red-800/50
+        hover:bg-red-200 hover:dark:bg-red-900
+
+        mx-1 my-2
+        max-h-min
+        max-w-lg
+        transition-all
+        transition-delay-1000
+        transition-duration-1000
+        ease-in
+        z-50
+
+        border-2
+        border-red-300 dark:border-red-700
+        hover:border-red-500 hover:dark:border-red-500
+        "
+    class:top-0={$ae_loc?.debug_menu}
+    class:w-full={$ae_loc?.debug_menu}
+    class:hidden={!$ae_loc?.trusted_access}
+    class:border-transparent={!$ae_loc?.debug_menu}
+    class:hover:border-transparent={!$ae_loc?.debug_menu}
+    class:hover:bg-transparent={!$ae_loc?.debug_menu}
+    >
+
+    <div
+        class:hidden={!$ae_loc?.debug_menu}
+        class:border-red-200={$ae_loc?.debug_menu}
+        class:dark:border-red-800={$ae_loc?.debug_menu}
+        class="
+
+            transition-all
+            transition-delay-1000
+            transition-duration-1000
+            ease-in
+            overflow-y-auto
+            px-1 py-4
+            opacity-50
+            hover:opacity-100
+            relative
+            "
+        >
+
+        <!-- flex flex-col items-center justify-center max-h-full outline -->
+        <div>
+            <!-- <span class="fas fa-bug mx-1"></span> -->
+            <Bug class="inline-block mx-1" />
+            <span>Debug</span>
+        </div>
+
+        <pre>
+            {JSON.stringify($ae_loc, null, 2)}
+        </pre>
+
+    </div>
+
+    <span class="absolute top-0 right-0 flex flex-row gap-1 items-center justify-center">
+        <button
+            type="button"
+            onclick={() => {
+                console.log('Debug ae_loc:', $ae_loc);
+                $ae_loc.debug_mode = !$ae_loc?.debug_mode;
+            }}
+            class="
+                btn btn-sm variant-ghost-surface hover:variant-ghost-warning
+                transition-all *:hover:inline-block
+
+
+                "
+            title="Turn debug content and styles off and on"
+            >
+            {#if $ae_loc?.debug_mode}
+                <!-- <span class="fas fa-toggle-on mx-1"></span> -->
+                <ToggleRight strokeWidth="2.5" color="green" class="inline-block mx-1" />
+                <span>Debug</span>
+                <span class="hidden">
+                    Mode On
+                </span>
+            {:else}
+                <!-- <span class="fas fa-toggle-off mx-1"></span> -->
+                <ToggleLeft strokeWidth="1" color="gray" class="inline-block mx-1" />
+                <span>Debug?</span>
+                <span class="hidden">
+                    Mode Off
+                </span>
+            {/if}
+            <!-- <span class="fas fa-toggle-on mx-1"></span> -->
+            <!-- <ToggleRight class="inline-block mx-1" /> -->
+            <!-- <X class="inline-block mx-1" /> -->
+
+        </button>
+
+        <button
+            type="button"
+            onclick={() => {
+                console.log('Debug ae_loc:', $ae_loc);
+                $ae_loc.debug_menu = !$ae_loc?.debug_menu;
+            }}
+            class="
+                btn btn-sm variant-ghost-surface hover:variant-ghost-warning
+                transition-all *:hover:inline-block
+                "
+            title="Turn debug content and styles off and on"
+            >
+            <!-- <span class="fas fa-toggle-on mx-1"></span> -->
+            <!-- <ToggleRight class="inline-block mx-1" /> -->
+            <CircleX class="inline-block mx-1" />
+            <span class="hidden">
+                Close
+            </span>
+            <span>Debug</span>
+
+        </button>
+    </span>
+
+    <button
+        type="button"
+        onclick={() => {
+            console.log('Debug ae_loc:', $ae_loc);
+            $ae_loc.debug_menu = !$ae_loc?.debug_menu;
+        }}
+        id="AE-Quick-Debug"
+        class="
+            btn btn-icon
+            variant-ghost-surface
+            hover:variant-ghost-warning
+            transition-all
+            fixed bottom-2 left-2
+            text-gray-400 hover:text-gray-800
+            "
+        title="Turn debug content and styles off and on"
+        >
+        <!-- absolute bottom-2 left-2 -->
+        <!-- fixed bottom-0 left-0 -->
+        &pi;
+    </button>
+</div>
+
+
+<style lang="postcss">
+/* BEGIN: AE's Svelte Quick Debug component  */
+#AE-Quick-Debug {
+    /* position: absolute; */
+    /* position: fixed; */
+    /* position: relative; */
+    /* position: static; */
+    /* position: sticky; */
+    /* top: 1em; */
+    /* bottom: 2rem; */
+    /* left: 1rem; */
+
+    /* padding: .0rem; */
+
+    /* lightyellow */
+    /* background-color: hsla(60,100%,90%,.30);  */
+    /* background-color: rgba(var(--color-surface-500) / .5); */
+
+    /* border: none;
+
+    border-top: solid thin hsla(0,0%,0%,.25);
+    border-left: solid thin hsla(0,0%,0%,.25);
+    border-bottom: solid thin hsla(0,0%,0%,.25); */
+    /* border-top-left-radius: .5em; */
+    /* border-bottom-left-radius: .5em; */
+
+    /* opacity: .15; */
+    /* opacity: 1; */
+
+    font-size: .75rem;
+
+    /* z-index: 15; */
+
+    /* NOTE: transition when no longer hovering */
+    transition-property: opacity, background-color;
+    transition-delay: 1.25s;
+    transition-duration: .5s;
+    transition-timing-function: ease-out;
+}
+
+#AE-Quick-Debug:hover {
+    /* lightyellow */
+    /* background-color: hsla(60,100%,90%,.95); */
+    /* background-color: rgba(var(--color-surface-500) / 1); */
+/*
+    border-top: solid thin hsla(0,0%,0%,.95);
+    border-left: solid thin hsla(0,0%,0%,.95);
+    border-bottom: solid thin hsla(0,0%,0%,.95); */
+
+    /* opacity: 1; */
+
+    /* padding: .5rem; */
+
+    font-size: 1.5rem;
+    /* Need to zoom 3.5 when hovering */
+    /* transform: scale(3.5); */
+
+    /* NOTE: transition when hover starts */
+    transition-property: opacity, background-color;
+    transition-delay: .5s;
+    transition-duration: .10s;
+    transition-timing-function: ease-in;
+}
+</style>
diff --git a/src/lib/element_sign_in_out.svelte b/src/lib/e_app_sign_in_out.svelte
similarity index 100%
rename from src/lib/element_sign_in_out.svelte
rename to src/lib/e_app_sign_in_out.svelte
diff --git a/src/lib/e_app_sys_menu.svelte b/src/lib/e_app_sys_menu.svelte
new file mode 100644
index 00000000..fd857bb6
--- /dev/null
+++ b/src/lib/e_app_sys_menu.svelte
@@ -0,0 +1,380 @@
+<script lang="ts">
+// *** Import Svelte specific
+import { tick } from 'svelte';
+// import { goto, invalidateAll } from '$app/navigation';
+
+// *** Import other supporting libraries
+import {
+    // ArrowBigRight,
+    // Bug,
+    CircleX,
+    // Eye, EyeOff,
+    // Key,
+    // LogIn, LogOut, LockKeyhole,
+    // Mail, MailCheck,
+    Menu,
+    // RefreshCw, RefreshCcwDot,
+    ShieldEllipsis, ShieldMinus, ShieldPlus, ShieldUser,
+    // ToggleLeft, ToggleRight,
+    User, UserCheck,
+    X
+    } from '@lucide/svelte';
+
+// *** Import Aether specific variables and functions
+// import { ae_util } from '$lib/ae_utils/ae_utils';
+import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
+
+import Element_access_type from '$lib/e_app_access_type.svelte';
+import Element_app_cfg from '$lib/e_app_cfg.svelte';
+import Element_sign_in_out from '$lib/e_app_sign_in_out.svelte';
+
+// *** Setup Svelte properties
+interface Props {
+    log_lvl?: number;
+    data: any;
+    show_sys_menu: boolean;
+    hidden: null|boolean;
+}
+
+let {
+    log_lvl = 0,
+    data = null,
+    show_sys_menu = false,
+    hidden = true,
+    }: Props = $props();
+
+let trigger_clear_access: null|boolean = $state(null);
+</script>
+
+
+<!-- App System Menu -->
+ <!-- min-h-full
+max-h-max
+min-w-full
+max-w-max -->
+<section
+    class="
+        ae_app__menu
+        hidden-print
+        flex flex-col
+        items-end justify-center
+        gap-1
+        absolute right-0 bottom-16
+        hover:bottom-6
+        bg-white dark:bg-gray-800
+        border border-transparent
+        hover:border hover:border-gray-200 hover:dark:border-gray-700
+        rounded-lg
+        p-2
+        *:hover:inline
+        opacity-40
+        hover:opacity-100
+        duration-50 delay-1000 hover:delay-100 hover:ease-out
+        transition hover:transition-all
+        z-10 hover:z-20
+    "
+    class:hidden={!$ae_loc?.app_cfg?.show_element__menu_btn}
+    >
+
+    <span class="hidden"
+        title="
+        Name: {$ae_loc?.person?.full_name ?? '-- not set --'}
+        Username: {$ae_loc?.user?.username ?? '-- not set --'}
+        Email: {$ae_loc?.user?.email ?? '-- not set --'}
+        "
+        >
+        <User class="mx-1 inline-block text-gray-500" />
+        {$ae_loc?.person?.full_name ?? '-- not set --'}<br />
+        <!-- <ShieldUser /> -->
+        <ShieldUser class="mx-1 inline-block text-gray-500" />
+        {$ae_loc?.user?.username ?? '-- not set --'}<br />
+    </span>
+
+    {#if $ae_loc.edit_mode}
+        <button
+            type="button"
+            onclick={() => {
+                $ae_loc.edit_mode = false;
+                // dispatch_edit_mode_changed();
+            }}
+            class="btn btn-md px-2 variant-ghost-success hover:variant-filled-success transition-all *:hover:inline-block"
+            title="Edit mode is currently enabled. Click to disable."
+            >
+            <span class="fas fa-toggle-on mx-1"></span>
+            Edit
+            <span class="hidden">
+                Mode On
+            </span>
+        </button>
+    {:else if $ae_loc.authenticated_access}
+        <button
+            type="button"
+            onclick={() => {
+                $ae_loc.edit_mode = true;
+                // dispatch_edit_mode_changed();
+            }}
+            class="btn btn-md px-2 variant-ghost-warning hover:variant-filled-warning transition-all space-x-0 *:hover:inline"
+            title="Edit mode is currently disabled. Click to enable."
+            >
+            <span class="fas fa-toggle-off mx-1"></span>
+            <span class="">Edit</span>
+            <span class="hidden">
+                Mode?
+            </span>
+        </button>
+    {/if}
+
+    <div class="flex flex-row flex-wrap gap-1 items-center justify-center transition-all *:hover:inline">
+        {#if $ae_loc.access_type && $ae_loc.access_type != 'anonymous'}
+            <span
+                class="*:hover:inline"
+                title={`Current access type/level: ${$ae_loc.access_type}`}
+                >
+                <!-- <span class="fas fa-unlock mx-1"></span> -->
+                <ShieldPlus class="inline-block" />
+
+
+                {#if $ae_loc.access_type == 'super'}
+                    <span class="fas fa-hat-wizard m-1"></span>
+                    <span class="hidden">Super</span>
+                {:else if $ae_loc.access_type == 'manager'}
+                    <span class="fas fa-user-shield m-1"></span>
+                    <span class="hidden">Manager</span>
+                {:else if $ae_loc.access_type == 'administrator'}
+                    <span class="fas fa-user-ninja m-1"></span>
+                    <span class="hidden">Administrator</span>
+                {:else if $ae_loc.access_type == 'trusted'}
+                    <span class="fas fa-user-check m-1"></span>
+                    <span class="hidden">Trusted Access</span>
+                {:else if $ae_loc.access_type == 'public'}
+                    Public
+                    <span class="hidden">Access</span>
+                {:else if $ae_loc.access_type == 'authenticated'}
+                    Authenticated
+                    <span class="hidden">Access</span>
+                {:else if $ae_loc.access_type == 'anonymous'}
+                    Anonymous Access
+                {:else}
+                    Unknown Access
+                {/if}
+            </span>
+
+            {#if $ae_loc?.user_access_type && $ae_loc?.access_type == $ae_loc?.user_access_type}
+                <button
+                    type="button"
+                    onclick={() => {
+                        // handle_clear_access();
+                        // trigger_clear_access = true;
+                        // $ae_loc.app_cfg.show_element__passcode_input = !$ae_loc.app_cfg.show_element__passcode_input;
+
+                        if ($ae_loc?.app_cfg?.show_element__menu_btn) {
+                            $ae_loc.app_cfg.show_element__menu = true;
+                            $ae_loc.app_cfg.show_element__menu_btn = false;
+                            $ae_loc.app_cfg.show_element__access_type = true;
+                            $ae_loc.app_cfg.show_element__passcode_input = true;
+                        } else {
+                            $ae_loc.app_cfg.show_element__menu = false;
+                            $ae_loc.app_cfg.show_element__menu_btn = true;
+                        }
+                    }}
+                    class="btn btn-sm variant-outline-surface hover:variant-ghost-warning transition-all *:hover:inline"
+                    title={`Current user access level: "${$ae_loc.user_access_type}". Click use passcode for a different access level.`}
+                    >
+                    <!-- <span class="fas fa-lock mx-1"></span> -->
+                    <!-- <ShieldMinus /> -->
+                    <ShieldEllipsis class="inline-block" />
+                    <span class="hidden">Passcode?</span>
+
+                </button>
+            {:else}
+                <button
+                    type="button"
+                    onclick={() => {
+                        trigger_clear_access = true;
+
+                        if ($ae_loc?.app_cfg?.show_element__menu_btn) {
+                            $ae_loc.app_cfg.show_element__menu = true;
+                            $ae_loc.app_cfg.show_element__menu_btn = false;
+                            $ae_loc.app_cfg.show_element__access_type = true;
+                            $ae_loc.app_cfg.show_element__passcode_input = true;
+
+                            // await tick();
+                            // console.log('Layout button click: Focus on passcode input!');
+                            // /** @type {HTMLElement | null} */
+                            // const to_focus = document.getElementById('access_passcode_input');
+                            // to_focus?.focus();
+                        } else {
+                            $ae_loc.app_cfg.show_element__menu = false;
+                            $ae_loc.app_cfg.show_element__menu_btn = true;
+                        }
+                    }}
+                    class="btn btn-sm variant-outline-surface hover:variant-ghost-warning transition-all hidden"
+                    title={`Current access level: "${$ae_loc.access_type}". Click to clear the temporary access level.`}
+                    >
+                    <!-- <span class="fas fa-lock mx-1"></span> Lock? -->
+                    <ShieldMinus class="inline-block" />
+                    Clear?
+                </button>
+            {/if}
+        {:else}
+            <button
+                    type="button"
+                    onclick={async () => {
+                        if ($ae_loc?.app_cfg?.show_element__menu_btn) {
+                            $ae_loc.app_cfg.show_element__menu = true;
+                            $ae_loc.app_cfg.show_element__menu_btn = false;
+                            $ae_loc.app_cfg.show_element__access_type = true;
+                            $ae_loc.app_cfg.show_element__passcode_input = true;
+                            await tick();
+                            console.log('Layout button click: Focus on passcode input!');
+                            /** @type {HTMLElement | null} */
+                            const to_focus = document.getElementById('access_passcode_input');
+                            to_focus?.focus();
+                        } else {
+                            $ae_loc.app_cfg.show_element__menu = false;
+                            $ae_loc.app_cfg.show_element__menu_btn = true;
+                        }
+                        // $ae_loc.app_cfg.show_element__menu_btn = !$ae_loc?.app_cfg?.show_element__menu_btn;
+                    }}
+                    class="
+                        btn btn-sm variant-outline-surface hover:variant-ghost-success transition-all
+                        *:hover:inline
+                        "
+                    title="Anonymous public access is currently set. You must Sign In or use a passcode to change your access level."
+                    >
+                <!-- <span class="fas fa-lock mx-1 lock_icon"></span> -->
+                <!-- <span class="">Unlock?</span> -->
+                <ShieldUser class="inline-block" />
+                <span class="hidden">Auth?</span>
+            </button>
+        {/if}
+    </div>
+
+
+    <button
+        type="button"
+        class="btn btn-sm variant-outline-surface hover:variant-ghost-success *:hover:inline-block w-full hidden px-6 py-1"
+        title="Sign In"
+        onclick={async () => {
+            if ($ae_loc?.app_cfg?.show_element__menu_btn) {
+                $ae_loc.app_cfg.show_element__menu = true;
+                $ae_loc.app_cfg.show_element__menu_btn = false;
+                $ae_loc.app_cfg.show_element__access_type = true;
+
+                if ($ae_loc?.access_type == 'anonymous') {
+                    $ae_loc.app_cfg.show_element__passcode_input = true;
+                } else {
+                    $ae_loc.app_cfg.show_element__passcode_input = false;
+                }
+                // $ae_loc.app_cfg.show_element__passcode_input = true;
+                await tick();
+                console.log('Layout button click: Focus on passcode input!');
+                /** @type {HTMLElement | null} */
+                const to_focus = document.getElementById('access_passcode_input');
+                to_focus?.focus();
+            } else {
+                $ae_loc.app_cfg.show_element__menu = false;
+                $ae_loc.app_cfg.show_element__menu_btn = true;
+                $ae_loc.app_cfg.show_element__passcode_input = false;
+            }
+            // $ae_loc.app_cfg.show_element__menu_btn = !$ae_loc?.app_cfg?.show_element__menu_btn;
+        }}
+        >
+        {#if $ae_loc?.app_cfg?.show_element__menu}
+            <CircleX class="inline-block" />
+            <!-- <span class="hidden"> -->
+                Hide Menu
+            <!-- </span> -->
+        {:else}
+            <Menu class="inline-block" />
+            <span class="hidden">
+                Menu
+            </span>
+        {/if}
+    </button>
+
+
+</section>
+
+<!-- Show menu on right side of page -->
+<!-- min-h-96 -->
+<section
+    class="
+        ae_app__menu
+        hidden-print
+        flex flex-col
+        items-center
+        justify-end
+        gap-4
+
+        min-w-48
+        absolute right-0 bottom-10
+        bg-white dark:bg-gray-800
+        border border-gray-200 dark:border-gray-700
+        rounded-lg
+        p-2
+        opacity-50
+        hover:opacity-100
+        duration-100 delay-1000 hover:delay-100 hover:ease-out
+        transition hover:transition-all
+        z-20 hover:z-30
+    "
+    class:hidden={!$ae_loc?.app_cfg?.show_element__menu}
+    >
+
+    <!-- {#if $ae_loc?.app_cfg?.show_element__cfg} -->
+    <span
+        class:hidden={!$ae_loc?.app_cfg?.show_element__cfg || !$ae_loc.edit_mode}
+        >
+    <Element_app_cfg
+        set_theme_mode={true}
+        set_theme_name={true}
+        />
+    </span>
+    <!-- {/if} -->
+
+    {#if $ae_loc?.app_cfg?.show_element__sign_in_out}
+    <Element_sign_in_out
+        data={data}
+        hidden={$ae_loc.iframe || !$ae_loc.app_cfg?.show_element__sign_in_out}
+        />
+    {/if}
+
+    {#if $ae_loc?.app_cfg?.show_element__access_type}
+    <Element_access_type
+        show_passcode_input={$ae_loc?.app_cfg?.show_element__passcode_input}
+        trigger_clear_access={trigger_clear_access}
+        hidden={$ae_loc?.iframe && !$ae_loc?.trusted_access && !$ae_loc?.app_cfg?.show_element__menu}
+        />
+    {/if}
+
+    <button
+        type="button"
+        class="btn btn-sm variant-outline-surface hover:variant-ghost-warning *:hover:inline w-full px-6 py-1"
+        title="Sign In"
+        onclick={() => {
+            if ($ae_loc?.app_cfg?.show_element__menu_btn) {
+                    $ae_loc.app_cfg.show_element__menu = true;
+                    $ae_loc.app_cfg.show_element__menu_btn = false;
+                } else {
+                    $ae_loc.app_cfg.show_element__menu = false;
+                    $ae_loc.app_cfg.show_element__menu_btn = true;
+                }
+            // $ae_loc.app_cfg.show_element__menu_btn = !$ae_loc?.app_cfg?.show_element__menu_btn;
+            // $ae_loc.app_cfg.show_element__menu = !$ae_loc?.app_cfg?.show_element__menu;
+        }}
+        >
+        {#if $ae_loc?.app_cfg?.show_element__menu}
+            <CircleX class="mx-1 inline-block" />
+            <!-- <span class="hidden"> -->
+                Hide Menu
+            <!-- </span> -->
+        {:else}
+            <Menu class="mx-1 inline-block" />
+            <!-- <span class="hidden"> -->
+                Menu
+            <!-- </span> -->
+        {/if}
+    </button>
+
+</section>
diff --git a/src/lib/element_theme.svelte b/src/lib/e_app_theme.svelte
similarity index 100%
rename from src/lib/element_theme.svelte
rename to src/lib/e_app_theme.svelte
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 81395ced..44ee7b26 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -5,7 +5,7 @@
 let log_lvl: number = 0;
 
 // *** Import Svelte specific
-import { tick } from 'svelte';
+// import { tick } from 'svelte';
 import { goto, invalidateAll } from '$app/navigation';
 
 import '../app.postcss';
@@ -27,15 +27,15 @@ const modalRegistry: Record<string, ModalComponent> = {
 };
 import {
     ArrowBigRight,
-    CircleX,
-    Eye, EyeOff,
-    Key,
-    LogIn, LogOut, LockKeyhole,
-    Mail, MailCheck,
-    Menu,
+    // CircleX,
+    // Eye, EyeOff,
+    // Key,
+    // LogIn, LogOut, LockKeyhole,
+    // Mail, MailCheck,
+    // Menu,
     RefreshCw, RefreshCcwDot,
-    ShieldEllipsis, ShieldMinus, ShieldPlus, ShieldUser,
-    User, UserCheck
+    // ShieldEllipsis, ShieldMinus, ShieldPlus, ShieldUser,
+    // User, UserCheck
     } from '@lucide/svelte';
 
 // Highlight JS
@@ -62,9 +62,11 @@ import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
 import { events_loc, events_slct } from '$lib/ae_events_stores';
 // import type { key_val } from '$lib/ae_stores';
 
-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 E_app_debug_menu from '$lib/e_app_debug_menu.svelte';
+import E_app_sys_menu from '$lib/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';
 
@@ -914,512 +916,14 @@ $effect(() => {
 
 {/if}
 
-<!-- min-h-full
-max-h-max
-min-w-full
-max-w-max -->
-
 {#if (browser) }
-<!-- Toggle the menu -->
-<section
-    class="
-        ae_app__menu
-        hidden-print
-        flex flex-col
-        items-end justify-center
-        gap-1
-        absolute right-0 bottom-16
-        hover:bottom-6
-        bg-white dark:bg-gray-800
-        border border-transparent
-        hover:border hover:border-gray-200 hover:dark:border-gray-700
-        rounded-lg
-        p-2
-        *:hover:inline
-        opacity-40
-        hover:opacity-100
-        duration-50 delay-1000 hover:delay-100 hover:ease-out
-        transition hover:transition-all
-        z-10 hover:z-20
-    "
-    class:hidden={!$ae_loc?.app_cfg?.show_element__menu_btn}
-    >
-
-    <span class="hidden"
-        title="
-        Name: {$ae_loc?.person?.full_name ?? '-- not set --'}
-        Username: {$ae_loc?.user?.username ?? '-- not set --'}
-        Email: {$ae_loc?.user?.email ?? '-- not set --'}
-        "
-        >
-        <User class="mx-1 inline-block text-gray-500" />
-        {$ae_loc?.person?.full_name ?? '-- not set --'}<br />
-        <!-- <ShieldUser /> -->
-        <ShieldUser class="mx-1 inline-block text-gray-500" />
-        {$ae_loc?.user?.username ?? '-- not set --'}<br />
-    </span>
-
-    {#if $ae_loc.edit_mode}
-        <button
-            type="button"
-            onclick={() => {
-                $ae_loc.edit_mode = false;
-                // dispatch_edit_mode_changed();
-            }}
-            class="btn btn-md px-2 variant-ghost-success hover:variant-filled-success transition-all *:hover:inline-block"
-            title="Edit mode is currently enabled. Click to disable."
-            >
-            <span class="fas fa-toggle-on mx-1"></span>
-            Edit
-            <span class="hidden">
-                Mode On
-            </span>
-        </button>
-    {:else if $ae_loc.authenticated_access}
-        <button
-            type="button"
-            onclick={() => {
-                $ae_loc.edit_mode = true;
-                // dispatch_edit_mode_changed();
-            }}
-            class="btn btn-md px-2 variant-ghost-warning hover:variant-filled-warning transition-all space-x-0 *:hover:inline"
-            title="Edit mode is currently disabled. Click to enable."
-            >
-            <span class="fas fa-toggle-off mx-1"></span>
-            <span class="">Edit</span>
-            <span class="hidden">
-                Mode?
-            </span>
-        </button>
-    {/if}
-
-    <div class="flex flex-row flex-wrap gap-1 items-center justify-center transition-all *:hover:inline">
-        {#if $ae_loc.access_type && $ae_loc.access_type != 'anonymous'}
-            <span
-                class="*:hover:inline"
-                title={`Current access type/level: ${$ae_loc.access_type}`}
-                >
-                <!-- <span class="fas fa-unlock mx-1"></span> -->
-                <ShieldPlus class="inline-block" />
-
-
-                {#if $ae_loc.access_type == 'super'}
-                    <span class="fas fa-hat-wizard m-1"></span>
-                    <span class="hidden">Super</span>
-                {:else if $ae_loc.access_type == 'manager'}
-                    <span class="fas fa-user-shield m-1"></span>
-                    <span class="hidden">Manager</span>
-                {:else if $ae_loc.access_type == 'administrator'}
-                    <span class="fas fa-user-ninja m-1"></span>
-                    <span class="hidden">Administrator</span>
-                {:else if $ae_loc.access_type == 'trusted'}
-                    <span class="fas fa-user-check m-1"></span>
-                    <span class="hidden">Trusted Access</span>
-                {:else if $ae_loc.access_type == 'public'}
-                    Public
-                    <span class="hidden">Access</span>
-                {:else if $ae_loc.access_type == 'authenticated'}
-                    Authenticated
-                    <span class="hidden">Access</span>
-                {:else if $ae_loc.access_type == 'anonymous'}
-                    Anonymous Access
-                {:else}
-                    Unknown Access
-                {/if}
-            </span>
-
-            {#if $ae_loc?.user_access_type && $ae_loc?.access_type == $ae_loc?.user_access_type}
-                <button
-                    type="button"
-                    onclick={() => {
-                        // handle_clear_access();
-                        // trigger_clear_access = true;
-                        // $ae_loc.app_cfg.show_element__passcode_input = !$ae_loc.app_cfg.show_element__passcode_input;
-
-                        if ($ae_loc?.app_cfg?.show_element__menu_btn) {
-                            $ae_loc.app_cfg.show_element__menu = true;
-                            $ae_loc.app_cfg.show_element__menu_btn = false;
-                            $ae_loc.app_cfg.show_element__access_type = true;
-                            $ae_loc.app_cfg.show_element__passcode_input = true;
-                        } else {
-                            $ae_loc.app_cfg.show_element__menu = false;
-                            $ae_loc.app_cfg.show_element__menu_btn = true;
-                        }
-                    }}
-                    class="btn btn-sm variant-outline-surface hover:variant-ghost-warning transition-all *:hover:inline"
-                    title={`Current user access level: "${$ae_loc.user_access_type}". Click use passcode for a different access level.`}
-                    >
-                    <!-- <span class="fas fa-lock mx-1"></span> -->
-                    <!-- <ShieldMinus /> -->
-                    <ShieldEllipsis class="inline-block" />
-                    <span class="hidden">Passcode?</span>
-
-                </button>
-            {:else}
-                <button
-                    type="button"
-                    onclick={() => {
-                        trigger_clear_access = true;
-
-                        if ($ae_loc?.app_cfg?.show_element__menu_btn) {
-                            $ae_loc.app_cfg.show_element__menu = true;
-                            $ae_loc.app_cfg.show_element__menu_btn = false;
-                            $ae_loc.app_cfg.show_element__access_type = true;
-                            $ae_loc.app_cfg.show_element__passcode_input = true;
-
-                            // await tick();
-                            // console.log('Layout button click: Focus on passcode input!');
-                            // /** @type {HTMLElement | null} */
-                            // const to_focus = document.getElementById('access_passcode_input');
-                            // to_focus?.focus();
-                        } else {
-                            $ae_loc.app_cfg.show_element__menu = false;
-                            $ae_loc.app_cfg.show_element__menu_btn = true;
-                        }
-                    }}
-                    class="btn btn-sm variant-outline-surface hover:variant-ghost-warning transition-all hidden"
-                    title={`Current access level: "${$ae_loc.access_type}". Click to clear the temporary access level.`}
-                    >
-                    <!-- <span class="fas fa-lock mx-1"></span> Lock? -->
-                    <ShieldMinus class="inline-block" />
-                    Clear?
-                </button>
-            {/if}
-        {:else}
-            <button
-                    type="button"
-                    onclick={async () => {
-                        if ($ae_loc?.app_cfg?.show_element__menu_btn) {
-                            $ae_loc.app_cfg.show_element__menu = true;
-                            $ae_loc.app_cfg.show_element__menu_btn = false;
-                            $ae_loc.app_cfg.show_element__access_type = true;
-                            $ae_loc.app_cfg.show_element__passcode_input = true;
-                            await tick();
-                            console.log('Layout button click: Focus on passcode input!');
-                            /** @type {HTMLElement | null} */
-                            const to_focus = document.getElementById('access_passcode_input');
-                            to_focus?.focus();
-                        } else {
-                            $ae_loc.app_cfg.show_element__menu = false;
-                            $ae_loc.app_cfg.show_element__menu_btn = true;
-                        }
-                        // $ae_loc.app_cfg.show_element__menu_btn = !$ae_loc?.app_cfg?.show_element__menu_btn;
-                    }}
-                    class="
-                        btn btn-sm variant-outline-surface hover:variant-ghost-success transition-all
-                        *:hover:inline
-                        "
-                    title="Anonymous public access is currently set. You must Sign In or use a passcode to change your access level."
-                    >
-                <!-- <span class="fas fa-lock mx-1 lock_icon"></span> -->
-                <!-- <span class="">Unlock?</span> -->
-                <ShieldUser class="inline-block" />
-                <span class="hidden">Auth?</span>
-            </button>
-        {/if}
-    </div>
-
-
-    <button
-        type="button"
-        class="btn btn-sm variant-outline-surface hover:variant-ghost-success *:hover:inline-block w-full hidden px-6 py-1"
-        title="Sign In"
-        onclick={async () => {
-            if ($ae_loc?.app_cfg?.show_element__menu_btn) {
-                $ae_loc.app_cfg.show_element__menu = true;
-                $ae_loc.app_cfg.show_element__menu_btn = false;
-                $ae_loc.app_cfg.show_element__access_type = true;
-
-                if ($ae_loc?.access_type == 'anonymous') {
-                    $ae_loc.app_cfg.show_element__passcode_input = true;
-                } else {
-                    $ae_loc.app_cfg.show_element__passcode_input = false;
-                }
-                // $ae_loc.app_cfg.show_element__passcode_input = true;
-                await tick();
-                console.log('Layout button click: Focus on passcode input!');
-                /** @type {HTMLElement | null} */
-                const to_focus = document.getElementById('access_passcode_input');
-                to_focus?.focus();
-            } else {
-                $ae_loc.app_cfg.show_element__menu = false;
-                $ae_loc.app_cfg.show_element__menu_btn = true;
-                $ae_loc.app_cfg.show_element__passcode_input = false;
-            }
-            // $ae_loc.app_cfg.show_element__menu_btn = !$ae_loc?.app_cfg?.show_element__menu_btn;
-        }}
-        >
-        {#if $ae_loc?.app_cfg?.show_element__menu}
-            <CircleX class="inline-block" />
-            <!-- <span class="hidden"> -->
-                Hide Menu
-            <!-- </span> -->
-        {:else}
-            <Menu class="inline-block" />
-            <span class="hidden">
-                Menu
-            </span>
-        {/if}
-    </button>
-
-
-</section>
-
-<!-- Show menu on right side of page -->
-<!-- min-h-96 -->
-<section
-    class="
-        ae_app__menu
-        hidden-print
-        flex flex-col
-        items-center
-        justify-end
-        gap-4
-
-        min-w-48
-        absolute right-0 bottom-10
-        bg-white dark:bg-gray-800
-        border border-gray-200 dark:border-gray-700
-        rounded-lg
-        p-2
-        opacity-50
-        hover:opacity-100
-        duration-100 delay-1000 hover:delay-100 hover:ease-out
-        transition hover:transition-all
-        z-20 hover:z-30
-    "
-    class:hidden={!$ae_loc?.app_cfg?.show_element__menu}
-    >
-
-    <!-- {#if $ae_loc?.app_cfg?.show_element__cfg} -->
-    <span
-        class:hidden={!$ae_loc?.app_cfg?.show_element__cfg || !$ae_loc.edit_mode}
-        >
-    <Element_app_cfg
-        set_theme_mode={true}
-        set_theme_name={true}
-        />
-    </span>
-    <!-- {/if} -->
-
-    {#if $ae_loc?.app_cfg?.show_element__sign_in_out}
-    <Element_sign_in_out
-        data={data}
-        hidden={$ae_loc.iframe || !$ae_loc.app_cfg?.show_element__sign_in_out}
-        />
-    {/if}
-
-    {#if $ae_loc?.app_cfg?.show_element__access_type}
-    <Element_access_type
-        show_passcode_input={$ae_loc?.app_cfg?.show_element__passcode_input}
-        trigger_clear_access={trigger_clear_access}
-        hidden={$ae_loc?.iframe && !$ae_loc?.trusted_access && !$ae_loc?.app_cfg?.show_element__menu}
-        />
-    {/if}
-
-    <button
-        type="button"
-        class="btn btn-sm variant-outline-surface hover:variant-ghost-warning *:hover:inline w-full px-6 py-1"
-        title="Sign In"
-        onclick={() => {
-            if ($ae_loc?.app_cfg?.show_element__menu_btn) {
-                    $ae_loc.app_cfg.show_element__menu = true;
-                    $ae_loc.app_cfg.show_element__menu_btn = false;
-                } else {
-                    $ae_loc.app_cfg.show_element__menu = false;
-                    $ae_loc.app_cfg.show_element__menu_btn = true;
-                }
-            // $ae_loc.app_cfg.show_element__menu_btn = !$ae_loc?.app_cfg?.show_element__menu_btn;
-            // $ae_loc.app_cfg.show_element__menu = !$ae_loc?.app_cfg?.show_element__menu;
-        }}
-        >
-        {#if $ae_loc?.app_cfg?.show_element__menu}
-            <CircleX class="mx-1 inline-block" />
-            <!-- <span class="hidden"> -->
-                Hide Menu
-            <!-- </span> -->
-        {:else}
-            <Menu class="mx-1 inline-block" />
-            <!-- <span class="hidden"> -->
-                Menu
-            <!-- </span> -->
-        {/if}
-    </button>
-
-</section>
+<!-- The app debug menu -->
+<E_app_sys_menu data={data} />
 
+<!-- The app debug menu -->
+<E_app_debug_menu />
 {/if}
 
-<!-- opacity-25
-hover:opacity-100 -->
-<!-- text-slate-400 hover:text-slate-800 -->
-<div
-    class="
-        absolute bottom-0 left-0
-        flex
-        text-sm sm:text-sm md:text-md lg:text-md xl:text-md 2xl:text-lg
-
-        dark:text-slate-400 dark:hover:text-slate-200
-        bg-red-100/60 dark:bg-red-800/50
-        hover:bg-red-200 hover:dark:bg-red-900
-
-        mx-1 my-2
-        max-h-min
-        max-w-lg
-        transition-all
-        transition-delay-1000
-        transition-duration-1000
-        ease-in
-        z-50
-
-        border-2
-        border-red-300 dark:border-red-700
-        hover:border-red-500 hover:dark:border-red-500
-        "
-    class:top-0={$ae_loc?.debug}
-    class:w-full={$ae_loc?.debug}
-    class:hidden={!$ae_loc?.trusted_access}
-    class:border-transparent={!$ae_loc?.debug}
-    class:hover:border-transparent={!$ae_loc?.debug}
-    class:hover:bg-transparent={!$ae_loc?.debug}
-    >
-
-    <div
-        class:hidden={!$ae_loc?.debug}
-        class:border-red-200={$ae_loc?.debug}
-        class:dark:border-red-800={$ae_loc?.debug}
-        class="
-
-            transition-all
-            transition-delay-1000
-            transition-duration-1000
-            ease-in
-            overflow-y-auto
-            px-1 py-4
-            opacity-50
-            hover:opacity-100
-            relative
-            "
-        >
-
-        <!-- flex flex-col items-center justify-center max-h-full outline -->
-        <div>
-            <span class="fas fa-bug mx-1"></span>
-            <span>Debug</span>
-        </div>
-
-        <pre>
-            {JSON.stringify($ae_loc, null, 2)}
-        </pre>
-
-    </div>
-
-    <button
-        type="button"
-        onclick={() => {
-            console.log('Debug ae_loc:', $ae_loc);
-            $ae_loc.debug = !$ae_loc?.debug;
-        }}
-        class="
-            btn btn-sm variant-ghost-surface hover:variant-ghost-warning
-            transition-all *:hover:inline-block
-
-            absolute top-0 right-0
-            "
-        title="Turn debug content and styles off and on"
-        >
-        <span class="fas fa-toggle-on mx-1"></span>
-        Debug
-        <span class="hidden">
-            Mode On
-        </span>
-    </button>
-
-    <button
-        type="button"
-        onclick={() => {
-            console.log('Debug ae_loc:', $ae_loc);
-            $ae_loc.debug = !$ae_loc?.debug;
-        }}
-        id="AE-Quick-Debug"
-        class="
-            btn btn-icon
-            variant-ghost-surface
-            hover:variant-ghost-warning
-            transition-all
-            fixed bottom-2 left-2
-            text-gray-400 hover:text-gray-800
-            "
-        title="Turn debug content and styles off and on"
-        >
-        <!-- absolute bottom-2 left-2 -->
-        <!-- fixed bottom-0 left-0 -->
-        &pi;
-    </button>
-</div>
-
 
 <style lang="postcss">
-/* BEGIN: AE's Svelte Quick Debug component  */
-#AE-Quick-Debug {
-    /* position: absolute; */
-    /* position: fixed; */
-    /* position: relative; */
-    /* position: static; */
-    /* position: sticky; */
-    /* top: 1em; */
-    /* bottom: 2rem; */
-    /* left: 1rem; */
-
-    /* padding: .0rem; */
-
-    /* lightyellow */
-    /* background-color: hsla(60,100%,90%,.30);  */
-    /* background-color: rgba(var(--color-surface-500) / .5); */
-
-    /* border: none;
-
-    border-top: solid thin hsla(0,0%,0%,.25);
-    border-left: solid thin hsla(0,0%,0%,.25);
-    border-bottom: solid thin hsla(0,0%,0%,.25); */
-    /* border-top-left-radius: .5em; */
-    /* border-bottom-left-radius: .5em; */
-
-    /* opacity: .15; */
-    /* opacity: 1; */
-
-    font-size: .75rem;
-
-    /* z-index: 15; */
-
-    /* NOTE: transition when no longer hovering */
-    transition-property: opacity, background-color;
-    transition-delay: 1.25s;
-    transition-duration: .5s;
-    transition-timing-function: ease-out;
-}
-
-#AE-Quick-Debug:hover {
-    /* lightyellow */
-    /* background-color: hsla(60,100%,90%,.95); */
-    /* background-color: rgba(var(--color-surface-500) / 1); */
-/*
-    border-top: solid thin hsla(0,0%,0%,.95);
-    border-left: solid thin hsla(0,0%,0%,.95);
-    border-bottom: solid thin hsla(0,0%,0%,.95); */
-
-    /* opacity: 1; */
-
-    /* padding: .5rem; */
-
-    font-size: 1.5rem;
-    /* Need to zoom 3.5 when hovering */
-    /* transform: scale(3.5); */
-
-    /* NOTE: transition when hover starts */
-    transition-property: opacity, background-color;
-    transition-delay: .5s;
-    transition-duration: .10s;
-    transition-timing-function: ease-in;
-}
 </style>