qdadm 0.57.0 → 0.58.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qdadm",
-  "version": "0.57.0",
+  "version": "0.58.0",
   "description": "Vue 3 framework for admin dashboards with PrimeVue",
   "author": "quazardous",
   "license": "MIT",

package/src/auth/SessionAuthAdapter.js

@@ -143,6 +143,16 @@ export class SessionAuthAdapter {
     this._user = null
   }
 
+  /**
+   * Destroy session (catastrophic/silent logout)
+   *
+   * Clears token WITHOUT triggering normal logout signals.
+   * Used by DebugBar to test how the app handles unexpected session loss.
+   */
+  destroySession() {
+    this._token = null
+  }
+
   /**
    * Validate that the adapter is properly configured
    *
@@ -316,6 +326,15 @@ export class LocalStorageSessionAuthAdapter extends SessionAuthAdapter {
     return original
   }
 
+  /**
+   * Destroy session - clears token and localStorage
+   * @override
+   */
+  destroySession = () => {
+    this._token = null
+    localStorage.removeItem(this._storageKey)
+  }
+
   // ─────────────────────────────────────────────────────────────────
   // Signal integration
   // ─────────────────────────────────────────────────────────────────

package/src/components/InfoBanner.vue

@@ -35,10 +35,10 @@ const props = defineProps({
     type: [String, Boolean],
     default: null
   },
-  // Allow closing the banner
+  // Allow closing the banner (default: true)
   closable: {
     type: Boolean,
-    default: false
+    default: true
   }
 })
 

package/src/components/display/CopyableId.vue

@@ -6,8 +6,7 @@
  *   <CopyableId :value="entityId" label="ID" />
  *   <CopyableId :value="apiKey" label="API Key" />
  */
