==============
Questions: 1) system/.env and apps/appname/.env - need to NOT be accessable from the
web. not sure how to do this? .htaccess file? Permissions? 2) should we convert
.env to a json file; that limits public vs hidden values; name, value, comment,
public/private etc? perhaps we encrypt the file or the hidden/private values; 3)
since this is a major change - lets clearly agree on design and approach; 4)
build single md on: design, architecture, goals, requirements, limitations, etc
==============
SEE IF SOMETHING LOADED: 
[...document.styleSheets].map((sheet) => ({
    href: sheet.href,
    disabled: sheet.disabled,
})).filter((sheet) => sheet.href?.includes('/defapp/css/'));
==============
Clear cache works!!
caches.keys()
    .then((keys) => Promise.all(keys.map((key) => caches.delete(key))))
    .then(() => location.reload());
==============
Not working - display d
navbar ux not clean - makesure no nav in pages/navbar.clean,php or admin
- toggle debug window ; admin tools if they really work
==============
app entry
  → bootstrap.php
    → paths.php          loads both .env files and defines their keys
    → helpers.php        generic configuration helpers
    → assets.php         HTML asset functions, no loading side effects
    → auth.php           only if APP_SECURITY_REQUIRED is enabled
		bootstrap.php - controls order of loads
==============
app_url only works of apps/apname not system
<script src="<?= html_escape(app_url('system/js/spinner.functions.js')) ?>"></script>
==============
DONT UNDERSTAND THIS
For CPU-heavy synchronous work, convert it to small chunks, use a 
Web Worker, or at least yield between chunks:

await spinner_run(
    async () => {
        for (let index = 0; index < items.length; index++) {
            processItem(items[index]);

            if (index % 100 === 0) {
                await new Promise((resolve) => setTimeout(resolve, 0));
            }
        }
    },
    {
        message: 'Processing records...',
        timer: true,
        debugLabel: 'processRecords',
    }
);
==============
==============
==============
==============
List of all ids
==============
navbar"
sidebar
content
app-content
breadCrumbs
directoryTable_wrapper
directoryTable
footer
modal
liveToast
debugWindow
spinnerModal
spinnerContent
live-region
==============
make breadcrumbs and id
==============
define debugWindow - moveable resizeable, scrollable, always on top? has x to
close ; toggle in navbar
- Test - toggle: dark/light; sidebar, navbar, footer, debugWin, modal, toast, sendToast(error), boxall divs border
- get a list of div id's - names only; 
- loadpage with breadcrumbs change - change breadcrumbs to not be able to go
	past apps name
admin tests - 

==============
defapp.template.php - is main template
==============
Sidebar
test.sidebar.php - full sidebar (need to pull this out)
- call admin and docs pages
==============
Silent error in debug
const dbg = document.querySelector(".app-debug");
if (dbg) dbg.innerHTML += `<div>${msg}</div>`;

Additional gotcha: DOMContentLoaded + exports
Your code sets variables on DOMContentLoaded:
js
document.addEventListener("DOMContentLoaded", () => {
    appMain = document.querySelector(".app-main");
    ...
});
If another module imports these variables before DOMContentLoaded, they will be null.
This is normal, but something to be aware of.:e

app.js
import { initState } from "./spa/core.js";
import { initRouter } from "./spa/router.js";
import { loadPage } from "./spa/loader.js";
import { debug } from "./spa/debug.js";

document.addEventListener("DOMContentLoaded", () => {
    initState();
    initRouter();

    debug("SPA initialized");

    // Load default page if hash exists
    const hash = location.hash.replace("#", "");
    if (hash) {
        loadPage(hash, false);
    }
});


==============
Suggested conventions:

Object   Convention
Object                      Convention
======                      ============

Public page entry points   lower-case kebab-case or existing approved legacy pattern
PHP include partials       lower-case kebab-case, e.g. breadcrumbs.php, footer.php, toast.php
PHP classes                PascalCase.php, matching class name
PHP methods                camelCase()
JavaScript modules         lower-case kebab-case, e.g. admin-tools.js
CSS files                  lower-case kebab-case, e.g. navbar-clean.css
IDs                        lower-case kebab-case, unique in document
CSS classes                lower-case kebab-case with component prefix, e.g. app-nav-control
Legacy files                permitted temporarily but reported as warnings
==============
#what does this do?$
grep -RIn \$
    --include='*.php' \$
    --include='*.js' \$
    --include='*.css' \$
    --include='*.html' \$
    'navbar.clean.css' \$
    /home/intel145/websites/apps/defapp$