qdadm 0.54.0 → 0.55.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qdadm",
-  "version": "0.54.0",
+  "version": "0.55.0",
   "description": "Vue 3 framework for admin dashboards with PrimeVue",
   "author": "quazardous",
   "license": "MIT",
@@ -27,7 +27,7 @@
     "./editors": "./src/editors/index.js",
     "./module": "./src/module/index.js",
     "./utils": "./src/utils/index.js",
-    "./debug": "./src/debug/index.js",
+    "./modules/debug": "./src/modules/debug/index.js",
     "./styles": "./src/styles/index.scss",
     "./styles/breakpoints": "./src/styles/_breakpoints.scss",
     "./gen": "./src/gen/index.js",

package/src/kernel/Kernel.js

@@ -466,6 +466,17 @@ export class Kernel {
         continue
       }
 
+      // Load module styles if defined (must happen before connect)
+      if (typeof module.loadStyles === 'function') {
+        const styleResult = module.loadStyles()
+        // Fire-and-forget for async style loading in sync context
+        if (styleResult instanceof Promise) {
+          styleResult.catch(err => {
+            console.warn(`[Kernel] Module '${name}' styles failed:`, err)
+          })
+        }
+      }
+
       // Connect module (sync - async modules will be fire-and-forget)
       const result = module.connect(ctx)
 
@@ -514,6 +525,11 @@ export class Kernel {
         continue
       }
 
+      // Load module styles if defined (must happen before connect)
+      if (typeof module.loadStyles === 'function') {
+        await module.loadStyles()
+      }
+
       // Connect module (await async)
       await module.connect(ctx)
 
