qdadm 1.1.0 → 1.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qdadm",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "description": "Vue 3 framework for admin dashboards with PrimeVue",
   "author": "quazardous",
   "license": "MIT",
@@ -13,7 +13,7 @@
     "url": "https://github.com/quazardous/qdadm/issues"
   },
   "type": "module",
-  "main": "src/index.js",
+  "main": "src/index.ts",
   "scripts": {
     "test": "vitest run",
     "test:watch": "vitest",
@@ -24,19 +24,19 @@
     "build:types": "vue-tsc --declaration --emitDeclarationOnly --outDir dist/types"
   },
   "exports": {
-    ".": "./src/index.js",
-    "./auth": "./src/auth/index.js",
+    ".": "./src/index.ts",
+    "./auth": "./src/auth/index.ts",
     "./security": "./src/security/index.ts",
-    "./composables": "./src/composables/index.js",
-    "./components": "./src/components/index.js",
-    "./editors": "./src/editors/index.js",
-    "./module": "./src/module/index.js",
+    "./composables": "./src/composables/index.ts",
+    "./components": "./src/components/index.ts",
+    "./editors": "./src/editors/index.ts",
+    "./module": "./src/module/index.ts",
     "./utils": "./src/utils/index.ts",
-    "./modules/debug": "./src/modules/debug/index.js",
+    "./modules/debug": "./src/modules/debug/index.ts",
     "./styles": "./src/styles/index.scss",
     "./styles/variables": "./src/styles/_variables.scss",
-    "./gen": "./src/gen/index.js",
-    "./gen/vite-plugin": "./src/gen/vite-plugin.js"
+    "./gen": "./src/gen/index.ts",
+    "./gen/vite-plugin": "./src/gen/vite-plugin.ts"
   },
   "files": [
     "src",

package/src/auth/SessionAuthAdapter.ts

@@ -225,6 +225,14 @@ interface StoredSessionData<TUser = AuthUser> {
   originalUser?: TUser
 }
 
+/**
+ * Configuration options for LocalStorageSessionAuthAdapter
+ */
+export interface LocalStorageAuthConfig {
+  /** localStorage key for session data (default: 'qdadm_auth') */
+  storageKey?: string
+}
+
 /**
  * LocalStorage-based SessionAuthAdapter implementation
  *
@@ -252,15 +260,29 @@ interface StoredSessionData<TUser = AuthUser> {
  * ```
  */
 export class LocalStorageSessionAuthAdapter<TUser extends AuthUser = AuthUser> extends SessionAuthAdapter<TUser> {
+  /**
+   * Default configuration. Override to change defaults globally:
+   * @example
+   * LocalStorageSessionAuthAdapter.defaults.storageKey = 'my_app_auth'
+   */
+  static defaults: Required<LocalStorageAuthConfig> = {
+    storageKey: 'qdadm_auth'
+  }
+
   protected _storageKey: string
   protected _originalUser: TUser | null = null  // Stores original user during impersonation
 
   /**
-   * @param storageKey - localStorage key for session data
+   * @param config - Configuration options or storage key string (for backward compatibility)
    */
-  constructor(storageKey: string = 'qdadm_auth') {
+  constructor(config?: LocalStorageAuthConfig | string) {
     super()
-    this._storageKey = storageKey
+    // Support both string (legacy) and config object
+    if (typeof config === 'string') {
+      this._storageKey = config
+    } else {
+      this._storageKey = config?.storageKey ?? LocalStorageSessionAuthAdapter.defaults.storageKey
+    }
     this._restore()
   }
 

package/src/auth/index.ts

@@ -11,4 +11,5 @@ export {
   type SessionData,
   type AuthUser,
   type ISessionAuthAdapter,
+  type LocalStorageAuthConfig,
 } from './SessionAuthAdapter'

package/src/components/layout/AppLayout.vue

@@ -569,51 +569,8 @@ const showBreadcrumb = computed<boolean>(() => {
   z-index: 10;
 }
 
-/* Nav items - compact, subtle hover */
-.nav-item {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: var(--fad-nav-item-padding-y) var(--fad-nav-item-padding-x);
-  padding-left: 1rem;
-  color: var(--p-surface-300, #cbd5e1);
-  text-decoration: none;
-  font-size: var(--fad-font-size-sm);
-  font-weight: var(--fad-font-weight-normal);
-  border-radius: 0;
-  transition: background var(--fad-transition-fast), color var(--fad-transition-fast);
-}
-
-.nav-item span {
-  white-space: nowrap;
-}
-
-.nav-item:hover {
-  background: var(--p-surface-700, #334155);
-  color: var(--p-surface-0, white);
-}
-
-.nav-item-active {
-  background: var(--p-surface-700, #334155);
-  color: var(--p-primary-300, #93c5fd);
-  border-left: 2px solid var(--p-primary-400, #60a5fa);
-  padding-left: calc(1rem - 2px);
-}
-
-.nav-item-active:hover {
-  background: var(--p-surface-600, #475569);
-}
-
-.nav-item i {
-  font-size: var(--fad-nav-icon-size);
-  width: 1.125rem;
-  text-align: center;
-  opacity: 0.8;
-}
-
-.nav-item-active i {
-  opacity: 1;
-}
+/* Nav items are styled in _sidebar.scss (global styles)
+   See .sidebar-nav .nav-item for base styles */
 
 /* -----------------------------------------------------------------------------
    Main Content
@@ -866,25 +823,8 @@ const showBreadcrumb = computed<boolean>(() => {
   opacity: 1 !important;
 }
 
-.sidebar--collapsed .nav-item {
-  padding: 0.5rem 0;
-  gap: 0;
-  border-left: none !important;
-  justify-content: center;
-}
-
-.sidebar--collapsed .nav-item-active {
-  border-left: none !important;
-  padding: 0.5rem 0;
-}
-
-.sidebar--collapsed .nav-item span {
-  display: none;
-}
-
-.sidebar--collapsed .nav-item i {
-  width: auto;
-}
+/* Nav item collapsed styles are in _sidebar.scss (global styles)
+   See .sidebar--collapsed .sidebar-nav .nav-item */
 
 /* Powered-by collapsed: smaller height */
 .sidebar--collapsed #powered-by {
@@ -995,23 +935,7 @@ const showBreadcrumb = computed<boolean>(() => {
     pointer-events: auto;
   }
 
-  .sidebar.sidebar--collapsed .nav-item {
-    justify-content: flex-start;
-    padding: var(--fad-nav-item-padding-y) var(--fad-nav-item-padding-x);
-    padding-left: 1rem;
-    gap: 0.5rem;
-  }
-
-  .sidebar.sidebar--collapsed .nav-item span {
-    display: inline;
-    opacity: 1;
-    width: auto;
-  }
-
-  .sidebar.sidebar--collapsed .nav-item i {
-    font-size: var(--fad-nav-icon-size);
-    width: 1.125rem;
-  }
+  /* Nav item mobile collapsed styles are in _sidebar.scss (global styles) */
 
   .sidebar.sidebar--collapsed #powered-by,
   .sidebar.sidebar--collapsed #user-zone {

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

@@ -95,7 +95,8 @@ watch(() => route?.path, () => {
 </script>
 
 <template>
-  <nav class="default-menu">
+  <!-- Use sidebar-nav class to inherit global nav-item styles from _sidebar.scss -->
+  <nav class="sidebar-nav">
     <div v-for="section in navSections" :key="section.title || section.label" class="nav-section">
       <div
         class="nav-section-title"
@@ -126,7 +127,10 @@ watch(() => route?.path, () => {
 </template>
 
 <style scoped>
-.default-menu {
+/* DefaultMenu uses sidebar-nav class to inherit global nav-item styles from _sidebar.scss
+   Only component-specific styles remain here */
+
+.sidebar-nav {
   flex: 1;
   overflow-y: auto;
   padding: 1rem 0;
@@ -175,30 +179,6 @@ watch(() => route?.path, () => {
   opacity: 0;
 }
 
-.nav-item {
-  display: flex;
-  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;
-}
-
-.nav-item:hover {
-  background: var(--p-surface-700, #334155);
-  color: var(--p-surface-0, white);
-}
-
-.nav-item-active {
-  background: var(--p-primary-600, #2563eb);
-  color: var(--p-surface-0, white);
-}
-
-.nav-item i {
-  font-size: 1rem;
-  width: 1.25rem;
-  text-align: center;
-}
+/* Nav item styles are in _sidebar.scss (global styles)
+   See .sidebar-nav .nav-item for base styles */
 </style>

package/src/entity/EntityManager.ts

@@ -142,6 +142,12 @@ export interface CacheInfo {
   itemCount: number
   total: number
   loadedAt: number | null
+  /** Effective TTL in milliseconds (0 = no TTL) */
+  ttlMs: number
+  /** Timestamp when cache expires (null if no TTL) */
+  expiresAt: number | null
+  /** Whether the cache has expired based on TTL */
+  expired: boolean
 }
 
 /**
@@ -157,6 +163,8 @@ export interface EntityManagerOptions<T extends EntityRecord = EntityRecord> {
   labelField?: string | ((entity: T) => string)
   fields?: Record<string, FieldConfig>
   localFilterThreshold?: number | null
+  /** Cache TTL in milliseconds (0=disabled, -1=infinite, >0=TTL). Overrides global, overridden by storage. */
+  cacheTtlMs?: number | null
   readOnly?: boolean
   warmup?: boolean
   authSensitive?: boolean
@@ -205,6 +213,7 @@ export class EntityManager<T extends EntityRecord = EntityRecord> {
   protected _fields: Record<string, FieldConfig>
 
   localFilterThreshold: number | null
+  protected _cacheTtlMs: number | null
   protected _readOnly: boolean
   protected _warmup: boolean
   protected _authSensitive: boolean
@@ -265,6 +274,7 @@ export class EntityManager<T extends EntityRecord = EntityRecord> {
       labelField = 'name',
       fields = {},
       localFilterThreshold = null,
+      cacheTtlMs = null,
       readOnly = false,
       warmup = true,
       authSensitive,
@@ -290,6 +300,7 @@ export class EntityManager<T extends EntityRecord = EntityRecord> {
     this._fields = fields
 
     this.localFilterThreshold = localFilterThreshold
+    this._cacheTtlMs = cacheTtlMs
     this._readOnly = readOnly
     this._warmup = warmup
     this._authSensitive = authSensitive ?? this._getStorageRequiresAuth()
@@ -970,6 +981,11 @@ export class EntityManager<T extends EntityRecord = EntityRecord> {
       Object.keys(mergedParams.filters || {}).length > 0
     const canUseCache = !hasFilters || cacheSafe
 
+    // Check TTL expiration before using cache
+    if (this._isCacheExpired()) {
+      this.invalidateCache()
+    }
+
     // 1. Cache valid + cacheable -> use cache with local filtering
     if (this._cache.valid && canUseCache) {
       if (!_internal) this._stats.cacheHits++
@@ -1058,6 +1074,11 @@ export class EntityManager<T extends EntityRecord = EntityRecord> {
     )
     this._stats.get++
 
+    // Check TTL expiration before using cache
+    if (this._isCacheExpired()) {
+      this.invalidateCache()
+    }
+
     // Try cache first if valid and complete
     if (this._cache.valid && !this.overflow) {
       const idStr = String(id)
@@ -1100,6 +1121,11 @@ export class EntityManager<T extends EntityRecord = EntityRecord> {
   ): Promise<T[]> {
     if (!ids || ids.length === 0) return []
 
+    // Check TTL expiration before using cache
+    if (this._isCacheExpired()) {
+      this.invalidateCache()
+    }
+
     // Try cache first if valid and complete
     if (this._cache.valid && !this.overflow) {
       const idStrs = new Set(ids.map(String))
@@ -1334,6 +1360,57 @@ export class EntityManager<T extends EntityRecord = EntityRecord> {
     return this.localFilterThreshold ?? 100
   }
 
+  /**
+   * Get effective cache TTL in milliseconds
+   * Priority: storage.cacheTtlMs > entity.cacheTtlMs > kernel.defaultEntityCacheTtlMs > -1
+   *
+   * Values:
+   * - 0: disable caching
+   * - -1: infinite (no expiration, cache until invalidation)
+   * - > 0: TTL in milliseconds
+   */
+  get effectiveCacheTtlMs(): number {
+    // 1. Storage capabilities (can be set dynamically from API headers)
+    const storageCaps =
+      (this.storage as unknown as { capabilities?: StorageCapabilities })?.capabilities ||
+      (this.storage?.constructor as { capabilities?: StorageCapabilities })?.capabilities
+    if (storageCaps?.cacheTtlMs !== undefined) {
+      return storageCaps.cacheTtlMs
+    }
+
+    // 2. Entity-level config
+    if (this._cacheTtlMs !== null) {
+      return this._cacheTtlMs
+    }
+
+    // 3. Global default from kernel options
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const globalTtl = (this._orchestrator as any)?.kernelOptions?.defaultEntityCacheTtlMs
+    if (globalTtl !== undefined) {
+      return globalTtl
+    }
+
+    // 4. Default: infinite (no expiration)
+    return -1
+  }
+
+  /**
+   * Check if caching is disabled by TTL=0
+   */
+  get isCacheTtlDisabled(): boolean {
+    return this.effectiveCacheTtlMs === 0
+  }
+
+  /**
+   * Check if cache has expired based on TTL
+   */
+  protected _isCacheExpired(): boolean {
+    if (!this._cache.valid || !this._cache.loadedAt) return false
+    const ttl = this.effectiveCacheTtlMs
+    if (ttl <= 0) return false // 0 = disabled (handled elsewhere), -1 = infinite
+    return Date.now() - this._cache.loadedAt > ttl
+  }
+
   /**
    * Check if storage adapter supports returning total count
    */
@@ -1564,6 +1641,7 @@ export class EntityManager<T extends EntityRecord = EntityRecord> {
    */
   get isCacheEnabled(): boolean {
     if (this.effectiveThreshold <= 0) return false
+    if (this.isCacheTtlDisabled) return false // TTL=0 disables cache
     // Check capabilities (instance getter or static)
     const caps =
       (this.storage as unknown as { capabilities?: StorageCapabilities })?.capabilities ||
@@ -1870,6 +1948,7 @@ export class EntityManager<T extends EntityRecord = EntityRecord> {
    * Get cache info (for debugging)
    */
   getCacheInfo(): CacheInfo {
+    const ttlMs = this.effectiveCacheTtlMs
     return {
       enabled: this.isCacheEnabled,
       storageSupportsTotal: this.storageSupportsTotal,
@@ -1879,6 +1958,11 @@ export class EntityManager<T extends EntityRecord = EntityRecord> {
       itemCount: this._cache.items.length,
       total: this._cache.total,
       loadedAt: this._cache.loadedAt,
+      ttlMs,
+      expiresAt: this._cache.loadedAt && ttlMs > 0
+        ? this._cache.loadedAt + ttlMs
+        : null,
+      expired: this._isCacheExpired(),
     }
   }
 

package/src/kernel/Kernel.ts

@@ -210,6 +210,8 @@ export interface KernelOptions {
   layouts?: LayoutComponents
   security?: SecurityConfig
   warmup?: boolean
+  /** Default entity cache TTL in milliseconds (0=disabled, -1=infinite, >0=TTL). Default: -1 (infinite). */
+  defaultEntityCacheTtlMs?: number
   eventRouter?: RoutesConfig
   sse?: SSEConfig
   debugBar?: DebugBarConfig
@@ -951,6 +953,11 @@ export class Kernel {
       entityAuthAdapter: (this.options.entityAuthAdapter as EntityAuthAdapter) || null,
     })
 
+    // Pass kernel options to orchestrator (avoid circular reference for Vue reactivity)
+    this.orchestrator.kernelOptions = {
+      defaultEntityCacheTtlMs: this.options.defaultEntityCacheTtlMs,
+    }
+
     if (this.options.toast) {
       this.orchestrator.setToastConfig(this.options.toast)
     }

package/src/modules/debug/EntitiesCollector.ts

@@ -57,6 +57,12 @@ export interface CacheInfo {
   overflow: boolean
   loadedAt: string | null
   items: unknown[]
+  /** TTL in milliseconds (0=disabled, -1=infinite, >0=TTL) */
+  ttlMs: number
+  /** Timestamp when cache expires (null if no TTL or infinite) */
+  expiresAt: number | null
+  /** Whether the cache has expired based on TTL */
+  expired: boolean
 }
 
 /**
@@ -350,6 +356,9 @@ export class EntitiesCollector extends Collector<EntityEntry> {
         threshold?: number
         overflow?: boolean
         loadedAt?: number
+        ttlMs?: number
+        expiresAt?: number | null
+        expired?: boolean
       }
       getStats?: () => StatsInfo
       getRequiredFields?: () => string[]
@@ -414,7 +423,10 @@ export class EntitiesCollector extends Collector<EntityEntry> {
         threshold: cache.threshold ?? 0,
         overflow: cache.overflow ?? false,
         loadedAt: cache.loadedAt ? new Date(cache.loadedAt).toLocaleTimeString() : null,
-        items: this._getCacheItems(extManager, 50)
+        items: this._getCacheItems(extManager, 50),
+        ttlMs: cache.ttlMs ?? -1,
+        expiresAt: cache.expiresAt ?? null,
+        expired: cache.expired ?? false
       },
 
       permissions: {

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

@@ -41,6 +41,12 @@ interface CacheInfo {
   total?: number
   threshold?: number
   items?: Record<string, unknown>[]
+  /** TTL in milliseconds (0=disabled, -1=infinite, >0=TTL) */
+  ttlMs?: number
+  /** Timestamp when cache expires (null if no TTL) */
+  expiresAt?: number | null
+  /** Whether the cache has expired based on TTL */
+  expired?: boolean
 }
 
 interface RelationInfo {
@@ -212,6 +218,26 @@ function getCapabilityLabel(cap: string): string {
   }
   return labels[cap] || cap
 }
+
+function formatTtl(ttlMs: number | undefined): string {
+  if (ttlMs === undefined) return '?'
+  if (ttlMs === -1) return '∞'
+  if (ttlMs === 0) return 'off'
+  if (ttlMs < 1000) return `${ttlMs}ms`
+  if (ttlMs < 60000) return `${Math.round(ttlMs / 1000)}s`
+  if (ttlMs < 3600000) return `${Math.round(ttlMs / 60000)}min`
+  return `${Math.round(ttlMs / 3600000)}h`
+}
+
+function formatExpiresIn(expiresAt: number | null | undefined): string {
+  if (!expiresAt) return ''
+  const diff = expiresAt - Date.now()
+  if (diff <= 0) return 'expired'
+  if (diff < 1000) return `${diff}ms`
+  if (diff < 60000) return `${Math.round(diff / 1000)}s`
+  if (diff < 3600000) return `${Math.round(diff / 60000)}min`
+  return `${Math.round(diff / 3600000)}h`
+}
 </script>
 
 <template>
@@ -377,18 +403,27 @@ function getCapabilityLabel(cap: string): string {
             <template v-if="entity.cache.valid">
               ({{ entity.cache.itemCount }} items, threshold {{ entity.cache.threshold }})
             </template>
+            <span class="entity-cache-ttl" :class="{ 'ttl-expired': entity.cache.expired }">
+              TTL: {{ formatTtl(entity.cache.ttlMs) }}
+              <template v-if="entity.cache.valid && entity.cache.expiresAt && !entity.cache.expired">
+                ({{ formatExpiresIn(entity.cache.expiresAt) }} left)
+              </template>
+              <template v-if="entity.cache.expired">
+                <i class="pi pi-exclamation-triangle" title="Cache expired" />
+              </template>
+            </span>
           </span>
           <button
-            v-if="!entity.cache.valid"
+            v-if="!entity.cache.valid || entity.cache.expired"
             class="entity-load-btn"
             :disabled="isLoading(entity.name)"
             @click.stop="loadCache(entity.name)"
           >
             <i :class="['pi', isLoading(entity.name) ? 'pi-spin pi-spinner' : 'pi-download']" />
-            {{ isLoading(entity.name) ? 'Loading...' : 'Load' }}
+            {{ isLoading(entity.name) ? 'Loading...' : (entity.cache.expired ? 'Reload' : 'Load') }}
           </button>
           <button
-            v-else
+            v-if="entity.cache.valid && !entity.cache.expired"
             class="entity-invalidate-btn"
             title="Invalidate cache"
             @click.stop="invalidateCache(entity.name)"

package/src/orchestrator/Orchestrator.ts

@@ -102,9 +102,10 @@ export class Orchestrator {
   private _toastConfig: ToastConfig = {}
   private _toastHelper: ToastHelper | null = null
 
-  // Reference to kernel (set by Kernel after construction)
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  kernel?: any
+  // Kernel options (set by Kernel after construction, avoids circular reference)
+  kernelOptions?: {
+    defaultEntityCacheTtlMs?: number
+  }
 
   constructor(options: OrchestratorOptions = {}) {
     const {

package/src/styles/_sidebar.scss

@@ -252,3 +252,129 @@ $sidebar-box-content-duration: 0.1s;
   opacity: 0;
   transition: opacity 0s;
 }
+
+/* =============================================================================
+   Nav Item - Sidebar navigation items
+
+   Same behavior as SidebarBox:
+   - Icon stays at fixed left position (never moves horizontally)
+   - On close: text disappears immediately
+   - On open: text appears with delayed fade after sidebar is fully open
+   ============================================================================= */
+
+// Nav item icon width
+$nav-item-icon-width: 1.125rem;
+
+// Nav item content left = icon-left + icon-width + gap
+// Icon is centered in collapsed sidebar: (collapsed-width - icon-width) / 2
+// Content starts after icon: icon-left + icon-width + gap = (collapsed-width + icon-width) / 2 + gap
+$nav-item-content-left: calc((var(--fad-sidebar-width-collapsed) + #{$nav-item-icon-width}) / 2 + 0.375rem);
+
+.sidebar-nav .nav-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: var(--fad-nav-item-padding-y) var(--fad-nav-item-padding-x);
+  padding-left: $nav-item-content-left;
+  color: var(--p-surface-300, #cbd5e1);
+  text-decoration: none;
+  font-size: var(--fad-font-size-sm);
+  font-weight: var(--fad-font-weight-normal);
+  border-radius: 0;
+  transition: background var(--fad-transition-fast), color var(--fad-transition-fast), padding var(--fad-transition-slow);
+}
+
+// Icon: FIXED position at left, centered in collapsed sidebar width
+// Position = (collapsed-width - icon-width) / 2 so icon is centered when collapsed
+.sidebar-nav .nav-item i {
+  position: absolute;
+  left: calc((var(--fad-sidebar-width-collapsed) - #{$nav-item-icon-width}) / 2);
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: var(--fad-nav-icon-size);
+  width: $nav-item-icon-width;
+  text-align: center;
+  opacity: 0.8;
+  // No horizontal transition - icon never moves
+}
+
+// Text: delayed fade-in when sidebar opens
+.sidebar-nav .nav-item span {
+  white-space: nowrap;
+  opacity: 1;
+  transition: opacity $sidebar-box-content-duration ease $sidebar-box-content-delay;
+}
+
+.sidebar-nav .nav-item:hover {
+  background: var(--p-surface-700, #334155);
+  color: var(--p-surface-0, white);
+}
+
+.sidebar-nav .nav-item-active {
+  background: var(--p-surface-700, #334155);
+  color: var(--p-primary-300, #93c5fd);
+  border-left: 2px solid var(--p-primary-400, #60a5fa);
+  padding-left: calc(#{$nav-item-content-left} - 2px);
+}
+
+.sidebar-nav .nav-item-active:hover {
+  background: var(--p-surface-600, #475569);
+}
+
+.sidebar-nav .nav-item-active i {
+  opacity: 1;
+}
+
+/* =============================================================================
+   Nav Item - Collapsed state
+   ============================================================================= */
+
+.sidebar--collapsed .sidebar-nav .nav-item {
+  padding: 0.5rem 0;
+  padding-left: $nav-item-content-left; // Keep same padding - icon position doesn't change
+  border-left: none !important;
+}
+
+.sidebar--collapsed .sidebar-nav .nav-item-active {
+  border-left: none !important;
+  padding-left: $nav-item-content-left;
+}
+
+// Text: disappears IMMEDIATELY when closing (no transition)
+.sidebar--collapsed .sidebar-nav .nav-item span {
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0s, visibility 0s; // Instant hide
+}
+
+// Icon: stays at EXACT SAME left position - no movement at all
+// (inherits left: $sidebar-box-icon-left, no change needed)
+
+/* =============================================================================
+   Nav Item - Mobile responsive
+   On mobile, sidebar becomes fullscreen and collapsed state is ignored
+   ============================================================================= */
+
+@media (max-width: 767px) {
+  .sidebar.sidebar--collapsed .sidebar-nav .nav-item {
+    justify-content: flex-start;
+    padding: var(--fad-nav-item-padding-y) var(--fad-nav-item-padding-x);
+    padding-left: $nav-item-content-left; // Keep same padding for absolute icon
+  }
+
+  .sidebar.sidebar--collapsed .sidebar-nav .nav-item span {
+    display: inline;
+    opacity: 1;
+    visibility: visible;
+    width: auto;
+    transition: opacity $sidebar-box-content-duration ease $sidebar-box-content-delay; // Restore delayed fade-in
+  }
+
+  .sidebar.sidebar--collapsed .sidebar-nav .nav-item i {
+    // Keep absolute positioning on mobile too - same centered position
+    position: absolute;
+    left: calc((var(--fad-sidebar-width-collapsed) - #{$nav-item-icon-width}) / 2);
+    font-size: var(--fad-nav-icon-size);
+    width: $nav-item-icon-width;
+  }
+}

package/src/types/index.ts

@@ -47,6 +47,8 @@ export interface StorageCapabilities {
   supportsCaching: boolean
   requiresAuth?: boolean
   searchFields?: string[]
+  /** Cache TTL in milliseconds (0=disabled, -1=infinite, >0=TTL). Can be set dynamically from API headers. */
+  cacheTtlMs?: number
 }
 
 // ============ FIELD TYPES ============
@@ -143,6 +145,8 @@ export interface EntityManagerOptions<T extends EntityRecord = EntityRecord> {
   labelField?: string | ((entity: T) => string)
   fields?: Record<string, FieldConfig>
   localFilterThreshold?: number | null
+  /** Cache TTL in milliseconds (0=disabled, -1=infinite, >0=TTL). Overrides global, overridden by storage. */
+  cacheTtlMs?: number | null
   readOnly?: boolean
   warmup?: boolean
   authSensitive?: boolean