Scott.Idem/OSIT-AE-App-Svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Prettier for everything else left

Browse Source
This commit is contained in:
Scott Idem
2026-03-24 12:28:28 -04:00
parent 12a9472064
commit 23d25bf65a
4 changed files with 552 additions and 389 deletions
Download Patch File Download Diff File Expand all files Collapse all files

633
src/routes/+layout.svelte
View File

@@ -1,297 +1,335 @@
<script lang="ts">
/** @type {import('./$types').LayoutData} */
/** @type {import('./$types').LayoutData} */
let log_lvl: number = 0;
let log_lvl: number = 0;
// *** Import Svelte specific
import { untrack } from 'svelte';
import { goto, invalidateAll } from '$app/navigation';
// *** Import Svelte specific
import { untrack } from 'svelte';
import { goto, invalidateAll } from '$app/navigation';
import '../app.css';
import '../app.css';
// *** Import other supporting libraries
// *** Import other supporting libraries
// Highlight JS
import hljs from 'highlight.js/lib/core';
import 'highlight.js/styles/github-dark.css';
// Highlight JS
import hljs from 'highlight.js/lib/core';
import 'highlight.js/styles/github-dark.css';
import { browser } from '$app/environment';
import { online } from 'svelte/reactivity/window';
import xml from 'highlight.js/lib/languages/xml'; // for HTML
import css from 'highlight.js/lib/languages/css';
import javascript from 'highlight.js/lib/languages/javascript';
import typescript from 'highlight.js/lib/languages/typescript';
import { browser } from '$app/environment';
import { online } from 'svelte/reactivity/window';
import xml from 'highlight.js/lib/languages/xml'; // for HTML
import css from 'highlight.js/lib/languages/css';
import javascript from 'highlight.js/lib/languages/javascript';
import typescript from 'highlight.js/lib/languages/typescript';
hljs.registerLanguage('xml', xml); // for HTML
hljs.registerLanguage('css', css);
hljs.registerLanguage('javascript', javascript);
hljs.registerLanguage('typescript', typescript);
hljs.registerLanguage('xml', xml); // for HTML
hljs.registerLanguage('css', css);
hljs.registerLanguage('javascript', javascript);
hljs.registerLanguage('typescript', typescript);
// *** Import Aether specific variables and functions
// import Analytics from '$lib/app_components/e_app_analytics.svelte';
import { ae_loc, ae_sess, ae_api, slct, slct_trigger, ae_auth_error } from '$lib/stores/ae_stores';
import { LoaderCircle } from '@lucide/svelte';
// *** Import Aether specific variables and functions
// import Analytics from '$lib/app_components/e_app_analytics.svelte';
import {
ae_loc,
ae_sess,
ae_api,
slct,
slct_trigger,
ae_auth_error
} from '$lib/stores/ae_stores';
import { LoaderCircle } from '@lucide/svelte';
import E_app_debug_menu from '$lib/app_components/e_app_debug_menu.svelte';
import E_app_sys_bar from '$lib/app_components/e_app_sys_bar.svelte';
import { pwa_install } from '$lib/pwa/pwa_install.svelte';
import E_app_debug_menu from '$lib/app_components/e_app_debug_menu.svelte';
import E_app_sys_bar from '$lib/app_components/e_app_sys_bar.svelte';
import { pwa_install } from '$lib/pwa/pwa_install.svelte';
interface Props {
data: any;
children?: import('svelte').Snippet;
interface Props {
data: any;
children?: import('svelte').Snippet;
}
let { data, children }: Props = $props();
// STABLE DERIVATION: Using prop data directly to avoid store loops
let ae_acct = $derived(data[data.account_id]);
let flag_clear_idb: boolean = $state(false);
let flag_clear_local: boolean = $state(false);
let flag_clear_sess: boolean = $state(false);
let flag_reload: boolean = $state(false);
let flag_new_ver: boolean = $state(false);
let flag_expired: boolean = $state(false);
let flag_denied: boolean = $state(false);
// Connection Status
let is_offline = $derived(browser && online.current === false);
let api_unreachable = $derived($ae_loc?.account_id === 'ghost');
let api_error_msg = $derived($ae_loc?.account_name || 'API Server Unreachable');
let show_connection_details = $state(true);
let last_reload_time = 0;
// Shallow equality guard — avoids triggering Svelte store updates when the merged
// object is functionally identical to the current one. Comparing JSON.stringify on
// large objects like $ae_loc (site config, device info, flags) is expensive and
// runs on every navigation. Key-by-key identity check is O(n keys), not O(n chars).
function shallow_equal(
a: Record<string, any>,
b: Record<string, any>
): boolean {
const keys_a = Object.keys(a);
const keys_b = Object.keys(b);
if (keys_a.length !== keys_b.length) return false;
for (const k of keys_a) {
if (a[k] !== b[k]) return false;
}
return true;
}
let { data, children }: Props = $props();
// 1. CONSOLIDATED SYNC EFFECT (One single point of entry for store updates)
$effect(() => {
if (!browser || !ae_acct) return;
// STABLE DERIVATION: Using prop data directly to avoid store loops
let ae_acct = $derived(data[data.account_id]);
untrack(() => {
if (log_lvl > 1) console.log('ROOT: Running Sync Effect');
let flag_clear_idb: boolean = $state(false);
let flag_clear_local: boolean = $state(false);
let flag_clear_sess: boolean = $state(false);
let flag_reload: boolean = $state(false);
let flag_new_ver: boolean = $state(false);
let flag_expired: boolean = $state(false);
let flag_denied: boolean = $state(false);
// Connection Status
let is_offline = $derived(browser && online.current === false);
let api_unreachable = $derived($ae_loc?.account_id === 'ghost');
let api_error_msg = $derived($ae_loc?.account_name || 'API Server Unreachable');
let show_connection_details = $state(true);
let last_reload_time = 0;
// Shallow equality guard — avoids triggering Svelte store updates when the merged
// object is functionally identical to the current one. Comparing JSON.stringify on
// large objects like $ae_loc (site config, device info, flags) is expensive and
// runs on every navigation. Key-by-key identity check is O(n keys), not O(n chars).
function shallow_equal(a: Record<string, any>, b: Record<string, any>): boolean {
const keys_a = Object.keys(a);
const keys_b = Object.keys(b);
if (keys_a.length !== keys_b.length) return false;
for (const k of keys_a) {
if (a[k] !== b[k]) return false;
// A. Sync Global Stores
const current_api = $ae_api;
const new_api = { ...current_api, ...(ae_acct.api || {}) };
// Deep check for JWT specifically to avoid extra triggers
if (current_api.jwt !== $ae_loc.jwt) new_api.jwt = $ae_loc.jwt;
if (!shallow_equal(current_api, new_api)) {
$ae_api = new_api;
}
return true;
}
// 1. CONSOLIDATED SYNC EFFECT (One single point of entry for store updates)
$effect(() => {
if (!browser || !ae_acct) return;
const current_loc = $ae_loc;
const new_loc = { ...current_loc, ...(ae_acct.loc || {}) };
// Restore structural integrity if clobbered
if (!new_loc.sys_menu)
new_loc.sys_menu = {
hide: false,
hide_access_type: false,
expand_access_type: false,
hide_edit_mode: false,
expand_edit_mode: false,
hide_user: false,
expand_user: false,
hide_theme: false,
expand_theme: false,
hide_cfg: false,
expand_cfg: false
};
if (!new_loc.debug_menu)
new_loc.debug_menu = { hide: false, expand: false };
if (!shallow_equal(current_loc, new_loc)) {
$ae_loc = new_loc;
}
const current_slct = $slct;
const new_slct = { ...current_slct, ...(ae_acct.slct || {}) };
if (!shallow_equal(current_slct, new_slct)) {
$slct = new_slct;
}
// B. Version & Sanity Check
if (new_loc.ver && $ae_sess.ver && new_loc.ver !== $ae_sess.ver) {
if (!flag_new_ver) {
console.log('ROOT: Version mismatch detected');
flag_new_ver = true;
flag_reload = true;
}
}
// C. Access Check (Idempotent)
if (new_loc.site_access_key || new_loc.site_domain_access_key) {
const key = new_loc.allow_access;
const match =
new_loc.site_access_key === key ||
new_loc.site_domain_access_key === key;
if (!match && !new_loc.trusted_access) {
if (new_loc.allow_access !== false)
$ae_loc.allow_access = false;
if (!flag_denied) flag_denied = true;
}
} else if (new_loc.allow_access !== true) {
$ae_loc.allow_access = true;
}
// D. Theme Initialization (Once)
if (!current_loc.theme_mode) {
if (window.matchMedia('(prefers-color-scheme: dark)').matches)
$ae_loc.theme_mode = 'dark';
else $ae_loc.theme_mode = 'light';
}
});
});
// 2. RELOAD THROTTLE EFFECT
$effect(() => {
if (!browser) return;
if (flag_reload) {
untrack(() => {
if (log_lvl > 1) console.log("ROOT: Running Sync Effect");
// A. Sync Global Stores
const current_api = $ae_api;
const new_api = { ...current_api, ...(ae_acct.api || {}) };
// Deep check for JWT specifically to avoid extra triggers
if (current_api.jwt !== $ae_loc.jwt) new_api.jwt = $ae_loc.jwt;
if (!shallow_equal(current_api, new_api)) {
$ae_api = new_api;
}
const current_loc = $ae_loc;
const new_loc = { ...current_loc, ...(ae_acct.loc || {}) };
// Restore structural integrity if clobbered
if (!new_loc.sys_menu) new_loc.sys_menu = { hide: false, hide_access_type: false, expand_access_type: false, hide_edit_mode: false, expand_edit_mode: false, hide_user: false, expand_user: false, hide_theme: false, expand_theme: false, hide_cfg: false, expand_cfg: false };
if (!new_loc.debug_menu) new_loc.debug_menu = { hide: false, expand: false };
if (!shallow_equal(current_loc, new_loc)) {
$ae_loc = new_loc;
}
const current_slct = $slct;
const new_slct = { ...current_slct, ...(ae_acct.slct || {}) };
if (!shallow_equal(current_slct, new_slct)) {
$slct = new_slct;
}
// B. Version & Sanity Check
if (new_loc.ver && $ae_sess.ver && new_loc.ver !== $ae_sess.ver) {
if (!flag_new_ver) {
console.log("ROOT: Version mismatch detected");
flag_new_ver = true;
flag_reload = true;
}
}
// C. Access Check (Idempotent)
if (new_loc.site_access_key || new_loc.site_domain_access_key) {
const key = new_loc.allow_access;
const match = (new_loc.site_access_key === key || new_loc.site_domain_access_key === key);
if (!match && !new_loc.trusted_access) {
if (new_loc.allow_access !== false) $ae_loc.allow_access = false;
if (!flag_denied) flag_denied = true;
}
} else if (new_loc.allow_access !== true) {
$ae_loc.allow_access = true;
}
// D. Theme Initialization (Once)
if (!current_loc.theme_mode) {
if (window.matchMedia('(prefers-color-scheme: dark)').matches) $ae_loc.theme_mode = 'dark';
else $ae_loc.theme_mode = 'light';
}
});
});
// 2. RELOAD THROTTLE EFFECT
$effect(() => {
if (!browser) return;
if (flag_reload) {
untrack(() => {
const now = Date.now();
if (now - last_reload_time < 10000) {
console.warn("ROOT: Critical loop prevention - reload suppressed");
flag_reload = false;
return;
}
last_reload_time = now;
const now = Date.now();
if (now - last_reload_time < 10000) {
console.warn(
'ROOT: Critical loop prevention - reload suppressed'
);
flag_reload = false;
if (flag_clear_local) clear_local();
if (flag_clear_sess) clear_sess();
console.log("ROOT: Executing throttled reload");
invalidateAll();
});
}
});
// 3. UI STATE & THEME DOM EFFECT
let is_hydrating = $state(true);
$effect(() => {
if (!browser) return;
// Theme name — controls which Skeleton color palette is active
document.documentElement.setAttribute('data-theme', $ae_loc?.theme_name ?? 'nouveau');
// Dark/light class — controls Tailwind v4 class-based dark mode variant.
// @custom-variant dark in app.css registers this; without it the class does nothing.
if ($ae_loc?.theme_mode === 'dark') {
document.documentElement.classList.add('dark');
document.documentElement.classList.remove('light');
} else {
document.documentElement.classList.add('light');
document.documentElement.classList.remove('dark');
}
// Font size mode — cycles default | larger | smaller.
// CSS classes are defined in app.css; no class = browser default (16px).
document.documentElement.classList.remove('font-size-larger', 'font-size-smaller');
if ($ae_loc?.font_size_mode === 'larger') {
document.documentElement.classList.add('font-size-larger');
} else if ($ae_loc?.font_size_mode === 'smaller') {
document.documentElement.classList.add('font-size-smaller');
}
// Hydration overlay timer
if ($ae_loc?.account_id) {
const timer = setTimeout(() => is_hydrating = false, 500);
return () => clearTimeout(timer);
}
});
function clear_idb() {
indexedDB.deleteDatabase('ae_archives_db');
indexedDB.deleteDatabase('ae_core_db');
indexedDB.deleteDatabase('ae_events_db');
indexedDB.deleteDatabase('ae_journals_db');
indexedDB.deleteDatabase('ae_posts_db');
indexedDB.deleteDatabase('ae_sponsorships_db');
}
function clear_local() {
localStorage.clear();
}
function clear_sess() {
sessionStorage.clear();
}
// 4. EXTERNAL INTERFACES EFFECT
$effect(() => {
if (!browser) return;
// Initialise PWA install prompt listener (captures beforeinstallprompt early).
pwa_install.init();
// Save DS to local
let ae_ds = ae_acct?.ds;
if (ae_ds) {
for (let [key, value] of Object.entries(ae_ds)) {
localStorage.setItem(`ae_ds__${key}`, JSON.stringify(value));
return;
}
last_reload_time = now;
flag_reload = false;
if (flag_clear_local) clear_local();
if (flag_clear_sess) clear_sess();
console.log('ROOT: Executing throttled reload');
invalidateAll();
});
}
});
// 3. UI STATE & THEME DOM EFFECT
let is_hydrating = $state(true);
$effect(() => {
if (!browser) return;
// Theme name — controls which Skeleton color palette is active
document.documentElement.setAttribute(
'data-theme',
$ae_loc?.theme_name ?? 'nouveau'
);
// Dark/light class — controls Tailwind v4 class-based dark mode variant.
// @custom-variant dark in app.css registers this; without it the class does nothing.
if ($ae_loc?.theme_mode === 'dark') {
document.documentElement.classList.add('dark');
document.documentElement.classList.remove('light');
} else {
document.documentElement.classList.add('light');
document.documentElement.classList.remove('dark');
}
// Font size mode — cycles default | larger | smaller.
// CSS classes are defined in app.css; no class = browser default (16px).
document.documentElement.classList.remove(
'font-size-larger',
'font-size-smaller'
);
if ($ae_loc?.font_size_mode === 'larger') {
document.documentElement.classList.add('font-size-larger');
} else if ($ae_loc?.font_size_mode === 'smaller') {
document.documentElement.classList.add('font-size-smaller');
}
// Hydration overlay timer
if ($ae_loc?.account_id) {
const timer = setTimeout(() => (is_hydrating = false), 500);
return () => clearTimeout(timer);
}
});
function clear_idb() {
indexedDB.deleteDatabase('ae_archives_db');
indexedDB.deleteDatabase('ae_core_db');
indexedDB.deleteDatabase('ae_events_db');
indexedDB.deleteDatabase('ae_journals_db');
indexedDB.deleteDatabase('ae_posts_db');
indexedDB.deleteDatabase('ae_sponsorships_db');
}
function clear_local() {
localStorage.clear();
}
function clear_sess() {
sessionStorage.clear();
}
// 4. EXTERNAL INTERFACES EFFECT
$effect(() => {
if (!browser) return;
// Initialise PWA install prompt listener (captures beforeinstallprompt early).
pwa_install.init();
// Save DS to local
let ae_ds = ae_acct?.ds;
if (ae_ds) {
for (let [key, value] of Object.entries(ae_ds)) {
localStorage.setItem(`ae_ds__${key}`, JSON.stringify(value));
}
}
// Message Bridge
const handler = (event: MessageEvent) => {
if (event.data.type === 'api_download_blob') {
$ae_sess.api_download_kv[event.data.task_id] = { ...event.data };
} else if (event.data.type === 'api_post_json_form') {
$ae_sess.api_upload_kv[event.data.task_id] = { ...event.data };
}
};
window.addEventListener('message', handler);
// Iframe Detection
let iframe = data.url.searchParams.get('iframe');
if (iframe === 'true') {
$ae_loc.iframe = true;
// Hide the AE system bar by default in iframe embeds — it's nav chrome
// the host page doesn't need. Trusted admins can override with show_menu=true
// to access the menu while testing an embedded page (e.g. video_conferences).
$ae_loc.sys_menu.hide = true;
} else if (iframe === 'false') {
$ae_loc.iframe = false;
// Message Bridge
const handler = (event: MessageEvent) => {
if (event.data.type === 'api_download_blob') {
$ae_sess.api_download_kv[event.data.task_id] = { ...event.data };
} else if (event.data.type === 'api_post_json_form') {
$ae_sess.api_upload_kv[event.data.task_id] = { ...event.data };
}
};
window.addEventListener('message', handler);
// show_menu=true — override to show the AE system bar even inside an iframe.
// Intended for trusted/admin users who need menu access while testing an embed.
// hide_menu=true — explicitly hide the bar outside of iframe contexts.
const menu_override = data.url.searchParams.get('show_menu');
if (menu_override === 'true') $ae_loc.sys_menu.hide = false;
else if (data.url.searchParams.get('hide_menu') === 'true') $ae_loc.sys_menu.hide = true;
// Iframe Detection
let iframe = data.url.searchParams.get('iframe');
if (iframe === 'true') {
$ae_loc.iframe = true;
// Hide the AE system bar by default in iframe embeds — it's nav chrome
// the host page doesn't need. Trusted admins can override with show_menu=true
// to access the menu while testing an embedded page (e.g. video_conferences).
$ae_loc.sys_menu.hide = true;
} else if (iframe === 'false') {
$ae_loc.iframe = false;
}
// Theme URL params — ?theme=AE_Firefly_SteelBlue&theme_mode=dark
// Applied once on load, then silently removed from the URL (no history entry).
const url_theme = data.url.searchParams.get('theme');
const url_theme_mode = data.url.searchParams.get('theme_mode');
if (url_theme || url_theme_mode) {
if (url_theme) $ae_loc.theme_name = url_theme;
if (url_theme_mode === 'light' || url_theme_mode === 'dark') $ae_loc.theme_mode = url_theme_mode;
const clean_url = new URL(data.url.href);
clean_url.searchParams.delete('theme');
clean_url.searchParams.delete('theme_mode');
goto(clean_url.pathname + clean_url.search + clean_url.hash, {
replaceState: true,
noScroll: true,
keepFocus: true
});
}
// show_menu=true — override to show the AE system bar even inside an iframe.
// Intended for trusted/admin users who need menu access while testing an embed.
// hide_menu=true — explicitly hide the bar outside of iframe contexts.
const menu_override = data.url.searchParams.get('show_menu');
if (menu_override === 'true') $ae_loc.sys_menu.hide = false;
else if (data.url.searchParams.get('hide_menu') === 'true')
$ae_loc.sys_menu.hide = true;
// Electron Detection
if ((window as any).native_app || (window as any).aetherNative) {
if (!$ae_loc.is_native) $ae_loc.is_native = true;
}
// Theme URL params — ?theme=AE_Firefly_SteelBlue&theme_mode=dark
// Applied once on load, then silently removed from the URL (no history entry).
const url_theme = data.url.searchParams.get('theme');
const url_theme_mode = data.url.searchParams.get('theme_mode');
if (url_theme || url_theme_mode) {
if (url_theme) $ae_loc.theme_name = url_theme;
if (url_theme_mode === 'light' || url_theme_mode === 'dark')
$ae_loc.theme_mode = url_theme_mode;
const clean_url = new URL(data.url.href);
clean_url.searchParams.delete('theme');
clean_url.searchParams.delete('theme_mode');
goto(clean_url.pathname + clean_url.search + clean_url.hash, {
replaceState: true,
noScroll: true,
keepFocus: true
});
}
return () => window.removeEventListener('message', handler);
});
// Electron Detection
if ((window as any).native_app || (window as any).aetherNative) {
if (!$ae_loc.is_native) $ae_loc.is_native = true;
}
// 5. SESSION EXPIRED EFFECT — watches ae_auth_error and raises the banner when the API signals 401/403.
// Guards on $ae_loc.jwt so that unauthenticated first-loads (no stored JWT) never trigger it —
// 401s are expected on first visit and should not look like a session expiry.
$effect(() => {
if ($ae_auth_error?.type === 'expired') {
untrack(() => {
if ($ae_loc?.jwt) flag_expired = true;
});
}
});
return () => window.removeEventListener('message', handler);
});
// 5. SESSION EXPIRED EFFECT — watches ae_auth_error and raises the banner when the API signals 401/403.
// Guards on $ae_loc.jwt so that unauthenticated first-loads (no stored JWT) never trigger it —
// 401s are expected on first visit and should not look like a session expiry.
$effect(() => {
if ($ae_auth_error?.type === 'expired') {
untrack(() => {
if ($ae_loc?.jwt) flag_expired = true;
});
}
});
</script>
<svelte:head>
@@ -299,18 +337,32 @@
</svelte:head>
{#if browser && (is_offline || api_unreachable)}
<div class="print:hidden fixed top-0 left-0 right-0 z-100 p-4 preset-filled-error-500 text-center shadow-2xl flex items-center justify-center gap-4">
<span class="text-xl font-bold">{is_offline ? 'Offline' : api_error_msg}</span>
<button class="btn btn-sm preset-tonal-surface" onclick={() => window.location.reload()}>Retry</button>
<div
class="preset-filled-error-500 fixed top-0 right-0 left-0 z-100 flex items-center justify-center gap-4 p-4 text-center shadow-2xl print:hidden">
<span class="text-xl font-bold"
>{is_offline ? 'Offline' : api_error_msg}</span>
<button
class="btn btn-sm preset-tonal-surface"
onclick={() => window.location.reload()}>Retry</button>
</div>
{/if}
{#if browser && flag_expired}
<div class="print:hidden fixed top-0 left-0 right-0 z-50 px-4 py-2 preset-filled-warning-500 shadow-xl flex items-center justify-between gap-4">
<p class="text-sm font-semibold">Your session has expired. Please reload or sign in again.</p>
<div class="flex gap-2 items-center shrink-0">
<button class="btn btn-sm preset-tonal-surface" onclick={() => window.location.reload()}>Reload</button>
<button class="btn btn-sm preset-outlined-surface" onclick={() => { flag_expired = false; ae_auth_error.set({ type: null, ts: null }); }}>✕</button>
<div
class="preset-filled-warning-500 fixed top-0 right-0 left-0 z-50 flex items-center justify-between gap-4 px-4 py-2 shadow-xl print:hidden">
<p class="text-sm font-semibold">
Your session has expired. Please reload or sign in again.
</p>
<div class="flex shrink-0 items-center gap-2">
<button
class="btn btn-sm preset-tonal-surface"
onclick={() => window.location.reload()}>Reload</button>
<button
class="btn btn-sm preset-outlined-surface"
onclick={() => {
flag_expired = false;
ae_auth_error.set({ type: null, ts: null });
}}>✕</button>
</div>
</div>
{/if}
@@ -319,30 +371,45 @@
{@render children?.()}
{#if is_hydrating}
<div class="print:hidden fixed inset-0 z-99 flex flex-col items-center justify-center bg-surface-50/80 dark:bg-surface-900/80 backdrop-blur-sm transition-opacity duration-500">
<div class="preset-filled-surface-100-900 p-8 rounded-2xl shadow-2xl flex flex-col items-center gap-4">
<LoaderCircle size="3rem" class="animate-spin text-primary-500" />
<div class="text-center font-bold text-xl">Hydrating Aether...</div>
<div
class="bg-surface-50/80 dark:bg-surface-900/80 fixed inset-0 z-99 flex flex-col items-center justify-center backdrop-blur-sm transition-opacity duration-500 print:hidden">
<div
class="preset-filled-surface-100-900 flex flex-col items-center gap-4 rounded-2xl p-8 shadow-2xl">
<LoaderCircle
size="3rem"
class="text-primary-500 animate-spin" />
<div class="text-center text-xl font-bold">
Hydrating Aether...
</div>
</div>
</div>
{/if}
{:else if browser && flag_denied}
<div class="flex flex-col items-center justify-center h-screen gap-6 p-8">
<h1 class="text-4xl font-black text-error-500">Access Denied</h1>
<button class="btn preset-filled-primary" onclick={() => window.location.reload()}>Reload</button>
<div class="flex h-screen flex-col items-center justify-center gap-6 p-8">
<h1 class="text-error-500 text-4xl font-black">Access Denied</h1>
<button
class="btn preset-filled-primary"
onclick={() => window.location.reload()}>Reload</button>
</div>
{:else if browser}
<div class="flex items-center justify-center h-screen"><LoaderCircle size="2.5rem" class="animate-spin opacity-20" /></div>
<div class="flex h-screen items-center justify-center">
<LoaderCircle size="2.5rem" class="animate-spin opacity-20" />
</div>
{/if}
{#if browser && (!$ae_loc?.iframe || $ae_loc?.trusted_access)}
<!-- print:hidden wrapper: sys/debug menus are fixed overlays — must not appear on printed pages -->
<div class="print:hidden">
<E_app_sys_bar {data} bind:hide={$ae_loc.sys_menu.hide} bind:expand={$ae_sess.sys_menu.expand} />
<E_app_sys_bar
{data}
bind:hide={$ae_loc.sys_menu.hide}
bind:expand={$ae_sess.sys_menu.expand} />
<!-- You must be in Edit Mode to initially see the Debug expand button. Once expanded, you can toggle the Edit Mode while still seeing the expanded Debug content. -->
{#if $ae_loc.edit_mode || $ae_loc.debug_menu.expand}
<E_app_debug_menu bind:hide={$ae_loc.debug_menu.hide} bind:expand={$ae_loc.debug_menu.expand} />
<E_app_debug_menu
bind:hide={$ae_loc.debug_menu.hide}
bind:expand={$ae_loc.debug_menu.expand} />
{/if}
</div>
{/if}