<script lang="ts">
/**
 * e_app_sys_bar.svelte
 * Global system bar — replaces e_app_sys_menu.svelte.
 *
 * Visual states:
 *   Idle:     compact icon strip (bottom-right corner)
 *   Hover:    info strip appears above bar; button labels revealed
 *   Expanded: full panel slides up above the bar
 *
 * Sub-components are reused unchanged for complex business logic
 * (access_type, sign_in_out). Simple controls (theme, cfg utilities)
 * are inlined here for clean panel layout without blue-bg conflicts.
 */
import {
    Bug,
    CircleX,
    // DatabaseMinus,
    // DatabaseX,
    Eraser,
    ListX,
    Lock,
    // LockKeyhole,
    LogOut,
    Maximize2,
    Menu,
    Minimize2,
    Moon,
    Palette,
    RefreshCw,
    ShieldEllipsis,
    ShieldMinus,
    ShieldUser,
    Sun,
    ToggleLeft,
    ToggleRight,
    User
} from '@lucide/svelte';
import { ae_loc, ae_sess } from '$lib/stores/ae_stores';
import { core_func } from '$lib/ae_core/ae_core_functions';

import Element_access_type from '$lib/app_components/e_app_access_type.svelte';
import Element_sign_in_out from '$lib/app_components/e_app_sign_in_out.svelte';
import E_app_url_builder from '$lib/app_components/e_app_url_builder.svelte';
// import { default_authenticated_can_edit } from '$lib/stores/ae_events_stores__badges_defaults';

interface Props {
    log_lvl?: number;
    data: any;
    hide?: null | boolean;
    expand?: boolean;
}

let {
    log_lvl = $bindable(0),
    data = null,
    hide = $bindable(false),
    expand = $bindable(false)
}: Props = $props();

// Passed down to Element_access_type — triggers handle_clear_access() there.
// See e_app_access_type.svelte for the full clear logic (reverts to user_access_type).
let trigger_clear_access: null | boolean = $state(null);

// ── Accessibility: font size cycler ─────────────────────────────────────
function cycle_font_size() {
    const mode = $ae_loc.font_size_mode;
    if (!mode || mode === 'default') {
        $ae_loc.font_size_mode = 'larger';
    } else if (mode === 'larger') {
        $ae_loc.font_size_mode = 'smaller';
    } else {
        $ae_loc.font_size_mode = 'default';
    }
}

// ── Accessibility: dark / light toggle ──────────────────────────────────
function toggle_theme_mode() {
    if ($ae_loc.theme_mode === 'light') {
        $ae_loc.theme_mode = 'dark';
    } else {
        $ae_loc.theme_mode = 'light';
    }
    // DOM sync (class) is handled reactively in +layout.svelte effect #3
}

// ── Dev: clear IDB only — preserves localStorage/sessionStorage (auth state, prefs) ──
async function handle_clear_idb_only() {
    if (
        !confirm(
            'Clear all IndexedDB databases then reload? localStorage and sessionStorage will be preserved.'
        )
    )
        return;
    await core_func.clear_idb();
    window.location.reload();
}

// ── Dev: full reset — SW + Cache Storage + IDB + localStorage/sessionStorage ──
async function handle_clear_storage_and_idb() {
    if (
        !confirm(
            'FULL *Site* RESET: Unregister service workers, clear all caches, delete IndexedDB databases, clear localStorage and sessionStorage, then reload page?'
        )
    )
        return;
    await core_func.clear_all_storage();
    window.location.reload();
}

// ── Menu expand / collapse ───────────────────────────────────────────────
function toggle_expand() {
    if (!expand) {
        expand = true;
        $ae_sess.sys_menu.expand = true;
        $ae_loc.app_cfg.show_element__access_type = true;

        if (!$ae_loc?.access_type || $ae_loc?.access_type === 'anonymous') {
            // onDestroy in Element_access_type resets show_element__passcode_input to false
            // on panel close, so we must restore it here for menu-button opens too.
            $ae_sess.app_cfg.show_element__passcode_input = true;
            $ae_sess.sys_menu.focus_passcode_input = true;
        } else {
            $ae_loc.sys_menu.expand_user = false;
            $ae_sess.show__sign_in_out__fields = false;
        }
    } else {
        expand = false;
        $ae_sess.sys_menu.expand = false;
    }
}

