@cube-dev/ui-kit 0.113.1 → 0.115.0

package/dist/components/overlays/Notifications/OverlayContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayContainer.js","names":[],"sources":["../../../../src/components/overlays/Notifications/OverlayContainer.tsx"],"sourcesContent":["import {\n  FocusEvent,\n  Key,\n  RefObject,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport { useEvent } from '../../../_internal';\nimport { tasty } from '../../../tasty';\nimport { useLayoutEffect } from '../../../utils/react/useLayoutEffect';\nimport { DisplayTransition } from '../../helpers/DisplayTransition/DisplayTransition';\nimport { Portal } from '../../portal';\nimport { ToastItem } from '../Toast/ToastItem';\n\nimport { NotificationItem } from './NotificationItem';\n\nimport type { InternalToast } from '../Toast/types';\nimport type { DismissReason, InternalNotification } from './types';\n\n// ─── Constants ───────────────────────────────────────────────────────\n\nconst COLLAPSE_VISIBLE_HEIGHT = 10;\nconst CONTAINER_OFFSET = 16;\nconst ITEM_GAP = 8;\nconst DEFAULT_ITEM_HEIGHT = 56;\n\n// ─── Styled Elements ─────────────────────────────────────────────────\n\nconst OverlayContainerElement = tasty({\n  styles: {\n    position: 'fixed',\n    top: '2x',\n    left: '50%',\n    transform: 'translateX(-50%)',\n    zIndex: 10000,\n    padding: '1x',\n    height: '0',\n    pointerEvents: 'none',\n  },\n});\n\nconst OverlayItemWrapper = tasty({\n  styles: {\n    position: 'absolute',\n    top: '0',\n    left: '50%',\n    transform: {\n      '': 'translateX(-50%) translateY(-50%)',\n      'isMeasured & isShown': 'translateX(-50%) translateY(0)',\n    },\n    width: 'max-content 50x',\n    pointerEvents: 'auto',\n    transition: {\n      '': 'opacity $transition ease-in, transform $transition ease-in',\n      isMeasured:\n        'top $transition ease-in, opacity $transition ease-in, transform $transition ease-in',\n    },\n    opacity: {\n      '': 0,\n      isShown: 1,\n    },\n  },\n});\n\n// ─── Unified Item Type ───────────────────────────────────────────────\n\ntype OverlayItem =\n  | { kind: 'toast'; data: InternalToast }\n  | { kind: 'notification'; data: InternalNotification };\n\nfunction getItemId(item: OverlayItem): string {\n  return item.data.internalId;\n}\n\nfunction isItemExiting(item: OverlayItem): boolean {\n  return item.data.isExiting === true;\n}\n\nfunction getItemCreatedAt(item: OverlayItem): number {\n  return item.data.createdAt;\n}\n\n// ─── useItemPositions Hook ───────────────────────────────────────────\n\ninterface ItemPositionsResult {\n  heights: Record<string, number>;\n  /** Set of item IDs that have been measured AND painted at their correct position. */\n  settledIds: Set<string>;\n  positions: Map<string, number>;\n  lastPositionsRef: ReturnType<typeof useRef<Map<string, number>>>;\n  itemRefs: ReturnType<typeof useRef<Map<string, HTMLDivElement>>>;\n  createRefCallback: (\n    itemId: string,\n    displayRef: (el: HTMLElement | null) => void,\n  ) => (el: HTMLDivElement | null) => void;\n}\n\n/**\n * Manages height measurement, position calculation, and ref tracking\n * for overlay items. Extracted from OverlayContainer for readability.\n */\nfunction useItemPositions(visibleItems: OverlayItem[]): ItemPositionsResult {\n  const [heights, setHeights] = useState<Record<string, number>>({});\n  const itemRefs = useRef<Map<string, HTMLDivElement>>(new Map());\n  const lastPositionsRef = useRef<Map<string, number>>(new Map());\n\n  // Items that have been measured AND painted at their correct position.\n  // Lags one frame behind `heights` so the browser paints the item at\n  // its final `top` before the CSS `top` transition is enabled.\n  const [settledIds, setSettledIds] = useState<Set<string>>(new Set());\n  const rafRef = useRef<number | null>(null);\n\n  // Measure heights using layout effect to avoid visible layout shifts.\n  // Runs every render but bails early if nothing changed.\n  useLayoutEffect(() => {\n    const newHeights: Record<string, number> = {};\n    let hasChanges = false;\n\n    itemRefs.current.forEach((el, id) => {\n      const height = el.offsetHeight || DEFAULT_ITEM_HEIGHT;\n      newHeights[id] = height;\n\n      if (heights[id] !== height) {\n        hasChanges = true;\n      }\n    });\n\n    for (const id of Object.keys(heights)) {\n      if (!itemRefs.current.has(id)) {\n        hasChanges = true;\n      }\n    }\n\n    if (hasChanges) {\n      setHeights(newHeights);\n    }\n  });\n\n  // After heights change, schedule settledIds update for the next frame.\n  // This ensures the item is painted at its correct position (with no top\n  // transition) before we enable the transition.\n  useEffect(() => {\n    const heightKeys = Object.keys(heights);\n    const newIds = heightKeys.filter((id) => !settledIds.has(id));\n    const hasStaleIds =\n      settledIds.size > 0 && [...settledIds].some((id) => !(id in heights));\n\n    if (newIds.length === 0 && !hasStaleIds) return;\n\n    if (rafRef.current != null) {\n      cancelAnimationFrame(rafRef.current);\n    }\n\n    // For pruning-only updates (no new items), apply synchronously since\n    // there's no need to wait for a paint frame.\n    if (newIds.length === 0 && hasStaleIds) {\n      setSettledIds((prev) => new Set(heightKeys.filter((id) => prev.has(id))));\n      return;\n    }\n\n    rafRef.current = requestAnimationFrame(() => {\n      rafRef.current = null;\n      setSettledIds((prev) => {\n        const next = new Set<string>();\n\n        // Only keep IDs that still exist in heights (prune removed items)\n        for (const id of heightKeys) {\n          if (prev.has(id)) {\n            next.add(id);\n          }\n        }\n\n        for (const id of newIds) {\n          next.add(id);\n        }\n\n        return next;\n      });\n    });\n\n    return () => {\n      if (rafRef.current != null) {\n        cancelAnimationFrame(rafRef.current);\n        rafRef.current = null;\n      }\n    };\n  }, [heights]);\n\n  const createRefCallback = useCallback(\n    (itemId: string, displayRef: (el: HTMLElement | null) => void) =>\n      (el: HTMLDivElement | null) => {\n        displayRef(el);\n\n        if (el) {\n          itemRefs.current.set(itemId, el);\n        } else {\n          itemRefs.current.delete(itemId);\n        }\n      },\n    [],\n  );\n\n  const positions = useMemo(() => {\n    const posMap = new Map<string, number>();\n    let currentTop = 0;\n\n    for (const item of visibleItems) {\n      const id = getItemId(item);\n      posMap.set(id, currentTop);\n      const height = heights[id] ?? DEFAULT_ITEM_HEIGHT;\n      currentTop += height + ITEM_GAP;\n    }\n\n    return posMap;\n  }, [visibleItems, heights]);\n\n  useEffect(() => {\n    positions.forEach((pos, id) => {\n      lastPositionsRef.current.set(id, pos);\n    });\n  }, [positions]);\n\n  return {\n    heights,\n    settledIds,\n    positions,\n    lastPositionsRef,\n    itemRefs,\n    createRefCallback,\n  };\n}\n\n// ─── useCollapseState Hook ───────────────────────────────────────────\n\ninterface CollapseStateResult {\n  isCollapsed: boolean;\n  handleMouseEnter: () => void;\n  handleMouseLeave: () => void;\n  handleFocus: () => void;\n  handleBlur: (e: FocusEvent) => void;\n  containerRef: RefObject<HTMLDivElement | null>;\n}\n\n/**\n * Manages collapse/expand behavior and pause state for the overlay container.\n * Extracted from OverlayContainer for readability.\n */\nfunction useCollapseState(\n  canCollapse: boolean,\n  allItems: OverlayItem[],\n  itemRefs: ReturnType<typeof useRef<Map<string, HTMLDivElement>>>,\n  onPauseChange: (paused: boolean) => void,\n): CollapseStateResult {\n  const [isCollapsed, setIsCollapsed] = useState(false);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const boundsRef = useRef<DOMRect | null>(null);\n\n  const updateBounds = useCallback(() => {\n    const refs = itemRefs.current;\n\n    if (!refs || refs.size === 0) {\n      boundsRef.current = null;\n      return;\n    }\n\n    let minX = Infinity,\n      minY = Infinity,\n      maxX = -Infinity,\n      maxY = -Infinity;\n\n    refs.forEach((el) => {\n      const rect = el.getBoundingClientRect();\n      minX = Math.min(minX, rect.left);\n      minY = Math.min(minY, rect.top);\n      maxX = Math.max(maxX, rect.right);\n      maxY = Math.max(maxY, rect.bottom);\n    });\n\n    if (typeof DOMRect !== 'undefined') {\n      boundsRef.current = new DOMRect(minX, minY, maxX - minX, maxY - minY);\n    } else {\n      boundsRef.current = {\n        x: minX,\n        y: minY,\n        width: maxX - minX,\n        height: maxY - minY,\n        top: minY,\n        right: maxX,\n        bottom: maxY,\n        left: minX,\n        toJSON: () => ({}),\n      } as DOMRect;\n    }\n  }, [itemRefs]);\n\n  // Track mouse for collapse — expand when mouse leaves bounds\n  useEffect(() => {\n    if (!isCollapsed) return;\n\n    const handleMouseMove = (e: MouseEvent) => {\n      const bounds = boundsRef.current;\n\n      if (!bounds) {\n        setIsCollapsed(false);\n        onPauseChange(false);\n        return;\n      }\n\n      const padding = 20;\n      const isInBounds =\n        e.clientX >= bounds.left - padding &&\n        e.clientX <= bounds.right + padding &&\n        e.clientY >= bounds.top - padding &&\n        e.clientY <= bounds.bottom + padding;\n\n      if (!isInBounds) {\n        setIsCollapsed(false);\n        onPauseChange(false);\n      }\n    };\n\n    window.addEventListener('mousemove', handleMouseMove);\n    return () => window.removeEventListener('mousemove', handleMouseMove);\n  }, [isCollapsed, onPauseChange]);\n\n  // Update bounds when items change\n  useEffect(() => {\n    updateBounds();\n  }, [allItems, updateBounds]);\n\n  const handleMouseEnter = useCallback(() => {\n    updateBounds();\n    onPauseChange(true);\n\n    if (canCollapse) {\n      setIsCollapsed(true);\n    }\n  }, [updateBounds, canCollapse, onPauseChange]);\n\n  const handleMouseLeave = useCallback(() => {\n    if (!isCollapsed) {\n      onPauseChange(false);\n    }\n  }, [isCollapsed, onPauseChange]);\n\n  const handleFocus = useCallback(() => {\n    onPauseChange(true);\n  }, [onPauseChange]);\n\n  const handleBlur = useCallback(\n    (e: FocusEvent) => {\n      if (\n        containerRef.current &&\n        !containerRef.current.contains(e.relatedTarget as Node)\n      ) {\n        onPauseChange(false);\n      }\n    },\n    [onPauseChange],\n  );\n\n  return {\n    isCollapsed,\n    handleMouseEnter,\n    handleMouseLeave,\n    handleFocus,\n    handleBlur,\n    containerRef,\n  };\n}\n\n// ─── Overlay Container ───────────────────────────────────────────────\n//\n// INTENTIONAL: Position calculations are done manually (absolute positioning + JS\n// height tracking) rather than relying on CSS flexbox/grid layout. This is\n// deliberate — the container mixes enter/exit animations, collapse behavior, and\n// heterogeneous item sizes (toasts vs notifications) which require per-item\n// position control. CSS-only solutions (e.g., flex column with gap) break when\n// items exit asynchronously or when collapse transforms need to be computed per-item.\n\nexport interface OverlayContainerProps {\n  toasts: InternalToast[];\n  notifications: InternalNotification[];\n  onToastExitComplete: (internalId: string) => void;\n  onNotificationExitComplete: (internalId: string) => void;\n  onNotificationDismiss: (id: Key, reason: DismissReason) => void;\n  onPauseChange: (paused: boolean) => void;\n}\n\nexport function OverlayContainer({\n  toasts,\n  notifications,\n  onToastExitComplete,\n  onNotificationExitComplete,\n  onNotificationDismiss,\n  onPauseChange,\n}: OverlayContainerProps) {\n  // Merge toasts and notifications into a single ordered list\n  const allItems: OverlayItem[] = useMemo(() => {\n    const items: OverlayItem[] = [\n      ...toasts.map((t): OverlayItem => ({ kind: 'toast', data: t })),\n      ...notifications.map(\n        (n): OverlayItem => ({ kind: 'notification', data: n }),\n      ),\n    ];\n\n    // Sort by createdAt ascending (oldest first = bottom of stack, newest last = top)\n    items.sort((a, b) => getItemCreatedAt(a) - getItemCreatedAt(b));\n\n    return items;\n  }, [toasts, notifications]);\n\n  const visibleItems = useMemo(\n    () => allItems.filter((item) => !isItemExiting(item)),\n    [allItems],\n  );\n  const hasNotifications = notifications.some((n) => !n.isExiting);\n  const canCollapse = !hasNotifications;\n\n  const {\n    heights,\n    settledIds,\n    positions,\n    lastPositionsRef,\n    itemRefs,\n    createRefCallback,\n  } = useItemPositions(visibleItems);\n\n  const {\n    isCollapsed,\n    handleMouseEnter,\n    handleMouseLeave,\n    handleFocus,\n    handleBlur,\n    containerRef,\n  } = useCollapseState(canCollapse, allItems, itemRefs, onPauseChange);\n\n  // ─── Callbacks ─────────────────────────────────────────────────────\n\n  // When the user dismisses a notification they were hovering, the element\n  // is removed from the DOM so mouseLeave never fires. Explicitly unpause\n  // so remaining notifications' timers resume.\n  const handleNotificationDismiss = useEvent(\n    (id: Key, reason: DismissReason) => {\n      onNotificationDismiss(id, reason);\n      onPauseChange(false);\n    },\n  );\n\n  const handleExitComplete = useEvent((item: OverlayItem) => {\n    const id = getItemId(item);\n    lastPositionsRef.current?.delete(id);\n\n    if (item.kind === 'toast') {\n      onToastExitComplete(item.data.internalId);\n    } else {\n      onNotificationExitComplete(item.data.internalId);\n    }\n  });\n\n  // useCallback (not useEvent) because this is called during render.\n  // useEvent defers the ref update to useLayoutEffect, so during render\n  // it would still read the previous closure's positions/heights.\n  const getItemStyle = useCallback(\n    (item: OverlayItem, index: number, total: number) => {\n      const id = getItemId(item);\n      const baseTop =\n        positions.get(id) ?? lastPositionsRef.current?.get(id) ?? 0;\n      const height = heights[id] ?? DEFAULT_ITEM_HEIGHT;\n\n      if (!isCollapsed || !canCollapse) {\n        return { top: `${baseTop}px` };\n      }\n\n      const isNewest = index === total - 1;\n      const collapsedTop = COLLAPSE_VISIBLE_HEIGHT - CONTAINER_OFFSET - height;\n\n      return {\n        top: `${collapsedTop}px`,\n        zIndex: index,\n        opacity: isNewest ? 1 : 0,\n        pointerEvents: 'none' as const,\n      };\n    },\n    [isCollapsed, canCollapse, positions, heights, lastPositionsRef],\n  );\n\n  // Build a visibleIndex lookup map to avoid O(n²) findIndex inside render loop\n  const visibleIndexMap = useMemo(() => {\n    const map = new Map<string, number>();\n\n    visibleItems.forEach((item, index) => {\n      map.set(getItemId(item), index);\n    });\n\n    return map;\n  }, [visibleItems]);\n\n  if (allItems.length === 0) return null;\n\n  return (\n    <Portal>\n      <OverlayContainerElement\n        ref={containerRef}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n      >\n        {allItems.map((item) => {\n          const itemId = getItemId(item);\n          const visibleIndex = visibleIndexMap.get(itemId) ?? 0;\n          const isExiting = isItemExiting(item);\n\n          return (\n            <DisplayTransition\n              key={itemId}\n              animateOnMount\n              isShown={!isExiting}\n              onRest={(transition) => {\n                if (transition === 'exit') {\n                  handleExitComplete(item);\n                }\n              }}\n            >\n              {({ isShown, ref }) => (\n                <OverlayItemWrapper\n                  ref={createRefCallback(itemId, ref)}\n                  mods={{ isShown, isMeasured: settledIds.has(itemId) }}\n                  style={getItemStyle(item, visibleIndex, visibleItems.length)}\n                  onMouseEnter={handleMouseEnter}\n                  onMouseLeave={handleMouseLeave}\n                >\n                  {item.kind === 'toast' ? (\n                    <ToastItem\n                      {...item.data.itemProps}\n                      title={item.data.title}\n                      description={item.data.description}\n                      theme={item.data.theme}\n                      icon={item.data.icon}\n                      isLoading={item.data.isLoading}\n                    />\n                  ) : (\n                    <NotificationItem\n                      notification={item.data}\n                      onDismiss={handleNotificationDismiss}\n                    />\n                  )}\n                </OverlayItemWrapper>\n              )}\n            </DisplayTransition>\n          );\n        })}\n      </OverlayContainerElement>\n    </Portal>\n  );\n}\n"],"mappings":"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"}

package/dist/components/overlays/Notifications/OverlayProvider.d.ts

@@ -0,0 +1,13 @@
+
+import { OverlayProviderProps } from "./types.js";
+import { useToastContext } from "./NotificationContext.js";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/overlays/Notifications/OverlayProvider.d.ts
+declare function OverlayProvider({
+  children,
+  maxPersistentNotifications
+}: OverlayProviderProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { OverlayProvider };
+//# sourceMappingURL=OverlayProvider.d.ts.map

package/dist/components/overlays/Notifications/OverlayProvider.js

@@ -0,0 +1,68 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { NotificationContext, PersistentNotificationsContext, ToastContext, useNotificationContext, useToastContext } from "./NotificationContext.js";
+import { OverlayContainer } from "./OverlayContainer.js";
+import { useNotificationState } from "./use-notification-state.js";
+import { useOverlayTimers } from "./use-overlay-timers.js";
+import { usePersistentState } from "./use-persistent-state.js";
+import { useToastState } from "./use-toast-state.js";
+import { useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/overlays/Notifications/OverlayProvider.tsx
+const DEFAULT_MAX_PERSISTENT = 200;
+function OverlayProvider({ children, maxPersistentNotifications = DEFAULT_MAX_PERSISTENT }) {
+	const timersRef = useRef(null);
+	const persistent = usePersistentState(maxPersistentNotifications);
+	const toast = useToastState(timersRef);
+	const notification = useNotificationState(timersRef, persistent);
+	const timers = useOverlayTimers({
+		toastsRef: toast.toastsRef,
+		notificationsRef: notification.notificationsRef,
+		removeToast: toast.removeToast,
+		removeNotification: notification.removeNotification
+	});
+	timersRef.current = timers;
+	const toastContextValue = useMemo(() => ({
+		addToast: toast.addToast,
+		removeToast: toast.removeToast,
+		updateToast: toast.updateToast,
+		toasts: toast.toasts
+	}), [toast.toasts]);
+	const notificationContextValue = useMemo(() => ({
+		addNotification: notification.addNotification,
+		removeNotification: notification.removeNotification,
+		updateNotification: notification.updateNotification,
+		notifications: notification.notifications,
+		addPersistentItem: persistent.addPersistentItem,
+		removePersistentItem: persistent.removePersistentItem,
+		removePersistentItemsByOwner: persistent.removePersistentItemsByOwner,
+		removeByOwner: notification.removeByOwner
+	}), [notification.notifications]);
+	const persistentContextValue = useMemo(() => ({
+		persistentItems: persistent.persistentItems,
+		removePersistentItem: persistent.removePersistentItem,
+		clearPersistentItems: persistent.clearPersistentItems,
+		markAllAsRead: persistent.markAllAsRead
+	}), [persistent.persistentItems]);
+	return /* @__PURE__ */ jsx(ToastContext.Provider, {
+		value: toastContextValue,
+		children: /* @__PURE__ */ jsx(NotificationContext.Provider, {
+			value: notificationContextValue,
+			children: /* @__PURE__ */ jsxs(PersistentNotificationsContext.Provider, {
+				value: persistentContextValue,
+				children: [children, /* @__PURE__ */ jsx(OverlayContainer, {
+					toasts: toast.toasts,
+					notifications: notification.notifications,
+					onToastExitComplete: toast.finalizeToastRemoval,
+					onNotificationExitComplete: notification.finalizeNotificationRemoval,
+					onNotificationDismiss: notification.removeNotification,
+					onPauseChange: timers.handlePauseChange
+				})]
+			})
+		})
+	});
+}
+
+//#endregion
+export { OverlayProvider };
+//# sourceMappingURL=OverlayProvider.js.map

package/dist/components/overlays/Notifications/OverlayProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayProvider.js","names":[],"sources":["../../../../src/components/overlays/Notifications/OverlayProvider.tsx"],"sourcesContent":["import { useMemo, useRef } from 'react';\n\nimport {\n  NotificationContext,\n  PersistentNotificationsContext,\n  ToastContext,\n} from './NotificationContext';\nimport { OverlayContainer } from './OverlayContainer';\nimport { useNotificationState } from './use-notification-state';\nimport { useOverlayTimers } from './use-overlay-timers';\nimport { usePersistentState } from './use-persistent-state';\nimport { useToastState } from './use-toast-state';\n\nimport type { ToastContextValue } from '../Toast/types';\nimport type {\n  InternalNotificationContextValue,\n  OverlayProviderProps,\n  PersistentNotificationsContextValue,\n} from './types';\nimport type { OverlayTimers } from './use-overlay-timers';\n\n// ─── Re-export context hooks for consumers ───────────────────────────\n\nexport { useToastContext, useNotificationContext } from './NotificationContext';\n\n// ─── Constants ───────────────────────────────────────────────────────\n\nconst DEFAULT_MAX_PERSISTENT = 200;\n\n// ─── OverlayProvider ─────────────────────────────────────────────────\n\nexport function OverlayProvider({\n  children,\n  maxPersistentNotifications = DEFAULT_MAX_PERSISTENT,\n}: OverlayProviderProps) {\n  // Shared ref that breaks the circular dependency between state hooks and timers.\n  // State hooks need timer methods (start/clear), timer hooks need remove methods.\n  // All consumers access the ref only inside useEvent/callbacks (never during\n  // render), so it is guaranteed to be populated before first use.\n  const timersRef = useRef<OverlayTimers>(null!);\n\n  // 1. Persistent state (no dependencies on other hooks)\n  const persistent = usePersistentState(maxPersistentNotifications);\n\n  // 2. Toast state — accesses timers through the shared ref\n  const toast = useToastState(timersRef);\n\n  // 3. Notification state — accesses timers through the shared ref\n  const notification = useNotificationState(timersRef, persistent);\n\n  // 4. Create timers and populate the ref\n  const timers = useOverlayTimers({\n    toastsRef: toast.toastsRef,\n    notificationsRef: notification.notificationsRef,\n    removeToast: toast.removeToast,\n    removeNotification: notification.removeNotification,\n  });\n\n  timersRef.current = timers;\n\n  // ─── Context Values ───────────────────────────────────────────────\n\n  // Only include actually-changing values in deps. All useEvent-based\n  // callbacks are referentially stable and omitted.\n  const toastContextValue = useMemo<ToastContextValue>(\n    () => ({\n      addToast: toast.addToast,\n      removeToast: toast.removeToast,\n      updateToast: toast.updateToast,\n      toasts: toast.toasts,\n    }),\n    [toast.toasts],\n  );\n\n  const notificationContextValue = useMemo<InternalNotificationContextValue>(\n    () => ({\n      addNotification: notification.addNotification,\n      removeNotification: notification.removeNotification,\n      updateNotification: notification.updateNotification,\n      notifications: notification.notifications,\n      addPersistentItem: persistent.addPersistentItem,\n      removePersistentItem: persistent.removePersistentItem,\n      removePersistentItemsByOwner: persistent.removePersistentItemsByOwner,\n      removeByOwner: notification.removeByOwner,\n    }),\n    [notification.notifications],\n  );\n\n  const persistentContextValue = useMemo<PersistentNotificationsContextValue>(\n    () => ({\n      persistentItems: persistent.persistentItems,\n      removePersistentItem: persistent.removePersistentItem,\n      clearPersistentItems: persistent.clearPersistentItems,\n      markAllAsRead: persistent.markAllAsRead,\n    }),\n    [persistent.persistentItems],\n  );\n\n  return (\n    <ToastContext.Provider value={toastContextValue}>\n      <NotificationContext.Provider value={notificationContextValue}>\n        <PersistentNotificationsContext.Provider value={persistentContextValue}>\n          {children}\n          <OverlayContainer\n            toasts={toast.toasts}\n            notifications={notification.notifications}\n            onToastExitComplete={toast.finalizeToastRemoval}\n            onNotificationExitComplete={\n              notification.finalizeNotificationRemoval\n            }\n            onNotificationDismiss={notification.removeNotification}\n            onPauseChange={timers.handlePauseChange}\n          />\n        </PersistentNotificationsContext.Provider>\n      </NotificationContext.Provider>\n    </ToastContext.Provider>\n  );\n}\n"],"mappings":";;;;;;;;;;;AA2BA,MAAM,yBAAyB;AAI/B,SAAgB,gBAAgB,EAC9B,UACA,6BAA6B,0BACN;CAKvB,MAAM,YAAY,OAAsB,KAAM;CAG9C,MAAM,aAAa,mBAAmB,2BAA2B;CAGjE,MAAM,QAAQ,cAAc,UAAU;CAGtC,MAAM,eAAe,qBAAqB,WAAW,WAAW;CAGhE,MAAM,SAAS,iBAAiB;EAC9B,WAAW,MAAM;EACjB,kBAAkB,aAAa;EAC/B,aAAa,MAAM;EACnB,oBAAoB,aAAa;EAClC,CAAC;AAEF,WAAU,UAAU;CAMpB,MAAM,oBAAoB,eACjB;EACL,UAAU,MAAM;EAChB,aAAa,MAAM;EACnB,aAAa,MAAM;EACnB,QAAQ,MAAM;EACf,GACD,CAAC,MAAM,OAAO,CACf;CAED,MAAM,2BAA2B,eACxB;EACL,iBAAiB,aAAa;EAC9B,oBAAoB,aAAa;EACjC,oBAAoB,aAAa;EACjC,eAAe,aAAa;EAC5B,mBAAmB,WAAW;EAC9B,sBAAsB,WAAW;EACjC,8BAA8B,WAAW;EACzC,eAAe,aAAa;EAC7B,GACD,CAAC,aAAa,cAAc,CAC7B;CAED,MAAM,yBAAyB,eACtB;EACL,iBAAiB,WAAW;EAC5B,sBAAsB,WAAW;EACjC,sBAAsB,WAAW;EACjC,eAAe,WAAW;EAC3B,GACD,CAAC,WAAW,gBAAgB,CAC7B;AAED,QACE,oBAAC,aAAa;EAAS,OAAO;YAC5B,oBAAC,oBAAoB;GAAS,OAAO;aACnC,qBAAC,+BAA+B;IAAS,OAAO;eAC7C,UACD,oBAAC;KACC,QAAQ,MAAM;KACd,eAAe,aAAa;KAC5B,qBAAqB,MAAM;KAC3B,4BACE,aAAa;KAEf,uBAAuB,aAAa;KACpC,eAAe,OAAO;MACtB;KACsC;IACb;GACT"}

package/dist/components/overlays/Notifications/PersistentNotificationsList.d.ts

@@ -0,0 +1,30 @@
+
+import { PersistentNotificationsListProps } from "./types.js";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/overlays/Notifications/PersistentNotificationsList.d.ts
+/**
+ * Standardized rendering for archived/persistent notifications.
+ * Always reads items from the notification context.
+ * Composable with app-specific shells (popover, dialog, page section).
+ *
+ * Marks all items as read after being visible for 2 seconds.
+ * Relative timestamps refresh every 10 seconds while the list is mounted.
+ *
+ * Items are always dismissible. Dismissing an item removes it from the
+ * persistent list and marks its ID as "fully dismissed" — subsequent triggers
+ * with the same ID will be completely ignored (no overlay, no re-archival).
+ *
+ * @example
+ * ```tsx
+ * <PersistentNotificationsList emptyState="No notifications" />
+ * ```
+ */
+declare function PersistentNotificationsList({
+  onDismissItem,
+  onAction,
+  emptyState
+}: PersistentNotificationsListProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { PersistentNotificationsList };
+//# sourceMappingURL=PersistentNotificationsList.d.ts.map

package/dist/components/overlays/Notifications/PersistentNotificationsList.js

@@ -0,0 +1,120 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { tasty } from "../../../tasty/tasty.js";
+import { useEvent } from "../../../_internal/hooks/use-event.js";
+import { _Text } from "../../content/Text.js";
+import { NotificationActionInterceptorContext } from "./NotificationAction.js";
+import { NotificationCard } from "./NotificationCard.js";
+import { Divider } from "../../content/Divider.js";
+import { formatRelativeTime } from "./format-relative-time.js";
+import { usePersistentNotifications } from "./use-persistent-notifications.js";
+import { Fragment, useContext, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/overlays/Notifications/PersistentNotificationsList.tsx
+const MARK_READ_DELAY = 2e3;
+/** Interval (ms) at which relative timestamps refresh while the list is mounted. */
+const TIMESTAMP_REFRESH_INTERVAL = 1e4;
+const ListContainer = tasty({
+	qa: "PersistentNotificationsList",
+	role: "log",
+	"aria-label": "Notifications",
+	styles: {
+		display: "flex",
+		flow: "column"
+	}
+});
+const EmptyStateContainer = tasty({ styles: {
+	display: "flex",
+	placeItems: "center",
+	placeContent: "center",
+	padding: "4x",
+	color: "#dark.5",
+	preset: "t3"
+} });
+/**
+* Standardized rendering for archived/persistent notifications.
+* Always reads items from the notification context.
+* Composable with app-specific shells (popover, dialog, page section).
+*
+* Marks all items as read after being visible for 2 seconds.
+* Relative timestamps refresh every 10 seconds while the list is mounted.
+*
+* Items are always dismissible. Dismissing an item removes it from the
+* persistent list and marks its ID as "fully dismissed" — subsequent triggers
+* with the same ID will be completely ignored (no overlay, no re-archival).
+*
+* @example
+* ```tsx
+* <PersistentNotificationsList emptyState="No notifications" />
+* ```
+*/
+function PersistentNotificationsList({ onDismissItem, onAction, emptyState }) {
+	const { items, remove, markAllAsRead } = usePersistentNotifications();
+	const handleDismiss = useEvent((item) => {
+		remove(item.id);
+		onDismissItem?.(item);
+	});
+	const markReadTimerRef = useRef(null);
+	const [, setTick] = useState(0);
+	useEffect(() => {
+		if (items.length === 0) return;
+		const interval = setInterval(() => {
+			setTick((t) => t + 1);
+		}, TIMESTAMP_REFRESH_INTERVAL);
+		return () => clearInterval(interval);
+	}, [items.length]);
+	useEffect(() => {
+		if (!items.some((i) => !i.isRead)) return;
+		markReadTimerRef.current = setTimeout(() => {
+			markAllAsRead();
+		}, MARK_READ_DELAY);
+		return () => {
+			if (markReadTimerRef.current) {
+				clearTimeout(markReadTimerRef.current);
+				markReadTimerRef.current = null;
+			}
+		};
+	}, [markAllAsRead, items]);
+	if (items.length === 0) return /* @__PURE__ */ jsx(ListContainer, { children: /* @__PURE__ */ jsx(EmptyStateContainer, { children: emptyState ?? "No notifications" }) });
+	return /* @__PURE__ */ jsx(NotificationActionInterceptorContext.Provider, {
+		value: onAction ?? null,
+		children: /* @__PURE__ */ jsx(ListContainer, { children: items.map((item, index) => /* @__PURE__ */ jsxs(Fragment, { children: [index > 0 && /* @__PURE__ */ jsx(Divider, {}), /* @__PURE__ */ jsx(PersistentNotificationListItem, {
+			item,
+			onDismiss: handleDismiss
+		})] }, String(item.id))) })
+	});
+}
+function PersistentNotificationListItem({ item, onDismiss }) {
+	const suffix = /* @__PURE__ */ jsx(_Text, {
+		opacity: .5,
+		preset: "c2",
+		children: formatRelativeTime(item.createdAt)
+	});
+	const handleDismiss = useEvent((_id, _reason) => {
+		onDismiss?.(item);
+	});
+	const parentInterceptor = useContext(NotificationActionInterceptorContext);
+	const handleItemAction = useEvent(() => {
+		parentInterceptor?.();
+	});
+	return /* @__PURE__ */ jsx(NotificationActionInterceptorContext.Provider, {
+		value: handleItemAction,
+		children: /* @__PURE__ */ jsx(NotificationCard, {
+			qa: "PersistentNotificationItem",
+			theme: item.theme,
+			title: item.title,
+			description: item.description,
+			icon: item.icon,
+			actions: item.actions,
+			isDismissible: !!onDismiss,
+			elevated: false,
+			notificationId: item.id,
+			suffix,
+			onDismiss: onDismiss ? handleDismiss : void 0
+		})
+	});
+}
+
+//#endregion
+export { PersistentNotificationsList };
+//# sourceMappingURL=PersistentNotificationsList.js.map

package/dist/components/overlays/Notifications/PersistentNotificationsList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PersistentNotificationsList.js","names":["Text"],"sources":["../../../../src/components/overlays/Notifications/PersistentNotificationsList.tsx"],"sourcesContent":["import { Fragment, Key, useContext, useEffect, useRef, useState } from 'react';\n\nimport { useEvent } from '../../../_internal';\nimport { tasty } from '../../../tasty';\nimport { Divider } from '../../content/Divider';\nimport { Text } from '../../content/Text';\n\nimport { formatRelativeTime } from './format-relative-time';\nimport { NotificationActionInterceptorContext } from './NotificationAction';\nimport { NotificationCard } from './NotificationCard';\nimport { usePersistentNotifications } from './use-persistent-notifications';\n\nimport type {\n  DismissReason,\n  PersistentNotificationItem,\n  PersistentNotificationsListProps,\n} from './types';\n\n// ─── Constants ───────────────────────────────────────────────────────\n\nconst MARK_READ_DELAY = 2000;\n/** Interval (ms) at which relative timestamps refresh while the list is mounted. */\nconst TIMESTAMP_REFRESH_INTERVAL = 10_000;\n\n// ─── Styled Components ──────────────────────────────────────────────\n\nconst ListContainer = tasty({\n  qa: 'PersistentNotificationsList',\n  role: 'log',\n  'aria-label': 'Notifications',\n  styles: {\n    display: 'flex',\n    flow: 'column',\n  },\n});\n\nconst EmptyStateContainer = tasty({\n  styles: {\n    display: 'flex',\n    placeItems: 'center',\n    placeContent: 'center',\n    padding: '4x',\n    color: '#dark.5',\n    preset: 't3',\n  },\n});\n\n// ─── PersistentNotificationsList Component ───────────────────────────\n\n/**\n * Standardized rendering for archived/persistent notifications.\n * Always reads items from the notification context.\n * Composable with app-specific shells (popover, dialog, page section).\n *\n * Marks all items as read after being visible for 2 seconds.\n * Relative timestamps refresh every 10 seconds while the list is mounted.\n *\n * Items are always dismissible. Dismissing an item removes it from the\n * persistent list and marks its ID as \"fully dismissed\" — subsequent triggers\n * with the same ID will be completely ignored (no overlay, no re-archival).\n *\n * @example\n * ```tsx\n * <PersistentNotificationsList emptyState=\"No notifications\" />\n * ```\n */\nexport function PersistentNotificationsList({\n  onDismissItem,\n  onAction,\n  emptyState,\n}: PersistentNotificationsListProps) {\n  const { items, remove, markAllAsRead } = usePersistentNotifications();\n\n  // Default dismiss handler removes the item from the persistent list (which\n  // also marks the id as \"fully dismissed\" so it won't reappear).\n  // If a consumer provides `onDismissItem`, it is called *after* the built-in removal.\n  const handleDismiss = useEvent((item: PersistentNotificationItem) => {\n    remove(item.id);\n    onDismissItem?.(item);\n  });\n  const markReadTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  // Tick counter that increments every TIMESTAMP_REFRESH_INTERVAL to force\n  // re-render so relative timestamps (e.g. \"5 min ago\") stay up to date.\n  const [, setTick] = useState(0);\n\n  useEffect(() => {\n    if (items.length === 0) return;\n\n    const interval = setInterval(() => {\n      setTick((t) => t + 1);\n    }, TIMESTAMP_REFRESH_INTERVAL);\n\n    return () => clearInterval(interval);\n  }, [items.length]);\n\n  // Mark all persistent notifications as read after a 2s delay.\n  // Re-starts the timer whenever items change (e.g. new unread items arrive\n  // while the list is already visible).\n  useEffect(() => {\n    const hasUnread = items.some((i) => !i.isRead);\n\n    if (!hasUnread) return;\n\n    markReadTimerRef.current = setTimeout(() => {\n      markAllAsRead();\n    }, MARK_READ_DELAY);\n\n    return () => {\n      if (markReadTimerRef.current) {\n        clearTimeout(markReadTimerRef.current);\n        markReadTimerRef.current = null;\n      }\n    };\n  }, [markAllAsRead, items]);\n\n  if (items.length === 0) {\n    return (\n      <ListContainer>\n        <EmptyStateContainer>\n          {emptyState ?? 'No notifications'}\n        </EmptyStateContainer>\n      </ListContainer>\n    );\n  }\n\n  return (\n    <NotificationActionInterceptorContext.Provider value={onAction ?? null}>\n      <ListContainer>\n        {items.map((item, index) => (\n          <Fragment key={String(item.id)}>\n            {index > 0 && <Divider />}\n            <PersistentNotificationListItem\n              item={item}\n              onDismiss={handleDismiss}\n            />\n          </Fragment>\n        ))}\n      </ListContainer>\n    </NotificationActionInterceptorContext.Provider>\n  );\n}\n\n// ─── List Item ───────────────────────────────────────────────────────\n\ninterface PersistentNotificationListItemProps {\n  item: PersistentNotificationItem;\n  onDismiss?: (item: PersistentNotificationItem) => void;\n}\n\nfunction PersistentNotificationListItem({\n  item,\n  onDismiss,\n}: PersistentNotificationListItemProps) {\n  const suffix = (\n    <Text opacity={0.5} preset=\"c2\">\n      {formatRelativeTime(item.createdAt)}\n    </Text>\n  );\n\n  // useEvent keeps the callback stable across re-renders regardless of\n  // item reference changes (avoids unnecessary NotificationCard re-renders).\n  const handleDismiss = useEvent((_id: Key, _reason: DismissReason) => {\n    onDismiss?.(item);\n  });\n\n  const parentInterceptor = useContext(NotificationActionInterceptorContext);\n\n  // Chains with the list-level interceptor (e.g. closing the parent popover).\n  // Dismissal itself is handled by NotificationAction via the dismiss context\n  // to avoid double-firing onDismiss.\n  const handleItemAction = useEvent(() => {\n    parentInterceptor?.();\n  });\n\n  return (\n    <NotificationActionInterceptorContext.Provider value={handleItemAction}>\n      <NotificationCard\n        qa=\"PersistentNotificationItem\"\n        theme={item.theme}\n        title={item.title}\n        description={item.description}\n        icon={item.icon}\n        actions={item.actions}\n        isDismissible={!!onDismiss}\n        elevated={false}\n        notificationId={item.id}\n        suffix={suffix}\n        onDismiss={onDismiss ? handleDismiss : undefined}\n      />\n    </NotificationActionInterceptorContext.Provider>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AAoBA,MAAM,kBAAkB;;AAExB,MAAM,6BAA6B;AAInC,MAAM,gBAAgB,MAAM;CAC1B,IAAI;CACJ,MAAM;CACN,cAAc;CACd,QAAQ;EACN,SAAS;EACT,MAAM;EACP;CACF,CAAC;AAEF,MAAM,sBAAsB,MAAM,EAChC,QAAQ;CACN,SAAS;CACT,YAAY;CACZ,cAAc;CACd,SAAS;CACT,OAAO;CACP,QAAQ;CACT,EACF,CAAC;;;;;;;;;;;;;;;;;;AAqBF,SAAgB,4BAA4B,EAC1C,eACA,UACA,cACmC;CACnC,MAAM,EAAE,OAAO,QAAQ,kBAAkB,4BAA4B;CAKrE,MAAM,gBAAgB,UAAU,SAAqC;AACnE,SAAO,KAAK,GAAG;AACf,kBAAgB,KAAK;GACrB;CACF,MAAM,mBAAmB,OAA6C,KAAK;CAI3E,MAAM,GAAG,WAAW,SAAS,EAAE;AAE/B,iBAAgB;AACd,MAAI,MAAM,WAAW,EAAG;EAExB,MAAM,WAAW,kBAAkB;AACjC,YAAS,MAAM,IAAI,EAAE;KACpB,2BAA2B;AAE9B,eAAa,cAAc,SAAS;IACnC,CAAC,MAAM,OAAO,CAAC;AAKlB,iBAAgB;AAGd,MAAI,CAFc,MAAM,MAAM,MAAM,CAAC,EAAE,OAAO,CAE9B;AAEhB,mBAAiB,UAAU,iBAAiB;AAC1C,kBAAe;KACd,gBAAgB;AAEnB,eAAa;AACX,OAAI,iBAAiB,SAAS;AAC5B,iBAAa,iBAAiB,QAAQ;AACtC,qBAAiB,UAAU;;;IAG9B,CAAC,eAAe,MAAM,CAAC;AAE1B,KAAI,MAAM,WAAW,EACnB,QACE,oBAAC,2BACC,oBAAC,iCACE,cAAc,qBACK,GACR;AAIpB,QACE,oBAAC,qCAAqC;EAAS,OAAO,YAAY;YAChE,oBAAC,2BACE,MAAM,KAAK,MAAM,UAChB,qBAAC,uBACE,QAAQ,KAAK,oBAAC,YAAU,EACzB,oBAAC;GACO;GACN,WAAW;IACX,KALW,OAAO,KAAK,GAAG,CAMnB,CACX,GACY;GAC8B;;AAWpD,SAAS,+BAA+B,EACtC,MACA,aACsC;CACtC,MAAM,SACJ,oBAACA;EAAK,SAAS;EAAK,QAAO;YACxB,mBAAmB,KAAK,UAAU;GAC9B;CAKT,MAAM,gBAAgB,UAAU,KAAU,YAA2B;AACnE,cAAY,KAAK;GACjB;CAEF,MAAM,oBAAoB,WAAW,qCAAqC;CAK1E,MAAM,mBAAmB,eAAe;AACtC,uBAAqB;GACrB;AAEF,QACE,oBAAC,qCAAqC;EAAS,OAAO;YACpD,oBAAC;GACC,IAAG;GACH,OAAO,KAAK;GACZ,OAAO,KAAK;GACZ,aAAa,KAAK;GAClB,MAAM,KAAK;GACX,SAAS,KAAK;GACd,eAAe,CAAC,CAAC;GACjB,UAAU;GACV,gBAAgB,KAAK;GACb;GACR,WAAW,YAAY,gBAAgB;IACvC;GAC4C"}

package/dist/components/overlays/Notifications/format-relative-time.d.ts

@@ -0,0 +1,19 @@
+
+//#region src/components/overlays/Notifications/format-relative-time.d.ts
+/**
+ * Lightweight relative time formatter.
+ * No external dependencies.
+ *
+ * Output format:
+ * - `just now` (< 1 minute)
+ * - `N min ago` (1–59 minutes)
+ * - `N h ago` (1–23 hours)
+ * - `N d ago` (1–6 days)
+ * - `N w ago` (1–4 weeks)
+ * - `N mo ago` (1–11 months)
+ * - `N y ago` (1+ years)
+ */
+declare function formatRelativeTime(timestamp: number): string;
+//#endregion
+export { formatRelativeTime };
+//# sourceMappingURL=format-relative-time.d.ts.map

package/dist/components/overlays/Notifications/format-relative-time.js

@@ -0,0 +1,36 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+//#region src/components/overlays/Notifications/format-relative-time.ts
+/**
+* Lightweight relative time formatter.
+* No external dependencies.
+*
+* Output format:
+* - `just now` (< 1 minute)
+* - `N min ago` (1–59 minutes)
+* - `N h ago` (1–23 hours)
+* - `N d ago` (1–6 days)
+* - `N w ago` (1–4 weeks)
+* - `N mo ago` (1–11 months)
+* - `N y ago` (1+ years)
+*/
+function formatRelativeTime(timestamp) {
+	const diffMs = Date.now() - timestamp;
+	if (diffMs < 0) return "just now";
+	const diffSeconds = Math.floor(diffMs / 1e3);
+	const diffMinutes = Math.floor(diffSeconds / 60);
+	const diffHours = Math.floor(diffMinutes / 60);
+	const diffDays = Math.floor(diffHours / 24);
+	if (diffMinutes < 1) return "just now";
+	if (diffHours < 1) return `${diffMinutes} min ago`;
+	if (diffDays < 1) return `${diffHours} h ago`;
+	if (diffDays < 7) return `${diffDays} d ago`;
+	const diffWeeks = Math.floor(diffDays / 7);
+	if (diffDays < 30) return `${diffWeeks} w ago`;
+	const diffMonths = Math.floor(diffDays / 30);
+	if (diffDays < 365) return `${diffMonths} mo ago`;
+	return `${Math.floor(diffDays / 365)} y ago`;
+}
+
+//#endregion
+export { formatRelativeTime };
+//# sourceMappingURL=format-relative-time.js.map

package/dist/components/overlays/Notifications/format-relative-time.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"format-relative-time.js","names":[],"sources":["../../../../src/components/overlays/Notifications/format-relative-time.ts"],"sourcesContent":["/**\n * Lightweight relative time formatter.\n * No external dependencies.\n *\n * Output format:\n * - `just now` (< 1 minute)\n * - `N min ago` (1–59 minutes)\n * - `N h ago` (1–23 hours)\n * - `N d ago` (1–6 days)\n * - `N w ago` (1–4 weeks)\n * - `N mo ago` (1–11 months)\n * - `N y ago` (1+ years)\n */\nexport function formatRelativeTime(timestamp: number): string {\n  const now = Date.now();\n  const diffMs = now - timestamp;\n\n  if (diffMs < 0) {\n    return 'just now';\n  }\n\n  const diffSeconds = Math.floor(diffMs / 1000);\n  const diffMinutes = Math.floor(diffSeconds / 60);\n  const diffHours = Math.floor(diffMinutes / 60);\n  const diffDays = Math.floor(diffHours / 24);\n\n  if (diffMinutes < 1) {\n    return 'just now';\n  }\n\n  if (diffHours < 1) {\n    return `${diffMinutes} min ago`;\n  }\n\n  if (diffDays < 1) {\n    return `${diffHours} h ago`;\n  }\n\n  if (diffDays < 7) {\n    return `${diffDays} d ago`;\n  }\n\n  const diffWeeks = Math.floor(diffDays / 7);\n\n  if (diffDays < 30) {\n    return `${diffWeeks} w ago`;\n  }\n\n  const diffMonths = Math.floor(diffDays / 30);\n\n  if (diffDays < 365) {\n    return `${diffMonths} mo ago`;\n  }\n\n  const diffYears = Math.floor(diffDays / 365);\n\n  return `${diffYears} y ago`;\n}\n"],"mappings":";;;;;;;;;;;;;;;AAaA,SAAgB,mBAAmB,WAA2B;CAE5D,MAAM,SADM,KAAK,KAAK,GACD;AAErB,KAAI,SAAS,EACX,QAAO;CAGT,MAAM,cAAc,KAAK,MAAM,SAAS,IAAK;CAC7C,MAAM,cAAc,KAAK,MAAM,cAAc,GAAG;CAChD,MAAM,YAAY,KAAK,MAAM,cAAc,GAAG;CAC9C,MAAM,WAAW,KAAK,MAAM,YAAY,GAAG;AAE3C,KAAI,cAAc,EAChB,QAAO;AAGT,KAAI,YAAY,EACd,QAAO,GAAG,YAAY;AAGxB,KAAI,WAAW,EACb,QAAO,GAAG,UAAU;AAGtB,KAAI,WAAW,EACb,QAAO,GAAG,SAAS;CAGrB,MAAM,YAAY,KAAK,MAAM,WAAW,EAAE;AAE1C,KAAI,WAAW,GACb,QAAO,GAAG,UAAU;CAGtB,MAAM,aAAa,KAAK,MAAM,WAAW,GAAG;AAE5C,KAAI,WAAW,IACb,QAAO,GAAG,WAAW;AAKvB,QAAO,GAFW,KAAK,MAAM,WAAW,IAAI,CAExB"}

package/dist/components/overlays/Notifications/index.d.ts

@@ -0,0 +1,43 @@
+
+import { DismissReason, NotificationActionProps, NotificationBaseOptions, NotificationHandle, NotificationOptions, NotificationProps, NotificationType, NotificationsApi, OverlayNotificationOptions, OverlayProviderProps, PersistentNotificationItem, PersistentNotificationsListProps, StoredNotificationOptions } from "./types.js";
+import { useToastContext } from "./NotificationContext.js";
+import { Notification as Notification$1 } from "./Notification.js";
+import { NotificationAction } from "./NotificationAction.js";
+import { NotificationCard, NotificationCardProps } from "./NotificationCard.js";
+import { NotificationItem, NotificationItemProps } from "./NotificationItem.js";
+import { PersistentNotificationsList } from "./PersistentNotificationsList.js";
+import { OverlayProvider } from "./OverlayProvider.js";
+import { useNotifications } from "./use-notifications.js";
+import { useNotificationsCount, usePersistentNotifications } from "./use-persistent-notifications.js";
+import { formatRelativeTime } from "./format-relative-time.js";
+
+//#region src/components/overlays/Notifications/index.d.ts
+/**
+ * Declarative Notification component with compound API.
+ *
+ * @example
+ * ```tsx
+ * // Declarative usage
+ * <Notification
+ *   id="release:new-version"
+ *   theme="warning"
+ *   title="New release available"
+ *   description="2.0.0 can be installed now."
+ *   actions={
+ *     <>
+ *       <Notification.Action>Later</Notification.Action>
+ *       <Notification.Action onPress={() => openUpgradeDialog()}>
+ *         Upgrade
+ *       </Notification.Action>
+ *     </>
+ *   }
+ * />
+ * ```
+ */
+declare const Notification: typeof Notification$1 & {
+  Action: typeof NotificationAction;
+};
+type NotificationComponent = typeof Notification;
+//#endregion
+export { Notification, NotificationComponent };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/overlays/Notifications/index.js

@@ -0,0 +1,40 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { useToastContext } from "./NotificationContext.js";
+import { NotificationAction } from "./NotificationAction.js";
+import { NotificationCard } from "./NotificationCard.js";
+import { NotificationItem } from "./NotificationItem.js";
+import { OverlayProvider } from "./OverlayProvider.js";
+import { Notification as Notification$1 } from "./Notification.js";
+import { formatRelativeTime } from "./format-relative-time.js";
+import { useNotificationsCount, usePersistentNotifications } from "./use-persistent-notifications.js";
+import { PersistentNotificationsList } from "./PersistentNotificationsList.js";
+import { useNotifications } from "./use-notifications.js";
+
+//#region src/components/overlays/Notifications/index.ts
+/**
+* Declarative Notification component with compound API.
+*
+* @example
+* ```tsx
+* // Declarative usage
+* <Notification
+*   id="release:new-version"
+*   theme="warning"
+*   title="New release available"
+*   description="2.0.0 can be installed now."
+*   actions={
+*     <>
+*       <Notification.Action>Later</Notification.Action>
+*       <Notification.Action onPress={() => openUpgradeDialog()}>
+*         Upgrade
+*       </Notification.Action>
+*     </>
+*   }
+* />
+* ```
+*/
+const Notification = Object.assign(Notification$1, { Action: NotificationAction });
+
+//#endregion
+export { Notification };
+//# sourceMappingURL=index.js.map

package/dist/components/overlays/Notifications/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["NotificationBase"],"sources":["../../../../src/components/overlays/Notifications/index.ts"],"sourcesContent":["// ─── Components ──────────────────────────────────────────────────────\n\nimport { Notification as NotificationBase } from './Notification';\nimport { NotificationAction } from './NotificationAction';\n\nexport { NotificationAction } from './NotificationAction';\nexport { NotificationCard } from './NotificationCard';\nexport type { NotificationCardProps } from './NotificationCard';\nexport { NotificationItem } from './NotificationItem';\nexport type { NotificationItemProps } from './NotificationItem';\nexport { PersistentNotificationsList } from './PersistentNotificationsList';\n\n// ─── Provider ────────────────────────────────────────────────────────\n\nexport { OverlayProvider } from './OverlayProvider';\n\n// useToastContext is re-exported for Toast module backward compatibility\nexport { useToastContext } from './NotificationContext';\n\n// ─── Hooks ───────────────────────────────────────────────────────────\n\nexport { useNotifications } from './use-notifications';\nexport {\n  usePersistentNotifications,\n  useNotificationsCount,\n} from './use-persistent-notifications';\n\n// ─── Utilities ───────────────────────────────────────────────────────\n\nexport { formatRelativeTime } from './format-relative-time';\n\n// ─── Types ───────────────────────────────────────────────────────────\n\nexport type {\n  NotificationType,\n  DismissReason,\n  NotificationBaseOptions,\n  OverlayNotificationOptions,\n  StoredNotificationOptions,\n  NotificationOptions,\n  NotificationActionProps,\n  NotificationHandle,\n  NotificationsApi,\n  PersistentNotificationItem,\n  PersistentNotificationsListProps,\n  OverlayProviderProps,\n  NotificationProps,\n} from './types';\n\n// ─── Compound Notification Component ─────────────────────────────────\n\n/**\n * Declarative Notification component with compound API.\n *\n * @example\n * ```tsx\n * // Declarative usage\n * <Notification\n *   id=\"release:new-version\"\n *   theme=\"warning\"\n *   title=\"New release available\"\n *   description=\"2.0.0 can be installed now.\"\n *   actions={\n *     <>\n *       <Notification.Action>Later</Notification.Action>\n *       <Notification.Action onPress={() => openUpgradeDialog()}>\n *         Upgrade\n *       </Notification.Action>\n *     </>\n *   }\n * />\n * ```\n */\nexport const Notification = Object.assign(NotificationBase, {\n  Action: NotificationAction,\n});\n\nexport type NotificationComponent = typeof Notification;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyEA,MAAa,eAAe,OAAO,OAAOA,gBAAkB,EAC1D,QAAQ,oBACT,CAAC"}

package/dist/components/overlays/Notifications/types.d.ts

@@ -0,0 +1,135 @@
+
+import { Key, ReactNode } from "react";
+
+//#region src/components/overlays/Notifications/types.d.ts
+type NotificationType = 'default' | 'success' | 'danger' | 'warning' | 'note';
+interface NotificationBaseOptions {
+  id?: Key;
+  theme?: NotificationType;
+  title?: ReactNode;
+  description?: ReactNode;
+  icon?: ReactNode;
+}
+interface OverlayNotificationOptions extends NotificationBaseOptions {
+  mode?: 'overlay';
+  /**
+   * Action buttons rendered below the notification description.
+   * A default "Dismiss" button is auto-appended unless any action has
+   * `isDismiss` set (detected automatically via context).
+   * When omitted, only the default "Dismiss" button is shown (if `isDismissible`).
+   */
+  actions?: ReactNode;
+  /**
+   * Whether the notification shows the default dismiss UI:
+   * - Auto-appended "Dismiss" button (suppressed when false)
+   * - Escape key dismissal (disabled when false)
+   *
+   * Actions with `closeOnPress` (default `true`) can still close the
+   * notification regardless of this setting.
+   *
+   * Default: true
+   */
+  isDismissible?: boolean;
+  /**
+   * Duration in ms before auto-dismiss.
+   * Default: 3000ms (non-persistent) or 5000ms (persistent).
+   * null = no auto-dismiss.
+   */
+  duration?: number | null;
+  /**
+   * Whether to retain in persistent list when dismissed.
+   * All user-visible dismissals (timeout, action, close) move the notification
+   * to the persistent list. Only programmatic cleanup (`'api'`, e.g. component
+   * unmount) skips persistence.
+   *
+   * Once archived, subsequent calls with the same `id` skip the overlay and
+   * update the persistent list directly.
+   *
+   * Default: false
+   */
+  persistent?: boolean;
+}
+interface StoredNotificationOptions extends NotificationBaseOptions {
+  mode: 'stored';
+  /** Action buttons (same ReactNode format as overlay notifications) */
+  actions?: ReactNode;
+  /**
+   * Timestamp (epoch ms) for when the notification was originally created.
+   * Use this when restoring server-sourced notifications to preserve the original time.
+   * Defaults to `Date.now()` if omitted.
+   */
+  createdAt?: number;
+}
+type NotificationOptions = OverlayNotificationOptions | StoredNotificationOptions;
+type DismissReason = 'close' | 'timeout' | 'action' | 'api';
+interface NotificationActionProps {
+  /** Action label */
+  children?: ReactNode;
+  /**
+   * Called when the action is pressed.
+   * Return `false` to prevent the auto-dismiss that would normally follow.
+   * Useful for async flows where the user may cancel (e.g. confirmation dialogs).
+   */
+  onPress?: () => void | false | Promise<void | false>;
+  /** Whether to auto-dismiss the notification after onPress. Default: true */
+  closeOnPress?: boolean;
+  /** Whether the action is disabled */
+  isDisabled?: boolean;
+  /**
+   * Marks this action as the notification's dismiss button.
+   * Detected automatically via context — when any action in the notification
+   * has `isDismiss` set, the auto-appended default "Dismiss" button is suppressed.
+   */
+  isDismiss?: boolean;
+}
+interface NotificationHandle {
+  id: Key;
+  dismiss: () => void;
+}
+interface NotificationsApi {
+  notify: (options: NotificationOptions) => NotificationHandle;
+  /**
+   * Shorthand for `notify({ mode: 'stored', ... })`.
+   * Stores a notification directly to the persistent list without showing an overlay.
+   * Kept as a separate method to make the "stored-only" intent explicit at call sites.
+   */
+  record: (options: Omit<StoredNotificationOptions, 'mode'>) => NotificationHandle;
+  dismiss: (id: Key) => void;
+}
+interface InternalNotification extends OverlayNotificationOptions {
+  internalId: string;
+  createdAt: number;
+  updatedAt: number;
+  isExiting?: boolean;
+  ownerId?: string;
+}
+interface PersistentNotificationItem {
+  id: Key;
+  theme?: NotificationType;
+  title?: ReactNode;
+  description?: ReactNode;
+  icon?: ReactNode;
+  /** Action buttons (ReactNode) */
+  actions?: ReactNode;
+  createdAt: number;
+  updatedAt: number;
+  /** Whether the notification has been seen in the persistent list */
+  isRead?: boolean;
+  /** Owner ID for cleanup on hook/component unmount */
+  ownerId?: string;
+}
+interface PersistentNotificationsListProps {
+  onDismissItem?: (item: PersistentNotificationItem) => void;
+  /** Called before any action's onPress handler fires. Useful for closing a parent popover. */
+  onAction?: () => void;
+  emptyState?: ReactNode;
+}
+interface OverlayProviderProps {
+  children: ReactNode;
+  /** Maximum number of persistent notifications to keep. Default: 200 */
+  maxPersistentNotifications?: number;
+}
+interface NotificationProps extends OverlayNotificationOptions {}
+//#endregion
+export { DismissReason, InternalNotification, NotificationActionProps, NotificationBaseOptions, NotificationHandle, NotificationOptions, NotificationProps, NotificationType, NotificationsApi, OverlayNotificationOptions, OverlayProviderProps, PersistentNotificationItem, PersistentNotificationsListProps, StoredNotificationOptions };
+//# sourceMappingURL=types.d.ts.map