c0ckp1t 1.0.11 → 1.0.13

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/c0ckp1t-demo/{C0ckp1tConfig.mjs → Config.mjs}

@@ -10,6 +10,8 @@ const instanceId =  "demo";
 // Used for requestion app components and files
 const appEndpoint = "";
 
+const islandDir = "c0ckp1t-demo"
+
 // ________________________________________________________________________________
 // GLOBAL CONSTANTS
 // ________________________________________________________________________________
@@ -21,6 +23,7 @@ export default {
     type: "LOCAL",
     appName:  "C0ckp1t Demo",
     appEndpoint: appEndpoint,
+    islandDir: islandDir,
 
     // This creates the navigation tree
     root: {
@@ -55,11 +58,11 @@ export default {
 
     // This is used to create routes for the vue router
     routes: [
-        {path: instanceId, location: `${appEndpoint}/c0ckp1t-demo/main.vue`, children: [
+        {path: instanceId, location: `${appEndpoint}/${islandDir}/main.vue`, children: [
                 {path: '', redirect: `/${instanceId}/homepage`},
-                {path: 'homepage', location: `${appEndpoint}/c0ckp1t-demo/pages/homepage.vue`},
+                {path: 'homepage', location: `${appEndpoint}/${islandDir}/pages/homepage.vue`},
                 {path: 'docs', redirect: `/${instanceId}/docs/Introduction.md`},
-                {path: 'docs/:pathMatch(.*)*', location: `${appEndpoint}/core/pages/Documentation.vue`},
+                {path: 'docs/:pathMatch(.*)*', location: `${appEndpoint}/${islandDir}/pages/documentation.vue`},
             ] },
     ]
 

package/c0ckp1t-demo/components/sidebar.vue

@@ -39,8 +39,7 @@ logger.debug("[INIT]")
 
       <ul class="nav flex-column mb-auto">
         <RouterLink class="nav-link d-flex align-items-center gap-2" :to="`${routerEndpoint}/homepage`">Homepage</RouterLink>
-        <RouterLink class="nav-link d-flex align-items-center gap-2" :class="{ 'router-link-active': isDocsActive }" :to="`${routerEndpoint}/docs`" v-if="registry?.store?.context?.accessLevel <= 500">Documentation</RouterLink>
-        <RouterLink class="nav-link d-flex align-items-center gap-2" :to="`${routerEndpoint}/admin`" v-if="registry?.store?.context?.accessLevel <= 500">Admin</RouterLink>
+        <RouterLink class="nav-link d-flex align-items-center gap-2" :class="{ 'router-link-active': isDocsActive }" :to="`${routerEndpoint}/docs`" >Documentation</RouterLink>
       </ul>
 
       <hr class="my-2"> 

package/c0ckp1t-demo/docs/Introduction.md

@@ -1,3 +1,4 @@
 
 # C0ckp1t Demo Application
 
+* [Issues](./Issues.md)

package/c0ckp1t-demo/docs/Issues.md

@@ -0,0 +1,3 @@
+
+# Issues
+

package/c0ckp1t-demo/pages/documentation.vue

@@ -0,0 +1,64 @@
+<script setup>
+/*
+  [VARS] - init, imports, template, script, style, name
+
+  Usage:
+    const documentation = defineAsyncComponent(() => import("/v3/actions/auth/www/pages/documentation.vue"))
+    <documentation/>
+*/
+// ________________________________________________________________________________
+// IMPORTS
+// ________________________________________________________________________________
+import {reactive, computed, ref, onMounted, onUnmounted, defineAsyncComponent, watch} from 'vue'
+import {getLogger} from "Logging";
+import {store as storeLocal, api as apiLocal, registry, instanceId} from '../store.mjs'
+import Documentation from "/core/pages/Documentation.vue"
+
+// !# C0CKP1T_START imports
+
+// !# C0CKP1T_END imports
+
+// ________________________________________________________________________________
+// LOGGING
+// ________________________________________________________________________________
+const LOG_HEADER = "pages/homepage.vue"
+const logger = getLogger(LOG_HEADER)
+logger.debug("[INIT]")
+
+// !# C0CKP1T_START script
+const local = reactive({
+    id: LOG_HEADER,
+    instanceId: instanceId
+})
+// !# C0CKP1T_END script
+
+// ________________________________________________________________________________
+// INIT
+// ________________________________________________________________________________
+async function init() {
+    if (registry.state.isReady) {
+// !# C0CKP1T_START init
+
+// !# C0CKP1T_END init
+    } else {
+        setTimeout(async () => { await init() }, 1000)
+    }
+}
+onMounted(async () => { init() })
+</script>
+
+<template>
+<!--  !# C0CKP1T_START template -->
+<x-section extra="fs-3" k="Documentation" :visible="true">
+    <Documentation :remotePathMapping="`/${storeLocal.islandDir}/docs`"></Documentation>
+</x-section>
+<!--  !# C0CKP1T_END template -->
+</template>
+
+<style scoped>
+/* !# C0CKP1T_START style */
+
+/* !# C0CKP1T_END style */
+</style>
+
+

package/c0ckp1t-demo/store.mjs

@@ -12,7 +12,7 @@ import {getLogger} from "Logging";
 import {store as storeMain, api as apiMain} from 'GlobalStore'
 
 // !# C0CKP1T_START import
-import C0ckp1tConfig from "./C0ckp1tConfig.mjs";
+import C0ckp1tConfig from "./Config.mjs";
 // !# C0CKP1T_END import
 
 export const instanceId = C0ckp1tConfig.instanceId
@@ -38,7 +38,7 @@ export const store = reactive({
   endpoint: routerEndpoint,
 
 // !# C0CKP1T_START store
-
+  islandDir: C0ckp1tConfig.islandDir,
 // !# C0CKP1T_END store
 })
 

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/xsound.vue

@@ -1,6 +1,5 @@
 <script setup>
 import { reactive, computed, markRaw, onMounted, onBeforeUnmount } from 'vue'
-import XDropdown2 from '/components/xdropdown2.vue'
 
 // https://wavesurfer-js.org/docs/
 // NOTE: streaming not supported?
@@ -197,7 +196,7 @@ onBeforeUnmount(() => {
             </div>
             
             <!-- Playback Rate -->
-            <XDropdown2
+            <x-dropdown2
                 v-model="local.playbackRate"
                 :items="playbackRateOptions"
                 :on-change="onPlaybackRateChange"

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;
+}