// ── Auth shield: click behaviour depends on current auth state ───────────
// Mirrors the three-state shield logic from e_app_sys_menu.svelte.
function handle_shield_click() {
    if ($ae_loc.access_type && $ae_loc.access_type !== 'anonymous') {
        if (
            $ae_loc?.user_access_type &&
            $ae_loc?.access_type === $ae_loc?.user_access_type
        ) {
            // At user's own level — offer passcode upgrade
            if (!expand) {
                expand = true;
                $ae_sess.sys_menu.expand = true;
                $ae_loc.sys_menu.hide_access_type = false;
                $ae_loc.sys_menu.expand_access_type = true;
            } else {
                $ae_loc.sys_menu.hide_access_type = false;
                $ae_loc.sys_menu.expand_access_type = true;
            }
        } else {
            // Elevated via passcode — offer to clear back to user level
            trigger_clear_access = true;
            if (expand) {
                $ae_loc.sys_menu.hide_access_type = false;
                expand = false;
                $ae_loc.app_cfg.show_element__access_type = true;
                $ae_sess.app_cfg.show_element__passcode_input = true;
            } else {
                $ae_loc.sys_menu.hide_access_type = false;
                $ae_loc.sys_menu.expand_access_type = true;
            }
        }
    } else {
        // Anonymous — open menu and focus passcode
        expand = true;
        $ae_sess.sys_menu.expand = true;
        $ae_loc.sys_menu.hide_access_type = false;
        $ae_loc.sys_menu.expand_access_type = true;
        $ae_sess.app_cfg.show_element__passcode_input = true;
        $ae_sess.sys_menu.focus_passcode_input = true;
        // Note: focus is handled reactively by the focus_input binding in Element_access_type.
        // Direct getElementById here would fail — the panel DOM doesn't exist yet at this point.
    }
}

// ── Panel section collapse state ─────────────────────────────────────────
// Open/closed per section — access open by default (most common action).
let sec_access = $state(true);
let sec_signin = $state(false);
let sec_appearance = $state(false);
let sec_dev = $state(false);

// ── Derived display helpers ──────────────────────────────────────────────
let font_label = $derived.by(() => {
    if ($ae_loc.font_size_mode === 'larger') return 'A+';
    if ($ae_loc.font_size_mode === 'smaller') return 'A−';
    return 'A';
});

let font_title = $derived.by(() => {
    if ($ae_loc.font_size_mode === 'larger')
        return 'Font: Larger — click for Smaller';
    if ($ae_loc.font_size_mode === 'smaller')
        return 'Font: Smaller — click for Normal';
    return 'Font: Normal — click for Larger';
});

let person_display = $derived(
    $ae_loc?.person?.informal_name ?? $ae_loc?.person?.given_name ?? null
);

let access_label = $derived.by(() => {
    const t = $ae_loc?.access_type;
    if (!t || t === 'anonymous') return null;
    const map: Record<string, string> = {
        super: 'Super',
        manager: 'Manager',
        administrator: 'Admin',
        trusted: 'Trusted',
        public: 'Public',
        authenticated: "Auth'd"
    };
    return map[t] ?? t;
});

// Theme picker groups — keep in sync with e_app_url_builder.svelte
// Pruned to themes that are actually used. Full Skeleton list had 10 entries;
// concord/crimson/hamlindigo/rocket/terminus/vintage removed (never used).
const skeleton_themes = [
    { value: 'nouveau', label: 'Nouveau' },
    { value: 'cerberus', label: 'Cerberus' },
    { value: 'modern', label: 'Modern' },
    { value: 'wintry', label: 'Wintry' },
];
// AE custom themes — Firefly variants are event-specific; prune when no longer needed.
const ae_themes = [
    { value: 'AE_OSIT_default', label: 'OSIT' },
    { value: 'AE_Firefly', label: 'Firefly ✦' },
    { value: 'AE_Firefly_SteelBlue', label: 'Steel Blue ✦' },
    { value: 'AE_Firefly_Indigo', label: 'Indigo ✦' },
    { value: 'AE_Firefly_Rainbow', label: 'Rainbow ✨' },
    { value: 'AE_Firefly_Axonius', label: 'Axonius ✦' },
    { value: 'AE_Firefly_BGH', label: 'BGH ✦' },
    { value: 'AE_c_IDAA_light', label: 'IDAA' },
    { value: 'AE_c_LCI', label: 'LCI' },
    { value: 'AE_c_LCI_new', label: 'LCI New ✦' },
];

