c0ckp1t 1.0.10 → 1.0.12

package/Config.mjs

@@ -0,0 +1,248 @@
+import {deepMerge, DEFAULTS} from "CoreUtils";
+/**
+ * Configuration Factory for C0ckp1t Applications
+ *
+ * Usage:
+ *   import { createConfig } from './Config.mjs';
+ *
+ *   // Local mode (all defaults)
+ *   const config = createConfig();
+ *
+ *   // CDN mode
+ *   const config = createConfig({
+ *       appEndpoint: "https://cdn.jsdelivr.net/npm/c0ckp1t@latest"
+ *   });
+ *
+ *   // Custom instance
+ *   const config = createConfig({
+ *       instanceId: "myapp",
+ *       appName: "My App",
+ *       isDev: false,
+ *   });
+ */
+// ________________________________________________________________________________
+// Default Nav Tree Builder
+// ________________________________________________________________________________
+function buildNavTree(instanceId) {
+    return {
+        icon: "fa-house",
+        depth: 0,
+        endpoint: "/",
+        isLeaf: false,
+        isRoot: true,
+        name: "",
+        path: [],
+        children: [
+            {
+                depth: 1,
+                endpoint: `/${instanceId}/connections`,
+                isLeaf: true,
+                isRoot: false,
+                path: ["connections"],
+                name: "Connections",
+                children: []
+            },
+            {
+                depth: 1,
+                endpoint: `/${instanceId}/cache`,
+                isLeaf: true,
+                isRoot: false,
+                path: ["cache"],
+                name: "Cache",
+                children: []
+            },
+            {
+                icon: "fa-network-wired",
+                depth: 1,
+                endpoint: `/${instanceId}/traffic`,
+                isLeaf: true,
+                isRoot: false,
+                path: ["traffic"],
+                name: "Traffic",
+                children: []
+            },
+            {
+                icon: "fa-bell",
+                depth: 1,
+                endpoint: `/${instanceId}/notifies`,
+                isLeaf: true,
+                isRoot: false,
+                path: ["notifies"],
+                name: "Notifies",
+                children: []
+            },
+            {
+                icon: "fa-info",
+                depth: 1,
+                endpoint: `/${instanceId}/docs`,
+                isLeaf: true,
+                isRoot: false,
+                path: ["docs"],
+                name: "Documentation",
+                children: []
+            },
+            {
+                icon: "fa-info",
+                depth: 1,
+                endpoint: `/${instanceId}/components`,
+                isLeaf: true,
+                isRoot: false,
+                path: ["components"],
+                name: "Components",
+                children: [
+                    {
+                        icon: "fa-info",
+                        depth: 2,
+                        endpoint: `/${instanceId}/components/bootstrap`,
+                        isLeaf: true,
+                        isRoot: false,
+                        path: ["bootstrap"],
+                        name: "Bootstrap",
+                        children: []
+                    },
+                    {
+                        icon: "fa-info",
+                        depth: 2,
+                        endpoint: `/${instanceId}/components/basic`,
+                        isLeaf: true,
+                        isRoot: false,
+                        path: ["basic"],
+                        name: "Basic",
+                        children: []
+                    },
+                    {
+                        icon: "fa-info",
+                        depth: 2,
+                        endpoint: `/${instanceId}/components/advanced`,
+                        isLeaf: true,
+                        isRoot: false,
+                        path: ["advanced"],
+                        name: "Advanced",
+                        children: []
+                    },
+                    {
+                        icon: "fa-info",
+                        depth: 2,
+                        endpoint: `/${instanceId}/components/theme`,
+                        isLeaf: true,
+                        isRoot: false,
+                        path: ["theme"],
+                        name: "Theme",
+                        children: []
+                    },
+                ]
+            }
+        ]
+    };
+}
+
+// ________________________________________________________________________________
+// Routes Builder
+// ________________________________________________________________________________
+function buildRoutes(instanceId = "default", prefix = "") {
+    return [
+        { path: '/', name: 'root', children: [
+                {path: '', redirect: `/${instanceId}/docs/Introduction.md`},
+                {path: `${instanceId}`, children: [
+                        {path: 'docs', redirect: `/${instanceId}/docs/Introduction.md`},
+                        {path: 'docs/:pathMatch(.*)*', location: `${prefix}/core/pages/Documentation.vue`},
+                        {path: 'connections', location: `${prefix}/core/pages/Connections.vue`},
+                        {path: 'connections/:id', location: `${prefix}/core/pages/Connection.vue`},
+                        {path: 'cache', location: `${prefix}/core/pages/Cache.vue`},
+                        {path: 'traffic', location: `${prefix}/core/pages/Traffic.vue`},
+                        {path: 'notifies', location: `${prefix}/core/pages/Notifies.vue`},
+                        {path: 'components', location: `${prefix}/core/pages/frontend/Components.vue`, children: [
+                                {path: 'basic', location: `${prefix}/core/pages/frontend/ComponentsBasic.vue`},
+                                {path: 'advanced', location: `${prefix}/core/pages/frontend/ComponentsAdv.vue`},
+                                {path: 'theme', location: `${prefix}/core/pages/frontend/Theme.vue`},
+                                {path: 'bootstrap', location: `${prefix}/core/pages/frontend/Bootstrap.vue`},
+                            ]},
+                    ]}
+            ] },
+        { path: '/:pathMatch(.*)*', name: '404', location: `${prefix}/core/Page404.vue` }
+    ];
+}
+
+// ________________________________________________________________________________
+// Components
+// ________________________________________________________________________________
+/**
+ * Return the default Vue components
+ * using sha1 hashes
+ * @returns {Object}
+ */
+export function defaultVueComponents(prefix = "") {
+    return {
+        ExecButton: { path: `${prefix}/components/ExecButton.vue`, hash: `97e3d2ce89808c5a69f41404e1337f743015f0cc` },
+        XInput: { path: `${prefix}/components/xinput.vue`, hash: `cd47d7d038316367df6fd7e265aa3625b72a7777` },
+        XInput2: { path: `${prefix}/components/xinput2.vue`, hash: `320e52ac991baebded7c2a9f52a4cfc2cde47b55` },
+        XLabel: { path: `${prefix}/components/xlabel.vue`, hash: `90a9837aa8e06f1d3a5b7601337afd78a872d181` },
+        XDropdown: { path: `${prefix}/components/xdropdown.vue`, hash: `52b29b72fd6512eefccd9caa76e26dd91d9f9f9e` },
+        XDropdown2: { path: `${prefix}/components/xdropdown2.vue`, hash: `e7b163eda42fb7e1a6f07b011c423f8f275eb65d` },
+        XSection: { path: `${prefix}/components/xsection.vue`, hash: `27285d606f57d13f80156bb11cd34449f88df950` },
+        XTableOpen: { path: `${prefix}/components/xtable-open.vue`, hash: `a1b9a4f670817978022a4c596e2e2f89dd4568c2` },
+        XCollapse: { path: `${prefix}/components/xcollapse.vue`, hash: `ba1479bd1080a4fa5abdf6c91c7328ae679f78e6` },
+        XToggle: { path: `${prefix}/components/xtoggle.vue`, hash: `2f6871d2d3069ac8f35b6bf76de6c2109f42d9d1` },
+        XToggle3: { path: `${prefix}/components/xtoggle3.vue`, hash: `61d0464e6ed9983e817eb0cde928dceb7c0fdc75` },
+        XCheck: { path: `${prefix}/components/xcheck.vue`, hash: `ee0d6b30600fb41589123f6d66f2791f1332d4f7` },
+        XCheckbox: { path: `${prefix}/components/xcheckbox.vue`, hash: `a290c0cbb7bffce83c235dd5a1c98ed9c441a5b0` },
+        XTextarea: { path: `${prefix}/components/xtextarea.vue`, hash: `f8bb08419082aa5443630ab07172674b50c7a248` },
+        XHidden: { path: `${prefix}/components/xhidden.vue`, hash: `ecb396e12dd894040e715c0854275e4d5016fcb9` },
+        XCode: { path: `${prefix}/components/xcode.vue`, hash: `4d9d9165fea0539c9a983fcdffae8dedcfd537ae` },
+        XButton: { path: `${prefix}/components/xbutton.vue`, hash: `2e956caa47e46377ea5a809f7438d0fc38be73b9` },
+        XTabs: { path: `${prefix}/components/xtabs.vue`, hash: `83dc219106bdc86ae86dcd16cf95ebd7f11bc952` },
+        XKv: { path: `${prefix}/components/xkv.vue`, hash: `8951d3a5e3786cfc9c705b13c1f71e3f90dd2552` },
+        XNav: { path: `${prefix}/components/xnav.vue`, hash: `8d51c73e5716deed3577652e362c50526ddbe4e1` },
+        XMap: { path: `${prefix}/components/xmap.vue`, hash: `daee357d9e2ef96df0166dd7add0339d46a1cc01` },
+        XList: { path: `${prefix}/components/xlist.vue`, hash: `217ced04a333238d169c300a721b75f0ddd5e95b` },
+        XJson: { path: `${prefix}/components/xjson.vue`, hash: `0a3ef6265b4070b0f002d659776c02756cc1da5a` },
+        XCard: { path: `${prefix}/components/xcard.vue`, hash: `de3fbb23ae7b00d4c90a717dd361cb9315e9ded6` },
+        XCardH: { path: `${prefix}/components/xcard-h.vue`, hash: `de4d42f1056c5d2b8431f15e6b1180d9f9898ac2` },
+        XColor: { path: `${prefix}/components/xcolor.vue`, hash: `9bf9497ff66e213277f17af290c21c0a35752510` },
+        "v-ace-editor": { path: `${prefix}/components/vue3-ace-editor.vue`, hash: `70ce4a39152af5cf0f7cb6b1d4fdafc8b6225edc` },
+        XMarkdown: { path: `${prefix}/components/xmarkdown.vue`, hash: `15f835547fab8a8c8aad47d72640c8e918a7b9da` },
+        XSound: { path: `${prefix}/components/xsound.vue`, hash: `3e8ad4aa3c767f757dd49b99aa6f961547caf970` },
+        XUpload: { path: `${prefix}/components/xupload.vue`, hash: `7a872277e0047fca11e950efe08f2bffa670abdb` },
+        XTree: { path: `${prefix}/components/xtree.vue`, hash: `3b6534e86996c48ab05072a9b793ecc78d83a0eb` },
+        CodeMirror: { path: `${prefix}/components/code-mirror.vue`, hash: `3ce1028adb75831e01c4264d5764c14f60a1bd00` },
+        XTerminal: { path: `${prefix}/components/xterminal.vue`, hash: `1c01f92c0a08bd4937f9768a1d49f12a9a84feea` },
+    }
+}
+
+
+// ________________________________________________________________________________
+// Factory
+// ________________________________________________________________________________
+/**
+ * Create a C0ckp1t configuration object.
+ *
+ * @param {Object} overrides - Properties to override.
+ * @returns {Object} The configuration object.
+ */
+export function createConfig(overrides = {}) {
+    // 1. Separate root/routes from scalar overrides so deepMerge handles scalars
+    const { root: rootOverride, components: componentsOverride, routes: routesOverride, ...scalarOverrides } = overrides;
+
+    // 2. Merge scalar defaults with overrides
+    const merged = deepMerge(DEFAULTS, scalarOverrides);
+
+    // 3. Resolve the key variables that nav/routes depend on
+    const { instanceId, routePrefix, componentPrefix } = merged;
+
+    // 4. Build or use provided root nav tree
+    const root = rootOverride !== undefined ? rootOverride : buildNavTree(instanceId);
+
+    // 5. Build or use provided routes
+    const routes = routesOverride !== undefined ? routesOverride : buildRoutes(instanceId, routePrefix);
+
+    const components = componentsOverride !== undefined ? componentsOverride : defaultVueComponents(componentPrefix);
+    // 6. Assemble final config
+    return {
+        ...merged,
+        root,
+        routes,
+        components
+    };
+}
+
+export default createConfig;