-import { ref } from 'vue'
-import { useToast } from 'primevue/usetoast'
+import { ref, inject } from 'vue'
 import Button from 'primevue/button'
 
 const props = defineProps({
@@ -21,29 +20,19 @@ const props = defineProps({
   }
 })
 
-const toast = useToast()
+const orchestrator = inject('qdadmOrchestrator', null)
 const copied = ref(false)
 
 async function copyToClipboard() {
   try {
     await navigator.clipboard.writeText(props.value)
     copied.value = true
-    toast.add({
-      severity: 'success',
-      summary: 'Copied',
-      detail: `${props.label} copied to clipboard`,
-      life: 2000
-    })
+    orchestrator?.toast.success('Copied', `${props.label} copied to clipboard`, 'CopyableId')
     setTimeout(() => {
       copied.value = false
     }, 2000)
   } catch {
-    toast.add({
-      severity: 'error',
-      summary: 'Error',
-      detail: 'Failed to copy to clipboard',
-      life: 3000
-    })
+    orchestrator?.toast.error('Error', 'Failed to copy to clipboard', 'CopyableId')
   }
 }
 </script>

package/src/components/index.js

@@ -18,7 +18,6 @@ export { default as DefaultMenu } from './layout/defaults/DefaultMenu.vue'
 export { default as DefaultFooter } from './layout/defaults/DefaultFooter.vue'
 export { default as DefaultUserInfo } from './layout/defaults/DefaultUserInfo.vue'
 export { default as DefaultBreadcrumb } from './layout/defaults/DefaultBreadcrumb.vue'
-export { default as DefaultToaster } from './layout/defaults/DefaultToaster.vue'
 
 // Forms
 export { default as FormPage } from './forms/FormPage.vue'

package/src/components/layout/BaseLayout.vue

@@ -44,7 +44,7 @@ import DefaultMenu from './defaults/DefaultMenu.vue'
 import DefaultFooter from './defaults/DefaultFooter.vue'
 import DefaultUserInfo from './defaults/DefaultUserInfo.vue'
 import DefaultBreadcrumb from './defaults/DefaultBreadcrumb.vue'
-import DefaultToaster from './defaults/DefaultToaster.vue'
+// DefaultToaster removed - Toast is now provided by Kernel at root level
 
 const slots = useSlots()
 const hasMainSlot = !!slots.main
@@ -110,11 +110,7 @@ provide('qdadmNavlinksOverride', navlinksOverride)
       </div>
     </div>
 
-    <!-- Toaster zone: toast notifications -->
-    <Zone
-      :name="LAYOUT_ZONES.TOASTER"
-      :default-component="DefaultToaster"
-    />
+    <!-- Toast is now provided by Kernel at root level -->
 
     <!-- Confirm dialog (global) -->
     <ConfirmDialog />

package/src/components/layout/PageNav.vue

@@ -81,6 +81,13 @@ const childNavlinks = computed(() => {
   const entityName = route.meta?.entity
   if (!entityName) return []
 
+  // Get current entity's manager to determine idField
+  const currentManager = getManager(entityName)
+  const entityId = route.params[currentManager?.idField || 'id']
+
+  // Only show children when we have an entity ID (not on create pages)
+  if (!entityId) return []
+
   const children = getChildRoutes(entityName)
   if (children.length === 0) return []
 
@@ -93,10 +100,6 @@ const childNavlinks = computed(() => {
 
   if (navRoutes.length === 0) return []
 
-  // Get current entity's manager to determine idField
-  const currentManager = getManager(entityName)
-  const entityId = route.params[currentManager?.idField || 'id']
-
   // Build navlinks to child routes
   return navRoutes.map(childRoute => {
     const childManager = childRoute.meta?.entity ? getManager(childRoute.meta.entity) : null

package/src/components/layout/defaults/DefaultMenu.vue

@@ -174,6 +174,7 @@ watch(() => route?.path, () => {
   align-items: center;
   gap: 0.75rem;
   padding: 0.625rem 1.5rem;
+  font-size: 0.9375rem;
   color: var(--p-surface-300, #cbd5e1);
   text-decoration: none;
   transition: all 0.15s;

package/src/components/layout/defaults/index.js

@@ -11,7 +11,6 @@ export { default as DefaultMenu } from './DefaultMenu.vue'
 export { default as DefaultFooter } from './DefaultFooter.vue'
 export { default as DefaultUserInfo } from './DefaultUserInfo.vue'
 export { default as DefaultBreadcrumb } from './DefaultBreadcrumb.vue'
-export { default as DefaultToaster } from './DefaultToaster.vue'
 
 // FormLayout defaults
 export { default as DefaultFormActions } from './DefaultFormActions.vue'

package/src/components/lists/ListPage.vue

@@ -218,6 +218,7 @@ function onSort(event) {
           :label="resolveLabel(action.label)"
           :icon="action.icon"
           :severity="action.severity"
+          :size="action.size || 'small'"
           :loading="action.isLoading"
           @click="action.onClick"
         />

package/src/components/pages/LoginPage.vue

@@ -19,7 +19,6 @@
  */
 import { ref, inject, computed } from 'vue'
 import { useRouter } from 'vue-router'
-import { useToast } from 'primevue/usetoast'
 import Card from 'primevue/card'
 import InputText from 'primevue/inputtext'
 import Password from 'primevue/password'
@@ -102,7 +101,6 @@ const props = defineProps({
 const emit = defineEmits(['login', 'error'])
 
 const router = useRouter()
-const toast = useToast()
 const authAdapter = inject('authAdapter', null)
 const orchestrator = inject('qdadmOrchestrator', null)
 const appConfig = inject('qdadmApp', {})
@@ -115,12 +113,7 @@ const displayTitle = computed(() => props.title || appConfig.name || 'Admin')
 
 async function handleLogin() {
   if (!authAdapter?.login) {
-    toast.add({
-      severity: 'error',
-      summary: 'Configuration Error',
-      detail: 'No auth adapter configured',
-      life: 5000
-    })
+    orchestrator?.toast.error('Configuration Error', 'No auth adapter configured', 'LoginPage')
     return
   }
 
@@ -131,17 +124,13 @@ async function handleLogin() {
       password: password.value
     })
 
-    toast.add({
-      severity: 'success',
-      summary: 'Welcome',
-      detail: `Logged in as ${result.user?.username || result.user?.email || username.value}`,
-      life: 3000
-    })
-
-    // Emit business signal if enabled
-    if (props.emitSignal && orchestrator?.signals) {
-      orchestrator.signals.emit('auth:login', { user: result.user })
-    }
+    // Emit auth:login signal for debug bar and other listeners
+    orchestrator?.signals.emit('auth:login', { user: result.user })
+    orchestrator?.toast.success(
+      'Welcome',
+      `Logged in as ${result.user?.username || result.user?.email || username.value}`,
+      'LoginPage'
+    )
 
     emit('login', result)
     router.push(props.redirectTo)
@@ -153,20 +142,12 @@ async function handleLogin() {
       || error.message
       || 'Invalid credentials'
 
-    toast.add({
-      severity: 'error',
-      summary: 'Login Failed',
-      detail: message,
-      life: 5000
+    orchestrator?.signals.emit('auth:login:error', {
+      username: username.value,
+      error: message,
+      status: error.response?.status
     })
-
-    if (orchestrator?.signals) {
-      orchestrator.signals.emit('auth:login:error', {
-        username: username.value,
-        error: message,
-        status: error.response?.status
-      })
-    }
+    orchestrator?.toast.error('Login Failed', message, 'LoginPage')
 
     emit('error', error)
   } finally {

package/src/composables/useBareForm.js

@@ -1,6 +1,5 @@
 import { ref, computed, provide, inject, onUnmounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { useToast } from 'primevue/usetoast'
 import { useDirtyState } from './useDirtyState'
 import { useUnsavedChangesGuard } from './useUnsavedChangesGuard'
 import { useBreadcrumb } from './useBreadcrumb'
@@ -81,7 +80,14 @@ export function useBareForm(options = {}) {
   // Router, route, toast - common dependencies
   const router = useRouter()
   const route = useRoute()
-  const toast = useToast()
+  const orchestrator = inject('qdadmOrchestrator', null)
+
+  // Toast helper - wraps orchestrator.toast for legacy compatibility
+  const toast = {
+    add({ severity, summary, detail, emitter }) {
+      orchestrator?.toast[severity]?.(summary, detail, emitter)
+    }
+  }
 
   // Common state
   const loading = ref(false)

package/src/composables/useEntityItemFormPage.js

@@ -79,7 +79,6 @@
  */
 import { ref, computed, watch, onMounted, onUnmounted, provide } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
-import { useToast } from 'primevue/usetoast'
 import { useConfirm } from 'primevue/useconfirm'
 import { useDirtyState } from './useDirtyState'
 import { useUnsavedChangesGuard } from './useUnsavedChangesGuard'
@@ -117,7 +116,6 @@ export function useEntityItemFormPage(config = {}) {
 
   const router = useRouter()
   const route = useRoute()
-  const toast = useToast()
   const confirm = useConfirm()
 
   // Use useEntityItemPage for common infrastructure
@@ -130,6 +128,13 @@ export function useEntityItemFormPage(config = {}) {
 
   const { manager, orchestrator, entityId, getInitialDataWithParent, parentConfig, parentId, parentData, parentChain, getChainDepth, hydrator } = itemPage
 
+  // Toast helper - wraps orchestrator.toast for legacy compatibility
+  const toast = {
+    add({ severity, summary, detail, emitter }) {
+      orchestrator?.toast[severity]?.(summary, detail, emitter)
+    }
+  }
+
   // Read config from manager with option overrides
   const entityName = config.entityName ?? manager.label
   const routePrefix = config.routePrefix ?? manager.routePrefix
@@ -449,11 +454,14 @@ export function useEntityItemFormPage(config = {}) {
       }
 
       if (listRoute?.name) {
-        return { name: listRoute.name, params: route.params }
+        // Filter out entity ID param (doesn't exist in create mode)
+        const params = { ...route.params }
+        delete params[manager.idField]
+        return { name: listRoute.name, params }
       }
     }
 
-    // Default: top-level entity list
+    // Default: top-level entity list (no params needed)
     return { name: routePrefix }
   }
 

package/src/composables/useListPage.js

@@ -1,6 +1,5 @@
 import { ref, computed, watch, onMounted, inject, provide } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
-import { useToast } from 'primevue/usetoast'
 import { useConfirm } from 'primevue/useconfirm'
 import { useHooks } from './useHooks.js'
 import { useEntityItemPage } from './useEntityItemPage.js'
@@ -139,11 +138,17 @@ export function useListPage(config = {}) {
 
   const router = useRouter()
   const route = useRoute()
-  const toast = useToast()
   const confirm = useConfirm()
 
   // Get EntityManager via orchestrator
   const orchestrator = inject('qdadmOrchestrator')
+
+  // Toast helper - wraps orchestrator.toast for legacy compatibility
+  const toast = {
+    add({ severity, summary, detail, emitter }) {
+      orchestrator?.toast[severity]?.(summary, detail, emitter)
+    }
+  }
   if (!orchestrator) {
     throw new Error(
       '[qdadm] Orchestrator not provided.\n' +

package/src/kernel/Kernel.js

@@ -43,12 +43,14 @@ import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router
 import ToastService from 'primevue/toastservice'
 import ConfirmationService from 'primevue/confirmationservice'
 import Tooltip from 'primevue/tooltip'
+import Toast from 'primevue/toast'
+import ToastListener from '../toast/ToastListener.vue'
 
 import { createQdadm } from '../plugin.js'
 import { initModules, getRoutes, setSectionOrder, alterMenuSections, registry } from '../module/moduleRegistry.js'
 import { createModuleLoader } from './ModuleLoader.js'
 import { createKernelContext } from './KernelContext.js'
-import { ToastBridgeModule } from '../toast/ToastBridgeModule.js'
+// ToastBridgeModule no longer used - Toast/ToastListener rendered at root level
 import { Orchestrator } from '../orchestrator/Orchestrator.js'
 import { createSignalBus } from './SignalBus.js'
 import { createZoneRegistry } from '../zones/ZoneRegistry.js'
@@ -101,7 +103,7 @@ export class Kernel {
    * @param {object} options.eventRouter - EventRouter config { 'source:signal': ['target:signal', ...] }
    * @param {object} options.sse - SSEBridge config { url, reconnectDelay, signalPrefix, autoConnect, events }
    * @param {object} options.debugBar - Debug bar config { module: DebugModule, component: QdadmDebugBar, ...options }
-   * @param {boolean} options.toast - Enable ToastBridgeModule (default: true). Set to false to disable.
+   * @param {boolean} options.toast - Reserved for future use (toast is always enabled when PrimeVue is configured)
    */
   constructor(options) {
     // Auto-inject DebugModule if debugBar.module is provided
@@ -127,13 +129,8 @@ export class Kernel {
       }
     }
 
-    // Auto-inject ToastBridgeModule unless toast: false
-    // Handles toast:* signals from useSignalToast() composable
-    if (options.toast !== false) {
-      options.moduleDefs = options.moduleDefs || []
-      // Add at beginning for high priority (loads early)
-      options.moduleDefs.unshift(new ToastBridgeModule())
-    }
+    // Note: Toast is now handled at root level via _createVueApp()
+    // ToastBridgeModule is no longer auto-injected to avoid duplicate listeners
 
     this.options = options
     this.vueApp = null
@@ -718,7 +715,28 @@ export class Kernel {
     const { authAdapter } = this.options
     if (!authAdapter) return
 
+    // Track if user was ever authenticated (to detect session loss)
+    let wasEverAuthenticated = authAdapter.isAuthenticated()
+
+    // Listen for session loss signal and show toast
+    const debug = this.options.debug ?? false
+    this.signals.on('auth:session-lost', () => {
+      if (debug) {
+        console.warn('[Kernel] auth:session-lost received, emitting toast:warn')
+      }
+      this.orchestrator.toast.warn(
+        'Session lost',
+        'Your session has expired. Please log in again.',
+        'Kernel'
+      )
+    })
+
     this.router.beforeEach((to, from, next) => {
+      // Update auth tracking
+      if (authAdapter.isAuthenticated()) {
+        wasEverAuthenticated = true
+      }
+
       // Check if route or any parent is explicitly public
       const isPublic = to.matched.some(record =>
         record.meta.public === true || record.meta.requiresAuth === false
@@ -733,8 +751,24 @@ export class Kernel {
       const requiresAuth = to.matched.some(record => record.meta.requiresAuth === true)
 
       if (requiresAuth && !authAdapter.isAuthenticated()) {
-        // Redirect to login (if exists) or emit signal
-        const loginRoute = this.router.hasRoute('login') ? { name: 'login' } : '/'
+        // Session loss detected - emit signal if user was previously authenticated
+        if (wasEverAuthenticated) {
+          const debug = this.options.debug ?? false
+          if (debug) {
+            console.warn('[Kernel] Session lost detected, emitting auth:session-lost')
+          }
+          this.signals.emit('auth:session-lost', {
+            reason: 'token_missing',
+            redirectTo: 'login'
+          })
+          // Reset tracking for next session
+          wasEverAuthenticated = false
+        }
+
+        // Redirect to login with session_lost param (if exists) or emit signal
+        const loginRoute = this.router.hasRoute('login')
+          ? { name: 'login', query: { session_lost: '1' } }
+          : '/'
         next(loginRoute)
       } else {
         next()
@@ -847,6 +881,11 @@ export class Kernel {
       deferred: this.deferred,
       entityAuthAdapter: this.options.entityAuthAdapter || null
     })
+
+    // Apply toast config if provided (life defaults per severity)
+    if (this.options.toast) {
+      this.orchestrator.setToastConfig(this.options.toast)
+    }
   }
 
   /**
@@ -1060,35 +1099,44 @@ export class Kernel {
   /**
    * Create Vue app instance
    *
-   * When debugBar is enabled, wraps the root component to include QdadmDebugBar
-   * at the app level, ensuring it's visible on all pages (including login).
+   * Always wraps the root component with:
+   * - Toast (for global toast notifications on all pages including login)
+   * - QdadmDebugBar (if debugBar is enabled)
    */
   _createVueApp() {
     if (!this.options.root) {
       throw new Error('[Kernel] root component is required')
     }
 
-    // Always wrap root with Toast (and DebugBar if enabled)
     const OriginalRoot = this.options.root
     const DebugBarComponent = this.options.debugBar?.component && QdadmDebugBar ? QdadmDebugBar : null
+    const hasPrimeVue = !!this.options.primevue?.plugin
+
+    // Wrap root with Toast + ToastListener (for global toasts on all pages) and optionally DebugBar
+    // Note: Apps should NOT include their own <Toast /> - Kernel provides it at root level
+    const WrappedRoot = defineComponent({
+      name: 'QdadmRootWrapper',
+      setup() {
+        return () => {
+          const children = [h(OriginalRoot)]
+
+          // Add global Toast and ToastListener if PrimeVue is configured
+          if (hasPrimeVue) {
+            children.push(h(Toast))
+            children.push(h(ToastListener))
+          }
+
+          // Add DebugBar if enabled
+          if (DebugBarComponent) {
+            children.push(h(DebugBarComponent))
+          }
 
-    // Wrap root with DebugBar if enabled
-    // Note: Toast must be included by apps in their App.vue for pages outside BaseLayout
-    if (DebugBarComponent) {
-      const WrappedRoot = defineComponent({
-        name: 'QdadmRootWrapper',
-        components: { OriginalRoot, DebugBarComponent },
-        setup() {
-          return () => h('div', { id: 'qdadm-root', style: 'display: contents' }, [
-            h(OriginalRoot),
-            h(DebugBarComponent)
-          ])
+          return h('div', { id: 'qdadm-root', style: 'display: contents' }, children)
         }
-      })
-      this.vueApp = createApp(WrappedRoot)
-    } else {
-      this.vueApp = createApp(OriginalRoot)
-    }
+      }
+    })
+
+    this.vueApp = createApp(WrappedRoot)
   }
 
   /**

package/src/modules/debug/components/panels/AuthPanel.vue

@@ -3,7 +3,7 @@
  * AuthPanel - Auth collector display with activity indicator
  * Each event has its own timer and fades out before destruction
  */
-import { onMounted, ref, onUnmounted } from 'vue'
+import { onMounted, ref, onUnmounted, inject } from 'vue'
 import ObjectTree from '../ObjectTree.vue'
 
 const props = defineProps({
@@ -11,6 +11,19 @@ const props = defineProps({
   entries: { type: Array, required: true }
 })
 
+// Inject auth adapter for token loss simulation
+const authAdapter = inject('authAdapter', null)
+
+/**
+ * Destroy session without normal logout flow
+ * Simulates catastrophic token loss (server revocation, storage corruption)
+ */
+function destroySession() {
+  if (authAdapter?.destroySession) {
+    authAdapter.destroySession()
+  }
+}
+
 // Local events with fade state
 const localEvents = ref([])
 const timers = new Map()
@@ -173,34 +186,44 @@ function getEventLabel(event) {
 
 <template>
   <div class="auth-panel">
-    <!-- Invariant entries (user, token, permissions, adapter) -->
-    <div
-      v-for="(entry, idx) in entries"
-      :key="idx"
-      class="auth-item"
-      :class="{ 'auth-item--impersonated': entry.type === 'impersonated' }"
-    >
-      <div class="auth-header" :class="{ 'auth-header--impersonated': entry.type === 'impersonated' }">
-        <i :class="['pi', getIcon(entry.type)]" />
-        <span class="auth-label">{{ entry.label || entry.type }}</span>
-      </div>
-      <div v-if="entry.message" class="auth-message">{{ entry.message }}</div>
-      <ObjectTree v-else-if="entry.data" :data="entry.data" :maxDepth="4" />
+    <!-- Debug actions -->
+    <div class="debug-panel-toolbar">
+      <button class="debug-toolbar-btn debug-toolbar-btn--danger" @click="destroySession" title="Clear token without logout (simulate session loss)">
+        <i class="pi pi-power-off" />
+        Destroy Session
+      </button>
     </div>
 
-    <!-- Recent auth events with individual timers -->
-    <TransitionGroup name="event">
+    <div class="auth-panel-content">
+      <!-- Invariant entries (user, token, permissions, adapter) -->
       <div
-        v-for="event in localEvents"
-        :key="event.id"
-        class="auth-activity"
-        :class="[event.type, { fading: event.fading }]"
+        v-for="(entry, idx) in entries"
+        :key="idx"
+        class="auth-item"
+        :class="{ 'auth-item--impersonated': entry.type === 'impersonated' }"
       >
-        <i :class="['pi', getEventIcon(event.type)]" />
-        <span>{{ getEventLabel(event) }}</span>
-        <span class="auth-time">{{ formatTime(event.timestamp) }}</span>
+        <div class="auth-header" :class="{ 'auth-header--impersonated': entry.type === 'impersonated' }">
+          <i :class="['pi', getIcon(entry.type)]" />
+          <span class="auth-label">{{ entry.label || entry.type }}</span>
+        </div>
+        <div v-if="entry.message" class="auth-message">{{ entry.message }}</div>
+        <ObjectTree v-else-if="entry.data" :data="entry.data" :maxDepth="4" />
       </div>
-    </TransitionGroup>
+
+      <!-- Recent auth events with individual timers -->
+      <TransitionGroup name="event">
+        <div
+          v-for="event in localEvents"
+          :key="event.id"
+          class="auth-activity"
+          :class="[event.type, { fading: event.fading }]"
+        >
+          <i :class="['pi', getEventIcon(event.type)]" />
+          <span>{{ getEventLabel(event) }}</span>
+          <span class="auth-time">{{ formatTime(event.timestamp) }}</span>
+        </div>
+      </TransitionGroup>
+    </div>
   </div>
 </template>
 

package/src/modules/debug/components/panels/SignalsPanel.vue

@@ -132,8 +132,8 @@ function getDomainColor(name) {
         <button
           v-for="p in presets"
           :key="p.pattern"
-          class="preset-btn"
-          :class="{ 'preset-active': filterPattern === p.pattern }"
+          class="debug-toolbar-btn"
+          :class="{ 'debug-toolbar-btn--active': filterPattern === p.pattern }"
           @click="applyPreset(p.pattern)"
         >
           {{ p.label }}

package/src/modules/debug/components/panels/ZonesPanel.vue

@@ -45,10 +45,10 @@ function isHighlighted(zoneName) {
 
 <template>
   <div class="zones-panel">
-    <div class="zones-toolbar">
+    <div class="debug-panel-toolbar">
       <button
-        class="zones-toggle"
-        :class="{ 'zones-toggle-on': !isFilterActive() }"
+        class="debug-toolbar-btn"
+        :class="{ 'debug-toolbar-btn--active': !isFilterActive() }"
         :title="isFilterActive() ? 'Click to show all zones' : 'Click to show current page only'"
         @click="toggleFilter"
       >
@@ -56,8 +56,8 @@ function isHighlighted(zoneName) {
         All Pages
       </button>
       <button
-        class="zones-toggle"
-        :class="{ 'zones-toggle-internal': showInternalZones() }"
+        class="debug-toolbar-btn"
+        :class="{ 'debug-toolbar-btn--active': showInternalZones() }"
         :title="showInternalZones() ? 'Click to hide internal zones' : 'Click to show internal zones (prefixed with _)'"
         @click="toggleInternalFilter"
       >
@@ -65,11 +65,12 @@ function isHighlighted(zoneName) {
         Internal
       </button>
     </div>
-    <div v-if="entries.length === 0" class="zones-empty">
-      <i class="pi pi-inbox" />
-      <span>No zones</span>
-    </div>
-    <div v-for="zone in entries" :key="zone.name" class="zone-item">
+    <div class="zones-panel-content">
+      <div v-if="entries.length === 0" class="zones-empty">
+        <i class="pi pi-inbox" />
+        <span>No zones</span>
+      </div>
+      <div v-for="zone in entries" :key="zone.name" class="zone-item">
       <div class="zone-header">
         <button
           class="zone-highlight"
@@ -96,6 +97,7 @@ function isHighlighted(zoneName) {
         Default: {{ zone.defaultName || '(component)' }}
       </div>
     </div>
+    </div>
   </div>
 </template>
 

package/src/modules/debug/styles.scss

@@ -638,6 +638,104 @@ $debug-info: #3b82f6;
   color: #f4f4f5;
 }
 
+/* =============================================================================
+   PANEL TOOLBAR (unified action bar at top of panels)
+   ============================================================================= */
+
+.debug-panel-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  background: #27272a;
+  border-bottom: 1px solid #3f3f46;
+}
+
+/* Toolbar button - standard */
+.debug-toolbar-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 8px;
+  background: #3f3f46;
+  border: none;
+  border-radius: 3px;
+  color: #a1a1aa;
+  cursor: pointer;
+  font-size: 10px;
+  white-space: nowrap;
+}
+
+.debug-toolbar-btn:hover {
+  background: #52525b;
+  color: #f4f4f5;
+}
+
+.debug-toolbar-btn .pi {
+  font-size: 10px;
+}
+
+/* Toolbar button - danger variant */
+.debug-toolbar-btn--danger {
+  background: rgba(239, 68, 68, 0.15);
+  color: #f87171;
+}
+
+.debug-toolbar-btn--danger:hover {
+  background: rgba(239, 68, 68, 0.3);
+  color: #fca5a5;
+}
+
+/* Toolbar button - active/pressed state */
+.debug-toolbar-btn--active {
+  background: #8b5cf6;
+  color: white;
+}
+
+.debug-toolbar-btn--active:hover {
+  background: #7c3aed;
+}
+
+/* Toolbar input */
+.debug-toolbar-input {
+  flex: 1;
+  min-width: 0;
+  font-size: 11px;
+  padding: 4px 8px;
+  background: #18181b;
+  border: 1px solid #3f3f46;
+  border-radius: 4px;
+  color: #f4f4f5;
+}
+
+.debug-toolbar-input:focus {
+  outline: none;
+  border-color: #8b5cf6;
+}
+
+.debug-toolbar-input::placeholder {
+  color: #71717a;
+}
+
+/* Toolbar icon (standalone) */
+.debug-toolbar-icon {
+  color: #71717a;
+  font-size: 12px;
+}
+
+/* Toolbar label/text */
+.debug-toolbar-label {
+  font-size: 10px;
+  color: #71717a;
+}
+
+/* Toolbar separator */
+.debug-toolbar-separator {
+  width: 1px;
+  height: 16px;
+  background: #3f3f46;
+}
+
 /* =============================================================================
    OBJECT TREE
    ============================================================================= */
@@ -726,7 +824,14 @@ $debug-info: #3b82f6;
    ============================================================================= */
 
 .auth-panel {
-  padding: 8px;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.auth-panel-content {
+  padding: 0 8px 8px 8px;
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -2420,7 +2525,14 @@ $debug-info: #3b82f6;
    ============================================================================= */
 
 .zones-panel {
-  padding: 8px;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.zones-panel-content {
+  padding: 0 8px 8px 8px;
   display: flex;
   flex-direction: column;
   gap: 8px;

package/src/orchestrator/Orchestrator.js

@@ -75,6 +75,63 @@ export class Orchestrator {
     return this._signals
   }
 
+  /**
+   * Set toast configuration (life defaults per severity)
+   * @param {Object} config - { success: 3000, error: 5000, warn: 5000, info: 3000 }
+   */
+  setToastConfig(config) {
+    this._toastConfig = { ...this._toastConfig, ...config }
+    this._toastHelper = null // Reset helper to pick up new config
+  }
+
+  /**
+   * Toast helper - wraps signal-based toasts
+   *
+   * Usage:
+   *   orchestrator.toast.success('Saved', 'Item saved successfully')
+   *   orchestrator.toast.error('Error', 'Failed to save', 'MyComponent')
+   *   orchestrator.toast.warn('Warning', 'Check your input', { life: 10000, emitter: 'Custom' })
+   *
+   * Third param can be:
+   * - string: treated as emitter
+   * - object: { life, emitter }
+   *
+   * @returns {Object} Toast helper with success/error/warn/info methods
+   */
+  get toast() {
+    if (!this._toastHelper) {
+      // Default life values per severity (can be overridden via setToastConfig)
+      const defaults = {
+        success: 3000,
+        error: 5000,
+        warn: 5000,
+        info: 3000,
+        ...this._toastConfig
+      }
+
+      const emit = (severity, summary, detail, options) => {
+        if (this._signals) {
+          // Options can be string (emitter) or object { life, emitter }
+          const opts = typeof options === 'string' ? { emitter: options } : (options || {})
+          this._signals.emit(`toast:${severity}`, {
+            summary,
+            detail,
+            life: opts.life ?? defaults[severity],
+            emitter: opts.emitter
+          })
+        }
+      }
+
+      this._toastHelper = {
+        success: (summary, detail, options) => emit('success', summary, detail, options),
+        error: (summary, detail, options) => emit('error', summary, detail, options),
+        warn: (summary, detail, options) => emit('warn', summary, detail, options),
+        info: (summary, detail, options) => emit('info', summary, detail, options)
+      }
+    }
+    return this._toastHelper
+  }
+
   /**
    * Set the entity AuthAdapter for permission checks
    * This adapter will be injected into all newly registered managers

package/src/styles/_buttons.scss

@@ -0,0 +1,318 @@
+/**
+ * qdadm - Button Styles
+ *
+ * Global button styling - outlined style as default
+ * with severity variants (primary, secondary, success, warn, danger)
+ */
+
+@use 'variables' as *;
+
+// =============================================================================
+// Base Button - Outlined by Default
+// =============================================================================
+
+.p-button {
+  // Outlined style as default (use !important to override PrimeVue theme)
+  background: transparent !important;
+  border: 1px solid var(--p-primary-500) !important;
+  color: var(--p-primary-500) !important;
+  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
+
+  &:hover:not(:disabled) {
+    background: var(--p-primary-50) !important;
+    border-color: var(--p-primary-600) !important;
+    color: var(--p-primary-600) !important;
+  }
+
+  &:focus {
+    box-shadow: 0 0 0 2px var(--p-surface-0), 0 0 0 4px var(--p-primary-200);
+  }
+
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+}
+
+// =============================================================================
+// Severity Variants
+// =============================================================================
+
+// Secondary (gray)
+.p-button-secondary {
+  border-color: var(--p-surface-400) !important;
+  color: var(--p-surface-600) !important;
+
+  &:hover:not(:disabled) {
+    background: var(--p-surface-100) !important;
+    border-color: var(--p-surface-500) !important;
+    color: var(--p-surface-700) !important;
+  }
+
+  &:focus {
+    box-shadow: 0 0 0 2px var(--p-surface-0), 0 0 0 4px var(--p-surface-200);
+  }
+}
+
+// Success (green)
+.p-button-success {
+  border-color: var(--p-green-500) !important;
+  color: var(--p-green-600) !important;
+
+  &:hover:not(:disabled) {
+    background: var(--p-green-50) !important;
+    border-color: var(--p-green-600) !important;
+    color: var(--p-green-700) !important;
+  }
+
+  &:focus {
+    box-shadow: 0 0 0 2px var(--p-surface-0), 0 0 0 4px var(--p-green-200);
+  }
+}
+
+// Warning (orange)
+.p-button-warn {
+  border-color: var(--p-orange-500) !important;
+  color: var(--p-orange-600) !important;
+
+  &:hover:not(:disabled) {
+    background: var(--p-orange-50) !important;
+    border-color: var(--p-orange-600) !important;
+    color: var(--p-orange-700) !important;
+  }
+
+  &:focus {
+    box-shadow: 0 0 0 2px var(--p-surface-0), 0 0 0 4px var(--p-orange-200);
+  }
+}
+
+// Danger (red)
+.p-button-danger {
+  border-color: var(--p-red-500) !important;
+  color: var(--p-red-600) !important;
+
+  &:hover:not(:disabled) {
+    background: var(--p-red-50) !important;
+    border-color: var(--p-red-600) !important;
+    color: var(--p-red-700) !important;
+  }
+
+  &:focus {
+    box-shadow: 0 0 0 2px var(--p-surface-0), 0 0 0 4px var(--p-red-200);
+  }
+}
+
+// Info (blue)
+.p-button-info {
+  border-color: var(--p-blue-500) !important;
+  color: var(--p-blue-600) !important;
+
+  &:hover:not(:disabled) {
+    background: var(--p-blue-50) !important;
+    border-color: var(--p-blue-600) !important;
+    color: var(--p-blue-700) !important;
+  }
+
+  &:focus {
+    box-shadow: 0 0 0 2px var(--p-surface-0), 0 0 0 4px var(--p-blue-200);
+  }
+}
+
+// Contrast (dark)
+.p-button-contrast {
+  border-color: var(--p-surface-900) !important;
+  color: var(--p-surface-900) !important;
+
+  &:hover:not(:disabled) {
+    background: var(--p-surface-900) !important;
+    border-color: var(--p-surface-900) !important;
+    color: var(--p-surface-0) !important;
+  }
+}
+
+// =============================================================================
+// Filled Variant (explicit)
+// =============================================================================
+
+.p-button-filled,
+.p-button.p-button-raised {
+  background: var(--p-primary-500) !important;
+  border-color: var(--p-primary-500) !important;
+  color: white !important;
+
+  &:hover:not(:disabled) {
+    background: var(--p-primary-600) !important;
+    border-color: var(--p-primary-600) !important;
+    color: white !important;
+  }
+
+  &.p-button-secondary {
+    background: var(--p-surface-500) !important;
+    border-color: var(--p-surface-500) !important;
+    color: white !important;
+
+    &:hover:not(:disabled) {
+      background: var(--p-surface-600) !important;
+      border-color: var(--p-surface-600) !important;
+    }
+  }
+
+  &.p-button-success {
+    background: var(--p-green-500) !important;
+    border-color: var(--p-green-500) !important;
+    color: white !important;
+
+    &:hover:not(:disabled) {
+      background: var(--p-green-600) !important;
+      border-color: var(--p-green-600) !important;
+    }
+  }
+
+  &.p-button-warn {
+    background: var(--p-orange-500) !important;
+    border-color: var(--p-orange-500) !important;
+    color: white !important;
+
+    &:hover:not(:disabled) {
+      background: var(--p-orange-600) !important;
+      border-color: var(--p-orange-600) !important;
+    }
+  }
+
+  &.p-button-danger {
+    background: var(--p-red-500) !important;
+    border-color: var(--p-red-500) !important;
+    color: white !important;
+
+    &:hover:not(:disabled) {
+      background: var(--p-red-600) !important;
+      border-color: var(--p-red-600) !important;
+    }
+  }
+}
+
+// =============================================================================
+// Text Button (no border)
+// =============================================================================
+
+.p-button-text {
+  background: transparent !important;
+  border-color: transparent !important;
+
+  &:hover:not(:disabled) {
+    background: var(--p-primary-50) !important;
+    border-color: transparent !important;
+  }
+
+  &.p-button-secondary:hover:not(:disabled) {
+    background: var(--p-surface-100) !important;
+  }
+
+  &.p-button-success:hover:not(:disabled) {
+    background: var(--p-green-50) !important;
+  }
+
+  &.p-button-warn:hover:not(:disabled) {
+    background: var(--p-orange-50) !important;
+  }
+
+  &.p-button-danger:hover:not(:disabled) {
+    background: var(--p-red-50) !important;
+  }
+}
+
+// =============================================================================
+// Link Button
+// =============================================================================
+
+.p-button-link {
+  background: transparent !important;
+  border-color: transparent !important;
+  color: var(--p-primary-500) !important;
+  text-decoration: none;
+
+  &:hover:not(:disabled) {
+    background: transparent !important;
+    border-color: transparent !important;
+    text-decoration: underline;
+  }
+}
+
+// =============================================================================
+// Icon-only Button - Keep original PrimeVue style (no outlined override)
+// =============================================================================
+
+.p-button-icon-only {
+  // Reset to PrimeVue defaults - no outlined style for icon buttons
+  background: unset !important;
+  border: unset !important;
+  color: unset !important;
+
+  &:hover:not(:disabled) {
+    background: unset !important;
+    border-color: unset !important;
+    color: unset !important;
+  }
+}
+
+// =============================================================================
+// Button Sizes
+// =============================================================================
+
+.p-button-sm {
+  font-size: $font-size-sm;
+  padding: 0.375rem 0.75rem;
+}
+
+.p-button-lg {
+  font-size: $font-size-lg;
+  padding: 0.75rem 1.25rem;
+}
+
+// =============================================================================
+// Tags / Badges - Outlined Style
+// =============================================================================
+
+.p-tag {
+  background: transparent !important;
+  border: 1px solid var(--p-primary-500) !important;
+  color: var(--p-primary-500) !important;
+  font-weight: $font-weight-medium;
+  white-space: nowrap;
+}
+
+.p-tag-secondary {
+  background: transparent !important;
+  border-color: var(--p-surface-400) !important;
+  color: var(--p-surface-600) !important;
+}
+
+.p-tag-success {
+  background: transparent !important;
+  border-color: var(--p-green-500) !important;
+  color: var(--p-green-600) !important;
+}
+
+.p-tag-warn {
+  background: transparent !important;
+  border-color: var(--p-orange-500) !important;
+  color: var(--p-orange-600) !important;
+}
+
+.p-tag-danger {
+  background: transparent !important;
+  border-color: var(--p-red-500) !important;
+  color: var(--p-red-600) !important;
+}
+
+.p-tag-info {
+  background: transparent !important;
+  border-color: var(--p-blue-500) !important;
+  color: var(--p-blue-600) !important;
+}
+
+.p-tag-contrast {
+  background: transparent !important;
+  border-color: var(--p-surface-900) !important;
+  color: var(--p-surface-900) !important;
+}

package/src/styles/_lists.scss

@@ -12,6 +12,20 @@
 
 @use 'variables' as *;
 
+// =============================================================================
+// DataTable Compact Rows
+// =============================================================================
+
+.p-datatable {
+  .p-datatable-tbody > tr > td {
+    padding: 0.5rem 0.75rem !important;
+  }
+
+  .p-datatable-thead > tr > th {
+    padding: 0.625rem 0.75rem !important;
+  }
+}
+
 // =============================================================================
 // Table Actions
 // =============================================================================

package/src/styles/_responsive.scss

@@ -195,9 +195,16 @@
 .form-actions {
   @include mobile {
     flex-direction: column;
+    gap: 0.5rem;
+
+    .form-actions-left {
+      width: 100%;
+      flex-direction: column;
+    }
 
     .p-button {
       width: 100%;
+      white-space: nowrap;
     }
   }
 }

package/src/styles/index.scss

@@ -26,6 +26,7 @@
 
 // Component-specific styles
 @use './alerts';
+@use './buttons';
 @use './code';
 @use './dialogs';
 @use './markdown';

package/src/components/layout/defaults/DefaultToaster.vue

@@ -1,16 +0,0 @@
-<script setup>
-/**
- * DefaultToaster - Default toaster component for BaseLayout
- *
- * Renders the Toast component for notifications.
- * Uses PrimeVue Toast with default positioning.
- *
- * NOTE: For pages outside BaseLayout (like LoginPage),
- * apps must include Toast in their App.vue root component.
- */
-import Toast from 'primevue/toast'
-</script>
-
-<template>
-  <Toast position="top-right" />
-</template>