This is a mostly working state again. Some files were backed up to ~/tmp/Aether_UI_UX_app. Things are slowly being merged back in. Not easy.

src/lib/ae_api/api_get__data_store_v3.ts

@@ -0,0 +1,48 @@
+import type { key_val } from '$lib/stores/ae_stores';
+import { get_object } from './api_get_object';
+
+interface GetDataStoreV3Params {
+    api_cfg: any;
+    code: string;
+    for_type?: string | null;
+    for_id?: string | null;
+    no_account_id?: boolean;
+    log_lvl?: number;
+}
+
+/**
+ * Get a Data Store object by its human-friendly code (V3)
+ * Uses hierarchical fallback logic (Specific -> Account -> Global)
+ * Path: GET /v3/data_store/code/{code}
+ */
+export async function get_data_store_v3({
+    api_cfg,
+    code,
+    for_type = null,
+    for_id = null,
+    no_account_id = false,
+    log_lvl = 0
+}: GetDataStoreV3Params): Promise<any> {
+    if (log_lvl) {
+        console.log(`*** get_data_store_v3() *** code=${code} no_account_id=${no_account_id}`);
+    }
+
+    const endpoint = `/v3/data_store/code/${code}`;
+    const params: key_val = {};
+    if (for_type) params['for_type'] = for_type;
+    if (for_id) params['for_id'] = for_id;
+
+    const headers: key_val = {};
+    if (no_account_id) {
+        // This token allows bypassing the mandatory account_id requirement for global defaults
+        headers['x-no-account-id-token'] = 'Nothing to See Here';
+    }
+
+    return await get_object({
+        api_cfg,
+        endpoint,
+        params,
+        headers,
+        log_lvl
+    });
+}

src/lib/ae_core/db_core.ts

@@ -7,7 +7,8 @@ import type {
     ae_Site,
     ae_SiteDomain,
     ae_Address,
-    ae_Contact 
+    ae_Contact,
+    ae_DataStore
 } from '$lib/types/ae_types';
 
 // li = list
@@ -53,24 +54,21 @@ export interface Person extends ae_Person {
     address_id_random?: string;
 }
 
