c0ckp1t 1.0.1 → 1.0.4

package/README.md

@@ -1,16 +1,56 @@
-# c0ckp1t-webroot
+# C0ckp1t Frontend
 
+This project is a Vue.js 3 zero-build web framework using an Islands architecture. HTTP and WebSocket backends are supported. It can compile .vue SFC files at runtime via **vue3-sfc-loader**, this means no Webpack/Vite build step required. There are many reusable components and bootstrap 5.3 theming.
 
-A Vue 3 zero-build web dashboard framework with Islands architecture, WebSocket backends, and reusable UI components
 
-* npm 
-    * https://www.npmjs.com/package/c0ckp1t
+## References
+
+* npm
+  * https://www.npmjs.com/package/c0ckp1t
 * cdn
-    * https://cdn.jsdelivr.net/npm/c0ckp1t@1.0.0/
+  * https://www.jsdelivr.com/package/npm/c0ckp1t
+  * https://cdn.jsdelivr.net/npm/c0ckp1t@latest/
+
+## Overview
+
+The main entry point is `GlobalStore.mjs`. You initialize it with a configuration object, and name of where the C0ckp1t Vue Application should be mounted. 
+
+```js
+import Constants from 'C0ckp1tAppConfig'
+
+import {api as apiMain} from 'GlobalStore'
+apiMain.init("app-default", Constants)
+```
+
+
+## jsfiddle.net example
+
+
+
+## Use Remotely (jsdelivr CDN)
+
+
+
+## Use Locally
+
+
+```bash
+wget https://registry.npmjs.org/c0ckp1t/-/c0ckp1t-1.0.2.tgz
+tar -zxvf c0ckp1t-1.0.2.tgz 
 
+# Note expands to  package/ folder i.e:
+tar -zxvf c0ckp1t-1.0.2.tgz 
+# package/LICENSE
+# package/css/Makefile
+# package/js_ext/Makefile
+# package/css/bootstrap-c0ckp1t.css
+# ...
+```
 
-# Releases
 
+## Releases
 
-* 1.0.0 - Beta initial release 
-* 1.0.1 - Beta removing `Constants.mjs` dependencies
+* 1.0.4 - Beta: fixing cdn index-cdn.html making sure it works with jsfiddle.net
+* 1.0.2 - Beta: fixing cdn index-cdn.html example
+* 1.0.1 - Beta: removing `Constants.mjs` dependencies
+* 1.0.0 - Beta: initial release 

package/c0ckp1t-demo/Constants.mjs

