qdadm 0.26.2 → 0.27.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qdadm",
-  "version": "0.26.2",
+  "version": "0.27.0",
   "description": "Vue 3 framework for admin dashboards with PrimeVue",
   "author": "quazardous",
   "license": "MIT",
@@ -24,7 +24,8 @@
     "./components": "./src/components/index.js",
     "./module": "./src/module/index.js",
     "./utils": "./src/utils/index.js",
-    "./styles": "./src/styles/index.css"
+    "./styles": "./src/styles/index.scss",
+    "./styles/breakpoints": "./src/styles/_breakpoints.scss"
   },
   "files": [
     "src",
@@ -35,11 +36,11 @@
     "@quazardous/quarkernel": "^2.1.0"
   },
   "peerDependencies": {
-    "vue": "^3.3.0",
-    "vue-router": "^4.0.0",
-    "primevue": "^4.0.0",
     "pinia": "^2.0.0",
-    "vanilla-jsoneditor": "^0.23.0"
+    "primevue": "^4.0.0",
+    "vanilla-jsoneditor": "^0.23.0",
+    "vue": "^3.3.0",
+    "vue-router": "^4.0.0"
   },
   "keywords": [
     "vue",
@@ -55,6 +56,7 @@
     "@vitejs/plugin-vue": "^5.2.1",
     "@vue/test-utils": "^2.4.6",
     "jsdom": "^25.0.1",
+    "sass": "^1.97.1",
     "vitest": "^2.1.8"
   }
 }

package/src/components/index.js

@@ -55,3 +55,6 @@ export { default as EmptyState } from './display/EmptyState.vue'
 export { default as IntensityBar } from './display/IntensityBar.vue'
 export { default as BoolCell } from './BoolCell.vue'
 export { default as SeverityTag } from './SeverityTag.vue'
+
+// Pages
+export { default as LoginPage } from './pages/LoginPage.vue'

package/src/components/layout/AppLayout.vue

@@ -12,7 +12,7 @@
  *   </AppLayout>
  */
 
-import { ref, watch, onMounted, computed, inject, provide, useSlots } from 'vue'
+import { ref, watch, onMounted, onUnmounted, computed, inject, provide, useSlots } from 'vue'
 import { RouterLink, RouterView, useRouter, useRoute } from 'vue-router'
 import { useNavigation } from '../../composables/useNavigation'
 import { useApp } from '../../composables/useApp'