-export interface User extends ae_User {
+// Updated 2026-01-28 - Unified Types and added Data Store
-    // Additional local fields if needed
-}
-
-// Updated 2026-01-09
 export class MySubClassedDexie extends Dexie {
     file!: Table<ae_LocalFile>;
     person!: Table<Person>;
-    user!: Table<User>;
+    user!: Table<ae_User>;
     account!: Table<ae_Account>;
     site!: Table<ae_Site>;
     site_domain!: Table<ae_SiteDomain>;
     address!: Table<ae_Address>;
     contact!: Table<ae_Contact>;
+    data_store!: Table<ae_DataStore>;
 
     constructor() {
         super('ae_core_db');
-        this.version(2).stores({
+        this.version(3).stores({
             file: `
                 id, hosted_file_id, hosted_file_id_random,
                 hash_sha256,
@@ -123,6 +121,16 @@ export class MySubClassedDexie extends Dexie {
                 account_id, account_id_random,
                 for_type, for_id_random,
                 title, email, phone_mobile,
+                enable, hide, priority, sort, group, created_on, updated_on`,
+
+            data_store: `
+                id, data_store_id, data_store_id_random,
+                account_id, account_id_random,
+                for_type, for_id_random,
+                code, name, type,
+                [code+for_type+for_id_random],
+                [code+account_id_random+for_type],
+                [code+account_id_random],
                 enable, hide, priority, sort, group, created_on, updated_on`
         });
     }

src/lib/elements/element_data_store_v3_alpha.svelte

@@ -0,0 +1,384 @@
+<script lang="ts">
+    import { browser } from '$app/environment';
+    import { onMount, untrack } from 'svelte';
+    import { Modal } from 'flowbite-svelte';
+    import { liveQuery } from 'dexie';
+
+    import { api } from '$lib/api/api';
+    import { ae_loc, ae_sess, ae_api, slct } from '$lib/stores/ae_stores';
+    import { db_core } from '$lib/ae_core/db_core';
+    import { ae_util } from '$lib/ae_utils/ae_utils';
+    import type { key_val } from '$lib/stores/ae_stores';
+
+    interface Props {
+        log_lvl?: number;
+        expire_minutes?: number;
+        mount_reload_sec?: number;
+        ds_code: string;
+        ds_name?: null | string;
+        ds_type?: string;
+        for_type?: null | string;
+        for_id?: null | string;
+        class_li?: string;
+        try_cache?: boolean;
+        hide?: boolean;
+        show_edit?: boolean;
+        show_edit_btn?: boolean;
+        show_view?: boolean;
+        ds_loaded?: boolean;
+        debug?: boolean;
+        ds_loading_status?: string;
+        val_sql?: null | key_val;
+    }
+
+    let {
+        log_lvl = 0,
+        expire_minutes = 15,
+        mount_reload_sec = 0,
+        ds_code,
+        ds_name = null,
+        ds_type = 'text',
+        for_type = null,
+        for_id = null,
+        class_li = '',
+        try_cache = true,
+        hide = false,
+        show_edit = $bindable(false),
+        show_edit_btn = false,
+        show_view = $bindable(true),
+        ds_loaded = $bindable(false),
+        debug = false,
+        ds_loading_status = $bindable('starting'),
+        val_sql = $bindable(null)
+    }: Props = $props();
+
+    // Local reactive state
+    let trigger: null | string = $state(null);
+    let ds_submit_results: Promise<any> | key_val | undefined = $state();
+
+    // Dexie LiveQuery for data store
+    let lq__ds_obj = $derived(
+        liveQuery(async () => {
+            const current_code = ds_code;
+            const account_id = $slct.account_id;
+            const current_for_type = for_type;
+            const current_for_id = for_id;
+
+            if (!current_code) return null;
+
+            if (log_lvl > 1) console.log(`ae_e_data_store [${current_code}]: LQ Lookup...`, { account_id, current_for_type, current_for_id });
+
+            // Hierarchical Local Lookup (Specific -> Account -> Global)
+            let result = null;
+
+            // 1. Specific Lookup
+            if (current_for_type && current_for_id) {
+                result = await db_core.data_store
+                    .where('[code+for_type+for_id_random]')
+                    .equals([current_code, current_for_type, current_for_id])
+                    .first();
+            }
+
+            // 2. Account Lookup
+            if (!result && account_id) {
+                result = await db_core.data_store
+                    .where('[code+account_id_random+for_type]')
+                    .equals([current_code, account_id, null])
+                    .first();
+            }
+
+            // 3. Global Lookup
+            if (!result) {
+                result = await db_core.data_store
+                    .where('[code+account_id_random+for_type]')
+                    .equals([current_code, null, null])
+                    .first();
+            }
+
+            if (log_lvl > 1) console.log(`ae_e_data_store [${current_code}]: LQ Result:`, result);
+
+            // Update loaded status
+            ds_loaded = !!result;
+            if (result) ds_loading_status = 'loaded';
+
+            return result;
+        })
+    );
+
+    // Initial Trigger & Context Change Guard
+    $effect(() => {
+        const account_id = $slct.account_id;
+        const api_ready = !!$ae_api?.base_url;
+        
+        if (browser && api_ready && account_id) {
+            // Only trigger if not loaded or if we want a fresh check
+            if (!trigger) trigger = 'load__ds__code';
+        }
+    });
+
+    // Fetch handler
+    $effect(() => {
+        if (trigger === 'load__ds__code') {
+            untrack(() => {
+                trigger = null;
+                load_data_store();
+            });
+        }
+    });
+
+    // Mount reload logic
+    onMount(() => {
+        if (mount_reload_sec > 0) {
+            const random_ms = Math.floor(Math.random() * mount_reload_sec * 1000);
+            setTimeout(() => { trigger = 'load__ds__code'; }, random_ms);
+        }
+    });
+
+    async function load_data_store() {
+        ds_loading_status = 'loading';
+        const api_cfg = untrack(() => $ae_api);
+        
+        if (log_lvl) console.log(`ae_e_data_store [${ds_code}]: Fetching...`);
+
+        try {
+            // Attempt 1: Context-specific fetch
+            let ds_results = await api.get_data_store_v3({
+                api_cfg,
+                code: ds_code,
+                for_type: for_type,
+                for_id: for_id,
+                log_lvl: log_lvl
+            });
+
+            const status_code = ds_results?.meta?.status_code || (ds_results === false ? 500 : 200);
+
+            // Fallback to Global if not found or unauthorized for account
+            if (!ds_results || status_code === 403 || status_code === 401) {
+                if (log_lvl) console.log(`ae_e_data_store [${ds_code}]: Trying global fallback.`);
+                ds_results = await api.get_data_store_v3({
+                    api_cfg,
+                    code: ds_code,
+                    no_account_id: true,
+                    log_lvl: log_lvl
+                });
+            }
+
+            const ds_id = ds_results?.data_store_id_random || ds_results?.id_random || ds_results?.id || ds_results?.data_store_id;
+
+            if (ds_results && ds_id) {
+                // Save to Dexie
+                const ds_to_save = {
+                    ...ds_results,
+                    id: ds_id,
+                    data_store_id: ds_id,
+                    data_store_id_random: ds_id,
+                    account_id: ds_results.account_id_random || ds_results.account_id,
+                    account_id_random: ds_results.account_id_random || ds_results.account_id,
+                    updated_on: ds_results.updated_on || new Date().toISOString()
+                };
+
+                await db_core.data_store.put(ds_to_save);
+                if (log_lvl) console.log(`ae_e_data_store [${ds_code}]: Saved to Dexie. ID: ${ds_id}`);
+            } else {
+                ds_loading_status = 'not found';
+                if (log_lvl) console.warn(`ae_e_data_store [${ds_code}]: Result had no valid ID.`);
+            }
+        } catch (err) {
+            console.error(`ae_e_data_store [${ds_code}]: Fetch failed.`, err);
+            ds_loading_status = 'error';
+        }
+    }
+
+    async function handle_submit_form(event: Event) {
+        const target = event.target as HTMLFormElement;
+        $ae_sess.ds.submit_status = 'processing';
+
+        const form_data = new FormData(target);
+        const data_store_di = ae_util.extract_prefixed_form_data({
+            prefix: null,
+            form_data,
+            trim_values: true,
+            bool_tf_str: true
+        });
+
+        const data_store_do: key_val = {
+            code: data_store_di.ds_code ?? ds_code,
+            name: data_store_di.ds_name ?? ds_name,
+            type: data_store_di.ds_type ?? ds_type,
+            for_type: data_store_di.ds_for_type ?? null,
+            for_id_random: data_store_di.ds_for_id ?? null,
+            access_read: data_store_di.ds_access_read,
+            access_write: data_store_di.ds_access_write,
+            access_delete: data_store_di.ds_access_delete,
+            enable: data_store_di.ds_enable ?? true,
+            account_id_random: data_store_di.ds_use_account_id ? (data_store_di.ds_account_id ?? $slct.account_id) : null
+        };
+
+        if (data_store_do.type === 'json') {
+            data_store_do.json = data_store_di.ds_value;
+        } else {
+            data_store_do.text = data_store_di.ds_value;
+        }
+
+        const api_cfg = untrack(() => $ae_api);
+
+        if ($lq__ds_obj?.id) {
+            ds_submit_results = api.update_ae_obj_v3({
+                api_cfg,
+                obj_type: 'data_store',
+                obj_id: $lq__ds_obj.id,
+                fields: data_store_do
+            }).then((res) => {
+                if (res) {
+                    $ae_sess.ds.submit_status = 'updated';
+                    trigger = 'load__ds__code';
+                }
+                return res;
+            });
+        } else {
+            ds_submit_results = api.create_ae_obj_v3({
+                api_cfg,
+                obj_type: 'data_store',
+                fields: data_store_do
+            }).then((res) => {
+                if (res) {
+                    $ae_sess.ds.submit_status = 'created';
+                    trigger = 'load__ds__code';
+                }
+                return res;
+            });
+        }
+    }
+
+    async function handle_delete() {
+        if (!$lq__ds_obj?.id || !confirm('Are you sure you want to delete this data store?')) return;
+
+        const api_cfg = untrack(() => $ae_api);
+        const res = await api.delete_ae_obj_v3({
+            api_cfg,
+            obj_type: 'data_store',
+            obj_id: $lq__ds_obj.id,
+            method: 'delete'
+        });
+
+        if (res) {
+            await db_core.data_store.delete($lq__ds_obj.id);
+            ds_loading_status = 'not found';
+            show_edit = false;
+        }
+    }
+</script>
+
+<div class="ae__elem__data_store relative {class_li}" class:hidden={hide}>
+    {#if $lq__ds_obj}
+        {#if debug || $ae_loc.debug === 'debug'}
+            <pre class="text-[10px] bg-black/10 p-2 rounded mb-2">
+ID: {$lq__ds_obj.id}
+Code: {$lq__ds_obj.code}
+Name: {$lq__ds_obj.name}
+Type: {$lq__ds_obj.type}
+Created: {$lq__ds_obj.created_on}
+Updated: {$lq__ds_obj.updated_on}
+Account: {$lq__ds_obj.account_id_random || 'Global / NULL'}
+            </pre>
+        {/if}
+
+        <Modal
+            title="{$lq__ds_obj.name || 'Unnamed'} - {$lq__ds_obj.code}"
+            bind:open={show_edit}
+            autoclose={false}
+            size="xl"
+            class="w-full max-w-6xl"
+        >
+            <form class="flex flex-col gap-4" onsubmit={(e) => { e.preventDefault(); handle_submit_form(e); }}>
+                <input type="hidden" name="ds_id_random" value={$lq__ds_obj.id} />
+
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <div class="space-y-2">
+                        <label class="label">
+                            <span class="text-xs font-bold opacity-70">Code</span>
+                            <input type="text" name="ds_code" class="input font-mono" value={$lq__ds_obj.code} readonly={!$ae_loc.manager_access} required />
+                        </label>
+                        <label class="label">
+                            <span class="text-xs font-bold opacity-70">Name</span>
+                            <input type="text" name="ds_name" class="input" value={$lq__ds_obj.name} required />
+                        </label>
+                    </div>
+
+                    <div class="space-y-2">
+                        <label class="label">
+                            <span class="text-xs font-bold opacity-70">Type</span>
+                            <select name="ds_type" class="select" value={$lq__ds_obj.type}>
+                                <option value="text">Text</option>
+                                <option value="html">HTML</option>
+                                <option value="json">JSON</option>
+                                <option value="md">Markdown</option>
+                                <option value="sql">SQL</option>
+                            </select>
+                        </label>
+                        <div class="flex items-center gap-2 pt-6">
+                            <input type="checkbox" name="ds_use_account_id" class="checkbox" checked={!!$lq__ds_obj.account_id_random} />
+                            <span class="text-xs">Account Specific</span>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="space-y-2">
+                    <span class="text-xs font-bold opacity-70">Content</span>
+                    <textarea
+                        name="ds_value"
+                        class="textarea font-mono text-sm"
+                        rows="15"
+                        placeholder="Enter content here..."
+                    >{$lq__ds_obj.type === 'json' ? JSON.stringify($lq__ds_obj.json, null, 2) : ($lq__ds_obj.text || $lq__ds_obj.html || '')}</textarea>
+                </div>
+
+                <div class="flex justify-between items-center pt-4">
+                    <button type="button" class="btn variant-filled-error" onclick={handle_delete}>
+                        <span class="fas fa-trash mr-2"></span> Delete
+                    </button>
+
+                    <div class="flex gap-2">
+                        <button type="button" class="btn variant-soft" onclick={() => show_edit = false}>Cancel</button>
+                        <button type="submit" class="btn variant-filled-primary">
+                            <span class="fas fa-save mr-2"></span> Save
+                        </button>
+                    </div>
+                </div>
+            </form>
+        </Modal>
+
+        {#if $lq__ds_obj.type === 'html' && $lq__ds_obj.html}
+            {@html $lq__ds_obj.html}
+        {:else if $lq__ds_obj.type === 'text' && $lq__ds_obj.text}
+            <div class="whitespace-pre-wrap">{$lq__ds_obj.text}</div>
+        {/if}
+
+        {#if $ae_loc.edit_mode && ($ae_loc.manager_access || (show_edit_btn && $ae_loc.administrator_access))}
+            <button
+                type="button"
+                class="absolute top-0 right-0 btn btn-sm variant-soft-warning opacity-20 hover:opacity-100 z-10"
+                onclick={() => { show_edit = true; show_view = false; }}
+                title="Edit Data Store: {ds_code}"
+            >
+                <span class="fas fa-edit"></span>
+            </button>
+        {/if}
+    {:else if ds_loading_status === 'not found'}
+        <div class="p-2 border border-dashed border-surface-500/30 rounded text-xs opacity-50">
+            Data Store not found: {ds_code}
+        </div>
+    {/if}
+
+    {#if ds_loading_status === 'loading'}
+        <div class="absolute bottom-0 left-0 p-1 opacity-50">
+            <span class="fas fa-spinner fa-spin text-xs"></span>
+        </div>
+    {/if}
+</div>
+
+<style lang="postcss">
+    .ae__elem__data_store {
+        /* Base styles */
+    }
+</style>

src/lib/types/ae_types.ts

@@ -699,15 +699,30 @@ export interface ae_HostedFileLink {
 export interface ae_DataStore extends ae_BaseObj {
     data_store_id: string;
     data_store_id_random: string;
-    account_id: string;
+    account_id?: null | string;
-    account_id_random: string;
+    account_id_random?: null | string;
 
-    for_type?: string;
+    for_type?: null | string;
-    for_id_random?: string;
+    for_id_random?: null | string;
+    for_id?: null | string;
 
-    type?: string;
+    person_id_random?: null | string;
-    json_str?: any;
+    user_id_random?: null | string;
-    text?: string;
+
+    type?: null | string;
+
+    json?: any;
+    json_str?: null | string;
+    text?: null | string;
+    html?: null | string;
+
+    meta_json?: null | string;
+    meta_text?: null | string;
+
+    access?: null | string;
+    access_read?: null | string;
+    access_write?: null | string;
+    access_delete?: null | string;
 }
 
 /**

src/routes/+layout.svelte

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

src/routes/testing/data_store_v3/+page.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+    import AE_Element_Data_Store_V3 from '$lib/elements/element_data_store_v3_alpha.svelte';
+    import { ae_loc } from '$lib/stores/ae_stores';
+    import { db_core } from '$lib/ae_core/db_core';
+
+    let test_code_global = 'hub__site__root_page_header'; // Expected to be a global default
+    let test_name_global = 'Global Header Test - hub__site__root_page_header';
+    let test_code_account = 'hub__site__root_page_header';
+    let test_name_account = 'Account Header Test - hub__site__root_page_header';
+    let test_code_specific = 'event_launcher_main_info';
+    let test_name_specific = 'Event Specific Test - event_launcher_main_info';
+    let test_event_id = 'pjrcghqwert';
+
+    let log_lvl = 2;
+    let refresh_trigger = $state(0);
+
+    async function clear_cache() {
+        if (confirm('Are you sure you want to clear the local Data Store cache?')) {
+            await db_core.data_store.clear();
+            refresh_trigger++;
+            alert('Cache cleared.');
+        }
+    }
+</script>
+
+<div class="p-8 space-y-8 max-w-4xl mx-auto h-full overflow-y-auto">
+    <header class="border-b border-surface-500/30 pb-4 flex justify-between items-center">
+        <div>
+            <h1 class="h1">Data Store V3 Test Page</h1>
+            <p class="opacity-70">Testing cascading lookup: Specific &rarr; Account &rarr; Global</p>
+        </div>
+        <div class="flex gap-2">
+            <button class="btn variant-filled-warning" onclick={clear_cache}>
+                <span class="fas fa-trash mr-2"></span> Clear Cache
+            </button>
+            <button class="btn variant-filled-primary" onclick={() => refresh_trigger++}>
+                <span class="fas fa-sync mr-2"></span> Force Refresh
+            </button>
+        </div>
+    </header>
+
+    {#key refresh_trigger}
+    <section class="card p-4 space-y-4 variant-soft-primary">
+        <h2 class="h3">Scenario 1: Global Default</h2>
+        <p class="text-sm">Fetching code <code>{test_code_global}</code>. Should fall back to <code>account_id = NULL</code> if not found for account.</p>
+        <div class="bg-surface-100-800-token p-4 rounded-lg border border-surface-500/20">
+            <!-- <AE_Element_Data_Store_V3
+                ds_code={test_code_global}
+                ds_name={test_name_global}
+                {log_lvl}
+                debug={true}
+            /> -->
+        </div>
+    </section>
+
+    <section class="card p-4 space-y-4 variant-soft-secondary">
+        <h2 class="h3">Scenario 2: Account Default</h2>
+        <p class="text-sm">Fetching code <code>{test_code_account}</code> for Account ID: <code>{$ae_loc.account_id}</code>.</p>
+        <div class="bg-surface-100-800-token p-4 rounded-lg border border-surface-500/20">
+            <!-- <AE_Element_Data_Store_V3
+                ds_code={test_code_account}
+                ds_name={test_name_account}
+                {log_lvl}
+                debug={true}
+            /> -->
+        </div>
+    </section>
+
+    <section class="card p-4 space-y-4 variant-soft-tertiary">
+        <h2 class="h3">Scenario 3: Specific Record (Event Override)</h2>
+        <p class="text-sm">Fetching code <code>{test_code_specific}</code> linked to <code>for_type: event</code> and <code>for_id: {test_event_id}</code>.</p>
+        <div class="bg-surface-100-800-token p-4 rounded-lg border border-surface-500/20">
+            <!-- <AE_Element_Data_Store_V3
+                ds_code={test_code_specific}
+                ds_name={test_name_specific}
+                for_type="event"
+                for_id={test_event_id}
+                {log_lvl}
+                debug={true}
+            /> -->
+        </div>
+    </section>
+    {/key}
+
+    <section class="card p-4 space-y-4">
+        <h2 class="h3">Current Context</h2>
+        <div class="grid grid-cols-2 gap-4 text-xs font-mono">
+            <div class="bg-surface-900 text-success-500 p-2 rounded">
+                <strong>Account ID:</strong> {$ae_loc.account_id || 'NULL'}
+            </div>
+            <div class="bg-surface-900 text-success-500 p-2 rounded">
+                <strong>Edit Mode:</strong> {$ae_loc.edit_mode}
+            </div>
+        </div>
+    </section>
+</div>