Making the code easier to read and more consistent.

.prettierrc

@@ -4,6 +4,14 @@
     "singleQuote": true,
     "trailingComma": "none",
     "printWidth": 80,
-    "plugins": ["prettier-plugin-svelte"],
+    "bracketSameLine": true,
+
+    "svelteSortOrder": "options-scripts-markup-styles",
+    "svelteIndentScriptAndStyle": false,
+    "svelteAllowShorthand": true,
+    "plugins": [
+        "prettier-plugin-svelte",
+        "prettier-plugin-tailwindcss"
+    ],
     "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
 }

package-lock.json

@@ -1,12 +1,12 @@
 {
     "name": "osit-aether-app-svelte",
-    "version": "3.12.08",
+    "version": "3.00.05",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "osit-aether-app-svelte",
-            "version": "3.12.08",
+            "version": "3.00.05",
             "dependencies": {
                 "@codemirror/autocomplete": "^6.20.0",
                 "@codemirror/commands": "^6.10.0",
@@ -34,6 +34,7 @@
                 "lucide-svelte": "^0.*.0",
                 "marked": "^17.0.0",
                 "openai": "^6.10.0",
+                "prettier-plugin-tailwindcss": "^0.7.2",
                 "qrcode": "^1.5.4",
                 "shadcn-svelte": "^1.0.11",
                 "svelte-persisted-store": "^0.12.0",
@@ -6161,6 +6162,16 @@
                 }
             }
         },