@@ -1336,7 +1352,7 @@ export class Kernel {
 
   /**
    * Get the DebugModule instance if loaded
-   * @returns {import('../debug/DebugModule.js').DebugModule|null}
+   * @returns {import('../modules/debug/DebugModule.js').DebugModule|null}
    */
   getDebugModule() {
     return this.moduleLoader?._loaded?.get('debug') ?? null
@@ -1345,7 +1361,7 @@ export class Kernel {
   /**
    * Shorthand accessor for debug bridge
    * Allows `kernel.debugBar.toggle()` syntax
-   * @returns {import('../debug/DebugBridge.js').DebugBridge|null}
+   * @returns {import('../modules/debug/DebugBridge.js').DebugBridge|null}
    */
   get debugBar() {
     const debugModule = this.getDebugModule()

package/src/kernel/Module.js

@@ -48,6 +48,20 @@ export class Module {
    */
   static priority = 0
 
+  /**
+   * Path to module styles (relative import or absolute)
+   * Set in subclass to auto-load CSS/SCSS when module connects.
+   * Styles are loaded once and cached.
+   *
+   * @example
+   * class DebugModule extends Module {
+   *   static styles = () => import('./styles.scss')
+   * }
+   *
+   * @type {(() => Promise<any>)|null}
+   */
+  static styles = null
+
   /**
    * @param {Object} options - Module configuration options
    */
@@ -55,6 +69,7 @@ export class Module {
     this.options = options
     this.ctx = null
     this._signalCleanups = []
+    this._stylesLoaded = false
   }
 
   /**
@@ -75,6 +90,23 @@ export class Module {
     return true
   }
 
+  /**
+   * Load module styles if defined
+   * Called automatically by ModuleLoader before connect()
+   * @returns {Promise<void>}
+   */
+  async loadStyles() {
+    const stylesLoader = this.constructor.styles
+    if (this._stylesLoaded || !stylesLoader) return
+
+    try {
+      await stylesLoader()
+      this._stylesLoaded = true
+    } catch (e) {
+      console.warn(`[${this.constructor.name}] Failed to load styles:`, e)
+    }
+  }
+
   /**
    * Connect module to kernel - main registration point
    * Override in subclass to register entities, routes, etc.

package/src/kernel/ModuleLoader.js

@@ -294,8 +294,12 @@ export class ModuleLoader {
         continue
       }
 
-      // Connect module
+      // Load styles and connect module
       try {
+        // Load module styles if defined (Module subclasses only)
+        if (typeof module.loadStyles === 'function') {
+          await module.loadStyles()
+        }
         await module.connect(ctx)
         this._loaded.set(name, module)
         this._loadOrder.push(name)

package/src/{debug → modules/debug}/DebugModule.js

@@ -19,7 +19,7 @@
  */
 
 import { h, inject, defineComponent } from 'vue'
-import { Module } from '../kernel/Module.js'
+import { Module } from '../../kernel/Module.js'
 import { createDebugBridge } from './DebugBridge.js'
 import { ErrorCollector } from './ErrorCollector.js'
 import { SignalCollector } from './SignalCollector.js'
@@ -81,6 +81,12 @@ export class DebugModule extends Module {
    */
   static priority = 1000
 
+  /**
+   * Module styles - loaded automatically before connect()
+   * @type {() => Promise<any>}
+   */
+  static styles = () => import('./styles.scss')
+
   /**
    * Create a new DebugModule
    *

package/src/{debug → modules/debug}/RouterCollector.js

@@ -12,7 +12,7 @@
  */
 
 import { Collector } from './Collector.js'
-import { computeSemanticBreadcrumb } from '../composables/useSemanticBreadcrumb.js'
+import { computeSemanticBreadcrumb } from '../../composables/useSemanticBreadcrumb.js'
 
 /**
  * Collector for Vue Router state visualization

package/src/{debug → modules/debug}/components/DebugBar.vue

@@ -722,531 +722,3 @@ function getCollectorColor(name) {
   </Teleport>
 </template>
 
-<style scoped>
-/* Minimized button */
-.debug-minimized {
-  position: fixed;
-  bottom: 1rem;
-  right: 1rem;
-  width: 44px;
-  height: 44px;
-  border-radius: 8px;
-  background: #18181b;
-  border: 1px solid #3f3f46;
-  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  transition: transform 0.15s;
-}
-.debug-minimized:hover {
-  transform: scale(1.08);
-  border-color: #60a5fa;
-}
-
-/* Separate badges */
-.debug-badge {
-  position: absolute;
-  min-width: 16px;
-  height: 16px;
-  padding: 0 4px;
-  border-radius: 8px;
-  font-size: 10px;
-  font-weight: 600;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 2px;
-}
-.debug-badge .pi {
-  font-size: 8px;
-}
-
-/* Header inline badges */
-.debug-header-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 3px;
-  padding: 2px 6px;
-  border-radius: 10px;
-  font-size: 11px;
-  font-weight: 600;
-}
-.debug-header-badge .pi {
-  font-size: 10px;
-}
-.debug-header-badge-error {
-  background: #ef4444;
-  color: white;
-}
-.debug-header-badge-signal {
-  background: #8b5cf6;
-  color: white;
-}
-.debug-badge-error {
-  top: -4px;
-  right: -4px;
-  background: #ef4444;
-  color: white;
-}
-.debug-badge-signal {
-  bottom: -4px;
-  right: -4px;
-  background: #8b5cf6;
-  color: white;
-}
-
-/* Panel base */
-.debug-panel {
-  position: fixed;
-  background: #18181b;
-  border: 1px solid #3f3f46;
-  font-family: system-ui, sans-serif;
-  font-size: 13px;
-  color: #f4f4f5;
-  display: flex;
-  flex-direction: column;
-}
-
-/* Bottom mode */
-.debug-bottom {
-  bottom: 0; left: 0; right: 0;
-  border-top: 1px solid #3f3f46;
-  border-left: none; border-right: none; border-bottom: none;
-}
-.debug-bottom.debug-expanded {
-  min-height: 100px;
-  max-height: 600px;
-}
-
-/* Right mode - vertical header on left, horizontal slide */
-.debug-right {
-  top: 0; right: 0; bottom: 0;
-  flex-direction: row;
-  border-left: 1px solid #3f3f46;
-  border-top: none; border-right: none; border-bottom: none;
-  transition: transform 0.2s ease-out;
-}
-.debug-right:not(.debug-expanded) {
-  transform: translateX(calc(100% - 44px));
-}
-.debug-right.debug-expanded {
-  min-width: 200px;
-  max-width: 800px;
-  transform: translateX(0);
-}
-
-/* Window mode - floating draggable/resizable */
-.debug-window {
-  /* Window appearance */
-  position: fixed;
-  border-radius: 8px;
-  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
-  border: 1px solid #3f3f46;
-  min-width: 280px;
-  min-height: 200px;
-}
-.debug-window .debug-header {
-  cursor: move;
-  user-select: none;
-  flex-wrap: nowrap;
-}
-.debug-window .debug-tabs {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-}
-.debug-window .debug-actions {
-  flex-shrink: 0;
-}
-.debug-window .debug-content {
-  flex: 1;
-  min-height: 0;
-  overflow: auto;
-}
-.debug-resize-handle {
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  width: 16px;
-  height: 16px;
-  cursor: nwse-resize;
-  background: linear-gradient(135deg, transparent 50%, #3f3f46 50%);
-  border-bottom-right-radius: 8px;
-  z-index: 10;
-}
-.debug-resize-handle:hover {
-  background: linear-gradient(135deg, transparent 50%, #60a5fa 50%);
-}
-
-/* Panel resize handles for docked modes */
-.debug-panel-resize {
-  position: absolute;
-  z-index: 10;
-  background: transparent;
-}
-.debug-panel-resize-top {
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 4px;
-  cursor: ns-resize;
-}
-.debug-panel-resize-top:hover {
-  background: linear-gradient(180deg, #60a5fa 0%, transparent 100%);
-}
-.debug-panel-resize-left {
-  top: 0;
-  left: 0;
-  bottom: 0;
-  width: 4px;
-  cursor: ew-resize;
-}
-.debug-panel-resize-left:hover {
-  background: linear-gradient(90deg, #60a5fa 0%, transparent 100%);
-}
-
-.debug-right .debug-header {
-  flex-direction: column;
-  width: 44px;
-  padding: 8px 6px;
-  border-bottom: none;
-  border-right: 1px solid #3f3f46;
-  align-items: center;
-  gap: 4px;
-}
-.debug-right .debug-title {
-  flex-direction: column;
-  gap: 4px;
-}
-.debug-right .debug-title span:not(.debug-header-badge) {
-  display: none;
-}
-.debug-right .debug-tabs {
-  flex-direction: column;
-  margin-left: 0;
-  margin-top: 8px;
-  gap: 2px;
-}
-.debug-right .debug-tab {
-  width: 32px;
-  height: 32px;
-  padding: 0;
-  justify-content: center;
-  position: relative;
-}
-.debug-right .debug-tab-label {
-  display: none;
-}
-.debug-right .debug-tab .p-badge {
-  position: absolute;
-  top: -2px;
-  right: -2px;
-  min-width: 14px;
-  height: 14px;
-  font-size: 9px;
-  padding: 0 3px;
-}
-/* Content header for right mode */
-.debug-content-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 6px 12px;
-  background: #27272a;
-  border-bottom: 1px solid #3f3f46;
-  flex-shrink: 0;
-}
-.debug-content-title {
-  font-weight: 600;
-  font-size: 12px;
-  color: #a1a1aa;
-}
-.debug-content-controls {
-  display: flex;
-  gap: 4px;
-}
-.debug-content-controls .debug-tab-toggle,
-.debug-content-controls .debug-tab-clear {
-  margin-left: 0;
-  width: 22px;
-  height: 22px;
-}
-.debug-right .debug-actions {
-  flex-direction: column;
-  margin-left: 0;
-  margin-top: auto;
-  gap: 2px;
-}
-.debug-right .debug-actions .p-button {
-  width: 28px;
-  height: 28px;
-}
-.debug-right .debug-content {
-  flex: 1;
-  min-width: 0;
-}
-
-/* Fullscreen - standalone mode like window but full viewport */
-.debug-fullscreen {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  width: auto;
-  height: auto;
-  border: none;
-  border-radius: 0;
-  flex-direction: column;
-}
-.debug-fullscreen .debug-header {
-  flex-direction: row;
-  width: auto;
-  height: auto;
-  padding: 8px 16px;
-  border-bottom: 1px solid #3f3f46;
-  border-right: none;
-}
-.debug-fullscreen .debug-title {
-  flex-direction: row;
-}
-.debug-fullscreen .debug-title span:not(.debug-header-badge) {
-  display: inline;
-}
-.debug-fullscreen .debug-tabs {
-  flex-direction: row;
-  margin-left: 12px;
-  margin-top: 0;
-}
-.debug-fullscreen .debug-tab {
-  width: auto;
-  height: auto;
-  padding: 4px 10px;
-}
-.debug-fullscreen .debug-tab-label {
-  display: inline;
-}
-.debug-fullscreen .debug-tab .p-badge {
-  position: static;
-}
-.debug-fullscreen .debug-actions {
-  flex-direction: row;
-  margin-left: auto;
-  margin-top: 0;
-}
-.debug-fullscreen .debug-actions .p-button {
-  width: auto;
-  height: auto;
-}
-.debug-fullscreen .debug-content {
-  flex: 1;
-  min-height: 0;
-  overflow: auto;
-}
-
-/* Header */
-.debug-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 6px 12px;
-  background: #27272a;
-  border-bottom: 1px solid #3f3f46;
-  flex-shrink: 0;
-}
-.debug-title {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-weight: 600;
-}
-.debug-title-draggable {
-  cursor: grab;
-}
-.debug-title-draggable:active {
-  cursor: grabbing;
-}
-.debug-tabs {
-  display: flex;
-  gap: 2px;
-  margin-left: 12px;
-}
-.debug-tabs-compact {
-  gap: 1px;
-}
-.debug-tabs-compact .debug-tab {
-  padding: 4px 6px;
-}
-.debug-tab {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  padding: 4px 10px;
-  background: transparent;
-  border: none;
-  border-radius: 4px;
-  color: #a1a1aa;
-  cursor: pointer;
-  font-size: 12px;
-}
-.debug-tab:hover {
-  background: #3f3f46;
-  color: #f4f4f5;
-}
-.debug-tab-active {
-  background: #3f3f46;
-  color: #a78bfa;
-}
-
-/* Tabs dropdown mode */
-.debug-tabs-dropdown {
-  position: relative;
-  margin-left: 12px;
-  overflow: visible;
-}
-.debug-dropdown-trigger {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 4px 10px;
-  background: #3f3f46;
-  border: none;
-  border-radius: 4px;
-  color: #f4f4f5;
-  cursor: pointer;
-  font-size: 12px;
-}
-.debug-dropdown-trigger:hover {
-  background: #52525b;
-}
-.debug-dropdown-trigger .pi-chevron-down {
-  font-size: 10px;
-  color: #71717a;
-  margin-left: 4px;
-}
-.debug-dropdown-menu {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  margin-top: 4px;
-  background: #27272a;
-  border: 1px solid #3f3f46;
-  border-radius: 6px;
-  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
-  min-width: 160px;
-  z-index: 10001;
-  padding: 4px;
-}
-.debug-dropdown-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  width: 100%;
-  padding: 6px 10px;
-  background: transparent;
-  border: none;
-  border-radius: 4px;
-  color: #a1a1aa;
-  cursor: pointer;
-  font-size: 12px;
-  text-align: left;
-}
-.debug-dropdown-item:hover {
-  background: #3f3f46;
-  color: #f4f4f5;
-}
-.debug-dropdown-item-active {
-  background: #3f3f46;
-  color: #a78bfa;
-}
-.debug-actions {
-  display: flex;
-  gap: 2px;
-  margin-left: auto;
-}
-
-/* Content */
-.debug-content {
-  flex: 1;
-  overflow: auto;
-  background: #18181b;
-}
-.debug-empty {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  color: #71717a;
-  gap: 8px;
-}
-
-/* Per-collector toggle button */
-.debug-tab-toggle {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 18px;
-  height: 18px;
-  margin-left: 4px;
-  padding: 0;
-  background: transparent;
-  border: none;
-  border-radius: 3px;
-  color: #71717a;
-  cursor: pointer;
-  font-size: 9px;
-}
-.debug-tab-toggle:hover {
-  background: #52525b;
-  color: #f4f4f5;
-}
-.debug-tab-toggle-paused {
-  color: #f59e0b;
-}
-.debug-tab-clear {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 18px;
-  height: 18px;
-  margin-left: 2px;
-  padding: 0;
-  background: transparent;
-  border: none;
-  border-radius: 3px;
-  color: #71717a;
-  cursor: pointer;
-  font-size: 9px;
-}
-.debug-tab-clear:hover {
-  background: #ef4444;
-  color: white;
-}
-
-/* Custom mode toggle button */
-.debug-mode-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 2rem;
-  height: 2rem;
-  padding: 0;
-  background: transparent;
-  border: none;
-  border-radius: 50%;
-  color: #a1a1aa;
-  cursor: pointer;
-  font-size: 18px;
-  font-weight: bold;
-  font-family: monospace;
-  line-height: 1;
-  transition: background-color 0.15s, color 0.15s;
-}
-.debug-mode-btn:hover {
-  background: rgba(255, 255, 255, 0.1);
-  color: #f4f4f5;
-}
-</style>