package/README.md

@@ -45,12 +45,15 @@ tar -zxvf c0ckp1t-1.0.2.tgz
 # package/js_ext/Makefile
 # package/css/bootstrap-c0ckp1t.css
 # ...
+
+# to expand to webroot directory
+tar -zxvf c0ckp1t-1.0.2.tgz --strip-components=1 -C webroot
 ```
 
 
 ## Releases
 
-* 1.0.10 - Beta: fixing cdn index-cdn.html making sure it works with jsfiddle.net
+* 1.0.12 - Beta: fixing cdn index-cdn.html making sure it works with jsfiddle.net
   * Had to publish many times to get CDN working with different configurations
 * 1.0.2 - Beta: fixing cdn index-cdn.html example
 * 1.0.1 - Beta: removing `Constants.mjs` dependencies

package/components/code-mirror.vue

@@ -73,6 +73,9 @@ let _ro = null;
 let _contentBackup = '';
 let _isSettingContent = false;
 
+let _mounted = false;
+let _initAborted = false;
+
 // CodeMirror modules - loaded dynamically
 let EditorView = null;
 let EditorState = null;
@@ -215,6 +218,12 @@ watch(() => local.currentReadonly, (val) => {
 });
 
 onMounted(async () => {
+  _mounted = true;
+  // --- guard helper ---
+  const alive = () => _mounted && root.value != null;
+  if (!alive()) return;
+
+
   // Load core CodeMirror modules
   const [stateModule, viewModule, basicSetupModule] = await Promise.all([
     import('https://esm.sh/@codemirror/state'),
@@ -222,6 +231,9 @@ onMounted(async () => {
     import('https://esm.sh/codemirror'),
   ]);
 
+  // Bail if component unmounted during async load
+  if (!alive()) return;
+
   EditorState = stateModule.EditorState;
   Compartment = stateModule.Compartment;
   EditorView = viewModule.EditorView;
@@ -239,6 +251,9 @@ onMounted(async () => {
     getThemeExtension(props.theme),
   ]);
 
+  // Bail again after second async gap
+  if (!alive()) return;
+
   const extensions = [
     basicSetup,
     languageCompartment.of(langExt),
@@ -301,14 +316,14 @@ onMounted(async () => {
 });
 
 onBeforeUnmount(() => {
-  if (_ro) {
-    _ro.disconnect();
-    _ro = null;
-  }
-  if (_editor) {
-    _editor.destroy();
-    _editor = null;
-  }
+  _mounted = false;
+
+  _ro?.disconnect();
+  _ro = null;
+
+  _editor?.destroy();
+  _editor = null;
+
 });
 
 // Public methods

package/components/tools.sh

@@ -0,0 +1,9 @@
+#!/usr/bin/env bash
+
+# tools.sh - Compute the SHA-1 hash of each file in this directory (non-recursive).
+SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+
+for file in "$SCRIPT_DIR"/*; do
+    [ -f "$file" ] || continue
+    sha1sum "$file"
+done

package/components/xmarkdown.vue

@@ -17,7 +17,7 @@ import {reactive, ref, markRaw, onMounted,  watch, computed, onErrorCaptured, de
 import {getLogger} from "Logging"
 import {md} from "./Markdown.mjs"
 
-import CodeItem from "/core/sfc/code-item.vue"
+import CodeItem from "../core/sfc/code-item.vue"
 
 import {
   replaceHrefLinks,

package/core/CoreUtils.mjs

@@ -11,6 +11,9 @@ export function findHostnamePortProtocol() {
     return {hostname, port, protocol, isSecure, serverUrl}
 }
 
+// ________________________________________________________________________________
+// Island Configuration
+// ________________________________________________________________________________
 /**
  * Validate and set defaults for the island config object.
  * @param config
@@ -35,43 +38,108 @@ export function validateIslandConfig(config) {
     return config
 }
 
+// ________________________________________________________________________________
+// Application Configuration
+// ________________________________________________________________________________
+export const DEFAULTS = {
+    isDev: true,
+    // XMLHttpRequest from a different domain cannot set cookie values for their own
+    // domain unless withCredentials is set to true before making the request.
+    // https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/withCredentials
+    WITH_CREDENTIALS: false,
+
+    defaultInstanceId: "default",
+    instanceId: "default",
+    type: "LOCAL",
+    // Determines GlobalStore.name
+    appName: "C0ckp1t Application",
+    // Used for default routes prefix (used only in config)
+    routePrefix: "",
+    // Used for default components prefix (used only in config)
+    componentPrefix: "",
+    // Main entry point
+    appMainComponent: "/core/PageMain.vue",
+    // Used for requestion app components and files (GlobalStore.appEndpoint)
+    appEndpoint: "",
+
+    // Nav Configuration
+    navCloseLogo: "/core/img/logo_v1.svg",
+    navOpenLogo: "/core/img/logo_v2.svg",
+    navHasSearch: false,
+    navHasThemeSel: true,
+
+    // Determine if VueRouter is createWebHashHistory or createWebHistory
+    vueRouterModeIsHash: true,
+
+    // Logger Config (see Logging.mjs)
+    defaultLogLevel: "INFO",
+    defaultLoggerLevels: {
+        "GlobalStore.mjs": "INFO",
+        "VueUtils.mjs": "INFO",
+        "Connection.mjs": "INFO",
+        "default": "INFO",
+        "anonymous": "INFO",
+        "demo": "INFO"
+    },
+};
+
+
 /**
- * Return the default Vue components
- * @returns {Object}
+ * Validate and set defaults for the config object.
+ * @param config
+ * @returns {*}
  */
-export function defaultVueComponents() {
-    return {
-        ExecButton: `/components/ExecButton.vue`,
-        XInput: `/components/xinput.vue`,
-        XLabel: `/components/xlabel.vue`,
-        XDropdown: `/components/xdropdown.vue`,
-        XDropdown2: `/components/xdropdown2.vue`,
-        XSection: `/components/xsection.vue`,
-        XTableOpen: `/components/xtable-open.vue`,
-        XCollapse: `/components/xcollapse.vue`,
-        XToggle: `/components/xtoggle.vue`,
-        XToggle3: `/components/xtoggle3.vue`,
-        XCheck: `/components/xcheck.vue`,
-        XCheckbox: `/components/xcheckbox.vue`,
-        XTextarea: `/components/xtextarea.vue`,
-        XHidden: `/components/xhidden.vue`,
-
-        XTabs: `/components/xtabs.vue`,
-        XKv: `/components/xkv.vue`,
-        XNav: `/components/xnav.vue`,
-        XMap: `/components/xmap.vue`,
-        XList: `/components/xlist.vue`,
-        XJson: `/components/xjson.vue`,
-        XCard: `/components/xcard.vue`,
-        XCardH: `/components/xcard-h.vue`,
-        XColor: `/components/xcolor.vue`,
+export function validateAppConfig(config) {
+    if (!config) {
+        throw new Error("config is required")
+    }
+    if (typeof config !== 'object') {
+        throw new Error("Config must be an object must was `" + typeof config + "`")
+    }
+    if (!Array.isArray(config?.routes) || config.routes.length === 0) {
+        config.routes = []
+    }
+    if (typeof config.components !== 'object' || config.components === null) {
+        config.components = {}
+    }
 
-        "v-ace-editor": `/components/vue3-ace-editor.vue`,
-        XMarkdown: `/components/xmarkdown.vue`,
-        XSound: `/components/xsound.vue`,
-        XUpload: `/components/xupload.vue`,
-        XTree: `/components/xtree.vue`,
-        CodeMirror: `/components/CodeMirror.vue`,
-        XTerminal: `/components/XTerminal.vue`,
+    if (typeof config.instanceId !== `string` || config.instanceId.trim() === ``) {
+        config.instanceId = DEFAULTS.instanceId
+    }
+    if (typeof config.type !== `string` || config.type.trim() === ``) {
+        config.type = DEFAULTS.type
     }
+
+    return config
 }
+
+
+// ________________________________________________________________________________
+// Deep Merge Utility
+// ________________________________________________________________________________
+/**
+ * Deep merge source into target. Returns a new object.
+ * - Objects are recursively merged (source keys override target keys)
+ * - Arrays are replaced entirely (source array wins)
+ * - Scalars are replaced (source wins)
+ */
+export function deepMerge(target, source) {
+    const result = { ...target };
+    for (const key of Object.keys(source)) {
+        const sourceVal = source[key];
+        const targetVal = target[key];
+        if (
+            sourceVal !== null &&
+            typeof sourceVal === 'object' &&
+            !Array.isArray(sourceVal) &&
+            targetVal !== null &&
+            typeof targetVal === 'object' &&
+            !Array.isArray(targetVal)
+        ) {
+            result[key] = deepMerge(targetVal, sourceVal);
+        } else {
+            result[key] = sourceVal;
+        }
+    }
+    return result;
+}

package/core/GlobalStore.mjs

@@ -8,8 +8,8 @@ import {markRaw, reactive, watch, defineAsyncComponent, createApp} from 'vue'
 import * as VueRouter from 'vue-router'
 import {getLogger} from 'Logging';
 import {transformRoutes, loadModule, options} from "VueUtils";
-import {validateIslandConfig, findHostnamePortProtocol, defaultVueComponents} from 'CoreUtils'
-import {substrAfterFirstSlash} from "JsUtils";
+import {validateIslandConfig, findHostnamePortProtocol, validateAppConfig} from 'CoreUtils'
+import {substrAfterFirstSlash, extractLastPath} from "JsUtils";
 
 import IslandDefault from 'IslandDefault'
 import Island from 'Island'
@@ -46,6 +46,7 @@ export const store = reactive({
     name: "C0ckp1t",
     id: LOG_HEADER,
     config: null,
+    appEndpoint: "",
     serverInfo: findHostnamePortProtocol(),
 
     // ________________________________________________________________________________
@@ -217,8 +218,15 @@ export const api = {
     },
 
     routeByEndpoint: async (endpoint) => {
-        logger.info(`[routeByEndpoint] - endpoint=${endpoint}`)
+        const path = endpoint.split("/")
+        logger.info(`[routeByEndpoint] - endpoint=${endpoint}, path=${path}`)
         try {
+            if(path.length > 3) {
+                extractLastPath(endpoint)
+                document.title = `${path[2]}-${path[3]}`
+            } else if (path.length === 3) {
+                document.title = `${path[2]}`
+            }
             await store.router.push(endpoint)
         } catch (err) {
             console.error("Failed to navigate:", err)
@@ -283,7 +291,7 @@ export const api = {
             return null
         }
 
-        validateIslandConfig(config)
+        validateAppConfig(config)
         //________________________________________________________________________________
         // Create Vue Application
         //________________________________________________________________________________
@@ -301,21 +309,21 @@ export const api = {
         //________________________________________________________________________________
         // Create Default Island
         //________________________________________________________________________________
+        config.routes ??= []
         if(config.routes.length === 0) {
             logger.warn(`config.routes is empty`)
         }
-        config.appEndpoint = config.appEndpoint ?? ""
+        store.appEndpoint = config.appEndpoint ?? ""
         store.defaultInstanceId = config.instanceId ?? "default"
         store.name = config.appName ?? "C0ckp1t"
         store.config = config
         const vueRouterModeIsHash = config.vueRouterModeIsHash ?? true
 
+        // Load default island
         const decoratedIslandConfig = {
             ...config,
             SERVER_API_URL: store.serverInfo.serverUrl,
         }
-
-        // Load default island first
         const islandDefault = new IslandDefault(api, decoratedIslandConfig)
         store.r[islandDefault.instanceId] = islandDefault
         await islandDefault.init()
@@ -328,12 +336,12 @@ export const api = {
         store.router = markRaw(router)
 
         // Main entry point for the app, this will load the main application
-        app.component('app-main', createAsyncComponent(() => api.loadModule(`${config.appEndpoint}/core/PageMain.vue`)))
+        app.component('app-main', createAsyncComponent(() => api.loadModule(config.appMainComponent)))
 
         // Configure C0ckp1t Vue Components
-        const vueComponents = defaultVueComponents()
+        const vueComponents = config.components ?? {}
         for (const [key, value] of Object.entries(vueComponents)) {
-            app.component(key, defineAsyncComponent(() => api.loadModule(`${config.appEndpoint}${value}`)))
+            app.component(key, defineAsyncComponent(() => api.loadModule(`${value.path}`)))
         }
 
         app.use(router)

package/core/Island.mjs

@@ -39,6 +39,7 @@ export default class Island {
     constructor(apiMain, config) {
 
         this.instanceId = config.instanceId
+        this.SERVER_API_URL = config.SERVER_API_URL
 
         this.LOG_HEADER = `${this.instanceId}`;
         this.logger = getLogger(this.LOG_HEADER);
@@ -184,6 +185,7 @@ export default class Island {
                 await this.apiMain.insertRoutes(`/${this.instanceId}${node.endpoint}`, config)
             } else {
                 this.logger.warn(`[node=${node.name}] - failed to load config`)
+                this.logger.warn(`path=${node.config.path}`)
                 this.logger.warn(`endpoint=/${this.instanceId}${node.endpoint}`)
                 this.logger.warn(`depth=${node.depth}`)
                 this.logger.warn(`accessLevel=${this.store.context.accessLevel}`)
@@ -199,6 +201,11 @@ export default class Island {
                             [{"path": node.name, "location": "/core/nodes/_api.vue"}]
                         )
                     }
+                } else if(node.depth === 2 && node.endpoint.startsWith(`/wf/`)) {
+                    this.logger.warn(`insert admin`)
+                    await this.apiMain.insertRoutes(`/${this.instanceId}${node.endpoint}`,
+                        [{"path": node.name, "location": `/${this.instanceId}/v3/actions/root/admin/_admin.vue`}],
+                    )
                 }
             }
             // NO CONFIG FOUND
@@ -214,6 +221,11 @@ export default class Island {
                     )
                 }
             }
+            if(node.name === "api") {
+                await this.apiMain.insertRoutes(`/${this.instanceId}${node.endpoint}`,
+                    [{"path": node.name, "location": "/core/nodes/place-holder.vue"}]
+                )
+            }
         }
 
         if (node.children) {
@@ -298,11 +310,11 @@ export default class Island {
     // HTTP
     // ________________________________________________________________________________
     resolver = async (endpoint, type) => {
-        this.logger.info(`[resolver] -  endpoint=${endpoint}`)
+        this.logger.debug(`[resolver] -  endpoint=${endpoint}`)
 
         if (endpoint.startsWith('/c0ckp1t/')) {
             const endpointAdjusted = endpoint.replace("/c0ckp1t/", `/`)
-            const path = `${this.config.SERVER_API_URL}${endpointAdjusted}`;
+            const path = `${this.SERVER_API_URL}${endpointAdjusted}`;
             this.logger.debug(`[resolver] - endpointAdjusted=${path}`);
             const res = await Http.getText(path)
             if (res.isOk) {
@@ -407,7 +419,7 @@ export default class Island {
 // HELPER METHODS
 // ________________________________________________________________________________
 function adjustNode(node) {
-    node._expanded = true;
+    node._expanded ??= true;
     node.children.forEach((child) => {
         adjustNode(child);
     });

package/core/IslandDefault.mjs

@@ -210,7 +210,7 @@ export default class IslandDefault {
 // HELPER METHODS
 // ________________________________________________________________________________
 function adjustNode(node) {
-    node._expanded = true;
+    node._expanded ??= true;
     node.children.forEach((child) => {
         adjustNode(child);
     });

package/core/PageMain.vue

@@ -13,7 +13,7 @@ import {getLogger} from "Logging";
 import {api as apiTheme, store as storeTheme} from "./Theme.mjs"
 import PageFallback from "./PageFallback.vue"
 import MainOffcanvas from "./main-offcanvas.vue";
-
+import NotifyToast from "./notify/toast.vue";
 
 // ________________________________________________________________________________
 // LOGGING
@@ -29,8 +29,12 @@ logger.debug("[INIT]")
 const local = reactive({
   id: LOG_HEADER,
   toggle: false,
-  items: [
-  ]
+  items: [ ],
+
+  navCloseLogo: storeMain.config?.navCloseLogo ?? "/img/logo_v1.svg",
+  navOpenLogo: storeMain.config?.navOpenLogo ?? "/img/logo_v2.svg",
+  navHasSearch: storeMain.config?.navHasSearch ?? true,
+  navHasThemeSel: storeMain.config?.navHasThemeSel ?? true,
 })
 
 
@@ -95,8 +99,8 @@ const mainContentStyle = computed(() => ({
 
         <a class="navbar-brand" @click.prevent="apiMain.selectLogo()" >
           <span  class="me-2 text-warning" v-if="storeMain.showSidebar"><<</span>
-          <img src="./img/logo_v1.svg" alt="Logo" height="24" class="d-inline-block align-text-top" v-if="!storeMain.showSidebar">
-          <img src="./img/logo_v2.svg" alt="Logo" height="24" class="d-inline-block align-text-top" v-else>
+          <img :src="local.navCloseLogo" alt="Logo" height="24" class="d-inline-block align-text-top" v-if="!storeMain.showSidebar && local.navCloseLogo">
+          <img :src="local.navOpenLogo" alt="Logo" height="24" class="d-inline-block align-text-top" v-if="storeMain.showSidebar && local.navOpenLogo">
           <span class="text-warning fw-bold ms-2 brand-text">{{ storeMain.name }}</span>
         </a>
 
@@ -116,13 +120,13 @@ const mainContentStyle = computed(() => ({
           </ul>
 
           <form class="d-flex">
-            <input class="form-control me-2" type="search" placeholder="Search" v-model="local.searchQuery">
-            <button class="btn btn-outline-secondary me-2" type="button" @click="storeTheme.theme = storeTheme.theme === 'dark' ? 'light' : 'dark'" title="Toggle theme">
-              <i class="fa-solid" :class="storeTheme.theme === 'dark' ? 'fa-sun' : 'fa-moon'"></i>
-            </button>
-            <button class="btn btn-outline-secondary" type="submit">
+            <input v-if="local.navHasSearch" class="form-control me-2" type="search" placeholder="Search" v-model="local.searchQuery">
+            <button v-if="local.navHasSearch" class="btn btn-outline-secondary" type="submit">
               <i class="fa-solid fa-search"></i>
             </button>
+            <button v-if="local.navHasThemeSel" class="btn btn-outline-secondary me-2" type="button" @click="storeTheme.theme = storeTheme.theme === 'dark' ? 'light' : 'dark'" title="Toggle theme">
+              <i class="fa-solid" :class="storeTheme.theme === 'dark' ? 'fa-sun' : 'fa-moon'"></i>
+            </button>
           </form>
 
         </div>
@@ -135,6 +139,7 @@ const mainContentStyle = computed(() => ({
             <RouterView/>
     </main>
 
+    <NotifyToast/>
     <!-- ==========  FOOTER ========== -->
     <footer class="container-fluid p-4 bg-body-tertiary border-top">
       <div class="row mt-4 align-items-center justify-content-center">

package/core/img/logo_v2.svg

@@ -58,7 +58,7 @@
        cy="129.01283"
        cx="97.967125"
        id="head"
-       style="fill:#ffdf11;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.264583;stroke-opacity:1" />
+       style="fill:#c4a900;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.264583;stroke-opacity:1" />
     <path
        id="lefEye2"
        d="M 62.802996,126.14677 C 83.82199,101.23898 83.964978,101.06953 83.964978,101.06953"
@@ -86,9 +86,9 @@
        height="8.6218405"
        width="19.292933"
        id="neck1"
-       style="fill:#ffdf11;fill-opacity:1;stroke:#000000;stroke-width:0.264951;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+       style="fill:#c4a900;fill-opacity:1;stroke:#000000;stroke-width:0.264951;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
     <rect
-       style="fill:#ffdf11;fill-opacity:1;stroke:#000000;stroke-width:0.222;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       style="fill:#c4a900;fill-opacity:1;stroke:#000000;stroke-width:0.222;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
        id="neck2"
        width="12.705888"
        height="6.1260414"

package/core/nodes/_api.vue

@@ -51,7 +51,7 @@ const local = reactive({
 <template>
 
   <div class="_api" >
-    <x-section extra="fs-4" :visible="true" :k="`API Node for endpoint=${adminEndpoint}`" v-if="selectedNode">
+    <x-section :level="4" :visible="true" :k="`API Node for endpoint=${adminEndpoint}`" v-if="selectedNode">
 
       <template v-slot:header>
         <ExecButton icon="fa-info" @callback="apiMain.selectDocumentation(storeMain.documentation)"></ExecButton>

package/core/nodes/place-holder.vue

@@ -7,7 +7,7 @@
 import {reactive, onMounted, onUnmounted, defineAsyncComponent, watch, onErrorCaptured, computed} from 'vue'
 import {store as storeMain, api as apiMain} from 'GlobalStore'
 
-const InfoApi = defineAsyncComponent(() => import("../components/info-api.vue"))
+const InfoApi = defineAsyncComponent(() => import("./_api.vue"))
 
 const selectedNode = computed(() => {
   return storeMain.r[storeMain.selectedInstId]?.store?.selectedNode
@@ -17,22 +17,13 @@ const selectedNode = computed(() => {
 
 
 <template>
+  <div class="place-holder">
+    <x-section :level="3" :visible="true" :k="`Place Holder Node (endpoint=${selectedNode.endpoint})`" v-if="selectedNode">
 
-  <div class="place-holder" v-if="selectedNode">
-    <x-section extra="fs-4" :visible="true" :k="`Place Holder Node (endpoint=${selectedNode.endpoint})`">
-
-      <template v-slot:header>
-        <x-button icon="fa-info" @callback="apiMain.selectDocumentation(storeMain.documentation)"></x-button>
-      </template>
-
-      <x-section extra="fs-4" :visible="false" :k="`API Information`">
-        <info-api :endpoint="selectedNode.endpoint" :instanceId="storeMain.selectedInstId"></info-api>
-      </x-section>
-
-      <x-section extra="fs-4" :visible="false" :k="`Node Information`">
+      <x-section :level="4" :visible="true" :k="`Node Information`">
         <div class="row mt-4 mb-4">
-          <x-collapse k="Node Entity">
-            <x-json :obj="selectedNode"></x-json>
+          <x-collapse k="Node Entity" :modelValue="true">
+            <x-json :obj="selectedNode"  :expanded="true"></x-json>
           </x-collapse>
         </div>
       </x-section>

package/core/notify/toast.vue

@@ -136,7 +136,7 @@ onMounted(async () => { await init() })
 
 <style scoped>
 .toast {
-    background-color: rgba(255,255,255,.95);
+
 }
 
 /** NOTIFY */

package/core/pages/frontend/ComponentsAdv.vue

@@ -13,8 +13,6 @@ import {reactive, computed, ref, onMounted, onUnmounted, defineAsyncComponent, w
 import {getLogger} from "Logging";
 // !# C0CKP1T_START imports
 import ComponentView from "./component-view.vue";
-import XTerminal from "/components/xterminal.vue";
-import CodeMirror from "/components/code-mirror.vue";
 // !# C0CKP1T_END imports
 
 // ________________________________________________________________________________

package/core/sfc/info-api.vue

@@ -146,12 +146,12 @@ onMounted(async () => { init() })
 .functions {
   border: 2px solid black;
   padding: 4px;
-  background-color: #d0d7dd;
+  background-color: var(--bs-secondary-bg)
 }
 
 .functions2 {
   border: 2px solid black;
   padding: 4px;
-  background-color: #d4c9c3;
+  background-color: var(--bs-secondary-bg)
 }
 </style>

package/docs/Issues.md

@@ -0,0 +1,13 @@
+
+
+if cannot read PageMain
+
+because it returns gargabe I.e
+
+```json
+<!doctype html>
+<html lang="en">
+    <head>
+```
+
+the app does throw error and doesn't work. Need better error checking

package/index.html

@@ -57,15 +57,18 @@
 
 <script type="module">
 import {init as initLogger} from 'Logging';
-import {api as apiMain} from 'GlobalStore'
-import DefaultConfig from './DefaultConfig.mjs'
+import {api as apiMain} from 'GlobalStore';
+// Application Configuration
+import { createConfig } from './Config.mjs';
+// Islands
 import ConfigAdmin from './ConfigAdmin.mjs'
 import ConfigAnonymous from './ConfigAnonymous.mjs'
 import ConfigDemo from './c0ckp1t-demo/C0ckp1tConfig.mjs'
-
-initLogger(DefaultConfig)
-await apiMain.init("app-default", DefaultConfig)
-
+// Create Application
+const config = createConfig();
+initLogger(config)
+await apiMain.init("app-default", config)
+// Create Islands
 await apiMain.registerIsland( ConfigAdmin)
 await apiMain.registerIsland(ConfigAnonymous)
 await apiMain.registerIsland(ConfigDemo)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "c0ckp1t",
-  "version": "1.0.10",
+  "version": "1.0.12",
   "description": "A Vue 3 zero-build web dashboard framework with Islands architecture, WebSocket backends, and reusable UI components",
   "type": "module",
   "license": "Apache-2.0",
@@ -26,6 +26,7 @@
     "index-cdn.html",
     "index.html",
     "style.css",
+    "Config.mjs",
     "DefaultConfig.mjs",
     "CdnConfig.mjs",
     "favicon.ico",

package/CdnConfig.mjs

@@ -1,177 +0,0 @@
-/**
- * Default Configuration for a C0ckp1t Application
- */
-// ________________________________________________________________________________
-// Properties
-// ________________________________________________________________________________
-// XMLHttpRequest from a different domain cannot set cookie values for their own
-// domain unless withCredentials is set to true before making the request.
-// https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/withCredentials
-const WITH_CREDENTIALS = false
-// Note: VueUtils requires this to be 'default'
-const instanceId =  "default";
-// Used for requestion app components and files
-const appEndpoint = "https://cdn.jsdelivr.net/npm/c0ckp1t@latest";
-
-// ________________________________________________________________________________
-// GLOBAL CONSTANTS
-// ________________________________________________________________________________
-export default {
-    isDev: true,
-    WITH_CREDENTIALS: WITH_CREDENTIALS,
-
-    // logger config
-    defaultLogLevel: "INFO",
-    defaultLoggerLevels: {
-        "GlobalStore.mjs": "INFO",
-        "VueUtils.mjs": "INFO",
-        "Connection.mjs": "INFO",
-        "default": "INFO",
-        "anonymous": "INFO",
-        "demo": "INFO"
-    },
-
-    instanceId: instanceId,
-    type: "LOCAL",
-    appName:  "C0ckp1t App",
-    appEndpoint: appEndpoint,
-
-    // This creates the navigation tree
-    root: {
-        icon: "fa-house",
-        depth: 0,
-        endpoint: "/",
-        isLeaf: false,
-        isRoot: true,
-        name: "",
-        path: [],
-        children: [
-            {
-                depth: 1,
-                endpoint: `/${instanceId}/connections`,
-                isLeaf: true,
-                isRoot: false,
-                path: ["connections"],
-                name: "Connections",
-                children: []
-            },
-            {
-                depth: 1,
-                endpoint: `/${instanceId}/cache`,
-                isLeaf: true,
-                isRoot: false,
-                path: ["cache"],
-                name: "Cache",
-                children: []
-            },
-            {
-                icon: "fa-network-wired",
-                depth: 1,
-                endpoint: `/${instanceId}/traffic`,
-                isLeaf: true,
-                isRoot: false,
-                path: ["traffic"],
-                name: "Traffic",
-                children: []
-            },
-            {
-                icon: "fa-bell",
-                depth: 1,
-                endpoint: `/${instanceId}/notifies`,
-                isLeaf: true,
-                isRoot: false,
-                path: ["notifies"],
-                name: "Notifies",
-                children: []
-            },
-            {
-                icon: "fa-info",
-                depth: 1,
-                endpoint: `/${instanceId}/docs`,
-                isLeaf: true,
-                isRoot: false,
-                path: ["docs"],
-                name: "Documentation",
-                children: []
-            },
-            {
-                icon: "fa-info",
-                depth: 1,
-                endpoint: `/${instanceId}/components`,
-                isLeaf: true,
-                isRoot: false,
-                path: ["components"],
-                name: "Components",
-                children: [
-                    {
-                        icon: "fa-info",
-                        depth: 2,
-                        endpoint: `/${instanceId}/components/bootstrap`,
-                        isLeaf: true,
-                        isRoot: false,
-                        path: ["bootstrap"],
-                        name: "Bootstrap",
-                        children: []
-                    },
-                    {
-                        icon: "fa-info",
-                        depth: 2,
-                        endpoint: `/${instanceId}/components/basic`,
-                        isLeaf: true,
-                        isRoot: false,
-                        path: ["basic"],
-                        name: "Basic",
-                        children: []
-                    },
-                    {
-                        icon: "fa-info",
-                        depth: 2,
-                        endpoint: `/${instanceId}/components/advanced`,
-                        isLeaf: true,
-                        isRoot: false,
-                        path: ["advanced"],
-                        name: "Advanced",
-                        children: []
-                    },
-                    {
-                        icon: "fa-info",
-                        depth: 2,
-                        endpoint: `/${instanceId}/components/theme`,
-                        isLeaf: true,
-                        isRoot: false,
-                        path: ["theme"],
-                        name: "Theme",
-                        children: []
-                    },
-                ]
-            }
-        ]
-    },
-
-    // This is used to create routes for the vue router
-    routes: [
-        { path: '/', name: 'root', children: [
-                {path: '', redirect: '/default/docs/Introduction.md'},
-                {path: `${instanceId}`, children :[
-                        {path: 'docs', redirect: `/${instanceId}/docs/Introduction.md`},
-                        {path: 'docs/:pathMatch(.*)*', location: `${appEndpoint}/core/pages/Documentation.vue`},
-                        {path: 'connections', location: `${appEndpoint}/core/pages/Connections.vue`},
-                        {path: 'connections/:id', location: `${appEndpoint}/core/pages/Connection.vue`},
-                        {path: 'cache', location: `${appEndpoint}/core/pages/Cache.vue`},
-                        {path: 'traffic', location: `${appEndpoint}/core/pages/Traffic.vue`},
-                        {path: 'notifies', location: `${appEndpoint}/core/pages/Notifies.vue`},
-                        {path: 'components', location: `${appEndpoint}/core/pages/frontend/Components.vue`, children: [
-                                {path: 'basic', location: `${appEndpoint}/core/pages/frontend/ComponentsBasic.vue`},
-                                {path: 'advanced', location: `${appEndpoint}/core/pages/frontend/ComponentsAdv.vue`},
-                                {path: 'theme', location: `${appEndpoint}/core/pages/frontend/Theme.vue`},
-                                {path: 'bootstrap', location: `${appEndpoint}/core/pages/frontend/Bootstrap.vue`},
-                            ]},
-                    ]}
-            ] },
-        { path: '/:pathMatch(.*)*', name: '404', location: `${appEndpoint}/core/Page404.vue` }
-
-    ]
-
-
-} // end of Constants
-

package/DefaultConfig.mjs

@@ -1,177 +0,0 @@
-/**
- * Default Configuration for a C0ckp1t Application
- */
-// ________________________________________________________________________________
-// Properties
-// ________________________________________________________________________________
-// XMLHttpRequest from a different domain cannot set cookie values for their own
-// domain unless withCredentials is set to true before making the request.
-// https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/withCredentials
-const WITH_CREDENTIALS = false
-// Note: VueUtils requires this to be 'default'
-const instanceId =  "default";
-// Used for requestion app components and files
-const appEndpoint = "";
-
-// ________________________________________________________________________________
-// GLOBAL CONSTANTS
-// ________________________________________________________________________________
-export default {
-    isDev: true,
-    WITH_CREDENTIALS: WITH_CREDENTIALS,
-
-    // logger config
-    defaultLogLevel: "INFO",
-    defaultLoggerLevels: {
-        "GlobalStore.mjs": "INFO",
-        "VueUtils.mjs": "INFO",
-        "Connection.mjs": "INFO",
-        "default": "INFO",
-        "anonymous": "INFO",
-        "demo": "INFO"
-    },
-
-    instanceId: instanceId,
-    type: "LOCAL",
-    appName:  "C0ckp1t App",
-    appEndpoint: appEndpoint,
-
-    // This creates the navigation tree
-    root: {
-        icon: "fa-house",
-        depth: 0,
-        endpoint: "/",
-        isLeaf: false,
-        isRoot: true,
-        name: "",
-        path: [],
-        children: [
-            {
-                depth: 1,
-                endpoint: `/${instanceId}/connections`,
-                isLeaf: true,
-                isRoot: false,
-                path: ["connections"],
-                name: "Connections",
-                children: []
-            },
-            {
-                depth: 1,
-                endpoint: `/${instanceId}/cache`,
-                isLeaf: true,
-                isRoot: false,
-                path: ["cache"],
-                name: "Cache",
-                children: []
-            },
-            {
-                icon: "fa-network-wired",
-                depth: 1,
-                endpoint: `/${instanceId}/traffic`,
-                isLeaf: true,
-                isRoot: false,
-                path: ["traffic"],
-                name: "Traffic",
-                children: []
-            },
-            {
-                icon: "fa-bell",
-                depth: 1,
-                endpoint: `/${instanceId}/notifies`,
-                isLeaf: true,
-                isRoot: false,
-                path: ["notifies"],
-                name: "Notifies",
-                children: []
-            },
-            {
-                icon: "fa-info",
-                depth: 1,
-                endpoint: `/${instanceId}/docs`,
-                isLeaf: true,
-                isRoot: false,
-                path: ["docs"],
-                name: "Documentation",
-                children: []
-            },
-            {
-                icon: "fa-info",
-                depth: 1,
-                endpoint: `/${instanceId}/components`,
-                isLeaf: true,
-                isRoot: false,
-                path: ["components"],
-                name: "Components",
-                children: [
-                    {
-                        icon: "fa-info",
-                        depth: 2,
-                        endpoint: `/${instanceId}/components/bootstrap`,
-                        isLeaf: true,
-                        isRoot: false,
-                        path: ["bootstrap"],
-                        name: "Bootstrap",
-                        children: []
-                    },
-                    {
-                        icon: "fa-info",
-                        depth: 2,
-                        endpoint: `/${instanceId}/components/basic`,
-                        isLeaf: true,
-                        isRoot: false,
-                        path: ["basic"],
-                        name: "Basic",
-                        children: []
-                    },
-                    {
-                        icon: "fa-info",
-                        depth: 2,
-                        endpoint: `/${instanceId}/components/advanced`,
-                        isLeaf: true,
-                        isRoot: false,
-                        path: ["advanced"],
-                        name: "Advanced",
-                        children: []
-                    },
-                    {
-                        icon: "fa-info",
-                        depth: 2,
-                        endpoint: `/${instanceId}/components/theme`,
-                        isLeaf: true,
-                        isRoot: false,
-                        path: ["theme"],
-                        name: "Theme",
-                        children: []
-                    },
-                ]
-            }
-        ]
-    },
-
-    // This is used to create routes for the vue router
-    routes: [
-        { path: '/', name: 'root', children: [
-                {path: '', redirect: '/default/docs/Introduction.md'},
-                {path: `${instanceId}`, children :[
-                        {path: 'docs', redirect: `/${instanceId}/docs/Introduction.md`},
-                        {path: 'docs/:pathMatch(.*)*', location: `${appEndpoint}/core/pages/Documentation.vue`},
-                        {path: 'connections', location: `${appEndpoint}/core/pages/Connections.vue`},
-                        {path: 'connections/:id', location: `${appEndpoint}/core/pages/Connection.vue`},
-                        {path: 'cache', location: `${appEndpoint}/core/pages/Cache.vue`},
-                        {path: 'traffic', location: `${appEndpoint}/core/pages/Traffic.vue`},
-                        {path: 'notifies', location: `${appEndpoint}/core/pages/Notifies.vue`},
-                        {path: 'components', location: `${appEndpoint}/core/pages/frontend/Components.vue`, children: [
-                                {path: 'basic', location: `${appEndpoint}/core/pages/frontend/ComponentsBasic.vue`},
-                                {path: 'advanced', location: `${appEndpoint}/core/pages/frontend/ComponentsAdv.vue`},
-                                {path: 'theme', location: `${appEndpoint}/core/pages/frontend/Theme.vue`},
-                                {path: 'bootstrap', location: `${appEndpoint}/core/pages/frontend/Bootstrap.vue`},
-                            ]},
-                    ]}
-            ] },
-        { path: '/:pathMatch(.*)*', name: '404', location: `${appEndpoint}/core/Page404.vue` }
-
-    ]
-
-
-} // end of Constants
-