+        "node_modules/postcss-load-config/node_modules/yaml": {
+            "version": "1.10.3",
+            "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.3.tgz",
+            "integrity": "sha512-vIYeF1u3CjlhAFekPPAk2h/Kv4T3mAkMox5OymRiJQB0spDP10LHvt+K7G9Ny6NuuMAb25/6n1qyUjAcGNf/AA==",
+            "dev": true,
+            "license": "ISC",
+            "engines": {
+                "node": ">= 6"
+            }
+        },
         "node_modules/postcss-safe-parser": {
             "version": "7.0.1",
             "resolved": "https://registry.npmjs.org/postcss-safe-parser/-/postcss-safe-parser-7.0.1.tgz",
@@ -6242,7 +6253,6 @@
             "version": "3.8.1",
             "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.8.1.tgz",
             "integrity": "sha512-UOnG6LftzbdaHZcKoPFtOcCKztrQ57WkHDeRD9t/PTQtmT0NHSeWWepj6pS0z/N7+08BHFDQVUrfmfMRcZwbMg==",
-            "dev": true,
             "license": "MIT",
             "bin": {
                 "prettier": "bin/prettier.cjs"
@@ -6258,13 +6268,91 @@
             "version": "3.5.1",
             "resolved": "https://registry.npmjs.org/prettier-plugin-svelte/-/prettier-plugin-svelte-3.5.1.tgz",
             "integrity": "sha512-65+fr5+cgIKWKiqM1Doum4uX6bY8iFCdztvvp2RcF+AJoieaw9kJOFMNcJo/bkmKYsxFaM9OsVZK/gWauG/5mg==",
-            "dev": true,
+            "devOptional": true,
             "license": "MIT",
             "peerDependencies": {
                 "prettier": "^3.0.0",
                 "svelte": "^3.2.0 || ^4.0.0-next.0 || ^5.0.0-next.0"
             }
         },
+        "node_modules/prettier-plugin-tailwindcss": {
+            "version": "0.7.2",
+            "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.7.2.tgz",
+            "integrity": "sha512-LkphyK3Fw+q2HdMOoiEHWf93fNtYJwfamoKPl7UwtjFQdei/iIBoX11G6j706FzN3ymX9mPVi97qIY8328vdnA==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=20.19"
+            },
+            "peerDependencies": {
+                "@ianvs/prettier-plugin-sort-imports": "*",
+                "@prettier/plugin-hermes": "*",
+                "@prettier/plugin-oxc": "*",
+                "@prettier/plugin-pug": "*",
+                "@shopify/prettier-plugin-liquid": "*",
+                "@trivago/prettier-plugin-sort-imports": "*",
+                "@zackad/prettier-plugin-twig": "*",
+                "prettier": "^3.0",
+                "prettier-plugin-astro": "*",
+                "prettier-plugin-css-order": "*",
+                "prettier-plugin-jsdoc": "*",
+                "prettier-plugin-marko": "*",
+                "prettier-plugin-multiline-arrays": "*",
+                "prettier-plugin-organize-attributes": "*",
+                "prettier-plugin-organize-imports": "*",
+                "prettier-plugin-sort-imports": "*",
+                "prettier-plugin-svelte": "*"
+            },
+            "peerDependenciesMeta": {
+                "@ianvs/prettier-plugin-sort-imports": {
+                    "optional": true
+                },
+                "@prettier/plugin-hermes": {
+                    "optional": true
+                },
+                "@prettier/plugin-oxc": {
+                    "optional": true
+                },
+                "@prettier/plugin-pug": {
+                    "optional": true
+                },
+                "@shopify/prettier-plugin-liquid": {
+                    "optional": true
+                },
+                "@trivago/prettier-plugin-sort-imports": {
+                    "optional": true
+                },
+                "@zackad/prettier-plugin-twig": {
+                    "optional": true
+                },
+                "prettier-plugin-astro": {
+                    "optional": true
+                },
+                "prettier-plugin-css-order": {
+                    "optional": true
+                },
+                "prettier-plugin-jsdoc": {
+                    "optional": true
+                },
+                "prettier-plugin-marko": {
+                    "optional": true
+                },
+                "prettier-plugin-multiline-arrays": {
+                    "optional": true
+                },
+                "prettier-plugin-organize-attributes": {
+                    "optional": true
+                },
+                "prettier-plugin-organize-imports": {
+                    "optional": true
+                },
+                "prettier-plugin-sort-imports": {
+                    "optional": true
+                },
+                "prettier-plugin-svelte": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/proxy-compare": {
             "version": "3.0.1",
             "resolved": "https://registry.npmjs.org/proxy-compare/-/proxy-compare-3.0.1.tgz",
@@ -7737,16 +7825,6 @@
             "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==",
             "license": "ISC"
         },
-        "node_modules/yaml": {
-            "version": "1.10.2",
-            "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
-            "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
-            "devOptional": true,
-            "license": "ISC",
-            "engines": {
-                "node": ">= 6"
-            }
-        },
         "node_modules/yargs": {
             "version": "15.4.1",
             "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz",

package.json

@@ -112,6 +112,7 @@
         "lucide-svelte": "^0.*.0",
         "marked": "^17.0.0",
         "openai": "^6.10.0",
+        "prettier-plugin-tailwindcss": "^0.7.2",
         "qrcode": "^1.5.4",
         "shadcn-svelte": "^1.0.11",
         "svelte-persisted-store": "^0.12.0",

src/routes/core/+layout.svelte

@@ -2,7 +2,18 @@
 import { onMount } from 'svelte';
 import { goto } from '$app/navigation';
 import { ae_loc, ae_sess, ae_api, slct } from '$lib/stores/ae_stores';
-    import { Building, Globe, History, LayoutDashboard, List, Lock, MapPin, Phone, ShieldCheck, Users } from '@lucide/svelte';
+import {
+    Building,
+    Globe,
+    History,
+    LayoutDashboard,
+    List,
+    Lock,
+    MapPin,
+    Phone,
+    ShieldCheck,
+    Users
+} from '@lucide/svelte';
 interface Props {
     data: any;
     children?: import('svelte').Snippet;
@@ -26,9 +37,11 @@
     <title>Core - {$ae_loc.title ?? 'Æ loading...'}</title>
 </svelte:head>
 
-<div class="ae_core h-full max-h-full max-w-6xl overflow-auto flex flex-col gap-1 m-auto p-4">
+<div
+    class="ae_core h-full max-h-full max-w-6xl overflow-auto flex flex-col gap-1 m-auto p-4">
     {#if $ae_loc.manager_access}
-        <nav class="flex flex-wrap gap-2 mb-6 border-b border-surface-500/30 pb-4">
+        <nav
+            class="flex flex-wrap gap-2 mb-6 border-b border-surface-500/30 pb-4">
             <a href="/core" class="btn btn-sm preset-tonal-surface">
                 <LayoutDashboard size={14} class="mr-1" /> Dashboard
             </a>
@@ -44,7 +57,9 @@
             <a href="/core/people" class="btn btn-sm preset-tonal-warning">
                 <Users size={14} class="mr-1" /> People
             </a>
-            <a href="/core/activity_logs" class="btn btn-sm preset-tonal-success">
+            <a
+                href="/core/activity_logs"
+                class="btn btn-sm preset-tonal-success">
                 <History size={14} class="mr-1" /> Logs
             </a>
             <a href="/core/addresses" class="btn btn-sm preset-tonal-surface">
@@ -62,14 +77,20 @@
             {@render children?.()}
         </section>
     {:else}
-        <section class="flex flex-col items-center justify-center grow text-center space-y-4 py-20">
+        <section
+            class="flex flex-col items-center justify-center grow text-center space-y-4 py-20">
             <div class="p-6 bg-error-500/10 rounded-full">
                 <Lock size={64} class="text-error-500" />
             </div>
             <h1 class="h1 font-black">Access Restricted</h1>
-            <p class="max-w-md opacity-70">The area you are trying to access is reserved for system managers. If you believe you should have access, please sign in with an authorized account.</p>
+            <p class="max-w-md opacity-70">
+                The area you are trying to access is reserved for system
+                managers. If you believe you should have access, please sign in
+                with an authorized account.
+            </p>
             <div class="flex gap-4 pt-4">
-                <a href="/" class="btn preset-filled-primary font-bold">Return Home</a>
+                <a href="/" class="btn preset-filled-primary font-bold"
+                    >Return Home</a>
             </div>
         </section>
     {/if}

src/routes/core/+page.svelte

@@ -1,5 +1,16 @@
 <script lang="ts">
-    import { Building, Globe, History, Landmark, LayoutDashboard, List, MapPin, Phone, ShieldCheck, Users } from '@lucide/svelte';
+import {
+    Building,
+    Globe,
+    History,
+    Landmark,
+    LayoutDashboard,
+    List,
+    MapPin,
+    Phone,
+    ShieldCheck,
+    Users
+} from '@lucide/svelte';
 import { ae_loc, slct } from '$lib/stores/ae_stores';
 
 interface Props {
@@ -9,153 +20,217 @@
 let { data }: Props = $props();
 
 // Quickly save the data passed from the parent(s)
-    $effect(() => { $slct.account_id = data.account_id; });
+$effect(() => {
+    $slct.account_id = data.account_id;
+});
 </script>
 
 <div class="container mx-auto p-4 space-y-8">
-    <header class="flex flex-wrap justify-between items-center bg-surface-50-900-token p-6 rounded-2xl shadow-xl border border-surface-500/10 gap-4">
+    <header
+        class="flex flex-wrap justify-between items-center bg-surface-50-900-token p-6 rounded-2xl shadow-xl border border-surface-500/10 gap-4">
         <div class="flex items-center gap-4">
             <div class="p-3 bg-primary-500/10 rounded-xl">
                 <LayoutDashboard size={32} class="text-primary-500" />
             </div>
             <div>
-                <h1 class="h2 font-black tracking-tight text-balance">Æ Core Management</h1>
+                <h1 class="h2 font-black tracking-tight text-balance">
-                <p class="text-xs font-bold opacity-50 uppercase tracking-widest">System Infrastructure & Identity</p>
+                    Æ Core Management
+                </h1>
+                <p
+                    class="text-xs font-bold opacity-50 uppercase tracking-widest">
+                    System Infrastructure & Identity
+                </p>
             </div>
         </div>
-        <div class="bg-black/5 p-3 rounded-xl border border-surface-500/10 min-w-50">
+        <div
-            <p class="text-[10px] opacity-60 uppercase font-black tracking-widest flex items-center gap-1 mb-1">
+            class="bg-black/5 p-3 rounded-xl border border-surface-500/10 min-w-50">
+            <p
+                class="text-[10px] opacity-60 uppercase font-black tracking-widest flex items-center gap-1 mb-1">
                 <Landmark size={10} /> Active Account
             </p>
-            <p class="font-bold text-sm">{$ae_loc.account_name ?? 'Loading...'}</p>
+            <p class="font-bold text-sm">
+                {$ae_loc.account_name ?? 'Loading...'}
+            </p>
         </div>
     </header>
 
-    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+    <div
+        class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
         <!-- Account Management Card -->
-        <div class="card p-6 space-y-4 preset-tonal-primary shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between">
+        <div
+            class="card p-6 space-y-4 preset-tonal-primary shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between">
             <div class="space-y-4">
                 <div class="flex items-center gap-3">
-                    <div class="p-2 bg-primary-500/20 rounded-lg group-hover:scale-110 transition-transform">
+                    <div
+                        class="p-2 bg-primary-500/20 rounded-lg group-hover:scale-110 transition-transform">
                         <Building size={24} />
                     </div>
                     <h3 class="h4 font-black">Accounts</h3>
                 </div>
-                <p class="text-sm opacity-80 leading-relaxed">Manage client accounts and high-level system settings.</p>
+                <p class="text-sm opacity-80 leading-relaxed">
+                    Manage client accounts and high-level system settings.
+                </p>
             </div>
-            <a class="btn preset-filled-primary font-bold shadow-md w-full mt-4" href="/core/accounts">
+            <a
+                class="btn preset-filled-primary font-bold shadow-md w-full mt-4"
+                href="/core/accounts">
                 Manage
             </a>
         </div>
 
         <!-- Site Management Card -->
-        <div class="card p-6 space-y-4 preset-tonal-secondary shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between">
+        <div
+            class="card p-6 space-y-4 preset-tonal-secondary shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between">
             <div class="space-y-4">
                 <div class="flex items-center gap-3">
-                    <div class="p-2 bg-secondary-500/20 rounded-lg group-hover:scale-110 transition-transform">
+                    <div
+                        class="p-2 bg-secondary-500/20 rounded-lg group-hover:scale-110 transition-transform">
                         <Globe size={24} />
                     </div>
                     <h3 class="h4 font-black">Sites</h3>
                 </div>
-                <p class="text-sm opacity-80 leading-relaxed">Configure sites and domains associated with the active account.</p>
+                <p class="text-sm opacity-80 leading-relaxed">
+                    Configure sites and domains associated with the active
+                    account.
+                </p>
             </div>
-            <a class="btn preset-filled-secondary font-bold shadow-md w-full mt-4" href="/core/sites">
+            <a
+                class="btn preset-filled-secondary font-bold shadow-md w-full mt-4"
+                href="/core/sites">
                 Manage
             </a>
         </div>
 
         <!-- User Management Card -->
-        <div class="card p-6 space-y-4 preset-tonal-error shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between">
+        <div
+            class="card p-6 space-y-4 preset-tonal-error shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between">
             <div class="space-y-4">
                 <div class="flex items-center gap-3">
-                    <div class="p-2 bg-error-500/20 rounded-lg group-hover:scale-110 transition-transform">
+                    <div
+                        class="p-2 bg-error-500/20 rounded-lg group-hover:scale-110 transition-transform">
                         <ShieldCheck size={24} />
                     </div>
                     <h3 class="h4 font-black">Users</h3>
                 </div>
-                <p class="text-sm opacity-80 leading-relaxed">Manage system access, permissions, and user credentials.</p>
+                <p class="text-sm opacity-80 leading-relaxed">
+                    Manage system access, permissions, and user credentials.
+                </p>
             </div>
-            <a class="btn preset-filled-error font-bold shadow-md w-full mt-4" href="/core/users">
+            <a
+                class="btn preset-filled-error font-bold shadow-md w-full mt-4"
+                href="/core/users">
                 Manage
             </a>
         </div>
 
         <!-- Person Management Card -->
-        <div class="card p-6 space-y-4 preset-tonal-warning shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between">
+        <div
+            class="card p-6 space-y-4 preset-tonal-warning shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between">
             <div class="space-y-4">
                 <div class="flex items-center gap-3">
-                    <div class="p-2 bg-warning-500/20 rounded-lg group-hover:scale-110 transition-transform">
+                    <div
+                        class="p-2 bg-warning-500/20 rounded-lg group-hover:scale-110 transition-transform">
                         <Users size={24} />
                     </div>
                     <h3 class="h4 font-black">People</h3>
                 </div>
-                <p class="text-sm opacity-80 leading-relaxed">Search and manage person records and their user linking.</p>
+                <p class="text-sm opacity-80 leading-relaxed">
+                    Search and manage person records and their user linking.
+                </p>
             </div>
-            <a class="btn preset-filled-warning font-bold shadow-md w-full mt-4" href="/core/people">
+            <a
+                class="btn preset-filled-warning font-bold shadow-md w-full mt-4"
+                href="/core/people">
                 Manage
             </a>
         </div>
 
         <!-- Address Management Card -->
-        <div class="card p-6 space-y-4 preset-tonal-surface shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between border border-surface-500/10">
+        <div
+            class="card p-6 space-y-4 preset-tonal-surface shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between border border-surface-500/10">
             <div class="space-y-4">
                 <div class="flex items-center gap-3">
-                    <div class="p-2 bg-surface-500/20 rounded-lg group-hover:scale-110 transition-transform">
+                    <div
+                        class="p-2 bg-surface-500/20 rounded-lg group-hover:scale-110 transition-transform">
                         <MapPin size={24} />
                     </div>
                     <h3 class="h4 font-black">Addresses</h3>
                 </div>
-                <p class="text-sm opacity-80 leading-relaxed">Manage physical locations, shipping, and billing addresses.</p>
+                <p class="text-sm opacity-80 leading-relaxed">
+                    Manage physical locations, shipping, and billing addresses.
+                </p>
             </div>
-            <a class="btn preset-filled-surface font-bold shadow-md w-full mt-4" href="/core/addresses">
+            <a
+                class="btn preset-filled-surface font-bold shadow-md w-full mt-4"
+                href="/core/addresses">
                 Manage
             </a>
         </div>
 
         <!-- Contact Management Card -->
-        <div class="card p-6 space-y-4 preset-tonal-surface shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between border border-surface-500/10">
+        <div
+            class="card p-6 space-y-4 preset-tonal-surface shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between border border-surface-500/10">
             <div class="space-y-4">
                 <div class="flex items-center gap-3">
-                    <div class="p-2 bg-surface-500/20 rounded-lg group-hover:scale-110 transition-transform">
+                    <div
+                        class="p-2 bg-surface-500/20 rounded-lg group-hover:scale-110 transition-transform">
                         <Phone size={24} />
                     </div>
                     <h3 class="h4 font-black">Contacts</h3>
                 </div>
-                <p class="text-sm opacity-80 leading-relaxed">Maintain support contacts, office numbers, and digital links.</p>
+                <p class="text-sm opacity-80 leading-relaxed">
+                    Maintain support contacts, office numbers, and digital
+                    links.
+                </p>
             </div>
-            <a class="btn preset-filled-surface font-bold shadow-md w-full mt-4" href="/core/contacts">
+            <a
+                class="btn preset-filled-surface font-bold shadow-md w-full mt-4"
+                href="/core/contacts">
                 Manage
             </a>
         </div>
 
         <!-- Activity Log Card -->
-        <div class="card p-6 space-y-4 preset-tonal-success shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between">
+        <div
+            class="card p-6 space-y-4 preset-tonal-success shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between">
             <div class="space-y-4">
                 <div class="flex items-center gap-3">
-                    <div class="p-2 bg-success-500/20 rounded-lg group-hover:scale-110 transition-transform">
+                    <div
+                        class="p-2 bg-success-500/20 rounded-lg group-hover:scale-110 transition-transform">
                         <History size={24} />
                     </div>
                     <h3 class="h4 font-black">Activity Logs</h3>
                 </div>
-                <p class="text-sm opacity-80 leading-relaxed">Monitor system actions and historical changes for the account.</p>
+                <p class="text-sm opacity-80 leading-relaxed">
+                    Monitor system actions and historical changes for the
+                    account.
+                </p>
             </div>
-            <a class="btn preset-filled-success font-bold shadow-md w-full mt-4" href="/core/activity_logs">
+            <a
+                class="btn preset-filled-success font-bold shadow-md w-full mt-4"
+                href="/core/activity_logs">
                 View Logs
             </a>
         </div>
 
         <!-- Lookups Card -->
-        <div class="card p-6 space-y-4 preset-tonal-surface shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between border border-surface-500/10">
+        <div
+            class="card p-6 space-y-4 preset-tonal-surface shadow-lg hover:brightness-110 transition-all group flex flex-col justify-between border border-surface-500/10">
             <div class="space-y-4">
                 <div class="flex items-center gap-3">
-                    <div class="p-2 bg-surface-500/20 rounded-lg group-hover:scale-110 transition-transform">
+                    <div
+                        class="p-2 bg-surface-500/20 rounded-lg group-hover:scale-110 transition-transform">
                         <List size={24} />
                     </div>
                     <h3 class="h4 font-black">Lookups</h3>
                 </div>
-                <p class="text-sm opacity-80 leading-relaxed">View system lookup tables (countries, time zones, etc).</p>
+                <p class="text-sm opacity-80 leading-relaxed">
+                    View system lookup tables (countries, time zones, etc).
+                </p>
             </div>
-            <a class="btn preset-filled-surface font-bold shadow-md w-full mt-4" href="/core/lookups">
+            <a
+                class="btn preset-filled-surface font-bold shadow-md w-full mt-4"
+                href="/core/lookups">
                 View
             </a>
         </div>

src/routes/core/accounts/+page.svelte

@@ -1,9 +1,23 @@
 <script lang="ts">
 import { onMount } from 'svelte';
-    import { load_ae_obj_li__account, create_ae_obj__account } from '$lib/ae_core/ae_core__account';
+import {
+    load_ae_obj_li__account,
+    create_ae_obj__account
+} from '$lib/ae_core/ae_core__account';
 import { ae_api, ae_loc, slct } from '$lib/stores/ae_stores';
 import { goto } from '$app/navigation';
-    import { Building, Calendar, ExternalLink, FileText, ListFilter, Plus, RefreshCcw, Search, ShieldCheck, X } from '@lucide/svelte';
+import {
+    Building,
+    Calendar,
+    ExternalLink,
+    FileText,
+    ListFilter,
+    Plus,
+    RefreshCcw,
+    Search,
+    ShieldCheck,
+    X
+} from '@lucide/svelte';
 let account_li: any[] = $state([]);
 let loading = $state(true);
 let qry_enabled = $state('all');
@@ -12,7 +26,8 @@
 
 let filtered_li = $derived(
     qry_str
-            ? account_li.filter(a =>
+        ? account_li.filter(
+              (a) =>
                   a.name?.toLowerCase().includes(qry_str.toLowerCase()) ||
                   a.code?.toLowerCase().includes(qry_str.toLowerCase())
           )
@@ -57,40 +72,54 @@
 </script>
 
 <div class="container mx-auto p-4 space-y-6">
-    <header class="flex flex-wrap justify-between items-center bg-surface-50-900-token p-4 rounded-xl shadow-lg border border-surface-500/10 gap-4">
+    <header
+        class="flex flex-wrap justify-between items-center bg-surface-50-900-token p-4 rounded-xl shadow-lg border border-surface-500/10 gap-4">
         <div class="flex items-center gap-3">
             <div class="p-2 bg-primary-500/10 rounded-lg">
                 <Building size={24} class="text-primary-500" />
             </div>
             <div>
                 <h1 class="h2 font-black tracking-tight">Account Management</h1>
-                <p class="text-xs font-bold opacity-50 uppercase tracking-widest">Client Entities & Billing</p>
+                <p
+                    class="text-xs font-bold opacity-50 uppercase tracking-widest">
+                    Client Entities & Billing
+                </p>
             </div>
         </div>
-        <button class="btn btn-sm preset-filled-primary font-bold shadow-lg" onclick={handle_add_account}>
+        <button
+            class="btn btn-sm preset-filled-primary font-bold shadow-lg"
+            onclick={handle_add_account}>
             <Plus size={16} class="mr-2" /> Add Account
         </button>
     </header>
 
-    <div class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10 space-y-4">
+    <div
+        class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10 space-y-4">
         <div class="flex flex-wrap gap-6 items-end">
             <div class="flex-1 min-w-[280px] space-y-1">
-                <span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Search Accounts</span>
+                <span
-                <div class="flex bg-surface-200-700-token rounded-lg overflow-hidden border border-surface-500/20 shadow-inner group focus-within:ring-2 focus-within:ring-primary-500/50 transition-all">
+                    class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1"
-                    <div class="flex items-center justify-center px-4 bg-surface-300-600-token border-r border-surface-500/20">
+                    >Search Accounts</span>
+                <div
+                    class="flex bg-surface-200-700-token rounded-lg overflow-hidden border border-surface-500/20 shadow-inner group focus-within:ring-2 focus-within:ring-primary-500/50 transition-all">
+                    <div
+                        class="flex items-center justify-center px-4 bg-surface-300-600-token border-r border-surface-500/20">
                         <Search size={18} class="opacity-50" />
                     </div>
                     <input
                         class="bg-transparent border-0 ring-0 focus:ring-0 p-3 grow placeholder:opacity-50"
                         type="search"
                         bind:value={qry_str}
-                        placeholder="Search by name or code..."
+                        placeholder="Search by name or code..." />
-                    />
+                    <button
-                    <button class="preset-filled-primary font-bold px-10 py-3 hover:brightness-110 transition-all border-l border-surface-500/20 flex items-center justify-center min-w-[100px]" onclick={load_accounts} disabled={loading}>
+                        class="preset-filled-primary font-bold px-10 py-3 hover:brightness-110 transition-all border-l border-surface-500/20 flex items-center justify-center min-w-[100px]"
+                        onclick={load_accounts}
+                        disabled={loading}>
                         {#if loading}
                             <span class="animate-spin text-xl">⏳</span>
                         {:else}
-                            <span class="whitespace-nowrap tracking-wide">Refresh</span>
+                            <span class="whitespace-nowrap tracking-wide"
+                                >Refresh</span>
                         {/if}
                     </button>
                 </div>
@@ -98,8 +127,13 @@
 
             <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                 <div class="space-y-1">
-                    <span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Status</span>
+                    <span
-                    <select class="select preset-filled-surface rounded-lg text-sm border border-surface-500/20 p-2" bind:value={qry_enabled} onchange={load_accounts}>
+                        class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1"
+                        >Status</span>
+                    <select
+                        class="select preset-filled-surface rounded-lg text-sm border border-surface-500/20 p-2"
+                        bind:value={qry_enabled}
+                        onchange={load_accounts}>
                         <option value="all">All Statuses</option>
                         <option value="enabled">Enabled Only</option>
                         <option value="not_enabled">Disabled Only</option>
@@ -107,8 +141,13 @@
                 </div>
 
                 <div class="space-y-1">
-                    <span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Visibility</span>
+                    <span
-                    <select class="select preset-filled-surface rounded-lg text-sm border border-surface-500/20 p-2" bind:value={qry_hidden} onchange={load_accounts}>
+                        class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1"
+                        >Visibility</span>
+                    <select
+                        class="select preset-filled-surface rounded-lg text-sm border border-surface-500/20 p-2"
+                        bind:value={qry_hidden}
+                        onchange={load_accounts}>
                         <option value="all">All Visibility</option>
                         <option value="not_hidden">Not Hidden Only</option>
                         <option value="hidden">Hidden Only</option>
@@ -120,56 +159,87 @@
 
     {#if loading}
         <div class="card p-8 flex justify-center items-center h-64">
-            <div class="placeholder animate-pulse w-full h-full rounded-2xl"></div>
+            <div class="placeholder animate-pulse w-full h-full rounded-2xl">
+            </div>
         </div>
     {:else if filtered_li.length === 0}
-        <div class="card p-12 text-center preset-tonal-surface border-2 border-dashed border-surface-500/20 rounded-2xl">
+        <div
+            class="card p-12 text-center preset-tonal-surface border-2 border-dashed border-surface-500/20 rounded-2xl">
             <Building size={48} class="mx-auto mb-4 opacity-20" />
             <h3 class="h3 font-bold opacity-50">No Accounts Found</h3>
-            <p class="opacity-60 max-w-xs mx-auto mt-2">Try adjusting your filters or add a new client account.</p>
+            <p class="opacity-60 max-w-xs mx-auto mt-2">
+                Try adjusting your filters or add a new client account.
+            </p>
         </div>
     {:else}
-        <div class="card p-6 preset-tonal-surface shadow-xl border border-surface-500/10">
+        <div
-            <h3 class="h4 font-bold border-b border-surface-500/30 pb-2 mb-6 flex items-center gap-2">
+            class="card p-6 preset-tonal-surface shadow-xl border border-surface-500/10">
+            <h3
+                class="h4 font-bold border-b border-surface-500/30 pb-2 mb-6 flex items-center gap-2">
                 <ListFilter size={18} class="text-secondary-500" />
                 Directory Results
-                <span class="badge preset-tonal-secondary ml-auto">{filtered_li.length} found</span>
+                <span class="badge preset-tonal-secondary ml-auto"
+                    >{filtered_li.length} found</span>
             </h3>
 
             <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                 {#each filtered_li as acct (acct.account_id_random)}
-                    <div class="card p-5 space-y-4 preset-tonal-surface shadow-md border border-surface-500/10 hover:border-primary-500/30 transition-all group relative">
+                    <div
+                        class="card p-5 space-y-4 preset-tonal-surface shadow-md border border-surface-500/10 hover:border-primary-500/30 transition-all group relative">
                         <div class="absolute top-4 right-4 flex gap-1">
                             {#if acct.hide}
-                                <span class="badge preset-filled-warning text-[8px] uppercase font-bold shadow-sm">Hidden</span>
+                                <span
+                                    class="badge preset-filled-warning text-[8px] uppercase font-bold shadow-sm"
+                                    >Hidden</span>
                             {/if}
-                            <span class="badge {acct.enable ? 'preset-filled-success' : 'preset-filled-error'} text-[8px] uppercase font-bold shadow-sm">
+                            <span
+                                class="badge {acct.enable
+                                    ? 'preset-filled-success'
+                                    : 'preset-filled-error'} text-[8px] uppercase font-bold shadow-sm">
                                 {acct.enable ? 'Active' : 'Disabled'}
                             </span>
                         </div>
 
                         <header class="flex items-center gap-3">
-                            <div class="avatar preset-filled-primary w-12 h-12 flex items-center justify-center rounded-lg shadow-inner group-hover:scale-110 transition-transform">
+                            <div
+                                class="avatar preset-filled-primary w-12 h-12 flex items-center justify-center rounded-lg shadow-inner group-hover:scale-110 transition-transform">
                                 <Building size={24} />
                             </div>
                             <div class="pr-12">
-                                <p class="font-black tracking-tight truncate">{acct.name}</p>
+                                <p class="font-black tracking-tight truncate">
-                                <p class="text-[10px] uppercase font-bold opacity-50 font-mono tracking-tighter">Code: {acct.code || '--'}</p>
+                                    {acct.name}
+                                </p>
+                                <p
+                                    class="text-[10px] uppercase font-bold opacity-50 font-mono tracking-tighter">
+                                    Code: {acct.code || '--'}
+                                </p>
                             </div>
                         </header>
 
                         <div class="space-y-2 text-xs opacity-70">
-                            <div class="flex items-center gap-2 bg-black/5 p-2 rounded-lg">
+                            <div
-                                <Calendar size={14} class="text-primary-500 shrink-0" />
+                                class="flex items-center gap-2 bg-black/5 p-2 rounded-lg">
-                                <span>Created: {new Date(acct.created_on).toLocaleDateString()}</span>
+                                <Calendar
+                                    size={14}
+                                    class="text-primary-500 shrink-0" />
+                                <span
+                                    >Created: {new Date(
+                                        acct.created_on
+                                    ).toLocaleDateString()}</span>
                             </div>
-                            <div class="flex items-center gap-2 bg-black/5 p-2 rounded-lg">
+                            <div
-                                <ShieldCheck size={14} class="text-secondary-500 shrink-0" />
+                                class="flex items-center gap-2 bg-black/5 p-2 rounded-lg">
-                                <span class="font-mono truncate">{acct.account_id_random}</span>
+                                <ShieldCheck
+                                    size={14}
+                                    class="text-secondary-500 shrink-0" />
+                                <span class="font-mono truncate"
+                                    >{acct.account_id_random}</span>
                             </div>
                         </div>
 
-                        <a class="btn btn-sm preset-filled-primary font-bold w-full shadow-lg group-hover:brightness-110 transition-all" href="/core/accounts/{acct.account_id_random}">
+                        <a
+                            class="btn btn-sm preset-filled-primary font-bold w-full shadow-lg group-hover:brightness-110 transition-all"
+                            href="/core/accounts/{acct.account_id_random}">
                             Manage Account
                         </a>
                     </div>

src/routes/core/accounts/[account_id]/+page.svelte

@@ -1,11 +1,23 @@
 <script lang="ts">
 import { onMount } from 'svelte';
 import { page } from '$app/stores';
-    import { load_ae_obj_id__account, update_ae_obj__account, delete_ae_obj_id__account } from '$lib/ae_core/ae_core__account';
+import {
+    load_ae_obj_id__account,
+    update_ae_obj__account,
+    delete_ae_obj_id__account
+} from '$lib/ae_core/ae_core__account';
 import { editable_fields__account } from '$lib/ae_core/ae_core__account.editable_fields';
 import { ae_api, ae_loc } from '$lib/stores/ae_stores';
 import { goto } from '$app/navigation';
-    import { Activity, ArrowLeft, Building, Info, Save, Settings, Trash2 } from '@lucide/svelte';
+import {
+    Activity,
+    ArrowLeft,
+    Building,
+    Info,
+    Save,
+    Settings,
+    Trash2
+} from '@lucide/svelte';
 let account_id = $derived($page.params.account_id ?? '');
 let account: any = $state(null);
 let loading = $state(true);
@@ -33,7 +45,7 @@
     saving = true;
     // Filter fields to only include editable ones
     const data_kv: any = {};
-        editable_fields__account.forEach(field => {
+    editable_fields__account.forEach((field) => {
         if (account[field] !== undefined) {
             data_kv[field] = account[field];
         }
@@ -69,23 +81,34 @@
 </script>
 
 <div class="container mx-auto p-4 space-y-6">
-    <header class="flex justify-between items-center bg-surface-50-900-token p-4 rounded-xl shadow-lg border border-surface-500/10">
+    <header
+        class="flex justify-between items-center bg-surface-50-900-token p-4 rounded-xl shadow-lg border border-surface-500/10">
         <div class="flex items-center gap-4">
-            <a class="btn btn-sm preset-tonal-surface shadow-sm" href="/core/accounts">
+            <a
+                class="btn btn-sm preset-tonal-surface shadow-sm"
+                href="/core/accounts">
                 <ArrowLeft size={16} />
             </a>
             <div class="flex items-center gap-2">
                 <div class="p-2 bg-primary-500/10 rounded-lg">
                     <Building size={24} class="text-primary-500" />
                 </div>
-                <h1 class="h2 font-black tracking-tight">{account?.name ?? 'Loading...'}</h1>
+                <h1 class="h2 font-black tracking-tight">
+                    {account?.name ?? 'Loading...'}
+                </h1>
             </div>
         </div>
         <div class="flex gap-2">
-            <button class="btn btn-sm preset-filled-error font-bold shadow-lg" onclick={handle_delete} disabled={loading || saving}>
+            <button
+                class="btn btn-sm preset-filled-error font-bold shadow-lg"
+                onclick={handle_delete}
+                disabled={loading || saving}>
                 <Trash2 size={16} class="mr-2" /> Disable
             </button>
-            <button class="btn btn-sm preset-filled-primary font-bold shadow-lg" onclick={handle_save} disabled={loading || saving}>
+            <button
+                class="btn btn-sm preset-filled-primary font-bold shadow-lg"
+                onclick={handle_save}
+                disabled={loading || saving}>
                 {#if saving}
                     <span class="animate-spin mr-2">⏳</span>
                 {:else}
@@ -98,70 +121,129 @@
 
     {#if loading}
         <div class="card p-8 flex justify-center items-center h-64">
-            <div class="placeholder animate-pulse w-full h-full rounded-2xl"></div>
+            <div class="placeholder animate-pulse w-full h-full rounded-2xl">
+            </div>
         </div>
     {:else if account}
         <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-            <div class="card p-6 space-y-4 shadow-xl preset-tonal-surface border border-surface-500/10">
+            <div
-                <h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
+                class="card p-6 space-y-4 shadow-xl preset-tonal-surface border border-surface-500/10">
+                <h3
+                    class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
                     <Info size={18} class="text-primary-500" /> Basic Information
                 </h3>
                 <div class="space-y-4">
                     <div class="space-y-1">
-                        <span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Account Name</span>
+                        <span
-                        <input class="input preset-filled-surface rounded-lg p-3" type="text" bind:value={account.name} />
+                            class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1"
+                            >Account Name</span>
+                        <input
+                            class="input preset-filled-surface rounded-lg p-3"
+                            type="text"
+                            bind:value={account.name} />
                     </div>
                     <div class="space-y-1">
-                        <span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Short Name</span>
+                        <span
-                        <input class="input preset-filled-surface rounded-lg p-3" type="text" bind:value={account.short_name} />
+                            class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1"
+                            >Short Name</span>
+                        <input
+                            class="input preset-filled-surface rounded-lg p-3"
+                            type="text"
+                            bind:value={account.short_name} />
                     </div>
                     <div class="space-y-1">
-                        <span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Account Code</span>
+                        <span
-                        <input class="input preset-filled-surface rounded-lg font-mono p-3" type="text" bind:value={account.code} />
+                            class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1"
+                            >Account Code</span>
+                        <input
+                            class="input preset-filled-surface rounded-lg font-mono p-3"
+                            type="text"
+                            bind:value={account.code} />
                     </div>
                     <div class="space-y-1">
-                        <span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Description</span>
+                        <span
-                        <textarea class="textarea preset-filled-surface rounded-lg p-3" rows="3" bind:value={account.description}></textarea>
+                            class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1"
+                            >Description</span>
+                        <textarea
+                            class="textarea preset-filled-surface rounded-lg p-3"
+                            rows="3"
+                            bind:value={account.description}></textarea>
                     </div>
                 </div>
             </div>
 
-            <div class="card p-6 space-y-4 shadow-xl preset-tonal-surface border border-surface-500/10">
+            <div
-                <h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
+                class="card p-6 space-y-4 shadow-xl preset-tonal-surface border border-surface-500/10">
+                <h3
+                    class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
                     <Settings size={18} class="text-secondary-500" /> Settings & Status
                 </h3>
                 <div class="flex flex-col gap-4 py-2">
-                    <label class="flex items-center space-x-3 cursor-pointer group">
+                    <label
-                        <input class="checkbox" type="checkbox" bind:checked={account.enable} />
+                        class="flex items-center space-x-3 cursor-pointer group">
-                        <span class="text-sm font-bold opacity-70 group-hover:opacity-100 transition-opacity">Enabled</span>
+                        <input
+                            class="checkbox"
+                            type="checkbox"
+                            bind:checked={account.enable} />
+                        <span
+                            class="text-sm font-bold opacity-70 group-hover:opacity-100 transition-opacity"
+                            >Enabled</span>
                     </label>
-                    <label class="flex items-center space-x-3 cursor-pointer group">
+                    <label
-                        <input class="checkbox" type="checkbox" bind:checked={account.hide} />
+                        class="flex items-center space-x-3 cursor-pointer group">
-                        <span class="text-sm font-bold opacity-70 group-hover:opacity-100 transition-opacity">Hidden</span>
+                        <input
+                            class="checkbox"
+                            type="checkbox"
+                            bind:checked={account.hide} />
+                        <span
+                            class="text-sm font-bold opacity-70 group-hover:opacity-100 transition-opacity"
+                            >Hidden</span>
                     </label>
-                    <label class="flex items-center space-x-3 cursor-pointer group">
+                    <label
-                        <input class="checkbox" type="checkbox" bind:checked={account.priority} />
+                        class="flex items-center space-x-3 cursor-pointer group">
-                        <span class="text-sm font-bold opacity-70 group-hover:opacity-100 transition-opacity">Priority Account</span>
+                        <input
+                            class="checkbox"
+                            type="checkbox"
+                            bind:checked={account.priority} />
+                        <span
+                            class="text-sm font-bold opacity-70 group-hover:opacity-100 transition-opacity"
+                            >Priority Account</span>
                     </label>
                 </div>
                 <div class="space-y-4 border-t border-surface-500/30 pt-4">
                     <div class="space-y-1">
-                        <span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Group</span>
+                        <span
-                        <input class="input preset-filled-surface rounded-lg p-3" type="text" bind:value={account.group} />
+                            class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1"
+                            >Group</span>
+                        <input
+                            class="input preset-filled-surface rounded-lg p-3"
+                            type="text"
+                            bind:value={account.group} />
                     </div>
                     <div class="space-y-1">
-                        <span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Sort Order</span>
+                        <span
-                        <input class="input preset-filled-surface rounded-lg p-3" type="number" bind:value={account.sort} />
+                            class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1"
+                            >Sort Order</span>
+                        <input
+                            class="input preset-filled-surface rounded-lg p-3"
+                            type="number"
+                            bind:value={account.sort} />
                     </div>
                 </div>
             </div>
 
-            <div class="card p-6 space-y-4 md:col-span-2 shadow-xl preset-tonal-surface border border-surface-500/10">
+            <div
-                <h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
+                class="card p-6 space-y-4 md:col-span-2 shadow-xl preset-tonal-surface border border-surface-500/10">
+                <h3
+                    class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
                     <Activity size={18} class="text-tertiary-500" /> Internal Notes
                 </h3>
                 <div class="space-y-1">
-                    <textarea class="textarea preset-filled-surface rounded-lg p-3" rows="4" bind:value={account.notes} placeholder="Private notes for staff..."></textarea>
+                    <textarea
+                        class="textarea preset-filled-surface rounded-lg p-3"
+                        rows="4"
+                        bind:value={account.notes}
+                        placeholder="Private notes for staff..."></textarea>
                 </div>
             </div>
         </div>

src/routes/core/activity_logs/+page.svelte

@@ -3,7 +3,18 @@
 import { onMount } from 'svelte';
 import { qry__activity_log } from '$lib/ae_core/ae_core__activity_log';
 import { ae_api, ae_loc } from '$lib/stores/ae_stores';
-    import { Activity, Calendar, Clock, History, ListFilter, RefreshCcw, Search, ShieldCheck, Tag, User } from '@lucide/svelte';
+import {
+    Activity,
+    Calendar,
+    Clock,
+    History,
+    ListFilter,
+    RefreshCcw,
+    Search,
+    ShieldCheck,
+    Tag,
+    User
+} from '@lucide/svelte';
 import { ae_util } from '$lib/ae_utils/ae_utils';
 
 // State
@@ -47,18 +58,25 @@
 </script>
 
 <div class="container mx-auto p-4 space-y-6">
-    <header class="flex flex-wrap justify-between items-center bg-surface-50-900-token p-4 rounded-xl shadow-lg border border-surface-500/10 gap-4">
+    <header
+        class="flex flex-wrap justify-between items-center bg-surface-50-900-token p-4 rounded-xl shadow-lg border border-surface-500/10 gap-4">
         <div class="flex items-center gap-3">
             <div class="p-2 bg-primary-500/10 rounded-lg">
                 <History size={24} class="text-primary-500" />
             </div>
             <div>
                 <h1 class="h2 font-black tracking-tight">Activity Logs</h1>
-                <p class="text-xs font-bold opacity-50 uppercase tracking-widest">Audit Trail & History</p>
+                <p
+                    class="text-xs font-bold opacity-50 uppercase tracking-widest">
+                    Audit Trail & History
+                </p>
             </div>
         </div>
         <div class="flex gap-2">
-            <button class="btn btn-sm preset-filled-primary font-bold shadow-lg" onclick={load_logs} disabled={loading}>
+            <button
+                class="btn btn-sm preset-filled-primary font-bold shadow-lg"
+                onclick={load_logs}
+                disabled={loading}>
                 {#if loading}
                     <RefreshCcw size={16} class="mr-2 animate-spin" /> Updating...
                 {:else}
@@ -69,29 +87,43 @@
     </header>
 
     <!-- Filter Bar -->
-    <div class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10 space-y-4">
+    <div
+        class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10 space-y-4">
         <div class="flex flex-wrap gap-6 items-end">
             <div class="flex-1 min-w-[280px] space-y-1">
-                <span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Search Keywords</span>
+                <span
-                <form onsubmit={handle_search} class="flex bg-surface-200-700-token rounded-lg overflow-hidden border border-surface-500/20 shadow-inner group focus-within:ring-2 focus-within:ring-primary-500/50 transition-all">
+                    class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1"
-                    <div class="flex items-center justify-center px-4 bg-surface-300-600-token border-r border-surface-500/20">
+                    >Search Keywords</span>
+                <form
+                    onsubmit={handle_search}
+                    class="flex bg-surface-200-700-token rounded-lg overflow-hidden border border-surface-500/20 shadow-inner group focus-within:ring-2 focus-within:ring-primary-500/50 transition-all">
+                    <div
+                        class="flex items-center justify-center px-4 bg-surface-300-600-token border-r border-surface-500/20">
                         <Search size={18} class="opacity-50" />
                     </div>
                     <input
                         class="bg-transparent border-0 ring-0 focus:ring-0 p-3 grow placeholder:opacity-50"
                         type="search"
                         bind:value={qry_str}
-                        placeholder="Action, name, description..."
+                        placeholder="Action, name, description..." />
-                    />
+                    <button
-                    <button type="submit" class="preset-filled-primary font-bold px-10 py-3 hover:brightness-110 transition-all border-l border-surface-500/20 flex items-center justify-center min-w-[100px]" disabled={loading}>
+                        type="submit"
-                        <span class="whitespace-nowrap tracking-wide">Search</span>
+                        class="preset-filled-primary font-bold px-10 py-3 hover:brightness-110 transition-all border-l border-surface-500/20 flex items-center justify-center min-w-[100px]"
+                        disabled={loading}>
+                        <span class="whitespace-nowrap tracking-wide"
+                            >Search</span>
                     </button>
                 </form>
             </div>
 
             <div class="space-y-1">
-                <span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Display Limit</span>
+                <span
-                <select class="select preset-filled-surface rounded-lg text-sm border border-surface-500/20 p-2" bind:value={limit} onchange={load_logs}>
+                    class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1"
+                    >Display Limit</span>
+                <select
+                    class="select preset-filled-surface rounded-lg text-sm border border-surface-500/20 p-2"
+                    bind:value={limit}
+                    onchange={load_logs}>
                     <option value={25}>Latest 25</option>
                     <option value={50}>Latest 50</option>
                     <option value={100}>Latest 100</option>
@@ -103,26 +135,34 @@
 
     {#if loading}
         <div class="card p-8 flex justify-center items-center h-64">
-            <div class="placeholder animate-pulse w-full h-full rounded-2xl"></div>
+            <div class="placeholder animate-pulse w-full h-full rounded-2xl">
+            </div>
         </div>
     {:else if log_li.length === 0}
-        <div class="card p-12 text-center preset-tonal-surface border-2 border-dashed border-surface-500/20 rounded-2xl">
+        <div
+            class="card p-12 text-center preset-tonal-surface border-2 border-dashed border-surface-500/20 rounded-2xl">
             <Activity size={48} class="mx-auto mb-4 opacity-20" />
             <h3 class="h3 font-bold opacity-50">No Logs Found</h3>
-            <p class="opacity-60 max-w-xs mx-auto mt-2">Try broadening your search or check another account.</p>
+            <p class="opacity-60 max-w-xs mx-auto mt-2">
+                Try broadening your search or check another account.
+            </p>
         </div>
     {:else}
-        <div class="card p-6 preset-tonal-surface shadow-xl border border-surface-500/10">
+        <div
-            <h3 class="h4 font-bold border-b border-surface-500/30 pb-2 mb-6 flex items-center gap-2">
+            class="card p-6 preset-tonal-surface shadow-xl border border-surface-500/10">
+            <h3
+                class="h4 font-bold border-b border-surface-500/30 pb-2 mb-6 flex items-center gap-2">
                 <ListFilter size={18} class="text-secondary-500" />
                 System Events
-                <span class="badge preset-tonal-secondary ml-auto">{log_li.length} entries shown</span>
+                <span class="badge preset-tonal-secondary ml-auto"
+                    >{log_li.length} entries shown</span>
             </h3>
 
             <div class="table-container">
                 <table class="table table-hover">
                     <thead>
-                        <tr class="uppercase text-[10px] tracking-widest opacity-60">
+                        <tr
+                            class="uppercase text-[10px] tracking-widest opacity-60">
                             <th>Timestamp</th>
                             <th>Identity</th>
                             <th>Action</th>
@@ -136,11 +176,22 @@
                                 <!-- Date/Time -->
                                 <td class="whitespace-nowrap">
                                     <div class="flex items-center gap-2">
-                                        <Calendar size={14} class="opacity-40" />
+                                        <Calendar
+                                            size={14}
+                                            class="opacity-40" />
                                         <div class="flex flex-col">
-                                            <span class="font-bold">{ae_util.iso_datetime_formatter(log.created_on, 'date_short')}</span>
+                                            <span class="font-bold"
-                                            <span class="text-[10px] opacity-50 flex items-center gap-1">
+                                                >{ae_util.iso_datetime_formatter(
-                                                <Clock size={10} /> {ae_util.iso_datetime_formatter(log.created_on, 'time_12_short')}
+                                                    log.created_on,
+                                                    'date_short'
+                                                )}</span>
+                                            <span
+                                                class="text-[10px] opacity-50 flex items-center gap-1">
+                                                <Clock size={10} />
+                                                {ae_util.iso_datetime_formatter(
+                                                    log.created_on,
+                                                    'time_12_short'
+                                                )}
                                             </span>
                                         </div>
                                     </div>
@@ -149,17 +200,28 @@
                                 <!-- User/Person -->
                                 <td>
                                     <div class="flex items-center gap-2">
-                                        <div class="avatar preset-tonal-surface w-8 h-8 flex items-center justify-center rounded-full shadow-inner">
+                                        <div
-                                            <User size={14} class="opacity-60" />
+                                            class="avatar preset-tonal-surface w-8 h-8 flex items-center justify-center rounded-full shadow-inner">
+                                            <User
+                                                size={14}
+                                                class="opacity-60" />
                                         </div>
-                                        <div class="flex flex-col max-w-[180px]">
+                                        <div
+                                            class="flex flex-col max-w-[180px]">
                                             {#if log.person_full_name || log.person_id_random}
-                                                <span class="font-bold truncate">{log.person_full_name || 'Person'}</span>
+                                                <span class="font-bold truncate"
-                                                <span class="text-[9px] opacity-40 font-mono uppercase">ID: {log.person_id_random || '--'}</span>
+                                                    >{log.person_full_name ||
+                                                        'Person'}</span>
+                                                <span
+                                                    class="text-[9px] opacity-40 font-mono uppercase"
+                                                    >ID: {log.person_id_random ||
+                                                        '--'}</span>
                                             {:else if log.name}
-                                                <span class="italic opacity-70">{log.name}</span>
+                                                <span class="italic opacity-70"
+                                                    >{log.name}</span>
                                             {:else}
-                                                <span class="opacity-30 italic">Unknown</span>
+                                                <span class="opacity-30 italic"
+                                                    >Unknown</span>
                                             {/if}
                                         </div>
                                     </div>
@@ -168,11 +230,13 @@
                                 <!-- Action -->
                                 <td>
                                     <div class="flex flex-col gap-1">
-                                        <span class="badge preset-filled-surface text-[9px] font-black tracking-tighter uppercase px-2">
+                                        <span
+                                            class="badge preset-filled-surface text-[9px] font-black tracking-tighter uppercase px-2">
                                             {log.action}
                                         </span>
                                         {#if log.action_with}
-                                            <span class="text-[9px] opacity-40 font-bold uppercase ml-1 flex items-center gap-1">
+                                            <span
+                                                class="text-[9px] opacity-40 font-bold uppercase ml-1 flex items-center gap-1">
                                                 <ShieldCheck size={8} /> via {log.action_with}
                                             </span>
                                         {/if}
@@ -182,17 +246,26 @@
                                 <!-- Context -->
                                 <td>
                                     {#if log.object_type}
-                                        <div class="flex items-center gap-2 bg-black/5 p-2 rounded-lg border border-surface-500/10">
+                                        <div
-                                            <Tag size={12} class="text-secondary-500 shrink-0" />
+                                            class="flex items-center gap-2 bg-black/5 p-2 rounded-lg border border-surface-500/10">
-                                            <div class="flex flex-col text-[10px] truncate">
+                                            <Tag
-                                                <span class="font-bold uppercase tracking-tighter">{log.object_type}</span>
+                                                size={12}
+                                                class="text-secondary-500 shrink-0" />
+                                            <div
+                                                class="flex flex-col text-[10px] truncate">
+                                                <span
+                                                    class="font-bold uppercase tracking-tighter"
+                                                    >{log.object_type}</span>
                                                 {#if log.external_client_id}
-                                                    <span class="opacity-40 font-mono truncate">{log.external_client_id}</span>
+                                                    <span
+                                                        class="opacity-40 font-mono truncate"
+                                                        >{log.external_client_id}</span>
                                                 {/if}
                                             </div>
                                         </div>
                                     {:else}
-                                        <span class="opacity-20 italic text-xs">--</span>
+                                        <span class="opacity-20 italic text-xs"
+                                            >--</span>
                                     {/if}
                                 </td>
 
@@ -200,13 +273,21 @@
                                 <td>
                                     <div class="flex flex-col gap-1 max-w-sm">
                                         {#if log.summary}
-                                            <span class="font-bold text-primary-500 leading-tight">{log.summary}</span>
+                                            <span
+                                                class="font-bold text-primary-500 leading-tight"
+                                                >{log.summary}</span>
                                         {/if}
                                         {#if log.description}
-                                            <p class="text-xs opacity-60 line-clamp-2 italic" title={log.description}>{log.description}</p>
+                                            <p
+                                                class="text-xs opacity-60 line-clamp-2 italic"
+                                                title={log.description}>
+                                                {log.description}
+                                            </p>
                                         {/if}
                                         {#if !log.summary && !log.description}
-                                            <span class="italic opacity-20 text-[10px]">No detail record</span>
+                                            <span
+                                                class="italic opacity-20 text-[10px]"
+                                                >No detail record</span>
                                         {/if}
                                     </div>
                                 </td>

src/routes/core/addresses/+page.svelte

@@ -2,8 +2,21 @@
 import { onMount } from 'svelte';
 import { ae_loc, ae_api, slct } from '$lib/stores/ae_stores';
 import { goto } from '$app/navigation';
-    import { Building2, ExternalLink, Globe, ListFilter, MapPin, MapPinned, Plus, Search, X } from '@lucide/svelte';
+import {
-    import { load_ae_obj_li__address, create_ae_obj__address } from '$lib/ae_core/ae_core__address';
+    Building2,
+    ExternalLink,
+    Globe,
+    ListFilter,
+    MapPin,
+    MapPinned,
+    Plus,
+    Search,
+    X
+} from '@lucide/svelte';
+import {
+    load_ae_obj_li__address,
+    create_ae_obj__address
+} from '$lib/ae_core/ae_core__address';
 import Address_form from './ae_comp__address_form.svelte';
 
 let address_li: any[] = $state([]);
@@ -12,10 +25,15 @@
 let qry_str = $state('');
 let filtered_li: any[] = $derived(
     qry_str
-            ? address_li.filter(a =>
+        ? address_li.filter(
+              (a) =>
                   a.city?.toLowerCase().includes(qry_str.toLowerCase()) ||
-                a.state_province?.toLowerCase().includes(qry_str.toLowerCase()) ||
+                  a.state_province
-                a.organization_name?.toLowerCase().includes(qry_str.toLowerCase()) ||
+                      ?.toLowerCase()
+                      .includes(qry_str.toLowerCase()) ||
+                  a.organization_name
+                      ?.toLowerCase()
+                      .includes(qry_str.toLowerCase()) ||
                   a.line_1?.toLowerCase().includes(qry_str.toLowerCase())
           )
         : address_li
@@ -44,7 +62,8 @@
 </script>
 
 <div class="container mx-auto p-4 space-y-6">
-    <header class="flex justify-between items-center bg-surface-50-900-token p-4 rounded-xl shadow-lg border border-surface-500/10">
+    <header
+        class="flex justify-between items-center bg-surface-50-900-token p-4 rounded-xl shadow-lg border border-surface-500/10">
         <div class="flex items-center gap-2">
             <div class="p-2 bg-primary-500/10 rounded-lg">
                 <MapPin size={24} class="text-primary-500" />
@@ -53,8 +72,7 @@
         </div>
         <button
             class="btn btn-sm preset-filled-primary font-bold shadow-lg"
-            onclick={() => show_add_form = !show_add_form}
+            onclick={() => (show_add_form = !show_add_form)}>
-        >
             {#if show_add_form}
                 <X size={16} class="mr-2" /> Cancel
             {:else}
@@ -73,29 +91,36 @@
                         goto(`/core/addresses/${new_addr.address_id_random}`);
                     }
                 }}
-                onCancel={() => show_add_form = false}
+                onCancel={() => (show_add_form = false)} />
-            />
         </div>
     {/if}
 
-    <div class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10">
+    <div
+        class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10">
         <div class="max-w-2xl space-y-1">
-            <span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Search Directory</span>
+            <span
-            <div class="flex bg-surface-200-700-token rounded-lg overflow-hidden border border-surface-500/20 shadow-inner group focus-within:ring-2 focus-within:ring-primary-500/50 transition-all">
+                class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1"
-                <div class="flex items-center justify-center px-4 bg-surface-300-600-token border-r border-surface-500/20">
+                >Search Directory</span>
+            <div
+                class="flex bg-surface-200-700-token rounded-lg overflow-hidden border border-surface-500/20 shadow-inner group focus-within:ring-2 focus-within:ring-primary-500/50 transition-all">
+                <div
+                    class="flex items-center justify-center px-4 bg-surface-300-600-token border-r border-surface-500/20">
                     <Search size={18} class="opacity-50" />
                 </div>
                 <input
                     class="bg-transparent border-0 ring-0 focus:ring-0 p-3 grow placeholder:opacity-50"
                     type="search"
                     bind:value={qry_str}
-                    placeholder="Search by city, state, organization, or street..."
+                    placeholder="Search by city, state, organization, or street..." />
-                />
+                <button
-                <button class="preset-filled-primary font-bold px-10 py-3 hover:brightness-110 transition-all border-l border-surface-500/20 flex items-center justify-center min-w-[100px]" onclick={load_addresses} disabled={loading}>
+                    class="preset-filled-primary font-bold px-10 py-3 hover:brightness-110 transition-all border-l border-surface-500/20 flex items-center justify-center min-w-[100px]"
+                    onclick={load_addresses}
+                    disabled={loading}>
                     {#if loading}
                         <span class="animate-spin text-xl">⏳</span>
                     {:else}
-                        <span class="whitespace-nowrap tracking-wide">Refresh</span>
+                        <span class="whitespace-nowrap tracking-wide"
+                            >Refresh</span>
                     {/if}
                 </button>
             </div>
@@ -104,55 +129,84 @@
 
     {#if loading}
         <div class="card p-8 flex justify-center items-center h-64">
-            <div class="placeholder animate-pulse w-full h-full rounded-2xl"></div>
+            <div class="placeholder animate-pulse w-full h-full rounded-2xl">
+            </div>
         </div>
     {:else if filtered_li.length === 0}
-        <div class="card p-12 text-center preset-tonal-surface border-2 border-dashed border-surface-500/20 rounded-2xl">
+        <div
+            class="card p-12 text-center preset-tonal-surface border-2 border-dashed border-surface-500/20 rounded-2xl">
             <MapPinned size={48} class="mx-auto mb-4 opacity-20" />
             <h3 class="h3 font-bold opacity-50">No Addresses Found</h3>
-            <p class="opacity-60 max-w-xs mx-auto mt-2">Addresses associated with this account will appear here.</p>
+            <p class="opacity-60 max-w-xs mx-auto mt-2">
+                Addresses associated with this account will appear here.
+            </p>
         </div>
     {:else}
-        <div class="card p-6 preset-tonal-surface shadow-xl border border-surface-500/10">
+        <div
-            <h3 class="h4 font-bold border-b border-surface-500/30 pb-2 mb-6 flex items-center gap-2">
+            class="card p-6 preset-tonal-surface shadow-xl border border-surface-500/10">
+            <h3
+                class="h4 font-bold border-b border-surface-500/30 pb-2 mb-6 flex items-center gap-2">
                 <ListFilter size={18} class="text-secondary-500" />
                 Linked Addresses
-                <span class="badge preset-tonal-secondary ml-auto">{filtered_li.length} entries</span>
+                <span class="badge preset-tonal-secondary ml-auto"
+                    >{filtered_li.length} entries</span>
             </h3>
 
             <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                 {#each filtered_li as addr (addr.address_id_random)}
-                    <div class="card p-5 space-y-4 preset-tonal-surface shadow-md border border-surface-500/10 hover:border-primary-500/30 transition-all group relative">
+                    <div
+                        class="card p-5 space-y-4 preset-tonal-surface shadow-md border border-surface-500/10 hover:border-primary-500/30 transition-all group relative">
                         <div class="absolute top-4 right-4">
-                            <span class="badge {addr.enable ? 'preset-filled-success' : 'preset-filled-error'} text-[8px] uppercase font-bold shadow-sm">
+                            <span
+                                class="badge {addr.enable
+                                    ? 'preset-filled-success'
+                                    : 'preset-filled-error'} text-[8px] uppercase font-bold shadow-sm">
                                 {addr.enable ? 'Active' : 'Disabled'}
                             </span>
                         </div>
 
                         <div class="flex items-center gap-3">
-                            <div class="avatar preset-filled-primary w-10 h-10 flex items-center justify-center rounded-lg shadow-inner group-hover:scale-110 transition-transform">
+                            <div
+                                class="avatar preset-filled-primary w-10 h-10 flex items-center justify-center rounded-lg shadow-inner group-hover:scale-110 transition-transform">
                                 <MapPin size={20} />
                             </div>
                             <div class="pr-12">
-                                <p class="font-black tracking-tight truncate">{addr.city || '--'}</p>
+                                <p class="font-black tracking-tight truncate">
-                                <p class="text-[10px] uppercase font-bold opacity-50 truncate">{addr.state_province || '--'}</p>
+                                    {addr.city || '--'}
+                                </p>
+                                <p
+                                    class="text-[10px] uppercase font-bold opacity-50 truncate">
+                                    {addr.state_province || '--'}
+                                </p>
                             </div>
                         </div>
 
                         <div class="space-y-2 text-xs opacity-70">
                             {#if addr.organization_name}
-                                <div class="flex items-center gap-2 bg-black/5 p-2 rounded-lg">
+                                <div
-                                    <Building2 size={14} class="text-primary-500 shrink-0" />
+                                    class="flex items-center gap-2 bg-black/5 p-2 rounded-lg">
-                                    <span class="truncate">{addr.organization_name}</span>
+                                    <Building2
+                                        size={14}
+                                        class="text-primary-500 shrink-0" />
+                                    <span class="truncate"
+                                        >{addr.organization_name}</span>
                                 </div>
                             {/if}
-                            <div class="flex items-center gap-2 bg-black/5 p-2 rounded-lg">
+                            <div
-                                <Globe size={14} class="text-secondary-500 shrink-0" />
+                                class="flex items-center gap-2 bg-black/5 p-2 rounded-lg">
-                                <span class="truncate font-mono">{addr.country_name || addr.country || '--'}</span>
+                                <Globe
+                                    size={14}
+                                    class="text-secondary-500 shrink-0" />
+                                <span class="truncate font-mono"
+                                    >{addr.country_name ||
+                                        addr.country ||
+                                        '--'}</span>
                             </div>
                         </div>
 
-                        <a class="btn btn-sm preset-filled-primary font-bold w-full shadow-lg group-hover:brightness-110 transition-all" href="/core/addresses/{addr.address_id_random}">
+                        <a
+                            class="btn btn-sm preset-filled-primary font-bold w-full shadow-lg group-hover:brightness-110 transition-all"
+                            href="/core/addresses/{addr.address_id_random}">
                             View Details
                         </a>
                     </div>

src/routes/core/addresses/[address_id]/+page.svelte

@@ -9,7 +9,22 @@
 import { editable_fields__address } from '$lib/ae_core/ae_core__address.editable_fields';
 import { ae_api, ae_loc } from '$lib/stores/ae_stores';
 import { goto } from '$app/navigation';
-    import { Activity, ArrowLeft, Building2, Clock, Edit, Eye, Globe, Info, MapPin, MapPinned, Save, ShieldCheck, Trash2, User } from '@lucide/svelte';
+import {
+    Activity,
+    ArrowLeft,
+    Building2,
+    Clock,
+    Edit,
+    Eye,
+    Globe,
+    Info,
+    MapPin,
+    MapPinned,
+    Save,
+    ShieldCheck,
+    Trash2,
+    User
+} from '@lucide/svelte';
 import Address_form from '../ae_comp__address_form.svelte';
 
 let address_id = $derived($page.params.address_id ?? '');
@@ -48,9 +63,12 @@
 </script>
 
 <div class="container mx-auto p-4 space-y-6">
-    <header class="flex flex-wrap justify-between items-center bg-surface-50-900-token p-4 rounded-xl shadow-lg border border-surface-500/10 gap-4">
+    <header
+        class="flex flex-wrap justify-between items-center bg-surface-50-900-token p-4 rounded-xl shadow-lg border border-surface-500/10 gap-4">
         <div class="flex items-center gap-4">
-            <a class="btn btn-sm preset-tonal-surface shadow-sm" href="/core/addresses">
+            <a
+                class="btn btn-sm preset-tonal-surface shadow-sm"
+                href="/core/addresses">
                 <ArrowLeft size={16} />
             </a>
             <div class="flex items-center gap-3">
@@ -58,20 +76,33 @@
                     <MapPin size={24} class="text-primary-500" />
                 </div>
                 <div>
-                    <h1 class="h2 font-black tracking-tight">{address ? `${address.city}, ${address.state_province}` : 'Loading...'}</h1>
+                    <h1 class="h2 font-black tracking-tight">
-                    <p class="text-xs font-bold opacity-50 uppercase tracking-widest">Address Detail</p>
+                        {address
+                            ? `${address.city}, ${address.state_province}`
+                            : 'Loading...'}
+                    </h1>
+                    <p
+                        class="text-xs font-bold opacity-50 uppercase tracking-widest">
+                        Address Detail
+                    </p>
                 </div>
             </div>
         </div>
         <div class="flex gap-2">
-            <button class="btn btn-sm preset-tonal-secondary font-bold shadow-sm" onclick={() => is_editing = !is_editing} disabled={loading}>
+            <button
+                class="btn btn-sm preset-tonal-secondary font-bold shadow-sm"
+                onclick={() => (is_editing = !is_editing)}
+                disabled={loading}>
                 {#if is_editing}
                     <Eye size={16} class="mr-2" /> View Mode
                 {:else}
                     <Edit size={16} class="mr-2" /> Edit Mode
                 {/if}
             </button>
-            <button class="btn btn-sm preset-tonal-error font-bold shadow-sm" onclick={handle_delete} disabled={loading}>
+            <button
+                class="btn btn-sm preset-tonal-error font-bold shadow-sm"
+                onclick={handle_delete}
+                disabled={loading}>
                 <Trash2 size={16} class="mr-2" /> Delete
             </button>
         </div>
@@ -79,7 +110,8 @@
 
     {#if loading}
         <div class="card p-8 flex justify-center items-center h-64">
-            <div class="placeholder animate-pulse w-full h-full rounded-2xl"></div>
+            <div class="placeholder animate-pulse w-full h-full rounded-2xl">
+            </div>
         </div>
     {:else if address}
         {#if is_editing}
@@ -90,77 +122,120 @@
                         address = updated;
                         is_editing = false;
                     }}
-                    onCancel={() => is_editing = false}
+                    onCancel={() => (is_editing = false)} />
-                />
             </div>
         {:else}
             <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 animate-fade-in">
                 <div class="lg:col-span-2 space-y-6">
-                    <div class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10 space-y-6">
+                    <div
-                        <h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
+                        class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10 space-y-6">
+                        <h3
+                            class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
                             <MapPinned size={20} class="text-primary-500" />
                             Location Information
                         </h3>
                         <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                             <div class="space-y-1">
-                                <p class="text-[10px] opacity-60 uppercase font-black tracking-widest flex items-center gap-1">
+                                <p
+                                    class="text-[10px] opacity-60 uppercase font-black tracking-widest flex items-center gap-1">
                                     <User size={10} /> Attention To
                                 </p>
-                                <p class="font-bold">{address.attention_to || '--'}</p>
+                                <p class="font-bold">
+                                    {address.attention_to || '--'}
+                                </p>
                             </div>
                             <div class="space-y-1">
-                                <p class="text-[10px] opacity-60 uppercase font-black tracking-widest flex items-center gap-1">
+                                <p
+                                    class="text-[10px] opacity-60 uppercase font-black tracking-widest flex items-center gap-1">
                                     <Building2 size={10} /> Organization
                                 </p>
-                                <p class="font-bold">{address.organization_name || '--'}</p>
+                                <p class="font-bold">
+                                    {address.organization_name || '--'}
+                                </p>
                             </div>
-                            <div class="md:col-span-2 space-y-1 bg-black/5 p-4 rounded-xl border border-surface-500/10">
+                            <div
-                                <p class="text-[10px] opacity-60 uppercase font-black tracking-widest">Street Address</p>
+                                class="md:col-span-2 space-y-1 bg-black/5 p-4 rounded-xl border border-surface-500/10">
+                                <p
+                                    class="text-[10px] opacity-60 uppercase font-black tracking-widest">
+                                    Street Address
+                                </p>
                                 <div class="space-y-1 mt-1">
-                                    <p class="text-lg font-black tracking-tight leading-tight">{address.line_1}</p>
+                                    <p
-                                    {#if address.line_2}<p class="text-lg font-black tracking-tight leading-tight opacity-75">{address.line_2}</p>{/if}
+                                        class="text-lg font-black tracking-tight leading-tight">
-                                    {#if address.line_3}<p class="text-lg font-black tracking-tight leading-tight opacity-50">{address.line_3}</p>{/if}
+                                        {address.line_1}
+                                    </p>
+                                    {#if address.line_2}<p
+                                            class="text-lg font-black tracking-tight leading-tight opacity-75">
+                                            {address.line_2}
+                                        </p>{/if}
+                                    {#if address.line_3}<p
+                                            class="text-lg font-black tracking-tight leading-tight opacity-50">
+                                            {address.line_3}
+                                        </p>{/if}
                                 </div>
                             </div>
                             <div class="space-y-1">
-                                <p class="text-[10px] opacity-60 uppercase font-black tracking-widest flex items-center gap-1">
+                                <p
+                                    class="text-[10px] opacity-60 uppercase font-black tracking-widest flex items-center gap-1">
                                     <MapPin size={10} /> City, State/Province
                                 </p>
-                                <p class="font-bold">{address.city}, {address.state_province || '--'}</p>
+                                <p class="font-bold">
+                                    {address.city}, {address.state_province ||
+                                        '--'}
+                                </p>
                             </div>
                             <div class="space-y-1">
-                                <p class="text-[10px] opacity-60 uppercase font-black tracking-widest flex items-center gap-1">
+                                <p
+                                    class="text-[10px] opacity-60 uppercase font-black tracking-widest flex items-center gap-1">
                                     <Globe size={10} /> Postal Code / Country
                                 </p>
-                                <p class="font-bold">{address.postal_code || '--'} / <span class="badge preset-tonal-surface">{address.country_name || address.country || '--'}</span></p>
+                                <p class="font-bold">
+                                    {address.postal_code || '--'} /
+                                    <span class="badge preset-tonal-surface"
+                                        >{address.country_name ||
+                                            address.country ||
+                                            '--'}</span>
+                                </p>
                             </div>
                         </div>
                     </div>
 
-                    <div class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10 space-y-6">
+                    <div
-                        <h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
+                        class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10 space-y-6">
+                        <h3
+                            class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
                             <Activity size={20} class="text-secondary-500" />
                             Technical Details
                         </h3>
                         <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                             <div class="space-y-1">
-                                <p class="text-[10px] opacity-60 uppercase font-black tracking-widest flex items-center gap-1">
+                                <p
+                                    class="text-[10px] opacity-60 uppercase font-black tracking-widest flex items-center gap-1">
                                     <Clock size={10} /> Timezone
                                 </p>
-                                <p class="font-mono">{address.timezone || '--'}</p>
+                                <p class="font-mono">
+                                    {address.timezone || '--'}
+                                </p>
                             </div>
                             <div class="space-y-1">
-                                <p class="text-[10px] opacity-60 uppercase font-black tracking-widest flex items-center gap-1">
+                                <p
+                                    class="text-[10px] opacity-60 uppercase font-black tracking-widest flex items-center gap-1">
                                     <MapPin size={10} /> Coordinates
                                 </p>
-                                <p class="font-mono">{address.latitude || '--'}, {address.longitude || '--'}</p>
+                                <p class="font-mono">
+                                    {address.latitude || '--'}, {address.longitude ||
+                                        '--'}
+                                </p>
                             </div>
                             <div class="md:col-span-2 space-y-2">
-                                <p class="text-[10px] opacity-60 uppercase font-black tracking-widest flex items-center gap-1">
+                                <p
+                                    class="text-[10px] opacity-60 uppercase font-black tracking-widest flex items-center gap-1">
                                     <Info size={10} /> Internal Notes
                                 </p>
-                                <div class="p-4 bg-black/5 rounded-xl border border-dashed border-surface-500/20 italic opacity-80 min-h-[80px]">
+                                <div
-                                    {address.notes || 'No internal notes provided for this address.'}
+                                    class="p-4 bg-black/5 rounded-xl border border-dashed border-surface-500/20 italic opacity-80 min-h-[80px]">
+                                    {address.notes ||
+                                        'No internal notes provided for this address.'}
                                 </div>
                             </div>
                         </div>
@@ -168,40 +243,77 @@
                 </div>
 
                 <div class="space-y-6">
-                    <div class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10 space-y-6">
+                    <div
-                        <h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
+                        class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10 space-y-6">
+                        <h3
+                            class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
                             <ShieldCheck size={20} class="text-warning-500" />
                             Visibility & Status
                         </h3>
                         <div class="space-y-4">
-                            <div class="flex justify-between items-center p-3 bg-black/5 rounded-lg">
+                            <div
-                                <span class="text-sm font-bold opacity-75">Enabled</span>
+                                class="flex justify-between items-center p-3 bg-black/5 rounded-lg">
-                                <span class="badge {address.enable ? 'preset-filled-success' : 'preset-filled-error'} px-4 py-1 shadow-sm">
+                                <span class="text-sm font-bold opacity-75"
+                                    >Enabled</span>
+                                <span
+                                    class="badge {address.enable
+                                        ? 'preset-filled-success'
+                                        : 'preset-filled-error'} px-4 py-1 shadow-sm">
                                     {address.enable ? 'ACTIVE' : 'DISABLED'}
                                 </span>
                             </div>
-                            <div class="flex justify-between items-center p-3 bg-black/5 rounded-lg">
+                            <div
-                                <span class="text-sm font-bold opacity-75">Hidden</span>
+                                class="flex justify-between items-center p-3 bg-black/5 rounded-lg">
-                                <span class="badge {address.hide ? 'preset-filled-warning' : 'preset-filled-surface'} px-4 py-1 shadow-sm">
+                                <span class="text-sm font-bold opacity-75"
+                                    >Hidden</span>
+                                <span
+                                    class="badge {address.hide
+                                        ? 'preset-filled-warning'
+                                        : 'preset-filled-surface'} px-4 py-1 shadow-sm">
                                     {address.hide ? 'YES' : 'NO'}
                                 </span>
                             </div>
-                            <div class="flex justify-between items-center p-3 bg-black/5 rounded-lg">
+                            <div
-                                <span class="text-sm font-bold opacity-75">Priority</span>
+                                class="flex justify-between items-center p-3 bg-black/5 rounded-lg">
-                                <span class="badge {address.priority ? 'preset-filled-secondary' : 'preset-filled-surface'} px-4 py-1 shadow-sm">
+                                <span class="text-sm font-bold opacity-75"
+                                    >Priority</span>
+                                <span
+                                    class="badge {address.priority
+                                        ? 'preset-filled-secondary'
+                                        : 'preset-filled-surface'} px-4 py-1 shadow-sm">
                                     {address.priority ? 'YES' : 'NO'}
                                 </span>
                             </div>
                         </div>
                     </div>
 
-                    <div class="card p-5 preset-tonal-surface shadow-inner border border-surface-500/10 space-y-3">
+                    <div
-                        <p class="text-[10px] uppercase font-black opacity-40 tracking-widest border-b border-surface-500/20 pb-1">System Audit</p>
+                        class="card p-5 preset-tonal-surface shadow-inner border border-surface-500/10 space-y-3">
+                        <p
+                            class="text-[10px] uppercase font-black opacity-40 tracking-widest border-b border-surface-500/20 pb-1">
+                            System Audit
+                        </p>
                         <div class="space-y-2 text-[10px] font-mono opacity-60">
-                            <p class="flex justify-between"><span>ID:</span> <span class="text-primary-500 font-bold">{address.address_id_random}</span></p>
+                            <p class="flex justify-between">
-                            <p class="flex justify-between"><span>Created:</span> <span>{new Date(address.created_on).toLocaleString()}</span></p>
+                                <span>ID:</span>
+                                <span class="text-primary-500 font-bold"
+                                    >{address.address_id_random}</span>
+                            </p>
+                            <p class="flex justify-between">
+                                <span>Created:</span>
+                                <span
+                                    >{new Date(
+                                        address.created_on
+                                    ).toLocaleString()}</span>
+                            </p>
                             {#if address.updated_on}
-                                <p class="flex justify-between"><span>Updated:</span> <span>{new Date(address.updated_on).toLocaleString()}</span></p>
+                                <p class="flex justify-between">
+                                    <span>Updated:</span>
+                                    <span
+                                        >{new Date(
+                                            address.updated_on
+                                        ).toLocaleString()}</span>
+                                </p>
                             {/if}
                         </div>
                     </div>

src/routes/core/addresses/ae_comp__address_form.svelte

@@ -5,7 +5,10 @@
  * Uses unified ae_Address type and Svelte 5 Runes.
  */
 import { ae_api, ae_loc } from '$lib/stores/ae_stores';
-    import { update_ae_obj__address, create_ae_obj__address } from '$lib/ae_core/ae_core__address';
+import {
+    update_ae_obj__address,
+    create_ae_obj__address
+} from '$lib/ae_core/ae_core__address';
 import type { ae_Address } from '$lib/types/ae_types';
 import { Clock, Globe, MapPin, Navigation, Save, X } from '@lucide/svelte';
 interface Props {
@@ -110,19 +113,28 @@
 }
 </script>
 
-<form onsubmit={handleSubmit} class="card p-6 space-y-6 shadow-xl preset-tonal-surface">
+<form
-    <header class="flex justify-between items-center border-b border-surface-500/30 pb-4">
+    onsubmit={handleSubmit}
+    class="card p-6 space-y-6 shadow-xl preset-tonal-surface">
+    <header
+        class="flex justify-between items-center border-b border-surface-500/30 pb-4">
         <h3 class="h3 flex items-center gap-2">
             <MapPin size={24} />
             {address ? 'Edit Address' : 'Create New Address'}
         </h3>
         <div class="flex gap-2">
             {#if onCancel}
-                <button type="button" class="btn btn-sm preset-tonal-surface" onclick={onCancel}>
+                <button
+                    type="button"
+                    class="btn btn-sm preset-tonal-surface"
+                    onclick={onCancel}>
                     <X size={16} class="mr-1" /> Cancel
                 </button>
             {/if}
-            <button type="submit" class="btn btn-sm preset-filled-primary font-bold shadow-lg" disabled={is_loading}>
+            <button
+                type="submit"
+                class="btn btn-sm preset-filled-primary font-bold shadow-lg"
+                disabled={is_loading}>
                 {#if is_loading}
                     <span class="animate-spin mr-2">⏳</span>
                 {:else}
@@ -144,60 +156,130 @@
     <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
         <!-- Location Section -->
         <fieldset class="space-y-4">
-            <legend class="text-sm font-bold uppercase tracking-widest opacity-60">Location Details</legend>
+            <legend
+                class="text-sm font-bold uppercase tracking-widest opacity-60"
+                >Location Details</legend>
 
             <div class="space-y-1">
-                <label class="label text-xs font-bold opacity-75" for="addr-attention-to">Attention To / Name</label>
+                <label
-                <input class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-attention-to" type="text" bind:value={formData.attention_to} placeholder="John Doe" />
+                    class="label text-xs font-bold opacity-75"
+                    for="addr-attention-to">Attention To / Name</label>
+                <input
+                    class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2"
+                    id="addr-attention-to"
+                    type="text"
+                    bind:value={formData.attention_to}
+                    placeholder="John Doe" />
             </div>
 
             <div class="space-y-1">
-                <label class="label text-xs font-bold opacity-75" for="addr-org-name">Organization Name</label>
+                <label
-                <input class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-org-name" type="text" bind:value={formData.organization_name} placeholder="Acme Corp" />
+                    class="label text-xs font-bold opacity-75"
+                    for="addr-org-name">Organization Name</label>
+                <input
+                    class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2"
+                    id="addr-org-name"
+                    type="text"
+                    bind:value={formData.organization_name}
+                    placeholder="Acme Corp" />
             </div>
 
             <div class="space-y-1">
-                <label class="label text-xs font-bold opacity-75" for="addr-line-1">Address Line 1</label>
+                <label
-                <input class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-line-1" type="text" bind:value={formData.line_1} required placeholder="123 Main St" />
+                    class="label text-xs font-bold opacity-75"
+                    for="addr-line-1">Address Line 1</label>
+                <input
+                    class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2"
+                    id="addr-line-1"
+                    type="text"
+                    bind:value={formData.line_1}
+                    required
+                    placeholder="123 Main St" />
             </div>
 
             <div class="grid grid-cols-2 gap-2">
                 <div class="space-y-1">
-                    <label class="label text-xs font-bold opacity-75" for="addr-line-2">Line 2</label>
+                    <label
-                    <input class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-line-2" type="text" bind:value={formData.line_2} placeholder="Suite 100" />
+                        class="label text-xs font-bold opacity-75"
+                        for="addr-line-2">Line 2</label>
+                    <input
+                        class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2"
+                        id="addr-line-2"
+                        type="text"
+                        bind:value={formData.line_2}
+                        placeholder="Suite 100" />
                 </div>
                 <div class="space-y-1">
-                    <label class="label text-xs font-bold opacity-75" for="addr-line-3">Line 3</label>
+                    <label
-                    <input class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-line-3" type="text" bind:value={formData.line_3} placeholder="Floor 2" />
+                        class="label text-xs font-bold opacity-75"
+                        for="addr-line-3">Line 3</label>
+                    <input
+                        class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2"
+                        id="addr-line-3"
+                        type="text"
+                        bind:value={formData.line_3}
+                        placeholder="Floor 2" />
                 </div>
             </div>
         </fieldset>
 
         <!-- Region Section -->
         <fieldset class="space-y-4">
-            <legend class="text-sm font-bold uppercase tracking-widest opacity-60">Region & Code</legend>
+            <legend
+                class="text-sm font-bold uppercase tracking-widest opacity-60"
+                >Region & Code</legend>
 
             <div class="grid grid-cols-2 gap-2">
                 <div class="space-y-1">
-                    <label class="label text-xs font-bold opacity-75" for="addr-city">City</label>
+                    <label
-                    <input class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-city" type="text" bind:value={formData.city} required placeholder="Metropolis" />
+                        class="label text-xs font-bold opacity-75"
+                        for="addr-city">City</label>
+                    <input
+                        class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2"
+                        id="addr-city"
+                        type="text"
+                        bind:value={formData.city}
+                        required
+                        placeholder="Metropolis" />
                 </div>
                 <div class="space-y-1">
-                    <label class="label text-xs font-bold opacity-75" for="addr-state">State / Province</label>
+                    <label
-                    <input class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-state" type="text" bind:value={formData.state_province} placeholder="NY" />
+                        class="label text-xs font-bold opacity-75"
+                        for="addr-state">State / Province</label>
+                    <input
+                        class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2"
+                        id="addr-state"
+                        type="text"
+                        bind:value={formData.state_province}
+                        placeholder="NY" />
                 </div>
             </div>
 
             <div class="grid grid-cols-2 gap-2">
                 <div class="space-y-1">
-                    <label class="label text-xs font-bold opacity-75" for="addr-postal">Postal Code</label>
+                    <label
-                    <input class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-postal" type="text" bind:value={formData.postal_code} placeholder="12345" />
+                        class="label text-xs font-bold opacity-75"
+                        for="addr-postal">Postal Code</label>
+                    <input
+                        class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2"
+                        id="addr-postal"
+                        type="text"
+                        bind:value={formData.postal_code}
+                        placeholder="12345" />
                 </div>
                 <div class="space-y-1">
-                    <label class="label text-xs font-bold opacity-75" for="addr-country">Country (Code)</label>
+                    <label
-                    <div class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
+                        class="label text-xs font-bold opacity-75"
+                        for="addr-country">Country (Code)</label>
+                    <div
+                        class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
                         <div class="input-group-shim"><Globe size={16} /></div>
-                        <input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" id="addr-country" type="text" bind:value={formData.country} placeholder="USA" />
+                        <input
+                            class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2"
+                            id="addr-country"
+                            type="text"
+                            bind:value={formData.country}
+                            placeholder="USA" />
                     </div>
                 </div>
             </div>
@@ -205,29 +287,59 @@
 
         <!-- Technical Section -->
         <fieldset class="space-y-4">
-            <legend class="text-sm font-bold uppercase tracking-widest opacity-60">Technical & GIS</legend>
+            <legend
+                class="text-sm font-bold uppercase tracking-widest opacity-60"
+                >Technical & GIS</legend>
 
             <div class="space-y-1">
-                <label class="label text-xs font-bold opacity-75" for="addr-timezone">Timezone</label>
+                <label
-                <div class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
+                    class="label text-xs font-bold opacity-75"
+                    for="addr-timezone">Timezone</label>
+                <div
+                    class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
                     <div class="input-group-shim"><Clock size={16} /></div>
-                    <input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" id="addr-timezone" type="text" bind:value={formData.timezone} placeholder="America/New_York" />
+                    <input
+                        class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2"
+                        id="addr-timezone"
+                        type="text"
+                        bind:value={formData.timezone}
+                        placeholder="America/New_York" />
                 </div>
             </div>
 
             <div class="grid grid-cols-2 gap-2">
                 <div class="space-y-1">
-                    <label class="label text-xs font-bold opacity-75" for="addr-latitude">Latitude</label>
+                    <label
-                    <div class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
+                        class="label text-xs font-bold opacity-75"
-                        <div class="input-group-shim"><Navigation size={16} /></div>
+                        for="addr-latitude">Latitude</label>
-                        <input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" id="addr-latitude" type="text" bind:value={formData.latitude} placeholder="40.7128" />
+                    <div
+                        class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
+                        <div class="input-group-shim">
+                            <Navigation size={16} />
+                        </div>
+                        <input
+                            class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2"
+                            id="addr-latitude"
+                            type="text"
+                            bind:value={formData.latitude}
+                            placeholder="40.7128" />
                     </div>
                 </div>
                 <div class="space-y-1">
-                    <label class="label text-xs font-bold opacity-75" for="addr-longitude">Longitude</label>
+                    <label
-                    <div class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
+                        class="label text-xs font-bold opacity-75"
-                        <div class="input-group-shim"><Navigation size={16} /></div>
+                        for="addr-longitude">Longitude</label>
-                        <input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" id="addr-longitude" type="text" bind:value={formData.longitude} placeholder="-74.0060" />
+                    <div
+                        class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
+                        <div class="input-group-shim">
+                            <Navigation size={16} />
+                        </div>
+                        <input
+                            class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2"
+                            id="addr-longitude"
+                            type="text"
+                            bind:value={formData.longitude}
+                            placeholder="-74.0060" />
                     </div>
                 </div>
             </div>
@@ -235,32 +347,53 @@
 
         <!-- Status Section -->
         <fieldset class="space-y-4">
-            <legend class="text-sm font-bold uppercase tracking-widest opacity-60">Status</legend>
+            <legend
+                class="text-sm font-bold uppercase tracking-widest opacity-60"
+                >Status</legend>
 
             <div class="flex flex-wrap gap-4 pt-2">
                 <label class="flex items-center space-x-2 cursor-pointer">
-                    <input class="checkbox" type="checkbox" bind:checked={formData.enable} />
+                    <input
+                        class="checkbox"
+                        type="checkbox"
+                        bind:checked={formData.enable} />
                     <span class="text-sm font-medium">Enabled</span>
                 </label>
                 <label class="flex items-center space-x-2 cursor-pointer">
-                    <input class="checkbox" type="checkbox" bind:checked={formData.hide} />
+                    <input
+                        class="checkbox"
+                        type="checkbox"
+                        bind:checked={formData.hide} />
                     <span class="text-sm font-medium">Hidden</span>
                 </label>
                 <label class="flex items-center space-x-2 cursor-pointer">
-                    <input class="checkbox" type="checkbox" bind:checked={formData.priority} />
+                    <input
+                        class="checkbox"
+                        type="checkbox"
+                        bind:checked={formData.priority} />
                     <span class="text-sm font-medium">Priority</span>
                 </label>
             </div>
 
             <div class="space-y-1">
-                <label class="label text-xs font-bold opacity-75" for="addr-notes">Internal Notes</label>
+                <label
-                <textarea class="textarea preset-filled-surface rounded-lg placeholder-surface-400 p-2" id="addr-notes" rows="2" bind:value={formData.notes} placeholder="Notes about this address..."></textarea>
+                    class="label text-xs font-bold opacity-75"
+                    for="addr-notes">Internal Notes</label>
+                <textarea
+                    class="textarea preset-filled-surface rounded-lg placeholder-surface-400 p-2"
+                    id="addr-notes"
+                    rows="2"
+                    bind:value={formData.notes}
+                    placeholder="Notes about this address..."></textarea>
             </div>
         </fieldset>
     </div>
 
     <footer class="flex justify-end gap-2 border-t border-surface-500/30 pt-4">
-        <button type="submit" class="btn preset-filled-primary font-bold shadow-lg w-full md:w-auto" disabled={is_loading}>
+        <button
+            type="submit"
+            class="btn preset-filled-primary font-bold shadow-lg w-full md:w-auto"
+            disabled={is_loading}>
             {#if is_loading}
                 <span class="animate-spin mr-2">⏳</span>
             {/if}

src/routes/core/ae_comp__person_obj_tbl.svelte

@@ -14,7 +14,14 @@
     slct,
     slct_trigger
 } from '$lib/stores/ae_stores';
-    import { Building2, ListOrdered, Mail, Unlink, User, UserCheck } from '@lucide/svelte';
+import {
+    Building2,
+    ListOrdered,
+    Mail,
+    Unlink,
+    User,
+    UserCheck
+} from '@lucide/svelte';
 // import { core_func } from '$lib/ae_core_functions';
 // import { events_loc, events_sess, events_slct, events_trigger, events_trig_kv } from '$lib/stores/ae_events_stores';
 // import { events_func } from '$lib/ae_events/ae_events_functions';
@@ -41,7 +48,9 @@
 // Variables
 
 // *** Functions and Logic
-    let lq_kv__person_obj_li = $derived(liveQuery(() => db_core.person.bulkGet(person_id_random_li)));
+let lq_kv__person_obj_li = $derived(
+    liveQuery(() => db_core.person.bulkGet(person_id_random_li))
+);
 </script>
 
 <section class="ae_comp person_obj_tbl container {container_class_li}">
@@ -53,18 +62,19 @@
                 {#if $lq_kv__person_obj_li.length}
                     <span
                         class="text-3xl font-bold bg-success-100 px-4 border rounded-lg border-success-200"
-                        title="Count {$lq_kv__person_obj_li.length ?? 'None'}"
+                        title="Count {$lq_kv__person_obj_li.length ?? 'None'}">
-                    >
                         <ListOrdered size="1em" class="mx-4" />
                         {$lq_kv__person_obj_li.length ?? 'None'}
                     </span>
                 {/if}
             </h2>
 
-            <table class="table table-auto table-striped w-full text-xs lg:text-sm">
+            <table
+                class="table table-auto table-striped w-full text-xs lg:text-sm">
                 <thead>
                     <tr>
-                        <th class="px-4 py-2">Name ({$lq_kv__person_obj_li?.length}×)</th>
+                        <th class="px-4 py-2"
+                            >Name ({$lq_kv__person_obj_li?.length}×)</th>
                         <th class="px-4 py-2">Email</th>
                         <th class="px-4 py-2">Affiliations</th>
                         {#if show_user_fields}
@@ -83,8 +93,7 @@
                                     href="/core/people/{person_obj?.person_id_random}"
                                     class="text-blue-500 underline hover:text-blue-800"
                                     title="View {person_obj?.full_name ??
-                                        'no name'} (ID={person_obj?.person_id_random})"
+                                        'no name'} (ID={person_obj?.person_id_random})">
-                                >
                                     <!-- {@html person_obj?.full_name ?? ae_snip.html__not_set} -->
                                     {@html person_obj?.full_name
                                         ? person_obj?.full_name
@@ -96,9 +105,9 @@
                                 {#if person_obj?.primary_email}
                                     <a
                                         href="mailto:{person_obj?.primary_email}"
-                                        class="text-blue-500 underline hover:text-blue-800"
+                                        class="text-blue-500 underline hover:text-blue-800">
-                                    >
+                                        {@html person_obj?.primary_email ??
-                                        {@html person_obj?.primary_email ?? ae_snip.html__not_set}
+                                            ae_snip.html__not_set}
                                     </a>
                                 {:else}
                                     {@html ae_snip.html__not_set}
@@ -106,26 +115,33 @@
                             </td>
                             <td class="px-4 py-2">
                                 <Building2 size="1em" />
-                                {@html person_obj?.affiliations ?? ae_snip.html__not_set}
+                                {@html person_obj?.affiliations ??
+                                    ae_snip.html__not_set}
                             </td>
 
                             {#if show_user_fields}
                                 <td class="px-4 py-2">
                                     {#if person_obj?.user_id_random}
                                         <div class="flex flex-col gap-1">
-                                            <span class="font-bold flex items-center gap-1">
+                                            <span
-                                                <UserCheck size="1em" class="text-success-500" />
+                                                class="font-bold flex items-center gap-1">
+                                                <UserCheck
+                                                    size="1em"
+                                                    class="text-success-500" />
                                                 <a
                                                     href="/core/users/{person_obj?.user_id_random}"
-                                                    class="text-blue-500 underline hover:text-blue-800"
+                                                    class="text-blue-500 underline hover:text-blue-800">
-                                                >
+                                                    {@html person_obj?.username ??
-                                                    {@html person_obj?.username ?? '-- no username --'}
+                                                        '-- no username --'}
                                                 </a>
                                             </span>
-                                            <span class="text-[10px] opacity-50 font-mono">{person_obj.user_id_random}</span>
+                                            <span
+                                                class="text-[10px] opacity-50 font-mono"
+                                                >{person_obj.user_id_random}</span>
                                         </div>
                                     {:else}
-                                        <span class="badge preset-tonal-warning">
+                                        <span
+                                            class="badge preset-tonal-warning">
                                             <Unlink size="1em" class="mr-1" />
                                             Not Linked
                                         </span>
@@ -133,10 +149,21 @@
                                 </td>
                                 <td class="px-4 py-2">
                                     <div class="flex flex-wrap gap-1">
-                                        {#if person_obj?.user_super}<span class="badge preset-filled-error text-[10px]">Super</span>{/if}
+                                        {#if person_obj?.user_super}<span
-                                        {#if person_obj?.user_manager}<span class="badge preset-filled-warning text-[10px]">Manager</span>{/if}
+                                                class="badge preset-filled-error text-[10px]"
-                                        {#if person_obj?.user_administrator}<span class="badge preset-filled-primary text-[10px]">Admin</span>{/if}
+                                                >Super</span
-                                        {#if !person_obj?.user_id_random}<span class="opacity-30">--</span>{/if}
+                                            >{/if}
+                                        {#if person_obj?.user_manager}<span
+                                                class="badge preset-filled-warning text-[10px]"
+                                                >Manager</span
+                                            >{/if}
+                                        {#if person_obj?.user_administrator}<span
+                                                class="badge preset-filled-primary text-[10px]"
+                                                >Admin</span
+                                            >{/if}
+                                        {#if !person_obj?.user_id_random}<span
+                                                class="opacity-30">--</span
+                                            >{/if}
                                     </div>
                                 </td>
                             {/if}

src/routes/core/contacts/+page.svelte

@@ -2,15 +2,31 @@
 import { onMount } from 'svelte';
 import { ae_loc, ae_api, slct } from '$lib/stores/ae_stores';
 import { goto } from '$app/navigation';
-    import { Activity, Contact, ExternalLink, ListFilter, Mail, Phone, Plus, Search, ShieldCheck, User, X } from '@lucide/svelte';
+import {
-    import { load_ae_obj_li__contact, create_ae_obj__contact } from '$lib/ae_core/ae_core__contact';
+    Activity,
+    Contact,
+    ExternalLink,
+    ListFilter,
+    Mail,
+    Phone,
+    Plus,
+    Search,
+    ShieldCheck,
+    User,
+    X
+} from '@lucide/svelte';
+import {
+    load_ae_obj_li__contact,
+    create_ae_obj__contact
+} from '$lib/ae_core/ae_core__contact';
 import Contact_form from './ae_comp__contact_form.svelte';
 
 let contact_li: any[] = $state([]);
 let qry_str = $state('');
 let filtered_li: any[] = $derived(
     qry_str
-            ? contact_li.filter(c =>
+        ? contact_li.filter(
+              (c) =>
                   c.name?.toLowerCase().includes(qry_str.toLowerCase()) ||
                   c.title?.toLowerCase().includes(qry_str.toLowerCase()) ||
                   c.email?.toLowerCase().includes(qry_str.toLowerCase()) ||
@@ -44,7 +60,8 @@
 </script>
 
 <div class="container mx-auto p-4 space-y-6">
-    <header class="flex justify-between items-center bg-surface-50-900-token p-4 rounded-xl shadow-lg border border-surface-500/10">
+    <header
+        class="flex justify-between items-center bg-surface-50-900-token p-4 rounded-xl shadow-lg border border-surface-500/10">
         <div class="flex items-center gap-2">
             <div class="p-2 bg-primary-500/10 rounded-lg">
                 <Phone size={24} class="text-primary-500" />
@@ -53,8 +70,7 @@
         </div>
         <button
             class="btn btn-sm preset-filled-primary font-bold shadow-lg"
-            onclick={() => show_add_form = !show_add_form}
+            onclick={() => (show_add_form = !show_add_form)}>
-        >
             {#if show_add_form}
                 <X size={16} class="mr-2" /> Cancel
             {:else}
@@ -73,29 +89,36 @@
                         goto(`/core/contacts/${new_con.contact_id_random}`);
                     }
                 }}
-                onCancel={() => show_add_form = false}
+                onCancel={() => (show_add_form = false)} />
-            />
         </div>
     {/if}
 
-    <div class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10">
+    <div
+        class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10">
         <div class="max-w-2xl space-y-1">
-            <span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Search Directory</span>
+            <span
-            <div class="flex bg-surface-200-700-token rounded-lg overflow-hidden border border-surface-500/20 shadow-inner group focus-within:ring-2 focus-within:ring-primary-500/50 transition-all">
+                class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1"
-                <div class="flex items-center justify-center px-4 bg-surface-300-600-token border-r border-surface-500/20">
+                >Search Directory</span>
+            <div
+                class="flex bg-surface-200-700-token rounded-lg overflow-hidden border border-surface-500/20 shadow-inner group focus-within:ring-2 focus-within:ring-primary-500/50 transition-all">
+                <div
+                    class="flex items-center justify-center px-4 bg-surface-300-600-token border-r border-surface-500/20">
                     <Search size={18} class="opacity-50" />
                 </div>
                 <input
                     class="bg-transparent border-0 ring-0 focus:ring-0 p-3 grow placeholder:opacity-50"
                     type="search"
                     bind:value={qry_str}
-                    placeholder="Search by name, title, email, or phone..."
+                    placeholder="Search by name, title, email, or phone..." />
-                />
+                <button
-                <button class="preset-filled-primary font-bold px-10 py-3 hover:brightness-110 transition-all border-l border-surface-500/20 flex items-center justify-center min-w-[100px]" onclick={load_contacts} disabled={loading}>
+                    class="preset-filled-primary font-bold px-10 py-3 hover:brightness-110 transition-all border-l border-surface-500/20 flex items-center justify-center min-w-[100px]"
+                    onclick={load_contacts}
+                    disabled={loading}>
                     {#if loading}
                         <span class="animate-spin text-xl">⏳</span>
                     {:else}
-                        <span class="whitespace-nowrap tracking-wide">Refresh</span>
+                        <span class="whitespace-nowrap tracking-wide"
+                            >Refresh</span>
                     {/if}
                 </button>
             </div>
@@ -104,53 +127,82 @@
 
     {#if loading}
         <div class="card p-8 flex justify-center items-center h-64">
-            <div class="placeholder animate-pulse w-full h-full rounded-2xl"></div>
+            <div class="placeholder animate-pulse w-full h-full rounded-2xl">
+            </div>
         </div>
     {:else if filtered_li.length === 0}
-        <div class="card p-12 text-center preset-tonal-surface border-2 border-dashed border-surface-500/20 rounded-2xl">
+        <div
+            class="card p-12 text-center preset-tonal-surface border-2 border-dashed border-surface-500/20 rounded-2xl">
             <Contact size={48} class="mx-auto mb-4 opacity-20" />
             <h3 class="h3 font-bold opacity-50">No Contacts Found</h3>
-            <p class="opacity-60 max-w-xs mx-auto mt-2">Business and support contacts will appear here.</p>
+            <p class="opacity-60 max-w-xs mx-auto mt-2">
+                Business and support contacts will appear here.
+            </p>
         </div>
     {:else}
-        <div class="card p-6 preset-tonal-surface shadow-xl border border-surface-500/10">
+        <div
-            <h3 class="h4 font-bold border-b border-surface-500/30 pb-2 mb-6 flex items-center gap-2">
+            class="card p-6 preset-tonal-surface shadow-xl border border-surface-500/10">
+            <h3
+                class="h4 font-bold border-b border-surface-500/30 pb-2 mb-6 flex items-center gap-2">
                 <ListFilter size={18} class="text-secondary-500" />
                 Directory Results
-                <span class="badge preset-tonal-secondary ml-auto">{filtered_li.length} entries</span>
+                <span class="badge preset-tonal-secondary ml-auto"
+                    >{filtered_li.length} entries</span>
             </h3>
 
             <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                 {#each filtered_li as con (con.contact_id_random)}
-                    <div class="card p-5 space-y-4 preset-tonal-surface shadow-md border border-surface-500/10 hover:border-primary-500/30 transition-all group relative">
+                    <div
+                        class="card p-5 space-y-4 preset-tonal-surface shadow-md border border-surface-500/10 hover:border-primary-500/30 transition-all group relative">
                         <div class="absolute top-4 right-4">
-                            <span class="badge {con.enable ? 'preset-filled-success' : 'preset-filled-error'} text-[8px] uppercase font-bold shadow-sm">
+                            <span
+                                class="badge {con.enable
+                                    ? 'preset-filled-success'
+                                    : 'preset-filled-error'} text-[8px] uppercase font-bold shadow-sm">
                                 {con.enable ? 'Active' : 'Disabled'}
                             </span>
                         </div>
 
                         <header class="flex items-center gap-3">
-                            <div class="avatar preset-filled-primary w-12 h-12 flex items-center justify-center rounded-full shadow-inner group-hover:scale-110 transition-transform">
+                            <div
+                                class="avatar preset-filled-primary w-12 h-12 flex items-center justify-center rounded-full shadow-inner group-hover:scale-110 transition-transform">
                                 <User size={24} />
                             </div>
                             <div class="pr-12">
-                                <p class="font-black tracking-tight truncate">{con.name || con.title || '--'}</p>
+                                <p class="font-black tracking-tight truncate">
-                                <p class="text-[10px] uppercase font-bold opacity-50 truncate">{con.title || 'Support Contact'}</p>
+                                    {con.name || con.title || '--'}
+                                </p>
+                                <p
+                                    class="text-[10px] uppercase font-bold opacity-50 truncate">
+                                    {con.title || 'Support Contact'}
+                                </p>
                             </div>
                         </header>
 
                         <div class="space-y-2 text-xs opacity-70">
-                            <div class="flex items-center gap-2 bg-black/5 p-2 rounded-lg">
+                            <div
-                                <Mail size={14} class="text-primary-500 shrink-0" />
+                                class="flex items-center gap-2 bg-black/5 p-2 rounded-lg">
-                                <span class="truncate">{con.email || 'No Email'}</span>
+                                <Mail
+                                    size={14}
+                                    class="text-primary-500 shrink-0" />
+                                <span class="truncate"
+                                    >{con.email || 'No Email'}</span>
                             </div>
-                            <div class="flex items-center gap-2 bg-black/5 p-2 rounded-lg">
+                            <div
-                                <Phone size={14} class="text-secondary-500 shrink-0" />
+                                class="flex items-center gap-2 bg-black/5 p-2 rounded-lg">
-                                <span class="truncate">{con.phone_office || con.phone_mobile || '--'}</span>
+                                <Phone
+                                    size={14}
+                                    class="text-secondary-500 shrink-0" />
+                                <span class="truncate"
+                                    >{con.phone_office ||
+                                        con.phone_mobile ||
+                                        '--'}</span>
                             </div>
                         </div>
 
-                        <a class="btn btn-sm preset-filled-primary font-bold w-full shadow-lg group-hover:brightness-110 transition-all" href="/core/contacts/{con.contact_id_random}">
+                        <a
+                            class="btn btn-sm preset-filled-primary font-bold w-full shadow-lg group-hover:brightness-110 transition-all"
+                            href="/core/contacts/{con.contact_id_random}">
                             Manage Contact
                         </a>
                     </div>

src/routes/core/contacts/[contact_id]/+page.svelte

@@ -9,7 +9,23 @@
 import { editable_fields__contact } from '$lib/ae_core/ae_core__contact.editable_fields';
 import { ae_api, ae_loc } from '$lib/stores/ae_stores';
 import { goto } from '$app/navigation';
-    import { Activity, ArrowLeft, Contact, Edit, Eye, Globe, Info, Link2, Linkedin, Mail, Phone, Save, ShieldCheck, Trash2, UserRound } from '@lucide/svelte';
+import {
+    Activity,
+    ArrowLeft,
+    Contact,
+    Edit,
+    Eye,
+    Globe,
+    Info,
+    Link2,
+    Linkedin,
+    Mail,
+    Phone,
+    Save,
+    ShieldCheck,
+    Trash2,
+    UserRound
+} from '@lucide/svelte';
 import Contact_form from '../ae_comp__contact_form.svelte';
 
 let contact_id = $derived($page.params.contact_id ?? '');
@@ -48,9 +64,12 @@
 </script>
 
 <div class="container mx-auto p-4 space-y-6">
-    <header class="flex flex-wrap justify-between items-center bg-surface-50-900-token p-4 rounded-xl shadow-lg border border-surface-500/10 gap-4">
+    <header
+        class="flex flex-wrap justify-between items-center bg-surface-50-900-token p-4 rounded-xl shadow-lg border border-surface-500/10 gap-4">
         <div class="flex items-center gap-4">
-            <a class="btn btn-sm preset-tonal-surface shadow-sm" href="/core/contacts">
+            <a
+                class="btn btn-sm preset-tonal-surface shadow-sm"
+                href="/core/contacts">
                 <ArrowLeft size={16} />
             </a>
             <div class="flex items-center gap-3">
@@ -58,20 +77,31 @@
                     <UserRound size={24} class="text-primary-500" />
                 </div>
                 <div>
-                    <h1 class="h2 font-black tracking-tight">{contact?.name || contact?.title || 'Loading...'}</h1>
+                    <h1 class="h2 font-black tracking-tight">
-                    <p class="text-xs font-bold opacity-50 uppercase tracking-widest">Contact Detail</p>
+                        {contact?.name || contact?.title || 'Loading...'}
+                    </h1>
+                    <p
+                        class="text-xs font-bold opacity-50 uppercase tracking-widest">
+                        Contact Detail
+                    </p>
                 </div>
             </div>
         </div>
         <div class="flex gap-2">
-            <button class="btn btn-sm preset-tonal-secondary font-bold shadow-sm" onclick={() => is_editing = !is_editing} disabled={loading}>
+            <button
+                class="btn btn-sm preset-tonal-secondary font-bold shadow-sm"
+                onclick={() => (is_editing = !is_editing)}
+                disabled={loading}>
                 {#if is_editing}
                     <Eye size={16} class="mr-2" /> View Mode
                 {:else}
                     <Edit size={16} class="mr-2" /> Edit Mode
                 {/if}
             </button>
-            <button class="btn btn-sm preset-tonal-error font-bold shadow-sm" onclick={handle_delete} disabled={loading}>
+            <button
+                class="btn btn-sm preset-tonal-error font-bold shadow-sm"
+                onclick={handle_delete}
+                disabled={loading}>
                 <Trash2 size={16} class="mr-2" /> Delete
             </button>
         </div>
@@ -79,7 +109,8 @@
 
     {#if loading}
         <div class="card p-8 flex justify-center items-center h-64">
-            <div class="placeholder animate-pulse w-full h-full rounded-2xl"></div>
+            <div class="placeholder animate-pulse w-full h-full rounded-2xl">
+            </div>
         </div>
     {:else if contact}
         {#if is_editing}
@@ -90,43 +121,62 @@
                         contact = updated;
                         is_editing = false;
                     }}
-                    onCancel={() => is_editing = false}
+                    onCancel={() => (is_editing = false)} />
-                />
             </div>
         {:else}
             <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 animate-fade-in">
                 <div class="lg:col-span-2 space-y-6">
-                    <div class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10 space-y-6">
+                    <div
-                        <h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
+                        class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10 space-y-6">
+                        <h3
+                            class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
                             <Contact size={20} class="text-primary-500" />
                             Core Information
                         </h3>
                         <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                             <div class="space-y-1">
-                                <p class="text-[10px] opacity-60 uppercase font-black tracking-widest flex items-center gap-1">
+                                <p
+                                    class="text-[10px] opacity-60 uppercase font-black tracking-widest flex items-center gap-1">
                                     <UserRound size={10} /> Full Name / Title
                                 </p>
-                                <p class="text-lg font-black tracking-tight leading-tight">{contact.name || contact.title || '--'}</p>
+                                <p
+                                    class="text-lg font-black tracking-tight leading-tight">
+                                    {contact.name || contact.title || '--'}
+                                </p>
                             </div>
                             <div class="space-y-1">
-                                <p class="text-[10px] opacity-60 uppercase font-black tracking-widest flex items-center gap-1">
+                                <p
+                                    class="text-[10px] opacity-60 uppercase font-black tracking-widest flex items-center gap-1">
                                     <Activity size={10} /> Tagline / Role
                                 </p>
-                                <p class="font-bold">{contact.tagline || '--'}</p>
+                                <p class="font-bold">
+                                    {contact.tagline || '--'}
+                                </p>
                             </div>
-                            <div class="space-y-1 bg-black/5 p-4 rounded-xl border border-surface-500/10">
+                            <div
-                                <p class="text-[10px] opacity-60 uppercase font-black tracking-widest flex items-center gap-1">
+                                class="space-y-1 bg-black/5 p-4 rounded-xl border border-surface-500/10">
+                                <p
+                                    class="text-[10px] opacity-60 uppercase font-black tracking-widest flex items-center gap-1">
                                     <Mail size={10} /> Email Address
                                 </p>
-                                <p class="font-bold text-primary-500 break-all">{contact.email || '--'}</p>
+                                <p class="font-bold text-primary-500 break-all">
+                                    {contact.email || '--'}
+                                </p>
                             </div>
-                            <div class="space-y-1 bg-black/5 p-4 rounded-xl border border-surface-500/10">
+                            <div
-                                <p class="text-[10px] opacity-60 uppercase font-black tracking-widest flex items-center gap-1">
+                                class="space-y-1 bg-black/5 p-4 rounded-xl border border-surface-500/10">
+                                <p
+                                    class="text-[10px] opacity-60 uppercase font-black tracking-widest flex items-center gap-1">
                                     <Globe size={10} /> Website
                                 </p>
                                 {#if contact.website_url}
-                                    <a href={contact.website_url} target="_blank" rel="noopener noreferrer" class="font-bold text-secondary-500 hover:underline flex items-center gap-2 truncate">
+                                    <a
-                                        {contact.website_url} <Link2 size={12} />
+                                        href={contact.website_url}
+                                        target="_blank"
+                                        rel="noopener noreferrer"
+                                        class="font-bold text-secondary-500 hover:underline flex items-center gap-2 truncate">
+                                        {contact.website_url}
+                                        <Link2 size={12} />
                                     </a>
                                 {:else}
                                     <p class="font-bold">--</p>
@@ -135,36 +185,52 @@
                         </div>
                     </div>
 
-                    <div class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10 space-y-6">
+                    <div
-                        <h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
+                        class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10 space-y-6">
+                        <h3
+                            class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
                             <Phone size={20} class="text-secondary-500" />
                             Communication & Social
                         </h3>
                         <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                             <div class="space-y-1">
-                                <p class="text-[10px] opacity-60 uppercase font-black tracking-widest flex items-center gap-1">
+                                <p
+                                    class="text-[10px] opacity-60 uppercase font-black tracking-widest flex items-center gap-1">
                                     <Phone size={10} /> Mobile Phone
                                 </p>
-                                <p class="font-mono font-bold">{contact.phone_mobile || contact.phone || '--'}</p>
+                                <p class="font-mono font-bold">
+                                    {contact.phone_mobile ||
+                                        contact.phone ||
+                                        '--'}
+                                </p>
                             </div>
                             <div class="space-y-1">
-                                <p class="text-[10px] opacity-60 uppercase font-black tracking-widest flex items-center gap-1">
+                                <p
+                                    class="text-[10px] opacity-60 uppercase font-black tracking-widest flex items-center gap-1">
                                     <Phone size={10} /> Office Phone
                                 </p>
-                                <p class="font-mono font-bold">{contact.phone_office || '--'}</p>
+                                <p class="font-mono font-bold">
+                                    {contact.phone_office || '--'}
+                                </p>
                             </div>
                             <div class="space-y-1">
-                                <p class="text-[10px] opacity-60 uppercase font-black tracking-widest flex items-center gap-1">
+                                <p
+                                    class="text-[10px] opacity-60 uppercase font-black tracking-widest flex items-center gap-1">
                                     <Linkedin size={10} /> LinkedIn
                                 </p>
-                                <p class="font-bold truncate">{contact.linkedin_url || '--'}</p>
+                                <p class="font-bold truncate">
+                                    {contact.linkedin_url || '--'}
+                                </p>
                             </div>
                             <div class="md:col-span-2 space-y-2">
-                                <p class="text-[10px] opacity-60 uppercase font-black tracking-widest flex items-center gap-1">
+                                <p
+                                    class="text-[10px] opacity-60 uppercase font-black tracking-widest flex items-center gap-1">
                                     <Info size={10} /> Internal Notes
                                 </p>
-                                <div class="p-4 bg-black/5 rounded-xl border border-dashed border-surface-500/20 italic opacity-80 min-h-[80px]">
+                                <div
-                                    {contact.notes || 'No internal notes provided for this contact.'}
+                                    class="p-4 bg-black/5 rounded-xl border border-dashed border-surface-500/20 italic opacity-80 min-h-[80px]">
+                                    {contact.notes ||
+                                        'No internal notes provided for this contact.'}
                                 </div>
                             </div>
                         </div>
@@ -172,40 +238,77 @@
                 </div>
 
                 <div class="space-y-6">
-                    <div class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10 space-y-6">
+                    <div
-                        <h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
+                        class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10 space-y-6">
+                        <h3
+                            class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
                             <ShieldCheck size={20} class="text-warning-500" />
                             Status & Flags
                         </h3>
                         <div class="space-y-4">
-                            <div class="flex justify-between items-center p-3 bg-black/5 rounded-lg">
+                            <div
-                                <span class="text-sm font-bold opacity-75">Enabled</span>
+                                class="flex justify-between items-center p-3 bg-black/5 rounded-lg">
-                                <span class="badge {contact.enable ? 'preset-filled-success' : 'preset-filled-error'} px-4 py-1 shadow-sm">
+                                <span class="text-sm font-bold opacity-75"
+                                    >Enabled</span>
+                                <span
+                                    class="badge {contact.enable
+                                        ? 'preset-filled-success'
+                                        : 'preset-filled-error'} px-4 py-1 shadow-sm">
                                     {contact.enable ? 'ACTIVE' : 'DISABLED'}
                                 </span>
                             </div>
-                            <div class="flex justify-between items-center p-3 bg-black/5 rounded-lg">
+                            <div
-                                <span class="text-sm font-bold opacity-75">Hidden</span>
+                                class="flex justify-between items-center p-3 bg-black/5 rounded-lg">
-                                <span class="badge {contact.hide ? 'preset-filled-warning' : 'preset-filled-surface'} px-4 py-1 shadow-sm">
+                                <span class="text-sm font-bold opacity-75"
+                                    >Hidden</span>
+                                <span
+                                    class="badge {contact.hide
+                                        ? 'preset-filled-warning'
+                                        : 'preset-filled-surface'} px-4 py-1 shadow-sm">
                                     {contact.hide ? 'YES' : 'NO'}
                                 </span>
                             </div>
-                            <div class="flex justify-between items-center p-3 bg-black/5 rounded-lg">
+                            <div
-                                <span class="text-sm font-bold opacity-75">Priority</span>
+                                class="flex justify-between items-center p-3 bg-black/5 rounded-lg">
-                                <span class="badge {contact.priority ? 'preset-filled-secondary' : 'preset-filled-surface'} px-4 py-1 shadow-sm">
+                                <span class="text-sm font-bold opacity-75"
+                                    >Priority</span>
+                                <span
+                                    class="badge {contact.priority
+                                        ? 'preset-filled-secondary'
+                                        : 'preset-filled-surface'} px-4 py-1 shadow-sm">
                                     {contact.priority ? 'YES' : 'NO'}
                                 </span>
                             </div>
                         </div>
                     </div>
 
-                    <div class="card p-5 preset-tonal-surface shadow-inner border border-surface-500/10 space-y-3">
+                    <div
-                        <p class="text-[10px] uppercase font-black opacity-40 tracking-widest border-b border-surface-500/20 pb-1">System Audit</p>
+                        class="card p-5 preset-tonal-surface shadow-inner border border-surface-500/10 space-y-3">
+                        <p
+                            class="text-[10px] uppercase font-black opacity-40 tracking-widest border-b border-surface-500/20 pb-1">
+                            System Audit
+                        </p>
                         <div class="space-y-2 text-[10px] font-mono opacity-60">
-                            <p class="flex justify-between"><span>ID:</span> <span class="text-primary-500 font-bold">{contact.contact_id_random}</span></p>
+                            <p class="flex justify-between">
-                            <p class="flex justify-between"><span>Created:</span> <span>{new Date(contact.created_on).toLocaleString()}</span></p>
+                                <span>ID:</span>
+                                <span class="text-primary-500 font-bold"
+                                    >{contact.contact_id_random}</span>
+                            </p>
+                            <p class="flex justify-between">
+                                <span>Created:</span>
+                                <span
+                                    >{new Date(
+                                        contact.created_on
+                                    ).toLocaleString()}</span>
+                            </p>
                             {#if contact.updated_on}
-                                <p class="flex justify-between"><span>Updated:</span> <span>{new Date(contact.updated_on).toLocaleString()}</span></p>
+                                <p class="flex justify-between">
+                                    <span>Updated:</span>
+                                    <span
+                                        >{new Date(
+                                            contact.updated_on
+                                        ).toLocaleString()}</span>
+                                </p>
                             {/if}
                         </div>
                     </div>

src/routes/core/contacts/ae_comp__contact_form.svelte

@@ -5,9 +5,22 @@
  * Uses unified ae_Contact type and Svelte 5 Runes.
  */
 import { ae_api, ae_loc } from '$lib/stores/ae_stores';
-    import { update_ae_obj__contact, create_ae_obj__contact } from '$lib/ae_core/ae_core__contact';
+import {
+    update_ae_obj__contact,
+    create_ae_obj__contact
+} from '$lib/ae_core/ae_core__contact';
 import type { ae_Contact } from '$lib/types/ae_types';
-    import { Facebook, Globe, Instagram, Linkedin, Mail, Phone, Save, UserPlus, X } from '@lucide/svelte';
+import {
+    Facebook,
+    Globe,
+    Instagram,
+    Linkedin,
+    Mail,
+    Phone,
+    Save,
+    UserPlus,
+    X
+} from '@lucide/svelte';
 interface Props {
     contact?: ae_Contact | null;
     onSave?: (contact: ae_Contact) => void;
@@ -104,19 +117,28 @@
 }
 </script>
 
-<form onsubmit={handleSubmit} class="card p-6 space-y-6 shadow-xl preset-tonal-surface">
+<form
-    <header class="flex justify-between items-center border-b border-surface-500/30 pb-4">
+    onsubmit={handleSubmit}
+    class="card p-6 space-y-6 shadow-xl preset-tonal-surface">
+    <header
+        class="flex justify-between items-center border-b border-surface-500/30 pb-4">
         <h3 class="h3 flex items-center gap-2">
             <UserPlus size={24} />
             {contact ? 'Edit Contact' : 'Create New Contact'}
         </h3>
         <div class="flex gap-2">
             {#if onCancel}
-                <button type="button" class="btn btn-sm preset-tonal-surface" onclick={onCancel}>
+                <button
+                    type="button"
+                    class="btn btn-sm preset-tonal-surface"
+                    onclick={onCancel}>
                     <X size={16} class="mr-1" /> Cancel
                 </button>
             {/if}
-            <button type="submit" class="btn btn-sm preset-filled-primary font-bold shadow-lg" disabled={is_loading}>
+            <button
+                type="submit"
+                class="btn btn-sm preset-filled-primary font-bold shadow-lg"
+                disabled={is_loading}>
                 {#if is_loading}
                     <span class="animate-spin mr-2">⏳</span>
                 {:else}
@@ -138,82 +160,163 @@
     <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
         <!-- Identity Section -->
         <fieldset class="space-y-4">
-            <legend class="text-sm font-bold uppercase tracking-widest opacity-60">Identity & Branding</legend>
+            <legend
+                class="text-sm font-bold uppercase tracking-widest opacity-60"
+                >Identity & Branding</legend>
 
             <div class="space-y-1">
-                <label class="label text-xs font-bold opacity-75" for="contact-title">Title / Name</label>
+                <label
-                <input class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2" id="contact-title" type="text" bind:value={formData.title} required placeholder="Business Office" />
+                    class="label text-xs font-bold opacity-75"
+                    for="contact-title">Title / Name</label>
+                <input
+                    class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2"
+                    id="contact-title"
+                    type="text"
+                    bind:value={formData.title}
+                    required
+                    placeholder="Business Office" />
             </div>
 
             <div class="space-y-1">
-                <label class="label text-xs font-bold opacity-75" for="contact-tagline">Tagline</label>
+                <label
-                <input class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2" id="contact-tagline" type="text" bind:value={formData.tagline} placeholder="Primary contact for business inquiries" />
+                    class="label text-xs font-bold opacity-75"
+                    for="contact-tagline">Tagline</label>
+                <input
+                    class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2"
+                    id="contact-tagline"
+                    type="text"
+                    bind:value={formData.tagline}
+                    placeholder="Primary contact for business inquiries" />
             </div>
 
             <div class="space-y-1">
-                <label class="label text-xs font-bold opacity-75" for="contact-email">Email Address</label>
+                <label
-                <div class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
+                    class="label text-xs font-bold opacity-75"
+                    for="contact-email">Email Address</label>
+                <div
+                    class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
                     <div class="input-group-shim"><Mail size={16} /></div>
-                    <input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" id="contact-email" type="email" bind:value={formData.email} placeholder="contact@example.com" />
+                    <input
+                        class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2"
+                        id="contact-email"
+                        type="email"
+                        bind:value={formData.email}
+                        placeholder="contact@example.com" />
                 </div>
             </div>
         </fieldset>
 
         <!-- Communication Section -->
         <fieldset class="space-y-4">
-            <legend class="text-sm font-bold uppercase tracking-widest opacity-60">Phone & Web</legend>
+            <legend
+                class="text-sm font-bold uppercase tracking-widest opacity-60"
+                >Phone & Web</legend>
 
             <div class="grid grid-cols-2 gap-2">
                 <div class="space-y-1">
-                    <label class="label text-xs font-bold opacity-75" for="contact-phone-mobile">Mobile Phone</label>
+                    <label
-                    <div class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
+                        class="label text-xs font-bold opacity-75"
+                        for="contact-phone-mobile">Mobile Phone</label>
+                    <div
+                        class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
                         <div class="input-group-shim"><Phone size={16} /></div>
-                        <input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" id="contact-phone-mobile" type="tel" bind:value={formData.phone_mobile} placeholder="+1..." />
+                        <input
+                            class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2"
+                            id="contact-phone-mobile"
+                            type="tel"
+                            bind:value={formData.phone_mobile}
+                            placeholder="+1..." />
                     </div>
                 </div>
                 <div class="space-y-1">
-                    <label class="label text-xs font-bold opacity-75" for="contact-phone-office">Office Phone</label>
+                    <label
-                    <div class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
+                        class="label text-xs font-bold opacity-75"
+                        for="contact-phone-office">Office Phone</label>
+                    <div
+                        class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
                         <div class="input-group-shim"><Phone size={16} /></div>
-                        <input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" id="contact-phone-office" type="tel" bind:value={formData.phone_office} placeholder="+1..." />
+                        <input
+                            class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2"
+                            id="contact-phone-office"
+                            type="tel"
+                            bind:value={formData.phone_office}
+                            placeholder="+1..." />
                     </div>
                 </div>
             </div>
 
             <div class="space-y-1">
-                <label class="label text-xs font-bold opacity-75" for="contact-website">Website URL</label>
+                <label
-                <div class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
+                    class="label text-xs font-bold opacity-75"
+                    for="contact-website">Website URL</label>
+                <div
+                    class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
                     <div class="input-group-shim"><Globe size={16} /></div>
-                    <input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" id="contact-website" type="url" bind:value={formData.website_url} placeholder="https://..." />
+                    <input
+                        class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2"
+                        id="contact-website"
+                        type="url"
+                        bind:value={formData.website_url}
+                        placeholder="https://..." />
                 </div>
             </div>
         </fieldset>
 
         <!-- Social Media Section -->
         <fieldset class="space-y-4">
-            <legend class="text-sm font-bold uppercase tracking-widest opacity-60">Social Media</legend>
+            <legend
+                class="text-sm font-bold uppercase tracking-widest opacity-60"
+                >Social Media</legend>
 
             <div class="space-y-1">
-                <label class="label text-xs font-bold opacity-75" for="contact-linkedin">LinkedIn URL</label>
+                <label
-                <div class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
+                    class="label text-xs font-bold opacity-75"
+                    for="contact-linkedin">LinkedIn URL</label>
+                <div
+                    class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
                     <div class="input-group-shim"><Linkedin size={16} /></div>
-                    <input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" id="contact-linkedin" type="url" bind:value={formData.linkedin_url} placeholder="https://linkedin.com/in/..." />
+                    <input
+                        class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2"
+                        id="contact-linkedin"
+                        type="url"
+                        bind:value={formData.linkedin_url}
+                        placeholder="https://linkedin.com/in/..." />
                 </div>
             </div>
 
             <div class="grid grid-cols-2 gap-2">
                 <div class="space-y-1">
-                    <label class="label text-xs font-bold opacity-75" for="contact-facebook">Facebook URL</label>
+                    <label
-                    <div class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
+                        class="label text-xs font-bold opacity-75"
-                        <div class="input-group-shim"><Facebook size={16} /></div>
+                        for="contact-facebook">Facebook URL</label>
-                        <input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" id="contact-facebook" type="url" bind:value={formData.facebook_url} placeholder="https://facebook.com/..." />
+                    <div
+                        class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
+                        <div class="input-group-shim">
+                            <Facebook size={16} />
+                        </div>
+                        <input
+                            class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2"
+                            id="contact-facebook"
+                            type="url"
+                            bind:value={formData.facebook_url}
+                            placeholder="https://facebook.com/..." />
                     </div>
                 </div>
                 <div class="space-y-1">
-                    <label class="label text-xs font-bold opacity-75" for="contact-instagram">Instagram URL</label>
+                    <label
-                    <div class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
+                        class="label text-xs font-bold opacity-75"
-                        <div class="input-group-shim"><Instagram size={16} /></div>
+                        for="contact-instagram">Instagram URL</label>
-                        <input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" id="contact-instagram" type="url" bind:value={formData.instagram_url} placeholder="https://instagram.com/..." />
+                    <div
+                        class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
+                        <div class="input-group-shim">
+                            <Instagram size={16} />
+                        </div>
+                        <input
+                            class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2"
+                            id="contact-instagram"
+                            type="url"
+                            bind:value={formData.instagram_url}
+                            placeholder="https://instagram.com/..." />
                     </div>
                 </div>
             </div>
@@ -221,32 +324,53 @@
 
         <!-- Status Section -->
         <fieldset class="space-y-4">
-            <legend class="text-sm font-bold uppercase tracking-widest opacity-60">Status</legend>
+            <legend
+                class="text-sm font-bold uppercase tracking-widest opacity-60"
+                >Status</legend>
 
             <div class="flex flex-wrap gap-4 pt-2">
                 <label class="flex items-center space-x-2 cursor-pointer">
-                    <input class="checkbox" type="checkbox" bind:checked={formData.enable} />
+                    <input
+                        class="checkbox"
+                        type="checkbox"
+                        bind:checked={formData.enable} />
                     <span class="text-sm font-medium">Enabled</span>
                 </label>
                 <label class="flex items-center space-x-2 cursor-pointer">
-                    <input class="checkbox" type="checkbox" bind:checked={formData.hide} />
+                    <input
+                        class="checkbox"
+                        type="checkbox"
+                        bind:checked={formData.hide} />
                     <span class="text-sm font-medium">Hidden</span>
                 </label>
                 <label class="flex items-center space-x-2 cursor-pointer">
-                    <input class="checkbox" type="checkbox" bind:checked={formData.priority} />
+                    <input
+                        class="checkbox"
+                        type="checkbox"
+                        bind:checked={formData.priority} />
                     <span class="text-sm font-medium">Priority</span>
                 </label>
             </div>
 
             <div class="space-y-1">
-                <label class="label text-xs font-bold opacity-75" for="contact-notes">Internal Notes</label>
+                <label
-                <textarea class="textarea preset-filled-surface rounded-lg placeholder-surface-400 p-2" id="contact-notes" rows="2" bind:value={formData.notes} placeholder="Additional details..."></textarea>
+                    class="label text-xs font-bold opacity-75"
+                    for="contact-notes">Internal Notes</label>
+                <textarea
+                    class="textarea preset-filled-surface rounded-lg placeholder-surface-400 p-2"
+                    id="contact-notes"
+                    rows="2"
+                    bind:value={formData.notes}
+                    placeholder="Additional details..."></textarea>
             </div>
         </fieldset>
     </div>
 
     <footer class="flex justify-end gap-2 border-t border-surface-500/30 pt-4">
-        <button type="submit" class="btn preset-filled-primary font-bold shadow-lg w-full md:w-auto" disabled={is_loading}>
+        <button
+            type="submit"
+            class="btn preset-filled-primary font-bold shadow-lg w-full md:w-auto"
+            disabled={is_loading}>
             {#if is_loading}
                 <span class="animate-spin mr-2">⏳</span>
             {/if}

src/routes/core/lookups/+page.svelte

@@ -2,7 +2,17 @@
 import { onMount } from 'svelte';
 import { ae_api, ae_loc } from '$lib/stores/ae_stores';
 import { goto } from '$app/navigation';
-    import { Clock, Globe, Info, Landmark, List, ListFilter, MapPin, RefreshCcw, Star } from '@lucide/svelte';
+import {
+    Clock,
+    Globe,
+    Info,
+    Landmark,
+    List,
+    ListFilter,
+    MapPin,
+    RefreshCcw,
+    Star
+} from '@lucide/svelte';
 import { api } from '$lib/api/api';
 
 let loading = $state(true);
@@ -17,8 +27,16 @@
     loading = true;
     try {
         const [countries, subdivisions, time_zones] = await Promise.all([
-                api.get_ae_obj_li_for_lu({ api_cfg: $ae_api, for_lu_type: 'country', log_lvl: 1 }),
+            api.get_ae_obj_li_for_lu({
-                api.get_ae_obj_li_for_lu({ api_cfg: $ae_api, for_lu_type: 'country_subdivision', log_lvl: 1 }),
+                api_cfg: $ae_api,
+                for_lu_type: 'country',
+                log_lvl: 1
+            }),
+            api.get_ae_obj_li_for_lu({
+                api_cfg: $ae_api,
+                for_lu_type: 'country_subdivision',
+                log_lvl: 1
+            }),
             api.get_ae_obj_li_for_lu({
                 api_cfg: $ae_api,
                 for_lu_type: 'time_zone',
@@ -57,18 +75,25 @@
 </script>
 
 <div class="container mx-auto p-4 space-y-6">
-    <header class="flex flex-wrap justify-between items-center bg-surface-50-900-token p-4 rounded-xl shadow-lg border border-surface-500/10 gap-4">
+    <header
+        class="flex flex-wrap justify-between items-center bg-surface-50-900-token p-4 rounded-xl shadow-lg border border-surface-500/10 gap-4">
         <div class="flex items-center gap-3">
             <div class="p-2 bg-primary-500/10 rounded-lg">
                 <List size={24} class="text-primary-500" />
             </div>
             <div>
                 <h1 class="h2 font-black tracking-tight">System Lookups</h1>
-                <p class="text-xs font-bold opacity-50 uppercase tracking-widest">Global Reference Data</p>
+                <p
+                    class="text-xs font-bold opacity-50 uppercase tracking-widest">
+                    Global Reference Data
+                </p>
             </div>
         </div>
         <div class="flex gap-2">
-            <button class="btn btn-sm preset-filled-primary font-bold shadow-lg" onclick={load_lookups} disabled={loading}>
+            <button
+                class="btn btn-sm preset-filled-primary font-bold shadow-lg"
+                onclick={load_lookups}
+                disabled={loading}>
                 {#if loading}
                     <RefreshCcw size={16} class="mr-2 animate-spin" /> Loading...
                 {:else}
@@ -80,22 +105,29 @@
 
     {#if loading && !lookups.countries.length}
         <div class="card p-8 flex justify-center items-center h-64">
-            <div class="placeholder animate-pulse w-full h-full rounded-2xl"></div>
+            <div class="placeholder animate-pulse w-full h-full rounded-2xl">
+            </div>
         </div>
     {:else}
         <div class="space-y-6 animate-fade-in">
             <!-- 1. Countries -->
-            <div class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10 space-y-6">
+            <div
-                <h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
+                class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10 space-y-6">
+                <h3
+                    class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
                     <Globe size={20} class="text-secondary-500" />
                     Country Reference
-                    <span class="badge preset-tonal-secondary ml-auto text-[10px] uppercase font-bold">{lookups.countries.length} Records</span>
+                    <span
+                        class="badge preset-tonal-secondary ml-auto text-[10px] uppercase font-bold"
+                        >{lookups.countries.length} Records</span>
                 </h3>
 
-                <div class="table-container max-h-[400px] overflow-auto border border-surface-500/10 rounded-lg">
+                <div
+                    class="table-container max-h-[400px] overflow-auto border border-surface-500/10 rounded-lg">
                     <table class="table table-hover table-compact">
                         <thead>
-                            <tr class="uppercase text-[10px] tracking-widest opacity-60">
+                            <tr
+                                class="uppercase text-[10px] tracking-widest opacity-60">
                                 <th>Name</th>
                                 <th class="text-center">ISO Alpha-2</th>
                             </tr>
@@ -103,8 +135,13 @@
                         <tbody>
                             {#each lookups.countries as c (c.alpha_2_code)}
                                 <tr class="transition-colors">
-                                    <td class="font-bold">{c.name || c.english_short_name}</td>
+                                    <td class="font-bold"
-                                    <td class="text-center"><span class="badge preset-tonal-surface font-mono text-primary-500">{c.alpha_2_code}</span></td>
+                                        >{c.name || c.english_short_name}</td>
+                                    <td class="text-center"
+                                        ><span
+                                            class="badge preset-tonal-surface font-mono text-primary-500"
+                                            >{c.alpha_2_code}</span
+                                        ></td>
                                 </tr>
                             {/each}
                         </tbody>
@@ -113,17 +150,23 @@
             </div>
 
             <!-- 2. Subdivisions -->
-            <div class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10 space-y-6">
+            <div
-                <h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
+                class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10 space-y-6">
+                <h3
+                    class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
                     <MapPin size={20} class="text-primary-500" />
                     Country Subdivisions (States/Provinces)
-                    <span class="badge preset-tonal-secondary ml-auto text-[10px] uppercase font-bold">{lookups.subdivisions.length} Records</span>
+                    <span
+                        class="badge preset-tonal-secondary ml-auto text-[10px] uppercase font-bold"
+                        >{lookups.subdivisions.length} Records</span>
                 </h3>
 
-                <div class="table-container max-h-[500px] overflow-auto border border-surface-500/10 rounded-lg">
+                <div
+                    class="table-container max-h-[500px] overflow-auto border border-surface-500/10 rounded-lg">
                     <table class="table table-hover table-compact">
                         <thead>
-                            <tr class="uppercase text-[10px] tracking-widest opacity-60">
+                            <tr
+                                class="uppercase text-[10px] tracking-widest opacity-60">
                                 <th>Country</th>
                                 <th>Name</th>
                                 <th class="text-center">Code</th>
@@ -132,9 +175,14 @@
                         <tbody>
                             {#each lookups.subdivisions as s, i (i)}
                                 <tr class="transition-colors">
-                                    <td class="opacity-60">{s.country_alpha_2_code}</td>
+                                    <td class="opacity-60"
+                                        >{s.country_alpha_2_code}</td>
                                     <td class="font-bold">{s.name}</td>
-                                    <td class="text-center"><span class="badge preset-tonal-surface font-mono">{s.code}</span></td>
+                                    <td class="text-center"
+                                        ><span
+                                            class="badge preset-tonal-surface font-mono"
+                                            >{s.code}</span
+                                        ></td>
                                 </tr>
                             {/each}
                         </tbody>
@@ -143,27 +191,40 @@
             </div>
 
             <!-- 3. Time Zones -->
-            <div class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10 space-y-6">
+            <div
-                <div class="flex flex-wrap justify-between items-center border-b border-surface-500/30 pb-2 gap-4">
+                class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10 space-y-6">
+                <div
+                    class="flex flex-wrap justify-between items-center border-b border-surface-500/30 pb-2 gap-4">
                     <h3 class="h4 font-bold flex items-center gap-2">
                         <Clock size={20} class="text-tertiary-500" />
                         Time Zone Reference
-                        <span class="badge preset-tonal-secondary text-[10px] uppercase font-bold">{lookups.time_zones.length} Zones</span>
+                        <span
+                            class="badge preset-tonal-secondary text-[10px] uppercase font-bold"
+                            >{lookups.time_zones.length} Zones</span>
                     </h3>
                     <button
-                        class="btn btn-sm transition-all {tz_only_priority ? 'preset-filled-warning' : 'preset-tonal-surface'}"
+                        class="btn btn-sm transition-all {tz_only_priority
+                            ? 'preset-filled-warning'
+                            : 'preset-tonal-surface'}"
                         onclick={toggle_tz_priority}
-                        disabled={loading}
+                        disabled={loading}>
-                    >
+                        <Star
-                        <Star size={14} class="mr-2 {tz_only_priority ? 'fill-current' : ''}" />
+                            size={14}
-                        {tz_only_priority ? 'Showing Priority' : 'Show Only Priority'}
+                            class="mr-2 {tz_only_priority
+                                ? 'fill-current'
+                                : ''}" />
+                        {tz_only_priority
+                            ? 'Showing Priority'
+                            : 'Show Only Priority'}
                     </button>
                 </div>
 
-                <div class="table-container max-h-[500px] overflow-auto border border-surface-500/10 rounded-lg">
+                <div
+                    class="table-container max-h-[500px] overflow-auto border border-surface-500/10 rounded-lg">
                     <table class="table table-hover table-compact">
                         <thead>
-                            <tr class="uppercase text-[10px] tracking-widest opacity-60">
+                            <tr
+                                class="uppercase text-[10px] tracking-widest opacity-60">
                                 <th>Zone Name</th>
                                 <th class="text-right">Offset (Hours)</th>
                             </tr>
@@ -172,7 +233,11 @@
                             {#each lookups.time_zones as tz (tz.name)}
                                 <tr class="transition-colors">
                                     <td class="font-bold">{tz.name}</td>
-                                    <td class="text-right"><span class="badge preset-tonal-surface font-mono">{tz.offset_seconds / 3600}h</span></td>
+                                    <td class="text-right"
+                                        ><span
+                                            class="badge preset-tonal-surface font-mono"
+                                            >{tz.offset_seconds / 3600}h</span
+                                        ></td>
                                 </tr>
                             {/each}
                         </tbody>
@@ -181,9 +246,13 @@
             </div>
         </div>
 
-        <div class="card p-4 preset-tonal-surface border border-surface-500/10 flex items-center gap-3">
+        <div
+            class="card p-4 preset-tonal-surface border border-surface-500/10 flex items-center gap-3">
             <Info size={16} class="text-primary-500" />
-            <p class="text-xs opacity-70">Lookup data is synchronized with the global system database and used for addresses, event scheduling, and localized displays.</p>
+            <p class="text-xs opacity-70">
+                Lookup data is synchronized with the global system database and
+                used for addresses, event scheduling, and localized displays.
+            </p>
         </div>
     {/if}
 </div>

src/routes/core/people/+page.svelte

@@ -20,7 +20,8 @@
 </script>
 
 <div class="container mx-auto p-4 space-y-6">
-    <header class="flex justify-between items-center bg-surface-50-900-token p-4 rounded-xl shadow-lg border border-surface-500/10">
+    <header
+        class="flex justify-between items-center bg-surface-50-900-token p-4 rounded-xl shadow-lg border border-surface-500/10">
         <div class="flex items-center gap-2">
             <div class="p-2 bg-primary-500/10 rounded-lg">
                 <Users size={24} class="text-primary-500" />
@@ -29,10 +30,9 @@
         </div>
         <button
             type="button"
-            onclick={() => show_add_form = !show_add_form}
+            onclick={() => (show_add_form = !show_add_form)}
             class="btn btn-sm preset-filled-primary font-bold shadow-lg"
-            class:hidden={!$ae_loc.edit_mode}
+            class:hidden={!$ae_loc.edit_mode}>
-        >
             {#if show_add_form}
                 <X size={16} class="mr-2" /> Cancel
             {:else}
@@ -48,22 +48,25 @@
                     show_add_form = false;
                     goto(`/core/people/${new_person.person_id_random}`);
                 }}
-                onCancel={() => show_add_form = false}
+                onCancel={() => (show_add_form = false)} />
-            />
         </div>
     {/if}
 
-    <Comp_person_search on_results={(results) => {
+    <Comp_person_search
-        person_id_random_li = results.map(p => p.person_id_random);
+        on_results={(results) => {
+            person_id_random_li = results.map((p) => p.person_id_random);
             $ae_sess.person.show_report__person_li = true;
         }} />
 
     {#if $ae_sess.person.show_report__person_li}
-        <div class="card p-6 preset-tonal-surface shadow-xl space-y-4 border border-surface-500/10">
+        <div
-            <h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
+            class="card p-6 preset-tonal-surface shadow-xl space-y-4 border border-surface-500/10">
+            <h3
+                class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
                 <ListFilter size={18} class="text-secondary-500" />
                 Search Results
-                <span class="badge preset-tonal-secondary ml-auto">{person_id_random_li.length} found</span>
+                <span class="badge preset-tonal-secondary ml-auto"
+                    >{person_id_random_li.length} found</span>
             </h3>
             <div class="overflow-x-auto">
                 <Comp_person_obj_tbl

src/routes/core/people/[person_id]/+page.svelte

@@ -33,7 +33,23 @@
 import { qry_ae_obj_li__event } from '$lib/ae_events/ae_events__event';
 import { qry__post } from '$lib/ae_posts/ae_posts__post';
 import { qry__activity_log } from '$lib/ae_core/ae_core__activity_log';
-    import { Activity, ArrowLeft, Calendar, Edit, Eye, HelpCircle, History, Link, LoaderCircle, MessageSquare, ShieldCheck, Unlink, User, UserPlus, Users } from '@lucide/svelte';
+import {
+    Activity,
+    ArrowLeft,
+    Calendar,
+    Edit,
+    Eye,
+    HelpCircle,
+    History,
+    Link,
+    LoaderCircle,
+    MessageSquare,
+    ShieldCheck,
+    Unlink,
+    User,
+    UserPlus,
+    Users
+} from '@lucide/svelte';
 interface Props {
     data: any;
 }
@@ -110,7 +126,7 @@
     });
     // Filter users that don't have a person_id linked
     // NOTE: The backend might return person_id or person_id
-        available_users = all_users.filter(u => !u.person_id && !u.person_id);
+    available_users = all_users.filter((u) => !u.person_id && !u.person_id);
     loading_users = false;
 }
 
@@ -169,11 +185,11 @@
     </title>
 </svelte:head>
 
-<section class="ae_core__person md:container h-full mx-auto flex flex-col space-y-4 pt-0 pb-8">
+<section
+    class="ae_core__person md:container h-full mx-auto flex flex-col space-y-4 pt-0 pb-8">
     <div
         class="core__person_view_menu {ae_snip.classes__core_menu}"
-        class:border-gray-100={!$ae_loc.person.show_content__person_page_help}
+        class:border-gray-100={!$ae_loc.person.show_content__person_page_help}>
-    >
         <div>
             <a href="/core/people" class={ae_snip.classes__core_menu__button}>
                 <ArrowLeft size="1em" class="mx-1" />
@@ -183,9 +199,8 @@
             {#if $ae_loc.edit_mode}
                 <button
                     type="button"
-                    onclick={() => is_editing = !is_editing}
+                    onclick={() => (is_editing = !is_editing)}
-                    class="btn btn-sm preset-tonal-secondary mx-1"
+                    class="btn btn-sm preset-tonal-secondary mx-1">
-                >
                     {#if is_editing}
                         <Eye size={16} class="mr-2" /> View Mode
                     {:else}
@@ -201,8 +216,7 @@
                         !$ae_loc.person.show_content__person_page_help;
                 }}
                 class={ae_snip.classes__core_menu__button}
-                title="Help and information about the person page"
+                title="Help and information about the person page">
-            >
                 <HelpCircle size="1em" class="mx-1" />
                 {#if $ae_loc.person.show_content__person_page_help}
                     Hide
@@ -222,8 +236,7 @@
             class_li="bg-yellow-100 p-2 rounded-md border border-yellow-200"
             show_edit={false}
             show_edit_btn={true}
-            hide={!$ae_loc.person.show_content__person_page_help}
+            hide={!$ae_loc.person.show_content__person_page_help} />
-        />
 
         <div>
             <button
@@ -234,8 +247,7 @@
                 }}
                 class="btn btn-sm mx-1 preset-tonal-error border border-error-500 hover:preset-filled-error-500"
                 class:hidden={!$ae_loc.person.show_content__person_page_help}
-                title="Help and information about the session search"
+                title="Help and information about the session search">
-            >
                 <HelpCircle size="1em" class="mx-1" />
                 {#if $ae_loc.person.show_content__person_page_help}
                     Hide
@@ -249,58 +261,88 @@
 
     {#if $ae_loc.manager_access}
         <div class="card p-4 preset-tonal-surface space-y-4 mx-4">
-            <header class="flex justify-between items-center border-b border-surface-500/30 pb-2">
+            <header
+                class="flex justify-between items-center border-b border-surface-500/30 pb-2">
                 <div class="flex items-center gap-2 font-bold">
                     <ShieldCheck size={18} />
                     <span>User Account Linking</span>
                 </div>
                 {#if $lq__person_obj?.user_id}
-                    <button class="btn btn-sm preset-tonal-error" onclick={handle_unlink_user}>
+                    <button
+                        class="btn btn-sm preset-tonal-error"
+                        onclick={handle_unlink_user}>
                         <Unlink size={14} class="mr-2" /> Unlink User
                     </button>
                 {:else}
                     <button
                         class="btn btn-sm preset-tonal-primary"
-                        onclick={() => { show_link_ui = !show_link_ui; if(show_link_ui) load_unlinked_users(); }}
+                        onclick={() => {
-                    >
+                            show_link_ui = !show_link_ui;
-                        <Link size={14} class="mr-2" /> {show_link_ui ? 'Cancel Linking' : 'Link to User'}
+                            if (show_link_ui) load_unlinked_users();
+                        }}>
+                        <Link size={14} class="mr-2" />
+                        {show_link_ui ? 'Cancel Linking' : 'Link to User'}
                     </button>
                 {/if}
             </header>
 
             {#if $lq__person_obj?.user_id}
                 <div class="flex items-center gap-4 py-2">
-                    <div class="avatar preset-filled-primary w-12 h-12 flex items-center justify-center rounded-full">
+                    <div
+                        class="avatar preset-filled-primary w-12 h-12 flex items-center justify-center rounded-full">
                         <Users size={24} />
                     </div>
                     <div>
-                        <p class="text-sm opacity-60 uppercase tracking-widest font-bold">Linked User ID</p>
+                        <p
-                        <p class="font-mono text-lg">{$lq__person_obj.user_id}</p>
+                            class="text-sm opacity-60 uppercase tracking-widest font-bold">
-                        <p class="text-xs opacity-60">Username: {$lq__person_obj.username || '--'}</p>
+                            Linked User ID
+                        </p>
+                        <p class="font-mono text-lg">
+                            {$lq__person_obj.user_id}
+                        </p>
+                        <p class="text-xs opacity-60">
+                            Username: {$lq__person_obj.username || '--'}
+                        </p>
                     </div>
                 </div>
             {:else if show_link_ui}
                 <div class="space-y-4 py-2">
-                    <p class="text-sm opacity-80">Select a user account to link to this person. Only accounts without a linked person are shown.</p>
+                    <p class="text-sm opacity-80">
+                        Select a user account to link to this person. Only
+                        accounts without a linked person are shown.
+                    </p>
                     {#if loading_users}
-                        <div class="placeholder animate-pulse h-20 w-full"></div>
+                        <div class="placeholder animate-pulse h-20 w-full">
+                        </div>
                     {:else if available_users.length === 0}
-                        <p class="text-center py-4 italic opacity-60 border border-dashed border-surface-500/30">No unlinked user accounts found.</p>
+                        <p
+                            class="text-center py-4 italic opacity-60 border border-dashed border-surface-500/30">
+                            No unlinked user accounts found.
+                        </p>
                     {:else}
-                        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2">
+                        <div
+                            class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2">
                             {#each available_users as user (user.user_id)}
                                 <button
                                     class="card p-3 preset-tonal-primary hover:preset-filled-primary text-left transition-all flex flex-col gap-1"
-                                    onclick={() => handle_link_user(user.user_id)}
+                                    onclick={() =>
-                                >
+                                        handle_link_user(user.user_id)}>
-                                    <span class="font-bold flex items-center gap-2">
+                                    <span
+                                        class="font-bold flex items-center gap-2">
                                         <User size={14} />
                                         {user.username}
                                     </span>
-                                    <span class="text-xs opacity-70 truncate">{user.email}</span>
+                                    <span class="text-xs opacity-70 truncate"
+                                        >{user.email}</span>
                                     <div class="flex gap-1 mt-1">
-                                        {#if user.super}<span class="badge preset-filled-error text-[10px]">Super</span>{/if}
+                                        {#if user.super}<span
-                                        {#if user.manager}<span class="badge preset-filled-warning text-[10px]">Manager</span>{/if}
+                                                class="badge preset-filled-error text-[10px]"
+                                                >Super</span
+                                            >{/if}
+                                        {#if user.manager}<span
+                                                class="badge preset-filled-warning text-[10px]"
+                                                >Manager</span
+                                            >{/if}
                                     </div>
                                 </button>
                             {/each}
@@ -310,14 +352,17 @@
             {:else}
                 <div class="flex items-center gap-2 py-2 opacity-60">
                     <Users size={20} />
-                    <p class="italic text-sm">This person is not currently linked to a user account.</p>
+                    <p class="italic text-sm">
+                        This person is not currently linked to a user account.
+                    </p>
                 </div>
             {/if}
         </div>
 
         <!-- Activity & Content Section -->
         <div class="card p-4 preset-tonal-surface space-y-4 mx-4">
-            <header class="flex items-center gap-2 font-bold border-b border-surface-500/30 pb-2">
+            <header
+                class="flex items-center gap-2 font-bold border-b border-surface-500/30 pb-2">
                 <History size={18} />
                 <span>Linked Activity & Content</span>
             </header>
@@ -325,19 +370,29 @@
             <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                 <!-- Related Events -->
                 <div class="space-y-3">
-                    <h4 class="h4 flex items-center gap-2 text-sm opacity-70 uppercase tracking-wider font-bold">
+                    <h4
+                        class="h4 flex items-center gap-2 text-sm opacity-70 uppercase tracking-wider font-bold">
                         <Calendar size={16} /> Related Events
                     </h4>
                     {#if loading_activity}
-                        <div class="placeholder animate-pulse h-20 w-full"></div>
+                        <div class="placeholder animate-pulse h-20 w-full">
+                        </div>
                     {:else if related_events.length === 0}
-                        <p class="text-sm italic opacity-50">No related events found.</p>
+                        <p class="text-sm italic opacity-50">
+                            No related events found.
+                        </p>
                     {:else}
                         <div class="space-y-2">
                             {#each related_events as ev (ev.event_id)}
-                                <a href="/events/{ev.event_id}" class="card p-3 preset-tonal-surface flex flex-col gap-1 hover:preset-tonal-primary transition-all">
+                                <a
-                                    <span class="font-bold text-sm">{ev.name}</span>
+                                    href="/events/{ev.event_id}"
-                                    <span class="text-[10px] opacity-60">{new Date(ev.start_datetime).toLocaleDateString()}</span>
+                                    class="card p-3 preset-tonal-surface flex flex-col gap-1 hover:preset-tonal-primary transition-all">
+                                    <span class="font-bold text-sm"
+                                        >{ev.name}</span>
+                                    <span class="text-[10px] opacity-60"
+                                        >{new Date(
+                                            ev.start_datetime
+                                        ).toLocaleDateString()}</span>
                                 </a>
                             {/each}
                         </div>
@@ -346,21 +401,34 @@
 
                 <!-- Related Posts -->
                 <div class="space-y-3">
-                    <h4 class="h4 flex items-center gap-2 text-sm opacity-70 uppercase tracking-wider font-bold">
+                    <h4
+                        class="h4 flex items-center gap-2 text-sm opacity-70 uppercase tracking-wider font-bold">
                         <MessageSquare size={16} /> Related Posts
                     </h4>
                     {#if loading_activity}
-                        <div class="placeholder animate-pulse h-20 w-full"></div>
+                        <div class="placeholder animate-pulse h-20 w-full">
+                        </div>
                     {:else if related_posts.length === 0}
-                        <p class="text-sm italic opacity-50">No related posts found.</p>
+                        <p class="text-sm italic opacity-50">
+                            No related posts found.
+                        </p>
                     {:else}
                         <div class="space-y-2">
                             {#each related_posts as post (post.post_id)}
-                                <a href="/idaa/bb/{post.post_id}" class="card p-3 preset-tonal-surface flex flex-col gap-1 hover:preset-tonal-primary transition-all">
+                                <a
-                                    <span class="font-bold text-sm">{post.title}</span>
+                                    href="/idaa/bb/{post.post_id}"
-                                    <div class="flex justify-between items-center text-[10px] opacity-60">
+                                    class="card p-3 preset-tonal-surface flex flex-col gap-1 hover:preset-tonal-primary transition-all">
-                                        <span>{new Date(post.created_on).toLocaleDateString()}</span>
+                                    <span class="font-bold text-sm"
-                                        <span class="badge preset-tonal-surface scale-75">{post.post_comment_count || 0} comments</span>
+                                        >{post.title}</span>
+                                    <div
+                                        class="flex justify-between items-center text-[10px] opacity-60">
+                                        <span
+                                            >{new Date(
+                                                post.created_on
+                                            ).toLocaleDateString()}</span>
+                                        <span
+                                            class="badge preset-tonal-surface scale-75"
+                                            >{post.post_comment_count || 0} comments</span>
                                     </div>
                                 </a>
                             {/each}
@@ -370,27 +438,42 @@
 
                 <!-- Recent Activity -->
                 <div class="space-y-3">
-                    <h4 class="h4 flex items-center gap-2 text-sm opacity-70 uppercase tracking-wider font-bold">
+                    <h4
+                        class="h4 flex items-center gap-2 text-sm opacity-70 uppercase tracking-wider font-bold">
                         <Activity size={16} /> Recent Activity
                     </h4>
                     {#if loading_activity}
-                        <div class="placeholder animate-pulse h-20 w-full"></div>
+                        <div class="placeholder animate-pulse h-20 w-full">
+                        </div>
                     {:else if related_activity_logs.length === 0}
-                        <p class="text-sm italic opacity-50">No recent activity logs.</p>
+                        <p class="text-sm italic opacity-50">
+                            No recent activity logs.
+                        </p>
                     {:else}
                         <div class="space-y-2">
                             {#each related_activity_logs as log, index (index)}
-                                <div class="card p-3 preset-tonal-surface flex flex-col gap-1">
+                                <div
-                                    <div class="flex justify-between items-start gap-2">
+                                    class="card p-3 preset-tonal-surface flex flex-col gap-1">
-                                        <span class="badge preset-filled-surface text-[9px] uppercase tracking-tighter">{log.action}</span>
+                                    <div
-                                        <span class="text-[9px] opacity-50">{new Date(log.created_on).toLocaleDateString()}</span>
+                                        class="flex justify-between items-start gap-2">
+                                        <span
+                                            class="badge preset-filled-surface text-[9px] uppercase tracking-tighter"
+                                            >{log.action}</span>
+                                        <span class="text-[9px] opacity-50"
+                                            >{new Date(
+                                                log.created_on
+                                            ).toLocaleDateString()}</span>
                                     </div>
                                     {#if log.summary}
-                                        <span class="text-xs opacity-80 line-clamp-1">{log.summary}</span>
+                                        <span
+                                            class="text-xs opacity-80 line-clamp-1"
+                                            >{log.summary}</span>
                                     {/if}
                                 </div>
                             {/each}
-                            <a href="/core/activity_logs?person_id={$slct.person_id}" class="btn btn-sm preset-tonal-surface w-full text-[10px]">
+                            <a
+                                href="/core/activity_logs?person_id={$slct.person_id}"
+                                class="btn btn-sm preset-tonal-surface w-full text-[10px]">
                                 View All Activity
                             </a>
                         </div>
@@ -412,11 +495,9 @@
                 onSave={(updated) => {
                     is_editing = false;
                 }}
-                onCancel={() => is_editing = false}
+                onCancel={() => (is_editing = false)} />
-            />
         </div>
     {:else}
         <Person_view person_id={$slct.person_id} />
     {/if}
-
 </section>

src/routes/core/people/ae_comp__person_form.svelte

@@ -7,7 +7,17 @@
 import { ae_api, ae_loc } from '$lib/stores/ae_stores';
 import { core_func } from '$lib/ae_core/ae_core_functions';
 import type { ae_Person } from '$lib/types/ae_types';
-    import { Briefcase, Building, Link, Mail, Phone, Save, Tag, User, X } from '@lucide/svelte';
+import {
+    Briefcase,
+    Building,
+    Link,
+    Mail,
+    Phone,
+    Save,
+    Tag,
+    User,
+    X
+} from '@lucide/svelte';
 interface Props {
     person?: ae_Person | null;
     onSave?: (person: ae_Person) => void;
@@ -41,8 +51,8 @@
     formData.given_name = person?.given_name ?? '';
     formData.family_name = person?.family_name ?? '';
     formData.middle_name = person?.middle_name ?? '';
-        formData.prefix = (person?.prefix ?? person?.title_names) ?? '';
+    formData.prefix = person?.prefix ?? person?.title_names ?? '';
-        formData.suffix = (person?.suffix ?? person?.designations) ?? '';
+    formData.suffix = person?.suffix ?? person?.designations ?? '';
     formData.nickname = person?.informal_name ?? '';
     formData.professional_title = person?.professional_title ?? '';
     formData.affiliations = person?.affiliations ?? '';
@@ -119,7 +129,8 @@
         if (result) {
             if (onSave) onSave(result);
         } else {
-                error_msg = 'Failed to save person record. The server rejected the request (400).';
+            error_msg =
+                'Failed to save person record. The server rejected the request (400).';
         }
     } catch (err: any) {
         error_msg = err.message || 'An error occurred while saving.';
@@ -129,19 +140,28 @@
 }
 </script>
 
-<form onsubmit={handleSubmit} class="card p-6 space-y-6 shadow-xl preset-tonal-surface">
+<form
-    <header class="flex justify-between items-center border-b border-surface-500/30 pb-4">
+    onsubmit={handleSubmit}
+    class="card p-6 space-y-6 shadow-xl preset-tonal-surface">
+    <header
+        class="flex justify-between items-center border-b border-surface-500/30 pb-4">
         <h3 class="h3 flex items-center gap-2">
             <User size={24} />
             {person ? 'Edit Person' : 'Create New Person'}
         </h3>
         <div class="flex gap-2">
             {#if onCancel}
-                <button type="button" class="btn btn-sm preset-tonal-surface" onclick={onCancel}>
+                <button
+                    type="button"
+                    class="btn btn-sm preset-tonal-surface"
+                    onclick={onCancel}>
                     <X size={16} class="mr-1" /> Cancel
                 </button>
             {/if}
-            <button type="submit" class="btn btn-sm preset-filled-primary font-bold shadow-lg" disabled={is_loading}>
+            <button
+                type="submit"
+                class="btn btn-sm preset-filled-primary font-bold shadow-lg"
+                disabled={is_loading}>
                 {#if is_loading}
                     <span class="animate-spin mr-2">⏳</span>
                 {:else}
@@ -163,140 +183,259 @@
     <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
         <!-- Name Section -->
         <fieldset class="space-y-4">
-            <legend class="text-sm font-bold uppercase tracking-widest opacity-60">Identity</legend>
+            <legend
+                class="text-sm font-bold uppercase tracking-widest opacity-60"
+                >Identity</legend>
 
             <div class="grid grid-cols-4 gap-2">
                 <div class="space-y-1 col-span-1">
-                    <label class="label text-xs font-bold opacity-75" for="person-prefix">Prefix</label>
+                    <label
-                    <input class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2" id="person-prefix" type="text" bind:value={formData.prefix} placeholder="Mr." />
+                        class="label text-xs font-bold opacity-75"
+                        for="person-prefix">Prefix</label>
+                    <input
+                        class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2"
+                        id="person-prefix"
+                        type="text"
+                        bind:value={formData.prefix}
+                        placeholder="Mr." />
                 </div>
                 <div class="space-y-1 col-span-3">
-                    <label class="label text-xs font-bold opacity-75" for="person-given-name">Given Name</label>
+                    <label
-                    <input class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2" id="person-given-name" type="text" bind:value={formData.given_name} required placeholder="Jane" />
+                        class="label text-xs font-bold opacity-75"
+                        for="person-given-name">Given Name</label>
+                    <input
+                        class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2"
+                        id="person-given-name"
+                        type="text"
+                        bind:value={formData.given_name}
+                        required
+                        placeholder="Jane" />
                 </div>
             </div>
 
             <div class="grid grid-cols-4 gap-2">
                 <div class="space-y-1 col-span-3">
-                    <label class="label text-xs font-bold opacity-75" for="person-family-name">Family Name</label>
+                    <label
-                    <input class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2" id="person-family-name" type="text" bind:value={formData.family_name} required placeholder="Doe" />
+                        class="label text-xs font-bold opacity-75"
+                        for="person-family-name">Family Name</label>
+                    <input
+                        class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2"
+                        id="person-family-name"
+                        type="text"
+                        bind:value={formData.family_name}
+                        required
+                        placeholder="Doe" />
                 </div>
                 <div class="space-y-1 col-span-1">
-                    <label class="label text-xs font-bold opacity-75" for="person-suffix">Suffix</label>
+                    <label
-                    <input class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2" id="person-suffix" type="text" bind:value={formData.suffix} placeholder="PhD" />
+                        class="label text-xs font-bold opacity-75"
+                        for="person-suffix">Suffix</label>
+                    <input
+                        class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2"
+                        id="person-suffix"
+                        type="text"
+                        bind:value={formData.suffix}
+                        placeholder="PhD" />
                 </div>
             </div>
 
             <div class="space-y-1">
-                <label class="label text-xs font-bold opacity-75" for="person-middle-name">Middle Name / Informal Name (Nickname)</label>
+                <label
+                    class="label text-xs font-bold opacity-75"
+                    for="person-middle-name"
+                    >Middle Name / Informal Name (Nickname)</label>
                 <div class="grid grid-cols-2 gap-2">
-                    <input class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2" id="person-middle-name" type="text" bind:value={formData.middle_name} placeholder="Middle" />
+                    <input
-                    <input class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2" type="text" bind:value={formData.nickname} placeholder="Nickname" />
+                        class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2"
+                        id="person-middle-name"
+                        type="text"
+                        bind:value={formData.middle_name}
+                        placeholder="Middle" />
+                    <input
+                        class="input preset-filled-surface rounded-lg placeholder-surface-400 p-2"
+                        type="text"
+                        bind:value={formData.nickname}
+                        placeholder="Nickname" />
                 </div>
             </div>
         </fieldset>
 
         <!-- Contact Section -->
         <fieldset class="space-y-4">
-            <legend class="text-sm font-bold uppercase tracking-widest opacity-60">Contact Information</legend>
+            <legend
+                class="text-sm font-bold uppercase tracking-widest opacity-60"
+                >Contact Information</legend>
 
             <div class="space-y-1">
-                <label class="label text-xs font-bold opacity-75" for="person-primary-email">Primary Email</label>
+                <label
-                <div class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
+                    class="label text-xs font-bold opacity-75"
+                    for="person-primary-email">Primary Email</label>
+                <div
+                    class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
                     <div class="input-group-shim"><Mail size={16} /></div>
-                    <input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" id="person-primary-email" type="email" bind:value={formData.primary_email} placeholder="jane.doe@example.com" />
+                    <input
+                        class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2"
+                        id="person-primary-email"
+                        type="email"
+                        bind:value={formData.primary_email}
+                        placeholder="jane.doe@example.com" />
                 </div>
             </div>
 
             <div class="space-y-1">
-                <label class="label text-xs font-bold opacity-75" for="person-phone">Phone Number</label>
+                <label
-                <div class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
+                    class="label text-xs font-bold opacity-75"
+                    for="person-phone">Phone Number</label>
+                <div
+                    class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
                     <div class="input-group-shim"><Phone size={16} /></div>
-                    <input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" id="person-phone" type="tel" bind:value={formData.phone} placeholder="+1 (555) 000-0000" />
+                    <input
+                        class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2"
+                        id="person-phone"
+                        type="tel"
+                        bind:value={formData.phone}
+                        placeholder="+1 (555) 000-0000" />
                 </div>
-                <small class="opacity-60 text-xs px-1">(Saved only locally until Contact created)</small>
+                <small class="opacity-60 text-xs px-1"
+                    >(Saved only locally until Contact created)</small>
             </div>
 
             <div class="space-y-1">
-                <label class="label text-xs font-bold opacity-75" for="person-tagline">Tagline</label>
+                <label
-                <div class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
+                    class="label text-xs font-bold opacity-75"
+                    for="person-tagline">Tagline</label>
+                <div
+                    class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
                     <div class="input-group-shim"><Tag size={16} /></div>
-                    <input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" id="person-tagline" type="text" bind:value={formData.tagline} placeholder="Software Architect & Visionary" />
+                    <input
+                        class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2"
+                        id="person-tagline"
+                        type="text"
+                        bind:value={formData.tagline}
+                        placeholder="Software Architect & Visionary" />
                 </div>
             </div>
         </fieldset>
 
         <!-- Professional Section -->
         <fieldset class="space-y-4">
-            <legend class="text-sm font-bold uppercase tracking-widest opacity-60">Professional</legend>
+            <legend
+                class="text-sm font-bold uppercase tracking-widest opacity-60"
+                >Professional</legend>
 
             <div class="space-y-1">
-                <label class="label text-xs font-bold opacity-75" for="person-professional-title">Professional Title</label>
+                <label
-                <div class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
+                    class="label text-xs font-bold opacity-75"
+                    for="person-professional-title">Professional Title</label>
+                <div
+                    class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
                     <div class="input-group-shim"><Briefcase size={16} /></div>
-                    <input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" id="person-professional-title" type="text" bind:value={formData.professional_title} placeholder="Senior Engineer" />
+                    <input
+                        class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2"
+                        id="person-professional-title"
+                        type="text"
+                        bind:value={formData.professional_title}
+                        placeholder="Senior Engineer" />
                 </div>
             </div>
 
             <div class="space-y-1">
-                <label class="label text-xs font-bold opacity-75" for="person-affiliations">Affiliations</label>
+                <label
-                <div class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
+                    class="label text-xs font-bold opacity-75"
+                    for="person-affiliations">Affiliations</label>
+                <div
+                    class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
                     <div class="input-group-shim"><Building size={16} /></div>
-                    <input class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2" id="person-affiliations" type="text" bind:value={formData.affiliations} placeholder="One Sky IT, LLC" />
+                    <input
+                        class="bg-transparent border-0 ring-0 focus:ring-0 placeholder-surface-400 p-2"
+                        id="person-affiliations"
+                        type="text"
+                        bind:value={formData.affiliations}
+                        placeholder="One Sky IT, LLC" />
                 </div>
             </div>
         </fieldset>
 
         <!-- Metadata Section -->
         <fieldset class="space-y-4">
-            <legend class="text-sm font-bold uppercase tracking-widest opacity-60">Status & Flags</legend>
+            <legend
+                class="text-sm font-bold uppercase tracking-widest opacity-60"
+                >Status & Flags</legend>
 
             <div class="flex flex-wrap gap-4 pt-2">
                 <label class="flex items-center space-x-2 cursor-pointer">
-                    <input class="checkbox" type="checkbox" bind:checked={formData.enable} />
+                    <input
+                        class="checkbox"
+                        type="checkbox"
+                        bind:checked={formData.enable} />
                     <span class="text-sm font-medium">Enabled</span>
                 </label>
                 <label class="flex items-center space-x-2 cursor-pointer">
-                    <input class="checkbox" type="checkbox" bind:checked={formData.hide} />
+                    <input
+                        class="checkbox"
+                        type="checkbox"
+                        bind:checked={formData.hide} />
                     <span class="text-sm font-medium">Hidden</span>
                 </label>
                 <label class="flex items-center space-x-2 cursor-pointer">
-                    <input class="checkbox" type="checkbox" bind:checked={formData.priority} />
+                    <input
+                        class="checkbox"
+                        type="checkbox"
+                        bind:checked={formData.priority} />
                     <span class="text-sm font-medium">Priority</span>
                 </label>
             </div>
 
             <div class="space-y-1">
-                <label class="label text-xs font-bold opacity-75" for="person-notes">Notes (Internal)</label>
+                <label
-                <textarea class="textarea preset-filled-surface rounded-lg placeholder-surface-400 p-2" id="person-notes" rows="3" bind:value={formData.notes} placeholder="Additional details..."></textarea>
+                    class="label text-xs font-bold opacity-75"
+                    for="person-notes">Notes (Internal)</label>
+                <textarea
+                    class="textarea preset-filled-surface rounded-lg placeholder-surface-400 p-2"
+                    id="person-notes"
+                    rows="3"
+                    bind:value={formData.notes}
+                    placeholder="Additional details..."></textarea>
             </div>
         </fieldset>
 
         {#if $ae_loc.manager_access}
             <!-- Admin/Linking Section -->
-            <fieldset class="space-y-4 md:col-span-2 border-t border-surface-500/30 pt-4">
+            <fieldset
-                <legend class="text-sm font-bold uppercase tracking-widest opacity-60">System Linking (Managers Only)</legend>
+                class="space-y-4 md:col-span-2 border-t border-surface-500/30 pt-4">
+                <legend
+                    class="text-sm font-bold uppercase tracking-widest opacity-60"
+                    >System Linking (Managers Only)</legend>
 
                 <div class="space-y-1 max-w-md">
-                    <label class="label text-xs font-bold opacity-75" for="person-user-id-random">Linked User ID (Random)</label>
+                    <label
-                    <div class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
+                        class="label text-xs font-bold opacity-75"
+                        for="person-user-id-random"
+                        >Linked User ID (Random)</label>
+                    <div
+                        class="input-group input-group-divider grid-cols-[auto_1fr] preset-filled-surface rounded-lg overflow-hidden">
                         <div class="input-group-shim"><Link size={16} /></div>
                         <input
                             class="bg-transparent border-0 ring-0 focus:ring-0 font-mono placeholder-surface-400 p-2"
                             id="person-user-id-random"
                             type="text"
                             bind:value={formData.user_id_random}
-                            placeholder="e.g. AB12CD34"
+                            placeholder="e.g. AB12CD34" />
-                        />
                     </div>
-                    <small class="opacity-60 text-[10px] uppercase px-1 tracking-tighter">Enter the unique random ID of the user account to link to this person.</small>
+                    <small
+                        class="opacity-60 text-[10px] uppercase px-1 tracking-tighter"
+                        >Enter the unique random ID of the user account to link
+                        to this person.</small>
                 </div>
             </fieldset>
         {/if}
     </div>
 
     <footer class="flex justify-end gap-2 border-t border-surface-500/30 pt-4">
-        <button type="submit" class="btn preset-filled-primary font-bold shadow-lg w-full md:w-auto" disabled={is_loading}>
+        <button
+            type="submit"
+            class="btn preset-filled-primary font-bold shadow-lg w-full md:w-auto"
+            disabled={is_loading}>
             {#if is_loading}
                 <span class="animate-spin mr-2">⏳</span>
             {/if}

src/routes/core/people/ae_comp__person_search.svelte

@@ -30,10 +30,15 @@
 
     // Filter locally for now if needed, or update the API wrapper to support search_query
     const filtered = qry_str
-            ? results.filter(p =>
+        ? results.filter(
+              (p) =>
                   p.full_name?.toLowerCase().includes(qry_str.toLowerCase()) ||
-                p.primary_email?.toLowerCase().includes(qry_str.toLowerCase()) ||
+                  p.primary_email
-                p.person_id_random?.toLowerCase().includes(qry_str.toLowerCase())
+                      ?.toLowerCase()
+                      .includes(qry_str.toLowerCase()) ||
+                  p.person_id_random
+                      ?.toLowerCase()
+                      .includes(qry_str.toLowerCase())
           )
         : results;
 
@@ -42,12 +47,17 @@
 }
 </script>
 
-<div class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10 space-y-4">
+<div
+    class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10 space-y-4">
     <div class="flex flex-wrap gap-6 items-end">
         <div class="flex-1 min-w-[280px] space-y-1">
-            <span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Search People</span>
+            <span
-            <div class="flex bg-surface-200-700-token rounded-lg overflow-hidden border border-surface-500/20 shadow-inner group focus-within:ring-2 focus-within:ring-primary-500/50 transition-all">
+                class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1"
-                <div class="flex items-center justify-center px-4 bg-surface-300-600-token border-r border-surface-500/20">
+                >Search People</span>
+            <div
+                class="flex bg-surface-200-700-token rounded-lg overflow-hidden border border-surface-500/20 shadow-inner group focus-within:ring-2 focus-within:ring-primary-500/50 transition-all">
+                <div
+                    class="flex items-center justify-center px-4 bg-surface-300-600-token border-r border-surface-500/20">
                     <Search size={18} class="opacity-50" />
                 </div>
                 <input
@@ -55,9 +65,11 @@
                     type="search"
                     bind:value={qry_str}
                     placeholder="Search by name, email, or ID..."
-                    onkeydown={(e) => e.key === 'Enter' && handle_search()}
+                    onkeydown={(e) => e.key === 'Enter' && handle_search()} />
-                />
+                <button
-                <button class="preset-filled-primary font-bold px-10 py-3 hover:brightness-110 transition-all border-l border-surface-500/20 flex items-center justify-center min-w-[100px]" onclick={handle_search} disabled={loading}>
+                    class="preset-filled-primary font-bold px-10 py-3 hover:brightness-110 transition-all border-l border-surface-500/20 flex items-center justify-center min-w-[100px]"
+                    onclick={handle_search}
+                    disabled={loading}>
                     {#if loading}
                         <span class="animate-spin text-xl">⏳</span>
                     {:else}
@@ -69,8 +81,13 @@
 
         <div class="grid grid-cols-2 gap-4">
             <div class="space-y-1">
-                <span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Account Status</span>
+                <span
-                <select class="select preset-filled-surface rounded-lg text-sm border border-surface-500/20 p-2" bind:value={qry_enabled} onchange={handle_search}>
+                    class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1"
+                    >Account Status</span>
+                <select
+                    class="select preset-filled-surface rounded-lg text-sm border border-surface-500/20 p-2"
+                    bind:value={qry_enabled}
+                    onchange={handle_search}>
                     <option value="all">All Records</option>
                     <option value="enabled">Enabled Only</option>
                     <option value="not_enabled">Disabled Only</option>
@@ -78,8 +95,13 @@
             </div>
 
             <div class="space-y-1">
-                <span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Visibility</span>
+                <span
-                <select class="select preset-filled-surface rounded-lg text-sm border border-surface-500/20 p-2" bind:value={qry_hidden} onchange={handle_search}>
+                    class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1"
+                    >Visibility</span>
+                <select
+                    class="select preset-filled-surface rounded-lg text-sm border border-surface-500/20 p-2"
+                    bind:value={qry_hidden}
+                    onchange={handle_search}>
                     <option value="all">All Visible</option>
                     <option value="not_hidden">Publicly Visible</option>
                     <option value="hidden">System Hidden</option>

src/routes/core/person_view.svelte

@@ -27,7 +27,27 @@
     slct_trigger
 } from '$lib/stores/ae_stores';
 import { db_core } from '$lib/ae_core/db_core';
-    import { Archive, BookOpen, Building2, Check, Eye, EyeOff, Fingerprint, IdCard, Key, LoaderCircle, Mail, Save, Star, Tag, ToggleLeft, ToggleRight, TriangleAlert, User, UserRound } from '@lucide/svelte';
+import {
+    Archive,
+    BookOpen,
+    Building2,
+    Check,
+    Eye,
+    EyeOff,
+    Fingerprint,
+    IdCard,
+    Key,
+    LoaderCircle,
+    Mail,
+    Save,
+    Star,
+    Tag,
+    ToggleLeft,
+    ToggleRight,
+    TriangleAlert,
+    User,
+    UserRound
+} from '@lucide/svelte';
 // import { db_events } from "$lib/db_events";
 // import { events_loc, events_sess, events_slct, events_trigger } from '$lib/stores/ae_events_stores';
 // import { events_func } from '$lib/ae_events/ae_events_functions';
@@ -36,7 +56,6 @@
 let ae_promises: key_val = $state({}); // Promise<any>;
 let ae_tmp: key_val = $state({});
 
-
 $effect(() => {
     if (log_lvl) {
         console.log(`person_id:`, person_id);
@@ -53,7 +72,11 @@
 ae_tmp.value__data_json = null;
 $effect(() => {
     if ($lq__person_obj?.data_json && ae_tmp.value__data_json === null) {
-            ae_tmp.value__data_json = JSON.stringify($lq__person_obj.data_json, null, 4);
+        ae_tmp.value__data_json = JSON.stringify(
+            $lq__person_obj.data_json,
+            null,
+            4
+        );
         // ae_tmp.value__data_json = JSON.parse(JSON.stringify($lq__person_obj.data_json));
         // JSON.stringify(jsObj, null, 4);
     }
@@ -62,7 +85,10 @@
 ae_tmp.valid__data_json = null;
 $effect(() => {
     if (ae_tmp.value__data_json && ae_tmp.value__data_json.length) {
-            console.log(`ae_tmp.value__data_json.length:`, ae_tmp.value__data_json.length);
+        console.log(
+            `ae_tmp.value__data_json.length:`,
+            ae_tmp.value__data_json.length
+        );
 
         try {
             JSON.parse(ae_tmp.value__data_json);
@@ -100,8 +126,12 @@
                 field_type={'text'}
                 current_value={$lq__person_obj.external_id}
                 allow_null={true}
-                on_success={() => core_func.load_ae_obj_id__person({ api_cfg: $ae_api, person_id: $lq__person_obj?.person_id_random, log_lvl: 1 })}
+                on_success={() =>
-            >
+                    core_func.load_ae_obj_id__person({
+                        api_cfg: $ae_api,
+                        person_id: $lq__person_obj?.person_id_random,
+                        log_lvl: 1
+                    })}>
                 <IdCard size="1em" />
                 External ID:
                 <span class="font-bold">
@@ -117,12 +147,17 @@
                 field_type={'text'}
                 current_value={$lq__person_obj.external_sys_id}
                 allow_null={true}
-                on_success={() => core_func.load_ae_obj_id__person({ api_cfg: $ae_api, person_id: $lq__person_obj?.person_id_random, log_lvl: 1 })}
+                on_success={() =>
-            >
+                    core_func.load_ae_obj_id__person({
+                        api_cfg: $ae_api,
+                        person_id: $lq__person_obj?.person_id_random,
+                        log_lvl: 1
+                    })}>
                 <Fingerprint size="1em" />
                 External System ID:
                 <span class="font-bold">
-                    {@html $lq__person_obj.external_sys_id ?? ae_snip.html__not_set}
+                    {@html $lq__person_obj.external_sys_id ??
+                        ae_snip.html__not_set}
                 </span>
             </Element_ae_obj_field_editor>
         </li>
@@ -136,8 +171,12 @@
                 field_name={'given_name'}
                 field_type={'text'}
                 current_value={$lq__person_obj.given_name}
-                on_success={() => core_func.load_ae_obj_id__person({ api_cfg: $ae_api, person_id: $lq__person_obj?.person_id_random, log_lvl: 1 })}
+                on_success={() =>
-            >
+                    core_func.load_ae_obj_id__person({
+                        api_cfg: $ae_api,
+                        person_id: $lq__person_obj?.person_id_random,
+                        log_lvl: 1
+                    })}>
                 <span class="font-bold">
                     {@html $lq__person_obj.given_name ?? ae_snip.html__not_set}
                 </span>
@@ -148,8 +187,12 @@
                 field_name={'family_name'}
                 field_type={'text'}
                 current_value={$lq__person_obj.family_name}
-                on_success={() => core_func.load_ae_obj_id__person({ api_cfg: $ae_api, person_id: $lq__person_obj?.person_id_random, log_lvl: 1 })}
+                on_success={() =>
-            >
+                    core_func.load_ae_obj_id__person({
+                        api_cfg: $ae_api,
+                        person_id: $lq__person_obj?.person_id_random,
+                        log_lvl: 1
+                    })}>
                 <span class="font-bold">
                     {@html $lq__person_obj.family_name ?? ae_snip.html__not_set}
                 </span>
@@ -163,17 +206,21 @@
                 field_type={'text'}
                 current_value={$lq__person_obj.primary_email}
                 allow_null={true}
-                on_success={() => core_func.load_ae_obj_id__person({ api_cfg: $ae_api, person_id: $lq__person_obj?.person_id_random, log_lvl: 1 })}
+                on_success={() =>
-            >
+                    core_func.load_ae_obj_id__person({
+                        api_cfg: $ae_api,
+                        person_id: $lq__person_obj?.person_id_random,
+                        log_lvl: 1
+                    })}>
                 <Mail size="1em" />
                 <span class="font-bold">
                     {#if $lq__person_obj.primary_email}
                         <a
                             href="mailto:{$lq__person_obj?.primary_email}"
                             class="text-blue-500 underline hover:text-blue-800"
-                            title="Person's primary email address"
+                            title="Person's primary email address">
-                        >
+                            {@html $lq__person_obj.primary_email ??
-                            {@html $lq__person_obj.primary_email ?? 'email' + ae_snip.html__not_set}
+                                'email' + ae_snip.html__not_set}
                         </a>
                     {:else}
                         email {@html ae_snip.html__not_set}
@@ -189,11 +236,16 @@
                 field_type={'text'}
                 current_value={$lq__person_obj.affiliations}
                 allow_null={true}
-                on_success={() => core_func.load_ae_obj_id__person({ api_cfg: $ae_api, person_id: $lq__person_obj?.person_id_random, log_lvl: 1 })}
+                on_success={() =>
-            >
+                    core_func.load_ae_obj_id__person({
+                        api_cfg: $ae_api,
+                        person_id: $lq__person_obj?.person_id_random,
+                        log_lvl: 1
+                    })}>
                 <Building2 size="1em" />
                 <span class="font-bold">
-                    {@html $lq__person_obj.affiliations ?? 'affiliations' + ae_snip.html__not_set}
+                    {@html $lq__person_obj.affiliations ??
+                        'affiliations' + ae_snip.html__not_set}
                 </span>
             </Element_ae_obj_field_editor>
         </li>
@@ -205,8 +257,12 @@
                 field_type={'text'}
                 current_value={$lq__person_obj.professional_title}
                 allow_null={true}
-                on_success={() => core_func.load_ae_obj_id__person({ api_cfg: $ae_api, person_id: $lq__person_obj?.person_id_random, log_lvl: 1 })}
+                on_success={() =>
-            >
+                    core_func.load_ae_obj_id__person({
+                        api_cfg: $ae_api,
+                        person_id: $lq__person_obj?.person_id_random,
+                        log_lvl: 1
+                    })}>
                 <Tag size="1em" />
                 <span class="font-bold">
                     {@html $lq__person_obj.professional_title &&
@@ -224,12 +280,17 @@
                 field_type={'text'}
                 current_value={$lq__person_obj.passcode}
                 allow_null={true}
-                on_success={() => core_func.load_ae_obj_id__person({ api_cfg: $ae_api, person_id: $lq__person_obj?.person_id_random, log_lvl: 1 })}
+                on_success={() =>
-            >
+                    core_func.load_ae_obj_id__person({
+                        api_cfg: $ae_api,
+                        person_id: $lq__person_obj?.person_id_random,
+                        log_lvl: 1
+                    })}>
                 <UserRound size="1em" />
                 Passcode:
                 <span class="font-bold">
-                    {@html $lq__person_obj.passcode ?? 'passcode' + ae_snip.html__not_set}
+                    {@html $lq__person_obj.passcode ??
+                        'passcode' + ae_snip.html__not_set}
                 </span>
             </Element_ae_obj_field_editor>
         </li>
@@ -237,16 +298,25 @@
         <li hidden={!$ae_loc.trusted_access}>
             <!-- Show/Hide -->
             {#if $ae_loc.trusted_access}
-                <span class="text-sm">{$lq__person_obj?.hide ? 'Hidden' : 'Not Hidden'}</span>
+                <span class="text-sm"
+                    >{$lq__person_obj?.hide ? 'Hidden' : 'Not Hidden'}</span>
             {/if}
             <button
                 type="button"
                 onclick={async () => {
-                    await api.update_ae_obj({ api_cfg: $ae_api, obj_type: 'person', obj_id: $lq__person_obj?.person_id_random, fields: { hide: !$lq__person_obj?.hide } });
+                    await api.update_ae_obj({
-                    core_func.load_ae_obj_id__person({ api_cfg: $ae_api, person_id: $lq__person_obj?.person_id_random, log_lvl: 1 });
+                        api_cfg: $ae_api,
+                        obj_type: 'person',
+                        obj_id: $lq__person_obj?.person_id_random,
+                        fields: { hide: !$lq__person_obj?.hide }
+                    });
+                    core_func.load_ae_obj_id__person({
+                        api_cfg: $ae_api,
+                        person_id: $lq__person_obj?.person_id_random,
+                        log_lvl: 1
+                    });
                 }}
-                class="btn btn-sm preset-tonal-warning"
+                class="btn btn-sm preset-tonal-warning">
-            >
                 {#if $ae_loc.trusted_access}
                     {#if $lq__person_obj?.hide}
                         <Eye size="1em" class="m-1" /> Unhide?
@@ -261,43 +331,61 @@
 
             <!-- Enable/Disable -->
             {#if $ae_loc.trusted_access}
-                <span class="text-sm">{$lq__person_obj?.enable ? 'Enabled' : 'Disabled'}</span>
+                <span class="text-sm"
+                    >{$lq__person_obj?.enable ? 'Enabled' : 'Disabled'}</span>
             {/if}
             <button
                 type="button"
                 onclick={async () => {
-                    await api.update_ae_obj({ api_cfg: $ae_api, obj_type: 'person', obj_id: $lq__person_obj?.person_id_random, fields: { enable: !$lq__person_obj?.enable } });
+                    await api.update_ae_obj({
-                    core_func.load_ae_obj_id__person({ api_cfg: $ae_api, person_id: $lq__person_obj?.person_id_random, log_lvl: 1 });
+                        api_cfg: $ae_api,
+                        obj_type: 'person',
+                        obj_id: $lq__person_obj?.person_id_random,
+                        fields: { enable: !$lq__person_obj?.enable }
+                    });
+                    core_func.load_ae_obj_id__person({
+                        api_cfg: $ae_api,
+                        person_id: $lq__person_obj?.person_id_random,
+                        log_lvl: 1
+                    });
                 }}
-                class="btn btn-sm preset-tonal-warning"
+                class="btn btn-sm preset-tonal-warning">
-            >
                 {#if $ae_loc.trusted_access}
                     {#if $lq__person_obj?.enable}
                         <ToggleRight size="1em" class="m-1" /> Disable?
                     {:else}
                         <ToggleLeft size="1em" class="m-1" /> Enable?
                     {/if}
-                {:else}
+                {:else if $lq__person_obj?.enable}
-                    {#if $lq__person_obj?.enable}
                     <ToggleRight size="1em" class="m-1" /> Disable
                 {:else}
                     <ToggleLeft size="1em" class="m-1" /> Enable
                 {/if}
-                {/if}
             </button>
 
             <!-- Priority/Not -->
             {#if $ae_loc.trusted_access}
-                <span class="text-sm">{$lq__person_obj?.priority ? 'Priority' : 'Not Priority'}</span>
+                <span class="text-sm"
+                    >{$lq__person_obj?.priority
+                        ? 'Priority'
+                        : 'Not Priority'}</span>
             {/if}
             <button
                 type="button"
                 onclick={async () => {
-                    await api.update_ae_obj({ api_cfg: $ae_api, obj_type: 'person', obj_id: $lq__person_obj?.person_id_random, fields: { priority: !$lq__person_obj?.priority } });
+                    await api.update_ae_obj({
-                    core_func.load_ae_obj_id__person({ api_cfg: $ae_api, person_id: $lq__person_obj?.person_id_random, log_lvl: 1 });
+                        api_cfg: $ae_api,
+                        obj_type: 'person',
+                        obj_id: $lq__person_obj?.person_id_random,
+                        fields: { priority: !$lq__person_obj?.priority }
+                    });
+                    core_func.load_ae_obj_id__person({
+                        api_cfg: $ae_api,
+                        person_id: $lq__person_obj?.person_id_random,
+                        log_lvl: 1
+                    });
                 }}
-                class="btn btn-sm preset-tonal-warning"
+                class="btn btn-sm preset-tonal-warning">
-            >
                 <Star size="1em" class="m-1" />
                 {#if $ae_loc.trusted_access}
                     {$lq__person_obj?.priority ? 'Not Priority?' : 'Priority?'}
@@ -308,21 +396,38 @@
 
             <!-- Allow Auth Key/Not -->
             {#if $ae_loc.trusted_access}
-                <span class="text-sm">{$lq__person_obj?.allow_auth_key ? 'Allow Auth Key' : 'Not Allow Auth Key'}</span>
+                <span class="text-sm"
+                    >{$lq__person_obj?.allow_auth_key
+                        ? 'Allow Auth Key'
+                        : 'Not Allow Auth Key'}</span>
             {/if}
             <button
                 type="button"
                 onclick={async () => {
-                    await api.update_ae_obj({ api_cfg: $ae_api, obj_type: 'person', obj_id: $lq__person_obj?.person_id_random, fields: { allow_auth_key: !$lq__person_obj?.allow_auth_key } });
+                    await api.update_ae_obj({
-                    core_func.load_ae_obj_id__person({ api_cfg: $ae_api, person_id: $lq__person_obj?.person_id_random, log_lvl: 1 });
+                        api_cfg: $ae_api,
+                        obj_type: 'person',
+                        obj_id: $lq__person_obj?.person_id_random,
+                        fields: {
+                            allow_auth_key: !$lq__person_obj?.allow_auth_key
+                        }
+                    });
+                    core_func.load_ae_obj_id__person({
+                        api_cfg: $ae_api,
+                        person_id: $lq__person_obj?.person_id_random,
+                        log_lvl: 1
+                    });
                 }}
-                class="btn btn-sm preset-tonal-warning"
+                class="btn btn-sm preset-tonal-warning">
-            >
                 <Key size="1em" class="m-1" />
                 {#if $ae_loc.trusted_access}
-                    {$lq__person_obj?.allow_auth_key ? 'Not Allow Auth Key?' : 'Allow Auth Key?'}
+                    {$lq__person_obj?.allow_auth_key
+                        ? 'Not Allow Auth Key?'
+                        : 'Allow Auth Key?'}
                 {:else}
-                    {$lq__person_obj?.allow_auth_key ? 'Not Allow Auth Key' : 'Allow Auth Key'}
+                    {$lq__person_obj?.allow_auth_key
+                        ? 'Not Allow Auth Key'
+                        : 'Allow Auth Key'}
                 {/if}
             </button>
         </li>
@@ -332,7 +437,9 @@
                 <label for="person__data_json" class="label">
                     <BookOpen size="1em" />
                     Person JSON Data
-                    <span class="text-sm text-gray-500"> (no character limit) </span>
+                    <span class="text-sm text-gray-500">
+                        (no character limit)
+                    </span>
                 </label>
 
                 <textarea
@@ -348,8 +455,7 @@
                     rows="8"
                     cols="70"
                     bind:value={ae_tmp.value__data_json}
-                    placeholder="Enter data_json here"
+                    placeholder="Enter data_json here"></textarea>
-                ></textarea>
                 <!-- {/if} -->
             </div>
 
@@ -393,8 +499,7 @@
                                 // console.log(update_result);
                                 // return update_result;
                             });
-                    }}
+                    }}>
-                >
                     {#await ae_promises.update__person_obj}
                         <LoaderCircle size="1em" class="animate-spin mx-1" />
                     {:then}

src/routes/core/sites/+page.svelte

@@ -1,9 +1,22 @@
 <script lang="ts">
 import { onMount } from 'svelte';
-    import { load_ae_obj_li__site, create_ae_obj__site } from '$lib/ae_core/ae_core__site';
+import {
+    load_ae_obj_li__site,
+    create_ae_obj__site
+} from '$lib/ae_core/ae_core__site';
 import { ae_api, ae_loc, slct } from '$lib/stores/ae_stores';
 import { goto } from '$app/navigation';
-    import { Calendar, ExternalLink, Globe, ListFilter, Plus, RefreshCcw, Search, ShieldCheck, X } from '@lucide/svelte';
+import {
+    Calendar,
+    ExternalLink,
+    Globe,
+    ListFilter,
+    Plus,
+    RefreshCcw,
+    Search,
+    ShieldCheck,
+    X
+} from '@lucide/svelte';
 let site_li: any[] = $state([]);
 let loading = $state(true);
 let qry_enabled = $state('all');
@@ -12,7 +25,8 @@
 
 let filtered_li = $derived(
     qry_str
-            ? site_li.filter(s =>
+        ? site_li.filter(
+              (s) =>
                   s.name?.toLowerCase().includes(qry_str.toLowerCase()) ||
                   s.code?.toLowerCase().includes(qry_str.toLowerCase())
           )
@@ -60,40 +74,54 @@
 </script>
 
 <div class="container mx-auto p-4 space-y-6">
-    <header class="flex flex-wrap justify-between items-center bg-surface-50-900-token p-4 rounded-xl shadow-lg border border-surface-500/10 gap-4">
+    <header
+        class="flex flex-wrap justify-between items-center bg-surface-50-900-token p-4 rounded-xl shadow-lg border border-surface-500/10 gap-4">
         <div class="flex items-center gap-3">
             <div class="p-2 bg-primary-500/10 rounded-lg">
                 <Globe size={24} class="text-primary-500" />
             </div>
             <div>
                 <h1 class="h2 font-black tracking-tight">Site Management</h1>
-                <p class="text-xs font-bold opacity-50 uppercase tracking-widest">Digital Properties & Domains</p>
+                <p
+                    class="text-xs font-bold opacity-50 uppercase tracking-widest">
+                    Digital Properties & Domains
+                </p>
             </div>
         </div>
-        <button class="btn btn-sm preset-filled-primary font-bold shadow-lg" onclick={handle_add_site}>
+        <button
+            class="btn btn-sm preset-filled-primary font-bold shadow-lg"
+            onclick={handle_add_site}>
             <Plus size={16} class="mr-2" /> Add Site
         </button>
     </header>
 
-    <div class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10 space-y-4">
+    <div
+        class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10 space-y-4">
         <div class="flex flex-wrap gap-6 items-end">
             <div class="flex-1 min-w-[280px] space-y-1">
-                <span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Search Sites</span>
+                <span
-                <div class="flex bg-surface-200-700-token rounded-lg overflow-hidden border border-surface-500/20 shadow-inner group focus-within:ring-2 focus-within:ring-primary-500/50 transition-all">
+                    class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1"
-                    <div class="flex items-center justify-center px-4 bg-surface-300-600-token border-r border-surface-500/20">
+                    >Search Sites</span>
+                <div
+                    class="flex bg-surface-200-700-token rounded-lg overflow-hidden border border-surface-500/20 shadow-inner group focus-within:ring-2 focus-within:ring-primary-500/50 transition-all">
+                    <div
+                        class="flex items-center justify-center px-4 bg-surface-300-600-token border-r border-surface-500/20">
                         <Search size={18} class="opacity-50" />
                     </div>
                     <input
                         class="bg-transparent border-0 ring-0 focus:ring-0 p-3 grow placeholder:opacity-50"
                         type="search"
                         bind:value={qry_str}
-                        placeholder="Search by name or code..."
+                        placeholder="Search by name or code..." />
-                    />
+                    <button
-                    <button class="preset-filled-primary font-bold px-10 py-3 hover:brightness-110 transition-all border-l border-surface-500/20 flex items-center justify-center min-w-[100px]" onclick={load_sites} disabled={loading}>
+                        class="preset-filled-primary font-bold px-10 py-3 hover:brightness-110 transition-all border-l border-surface-500/20 flex items-center justify-center min-w-[100px]"
+                        onclick={load_sites}
+                        disabled={loading}>
                         {#if loading}
                             <span class="animate-spin text-xl">⏳</span>
                         {:else}
-                            <span class="whitespace-nowrap tracking-wide">Refresh</span>
+                            <span class="whitespace-nowrap tracking-wide"
+                                >Refresh</span>
                         {/if}
                     </button>
                 </div>
@@ -101,8 +129,13 @@
 
             <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                 <div class="space-y-1">
-                    <span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Status</span>
+                    <span
-                    <select class="select preset-filled-surface rounded-lg text-sm border border-surface-500/20 p-2" bind:value={qry_enabled} onchange={load_sites}>
+                        class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1"
+                        >Status</span>
+                    <select
+                        class="select preset-filled-surface rounded-lg text-sm border border-surface-500/20 p-2"
+                        bind:value={qry_enabled}
+                        onchange={load_sites}>
                         <option value="all">All Statuses</option>
                         <option value="enabled">Enabled Only</option>
                         <option value="not_enabled">Disabled Only</option>
@@ -110,8 +143,13 @@
                 </div>
 
                 <div class="space-y-1">
-                    <span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Visibility</span>
+                    <span
-                    <select class="select preset-filled-surface rounded-lg text-sm border border-surface-500/20 p-2" bind:value={qry_hidden} onchange={load_sites}>
+                        class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1"
+                        >Visibility</span>
+                    <select
+                        class="select preset-filled-surface rounded-lg text-sm border border-surface-500/20 p-2"
+                        bind:value={qry_hidden}
+                        onchange={load_sites}>
                         <option value="all">All Visibility</option>
                         <option value="not_hidden">Not Hidden Only</option>
                         <option value="hidden">Hidden Only</option>
@@ -123,56 +161,88 @@
 
     {#if loading}
         <div class="card p-8 flex justify-center items-center h-64">
-            <div class="placeholder animate-pulse w-full h-full rounded-2xl"></div>
+            <div class="placeholder animate-pulse w-full h-full rounded-2xl">
+            </div>
         </div>
     {:else if filtered_li.length === 0}
-        <div class="card p-12 text-center preset-tonal-surface border-2 border-dashed border-surface-500/20 rounded-2xl">
+        <div
+            class="card p-12 text-center preset-tonal-surface border-2 border-dashed border-surface-500/20 rounded-2xl">
             <Globe size={48} class="mx-auto mb-4 opacity-20" />
             <h3 class="h3 font-bold opacity-50">No Sites Found</h3>
-            <p class="opacity-60 max-w-xs mx-auto mt-2">Sites for this account will appear here. Add your first site to get started.</p>
+            <p class="opacity-60 max-w-xs mx-auto mt-2">
+                Sites for this account will appear here. Add your first site to
+                get started.
+            </p>
         </div>
     {:else}
-        <div class="card p-6 preset-tonal-surface shadow-xl border border-surface-500/10">
+        <div
-            <h3 class="h4 font-bold border-b border-surface-500/30 pb-2 mb-6 flex items-center gap-2">
+            class="card p-6 preset-tonal-surface shadow-xl border border-surface-500/10">
+            <h3
+                class="h4 font-bold border-b border-surface-500/30 pb-2 mb-6 flex items-center gap-2">
                 <ListFilter size={18} class="text-secondary-500" />
                 Linked Properties
-                <span class="badge preset-tonal-secondary ml-auto">{filtered_li.length} found</span>
+                <span class="badge preset-tonal-secondary ml-auto"
+                    >{filtered_li.length} found</span>
             </h3>
 
             <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                 {#each filtered_li as site (site.site_id_random)}
-                    <div class="card p-5 space-y-4 preset-tonal-surface shadow-md border border-surface-500/10 hover:border-primary-500/30 transition-all group relative">
+                    <div
+                        class="card p-5 space-y-4 preset-tonal-surface shadow-md border border-surface-500/10 hover:border-primary-500/30 transition-all group relative">
                         <div class="absolute top-4 right-4 flex gap-1">
                             {#if site.hide}
-                                <span class="badge preset-filled-warning text-[8px] uppercase font-bold shadow-sm">Hidden</span>
+                                <span
+                                    class="badge preset-filled-warning text-[8px] uppercase font-bold shadow-sm"
+                                    >Hidden</span>
                             {/if}
-                            <span class="badge {site.enable ? 'preset-filled-success' : 'preset-filled-error'} text-[8px] uppercase font-bold shadow-sm">
+                            <span
+                                class="badge {site.enable
+                                    ? 'preset-filled-success'
+                                    : 'preset-filled-error'} text-[8px] uppercase font-bold shadow-sm">
                                 {site.enable ? 'Active' : 'Disabled'}
                             </span>
                         </div>
 
                         <header class="flex items-center gap-3">
-                            <div class="avatar preset-filled-primary w-12 h-12 flex items-center justify-center rounded-lg shadow-inner group-hover:scale-110 transition-transform">
+                            <div
+                                class="avatar preset-filled-primary w-12 h-12 flex items-center justify-center rounded-lg shadow-inner group-hover:scale-110 transition-transform">
                                 <Globe size={24} />
                             </div>
                             <div class="pr-12">
-                                <p class="font-black tracking-tight truncate">{site.name}</p>
+                                <p class="font-black tracking-tight truncate">
-                                <p class="text-[10px] uppercase font-bold opacity-50 font-mono tracking-tighter">Code: {site.code || '--'}</p>
+                                    {site.name}
+                                </p>
+                                <p
+                                    class="text-[10px] uppercase font-bold opacity-50 font-mono tracking-tighter">
+                                    Code: {site.code || '--'}
+                                </p>
                             </div>
                         </header>
 
                         <div class="space-y-2 text-xs opacity-70">
-                            <div class="flex items-center gap-2 bg-black/5 p-2 rounded-lg">
+                            <div
-                                <Calendar size={14} class="text-primary-500 shrink-0" />
+                                class="flex items-center gap-2 bg-black/5 p-2 rounded-lg">
-                                <span>Created: {new Date(site.created_on).toLocaleDateString()}</span>
+                                <Calendar
+                                    size={14}
+                                    class="text-primary-500 shrink-0" />
+                                <span
+                                    >Created: {new Date(
+                                        site.created_on
+                                    ).toLocaleDateString()}</span>
                             </div>
-                            <div class="flex items-center gap-2 bg-black/5 p-2 rounded-lg">
+                            <div
-                                <ShieldCheck size={14} class="text-secondary-500 shrink-0" />
+                                class="flex items-center gap-2 bg-black/5 p-2 rounded-lg">
-                                <span class="font-mono truncate">{site.site_id_random}</span>
+                                <ShieldCheck
+                                    size={14}
+                                    class="text-secondary-500 shrink-0" />
+                                <span class="font-mono truncate"
+                                    >{site.site_id_random}</span>
                             </div>
                         </div>
 
-                        <a class="btn btn-sm preset-filled-primary font-bold w-full shadow-lg group-hover:brightness-110 transition-all" href="/core/sites/{site.site_id_random}">
+                        <a
+                            class="btn btn-sm preset-filled-primary font-bold w-full shadow-lg group-hover:brightness-110 transition-all"
+                            href="/core/sites/{site.site_id_random}">
                             Manage Site
                         </a>
                     </div>

src/routes/core/sites/[site_id]/+page.svelte

@@ -14,7 +14,19 @@
 import { editable_fields__site_domain } from '$lib/ae_core/ae_core__site_domain.editable_fields';
 import { ae_api, ae_loc } from '$lib/stores/ae_stores';
 import { goto } from '$app/navigation';
-    import { Activity, ArrowLeft, Database, ExternalLink, Globe, Info, Key, Plus, Save, Settings, Trash2 } from '@lucide/svelte';
+import {
+    Activity,
+    ArrowLeft,
+    Database,
+    ExternalLink,
+    Globe,
+    Info,
+    Key,
+    Plus,
+    Save,
+    Settings,
+    Trash2
+} from '@lucide/svelte';
 import AE_Comp_Site_Config_Editor from '$lib/ae_core/ae_comp__site_config_editor.svelte';
 
 let site_id = $derived($page.params.site_id ?? '');
@@ -51,7 +63,7 @@
 async function handle_save_site() {
     saving = true;
     const data_kv: any = {};
-        editable_fields__site.forEach(field => {
+    editable_fields__site.forEach((field) => {
         if (site[field] !== undefined) {
             data_kv[field] = site[field];
         }
@@ -107,19 +119,27 @@
 </script>
 
 <div class="container mx-auto p-4 space-y-6">
-    <header class="flex justify-between items-center bg-surface-50-900-token p-4 rounded-xl shadow-lg border border-surface-500/10">
+    <header
+        class="flex justify-between items-center bg-surface-50-900-token p-4 rounded-xl shadow-lg border border-surface-500/10">
         <div class="flex items-center gap-4">
-            <a class="btn btn-sm preset-tonal-surface shadow-sm" href="/core/sites">
+            <a
+                class="btn btn-sm preset-tonal-surface shadow-sm"
+                href="/core/sites">
                 <ArrowLeft size={16} />
             </a>
             <div class="flex items-center gap-2">
                 <div class="p-2 bg-primary-500/10 rounded-lg">
                     <Globe size={24} class="text-primary-500" />
                 </div>
-                <h1 class="h2 font-black tracking-tight">{site?.name ?? 'Loading...'}</h1>
+                <h1 class="h2 font-black tracking-tight">
+                    {site?.name ?? 'Loading...'}
+                </h1>
             </div>
         </div>
-        <button class="btn btn-sm preset-filled-primary font-bold shadow-lg" onclick={handle_save_site} disabled={loading || saving}>
+        <button
+            class="btn btn-sm preset-filled-primary font-bold shadow-lg"
+            onclick={handle_save_site}
+            disabled={loading || saving}>
             {#if saving}
                 <span class="animate-spin mr-2">⏳</span>
             {:else}
@@ -131,60 +151,98 @@
 
     {#if loading}
         <div class="card p-8 flex justify-center items-center h-64">
-            <div class="placeholder animate-pulse w-full h-full rounded-2xl"></div>
+            <div class="placeholder animate-pulse w-full h-full rounded-2xl">
+            </div>
         </div>
     {:else if site}
         <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
             <!-- Site Config -->
             <div class="lg:col-span-2 space-y-6">
-                <div class="card p-6 space-y-4 shadow-xl preset-tonal-surface border border-surface-500/10">
+                <div
-                    <h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
+                    class="card p-6 space-y-4 shadow-xl preset-tonal-surface border border-surface-500/10">
+                    <h3
+                        class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
                         <Settings size={18} class="text-primary-500" /> Site Configuration
                     </h3>
                     <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                         <div class="space-y-1">
-                            <span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Site Name</span>
+                            <span
-                            <input class="input preset-filled-surface rounded-lg p-3" type="text" bind:value={site.name} />
+                                class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1"
+                                >Site Name</span>
+                            <input
+                                class="input preset-filled-surface rounded-lg p-3"
+                                type="text"
+                                bind:value={site.name} />
                         </div>
                         <div class="space-y-1">
-                            <span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Site Code</span>
+                            <span
-                            <input class="input preset-filled-surface rounded-lg font-mono p-3" type="text" bind:value={site.code} />
+                                class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1"
+                                >Site Code</span>
+                            <input
+                                class="input preset-filled-surface rounded-lg font-mono p-3"
+                                type="text"
+                                bind:value={site.code} />
                         </div>
                         <div class="space-y-1 md:col-span-2">
-                            <span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Tagline</span>
+                            <span
-                            <input class="input preset-filled-surface rounded-lg p-3" type="text" bind:value={site.tagline} />
+                                class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1"
+                                >Tagline</span>
+                            <input
+                                class="input preset-filled-surface rounded-lg p-3"
+                                type="text"
+                                bind:value={site.tagline} />
                         </div>
                         <div class="space-y-1 md:col-span-2">
-                            <span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Description</span>
+                            <span
-                            <textarea class="textarea preset-filled-surface rounded-lg p-3" rows="2" bind:value={site.description}></textarea>
+                                class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1"
+                                >Description</span>
+                            <textarea
+                                class="textarea preset-filled-surface rounded-lg p-3"
+                                rows="2"
+                                bind:value={site.description}></textarea>
                         </div>
                     </div>
                 </div>
 
                 <!-- Advanced Site JSON Config -->
-                <div class="card p-6 space-y-4 shadow-xl preset-tonal-surface border border-surface-500/10">
+                <div
-                    <h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
+                    class="card p-6 space-y-4 shadow-xl preset-tonal-surface border border-surface-500/10">
-                        <Database size={18} class="text-warning-500" /> Site Settings (cfg_json)
+                    <h3
+                        class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
+                        <Database size={18} class="text-warning-500" /> Site Settings
+                        (cfg_json)
                     </h3>
                     <AE_Comp_Site_Config_Editor
                         bind:cfg_json={site.cfg_json}
-                        on_save={handle_save_site}
+                        on_save={handle_save_site} />
-                    />
                 </div>
 
-                <div class="card p-6 space-y-4 shadow-xl preset-tonal-surface border border-surface-500/10">
+                <div
-                    <h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
+                    class="card p-6 space-y-4 shadow-xl preset-tonal-surface border border-surface-500/10">
+                    <h3
+                        class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
                         <Key size={18} class="text-secondary-500" /> Access Control
                     </h3>
                     <div class="flex flex-col gap-4">
-                        <label class="flex items-center space-x-2 cursor-pointer group">
+                        <label
-                            <input class="checkbox" type="checkbox" bind:checked={site.restrict_access} />
+                            class="flex items-center space-x-2 cursor-pointer group">
-                            <span class="text-sm font-bold opacity-70 group-hover:opacity-100 transition-opacity">Restrict Access</span>
+                            <input
+                                class="checkbox"
+                                type="checkbox"
+                                bind:checked={site.restrict_access} />
+                            <span
+                                class="text-sm font-bold opacity-70 group-hover:opacity-100 transition-opacity"
+                                >Restrict Access</span>
                         </label>
                         {#if site.restrict_access}
                             <div class="space-y-1 max-w-md animate-fade-in">
-                                <span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Access Key</span>
+                                <span
-                                <input class="input preset-filled-surface rounded-lg font-mono p-3" type="text" bind:value={site.access_key} />
+                                    class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1"
+                                    >Access Key</span>
+                                <input
+                                    class="input preset-filled-surface rounded-lg font-mono p-3"
+                                    type="text"
+                                    bind:value={site.access_key} />
                             </div>
                         {/if}
                     </div>
@@ -193,38 +251,67 @@
 
             <!-- Domains Management -->
             <div class="space-y-6">
-                <div class="card p-6 space-y-4 shadow-xl preset-tonal-surface border border-surface-500/10">
+                <div
-                    <header class="flex justify-between items-center border-b border-surface-500/30 pb-2">
+                    class="card p-6 space-y-4 shadow-xl preset-tonal-surface border border-surface-500/10">
+                    <header
+                        class="flex justify-between items-center border-b border-surface-500/30 pb-2">
                         <h3 class="h4 font-bold flex items-center gap-2">
                             <Globe size={18} class="text-tertiary-500" /> Site Domains
                         </h3>
-                        <button class="btn btn-icon btn-sm preset-filled-secondary shadow-md" onclick={handle_add_domain} title="Add Domain">
+                        <button
+                            class="btn btn-icon btn-sm preset-filled-secondary shadow-md"
+                            onclick={handle_add_domain}
+                            title="Add Domain">
                             <Plus size={14} />
                         </button>
                     </header>
 
                     {#if domain_li.length === 0}
-                        <p class="text-sm opacity-60 text-center py-8 bg-surface-500/5 rounded-lg border-2 border-dashed border-surface-500/20">No domains configured.</p>
+                        <p
+                            class="text-sm opacity-60 text-center py-8 bg-surface-500/5 rounded-lg border-2 border-dashed border-surface-500/20">
+                            No domains configured.
+                        </p>
                     {:else}
                         <div class="space-y-3">
                             {#each domain_li as dom (dom.site_domain_id_random)}
-                                <div class="card p-3 preset-tonal-surface shadow-sm border border-surface-500/10 flex justify-between items-center group">
+                                <div
+                                    class="card p-3 preset-tonal-surface shadow-sm border border-surface-500/10 flex justify-between items-center group">
                                     <div class="flex flex-col">
-                                        <span class="font-bold text-sm flex items-center gap-1">
+                                        <span
+                                            class="font-bold text-sm flex items-center gap-1">
                                             {dom.fqdn}
-                                            <a href="https://{dom.fqdn}" target="_blank" rel="noopener noreferrer" class="opacity-30 group-hover:opacity-100 transition-opacity">
+                                            <a
+                                                href="https://{dom.fqdn}"
+                                                target="_blank"
+                                                rel="noopener noreferrer"
+                                                class="opacity-30 group-hover:opacity-100 transition-opacity">
                                                 <ExternalLink size={12} />
                                             </a>
                                         </span>
-                                        <span class="text-[10px] uppercase font-bold tracking-tighter opacity-50">
+                                        <span
-                                            Key: <code class="text-primary-500">{dom.access_key || '--'}</code> &bull; {dom.enable ? 'Active' : 'Disabled'}
+                                            class="text-[10px] uppercase font-bold tracking-tighter opacity-50">
+                                            Key: <code class="text-primary-500"
+                                                >{dom.access_key || '--'}</code>
+                                            &bull; {dom.enable
+                                                ? 'Active'
+                                                : 'Disabled'}
                                         </span>
                                     </div>
                                     <div class="flex gap-1">
-                                        <button class="btn btn-icon btn-sm {dom.enable ? 'preset-tonal-success' : 'preset-tonal-error'}" onclick={() => handle_toggle_domain(dom)} title="Toggle Active">
+                                        <button
+                                            class="btn btn-icon btn-sm {dom.enable
+                                                ? 'preset-tonal-success'
+                                                : 'preset-tonal-error'}"
+                                            onclick={() =>
+                                                handle_toggle_domain(dom)}
+                                            title="Toggle Active">
                                             <Save size={14} />
                                         </button>
-                                        <button class="btn btn-icon btn-sm preset-tonal-error" onclick={() => handle_delete_domain(dom)} title="Delete Domain">
+                                        <button
+                                            class="btn btn-icon btn-sm preset-tonal-error"
+                                            onclick={() =>
+                                                handle_delete_domain(dom)}
+                                            title="Delete Domain">
                                             <Trash2 size={14} />
                                         </button>
                                     </div>
@@ -234,18 +321,32 @@
                     {/if}
                 </div>
 
-                <div class="card p-6 space-y-4 shadow-xl preset-tonal-surface border border-surface-500/10">
+                <div
-                    <h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
+                    class="card p-6 space-y-4 shadow-xl preset-tonal-surface border border-surface-500/10">
+                    <h3
+                        class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
                         <Activity size={18} class="text-error-500" /> System Status
                     </h3>
                     <div class="space-y-4 py-2">
-                        <label class="flex items-center space-x-3 cursor-pointer group">
+                        <label
-                            <input class="checkbox" type="checkbox" bind:checked={site.enable} />
+                            class="flex items-center space-x-3 cursor-pointer group">
-                            <span class="text-sm font-bold opacity-70 group-hover:opacity-100 transition-opacity">Site Enabled</span>
+                            <input
+                                class="checkbox"
+                                type="checkbox"
+                                bind:checked={site.enable} />
+                            <span
+                                class="text-sm font-bold opacity-70 group-hover:opacity-100 transition-opacity"
+                                >Site Enabled</span>
                         </label>
-                        <label class="flex items-center space-x-3 cursor-pointer group">
+                        <label
-                            <input class="checkbox" type="checkbox" bind:checked={site.hide} />
+                            class="flex items-center space-x-3 cursor-pointer group">
-                            <span class="text-sm font-bold opacity-70 group-hover:opacity-100 transition-opacity">Hidden from Public</span>
+                            <input
+                                class="checkbox"
+                                type="checkbox"
+                                bind:checked={site.hide} />
+                            <span
+                                class="text-sm font-bold opacity-70 group-hover:opacity-100 transition-opacity"
+                                >Hidden from Public</span>
                         </label>
                     </div>
                 </div>

src/routes/core/users/+page.svelte

@@ -1,9 +1,24 @@
 <script lang="ts">
 import { onMount } from 'svelte';
-    import { load_ae_obj_li__user, create_ae_obj__user } from '$lib/ae_core/ae_core__user';
+import {
+    load_ae_obj_li__user,
+    create_ae_obj__user
+} from '$lib/ae_core/ae_core__user';
 import { ae_api, ae_loc } from '$lib/stores/ae_stores';
 import { goto } from '$app/navigation';
-    import { Activity, Fingerprint, Globe, Landmark, ListFilter, Mail, Plus, Search, ShieldCheck, User, X } from '@lucide/svelte';
+import {
+    Activity,
+    Fingerprint,
+    Globe,
+    Landmark,
+    ListFilter,
+    Mail,
+    Plus,
+    Search,
+    ShieldCheck,
+    User,
+    X
+} from '@lucide/svelte';
 let user_li: any[] = $state([]);
 let loading = $state(true);
 let qry_str = $state('');
@@ -49,7 +64,8 @@
     const email = prompt('Enter email address:');
 
     // Link to account if scope is 'account' or 'all', otherwise create global user
-        const account_id = qry_account_scope === 'global' ? undefined : $ae_loc.account_id;
+    const account_id =
+        qry_account_scope === 'global' ? undefined : $ae_loc.account_id;
 
     await create_ae_obj__user({
         api_cfg: $ae_api,
@@ -62,14 +78,17 @@
 </script>
 
 <div class="container mx-auto p-4 space-y-6">
-    <header class="flex justify-between items-center bg-surface-50-900-token p-4 rounded-xl shadow-lg border border-surface-500/10">
+    <header
+        class="flex justify-between items-center bg-surface-50-900-token p-4 rounded-xl shadow-lg border border-surface-500/10">
         <div class="flex items-center gap-2">
             <div class="p-2 bg-primary-500/10 rounded-lg">
                 <ShieldCheck size={24} class="text-primary-500" />
             </div>
             <h1 class="h2 font-black tracking-tight">User Management</h1>
         </div>
-        <button class="btn btn-sm preset-filled-primary font-bold shadow-lg" onclick={() => show_add_form = !show_add_form}>
+        <button
+            class="btn btn-sm preset-filled-primary font-bold shadow-lg"
+            onclick={() => (show_add_form = !show_add_form)}>
             {#if show_add_form}
                 <X size={16} class="mr-2" /> Cancel
             {:else}
@@ -78,12 +97,17 @@
         </button>
     </header>
 
-    <div class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10 space-y-4">
+    <div
+        class="card p-6 shadow-xl preset-tonal-surface border border-surface-500/10 space-y-4">
         <div class="flex flex-wrap gap-6 items-end">
             <div class="flex-1 min-w-[280px] space-y-1">
-                <span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Search Users</span>
+                <span
-                <div class="flex bg-surface-200-700-token rounded-lg overflow-hidden border border-surface-500/20 shadow-inner group focus-within:ring-2 focus-within:ring-primary-500/50 transition-all">
+                    class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1"
-                    <div class="flex items-center justify-center px-4 bg-surface-300-600-token border-r border-surface-500/20">
+                    >Search Users</span>
+                <div
+                    class="flex bg-surface-200-700-token rounded-lg overflow-hidden border border-surface-500/20 shadow-inner group focus-within:ring-2 focus-within:ring-primary-500/50 transition-all">
+                    <div
+                        class="flex items-center justify-center px-4 bg-surface-300-600-token border-r border-surface-500/20">
                         <Search size={18} class="opacity-50" />
                     </div>
                     <input
@@ -91,13 +115,16 @@
                         type="search"
                         bind:value={qry_str}
                         placeholder="Search username or email..."
-                        onkeydown={(e) => e.key === 'Enter' && load_users()}
+                        onkeydown={(e) => e.key === 'Enter' && load_users()} />
-                    />
+                    <button
-                    <button class="preset-filled-primary font-bold px-10 py-3 hover:brightness-110 transition-all border-l border-surface-500/20 flex items-center justify-center min-w-[100px]" onclick={load_users} disabled={loading}>
+                        class="preset-filled-primary font-bold px-10 py-3 hover:brightness-110 transition-all border-l border-surface-500/20 flex items-center justify-center min-w-[100px]"
+                        onclick={load_users}
+                        disabled={loading}>
                         {#if loading}
                             <span class="animate-spin text-xl">⏳</span>
                         {:else}
-                            <span class="whitespace-nowrap tracking-wide">Go</span>
+                            <span class="whitespace-nowrap tracking-wide"
+                                >Go</span>
                         {/if}
                     </button>
                 </div>
@@ -105,8 +132,13 @@
 
             <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                 <div class="space-y-1">
-                    <span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Scope</span>
+                    <span
-                    <select class="select preset-filled-surface rounded-lg text-sm border border-surface-500/20 p-2" bind:value={qry_account_scope} onchange={load_users}>
+                        class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1"
+                        >Scope</span>
+                    <select
+                        class="select preset-filled-surface rounded-lg text-sm border border-surface-500/20 p-2"
+                        bind:value={qry_account_scope}
+                        onchange={load_users}>
                         <option value="all">All (Current + Global)</option>
                         <option value="account">Account Only</option>
                         <option value="global">Global Only</option>
@@ -114,8 +146,13 @@
                 </div>
 
                 <div class="space-y-1">
-                    <span class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1">Status</span>
+                    <span
-                    <select class="select preset-filled-surface rounded-lg text-sm border border-surface-500/20 p-2" bind:value={qry_enabled} onchange={load_users}>
+                        class="label block text-xs font-bold opacity-75 uppercase tracking-wider ml-1"
+                        >Status</span>
+                    <select
+                        class="select preset-filled-surface rounded-lg text-sm border border-surface-500/20 p-2"
+                        bind:value={qry_enabled}
+                        onchange={load_users}>
                         <option value="all">All</option>
                         <option value="enabled">Enabled</option>
                         <option value="not_enabled">Disabled</option>
@@ -127,47 +164,67 @@
 
     {#if loading}
         <div class="card p-8 flex justify-center items-center h-64">
-            <div class="placeholder animate-pulse w-full h-full rounded-2xl"></div>
+            <div class="placeholder animate-pulse w-full h-full rounded-2xl">
+            </div>
         </div>
     {:else if user_li.length === 0}
-        <div class="card p-12 text-center preset-tonal-surface border-2 border-dashed border-surface-500/20 rounded-2xl">
+        <div
+            class="card p-12 text-center preset-tonal-surface border-2 border-dashed border-surface-500/20 rounded-2xl">
             <Fingerprint size={48} class="mx-auto mb-4 opacity-20" />
             <h3 class="h3 font-bold opacity-50">No Users Found</h3>
-            <p class="opacity-60 max-w-xs mx-auto mt-2">Try adjusting your search or scope filters.</p>
+            <p class="opacity-60 max-w-xs mx-auto mt-2">
+                Try adjusting your search or scope filters.
+            </p>
         </div>
     {:else}
-        <div class="card p-6 preset-tonal-surface shadow-xl border border-surface-500/10">
+        <div
-            <h3 class="h4 font-bold border-b border-surface-500/30 pb-2 mb-6 flex items-center gap-2">
+            class="card p-6 preset-tonal-surface shadow-xl border border-surface-500/10">
+            <h3
+                class="h4 font-bold border-b border-surface-500/30 pb-2 mb-6 flex items-center gap-2">
                 <ListFilter size={18} class="text-secondary-500" />
                 Directory Results
-                <span class="badge preset-tonal-secondary ml-auto">{user_li.length} found</span>
+                <span class="badge preset-tonal-secondary ml-auto"
+                    >{user_li.length} found</span>
             </h3>
 
             <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                 {#each user_li as user (user.user_id_random)}
-                    <div class="card p-5 space-y-4 preset-tonal-surface shadow-md border border-surface-500/10 hover:border-primary-500/30 transition-all group">
+                    <div
+                        class="card p-5 space-y-4 preset-tonal-surface shadow-md border border-surface-500/10 hover:border-primary-500/30 transition-all group">
                         <header class="flex justify-between items-start">
                             <div class="flex items-center gap-3">
-                                <div class="avatar preset-filled-primary w-12 h-12 flex items-center justify-center rounded-full shadow-inner group-hover:scale-110 transition-transform">
+                                <div
+                                    class="avatar preset-filled-primary w-12 h-12 flex items-center justify-center rounded-full shadow-inner group-hover:scale-110 transition-transform">
                                     <User size={24} />
                                 </div>
                                 <div>
-                                    <p class="font-black tracking-tight">{user.username}</p>
+                                    <p class="font-black tracking-tight">
-                                    <p class="text-[10px] uppercase font-bold opacity-50">{user.name || 'No Display Name'}</p>
+                                        {user.username}
+                                    </p>
+                                    <p
+                                        class="text-[10px] uppercase font-bold opacity-50">
+                                        {user.name || 'No Display Name'}
+                                    </p>
                                 </div>
                             </div>
                             <div class="flex flex-col items-end gap-1">
                                 {#if user.super}
-                                    <span class="badge preset-filled-error text-[8px] uppercase font-bold">Super</span>
+                                    <span
+                                        class="badge preset-filled-error text-[8px] uppercase font-bold"
+                                        >Super</span>
                                 {:else if user.manager}
-                                    <span class="badge preset-filled-warning text-[8px] uppercase font-bold">Manager</span>
+                                    <span
+                                        class="badge preset-filled-warning text-[8px] uppercase font-bold"
+                                        >Manager</span>
                                 {/if}
                                 {#if !user.account_id && !user.account_id_random}
-                                    <span class="badge preset-tonal-secondary text-[8px] uppercase font-bold flex items-center gap-1">
+                                    <span
+                                        class="badge preset-tonal-secondary text-[8px] uppercase font-bold flex items-center gap-1">
                                         <Globe size={8} /> Global
                                     </span>
                                 {:else}
-                                    <span class="badge preset-tonal-primary text-[8px] uppercase font-bold flex items-center gap-1">
+                                    <span
+                                        class="badge preset-tonal-primary text-[8px] uppercase font-bold flex items-center gap-1">
                                         <Landmark size={8} /> Account
                                     </span>
                                 {/if}
@@ -175,17 +232,25 @@
                         </header>
 
                         <div class="space-y-2">
-                            <div class="flex items-center gap-2 text-xs opacity-70 bg-black/5 p-2 rounded-lg">
+                            <div
+                                class="flex items-center gap-2 text-xs opacity-70 bg-black/5 p-2 rounded-lg">
                                 <Mail size={14} class="text-primary-500" />
-                                <span class="truncate">{user.email || '--'}</span>
+                                <span class="truncate"
+                                    >{user.email || '--'}</span>
                             </div>
-                            <div class="flex items-center gap-2 text-xs opacity-70 bg-black/5 p-2 rounded-lg">
+                            <div
-                                <Activity size={14} class="text-secondary-500" />
+                                class="flex items-center gap-2 text-xs opacity-70 bg-black/5 p-2 rounded-lg">
-                                <span class="font-mono">{user.user_id_random}</span>
+                                <Activity
+                                    size={14}
+                                    class="text-secondary-500" />
+                                <span class="font-mono"
+                                    >{user.user_id_random}</span>
                             </div>
                         </div>
 
-                        <a class="btn btn-sm preset-filled-primary font-bold w-full shadow-lg group-hover:brightness-110 transition-all" href="/core/users/{user.user_id_random}">
+                        <a
+                            class="btn btn-sm preset-filled-primary font-bold w-full shadow-lg group-hover:brightness-110 transition-all"
+                            href="/core/users/{user.user_id_random}">
                             Manage User
                         </a>
                     </div>

src/routes/core/users/[user_id]/+page.svelte

@@ -2,9 +2,27 @@
 import { onMount, untrack } from 'svelte';
 import { ae_loc, ae_api } from '$lib/stores/ae_stores';
 import { goto } from '$app/navigation';
-    import { update_ae_obj__user, delete_ae_obj_id__user } from '$lib/ae_core/ae_core__user';
+import {
+    update_ae_obj__user,
+    delete_ae_obj_id__user
+} from '$lib/ae_core/ae_core__user';
 import { editable_fields__user } from '$lib/ae_core/ae_core__user.editable_fields';
-    import { Activity, ArrowLeft, CircleCheck, CircleX, Clock, Fingerprint, Key, Lock, Mail, Save, Settings, ShieldCheck, Trash2, User as UserIcon } from '@lucide/svelte';
+import {
+    Activity,
+    ArrowLeft,
+    CircleCheck,
+    CircleX,
+    Clock,
+    Fingerprint,
+    Key,
+    Lock,
+    Mail,
+    Save,
+    Settings,
+    ShieldCheck,
+    Trash2,
+    User as UserIcon
+} from '@lucide/svelte';
 interface Props {
     data: any;
 }
@@ -26,7 +44,7 @@
 async function handle_save() {
     saving = true;
     const data_kv: any = {};
-        editable_fields__user.forEach(field => {
+    editable_fields__user.forEach((field) => {
         if (user[field] !== undefined) {
             data_kv[field] = user[field];
         }
@@ -62,26 +80,41 @@
 </script>
 
 <div class="container mx-auto p-4 space-y-6">
-    <header class="flex justify-between items-center bg-surface-50-900-token p-4 rounded-xl shadow-lg border border-surface-500/10">
+    <header
+        class="flex justify-between items-center bg-surface-50-900-token p-4 rounded-xl shadow-lg border border-surface-500/10">
         <div class="flex items-center gap-4">
-            <a class="btn btn-sm preset-tonal-surface shadow-sm" href="/core/users">
+            <a
+                class="btn btn-sm preset-tonal-surface shadow-sm"
+                href="/core/users">
                 <ArrowLeft size={16} />
             </a>
             <div class="flex items-center gap-3">
-                <div class="avatar preset-filled-primary w-12 h-12 flex items-center justify-center rounded-full shadow-inner">
+                <div
+                    class="avatar preset-filled-primary w-12 h-12 flex items-center justify-center rounded-full shadow-inner">
                     <UserIcon size={24} />
                 </div>
                 <div>
-                    <h1 class="h2 font-black tracking-tight">{user.username}</h1>
+                    <h1 class="h2 font-black tracking-tight">
-                    <p class="text-[10px] uppercase font-bold tracking-widest opacity-50">UID: {user.user_id_random}</p>
+                        {user.username}
+                    </h1>
+                    <p
+                        class="text-[10px] uppercase font-bold tracking-widest opacity-50">
+                        UID: {user.user_id_random}
+                    </p>
                 </div>
             </div>
         </div>
         <div class="flex gap-2">
-            <button class="btn btn-sm preset-filled-error font-bold shadow-lg" onclick={handle_delete} disabled={saving}>
+            <button
+                class="btn btn-sm preset-filled-error font-bold shadow-lg"
+                onclick={handle_delete}
+                disabled={saving}>
                 <Trash2 size={16} class="mr-2" /> Disable
             </button>
-            <button class="btn btn-sm preset-filled-primary font-bold shadow-lg" onclick={handle_save} disabled={saving}>
+            <button
+                class="btn btn-sm preset-filled-primary font-bold shadow-lg"
+                onclick={handle_save}
+                disabled={saving}>
                 {#if saving}
                     <span class="animate-spin mr-2">⏳</span>
                 {:else}
@@ -95,61 +128,123 @@
     <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
         <!-- Main Info -->
         <div class="lg:col-span-2 space-y-6">
-            <div class="card p-6 space-y-4 shadow-xl preset-tonal-surface border border-surface-500/10">
+            <div
-                <h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
+                class="card p-6 space-y-4 shadow-xl preset-tonal-surface border border-surface-500/10">
+                <h3
+                    class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
                     <UserIcon size={18} class="text-primary-500" /> Basic Profile
                 </h3>
                 <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                     <div class="space-y-1">
-                        <label class="label text-xs font-bold opacity-75" for="user-display-name">Display Name</label>
+                        <label
-                        <input class="input preset-filled-surface rounded-lg p-2" id="user-display-name" type="text" bind:value={user.name} placeholder="Full Name" />
+                            class="label text-xs font-bold opacity-75"
+                            for="user-display-name">Display Name</label>
+                        <input
+                            class="input preset-filled-surface rounded-lg p-2"
+                            id="user-display-name"
+                            type="text"
+                            bind:value={user.name}
+                            placeholder="Full Name" />
                     </div>
                     <div class="space-y-1">
-                        <label class="label text-xs font-bold opacity-75" for="user-email">Email Address</label>
+                        <label
-                        <input class="input preset-filled-surface rounded-lg p-2" id="user-email" type="email" bind:value={user.email} />
+                            class="label text-xs font-bold opacity-75"
+                            for="user-email">Email Address</label>
+                        <input
+                            class="input preset-filled-surface rounded-lg p-2"
+                            id="user-email"
+                            type="email"
+                            bind:value={user.email} />
                     </div>
                     <div class="space-y-1 md:col-span-2">
-                        <label class="label text-xs font-bold opacity-75" for="user-username">Username</label>
+                        <label
-                        <div class="input-group input-group-divider grid-cols-[auto_1fr] preset-tonal-surface rounded-lg overflow-hidden border border-surface-500/20">
+                            class="label text-xs font-bold opacity-75"
-                            <div class="input-group-shim !pl-4 !pr-0"><Fingerprint size={16} /></div>
+                            for="user-username">Username</label>
-                            <input class="bg-transparent border-0 ring-0 focus:ring-0 font-mono opacity-60 p-2" id="user-username" type="text" bind:value={user.username} disabled />
+                        <div
+                            class="input-group input-group-divider grid-cols-[auto_1fr] preset-tonal-surface rounded-lg overflow-hidden border border-surface-500/20">
+                            <div class="input-group-shim !pl-4 !pr-0">
+                                <Fingerprint size={16} />
                             </div>
-                        <p class="text-[10px] opacity-50 mt-1 italic uppercase tracking-tighter">Username changes are currently restricted.</p>
+                            <input
+                                class="bg-transparent border-0 ring-0 focus:ring-0 font-mono opacity-60 p-2"
+                                id="user-username"
+                                type="text"
+                                bind:value={user.username}
+                                disabled />
+                        </div>
+                        <p
+                            class="text-[10px] opacity-50 mt-1 italic uppercase tracking-tighter">
+                            Username changes are currently restricted.
+                        </p>
                     </div>
                 </div>
             </div>
 
-            <div class="card p-6 space-y-4 shadow-xl preset-tonal-surface border border-surface-500/10">
+            <div
-                <h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
+                class="card p-6 space-y-4 shadow-xl preset-tonal-surface border border-surface-500/10">
+                <h3
+                    class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
                     <ShieldCheck size={18} class="text-secondary-500" /> System Permissions
                 </h3>
                 <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
-                    <label class="flex items-center space-x-3 card p-4 preset-tonal-error cursor-pointer border border-error-500/20 hover:preset-filled-error transition-all group">
+                    <label
-                        <input class="checkbox" type="checkbox" bind:checked={user.super} />
+                        class="flex items-center space-x-3 card p-4 preset-tonal-error cursor-pointer border border-error-500/20 hover:preset-filled-error transition-all group">
+                        <input
+                            class="checkbox"
+                            type="checkbox"
+                            bind:checked={user.super} />
                         <div class="flex flex-col">
-                            <span class="font-black uppercase text-xs tracking-widest">Super User</span>
+                            <span
-                            <span class="text-[10px] opacity-70 group-hover:opacity-100">Full system override access</span>
+                                class="font-black uppercase text-xs tracking-widest"
+                                >Super User</span>
+                            <span
+                                class="text-[10px] opacity-70 group-hover:opacity-100"
+                                >Full system override access</span>
                         </div>
                     </label>
-                    <label class="flex items-center space-x-3 card p-4 preset-tonal-warning cursor-pointer border border-warning-500/20 hover:preset-filled-warning transition-all group">
+                    <label
-                        <input class="checkbox" type="checkbox" bind:checked={user.manager} />
+                        class="flex items-center space-x-3 card p-4 preset-tonal-warning cursor-pointer border border-warning-500/20 hover:preset-filled-warning transition-all group">
+                        <input
+                            class="checkbox"
+                            type="checkbox"
+                            bind:checked={user.manager} />
                         <div class="flex flex-col">
-                            <span class="font-black uppercase text-xs tracking-widest">Manager</span>
+                            <span
-                            <span class="text-[10px] opacity-70 group-hover:opacity-100">Global account & user management</span>
+                                class="font-black uppercase text-xs tracking-widest"
+                                >Manager</span>
+                            <span
+                                class="text-[10px] opacity-70 group-hover:opacity-100"
+                                >Global account & user management</span>
                         </div>
                     </label>
-                    <label class="flex items-center space-x-3 card p-4 preset-tonal-primary cursor-pointer border border-primary-500/20 hover:preset-filled-primary transition-all group">
+                    <label
-                        <input class="checkbox" type="checkbox" bind:checked={user.administrator} />
+                        class="flex items-center space-x-3 card p-4 preset-tonal-primary cursor-pointer border border-primary-500/20 hover:preset-filled-primary transition-all group">
+                        <input
+                            class="checkbox"
+                            type="checkbox"
+                            bind:checked={user.administrator} />
                         <div class="flex flex-col">
-                            <span class="font-black uppercase text-xs tracking-widest">Administrator</span>
+                            <span
-                            <span class="text-[10px] opacity-70 group-hover:opacity-100">Account-level administrative access</span>
+                                class="font-black uppercase text-xs tracking-widest"
+                                >Administrator</span>
+                            <span
+                                class="text-[10px] opacity-70 group-hover:opacity-100"
+                                >Account-level administrative access</span>
                         </div>
                     </label>
-                    <label class="flex items-center space-x-3 card p-4 preset-tonal-secondary cursor-pointer border border-secondary-500/20 hover:preset-filled-secondary transition-all group">
+                    <label
-                        <input class="checkbox" type="checkbox" bind:checked={user.verified} />
+                        class="flex items-center space-x-3 card p-4 preset-tonal-secondary cursor-pointer border border-secondary-500/20 hover:preset-filled-secondary transition-all group">
+                        <input
+                            class="checkbox"
+                            type="checkbox"
+                            bind:checked={user.verified} />
                         <div class="flex flex-col">
-                            <span class="font-black uppercase text-xs tracking-widest">Verified User</span>
+                            <span
-                            <span class="text-[10px] opacity-70 group-hover:opacity-100">Identity confirmed by staff</span>
+                                class="font-black uppercase text-xs tracking-widest"
+                                >Verified User</span>
+                            <span
+                                class="text-[10px] opacity-70 group-hover:opacity-100"
+                                >Identity confirmed by staff</span>
                         </div>
                     </label>
                 </div>
@@ -158,63 +253,105 @@
 
         <!-- Sidebar / Meta -->
         <div class="space-y-6">
-            <div class="card p-6 space-y-4 shadow-xl preset-tonal-surface border border-surface-500/10">
+            <div
-                <h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
+                class="card p-6 space-y-4 shadow-xl preset-tonal-surface border border-surface-500/10">
+                <h3
+                    class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
                     <Activity size={18} class="text-tertiary-500" /> Account Status
                 </h3>
                 <div class="space-y-4 py-2">
-                    <label class="flex items-center space-x-3 cursor-pointer group">
+                    <label
-                        <input class="checkbox" type="checkbox" bind:checked={user.enable} />
+                        class="flex items-center space-x-3 cursor-pointer group">
-                        <span class="text-sm font-bold opacity-70 group-hover:opacity-100 transition-opacity">Login Enabled</span>
+                        <input
+                            class="checkbox"
+                            type="checkbox"
+                            bind:checked={user.enable} />
+                        <span
+                            class="text-sm font-bold opacity-70 group-hover:opacity-100 transition-opacity"
+                            >Login Enabled</span>
                     </label>
-                    <label class="flex items-center space-x-3 cursor-pointer group">
+                    <label
-                        <input class="checkbox" type="checkbox" bind:checked={user.hide} />
+                        class="flex items-center space-x-3 cursor-pointer group">
-                        <span class="text-sm font-bold opacity-70 group-hover:opacity-100 transition-opacity">Hidden from Lists</span>
+                        <input
+                            class="checkbox"
+                            type="checkbox"
+                            bind:checked={user.hide} />
+                        <span
+                            class="text-sm font-bold opacity-70 group-hover:opacity-100 transition-opacity"
+                            >Hidden from Lists</span>
                     </label>
-                    <label class="flex items-center space-x-3 cursor-pointer group">
+                    <label
-                        <input class="checkbox" type="checkbox" bind:checked={user.allow_auth_key} />
+                        class="flex items-center space-x-3 cursor-pointer group">
-                        <span class="text-sm font-bold opacity-70 group-hover:opacity-100 transition-opacity">Allow Email Auth Key</span>
+                        <input
+                            class="checkbox"
+                            type="checkbox"
+                            bind:checked={user.allow_auth_key} />
+                        <span
+                            class="text-sm font-bold opacity-70 group-hover:opacity-100 transition-opacity"
+                            >Allow Email Auth Key</span>
                     </label>
                 </div>
             </div>
 
-            <div class="card p-6 space-y-4 shadow-xl preset-tonal-surface border border-surface-500/10">
+            <div
-                <h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
+                class="card p-6 space-y-4 shadow-xl preset-tonal-surface border border-surface-500/10">
+                <h3
+                    class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
                     <Lock size={18} class="text-surface-500" /> Linking Info
                 </h3>
                 <div class="space-y-3 text-xs">
-                    <div class="flex justify-between items-center p-2 bg-black/5 rounded-lg">
+                    <div
-                        <span class="font-bold opacity-50 uppercase tracking-tighter">Linked Person</span>
+                        class="flex justify-between items-center p-2 bg-black/5 rounded-lg">
+                        <span
+                            class="font-bold opacity-50 uppercase tracking-tighter"
+                            >Linked Person</span>
                         <span class="font-mono font-bold">
                             {#if user.person_id_random}
-                                <a href="/core/people/{user.person_id_random}" class="text-primary-500 hover:underline">
+                                <a
+                                    href="/core/people/{user.person_id_random}"
+                                    class="text-primary-500 hover:underline">
                                     {user.person_id_random}
                                 </a>
                             {:else}
-                                <span class="italic text-error-500">Unlinked</span>
+                                <span class="italic text-error-500"
+                                    >Unlinked</span>
                             {/if}
                         </span>
                     </div>
-                    <div class="flex justify-between items-center p-2 bg-black/5 rounded-lg">
+                    <div
-                        <span class="font-bold opacity-50 uppercase tracking-tighter">Account Context</span>
+                        class="flex justify-between items-center p-2 bg-black/5 rounded-lg">
-                        <span class="font-mono font-bold">{user.account_id_random || '--'}</span>
+                        <span
+                            class="font-bold opacity-50 uppercase tracking-tighter"
+                            >Account Context</span>
+                        <span class="font-mono font-bold"
+                            >{user.account_id_random || '--'}</span>
                     </div>
                 </div>
             </div>
 
-            <div class="card p-6 space-y-4 shadow-xl preset-tonal-surface border border-surface-500/10">
+            <div
-                <h3 class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
+                class="card p-6 space-y-4 shadow-xl preset-tonal-surface border border-surface-500/10">
+                <h3
+                    class="h4 font-bold border-b border-surface-500/30 pb-2 flex items-center gap-2">
                     <Clock size={18} class="text-surface-500" /> Timestamps
                 </h3>
-                <div class="space-y-3 text-[10px] uppercase font-bold tracking-wider">
+                <div
+                    class="space-y-3 text-[10px] uppercase font-bold tracking-wider">
                     <div class="flex flex-col gap-1 opacity-60">
                         <span>Created On</span>
-                        <span class="text-xs text-surface-900 dark:text-surface-100">{new Date(user.created_on).toLocaleString()}</span>
+                        <span
+                            class="text-xs text-surface-900 dark:text-surface-100"
+                            >{new Date(user.created_on).toLocaleString()}</span>
                     </div>
                     {#if user.updated_on}
-                        <div class="flex flex-col gap-1 opacity-60 border-t border-surface-500/10 pt-2">
+                        <div
+                            class="flex flex-col gap-1 opacity-60 border-t border-surface-500/10 pt-2">
                             <span>Last Updated</span>
-                            <span class="text-xs text-surface-900 dark:text-surface-100">{new Date(user.updated_on).toLocaleString()}</span>
+                            <span
+                                class="text-xs text-surface-900 dark:text-surface-100"
+                                >{new Date(
+                                    user.updated_on
+                                ).toLocaleString()}</span>
                         </div>
                     {/if}
                 </div>

src/routes/events/+layout.svelte

@@ -137,15 +137,15 @@
 </svelte:head>
 
 {#if $events_loc?.ver && $events_loc?.ver !== $events_sess?.ver}
-    <div class="fixed inset-0 bg-pink-100/80 z-40">
+    <div class="fixed inset-0 z-40 bg-pink-100/80">
         <button
             type="button"
             class="
-            fixed top-16 left-0 right-0 z-50 p-4 m-8 sm:mx-16 md:mx-32
+            btn btn-lg preset-tonal-warning hover:preset-filled-success-200-800 border-warning-300 dark:border-warning-700 fixed top-16 right-0
-            btn btn-lg rounded-2xl
+            left-0 z-50 m-8
-            preset-tonal-warning hover:preset-filled-success-200-800
+            rounded-2xl border-4
-            border-4 border-warning-300 dark:border-warning-700
+            p-4 transition-all sm:mx-16
-            transition-all
+            md:mx-32
             "
             onclick={async () => {
                 // Clear the IndexedDB
@@ -171,17 +171,22 @@
 
                 location.reload();
             }}
-            title="A new version of One Sky IT's Aether Events module is available. Click to reload the page and use the latest version."
+            title="A new version of One Sky IT's Aether Events module is available. Click to reload the page and use the latest version.">
-        >
+            <RefreshCw
-            <RefreshCw size="1em" class="animate-spin shrink-0" aria-hidden="true" />
+                size="1em"
-            <span class="m-4 sm:mx-8 text-wrap">
+                class="shrink-0 animate-spin"
+                aria-hidden="true" />
+            <span class="m-4 text-wrap sm:mx-8">
                 New Events Module Version Available!<br />
                 Click to Reload<br />
-                <div class="italic text-base">
+                <div class="text-base italic">
                     You may need to sign in again.
                 </div>
             </span>
-            <RefreshCw size="1em" class="animate-spin shrink-0" aria-hidden="true" />
+            <RefreshCw
+                size="1em"
+                class="shrink-0 animate-spin"
+                aria-hidden="true" />
 
             <!-- <span class="text-xs">
             $events_loc.ver=${$events_loc?.ver}<br>
@@ -202,15 +207,14 @@
     class:iframe={$ae_loc?.iframe}
     class="
         ae_events
-        min-h-full h-full min-w-full w-full max-w-7xl
+        container m-auto flex h-full min-h-full
-        overflow-auto container
+        w-full max-w-7xl
-        flex flex-col gap-1
+        min-w-full flex-col gap-1
-        m-auto
+        overflow-auto
 
-        bg-gray-50 dark:bg-gray-900
+        bg-gray-50 text-gray-800
-        text-gray-800 dark:text-gray-200
+        dark:bg-gray-900 dark:text-gray-200
-        "
+        ">
->
     {#if !$ae_sess?.disable_sys_nav && !$ae_loc?.iframe}
         <nav
             bind:clientHeight={nav_y_height}
@@ -218,43 +222,39 @@
             class:opacity-0={yTop > 250}
             class="
                 submenu
-        print:hidden
+                absolute
-        z-20
+                top-0
-        hover:opacity-100
+                right-0
-        absolute top-0 left-0 right-0
+                left-0 z-20 m-auto flex
-        w-full max-w-7xl
+                min-h-12 w-full
-        min-h-12 md:min-h-20
+                max-w-7xl flex-col
-        p-1 px-2 pb-2 m-auto
+                items-center justify-between gap-1 rounded-b-lg
 
-        flex flex-col sm:flex-row sm:flex-wrap
+                border-b-2 bg-gray-200 p-1 px-2
-        items-center justify-between
+                pb-2 transition-all
-        gap-1
+                duration-1000
 
-        border-b-2 rounded-b-lg
+                hover:opacity-100 sm:flex-row
 
-        bg-gray-200 dark:bg-gray-800
+                sm:flex-wrap md:min-h-20
 
-        transition-all duration-1000
+                dark:bg-gray-800 print:hidden
-        "
+                ">
-        >
             <span class="justify-self-start">
                 <!-- Be sure to explain what &AElig; (Aether) means in the title text or similar! -->
                 <Satellite
                     size="1.5em"
-                    class="mx-1 inline-block text-gray-500"
+                    class="mx-1 inline-block text-gray-500" />
-                />
                 <abbr title="Aether - Events Module"> Æ Events </abbr>
             </span>
             {#if !$ae_sess?.disable_sys_header}
                 <Element_data_store
                     ds_code="hub__site__appshell_header"
-                    ds_type="html"
+                    ds_type="html" />
-                />
             {/if}
             <a
                 href="/"
-                class="btn btn-sm preset-tonal-surface border border-surface-500 hover:preset-filled-success-500"
+                class="btn btn-sm preset-tonal-surface border-surface-500 hover:preset-filled-success-500 border">
-            >
                 <House />
                 <span class="hidden md:inline"> Home </span>
             </a>
@@ -264,20 +264,27 @@
     <section
         class:iframe={$ae_loc?.iframe}
         class:pt-0={!!$ae_sess?.disable_sys_nav || $ae_loc?.iframe}
-        class:pt-12={!$ae_sess?.disable_sys_nav && nav_y_height > 0 &&  nav_y_height <= 50}
+        class:pt-12={!$ae_sess?.disable_sys_nav &&
-        class:pt-20={!$ae_sess?.disable_sys_nav && nav_y_height > 50 && nav_y_height <= 100}
+            nav_y_height > 0 &&
-        class:pt-32={!$ae_sess?.disable_sys_nav && nav_y_height > 100 && nav_y_height <= 150}
+            nav_y_height <= 50}
-        class:pt-40={!$ae_sess?.disable_sys_nav && nav_y_height > 150 && nav_y_height <= 200}
+        class:pt-20={!$ae_sess?.disable_sys_nav &&
+            nav_y_height > 50 &&
+            nav_y_height <= 100}
+        class:pt-32={!$ae_sess?.disable_sys_nav &&
+            nav_y_height > 100 &&
+            nav_y_height <= 150}
+        class:pt-40={!$ae_sess?.disable_sys_nav &&
+            nav_y_height > 150 &&
+            nav_y_height <= 200}
         class="
         main_content
-        grow
+        flex
-        px-1 md:px-2 lg:px-4
+        grow flex-col items-center
-        pb-[25vh]
-        flex flex-col gap-1
-        items-center
         justify-start
-        "
+        gap-1 px-1 pb-[25vh]
-    >
+        md:px-2
+        lg:px-4
+        ">
         <!-- Page Route Content -->
         {@render children?.()}
     </section>
@@ -285,14 +292,13 @@
     <div
         class:hidden={yTop < 500}
         class="
-        print:hidden
+        fixed
-        z-20
+        right-1
-        hover:opacity-100
+        bottom-40
-        fixed bottom-40 right-1
+        z-20 flex flex-col
 
-        flex flex-col gap-1 items-end justify-end
+        items-end justify-end gap-1 hover:opacity-100 print:hidden
-        "
+        ">
-    >
         <!-- Scroll to top button -->
         <button
             type="button"
@@ -317,8 +323,7 @@
 
                 window.parent.postMessage({ scroll_to: 0 }, '*'); // This should be
             }}
-            title="Scroll to top"
+            title="Scroll to top">
-        >
             <ArrowUp size="1em" aria-hidden="true" />
             Scroll to Top
         </button>
@@ -346,8 +351,7 @@
 
                 window.parent.postMessage({ scroll_to: scroll_y }, '*');
             }}
-            title="Scroll to bottom"
+            title="Scroll to bottom">
-        >
             <ArrowDown size="1em" aria-hidden="true" />
             Scroll to Bottom
             <!-- yTop={yTop} yScroll={yScroll} yHeight={yHeight} scroll_y={scroll_y} scrollTop={scroll_container().scrollTop} total={scroll_container().scrollTop + yHeight} -->
@@ -360,32 +364,30 @@
             class:opacity-80={yTop < 250}
             class:opacity-0={yTop > 250}
             class="
-        footer        print:hidden        z-20
+        footer absolute right-0
-        hover:opacity-100
+        bottom-0
-        absolute bottom-0 left-0 right-0
+        left-0 z-20 m-auto flex
         w-full max-w-7xl
-        p-1 m-auto
+        flex-row flex-wrap
 
-        flex flex-row flex-wrap
+        items-center justify-between gap-1
-        items-center justify-between
+        rounded-t-lg border-t-2
-        sm:flex-row md:items-center md:justify-between
+        border-gray-200 bg-gray-200 p-1
-        gap-1
+        text-xs
 
-        border-t-2 border-gray-200 dark:border-gray-600
+        transition-all duration-1000 hover:text-base
-        rounded-t-lg
+        hover:opacity-100
-        bg-gray-200 dark:bg-gray-800
+        sm:flex-row md:items-center
 
-        text-xs hover:text-base
+        md:justify-between dark:border-gray-600
 
-        transition-all duration-1000
+        dark:bg-gray-800 print:hidden
         "
-            class:ae_debug={$ae_loc.debug}
+            class:ae_debug={$ae_loc.debug}>
-        >
             <Element_data_store
                 ds_code="hub__site__appshell_footer"
                 ds_type="html"
-                class_li="grow flex flex-row justify-between"
+                class_li="grow flex flex-row justify-between" />
-            />
         </footer>
     {/if}
 </div>