@@ -44,24 +44,29 @@ function findHostNamePortProtocol() {
 let WITH_CREDENTIALS = false
 const {hostname, port, protocol, isSecure, apiBaseUrl} = findHostNamePortProtocol()
 
+const defaultInstanceId =  "default";
+const appEndpoint = "https://cdn.jsdelivr.net/npm/c0ckp1t@latest"
 
 // ________________________________________________________________________________
 // GLOBAL CONSTANTS
 // ________________________________________________________________________________
 let Constants = {
-
+    vueRouterModeIsHash: false, // if true, vue router will use hash mode, otherwise history mode
+    appEndpoint: appEndpoint,
+    apiBaseUrl: apiBaseUrl,
     SERVER_API_URL: `${protocol}//${hostname}:${port}`,
+
     WITH_CREDENTIALS: WITH_CREDENTIALS,
     HOSTNAME: hostname,
     PORT: port,
     PROTOCOL: protocol,
     IS_SECURE: isSecure,
 
-    appName:  "C0ckp1t",
+    appName:  "C0ckp1t Demo App",
 
     defaultLogLevel: "INFO",
     defaultLoggerLevels: {
-        "VueUtils.js": "INFO",
+        "VueUtils.mjs": "DEBUG",
         "Connection.mjs": "INFO",
         "default": "INFO",
         "anonymous": "INFO"
@@ -73,46 +78,44 @@ let Constants = {
         { path: '/', name: 'root', children: [
             {path: '', redirect: '/default/demo/homepage'},
             {path: 'default', children :[
-                    {path: 'connections', location: "/core/pages/Connections.vue"},
-                    {path: 'connections/:id', location: "/core/pages/Connection.vue"},
-                    {path: 'demo', location: "/c0ckp1t-demo/main.vue", children: [
+                    {path: 'connections', location: `${appEndpoint}/core/pages/Connections.vue`},
+                    {path: 'connections/:id', location: `${appEndpoint}/core/pages/Connection.vue`},
+                    {path: 'demo', location: `${appEndpoint}/c0ckp1t-demo/main.vue`, children: [
                             {path: '', redirect: "/default/demo/homepage"},
-                            {path: 'homepage', location: "/c0ckp1t-demo/pages/homepage.vue"},
-                            {path: 'report', location: "/c0ckp1t-demo/pages/report.vue"},
-                            {path: 'devices', location: "/c0ckp1t-demo/pages/devices.vue"},
+                            {path: 'homepage', location: `${appEndpoint}/c0ckp1t-demo/pages/homepage.vue`},
                         ] },
             ]}
         ] },
-        { path: '/:pathMatch(.*)*', name: '404', location: "/core/Page404.vue" }
+        { path: '/:pathMatch(.*)*', name: '404', location: `${appEndpoint}/core/Page404.vue` }
 
     ],
-
-    apiBaseUrl: apiBaseUrl,
-
-    islands: { },
-    defaultConfig: {
-        instanceId: "default",
-        root: {
-            icon: "fa-house",
-            depth: 0,
-            endpoint: "/",
-            isLeaf: false,
-            isRoot: true,
-            name: "",
-            path: [],
-            children: [
-                {
-                    depth: 1,
-                    endpoint: `/default/demo`,
-                    isLeaf: true,
-                    isRoot: false,
-                    path: ["demo"],
-                    name: "demo",
-                    children: []
-                }
-            ]
-        }
-    },
+    defaultInstanceId: defaultInstanceId,
+    islands: {
+        [defaultInstanceId]: {
+            type: "LOCAL",
+            instanceId: defaultInstanceId,
+            root: {
+                icon: "fa-house",
+                depth: 0,
+                endpoint: "/",
+                isLeaf: false,
+                isRoot: true,
+                name: "",
+                path: [],
+                children: [
+                    {
+                        depth: 1,
+                        endpoint: `/default/demo`,
+                        isLeaf: true,
+                        isRoot: false,
+                        path: ["demo"],
+                        name: "demo",
+                        children: []
+                    }
+                ]
+            }
+        } // end of default island
+    }
 
 } // end of Constants
 

package/c0ckp1t-demo/components/sidebar.vue

@@ -47,9 +47,8 @@ logger.debug("[INIT]")
 
 <!--  !# C0CKP1T_START content -->
 
+      <span class="ms-2 text-secondary fw-bold">PAGES</span>
       <ul class="nav flex-column">
-        <RouterLink class="nav-link d-flex align-items-center gap-2" :to="`${routerEndpoint}/devices`">Devices</RouterLink>
-        <RouterLink class="nav-link d-flex align-items-center gap-2" :to="`${routerEndpoint}/report`">Report</RouterLink>
       </ul>
 
 <!--  !# C0CKP1T_END content -->

package/c0ckp1t-demo/docs/Introduction.md

@@ -0,0 +1,3 @@
+
+# C0ckp1t Demo Application
+

package/c0ckp1t-demo/pages/homepage.vue

@@ -13,7 +13,8 @@ import {reactive, computed, ref, onMounted, onUnmounted, defineAsyncComponent, w
 import {getLogger} from "Logging";
 import {api as notify} from "NotifyUtils"
 import {store as storeLocal, api as apiLocal, registry} from '../store.mjs'
-import { store as storeMain,  api as apiMain} from 'GlobalStore'
+import {store as storeMain, api as apiMain} from 'GlobalStore'
+
 // !# C0CKP1T_START imports
 
 // !# C0CKP1T_END imports
@@ -26,6 +27,16 @@ const logger = getLogger(LOG_HEADER)
 logger.debug("[INIT]")
 
 // !# C0CKP1T_START script
+// ________________________________________________________________________________
+// LOCAL
+// ________________________________________________________________________________
+const local = reactive({
+  id: LOG_HEADER,
+
+
+})
+
+
 
 // !# C0CKP1T_END script
 
@@ -33,24 +44,32 @@ logger.debug("[INIT]")
 // INIT
 // ________________________________________________________________________________
 async function init() {
-    if (registry.state.isReady) {
+  if (registry.state.isReady) {
 // !# C0CKP1T_START init
 
 // !# C0CKP1T_END init
-    } else {
-        setTimeout(async () => { await init() }, 1000)
-    }
+  } else {
+    setTimeout(async () => {
+      await init()
+    }, 1000)
+  }
 }
-onMounted(async () => { init() })
+
+onMounted(async () => {
+  init()
+})
 </script>
 
 <template>
 
-<!--  !# C0CKP1T_START template -->
-    <x-section extra="fs-3" :k="`Homepage (endpointId=${storeLocal.endpoint})`" :visible="true">
+  <!--  !# C0CKP1T_START template -->
+<div>
+
+  <x-section :level="3" k="Homepage" :visible="true">
 
-    </x-section>
-<!--  !# C0CKP1T_END template -->
+  </x-section>
+</div>
+  <!--  !# C0CKP1T_END template -->
 
 </template>
 

package/c0ckp1t-demo/store.mjs

@@ -6,12 +6,10 @@
 // ________________________________________________________________________________
 // IMPORT
 // ________________________________________________________________________________
-import {reactive, watch, computed} from 'vue'
+import {reactive, watch, computed, markRaw} from 'vue'
 import {api as notify} from "NotifyUtils"
 import {getLogger} from "Logging";
-import {fromBinary, tryCallLoading, fromByteArray, eventBus} from 'WsUtils'
 import {store as storeMain, api as apiMain} from 'GlobalStore'
-import {endpointToRouterName} from 'JsUtils'
 
 // !# C0CKP1T_START import
 
@@ -24,7 +22,7 @@ export const routerEndpoint = `/${instanceId}/demo`
 // ________________________________________________________________________________
 // LOGGING
 // ________________________________________________________________________________
-const LOG_HEADER = "/wf"
+const LOG_HEADER = "c0ckp1t-demo/store.mjs"
 const logger = getLogger(LOG_HEADER)
 logger.debug("[INIT]")
 
@@ -37,12 +35,7 @@ export const store = reactive({
   id: LOG_HEADER,
   isLoading: false,
   isReady: true,
-  currentDocs: '/v3/workflows/wf/www/docs/Introduction.md',
-  homeDocs: '/v3/workflows/wf/www/docs/Introduction.md',
-  endpoint: '/wf',
-
-  theme: "dark",
-  events: [],
+  endpoint: "/demo",
 
 // !# C0CKP1T_START store
 
@@ -72,38 +65,6 @@ function handleEvent(pkt) {
 // API - PUBLIC
 // ________________________________________________________________________________
 export const api = {
-    // ________________________________________________________________________________
-    // DASHBOARDS
-    // ________________________________________________________________________________
-    async selectDefaultDashboard() {
-        logger.debug(`selectDefaultDashboard - endpoint=${store.endpoint}/homepage`)
-        await registry.routeByEndpoint(`${store.endpoint}/homepage`)
-    },
-
-    // ________________________________________________________________________________
-    // API: wf
-    // ________________________________________________________________________________
-    async shutdownById(wfId) {
-      const args = ["shutdownById", wfId]
-      const resp = await registry.exec(store.endpoint, args)
-      logger.debug(resp)
-      if (!resp.isOk) {
-          notify.badDetails(`[${store.id}] - shutdownById failed`, `${resp.result}`)
-          return
-      }
-      return resp.result // STRING
-    },
-    async startById(wfId) {
-      const args = ["startById", wfId]
-      const resp = await registry.exec(store.endpoint, args)
-      logger.debug(resp)
-      if (!resp.isOk) {
-          notify.badDetails(`[${store.id}] - startById failed`, `${resp.result}`)
-          return
-      }
-      return JSON.parse(resp.result) // JSON
-    },
-
 // !# C0CKP1T_START extra-api
 
 // !# C0CKP1T_END

package/components/xjson.vue

@@ -7,7 +7,7 @@ https://www.webcomponents.org/element/@alenaksu/json-viewer
 */
 import {computed, reactive, watch, onMounted, markRaw} from 'vue'
 
-import '/js_ext/json-viewer.bundle.js';
+import 'json-viewer';
 
 
 const props = defineProps({

package/components/xsection.vue

@@ -101,6 +101,7 @@ const btnClass = computed(() => {
 
 watch(() => props.visible, (visible) => {
   console.log(`visible is: ${visible}`)
+  local.visible = visible
 })
 
 // ________________________________________________________________________________

package/components/xtable-open.vue

@@ -128,7 +128,7 @@ onMounted(async () => {
 
 
 <template>
-  <div >
+  <div class="">
 
     <table class="table table-hover">
       <thead>

package/core/Content.mjs

@@ -3,7 +3,8 @@
  * This module manages the content articles for the application.
  */
 import {reactive, ref, markRaw, onMounted, watch, computed, onErrorCaptured} from 'vue'
-import { get, set, del } from '/js_ext/idb-keyval-6.2.2.mjs'
+// import { get, set, del } from 'idb-keyval'
+import {get, set, del} from '/js_ext/idb-keyval-6.2.2.mjs'
 
 export const articlesFiltered = computed(() => {
     return Content.articles.filter(article => {

package/core/GlobalStore.mjs

@@ -12,7 +12,6 @@ import {markRaw, reactive, watch, defineAsyncComponent, createApp} from 'vue'
 import * as VueRouter from 'vue-router'
 import {getLogger} from 'Logging';
 import { transformRoutes} from "./VueUtils.mjs";
-import { Theme} from "./Theme.mjs";
 import IslandDefault from 'IslandDefault'
 import Island from './Island.mjs'
 import {substrAfterFirstSlash} from "JsUtils";
@@ -230,8 +229,10 @@ export const api = {
     async init(id, config) {
         logger.info(`[INIT] - ${id}`)
 
-        store.name = config.appName || "C0ckp1t"
+        const defaultInstanceId = config.defaultInstanceId
         store.config = config
+        store.name = config.appName || "C0ckp1t"
+        const vueRouterModeIsHash = config.vueRouterModeIsHash || true
 
         const selector = `#${id}`
         const el = document.querySelector(selector)
@@ -239,6 +240,7 @@ export const api = {
             logger.warn(`Mount point "${selector}" not found`)
             return null
         }
+
         //________________________________________________________________________________
         // CREATE APP
         //________________________________________________________________________________
@@ -253,54 +255,53 @@ export const api = {
             console.error('Global error handler:', err, vm, info);
         };
 
-
-
-        config.defaultConfig.SERVER_API_URL = config.SERVER_API_URL
-        const islandDefault = new IslandDefault(api, config.defaultConfig)
+        // Load default island first
+        config.islands[defaultInstanceId].SERVER_API_URL = config.SERVER_API_URL
+        const islandDefault = new IslandDefault(api, config.islands[defaultInstanceId])
         store.r[islandDefault.instanceId] = islandDefault
         await islandDefault.init()
 
         const router = VueRouter.createRouter({
-            history: VueRouter.createWebHistory(),
+            history: vueRouterModeIsHash ? VueRouter.createWebHashHistory() : VueRouter.createWebHistory(),
             routes: transformRoutes(islandDefault.loadModule, config.defaultRoutes)
         })
         store.router = markRaw(router)
 
 
-        app.component('app-main', createAsyncComponent(() => islandDefault.loadModule('/core/PageMain.vue')))
-
-        app.component("ExecButton", defineAsyncComponent(() => islandDefault.loadModule('/components/ExecButton.vue')))
-        app.component("XInput", defineAsyncComponent(() => islandDefault.loadModule('/components/xinput.vue')))
-        app.component("XLabel", defineAsyncComponent(() => islandDefault.loadModule('/components/xlabel.vue')))
-        app.component("XDropdown", defineAsyncComponent(() => islandDefault.loadModule('/components/xdropdown.vue')))
-        app.component("XDropdown2", defineAsyncComponent(() => islandDefault.loadModule('/components/xdropdown2.vue')))
-        app.component("XSection", defineAsyncComponent(() => islandDefault.loadModule('/components/xsection.vue')))
-        app.component("XTableOpen", defineAsyncComponent(() => islandDefault.loadModule('/components/xtable-open.vue')))
-        app.component("XCollapse", defineAsyncComponent(() => islandDefault.loadModule('/components/xcollapse.vue')))
-        app.component("XToggle", defineAsyncComponent(() => islandDefault.loadModule('/components/xtoggle.vue')))
-        app.component("XToggle3", defineAsyncComponent(() => islandDefault.loadModule('/components/xtoggle3.vue')))
-        app.component("XCheck", defineAsyncComponent(() => islandDefault.loadModule('/components/xcheck.vue')))
-        app.component("XCheckbox", defineAsyncComponent(() => islandDefault.loadModule('/components/xcheckbox.vue')))
-        app.component("XTextarea", defineAsyncComponent(() => islandDefault.loadModule('/components/xtextarea.vue')))
-        app.component("XHidden", defineAsyncComponent(() => islandDefault.loadModule('/components/xhidden.vue')))
-
-        app.component("XTabs", defineAsyncComponent(() => islandDefault.loadModule('/components/xtabs.vue')))
-        app.component("XKv", defineAsyncComponent(() => islandDefault.loadModule('/components/xkv.vue')))
-        app.component("XNav", defineAsyncComponent(() => islandDefault.loadModule('/components/xnav.vue')))
-        app.component("XMap", defineAsyncComponent(() => islandDefault.loadModule('/components/xmap.vue')))
-        app.component("XList", defineAsyncComponent(() => islandDefault.loadModule('/components/xlist.vue')))
-        app.component("XJson", defineAsyncComponent(() => islandDefault.loadModule('/components/xjson.vue')))
-        app.component("XCard", defineAsyncComponent(() => islandDefault.loadModule('/components/xcard.vue')))
-        app.component("XCardH", defineAsyncComponent(() => islandDefault.loadModule('/components/xcard-h.vue')))
-        app.component("XColor", defineAsyncComponent(() => islandDefault.loadModule('/components/xcolor.vue')))
-
-        // app.component('CodeMirror', defineAsyncComponent(() => islandDefault.loadModule('/components/CodeMirror.vue')))
-        // app.component('XTerminal', defineAsyncComponent(() => islandDefault.loadModule('/components/XTerminal.vue')))
-        app.component('v-ace-editor', defineAsyncComponent(() => islandDefault.loadModule('/components/vue3-ace-editor.vue')))
-        app.component("XMarkdown", defineAsyncComponent(() => islandDefault.loadModule('/components/xmarkdown.vue')))
-        app.component("XSound", defineAsyncComponent(() => islandDefault.loadModule('/components/xsound.vue')))
-        app.component("XUpload", defineAsyncComponent(() => islandDefault.loadModule('/components/xupload.vue')))
-        app.component("XTree", defineAsyncComponent(() => islandDefault.loadModule('/components/xtree.vue')))
+        app.component('app-main', createAsyncComponent(() => islandDefault.loadModule(`${config.appEndpoint}/core/PageMain.vue`)))
+
+        app.component("ExecButton", defineAsyncComponent(() => islandDefault.loadModule(`${config.appEndpoint}/components/ExecButton.vue`)))
+        app.component("XInput", defineAsyncComponent(() => islandDefault.loadModule(`${config.appEndpoint}/components/xinput.vue`)))
+        app.component("XLabel", defineAsyncComponent(() => islandDefault.loadModule(`${config.appEndpoint}/components/xlabel.vue`)))
+        app.component("XDropdown", defineAsyncComponent(() => islandDefault.loadModule(`${config.appEndpoint}/components/xdropdown.vue`)))
+        app.component("XDropdown2", defineAsyncComponent(() => islandDefault.loadModule(`${config.appEndpoint}/components/xdropdown2.vue`)))
+        app.component("XSection", defineAsyncComponent(() => islandDefault.loadModule(`${config.appEndpoint}/components/xsection.vue`)))
+        app.component("XTableOpen", defineAsyncComponent(() => islandDefault.loadModule(`${config.appEndpoint}/components/xtable-open.vue`)))
+        app.component("XCollapse", defineAsyncComponent(() => islandDefault.loadModule(`${config.appEndpoint}/components/xcollapse.vue`)))
+        app.component("XToggle", defineAsyncComponent(() => islandDefault.loadModule(`${config.appEndpoint}/components/xtoggle.vue`)))
+        app.component("XToggle3", defineAsyncComponent(() => islandDefault.loadModule(`${config.appEndpoint}/components/xtoggle3.vue`)))
+        app.component("XCheck", defineAsyncComponent(() => islandDefault.loadModule(`${config.appEndpoint}/components/xcheck.vue`)))
+        app.component("XCheckbox", defineAsyncComponent(() => islandDefault.loadModule(`${config.appEndpoint}/components/xcheckbox.vue`)))
+        app.component("XTextarea", defineAsyncComponent(() => islandDefault.loadModule(`${config.appEndpoint}/components/xtextarea.vue`)))
+        app.component("XHidden", defineAsyncComponent(() => islandDefault.loadModule(`${config.appEndpoint}/components/xhidden.vue`)))
+
+        app.component("XTabs", defineAsyncComponent(() => islandDefault.loadModule(`${config.appEndpoint}/components/xtabs.vue`)))
+        app.component("XKv", defineAsyncComponent(() => islandDefault.loadModule(`${config.appEndpoint}/components/xkv.vue`)))
+        app.component("XNav", defineAsyncComponent(() => islandDefault.loadModule(`${config.appEndpoint}/components/xnav.vue`)))
+        app.component("XMap", defineAsyncComponent(() => islandDefault.loadModule(`${config.appEndpoint}/components/xmap.vue`)))
+        app.component("XList", defineAsyncComponent(() => islandDefault.loadModule(`${config.appEndpoint}/components/xlist.vue`)))
+        app.component("XJson", defineAsyncComponent(() => islandDefault.loadModule(`${config.appEndpoint}/components/xjson.vue`)))
+        app.component("XCard", defineAsyncComponent(() => islandDefault.loadModule(`${config.appEndpoint}/components/xcard.vue`)))
+        app.component("XCardH", defineAsyncComponent(() => islandDefault.loadModule(`${config.appEndpoint}/components/xcard-h.vue`)))
+        app.component("XColor", defineAsyncComponent(() => islandDefault.loadModule(`${config.appEndpoint}/components/xcolor.vue`)))
+
+        app.component('v-ace-editor', defineAsyncComponent(() => islandDefault.loadModule(`${config.appEndpoint}/components/vue3-ace-editor.vue`)))
+        app.component("XMarkdown", defineAsyncComponent(() => islandDefault.loadModule(`${config.appEndpoint}/components/xmarkdown.vue`)))
+        app.component("XSound", defineAsyncComponent(() => islandDefault.loadModule(`${config.appEndpoint}/components/xsound.vue`)))
+        app.component("XUpload", defineAsyncComponent(() => islandDefault.loadModule(`${config.appEndpoint}/components/xupload.vue`)))
+        app.component("XTree", defineAsyncComponent(() => islandDefault.loadModule(`${config.appEndpoint}/components/xtree.vue`)))
+        // app.component('CodeMirror', defineAsyncComponent(() => islandDefault.loadModule(`${config.appEndpoint}/components/CodeMirror.vue`)))
+        // app.component('XTerminal', defineAsyncComponent(() => islandDefault.loadModule(`${config.appEndpoint}/components/XTerminal.vue`)))
 
         app.use(router)
         app.mount(selector)
@@ -311,14 +312,22 @@ export const api = {
             store.isReady = true
         }
 
-
+        // Load the rest of the islands
         for (const [key, value] of Object.entries(config.islands || {})) {
-            const config = {
+            if(key === defaultInstanceId) {
+                continue
+            }
+            const islandConfig = {
                 SERVER_API_URL: config.SERVER_API_URL,
                 sfcOptions: islandDefault.sfcOptions,
                 ...value
             }
-            const island= new Island(api, config)
+            let island= null
+            if(islandConfig.type === "LOCAL") {
+                island = new IslandDefault(api, islandConfig)
+            } else {
+                island = new Island(api, islandConfig)
+            }
             store.r[island.instanceId] = island
             await island.init()
             if(currentInstanceId === island.instanceId) {

package/core/PageMain.vue

@@ -7,11 +7,11 @@
 // IMPORTS
 //________________________________________________________________________________
 import {reactive, ref, onMounted, onUnmounted, watch, computed, onErrorCaptured} from 'vue'
-import {store as storeMain, api as apiMain, store} from 'GlobalStore'
+import {store as storeMain, api as apiMain} from 'GlobalStore'
 import {getLogger} from "Logging";
 
 import {api as apiTheme, store as storeTheme} from "./Theme.mjs"
-import PageFallback from "/core/PageFallback.vue"
+import PageFallback from "./PageFallback.vue"
 import MainOffcanvas from "./main-offcanvas.vue";
 
 
@@ -94,9 +94,9 @@ const mainContentStyle = computed(() => ({
       <div class="container">
 
         <a class="navbar-brand" @click.prevent="apiMain.selectLogo()" >
-          <span  class="me-2 text-warning" v-if="store.showSidebar"><<</span>
-          <img src="/core/img/logo_v1.svg" alt="Logo" height="24" class="d-inline-block align-text-top" v-if="!store.showSidebar">
-          <img src="/core/img/logo_v2.svg" alt="Logo" height="24" class="d-inline-block align-text-top" v-else>
+          <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>
           <span class="text-warning fw-bold ms-2 brand-text">{{ storeMain.name }}</span>
         </a>
 
@@ -139,11 +139,11 @@ const mainContentStyle = computed(() => ({
     <footer class="container-fluid p-4 bg-body-tertiary border-top">
       <div class="row mt-4 align-items-center justify-content-center">
         <div class="col-6 d-flex flex-column align-items-center">
-          <img src="/core/img/logo_v1.svg" width="24" height="24" class="d-block mb-3" alt="Product logo" role="img" />
+          <img src="./img/logo_v1.svg" width="24" height="24" class="d-block mb-3" alt="Product logo" role="img" />
           <small class="d-block mb-3 text-body-secondary">&copy; 2017–2025</small>
           <small class="d-block mb-3 text-body-secondary">Product of <a href="https://sorsha.com">sorsha.com</a></small>
           <small class="d-block mb-3 text-body-secondary">Made in USA</small>
-          <img src="/core/img/Flag_of_the_United_States.svg" width="24" height="24" class="d-block mb-3" alt="Product logo" role="img" />
+          <img src="./img/Flag_of_the_United_States.svg" width="24" height="24" class="d-block mb-3" alt="Product logo" role="img" />
         </div>
       </div>
     </footer>
@@ -162,7 +162,6 @@ const mainContentStyle = computed(() => ({
   color: var(--bs-body-color);
   background-color: var(--bs-body-bg); /* Explicitly set background to match body */
   min-height: 100vh;
-  overflow-x: hidden; /* Prevent horizontal scrollbar when sidebar is open */
 }
 
 

package/core/VueUtils.mjs

@@ -18,7 +18,7 @@ import * as Vue from 'vue'
 import * as VueRouter from 'vue-router'
 import {loadModule, vueVersion} from 'vue3-sfc-loader'
 
-
+import * as jsonViewer from 'json-viewer'
 
 import * as Logging from "Logging";
 import * as GlobalStore from 'GlobalStore'
@@ -36,7 +36,7 @@ const katexTags = ['mn', 'mfrac', 'mrow', 'annotation', 'semantics', 'math',
 // ________________________________________________________________________________
 const LOG_HEADER = `VueUtils.mjs`
 const logger = Logging.getLogger(LOG_HEADER)
-logger.debug("init")
+logger.debug("INIT")
 logger.info(`vue3-sfc-loader vue version ${vueVersion}`)
 logger.info(`vue.js version ${Vue.version}`)
 
@@ -66,6 +66,8 @@ const options =  {
         Logging: Logging,
         NotifyUtils: NotifyUtils,
         GlobalStore: GlobalStore,
+
+        'json-viewer': jsonViewer,
     },
 
     async getFile(path, type) {
@@ -80,6 +82,9 @@ const options =  {
             logger.debug(`[getFile] - cached - ${path} - type=${type}`)
             const cached = sourceCode[path];
             res = new Response(cached.code, {status: 200, statusText: 'OK'});
+        } else if (path.startsWith("http") || path.startsWith("HTTP")) {
+            logger.debug(`[getFile] - default - ${path} - ${type}`)
+            res = await GlobalStore.store.r["default"].resolver(path, type)
         } else if (GlobalStore.store.r[instanceId]) {
             logger.debug(`[getFile] - instance - ${path} - ${type}`)
             const pathAfterInstanceId = path.replace("/" + instanceId, "")
@@ -90,7 +95,7 @@ const options =  {
         }
 
         return {
-            type: type,
+            // type: type,
             getContentData: asBinary => {
                 if (asBinary) {
                     return res.arrayBuffer();
@@ -121,11 +126,23 @@ const options =  {
 
         switch (type) {
             case '.png':
-                return getContentData(true);
+                return getContentData(true).then(buffer => {
+                    const bytes = new Uint8Array(buffer);
+                    let binary = '';
+                    for (let i = 0; i < bytes.byteLength; i++) {
+                        binary += String.fromCharCode(bytes[i]);
+                    }
+                    return  'data:image/png;base64,' + btoa(binary);
+                });
             case '.svg':
-                return getContentData(false);
+                return getContentData(true).then(arrayBuffer => {
+                    const blob = new Blob([arrayBuffer], { type: 'image/svg+xml' });
+                    return URL.createObjectURL(blob);
+                });
             case '.json':
-                return JSON.parse(await getContentData(false));
+                return getContentData(false).then(text => {
+                    return  JSON.parse(text)
+                });
         }
     },
 

package/core/WsUtils.mjs

@@ -1,10 +1,9 @@
 
-// import msgpack from 'https://cdn.jsdelivr.net/npm/msgpack@1.0.3/+esm'
-import {encode, decode} from '/js_ext/msgpack.mjs'
+import {encode, decode} from 'msgpack'
 import {api as notify} from 'NotifyUtils'
 
 // https://github.com/developit/mitt
-import mitt from '/js_ext/mitt.mjs'
+import mitt from 'mitt'
 export const eventBus = mitt();
 
 //________________________________________________________________________________

package/core/main-offcanvas.vue

@@ -10,8 +10,8 @@
 import {reactive, markRaw, onMounted, ref, defineAsyncComponent, watch} from 'vue'
 import {store as storeMain, api as apiMain } from 'GlobalStore'
 import {getLogger} from "Logging";
-import node from "/core/nodes/node.vue"
-import ConnectionHeader from "/core/sfc/connection-header.vue"
+import node from "./nodes/node.vue"
+import ConnectionHeader from "./sfc/connection-header.vue"
 // ________________________________________________________________________________
 // LOGGING
 // ________________________________________________________________________________

package/core/pages/Cache.vue

@@ -39,19 +39,15 @@ const local = reactive({
 async function refresh() {
   logger.info(`refresh()`)
   const cache = options.moduleCache
-  console.log(options.moduleCache)
-  console.log(options.sourceCode)
-  // for (const key of Object.keys(cache)) {
-  //   if(Reflect.has(cache[key], "promise")) {
-  // logger.info(`${key} NOT loaded - awaiting`)
-  // await cache[key].promise
-  // }
-  // }
+
   local.moduleCache = markRaw(options.moduleCache)
   local.sourceCode = markRaw(options.sourceCode)
 
   local.es6Modules = Object.keys(local.moduleCache)
-      .filter(key => !Reflect.has(local.moduleCache[key], "__name"))
+      .filter(key => {
+        const val = local.moduleCache[key]
+        return typeof val === 'object' && val !== null && !Reflect.has(val, "__name")
+      })
       .map(key => {
         const isPromise = Reflect.has(cache[key], "promise")
         let sourceCode = null
@@ -66,7 +62,10 @@ async function refresh() {
       }).sort((a, b) => a.key.localeCompare(b.key))
 
   local.vueComponents = Object.keys(local.moduleCache)
-      .filter(key => Reflect.has(local.moduleCache[key], "__name"))
+      .filter(key => {
+        const val = local.moduleCache[key]
+        return typeof val === 'object' && val !== null && Reflect.has(val, "__name")
+      })
       .map(key => {
         let sourceCode = null
         if (local.sourceCode[key] !== undefined && local.sourceCode[key].hasOwnProperty("code")) {
@@ -85,11 +84,8 @@ async function loadComponent(key) {
 }
 
 async function loadRoutes() {
-  console.log("loadroutes")
-  console.log("loadroutes")
   const routes = apiMain.getRoutes()
   local.routes = JSON.parse(JSON.stringify(routes)).sort((a, b) => a.path.localeCompare(b.path))
-  console.log(router.getRoutes().sort((a, b) => a.path.localeCompare(b.path)))
 }
 
 //________________________________________________________________________________

package/core/pages/Documentation.vue

@@ -5,7 +5,6 @@
   Note: This depends on vue-router being configured with
     { path: 'documentation', redirect: '/default/documentation/Introduction.md'},
     { path: 'documentation/:pathMatch(.*)*', location:'core/pages/page-documentation.vue'}
-   See Constants.mjs
 
 */
 //________________________________________________________________________________

package/core/pages/frontend/ComponentsAdv.vue

@@ -12,7 +12,6 @@
 import {reactive, computed, ref, onMounted, onUnmounted, defineAsyncComponent, watch} from 'vue'
 import {getLogger} from "Logging";
 // !# C0CKP1T_START imports
-import Constants from "Constants";
 import ComponentView from "./component-view.vue";
 import XTerminal from "/components/xterminal.vue";
 import CodeMirror from "/components/code-mirror.vue";
@@ -184,7 +183,7 @@ async function delay() {
 
     <ComponentView name="x-sound" url="/components/xsound.vue">
       <XSound
-          :url="`${Constants.SERVER_API_URL}/core/img/state-uniqueId-8k.wav`"
+          url="https://cdn.jsdelivr.net/npm/c0ckp1t@1.0.2/core/img/state-uniqueId-8k.wav"
           id="stateId" :autoLoad="true"/>
     </ComponentView>
 

package/core/sfc/info-api.vue

@@ -7,7 +7,6 @@ import {reactive, onMounted, onUnmounted, defineAsyncComponent, watch, computed}
 import {store as storeMain} from 'GlobalStore'
 import {getLogger} from "Logging";
 import {groupObjectByProperty} from "JsUtils";
-import ExecButton from "../../components/ExecButton.vue";
 
 const props = defineProps({
   endpoint: String,

package/core/sfc/scroll-to-top.vue

@@ -1,6 +1,6 @@
 <script setup>
 import {onBeforeUnmount, onMounted} from "vue";
-import {api as apiMain} from "@/GlobalStore.mjs";
+import {api as apiMain} from "GlobalStore";
 
 onMounted(() => {
   apiMain.init()

package/core/ws-client/Connection.mjs

@@ -10,7 +10,7 @@ import WsClient, {ConnectionLookUp, ConnectionStates, getCodeDescription} from '
 
 // https://stately.ai/docs/xstate
 // This is XState version 4 (specifically appears to be v4.x).
-import {actions, interpret, createMachine} from "/js_ext/xstate.web.mjs";
+import {actions, interpret, createMachine} from "xstate";
 import {AuthNState} from "./AuthNState.mjs"
 
 const {map, filter } = rxjs.operators;

package/core/ws-client/ws-connection.vue

@@ -1,11 +1,7 @@
 <script setup>
 import { ref, reactive, watch, onMounted, computed } from 'vue'
 
-
 import { actions, state, connStateString, url, isAuthenticated, tryCallLoading} from "WsInterface";
-
-// import {store, methods} from 'GlobalStore'
-import Constants from 'Constants'
 import {getLogger} from "Logging";
 import {store as storeSession} from "./Session.mjs";
 
@@ -22,7 +18,7 @@ const backoffMsMax = 20000;
 
 const local = reactive({
   isLoading: false,
-  isDev: Constants.isDev,
+  isDev: false,
 
   retries: 0,
   retryEnable: true,

package/index-cdn.html

@@ -5,32 +5,37 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>C0ckp1t</title>
-  <link rel="icon" href="https://cdn.jsdelivr.net/npm/c0ckp1t@1.0.0/favicon-32x32.png" sizes="32x32" type="image/png">
-  <link rel="icon" href="https://cdn.jsdelivr.net/npm/c0ckp1t@1.0.0/favicon-64x64.png" sizes="64x64" type="image/png">
-  <link rel="icon" href="https://cdn.jsdelivr.net/npm/c0ckp1t@1.0.0/favicon-192x192.png" sizes="192x192" type="image/png">
+  <link rel="icon" href="https://cdn.jsdelivr.net/npm/c0ckp1t@latest/favicon-32x32.png" sizes="32x32" type="image/png">
+  <link rel="icon" href="https://cdn.jsdelivr.net/npm/c0ckp1t@latest/favicon-64x64.png" sizes="64x64" type="image/png">
+  <link rel="icon" href="https://cdn.jsdelivr.net/npm/c0ckp1t@latest/favicon-192x192.png" sizes="192x192" type="image/png">
 
-  <link href="https://cdn.jsdelivr.net/npm/c0ckp1t@1.0.0/css/bootstrap.min.css"  type="text/css" rel="stylesheet">
-  <link href="https://cdn.jsdelivr.net/npm/c0ckp1t@1.0.0/css/fontawesome/solid.min.css" rel="stylesheet">
-  <link href="https://cdn.jsdelivr.net/npm/c0ckp1t@1.0.0/css/fontawesome/fontawesome.min.css" rel="stylesheet">
-  <link href="https://cdn.jsdelivr.net/npm/c0ckp1t@1.0.0/js_ext/highlight/stackoverflow-dark.min.css" rel="stylesheet">
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/c0ckp1t@1.0.0/js_ext/markdown/katex.min.css">
-  <link href="https://cdn.jsdelivr.net/npm/c0ckp1t@1.0.0/style.css"  type="text/css" rel="stylesheet">
+  <link href="https://cdn.jsdelivr.net/npm/c0ckp1t@latest/css/bootstrap.min.css"  type="text/css" rel="stylesheet">
+  <link href="https://cdn.jsdelivr.net/npm/c0ckp1t@latest/css/fontawesome/solid.min.css" rel="stylesheet">
+  <link href="https://cdn.jsdelivr.net/npm/c0ckp1t@latest/css/fontawesome/fontawesome.min.css" rel="stylesheet">
+  <link href="https://cdn.jsdelivr.net/npm/c0ckp1t@latest/js_ext/highlight/stackoverflow-dark.min.css" rel="stylesheet">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/c0ckp1t@latest/js_ext/markdown/katex.min.css">
+  <link href="/style.css"  type="text/css" rel="stylesheet">
 
   <script type="importmap">
     {
         "imports": {
-            "Constants": "/Constants.mjs",
-            "Logging": "https://cdn.jsdelivr.net/npm/c0ckp1t@1.0.0/core/Logging.mjs",
-            "JsUtils": "https://cdn.jsdelivr.net/npm/c0ckp1t@1.0.0/core/JsUtils.mjs",
-            "GlobalStore": "https://cdn.jsdelivr.net/npm/c0ckp1t@1.0.0/core/GlobalStore.mjs",
-            "NotifyUtils": "https://cdn.jsdelivr.net/npm/c0ckp1t@1.0.0/core/notify/NotifyUtils.mjs",
-            "WsUtils": "https://cdn.jsdelivr.net/npm/c0ckp1t@1.0.0/core/WsUtils.mjs",
-            "IslandDefault": "https://cdn.jsdelivr.net/npm/c0ckp1t@1.0.0/core/IslandDefault.mjs",
-
-            "vue3-sfc-loader": "https://cdn.jsdelivr.net/npm/c0ckp1t@1.0.0/js_ext/vue3-sfc-loader.esm.js",
-            "vue": "https://cdn.jsdelivr.net/npm/c0ckp1t@1.0.0/js_ext/vue.esm-browser.prod.min.js",
-            "vue-router": "https://cdn.jsdelivr.net/npm/c0ckp1t@1.0.0/js_ext/vue-router.esm-browser.prod.js",
-            "idb-keyval": "https://cdn.jsdelivr.net/npm/c0ckp1t@1.0.0/js_ext/idb-keyval-6.2.2.mjs"
+            "C0ckp1tDemoConfig": "https://cdn.jsdelivr.net/npm/c0ckp1t@latest/c0ckp1t-demo/Constants.mjs",
+            "C0ckp1tAppConfig": "https://cdn.jsdelivr.net/npm/c0ckp1t@latest/C0ckp1tAppConfig.mjs",
+            "Logging": "https://cdn.jsdelivr.net/npm/c0ckp1t@latest/core/Logging.mjs",
+            "JsUtils": "https://cdn.jsdelivr.net/npm/c0ckp1t@latest/core/JsUtils.mjs",
+            "GlobalStore": "https://cdn.jsdelivr.net/npm/c0ckp1t@latest/core/GlobalStore.mjs",
+            "NotifyUtils": "https://cdn.jsdelivr.net/npm/c0ckp1t@latest/core/notify/NotifyUtils.mjs",
+            "WsUtils": "https://cdn.jsdelivr.net/npm/c0ckp1t@latest/core/WsUtils.mjs",
+            "IslandDefault": "https://cdn.jsdelivr.net/npm/c0ckp1t@latest/core/IslandDefault.mjs",
+
+            "vue3-sfc-loader": "https://cdn.jsdelivr.net/npm/c0ckp1t@latest/js_ext/vue3-sfc-loader.esm.js",
+            "vue": "https://cdn.jsdelivr.net/npm/c0ckp1t@latest/js_ext/vue.esm-browser.prod.min.js",
+            "vue-router": "https://cdn.jsdelivr.net/npm/c0ckp1t@latest/js_ext/vue-router.esm-browser.prod.js",
+            "idb-keyval": "https://cdn.jsdelivr.net/npm/c0ckp1t@latest/js_ext/idb-keyval-6.2.2.mjs",
+            "mitt": "https://cdn.jsdelivr.net/npm/c0ckp1t@latest/js_ext/mitt.mjs",
+            "msgpack": "https://cdn.jsdelivr.net/npm/c0ckp1t@latest/js_ext/msgpack.mjs",
+            "xstate": "https://cdn.jsdelivr.net/npm/c0ckp1t@latest/js_ext/xstate.web.mjs",
+            "json-viewer": "https://cdn.jsdelivr.net/npm/c0ckp1t@latest/js_ext/json-viewer.bundle.js"
         }
     }
   </script>
@@ -44,20 +49,23 @@
 </body>
 
 <script type="module">
-import Constants from 'Constants'
+import {init as initLogger} from 'Logging';
+import Constants from 'C0ckp1tDemoConfig'
+initLogger(Constants)
+
 import {api as apiMain} from 'GlobalStore'
 apiMain.init("app-default", Constants)
 </script>
 
 <!-- =================== SCRIPTS ===================  -->
-<script src="https://cdn.jsdelivr.net/npm/c0ckp1t@1.0.0/js_ext/loglevel.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/c0ckp1t@1.0.0/js_ext/loglevel-plugin-prefix.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/c0ckp1t@1.0.0/js_ext/bootstrap.bundle.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/c0ckp1t@1.0.0/js_ext/highlight/highlight.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/c0ckp1t@1.0.0/js_ext/markdown/katex.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/c0ckp1t@1.0.0/js_ext/markdown/markdown-it.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/c0ckp1t@1.0.0/js_ext/markdown/markdownItAnchor.umd.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/c0ckp1t@1.0.0/js_ext/rxjs.umd.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/c0ckp1t@1.0.0/js_ext/moment.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/c0ckp1t@1.0.0/js_ext/ace-editor/ace.js" type="text/javascript" charset="utf-8"></script>
+<script src="https://cdn.jsdelivr.net/npm/c0ckp1t@latest/js_ext/loglevel.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/c0ckp1t@latest/js_ext/loglevel-plugin-prefix.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/c0ckp1t@latest/js_ext/bootstrap.bundle.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/c0ckp1t@latest/js_ext/highlight/highlight.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/c0ckp1t@latest/js_ext/markdown/katex.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/c0ckp1t@latest/js_ext/markdown/markdown-it.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/c0ckp1t@latest/js_ext/markdown/markdownItAnchor.umd.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/c0ckp1t@latest/js_ext/rxjs.umd.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/c0ckp1t@latest/js_ext/moment.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/c0ckp1t@latest/js_ext/ace-editor/ace.js" type="text/javascript" charset="utf-8"></script>
 </html>

package/index.html

@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>C0ckp1t</title>
+  <link rel="icon" href="/favicon-32x32.png" sizes="32x32" type="image/png">
+  <link rel="icon" href="/favicon-64x64.png" sizes="64x64" type="image/png">
+  <link rel="icon" href="/favicon-192x192.png" sizes="192x192" type="image/png">
+
+  <link href="/css/bootstrap.min.css"  type="text/css" rel="stylesheet">
+  <link href="/css/fontawesome/solid.min.css" rel="stylesheet">
+  <link href="/css/fontawesome/fontawesome.min.css" rel="stylesheet">
+  <link href="/js_ext/highlight/stackoverflow-dark.min.css" rel="stylesheet">
+  <link rel="stylesheet" href="/js_ext/markdown/katex.min.css">
+  <link href="/style.css"  type="text/css" rel="stylesheet">
+
+  <script type="importmap">
+    {
+        "imports": {
+            "C0ckp1tAppConfig": "/C0ckp1tAppConfig.mjs",
+            "C0ckp1tDemoConfig": "/c0ckp1t-demo/Constants.mjs",
+            "Logging": "/core/Logging.mjs",
+            "JsUtils": "/core/JsUtils.mjs",
+            "GlobalStore": "/core/GlobalStore.mjs",
+            "NotifyUtils": "/core/notify/NotifyUtils.mjs",
+            "WsUtils": "/core/WsUtils.mjs",
+            "IslandDefault": "/core/IslandDefault.mjs",
+
+            "vue3-sfc-loader": "/js_ext/vue3-sfc-loader.esm.js",
+            "vue": "/js_ext/vue.esm-browser.prod.min.js",
+            "vue-router": "/js_ext/vue-router.esm-browser.prod.js",
+            "idb-keyval": "/js_ext/idb-keyval-6.2.2.mjs",
+            "mitt": "/js_ext/mitt.mjs",
+            "msgpack": "/js_ext/msgpack.mjs",
+            "xstate": "/js_ext/xstate.web.mjs",
+            "json-viewer": "/js_ext/json-viewer.bundle.js"
+        }
+    }
+  </script>
+
+</head>
+
+<body class="main-body">
+  <div id="app-default">
+    <app-main></app-main>
+  </div>
+</body>
+
+<script type="module">
+import {init as initLogger} from 'Logging';
+import Constants from 'C0ckp1tAppConfig'
+initLogger(Constants)
+
+import {api as apiMain} from 'GlobalStore'
+apiMain.init("app-default", Constants)
+</script>
+
+<!-- =================== SCRIPTS ===================  -->
+<script src="/js_ext/loglevel.min.js"></script>
+<script src="/js_ext/loglevel-plugin-prefix.min.js"></script>
+
+<script src="/js_ext/bootstrap.bundle.min.js"></script>
+
+<script src="/js_ext/highlight/highlight.min.js"></script>
+<script src="/js_ext/markdown/katex.min.js"></script>
+<script src="/js_ext/markdown/markdown-it.min.js"></script>
+<script src="/js_ext/markdown/markdownItAnchor.umd.js"></script>
+
+<script src="/js_ext/rxjs.umd.min.js"></script>
+<script src="/js_ext/moment.min.js"></script>
+<script src="/js_ext/ace-editor/ace.js" type="text/javascript" charset="utf-8"></script>
+</html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "c0ckp1t",
-  "version": "1.0.1",
+  "version": "1.0.4",
   "description": "A Vue 3 zero-build web dashboard framework with Islands architecture, WebSocket backends, and reusable UI components",
   "type": "module",
   "license": "Apache-2.0",
@@ -24,7 +24,8 @@
   ],
   "files": [
     "index-cdn.html",
-    "Constants.mjs",
+    "index.html",
+    "Constants2.mjs",
     "style.css",
     "favicon.ico",
     "favicon-32x32.png",

package/c0ckp1t-demo/pages/devices.vue

@@ -1,63 +0,0 @@
-<script setup>
-/*
-  [VARS] - name, init, imports, template, script, style
-
-  Usage:
-    const PageXXXX = defineAsyncComponent(() => import("/v3/workflows/wf/www/pages/homepage.vue"))
-    <page-xxxx></page-xxxx>
-*/
-// ________________________________________________________________________________
-// IMPORTS
-// ________________________________________________________________________________
-import {reactive, computed, ref, onMounted, onUnmounted, defineAsyncComponent, watch} from 'vue'
-import {getLogger} from "Logging";
-import {api as notify} from "NotifyUtils"
-import {store as storeLocal, api as apiLocal, registry} from '../store.mjs'
-import { store as storeMain,  api as apiMain} from 'GlobalStore'
-// !# C0CKP1T_START imports
-
-// !# C0CKP1T_END imports
-
-// ________________________________________________________________________________
-// LOGGING
-// ________________________________________________________________________________
-const LOG_HEADER = "pages/homepage.vue"
-const logger = getLogger(LOG_HEADER)
-logger.debug("[INIT]")
-
-// !# C0CKP1T_START script
-
-// !# 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="`Devices(endpointId=${storeLocal.endpoint})`" :visible="true">
-
-    </x-section>
-<!--  !# C0CKP1T_END template -->
-
-</template>
-
-<style scoped>
-/* !# C0CKP1T_START style */
-
-/* !# C0CKP1T_END style */
-</style>
-
-

package/c0ckp1t-demo/pages/report.vue

@@ -1,63 +0,0 @@
-<script setup>
-/*
-  [VARS] - name, init, imports, template, script, style
-
-  Usage:
-    const PageXXXX = defineAsyncComponent(() => import("/v3/workflows/wf/www/pages/homepage.vue"))
-    <page-xxxx></page-xxxx>
-*/
-// ________________________________________________________________________________
-// IMPORTS
-// ________________________________________________________________________________
-import {reactive, computed, ref, onMounted, onUnmounted, defineAsyncComponent, watch} from 'vue'
-import {getLogger} from "Logging";
-import {api as notify} from "NotifyUtils"
-import {store as storeLocal, api as apiLocal, registry} from '../store.mjs'
-import { store as storeMain,  api as apiMain} from 'GlobalStore'
-// !# C0CKP1T_START imports
-
-// !# C0CKP1T_END imports
-
-// ________________________________________________________________________________
-// LOGGING
-// ________________________________________________________________________________
-const LOG_HEADER = "pages/homepage.vue"
-const logger = getLogger(LOG_HEADER)
-logger.debug("[INIT]")
-
-// !# C0CKP1T_START script
-
-// !# 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="`Report (endpointId=${storeLocal.endpoint})`" :visible="true">
-
-    </x-section>
-<!--  !# C0CKP1T_END template -->
-
-</template>
-
-<style scoped>
-/* !# C0CKP1T_START style */
-
-/* !# C0CKP1T_END style */
-</style>
-
-