@@ -42,6 +42,30 @@ const STORAGE_KEY = computed(() => `${app.shortName.toLowerCase()}_nav_collapsed
 // Collapsed sections state (section title -> boolean)
 const collapsedSections = ref({})
 
+// Mobile sidebar state
+const sidebarOpen = ref(false)
+const MOBILE_BREAKPOINT = 768
+
+function toggleSidebar() {
+  sidebarOpen.value = !sidebarOpen.value
+}
+
+function closeSidebar() {
+  sidebarOpen.value = false
+}
+
+// Check if we're on mobile
+function isMobile() {
+  return window.innerWidth < MOBILE_BREAKPOINT
+}
+
+// Close sidebar on resize to desktop
+function handleResize() {
+  if (!isMobile() && sidebarOpen.value) {
+    sidebarOpen.value = false
+  }
+}
+
 /**
  * Load collapsed state from localStorage
  */
@@ -87,13 +111,21 @@ function isSectionExpanded(section) {
   return !collapsedSections.value[section.title]
 }
 
-// Load state on mount
+// Load state on mount + setup resize listener
 onMounted(() => {
   loadCollapsedState()
+  window.addEventListener('resize', handleResize)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize)
 })
 
-// Auto-expand section when navigating to an item in it
+// Auto-expand section when navigating to an item in it + close mobile sidebar
 watch(() => route.path, () => {
+  // Close mobile sidebar on navigation
+  closeSidebar()
+
   for (const section of navSections.value) {
     if (sectionHasActiveItem(section) && collapsedSections.value[section.title]) {
       // Auto-expand but don't save (user can collapse again if they want)
@@ -149,8 +181,15 @@ const showBreadcrumb = computed(() => {
 
 <template>
   <div class="app-layout">
+    <!-- Mobile overlay -->
+    <div
+      class="sidebar-overlay"
+      :class="{ 'sidebar-overlay--visible': sidebarOpen }"
+      @click="closeSidebar"
+    ></div>
+
     <!-- Sidebar -->
-    <aside class="sidebar">
+    <aside class="sidebar" :class="{ 'sidebar--open': sidebarOpen }">
       <div class="sidebar-header">
         <div class="sidebar-header-top">
           <img v-if="app.logo" :src="app.logo" :alt="app.name" class="sidebar-logo" />
@@ -216,6 +255,19 @@ const showBreadcrumb = computed(() => {
 
     <!-- Main content -->
     <main class="main-content">
+      <!-- Mobile header bar -->
+      <div class="mobile-header">
+        <Button
+          icon="pi pi-bars"
+          severity="secondary"
+          text
+          class="hamburger-btn"
+          @click="toggleSidebar"
+          aria-label="Toggle menu"
+        />
+        <span class="mobile-header-title">{{ app.name }}</span>
+      </div>
+
       <!-- Breadcrumb + Navlinks bar -->
       <div v-if="showBreadcrumb" class="layout-nav-bar">
         <Breadcrumb :model="breadcrumbItems" class="layout-breadcrumb">
@@ -562,4 +614,98 @@ const showBreadcrumb = computed(() => {
 .layout-nav-bar :deep(.p-breadcrumb-separator) {
   color: var(--p-surface-400, #94a3b8);
 }
+
+/* ============================================
+   Mobile / Responsive Styles
+   ============================================ */
+
+.mobile-header {
+  display: none;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  background: var(--p-surface-0, white);
+  border-bottom: 1px solid var(--p-surface-200, #e2e8f0);
+  position: sticky;
+  top: 0;
+  z-index: 50;
+}
+
+.mobile-header-title {
+  font-weight: 600;
+  font-size: 1.125rem;
+  color: var(--p-surface-800, #1e293b);
+}
+
+.hamburger-btn {
+  display: none !important;
+}
+
+/* Sidebar overlay for mobile */
+.sidebar-overlay {
+  display: none;
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 99;
+  opacity: 0;
+  transition: opacity 0.25s ease;
+  pointer-events: none;
+}
+
+/* Tablet breakpoint (< 768px) */
+@media (max-width: 767px) {
+  .mobile-header {
+    display: flex;
+  }
+
+  .hamburger-btn {
+    display: flex !important;
+  }
+
+  .sidebar {
+    transform: translateX(-100%);
+    transition: transform 0.25s ease;
+    box-shadow: none;
+    width: min(80vw, 280px);
+  }
+
+  .sidebar.sidebar--open {
+    transform: translateX(0);
+    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
+  }
+
+  .sidebar-overlay {
+    display: block;
+  }
+
+  .sidebar-overlay.sidebar-overlay--visible {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .main-content {
+    margin-left: 0;
+  }
+
+  .page-content {
+    padding: 1rem;
+  }
+
+  .layout-nav-bar {
+    padding: 1rem;
+    padding-bottom: 0;
+  }
+}
+
+/* Large tablet breakpoint (768px - 1023px) */
+@media (min-width: 768px) and (max-width: 1023px) {
+  .sidebar {
+    width: 12rem;
+  }
+
+  .main-content {
+    margin-left: 12rem;
+  }
+}
 </style>

package/src/components/pages/LoginPage.vue

@@ -0,0 +1,267 @@
+<script setup>
+/**
+ * LoginPage - Generic login page component
+ *
+ * Uses authAdapter from qdadm context for authentication.
+ * Customizable via props and slots for app branding.
+ *
+ * Usage:
+ *   <LoginPage />
+ *   <LoginPage title="My App" icon="pi pi-lock" />
+ *   <LoginPage :logo="LogoComponent" />
+ *
+ * With slot:
+ *   <LoginPage>
+ *     <template #footer>
+ *       <p>Demo accounts: admin, user</p>
+ *     </template>
+ *   </LoginPage>
+ */
+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'
+import Button from 'primevue/button'
+
+const props = defineProps({
+  /**
+   * Override app title (defaults to qdadm app.name config)
+   */
+  title: {
+    type: String,
+    default: null
+  },
+  /**
+   * PrimeIcons icon class (e.g., 'pi pi-lock')
+   */
+  icon: {
+    type: String,
+    default: 'pi pi-shield'
+  },
+  /**
+   * Custom logo component (replaces icon)
+   */
+  logo: {
+    type: Object,
+    default: null
+  },
+  /**
+   * Username field label
+   */
+  usernameLabel: {
+    type: String,
+    default: 'Username'
+  },
+  /**
+   * Password field label
+   */
+  passwordLabel: {
+    type: String,
+    default: 'Password'
+  },
+  /**
+   * Submit button label
+   */
+  submitLabel: {
+    type: String,
+    default: 'Sign In'
+  },
+  /**
+   * Route to redirect after successful login
+   */
+  redirectTo: {
+    type: String,
+    default: '/'
+  },
+  /**
+   * Default username value
+   */
+  defaultUsername: {
+    type: String,
+    default: ''
+  },
+  /**
+   * Default password value
+   */
+  defaultPassword: {
+    type: String,
+    default: ''
+  },
+  /**
+   * Emit business signal on login (requires orchestrator)
+   */
+  emitSignal: {
+    type: Boolean,
+    default: false
+  }
+})
+
+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', {})
+
+const username = ref(props.defaultUsername)
+const password = ref(props.defaultPassword)
+const loading = ref(false)
+
+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
+    })
+    return
+  }
+
+  loading.value = true
+  try {
+    const result = await authAdapter.login({
+      username: username.value,
+      password: password.value
+    })
+
+    // Emit business signal if enabled
+    if (props.emitSignal && orchestrator?.signals) {
+      orchestrator.signals.emit('auth:login', { user: result.user })
+    }
+
+    // Emit component event
+    emit('login', result)
+
+    router.push(props.redirectTo)
+  } catch (error) {
+    toast.add({
+      severity: 'error',
+      summary: 'Login Failed',
+      detail: error.message || 'Invalid credentials',
+      life: 3000
+    })
+    emit('error', error)
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="qdadm-login-page">
+    <Card class="qdadm-login-card">
+      <template #title>
+        <div class="qdadm-login-header">
+          <slot name="logo">
+            <component v-if="logo" :is="logo" class="qdadm-login-logo" />
+            <i v-else :class="icon" class="qdadm-login-icon"></i>
+          </slot>
+          <h1>{{ displayTitle }}</h1>
+        </div>
+      </template>
+      <template #content>
+        <form @submit.prevent="handleLogin" class="qdadm-login-form">
+          <div class="qdadm-login-field">
+            <label for="qdadm-username">{{ usernameLabel }}</label>
+            <InputText
+              v-model="username"
+              id="qdadm-username"
+              class="w-full"
+              autocomplete="username"
+              :disabled="loading"
+            />
+          </div>
+          <div class="qdadm-login-field">
+            <label for="qdadm-password">{{ passwordLabel }}</label>
+            <Password
+              v-model="password"
+              id="qdadm-password"
+              class="w-full"
+              :feedback="false"
+              toggleMask
+              :disabled="loading"
+            />
+          </div>
+          <Button
+            type="submit"
+            :label="submitLabel"
+            icon="pi pi-sign-in"
+            class="w-full"
+            :loading="loading"
+          />
+          <slot name="footer"></slot>
+        </form>
+      </template>
+    </Card>
+  </div>
+</template>
+
+<style scoped>
+.qdadm-login-page {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--p-surface-100);
+}
+
+.qdadm-login-card {
+  width: 100%;
+  max-width: 400px;
+  margin: 1rem;
+}
+
+.qdadm-login-header {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  justify-content: center;
+}
+
+.qdadm-login-header h1 {
+  margin: 0;
+  font-size: 1.5rem;
+  color: var(--p-text-color);
+}
+
+.qdadm-login-icon {
+  font-size: 2rem;
+  color: var(--p-primary-500);
+}
+
+.qdadm-login-logo {
+  height: 2rem;
+  width: auto;
+}
+
+.qdadm-login-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.qdadm-login-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.qdadm-login-field label {
+  font-weight: 500;
+  color: var(--p-text-color);
+}
+
+/* Responsive */
+@media (max-width: 480px) {
+  .qdadm-login-card {
+    max-width: 100%;
+    margin: 0.5rem;
+  }
+}
+</style>

package/src/composables/index.js

@@ -20,3 +20,4 @@ export { useSignals } from './useSignals'
 export { useZoneRegistry } from './useZoneRegistry'
 export { useHooks } from './useHooks'
 export { useLayoutResolver, createLayoutComponents, layoutMeta, LAYOUT_TYPES } from './useLayoutResolver'
+export { useSSE } from './useSSE'

package/src/composables/useSSE.js

@@ -0,0 +1,212 @@
+/**
+ * useSSE - Server-Sent Events composable
+ *
+ * Manages EventSource connection with automatic reconnection and cleanup.
+ * Uses authAdapter.getToken() for authentication if available.
+ *
+ * Usage:
+ *   const { connected, error, reconnect, close } = useSSE('/api/events', {
+ *     eventHandlers: {
+ *       'bot:status': (data) => console.log('Bot status:', data),
+ *       'task:complete': (data) => handleTaskComplete(data)
+ *     }
+ *   })
+ *
+ * Options:
+ *   - eventHandlers: Object mapping event names to handler functions
+ *   - reconnectDelay: Delay in ms before reconnecting (default: 5000)
+ *   - autoConnect: Start connection immediately (default: true)
+ *   - withCredentials: Include credentials in request (default: false)
+ *   - tokenParam: Query param name for token (default: 'token')
+ *   - getToken: Custom token getter function (default: uses authAdapter)
+ */
+
+import { ref, inject, onUnmounted, onMounted } from 'vue'
+
+export function useSSE(url, options = {}) {
+  const {
+    eventHandlers = {},
+    reconnectDelay = 5000,
+    autoConnect = true,
+    withCredentials = false,
+    tokenParam = 'token',
+    getToken: customGetToken = null
+  } = options
+
+  const authAdapter = inject('authAdapter', null)
+
+  const connected = ref(false)
+  const error = ref(null)
+  const reconnecting = ref(false)
+
+  let eventSource = null
+  let reconnectTimer = null
+
+  /**
+   * Get authentication token
+   */
+  const getToken = () => {
+    // Custom getter takes precedence
+    if (customGetToken) {
+      return customGetToken()
+    }
+    // Try authAdapter
+    if (authAdapter?.getToken) {
+      return authAdapter.getToken()
+    }
+    // Fallback to localStorage
+    return localStorage.getItem('auth_token')
+  }
+
+  /**
+   * Build SSE URL with token
+   */
+  const buildUrl = () => {
+    const token = getToken()
+    const sseUrl = new URL(url, window.location.origin)
+
+    if (token && tokenParam) {
+      sseUrl.searchParams.set(tokenParam, token)
+    }
+
+    return sseUrl.toString()
+  }
+
+  /**
+   * Connect to SSE endpoint
+   */
+  const connect = () => {
+    // Clean up existing connection
+    if (eventSource) {
+      eventSource.close()
+      eventSource = null
+    }
+
+    // Clear any pending reconnect
+    if (reconnectTimer) {
+      clearTimeout(reconnectTimer)
+      reconnectTimer = null
+    }
+
+    try {
+      const sseUrl = buildUrl()
+
+      eventSource = new EventSource(sseUrl, {
+        withCredentials
+      })
+
+      eventSource.onopen = () => {
+        connected.value = true
+        error.value = null
+        reconnecting.value = false
+      }
+
+      eventSource.onerror = (err) => {
+        connected.value = false
+        error.value = 'Connection error'
+
+        // Close broken connection
+        if (eventSource) {
+          eventSource.close()
+          eventSource = null
+        }
+
+        // Schedule reconnect
+        if (reconnectDelay > 0) {
+          reconnecting.value = true
+          reconnectTimer = setTimeout(() => {
+            if (!connected.value) {
+              connect()
+            }
+          }, reconnectDelay)
+        }
+      }
+
+      // Register custom event handlers
+      for (const [eventName, handler] of Object.entries(eventHandlers)) {
+        if (eventName === 'message') continue // Handle below
+
+        eventSource.addEventListener(eventName, (event) => {
+          try {
+            const data = JSON.parse(event.data)
+            handler(data, event)
+          } catch (err) {
+            console.error(`[useSSE] Error parsing event "${eventName}":`, err)
+            // Call handler with raw data on parse error
+            handler(event.data, event)
+          }
+        })
+      }
+
+      // Handle generic message events
+      eventSource.onmessage = (event) => {
+        if (!eventHandlers.message) return
+
+        try {
+          const data = JSON.parse(event.data)
+          eventHandlers.message(data, event)
+        } catch (err) {
+          console.error('[useSSE] Error parsing message:', err)
+          eventHandlers.message(event.data, event)
+        }
+      }
+
+    } catch (err) {
+      error.value = err.message
+      connected.value = false
+    }
+  }
+
+  /**
+   * Close connection
+   */
+  const close = () => {
+    if (reconnectTimer) {
+      clearTimeout(reconnectTimer)
+      reconnectTimer = null
+    }
+
+    if (eventSource) {
+      eventSource.close()
+      eventSource = null
+    }
+
+    connected.value = false
+    reconnecting.value = false
+  }
+
+  /**
+   * Reconnect (close and connect)
+   */
+  const reconnect = () => {
+    close()
+    connect()
+  }
+
+  // Auto-connect on mount if enabled
+  onMounted(() => {
+    if (autoConnect) {
+      connect()
+    }
+  })
+
+  // Cleanup on unmount
+  onUnmounted(() => {
+    close()
+  })
+
+  return {
+    /** Reactive connection state */
+    connected,
+    /** Reactive error message */
+    error,
+    /** Reactive reconnecting state */
+    reconnecting,
+    /** Manually connect */
+    connect,
+    /** Close connection */
+    close,
+    /** Reconnect (close + connect) */
+    reconnect
+  }
+}

package/src/styles/_breakpoints.scss

@@ -0,0 +1,65 @@
+/**
+ * qdadm - Responsive Breakpoints
+ *
+ * Strategy: Desktop-first (PC > tablet > mobile)
+ *
+ * Usage in components:
+ *   @use 'qdadm/styles/breakpoints' as *;
+ *   .sidebar { @include tablet { width: 60px; } }
+ */
+
+// Breakpoint values
+$bp-desktop-lg: 1400px;  // Large desktop
+$bp-desktop: 1200px;     // Standard desktop
+$bp-tablet-lg: 1024px;   // Large tablet / small laptop
+$bp-tablet: 768px;       // Tablet portrait
+$bp-mobile-lg: 576px;    // Large mobile
+$bp-mobile: 480px;       // Standard mobile
+
+// Sidebar behavior threshold
+$bp-sidebar-collapse: $bp-tablet-lg;  // Sidebar collapses below this
+$bp-sidebar-hidden: $bp-tablet;       // Sidebar becomes drawer below this
+
+// Mixins - Desktop-first (max-width)
+@mixin desktop-lg {
+  @media (max-width: #{$bp-desktop-lg - 1px}) { @content; }
+}
+
+@mixin desktop {
+  @media (max-width: #{$bp-desktop - 1px}) { @content; }
+}
+
+@mixin tablet-lg {
+  @media (max-width: #{$bp-tablet-lg - 1px}) { @content; }
+}
+
+@mixin tablet {
+  @media (max-width: #{$bp-tablet - 1px}) { @content; }
+}
+
+@mixin mobile-lg {
+  @media (max-width: #{$bp-mobile-lg - 1px}) { @content; }
+}
+
+@mixin mobile {
+  @media (max-width: #{$bp-mobile - 1px}) { @content; }
+}
+
+// Utility: hide/show at breakpoints
+@mixin hide-below($bp) {
+  @media (max-width: #{$bp - 1px}) { display: none !important; }
+}
+
+@mixin show-below($bp) {
+  display: none !important;
+  @media (max-width: #{$bp - 1px}) { display: block !important; }
+}
+
+// Sidebar-specific mixins
+@mixin sidebar-collapsed {
+  @media (max-width: #{$bp-sidebar-collapse - 1px}) { @content; }
+}
+
+@mixin sidebar-hidden {
+  @media (max-width: #{$bp-sidebar-hidden - 1px}) { @content; }
+}

package/src/styles/_responsive.scss

@@ -0,0 +1,244 @@
+/**
+ * qdadm - Responsive Layout Styles
+ *
+ * Global responsive rules for layout components.
+ * These complement the scoped styles in Vue components.
+ */
+
+@use 'breakpoints' as *;
+
+// ============================================
+// CSS Variables for responsive behavior
+// ============================================
+
+:root {
+  // Sidebar
+  --qdadm-sidebar-width: 15rem;
+  --qdadm-sidebar-collapsed-width: 4rem;
+  --qdadm-sidebar-transition: 0.25s ease;
+
+  // Content padding
+  --qdadm-content-padding: 1.5rem;
+  --qdadm-content-padding-mobile: 1rem;
+}
+
+// ============================================
+// App Layout Responsive
+// ============================================
+
+.app-layout {
+  // Tablet: reduce sidebar width
+  @include tablet-lg {
+    --qdadm-sidebar-width: 12rem;
+  }
+
+  // Mobile: sidebar becomes overlay
+  @include tablet {
+    --qdadm-sidebar-width: 80vw;
+    max-width: 280px;
+  }
+}
+
+// Sidebar responsive behavior
+.sidebar {
+  transition: transform var(--qdadm-sidebar-transition),
+              width var(--qdadm-sidebar-transition);
+
+  @include tablet {
+    transform: translateX(-100%);
+    position: fixed;
+    z-index: 1000;
+    box-shadow: none;
+
+    &.sidebar--open {
+      transform: translateX(0);
+      box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
+    }
+  }
+}
+
+// Main content responsive
+.main-content {
+  transition: margin-left var(--qdadm-sidebar-transition);
+
+  @include tablet {
+    margin-left: 0 !important;
+  }
+}
+
+// Mobile overlay when sidebar open
+.sidebar-overlay {
+  display: none;
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 99;
+  opacity: 0;
+  transition: opacity 0.25s;
+
+  @include tablet {
+    display: block;
+    pointer-events: none;
+
+    &.sidebar-overlay--visible {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
+}
+
+// Hamburger menu button (hidden on desktop)
+.hamburger-btn {
+  display: none !important;
+
+  @include tablet {
+    display: flex !important;
+  }
+}
+
+// ============================================
+// Page Content Responsive
+// ============================================
+
+.page-content {
+  @include tablet {
+    padding: var(--qdadm-content-padding-mobile);
+  }
+}
+
+// Page header responsive
+.page-header {
+  @include tablet {
+    flex-direction: column;
+    gap: 1rem;
+    align-items: flex-start !important;
+  }
+
+  .page-header-actions {
+    @include tablet {
+      width: 100%;
+      justify-content: flex-start;
+    }
+  }
+}
+
+// ============================================
+// DataTable Responsive
+// ============================================
+
+.p-datatable {
+  @include tablet {
+    // Horizontal scroll for table
+    .p-datatable-wrapper {
+      overflow-x: auto;
+      -webkit-overflow-scrolling: touch;
+    }
+
+    // Minimum width to prevent squishing
+    .p-datatable-table {
+      min-width: 600px;
+    }
+  }
+
+  @include mobile {
+    .p-datatable-table {
+      min-width: 500px;
+    }
+  }
+}
+
+// ============================================
+// Filter Bar Responsive
+// ============================================
+
+.filter-bar {
+  @include tablet {
+    flex-wrap: wrap;
+    gap: 0.75rem;
+
+    .filter-bar-search {
+      width: 100%;
+      order: -1;
+    }
+
+    .filter-bar-filters {
+      flex-wrap: wrap;
+      gap: 0.5rem;
+    }
+
+    .filter-bar-item {
+      min-width: calc(50% - 0.25rem);
+      flex: 1 1 auto;
+    }
+  }
+
+  @include mobile {
+    .filter-bar-item {
+      min-width: 100%;
+    }
+  }
+}
+
+// ============================================
+// Form Layout Responsive
+// ============================================
+
+.form-grid {
+  @include tablet {
+    grid-template-columns: 1fr !important;
+  }
+}
+
+.form-actions {
+  @include mobile {
+    flex-direction: column;
+
+    .p-button {
+      width: 100%;
+    }
+  }
+}
+
+// ============================================
+// Cards Grid Responsive
+// ============================================
+
+.cards-grid {
+  @include tablet {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @include mobile {
+    grid-template-columns: 1fr;
+  }
+}
+
+// ============================================
+// Utility Classes
+// ============================================
+
+.hide-mobile {
+  @include tablet {
+    display: none !important;
+  }
+}
+
+.hide-desktop {
+  display: none !important;
+  @include tablet {
+    display: block !important;
+  }
+}
+
+.hide-mobile-inline {
+  @include tablet {
+    display: none !important;
+  }
+}
+
+.show-mobile-inline {
+  display: none !important;
+  @include tablet {
+    display: inline !important;
+  }
+}

package/src/styles/index.scss

@@ -0,0 +1,19 @@
+/**
+ * qdadm - Styles entry point
+ *
+ * Import this file in your main.js:
+ *   import 'qdadm/styles'
+ */
+
+/* Main styles */
+@use './main.css';
+
+/* Component-specific styles */
+@use './_alerts.css';
+@use './_code.css';
+@use './_dialogs.css';
+@use './_markdown.css';
+@use './_show-pages.css';
+
+/* Responsive styles (must be last for specificity) */
+@use './responsive';

package/src/styles/index.css

@@ -1,16 +0,0 @@
-/**
- * qdadm - Styles entry point
- *
- * Import this file in your main.js:
- *   import 'qdadm/styles'
- */
-
-/* Main styles */
-@import './main.css';
-
-/* Component-specific styles */
-@import './_alerts.css';
-@import './_code.css';
-@import './_dialogs.css';
-@import './_markdown.css';
-@import './_show-pages.css';