function apply_theme(value: string) {
    document.documentElement.setAttribute('data-theme', value);
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    ae_loc.update((l: Record<string, any>) => ({ ...l, theme_name: value, user_theme_selected: true }));
}
</script>

<!-- ══════════════════════════════════════════════════════════════════════════
     OUTER WRAPPER — fixed bottom-right, hidden on print
     Visibility when in iframe is controlled by +layout.svelte (trusted_access gate)
══════════════════════════════════════════════════════════════════════════ -->
<!-- {#if disable} -->
    <!-- Hidden state: render nothing (not even the bar) -->
<!-- {:else} -->
<div
    class="
        ae_sys_bar
        fixed
        right-2 bottom-12 z-50
        flex
        flex-col items-end gap-1 print:hidden
    "
    class:d-none={hide}
    class:hidden={hide}>
    <!-- ── EXPANDED PANEL ──────────────────────────────────────────────────── -->
    {#if expand}
        <div
            class="
            ae_sys_panel
            flex max-h-[80vh] w-80 max-w-[94vw]
            flex-col items-stretch
            gap-0
            overflow-x-hidden overflow-y-auto
            rounded-xl border
            border-primary-400-600/50
            bg-white/0 dark:bg-gray-900/60
            shadow-2xl backdrop-blur-md
            text-sm
            text-gray-950-50
            transition-all
            duration-300

        ">
            <!-- Panel header: person info + close -->
            <div
                class="sticky top-0 z-10 flex items-center justify-between border-b border-gray-100/70 bg-white/85 px-3 py-2 backdrop-blur-md dark:border-gray-800/70 dark:bg-gray-900/85">
                <div
                    class="flex min-w-0 items-center gap-2 text-xs text-gray-500 dark:text-gray-400">
                    {#if $ae_loc?.person_id}
                        <User size="0.9em" class="shrink-0" />
                        <span class="truncate">{person_display ?? '—'}</span>
                    {/if}
                    {#if access_label}
                        <span
                            class="text-primary-600 dark:text-primary-400 shrink-0 font-semibold">
                            · {access_label}
                        </span>
                    {/if}
                    {#if !$ae_loc?.person_id && !access_label}
                        <span class="italic opacity-50">Not signed in</span>
                    {/if}
                </div>

                {#if $ae_loc?.access_type && $ae_loc?.access_type !== 'anonymous'}
                <!-- Button to fully clear *only* the IDB tables. This is mostly to clear up orphan records, but sometimes the table itself needs a reset. -->
                <!-- Clear IDB only — *preserves* localStorage/sessionStorage -->
                <button
                    type="button"
                    class="btn btn-sm preset-filled-warning-200-800 hover:preset-filled-error-100-900 group/menu transition-all duration-200"
                    onclick={handle_clear_idb_only}
                    title="Clear cached records in the local IndexedDB tables. You will not be signed out. This is safe. This preserves localStorage/sessionStorage.">
                    <!-- <Eraser size="1.1em" /> -->
                    <!-- <DatabaseX size="1.1em" /> -->
                    <ListX size="1.1em" />
                    <span
                        class="btn-label max-w-0 opacity-0 transition-all duration-800 hover:duration-100 group-hover/menu:max-w-24 group-hover/menu:opacity-100"
                        >Clear IDB</span>
                </button>

                {:else}
                <!-- Anonymous users get the full reset option — they may be stuck on stale JS -->
                <button
                    type="button"
                    class="btn btn-sm preset-filled-error-100-900 hover:preset-filled-error group/menu transition-all duration-200"
                    onclick={handle_clear_storage_and_idb}
                    title="Full Reset: unregister service workers, clear SW Cache Storage, delete all IndexedDB databases, clear localStorage and sessionStorage, then reload.">
                    <Eraser size="1.1em" />
                    <span
                        class="btn-label max-w-0 opacity-0 transition-all duration-800 hover:duration-100 group-hover/menu:max-w-24 group-hover/menu:opacity-100"
                        >Full Reset</span>
                </button>

                {/if}

                <button
                    type="button"
                    class="btn btn-icon btn-sm preset-filled-tertiary-200-800 hover:preset-filled-error ml-2 shrink-0 transition-all"
                    onclick={toggle_expand}
                    title="Close the Aether system menu">
                    <CircleX size="1.1em" />
                </button>
            </div>

            <!-- ── Sign In / Out (collapsible) ──────────────────────────────── -->
            {#if $ae_loc?.app_cfg?.show_element__sign_in_out}
                <div class="border-b border-gray-100 dark:border-gray-800">
                    <button
                        type="button"
                        class="flex w-full items-center justify-between px-3 py-2 text-xs font-semibold tracking-wider text-surface-600-400 uppercase transition-colors hover:bg-gray-50 dark:hover:bg-gray-800"
                        onclick={() => (sec_signin = !sec_signin)}>
                        <span class="flex min-w-0 items-center gap-1.5">
                            {#if $ae_loc?.person_id && $ae_loc?.user_id}
                                <LogOut
                                    size="0.85em"
                                    class="shrink-0 opacity-60" />
                                <span>Sign Out</span>
                                <span
                                    class="truncate font-normal normal-case opacity-70">
                                    {$ae_loc?.user?.username ??
                                        person_display ??
                                        ''}
                                </span>
                            {:else}
                                <ShieldUser
                                    size="0.85em"
                                    class="shrink-0 opacity-60" />
                                <span>User Sign In</span>
                            {/if}
                        </span>
                        <span class="opacity-50">{sec_signin ? '▲' : '▼'}</span>
                    </button>
                    {#if sec_signin}
                        <div class="px-2 pb-2">
                            <Element_sign_in_out
                                {data}
                                hidden={$ae_loc.iframe ||
                                    !$ae_loc.app_cfg
                                        ?.show_element__sign_in_out} />
                        </div>
                    {/if}
                </div>
            {/if}

            <!-- ── Access Level / Passcode (collapsible) ────────────────────── -->
            {#if !$ae_loc?.sys_menu?.hide_access_type && !$ae_loc?.iframe}
                <div class="border-b border-gray-100 dark:border-gray-800">
                    <button
                        type="button"
                        class="flex w-full items-center justify-between px-3 py-2 text-xs font-semibold tracking-wider text-surface-600-400 uppercase transition-colors hover:bg-gray-50 dark:hover:bg-gray-800"
                        onclick={() => (sec_access = !sec_access)}>
                        <span class="flex min-w-0 items-center gap-1.5">
                            {#if $ae_loc?.access_type && $ae_loc?.access_type !== 'anonymous'}
                                {#if $ae_loc?.user_access_type && $ae_loc?.access_type !== $ae_loc?.user_access_type}
                                    <ShieldMinus
                                        size="0.85em"
                                        class="shrink-0 opacity-60" />
                                    <span>Elevated Access</span>
                                    <span
                                        class="text-primary-600 dark:text-primary-400 truncate font-normal normal-case"
                                        >({access_label})</span>
                                {:else}
                                    <ShieldEllipsis
                                        size="0.85em"
                                        class="shrink-0 opacity-60" />
                                    <span>Access</span>
                                    <span
                                        class="text-primary-600 dark:text-primary-400 truncate font-normal normal-case"
                                        >({access_label})</span>
                                {/if}
                            {:else}
                                <ShieldUser
                                    size="0.85em"
                                    class="shrink-0 opacity-60" />
                                <span>Enter Passcode</span>
                            {/if}
                        </span>
                        <span class="opacity-50">{sec_access ? '▲' : '▼'}</span>
                    </button>
                    {#if sec_access}
                        <div class="px-2 pb-2">
                            <Element_access_type
                                bind:hide={$ae_loc.sys_menu.hide_access_type}
                                bind:focus_input={
                                    $ae_sess.sys_menu.focus_passcode_input
                                }
                                bind:expand={
                                    $ae_loc.sys_menu.expand_access_type
                                }
                                bind:show_passcode_input={
                                    $ae_sess.app_cfg
                                        .show_element__passcode_input
                                }
                                bind:trigger_clear_access />
                        </div>
                    {/if}
                </div>
            {/if}

            <!-- ── Appearance (collapsible) ─────────────────────────────────── -->
            <div class="border-b border-gray-100 dark:border-gray-800">
                <button
                    type="button"
                    class="flex w-full items-center justify-between px-3 py-2 text-xs font-semibold tracking-wider text-surface-600-400 uppercase transition-colors hover:bg-gray-50 dark:hover:bg-gray-800"
                    onclick={() => (sec_appearance = !sec_appearance)}>
                    <span class="flex items-center gap-1">
                        <Palette size="1em" class="opacity-60" />
                        Appearance
                        <span class="ml-1 font-normal normal-case opacity-60">
                            ({$ae_loc?.theme_name ?? '—'} · {$ae_loc?.theme_mode ??
                                '—'})
                        </span>
                    </span>
                    <span class="opacity-50">{sec_appearance ? '▲' : '▼'}</span>
                </button>
                {#if sec_appearance}
                    <div class="space-y-3 px-3 pt-1 pb-3">
                        <!-- Quick actions row: mode + font (most commonly used) -->
                        <div class="flex gap-2">
                            <button
                                type="button"
                                class="btn btn-sm flex-1 transition-all
                                {$ae_loc?.theme_mode === 'dark'
                                    ? 'preset-tonal-secondary hover:preset-filled-secondary-400-600'
                                    : 'preset-tonal-secondary hover:preset-filled-secondary-400-600'}"
                                onclick={toggle_theme_mode}
                                title="Toggle light/dark mode (currently: {$ae_loc?.theme_mode ??
                                    'unknown'})">
                                {#if $ae_loc?.theme_mode === 'dark'}
                                    <Moon size="1em" class="shrink-0" />
                                    <span class="ml-1 text-xs">Dark</span>
                                {:else}
                                    <Sun size="1em" class="shrink-0" />
                                    <span class="ml-1 text-xs">Light</span>
                                {/if}
                            </button>
                            <button
                                type="button"
                                class="btn btn-sm preset-tonal-secondary hover:preset-filled-secondary-400-600 flex-1 transition-all"
                                onclick={cycle_font_size}
                                title={font_title}>
                                <span class="text-sm leading-none font-bold"
                                    >{font_label}</span>
                                <span class="ml-1 text-xs opacity-70"
                                    >Font</span>
                            </button>
                        </div>

                        <!-- Theme picker: compact grouped select -->
                        <div class="flex items-center gap-2">
                            <span class="shrink-0 text-xs text-surface-600-400">Theme</span>
                            <select
                                bind:value={$ae_loc.theme_name}
                                onchange={(e) => apply_theme((e.target as HTMLSelectElement).value)}
                                class="flex-1 rounded-md border border-gray-200 px-2 py-1 text-xs text-surface-800-200 dark:border-gray-600 bg-surface-200-800"
                                title="Select theme (current: {$ae_loc.theme_name ?? 'default'})">
                                <optgroup label="System">
                                    {#each skeleton_themes as opt (opt.value)}
                                        <option value={opt.value}>{opt.label}</option>
                                    {/each}
                                </optgroup>
                                <optgroup label="AE">
                                    {#each ae_themes as opt (opt.value)}
                                        <option value={opt.value}>{opt.label}</option>
                                    {/each}
                                </optgroup>
                            </select>
                        </div>
                    </div>
                {/if}
            </div>

            <!-- ── Dev / Tools (edit mode only, collapsible) ────────────────── -->
            <!--
            Dev tools are separate from user-facing config.
            These are only useful during development and testing —
            reload, storage wipe, iframe toggle, URL builder, debug overlay.
        -->
            {#if $ae_loc.edit_mode}
                <div class="border-b border-gray-100 dark:border-gray-800">
                    <button
                        type="button"
                        class="flex w-full items-center justify-between px-3 py-2 text-xs font-semibold tracking-wider text-surface-600-400 uppercase transition-colors hover:bg-gray-50 dark:hover:bg-gray-800"
                        onclick={() => (sec_dev = !sec_dev)}>
                        <span class="flex items-center gap-1">
                            <Bug size="0.9em" class="opacity-60" />
                            Dev / Tools
                        </span>
                        <span class="opacity-50">{sec_dev ? '▲' : '▼'}</span>
                    </button>
                    {#if sec_dev}
                        <div class="space-y-2 px-3 pb-3">
                            <!-- iframe mode toggle -->
                            {#if $ae_loc.iframe}
                                <a
                                    class="btn btn-sm preset-tonal-secondary w-full justify-end"
                                    href="/?iframe=false">
                                    <Minimize2 size="1em" class="opacity-60" />
                                    Exit iframe Mode
                                </a>
                            {:else}
                                <a
                                    class="btn btn-sm preset-tonal-secondary w-full justify-end"
                                    href="/?iframe=true">
                                    <Maximize2 size="1em" class="opacity-60" />
                                    Enable iframe Mode
                                </a>
                            {/if}

                            <!-- Clear IDB + Reload (preserves localStorage/sessionStorage + SW) -->
                            <button
                                type="button"
                                class="btn btn-sm preset-tonal-warning w-full justify-end"
                                onclick={handle_clear_idb_only}
                                title="Clear IDB & Reload: delete all IndexedDB databases, then reload. Preserves localStorage, sessionStorage, and service worker cache.">
                                <RefreshCw size="1em" class="opacity-60" />
                                Clear IDB & Reload
                            </button>

                            <!-- Full reset: SW + Cache Storage + IDB + localStorage + sessionStorage -->
                            <button
                                type="button"
                                class="btn btn-sm preset-tonal-error w-full justify-end"
                                onclick={handle_clear_storage_and_idb}
                                title="Full Reset: unregister service workers, clear SW Cache Storage, delete all IndexedDB databases, clear localStorage and sessionStorage, then reload.">
                                <Eraser size="1em" class="opacity-60" />
                                Full Reset
                            </button>

                            <!-- URL param builder -->
                            <div
                                class="border-t border-gray-100 pt-1 dark:border-gray-800">
                                <E_app_url_builder />
                            </div>

                            <!-- Debug overlay toggle -->
                            <div
                                class="border-t border-gray-100 pt-1 dark:border-gray-800">
                                <button
                                    type="button"
                                    class="btn btn-sm w-full justify-end {$ae_loc
                                        .debug_menu.expand
                                        ? 'preset-filled-error-500'
                                        : 'preset-outlined-error-400-600'} hover:preset-tonal-error transition-all"
                                    onclick={() => {
                                        $ae_loc.debug_menu.expand =
                                            !$ae_loc.debug_menu.expand;
                                    }}
                                    title="Toggle debug overlay ($ae_loc dump)">
                                    <Bug size="1em" class="shrink-0" />
                                    <span class="ml-1 text-xs">
                                        {$ae_loc.debug_menu.expand
                                            ? 'Hide'
                                            : 'Show'} Debug Overlay
                                    </span>
                                </button>
                            </div>
                        </div>
                    {/if}
                </div>
            {/if}
        </div>
    {/if}
    <!-- END: Expanded panel -->

    <!-- ── COMPACT BAR ────────────────────────────────────────────────────── -->
    <!--
        Outer div is `group` for group-hover.
        The info strip is absolute (above the bar) so it never shifts the bar layout.
        Hover labels on individual buttons use nested group/[name] variants.
        delay-500 on the info strip prevents it flashing on quick mouse-overs.
    -->
    <div class="group relative">
        <!-- Hover info strip — always in DOM (no mount flash), opacity-only transition.
             pointer-events-none so it never blocks clicks. -->
        <div
            class="
                pointer-events-none absolute right-0 bottom-full
                mb-1
                flex items-center gap-1.5
                rounded-lg border border-gray-200/60
                bg-white/30 px-2
                py-1 text-xs whitespace-nowrap
                text-gray-500 shadow-md
                backdrop-blur-sm transition-opacity
                delay-500 duration-200 dark:border-gray-700/60
                dark:bg-gray-900/30 dark:text-gray-400
            "
            class:opacity-0={expand || (!person_display && !access_label)}
            class:group-hover:opacity-100={!expand &&
                (!!person_display || !!access_label)}>
            {#if person_display}
                <User size="0.8em" class="shrink-0" />
                <span>{person_display}</span>
            {/if}
            {#if access_label}
                <span
                    class="text-primary-600 dark:text-primary-400 font-semibold">
                    · {access_label}
                </span>
            {/if}
        </div>

        <!-- Bar strip — h-9 is fixed so inline hover labels never shift height -->
        <div
            class="
                ae_sys_bar__strip
                flex h-9 flex-row items-center
                gap-1 px-2
                rounded-xl border
                border-primary-400-600/50
                bg-white/30  dark:bg-gray-900/30
                shadow-lg backdrop-blur-sm
                text-gray-900-100
                transition-all
                duration-300
            "
            class:border-primary-400-600={expand}>
            <!-- AUTH STATUS SHIELD — hidden in iframe; host page manages auth context -->
            {#if !$ae_loc?.iframe}
                {#if $ae_loc?.access_type && $ae_loc?.access_type !== 'anonymous' && expand}
                <button
                    type="button"
                    class="
                        btn btn-sm group/shield transition-all duration-200
                        preset-tonal-surface preset-outlined-surface
                        {$ae_loc?.access_type &&
                    $ae_loc?.access_type !== 'anonymous'
                        ? $ae_loc?.user_access_type &&
                          $ae_loc?.access_type === $ae_loc?.user_access_type
                            ? 'hover:preset-tonal-success'
                            : 'preset-tonal-warning hover:preset-tonal-warning'
                        : 'preset-outlined-surface hover:preset-tonal-success'}
                    "
                    onclick={handle_shield_click}
                    title={$ae_loc?.access_type &&
                    $ae_loc?.access_type !== 'anonymous'
                        ? $ae_loc?.user_access_type &&
                          $ae_loc?.access_type === $ae_loc?.user_access_type
                            ? `Access: ${$ae_loc?.access_type}. Click to use a passcode.`
                            : `Elevated access: ${$ae_loc?.access_type}. Click to clear.`
                        : 'Anonymous. Click to sign in or enter a passcode.'}>
                    <!-- {#if $ae_loc?.access_type && $ae_loc?.access_type !== 'anonymous'} -->
                        {#if $ae_loc?.user_access_type && $ae_loc?.access_type === $ae_loc?.user_access_type}
                            <ShieldEllipsis size="1.1em" class="shrink-0" />
                        {:else}
                            <ShieldMinus size="1.1em" class="shrink-0" />
                        {/if}
                        <span
                            class="btn-label max-w-0 overflow-hidden text-xs opacity-0 transition-all duration-300 ease-in-out group-hover/shield:max-w-20 group-hover/shield:opacity-100">
                            {access_label ?? 'Auth?'}
                        </span>
                    <!-- {:else}
                        <ShieldUser size="1.1em" class="shrink-0" />
                    {/if} -->

                </button>
                 {:else}
                    <!-- <ShieldUser size="1.1em" class="shrink-0" /> -->
                {/if}
            {/if}

            <!-- FONT SIZE CYCLER — hidden in iframe; font choice belongs to the host page -->
            {#if !$ae_loc?.iframe}
                <button
                    type="button"
                    class="btn btn-sm preset-tonal-surface hover:preset-tonal-primary group/font transition-all duration-700 hover:duration-200"
                    onclick={cycle_font_size}
                    title={font_title}>
                    <span class="text-sm leading-none font-bold">{font_label}</span>
                    <span
                        class="btn-label max-w-0 overflow-hidden text-xs opacity-0 transition-all duration-700 hover:duration-200 ease-in-out group-hover/font:max-w-20 group-hover/font:opacity-100 group-hover/display:inline-block"
                        >Font</span>
                </button>
            {/if}

            <!-- DARK / LIGHT TOGGLE — hidden in iframe; theme is set by the host page -->
            {#if !$ae_loc?.iframe}
                <button
                    type="button"
                    class="btn btn-sm preset-tonal-surface hover:preset-tonal-secondary group/mode transition-all duration-500 hover:duration-200"
                    onclick={toggle_theme_mode}
                    title="Toggle light/dark mode (currently: {$ae_loc?.theme_mode ??
                        'unknown'})">
                    {#if $ae_loc?.theme_mode === 'dark'}
                        <Moon size="1.1em" class="shrink-0" />
                        <span
                            class="btn-label max-w-0 overflow-hidden text-xs opacity-0 transition-all duration-700 hover:duration-200 ease-in-out group-hover/mode:max-w-20 group-hover/mode:opacity-100"
                            >Dark</span>
                    {:else}
                        <Sun size="1.1em" class="shrink-0" />
                        <span
                            class="btn-label max-w-0 overflow-hidden text-xs opacity-0 transition-all duration-700 hover:duration-200 ease-in-out group-hover/mode:max-w-20 group-hover/mode:opacity-100"
                            >Light</span>
                    {/if}
                </button>
            {/if}

            <!-- EDIT MODE TOGGLE (public+ only; was authenticated+) ───────────────────── -->
            {#if $ae_loc?.public_access}
                {#if $ae_loc.edit_mode}
                    <button
                        type="button"
                        class="btn btn-sm preset-tonal-warning hover:preset-tonal-success group/edit transition-all duration-500 hover:duration-200 pl-.05 pr-1.5"
                        onclick={() => {
                            $ae_loc.edit_mode = false;
                        }}
                        title="Edit mode ON — click to turn off">
                        <ToggleRight size="1em" class="inline-block text-sm" />
                        <span
                            class="btn-label max-w-0 overflow-hidden text-xs font-semibold opacity-0 transition-all duration-700 hover:duration-200 ease-in-out group-hover/edit:max-w-20 group-hover/edit:opacity-100"
                            >Edit</span>
                    </button>
                {:else}
                    <button
                        type="button"
                        class="btn btn-sm preset-tonal-surface hover:preset-tonal-warning group/edit transition-all duration-500 hover:duration-200 pl-.05 pr-1.5"
                        onclick={() => {
                            $ae_loc.edit_mode = true;
                        }}
                        title="Edit mode OFF — click to turn on">
                        <ToggleLeft
                            size="1em"
                            class="inline-block text-sm opacity-50" />
                        <span
                            class="btn-label max-w-0 overflow-hidden text-xs opacity-0 transition-all duration-700 hover:duration-200 ease-in-out group-hover/edit:max-w-20 group-hover/edit:opacity-100"
                            >Edit?</span>
                    </button>
                {/if}
            {/if}

            <!-- MENU EXPAND / COLLAPSE ───────────────────────────────────── -->
            <button
                type="button"
                class="btn btn-sm preset-filled-tertiary-200-800 hover:preset-filled-success group/menu transition-all duration-200"
                onclick={toggle_expand}
                title={expand ? 'Close the Aether system menu' : 'Open menu'}>
                {#if expand}
                    <CircleX size="1.1em" class="shrink-0" />
                    <span
                        class="btn-label max-w-0 overflow-hidden text-xs opacity-0 transition-all duration-300 ease-in-out group-hover/menu:max-w-20 group-hover/menu:opacity-100"
                        >Close</span>
                {:else}
                    {#if !$ae_loc.public_access}
                        <Lock size="1.1em" class="shrink-0 opacity-60" />
                    {:else}
                        <Menu size="1.1em" class="shrink-0" />
                    {/if}

                    <span
                        class="btn-label max-w-0 overflow-hidden text-xs opacity-0 transition-all duration-300 ease-in-out group-hover/menu:max-w-20 group-hover/menu:opacity-100"
                        >Menu</span>
                {/if}
            </button>
        </div>
    </div>
    <!-- END: Compact bar -->
</div>


<!-- {/if} -->


<style>
/*
     * Strip blue backgrounds and fixed widths from sub-components when
     * rendered inside the sys panel. The panel provides its own white/dark
     * background and full-width layout — the sub-components' default styling
     * was designed for standalone use and clashes inside the panel.
     */
:global(.ae_sys_panel .ae_access_type),
:global(.ae_sys_panel .ae_sign_in_out) {
    background: transparent !important;
    border: none !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
}

/*
     * Fix native browser rendering of <select> options in dark mode.
     * Without color-scheme, the browser renders <option> elements with its
     * default (light) chrome even on a dark background — white text on
     * white options, or dark text on dark options.
     * color-scheme: dark tells the browser to flip its native UI to dark.
     * Applied globally to the panel so it covers sub-components (URL builder,
     * access type, etc.) without touching every individual element.
     */
:global(.ae_sys_panel) {
    color-scheme: light;
}
:global(.dark .ae_sys_panel) {
    color-scheme: dark;
}

/*
     * Dark mode: Skeleton UI v3 form classes (select, input) do not carry
     * dark-mode color tokens, so without these overrides the elements render
     * with a light/white background and dark text — unreadable on the dark
     * panel background. These rules force a consistent dark appearance for
     * every select and text-type input inside the panel (sub-components
     * included) without needing per-element dark: classes.
     */
:global(.dark .ae_sys_panel select),
:global(.dark .ae_sys_panel option) {
    color: rgb(243 244 246); /* gray-100 */
    background-color: rgb(55 65 81); /* gray-700 */
    border-color: rgb(75 85 99); /* gray-600 */
}
:global(.dark .ae_sys_panel input:not([type='checkbox']):not([type='radio'])) {
    color: rgb(243 244 246); /* gray-100 */
    background-color: rgb(55 65 81); /* gray-700 */
    border-color: rgb(75 85 99); /* gray-600 */
}
/* Placeholder text should still be legible at reduced opacity */
:global(.dark .ae_sys_panel input::placeholder) {
    color: rgb(156 163 175); /* gray-400 */
}
</style>
