@caratlogic/design-system 0.1.11 → 0.1.12

package/dist/components/layouts/AppShell/AppShell.types.d.ts

@@ -52,7 +52,12 @@ export interface AppShellMenuAction {
     onClick: () => void;
     destructive?: boolean;
 }
-export type AppShellNotificationsIndicator = 'destructive' | 'success' | 'warning' | false;
+export interface AppShellNotificationsBadge {
+    tone?: 'destructive' | 'success' | 'warning';
+    /** Renders a numeric badge on the bell instead of a plain dot. */
+    count?: ReactNode;
+}
+export type AppShellNotificationsIndicator = 'destructive' | 'success' | 'warning' | false | AppShellNotificationsBadge;
 export interface DashboardShellProps {
     brand: AppShellBrand;
     /** Pre-gated, pre-grouped navigation. The app resolves `visible` + sections. */
@@ -74,6 +79,14 @@ export interface DashboardShellProps {
     showNotifications?: boolean;
     notificationsIndicator?: AppShellNotificationsIndicator;
     onNotificationsClick?: () => void;
+    /**
+     * Rendered in a popover anchored to the bell. When provided, the bell becomes
+     * the popover trigger; without it the bell keeps its plain click behaviour.
+     */
+    notificationsPanel?: ReactNode;
+    /** Controlled open state for `notificationsPanel`. */
+    notificationsOpen?: boolean;
+    onNotificationsOpenChange?: (open: boolean) => void;
     /** App-specific header actions (e.g. a barcode scanner), rendered leftmost. */
     headerActionsSlot?: ReactNode;
     /** Sidebar width CSS value. @default '248px' */

package/dist/components/layouts/AppShell/AppShell.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppShell.types.d.ts","sourceRoot":"","sources":["../../../../src/components/layouts/AppShell/AppShell.types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"AppShell.types.d.ts","sourceRoot":"","sources":["../../../../src/components/layouts/AppShell/AppShell.types.ts"],"names":[],"mappings":"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"}

package/dist/components/layouts/AppShell/DashboardShell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DashboardShell.d.ts","sourceRoot":"","sources":["../../../../src/components/layouts/AppShell/DashboardShell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,EAAE,EAAE,MAAM,OAAO,CAAC;AAwC/C,OAAO,KAAK,EAMV,mBAAmB,EAEpB,MAAM,kBAAkB,CAAC;AA8X1B,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAkDlD,CAAC"}
+{"version":3,"file":"DashboardShell.d.ts","sourceRoot":"","sources":["../../../../src/components/layouts/AppShell/DashboardShell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,EAAE,EAAE,MAAM,OAAO,CAAC;AAqD/C,OAAO,KAAK,EAMV,mBAAmB,EAEpB,MAAM,kBAAkB,CAAC;AA+Z1B,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CA4DlD,CAAC"}

package/dist/components/molecules/InAppNotificationCard/InAppNotificationCard.accessibility.d.ts

@@ -0,0 +1,4 @@
+export declare const inAppNotificationCardA11y: {
+    readonly unreadLabel: "Unread";
+};
+//# sourceMappingURL=InAppNotificationCard.accessibility.d.ts.map

package/dist/components/molecules/InAppNotificationCard/InAppNotificationCard.accessibility.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InAppNotificationCard.accessibility.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/InAppNotificationCard/InAppNotificationCard.accessibility.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,yBAAyB;;CAE5B,CAAC"}

package/dist/components/molecules/InAppNotificationCard/InAppNotificationCard.d.ts

@@ -0,0 +1,8 @@
+import type { FC } from 'react';
+import type { InAppNotificationCardProps } from './InAppNotificationCard.types';
+/**
+ * One row in a notification list. Unread state is signalled by a dot, a tinted
+ * surface and a heavier title, so it never relies on colour alone.
+ */
+export declare const InAppNotificationCard: FC<InAppNotificationCardProps>;
+//# sourceMappingURL=InAppNotificationCard.d.ts.map

package/dist/components/molecules/InAppNotificationCard/InAppNotificationCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InAppNotificationCard.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/InAppNotificationCard/InAppNotificationCard.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAkBhC,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,+BAA+B,CAAC;AAEhF;;;GAGG;AACH,eAAO,MAAM,qBAAqB,EAAE,EAAE,CAAC,0BAA0B,CAsDhE,CAAC"}

package/dist/components/molecules/InAppNotificationCard/InAppNotificationCard.types.d.ts

@@ -0,0 +1,22 @@
+import type { ReactNode } from 'react';
+/** A single entry in a notification list. Transport-agnostic by design. */
+export interface InAppNotificationItem {
+    id: string;
+    title: string;
+    message: string;
+    /** ISO timestamp or Date — rendered as a relative label. */
+    createdAt: string | Date;
+    isRead: boolean;
+    /** Optional secondary line, e.g. a company or contact name. */
+    subject?: string;
+    /** Overrides the default leading icon for this entry. */
+    icon?: ReactNode;
+}
+export interface InAppNotificationCardProps {
+    notification: InAppNotificationItem;
+    onSelect: (notification: InAppNotificationItem) => void;
+    /** Leading icon used when the item does not supply its own. */
+    defaultIcon?: ReactNode;
+    className?: string;
+}
+//# sourceMappingURL=InAppNotificationCard.types.d.ts.map

package/dist/components/molecules/InAppNotificationCard/InAppNotificationCard.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InAppNotificationCard.types.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/InAppNotificationCard/InAppNotificationCard.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,2EAA2E;AAC3E,MAAM,WAAW,qBAAqB;IACpC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,4DAA4D;IAC5D,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,MAAM,EAAE,OAAO,CAAC;IAChB,+DAA+D;IAC/D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,yDAAyD;IACzD,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,MAAM,WAAW,0BAA0B;IACzC,YAAY,EAAE,qBAAqB,CAAC;IACpC,QAAQ,EAAE,CAAC,YAAY,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACxD,+DAA+D;IAC/D,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

package/dist/components/molecules/InAppNotificationCard/InAppNotificationCard.utils.d.ts

@@ -0,0 +1,4 @@
+/** Read entries sit flat on the surface; unread ones get a primary wash. */
+export declare function getInAppNotificationCardClasses(isRead: boolean, className?: string): string;
+export declare function getInAppNotificationIconClasses(isRead: boolean): string;
+//# sourceMappingURL=InAppNotificationCard.utils.d.ts.map

package/dist/components/molecules/InAppNotificationCard/InAppNotificationCard.utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InAppNotificationCard.utils.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/InAppNotificationCard/InAppNotificationCard.utils.ts"],"names":[],"mappings":"AAEA,4EAA4E;AAC5E,wBAAgB,+BAA+B,CAC7C,MAAM,EAAE,OAAO,EACf,SAAS,CAAC,EAAE,MAAM,GACjB,MAAM,CASR;AAED,wBAAgB,+BAA+B,CAAC,MAAM,EAAE,OAAO,GAAG,MAAM,CAKvE"}

package/dist/components/molecules/InAppNotificationCard/index.d.ts

@@ -0,0 +1,4 @@
+export { InAppNotificationCard } from './InAppNotificationCard';
+export type { InAppNotificationCardProps, InAppNotificationItem, } from './InAppNotificationCard.types';
+export { inAppNotificationCardA11y } from './InAppNotificationCard.accessibility';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/molecules/InAppNotificationCard/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/InAppNotificationCard/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,YAAY,EACV,0BAA0B,EAC1B,qBAAqB,GACtB,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,yBAAyB,EAAE,MAAM,uCAAuC,CAAC"}

package/dist/components/organisms/InAppNotificationsPanel/InAppNotificationsPanel.accessibility.d.ts

@@ -0,0 +1,9 @@
+export declare const inAppNotificationsPanelA11y: {
+    readonly panelLabel: "Notifications";
+    readonly listLabel: "Notification list";
+    readonly markAllReadLabel: "Mark all notifications as read";
+    readonly retryLabel: "Retry loading notifications";
+};
+/** Non-modal dropdown, so `dialog` rather than `alertdialog`. */
+export declare const IN_APP_NOTIFICATIONS_PANEL_ROLE: "dialog";
+//# sourceMappingURL=InAppNotificationsPanel.accessibility.d.ts.map

package/dist/components/organisms/InAppNotificationsPanel/InAppNotificationsPanel.accessibility.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InAppNotificationsPanel.accessibility.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/InAppNotificationsPanel/InAppNotificationsPanel.accessibility.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,2BAA2B;;;;;CAK9B,CAAC;AAEX,iEAAiE;AACjE,eAAO,MAAM,+BAA+B,EAAG,QAAiB,CAAC"}

package/dist/components/organisms/InAppNotificationsPanel/InAppNotificationsPanel.d.ts

@@ -0,0 +1,9 @@
+import type { FC } from 'react';
+import type { InAppNotificationsPanelProps } from './InAppNotificationsPanel.types';
+/**
+ * Notification list with header actions and loading / error / empty states.
+ * Positioning is the caller's concern — render it inside a popover anchored to
+ * whatever opens it (see `DashboardShell`'s `notificationsPanel` slot).
+ */
+export declare const InAppNotificationsPanel: FC<InAppNotificationsPanelProps>;
+//# sourceMappingURL=InAppNotificationsPanel.d.ts.map

package/dist/components/organisms/InAppNotificationsPanel/InAppNotificationsPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InAppNotificationsPanel.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/InAppNotificationsPanel/InAppNotificationsPanel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAuBhC,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,iCAAiC,CAAC;AAEpF;;;;GAIG;AACH,eAAO,MAAM,uBAAuB,EAAE,EAAE,CAAC,4BAA4B,CAgJpE,CAAC"}

package/dist/components/organisms/InAppNotificationsPanel/InAppNotificationsPanel.hooks.d.ts

@@ -0,0 +1,12 @@
+import type { RefObject } from 'react';
+import type { InAppNotificationItem } from '@/components/molecules/InAppNotificationCard';
+import type { InAppNotificationsPanelState } from './InAppNotificationsPanel.types';
+/** Derived display state for the panel header and body. */
+export declare function useInAppNotificationsPanel(notifications: InAppNotificationItem[], unreadCount?: number): InAppNotificationsPanelState;
+/**
+ * Fires `onLoadMore` when the sentinel scrolls into view inside `rootRef`.
+ * No-ops where IntersectionObserver is unavailable (jsdom, older browsers), so
+ * the list simply stops auto-loading rather than breaking.
+ */
+export declare function useInfiniteScrollSentinel(rootRef: RefObject<HTMLElement | null>, onLoadMore: (() => void) | undefined, enabled: boolean): RefObject<HTMLDivElement | null>;
+//# sourceMappingURL=InAppNotificationsPanel.hooks.d.ts.map

package/dist/components/organisms/InAppNotificationsPanel/InAppNotificationsPanel.hooks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InAppNotificationsPanel.hooks.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/InAppNotificationsPanel/InAppNotificationsPanel.hooks.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,8CAA8C,CAAC;AAC1F,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,iCAAiC,CAAC;AAEpF,2DAA2D;AAC3D,wBAAgB,0BAA0B,CACxC,aAAa,EAAE,qBAAqB,EAAE,EACtC,WAAW,CAAC,EAAE,MAAM,GACnB,4BAA4B,CAS9B;AAED;;;;GAIG;AACH,wBAAgB,yBAAyB,CACvC,OAAO,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EACtC,UAAU,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,EACpC,OAAO,EAAE,OAAO,GACf,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAqBlC"}

package/dist/components/organisms/InAppNotificationsPanel/InAppNotificationsPanel.types.d.ts

@@ -0,0 +1,41 @@
+import type { ReactNode } from 'react';
+import type { InAppNotificationItem } from '@/components/molecules/InAppNotificationCard';
+export interface InAppNotificationsPanelProps {
+    /** Rendered in the order given — the caller owns sorting. */
+    notifications: InAppNotificationItem[];
+    onSelect: (notification: InAppNotificationItem) => void;
+    /** Total unread, which may exceed the fetched page. Defaults to counting `notifications`. */
+    unreadCount?: number;
+    /** Total notifications in the inbox — shown as the header count. */
+    totalCount?: number;
+    isLoading?: boolean;
+    /** More pages available — reveals the infinite-scroll sentinel. */
+    hasNextPage?: boolean;
+    /** True while the next page is in flight; shows an inline loader. */
+    isFetchingNextPage?: boolean;
+    /** Called once when the sentinel scrolls into view. */
+    onLoadMore?: () => void;
+    isError?: boolean;
+    onRetry?: () => void;
+    onMarkAllRead?: () => void;
+    isMarkingAllRead?: boolean;
+    title?: string;
+    /** Empty-state heading. @default 'No notifications yet' */
+    emptyTitle?: string;
+    /** Optional second line explaining what will appear here. */
+    emptyDescription?: string;
+    /** Replaces the default bell glyph in the empty state. */
+    emptyIcon?: ReactNode;
+    /** Full escape hatch — replaces the whole empty state. */
+    emptyState?: ReactNode;
+    errorMessage?: string;
+    /** Leading icon for entries that do not supply their own. */
+    defaultIcon?: ReactNode;
+    className?: string;
+}
+export interface InAppNotificationsPanelState {
+    unreadCount: number;
+    hasUnread: boolean;
+    isEmpty: boolean;
+}
+//# sourceMappingURL=InAppNotificationsPanel.types.d.ts.map

package/dist/components/organisms/InAppNotificationsPanel/InAppNotificationsPanel.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InAppNotificationsPanel.types.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/InAppNotificationsPanel/InAppNotificationsPanel.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,8CAA8C,CAAC;AAE1F,MAAM,WAAW,4BAA4B;IAC3C,6DAA6D;IAC7D,aAAa,EAAE,qBAAqB,EAAE,CAAC;IACvC,QAAQ,EAAE,CAAC,YAAY,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACxD,6FAA6F;IAC7F,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oEAAoE;IACpE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mEAAmE;IACnE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,qEAAqE;IACrE,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,uDAAuD;IACvD,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2DAA2D;IAC3D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,6DAA6D;IAC7D,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,0DAA0D;IAC1D,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,0DAA0D;IAC1D,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,6DAA6D;IAC7D,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,4BAA4B;IAC3C,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;CAClB"}

package/dist/components/organisms/InAppNotificationsPanel/InAppNotificationsPanel.utils.d.ts

@@ -0,0 +1,4 @@
+import type { InAppNotificationItem } from '@/components/molecules/InAppNotificationCard';
+/** Falls back to counting the current page when the caller has no total. */
+export declare function resolveUnreadCount(notifications: InAppNotificationItem[], unreadCount?: number): number;
+//# sourceMappingURL=InAppNotificationsPanel.utils.d.ts.map

package/dist/components/organisms/InAppNotificationsPanel/InAppNotificationsPanel.utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InAppNotificationsPanel.utils.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/InAppNotificationsPanel/InAppNotificationsPanel.utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,8CAA8C,CAAC;AAE1F,4EAA4E;AAC5E,wBAAgB,kBAAkB,CAChC,aAAa,EAAE,qBAAqB,EAAE,EACtC,WAAW,CAAC,EAAE,MAAM,GACnB,MAAM,CAGR"}

package/dist/components/organisms/InAppNotificationsPanel/index.d.ts

@@ -0,0 +1,5 @@
+export { InAppNotificationsPanel } from './InAppNotificationsPanel';
+export { useInAppNotificationsPanel } from './InAppNotificationsPanel.hooks';
+export type { InAppNotificationsPanelProps, InAppNotificationsPanelState, } from './InAppNotificationsPanel.types';
+export { inAppNotificationsPanelA11y } from './InAppNotificationsPanel.accessibility';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/organisms/InAppNotificationsPanel/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/InAppNotificationsPanel/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,EAAE,0BAA0B,EAAE,MAAM,iCAAiC,CAAC;AAC7E,YAAY,EACV,4BAA4B,EAC5B,4BAA4B,GAC7B,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,2BAA2B,EAAE,MAAM,yCAAyC,CAAC"}

package/dist/components/organisms/Navbar/Navbar.d.ts

@@ -3,7 +3,7 @@ import type { NavbarActionsProps, NavbarAvatarProps, NavbarIconButtonProps, Navb
 export declare const Navbar: import("react").ForwardRefExoticComponent<NavbarProps & import("react").RefAttributes<HTMLElement>>;
 export declare const NavbarTitle: FC<NavbarTitleProps>;
 export declare const NavbarActions: FC<NavbarActionsProps>;
-export declare const NavbarIconButton: FC<NavbarIconButtonProps>;
+export declare const NavbarIconButton: import("react").ForwardRefExoticComponent<NavbarIconButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
 export declare const NavbarSearch: FC<NavbarSearchProps>;
 export declare const NavbarAvatar: FC<NavbarAvatarProps>;
 //# sourceMappingURL=Navbar.d.ts.map

package/dist/components/organisms/Navbar/Navbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Navbar.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/Navbar/Navbar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAa,MAAM,OAAO,CAAC;AAqB3C,OAAO,KAAK,EACV,kBAAkB,EAClB,iBAAiB,EAEjB,qBAAqB,EAGrB,WAAW,EACX,iBAAiB,EACjB,gBAAgB,EACjB,MAAM,gBAAgB,CAAC;AAwCxB,eAAO,MAAM,MAAM,qGAiBlB,CAAC;AAKF,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CAmE5C,CAAC;AAIF,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAShD,CAAC;AAIF,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CAqCtD,CAAC;AAIF,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CA+C9C,CAAC;AAIF,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CA4B9C,CAAC"}
+{"version":3,"file":"Navbar.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/Navbar/Navbar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAa,MAAM,OAAO,CAAC;AAqB3C,OAAO,KAAK,EACV,kBAAkB,EAClB,iBAAiB,EAEjB,qBAAqB,EAGrB,WAAW,EACX,iBAAiB,EACjB,gBAAgB,EACjB,MAAM,gBAAgB,CAAC;AAwCxB,eAAO,MAAM,MAAM,qGAiBlB,CAAC;AAKF,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CAmE5C,CAAC;AAIF,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAShD,CAAC;AAIF,eAAO,MAAM,gBAAgB,qHAmD5B,CAAC;AAMF,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CA+C9C,CAAC;AAIF,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CA4B9C,CAAC"}

package/dist/index.cjs.js

@@ -2698,12 +2698,12 @@ const createLucideIcon = (iconName, iconNode) => {
  */
 
 
-const __iconNode$17 = [
+const __iconNode$18 = [
   ["rect", { width: "20", height: "5", x: "2", y: "3", rx: "1", key: "1wp1u1" }],
   ["path", { d: "M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8", key: "1s80jp" }],
   ["path", { d: "M10 12h4", key: "a56b0p" }]
 ];
-const Archive = createLucideIcon("archive", __iconNode$17);
+const Archive = createLucideIcon("archive", __iconNode$18);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -2713,11 +2713,11 @@ const Archive = createLucideIcon("archive", __iconNode$17);
  */
 
 
-const __iconNode$16 = [
+const __iconNode$17 = [
   ["path", { d: "m12 19-7-7 7-7", key: "1l729n" }],
   ["path", { d: "M19 12H5", key: "x3x0zl" }]
 ];
-const ArrowLeft = createLucideIcon("arrow-left", __iconNode$16);
+const ArrowLeft = createLucideIcon("arrow-left", __iconNode$17);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -2727,11 +2727,11 @@ const ArrowLeft = createLucideIcon("arrow-left", __iconNode$16);
  */
 
 
-const __iconNode$15 = [
+const __iconNode$16 = [
   ["path", { d: "M5 12h14", key: "1ays0h" }],
   ["path", { d: "m12 5 7 7-7 7", key: "xquz4c" }]
 ];
-const ArrowRight = createLucideIcon("arrow-right", __iconNode$15);
+const ArrowRight = createLucideIcon("arrow-right", __iconNode$16);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -2741,11 +2741,32 @@ const ArrowRight = createLucideIcon("arrow-right", __iconNode$15);
  */
 
 
-const __iconNode$14 = [
+const __iconNode$15 = [
   ["path", { d: "M4.929 4.929 19.07 19.071", key: "196cmz" }],
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }]
 ];
-const Ban = createLucideIcon("ban", __iconNode$14);
+const Ban = createLucideIcon("ban", __iconNode$15);
+
+/**
+ * @license lucide-react v0.539.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode$14 = [
+  ["path", { d: "M10.268 21a2 2 0 0 0 3.464 0", key: "vwvbt9" }],
+  [
+    "path",
+    {
+      d: "M13.916 2.314A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.74 7.327A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673 9 9 0 0 1-.585-.665",
+      key: "1tip0g"
+    }
+  ],
+  ["circle", { cx: "18", cy: "8", r: "3", key: "1g0gzu" }]
+];
+const BellDot = createLucideIcon("bell-dot", __iconNode$14);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -28257,6 +28278,53 @@ const FilterSelect = ({ label, value, onValueChange, options, resetValue = 'all'
     return (jsxRuntime.jsxs(Select, { value: value, onValueChange: onValueChange, keepOpenOnSelect: true, children: [jsxRuntime.jsxs(SelectTrigger, { className: cn(TRIGGER_BASE, active && TRIGGER_ACTIVE, triggerClassName), children: [jsxRuntime.jsx(Funnel, { className: cn('h-4 w-4 shrink-0', active ? 'text-primary' : 'text-muted-foreground'), "aria-hidden": "true" }), jsxRuntime.jsxs("span", { className: "flex items-center gap-1", children: [jsxRuntime.jsx(SelectValue, { placeholder: label }), active && (jsxRuntime.jsx("span", { className: "ml-1 inline-flex h-4 min-w-4 items-center justify-center rounded bg-primary/10 px-1 text-[10px] font-semibold leading-none text-primary", children: activeCount }))] })] }), jsxRuntime.jsxs(SelectContent, { className: cn(CONTENT_BASE, contentClassName), searchable: searchable, children: [jsxRuntime.jsx(SelectItem, { value: resetValue, withCheckbox: true, children: label }), options.map((opt) => (jsxRuntime.jsx(SelectItem, { value: opt.value, searchValue: opt.searchValue, withCheckbox: true, children: opt.label }, opt.value)))] })] }));
 };
 
+/**
+ * Compact "time ago" label, e.g. "5m ago". Falls back to a locale date past a
+ * week so older entries stay scannable.
+ */
+function formatRelativeTime(value) {
+    if (!value)
+        return '';
+    const then = value instanceof Date ? value.getTime() : new Date(value).getTime();
+    if (Number.isNaN(then))
+        return '';
+    const minutes = Math.floor((Date.now() - then) / 60000);
+    if (minutes < 1)
+        return 'Just now';
+    if (minutes < 60)
+        return `${minutes}m ago`;
+    const hours = Math.floor(minutes / 60);
+    if (hours < 24)
+        return `${hours}h ago`;
+    const days = Math.floor(hours / 24);
+    if (days < 7)
+        return `${days}d ago`;
+    return new Date(then).toLocaleDateString();
+}
+
+/** Read entries sit flat on the surface; unread ones get a primary wash. */
+function getInAppNotificationCardClasses(isRead, className) {
+    return cn('flex h-[5.125rem] w-full cursor-pointer gap-2.5 rounded-lg border px-3 py-3 text-left transition-colors', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50', isRead
+        ? 'border-border bg-card hover:bg-muted/40'
+        : 'border-primary/20 bg-primary/5 hover:bg-primary/10', className);
+}
+function getInAppNotificationIconClasses(isRead) {
+    return cn('mt-0.5 flex size-7 shrink-0 items-center justify-center rounded-full', isRead ? 'bg-muted text-muted-foreground' : 'bg-primary/10 text-primary');
+}
+
+const inAppNotificationCardA11y = {
+    unreadLabel: 'Unread',
+};
+
+/**
+ * One row in a notification list. Unread state is signalled by a dot, a tinted
+ * surface and a heavier title, so it never relies on colour alone.
+ */
+const InAppNotificationCard = ({ notification, onSelect, defaultIcon, className, }) => {
+    const { title, message, createdAt, isRead, subject, icon } = notification;
+    return (jsxRuntime.jsxs("button", { type: "button", onClick: () => onSelect(notification), className: getInAppNotificationCardClasses(isRead, className), children: [jsxRuntime.jsx("span", { className: getInAppNotificationIconClasses(isRead), children: icon ?? defaultIcon ?? (jsxRuntime.jsx(BellDot, { className: "size-4", "aria-hidden": "true" })) }), jsxRuntime.jsxs("span", { className: "min-w-0 flex-1", children: [jsxRuntime.jsxs("span", { className: "flex items-baseline gap-2", children: [!isRead && (jsxRuntime.jsx("span", { role: "img", "aria-label": inAppNotificationCardA11y.unreadLabel, className: "size-1.5 shrink-0 rounded-full bg-primary" })), jsxRuntime.jsx("span", { className: cn('min-w-0 flex-1 truncate text-sm text-foreground', isRead ? 'font-medium' : 'font-semibold'), children: title }), jsxRuntime.jsx("time", { className: "shrink-0 text-[0.6875rem] text-muted-foreground tabular-nums", children: formatRelativeTime(createdAt) })] }), jsxRuntime.jsx("span", { className: "mt-1 line-clamp-1 text-xs text-secondary-foreground", children: message }), subject && (jsxRuntime.jsx("span", { className: "mt-0.5 block truncate text-[0.6875rem] font-medium text-muted-foreground", children: subject }))] })] }));
+};
+
 const HEADER_TONE_CLASSES = {
     neutral: 'bg-[var(--section-header)]',
     gem: 'bg-primary/5 dark:bg-[#173626]',
@@ -65655,6 +65723,71 @@ const FileUploader = ({ accept, multiple = true, maxSize = 50, maxFiles = 5, lab
     return (jsxRuntime.jsxs("div", { className: cn('flex flex-col gap-4', className), children: [label && (jsxRuntime.jsx("label", { className: "text-sm font-medium text-foreground", children: label })), jsxRuntime.jsx(DropZone, { uploadSubject: uploadSubject, supportedFormats: supportedFormats, maxSize: maxSize, maxFiles: maxFiles, accept: accept, multiple: multiple, disabled: disabled, onFiles: handlePickerFiles }), files.length > 0 && (jsxRuntime.jsxs("div", { className: "space-y-2", children: [jsxRuntime.jsx("p", { className: "text-[13px] text-label", children: "Uploaded File" }), jsxRuntime.jsx(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragEnd: onDragEnd, children: jsxRuntime.jsx(SortableContext, { items: files.map((f) => f.id), strategy: rectSortingStrategy, children: jsxRuntime.jsx("div", { className: "flex flex-wrap gap-3", children: files.map((file) => (jsxRuntime.jsx(FileCard, { file: file, sortable: sortable, disabled: disabled, onRemove: handleRemove, onPreview: previewFile }, file.id))) }) }) })] })), enableUrlInput && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-3 text-sm font-normal text-label", children: [jsxRuntime.jsx("span", { className: "h-px flex-1 bg-border" }), jsxRuntime.jsx("span", { children: "or" }), jsxRuntime.jsx("span", { className: "h-px flex-1 bg-border" })] }), jsxRuntime.jsx(UrlImportRow, { disabled: disabled, onAdd: handleAddUrl })] })), cropImages && currentCropFile && cropPreviewUrl && (jsxRuntime.jsx(ImageCropModal, { open: true, imageUrl: cropPreviewUrl, fileName: currentCropFile.name, fileType: currentCropFile.type, onCancel: handleCropCancel, onConfirm: handleCropConfirm }))] }));
 };
 
+/** Falls back to counting the current page when the caller has no total. */
+function resolveUnreadCount(notifications, unreadCount) {
+    if (typeof unreadCount === 'number')
+        return Math.max(0, unreadCount);
+    return notifications.filter((notification) => !notification.isRead).length;
+}
+
+// 1. React
+/** Derived display state for the panel header and body. */
+function useInAppNotificationsPanel(notifications, unreadCount) {
+    return React.useMemo(() => {
+        const resolved = resolveUnreadCount(notifications, unreadCount);
+        return {
+            unreadCount: resolved,
+            hasUnread: resolved > 0,
+            isEmpty: notifications.length === 0,
+        };
+    }, [notifications, unreadCount]);
+}
+/**
+ * Fires `onLoadMore` when the sentinel scrolls into view inside `rootRef`.
+ * No-ops where IntersectionObserver is unavailable (jsdom, older browsers), so
+ * the list simply stops auto-loading rather than breaking.
+ */
+function useInfiniteScrollSentinel(rootRef, onLoadMore, enabled) {
+    const sentinelRef = React.useRef(null);
+    React.useEffect(() => {
+        const sentinel = sentinelRef.current;
+        if (!sentinel || !enabled || !onLoadMore)
+            return;
+        if (typeof IntersectionObserver === 'undefined')
+            return;
+        const observer = new IntersectionObserver((entries) => {
+            if (entries.some((entry) => entry.isIntersecting))
+                onLoadMore();
+        }, 
+        // Start fetching slightly before the sentinel is actually visible.
+        { root: rootRef.current, rootMargin: '80px' });
+        observer.observe(sentinel);
+        return () => observer.disconnect();
+    }, [rootRef, onLoadMore, enabled]);
+    return sentinelRef;
+}
+
+const inAppNotificationsPanelA11y = {
+    panelLabel: 'Notifications',
+    listLabel: 'Notification list',
+    markAllReadLabel: 'Mark all notifications as read',
+    retryLabel: 'Retry loading notifications',
+};
+/** Non-modal dropdown, so `dialog` rather than `alertdialog`. */
+const IN_APP_NOTIFICATIONS_PANEL_ROLE = 'dialog';
+
+/**
+ * Notification list with header actions and loading / error / empty states.
+ * Positioning is the caller's concern — render it inside a popover anchored to
+ * whatever opens it (see `DashboardShell`'s `notificationsPanel` slot).
+ */
+const InAppNotificationsPanel = ({ notifications, onSelect, unreadCount, totalCount, isLoading = false, hasNextPage = false, isFetchingNextPage = false, onLoadMore, isError = false, onRetry, onMarkAllRead, isMarkingAllRead = false, title = inAppNotificationsPanelA11y.panelLabel, emptyTitle = 'No notifications yet', emptyDescription, emptyIcon, emptyState, errorMessage = "Couldn't load notifications.", defaultIcon, className, }) => {
+    const { unreadCount: resolvedUnread, hasUnread, isEmpty, } = useInAppNotificationsPanel(notifications, unreadCount);
+    const listRef = React.useRef(null);
+    const sentinelRef = useInfiniteScrollSentinel(listRef, onLoadMore, hasNextPage && !isLoading);
+    return (jsxRuntime.jsxs("div", { role: IN_APP_NOTIFICATIONS_PANEL_ROLE, "aria-label": inAppNotificationsPanelA11y.panelLabel, className: cn('flex w-full flex-col overflow-hidden', className), children: [jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center justify-between gap-2 border-b border-border px-2 py-3", children: [jsxRuntime.jsx("div", { className: "min-w-0", children: jsxRuntime.jsxs("h2", { className: "flex min-w-0 items-center gap-2 text-sm font-semibold text-foreground", children: [jsxRuntime.jsx("span", { className: "truncate", children: title }), typeof totalCount === 'number' && (jsxRuntime.jsx("span", { className: "shrink-0 rounded-full bg-muted px-2 py-0.5 text-[0.6875rem] font-semibold text-muted-foreground tabular-nums", children: totalCount }))] }) }), jsxRuntime.jsx("span", { className: "flex shrink-0 items-center gap-2", children: hasUnread && onMarkAllRead && (jsxRuntime.jsx(Button$1, { variant: "ghost", size: "sm", onClick: onMarkAllRead, disabled: isMarkingAllRead, "aria-label": inAppNotificationsPanelA11y.markAllReadLabel, className: "h-7 px-2 text-xs font-medium text-primary hover:text-primary", children: "Mark all as read" })) })] }), jsxRuntime.jsx("div", { ref: listRef, className: "min-h-0 max-h-[16.75rem] flex-1 overflow-y-auto p-2", children: isLoading ? (jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-2 py-10 text-sm text-muted-foreground", children: [jsxRuntime.jsx(LoaderCircle, { className: "size-4 animate-spin", "aria-hidden": "true" }), "Loading notifications..."] })) : isError ? (jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-2 py-10 text-center", children: [jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: errorMessage }), onRetry && (jsxRuntime.jsx(Button$1, { variant: "outline", size: "sm", onClick: onRetry, "aria-label": inAppNotificationsPanelA11y.retryLabel, className: "h-7 px-3 text-xs", children: "Try again" }))] })) : isEmpty ? ((emptyState ?? (jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-2 px-6 py-10 text-center", children: [jsxRuntime.jsx("span", { className: "flex size-10 items-center justify-center rounded-full bg-muted", children: emptyIcon ?? (jsxRuntime.jsx(Bell, { className: "size-5 text-muted-foreground", "aria-hidden": "true" })) }), jsxRuntime.jsx("p", { className: "text-sm font-medium text-foreground", children: emptyTitle }), emptyDescription && (jsxRuntime.jsx("p", { className: "max-w-[16rem] text-xs text-muted-foreground", children: emptyDescription }))] })))) : (jsxRuntime.jsxs("div", { role: "list", "aria-label": inAppNotificationsPanelA11y.listLabel, className: "flex flex-col gap-1.5", children: [notifications.map((notification) => (jsxRuntime.jsx(InAppNotificationCard, { notification: notification, onSelect: onSelect, defaultIcon: defaultIcon }, notification.id))), hasNextPage && (jsxRuntime.jsx("div", { ref: sentinelRef, "aria-hidden": "true", className: "h-px" })), isFetchingNextPage && (jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-2 py-3 text-xs text-muted-foreground", children: [jsxRuntime.jsx(LoaderCircle, { className: "size-3.5 animate-spin", "aria-hidden": "true" }), "Loading more..."] }))] })) })] }));
+};
+
 const stop = (fn) => (e) => {
     e.stopPropagation();
     fn?.();
@@ -65918,7 +66051,7 @@ const navbarIconButtonVariants = cva([
 });
 /** Tiny solid-pill badge ("8") absolutely positioned on the icon button. */
 const navbarIndicatorCountVariants = cva([
-    'absolute -top-1.5 -right-1.5 inline-flex items-center justify-center',
+    'absolute -top-2.5 -right-2.5 inline-flex items-center justify-center',
     'min-w-4 h-4 px-1 rounded-full ring-2 ring-card',
     'text-[10px] font-medium leading-none tabular-nums text-white',
 ].join(' '), {
@@ -66005,10 +66138,11 @@ const NavbarTitle = ({ title, items, level = 1, className, ...props }) => {
 // ─── Right-side actions container ────────────────────────────────────────────
 const NavbarActions = ({ gap = 'md', className, children, ...props }) => (jsxRuntime.jsx("div", { className: cn(navbarActionsVariants({ gap }), className), ...props, children: children }));
 // ─── Icon button (with optional dot or count badge) ──────────────────────────
-const NavbarIconButton = ({ appearance = 'plain', size = 'md', indicator = false, className, children, type = 'button', ...props }) => {
+const NavbarIconButton = React.forwardRef(({ appearance = 'plain', size = 'md', indicator = false, className, children, type = 'button', ...props }, ref) => {
     const resolved = resolveIndicator(indicator);
-    return (jsxRuntime.jsxs("button", { type: type, className: cn(navbarIconButtonVariants({ appearance, size }), className), ...props, children: [jsxRuntime.jsx("span", { "aria-hidden": "true", className: "inline-flex", children: children }), resolved && resolved.count !== null && (jsxRuntime.jsx("span", { role: "img", "aria-label": navbarA11y.notificationIndicatorLabel, className: cn(navbarIndicatorCountVariants({ tone: resolved.tone })), children: resolved.count })), resolved && resolved.count === null && (jsxRuntime.jsx("span", { role: "img", "aria-label": navbarA11y.notificationIndicatorLabel, className: cn(navbarIndicatorDotVariants({ tone: resolved.tone })) }))] }));
-};
+    return (jsxRuntime.jsxs("button", { ref: ref, type: type, className: cn(navbarIconButtonVariants({ appearance, size }), className), ...props, children: [jsxRuntime.jsx("span", { "aria-hidden": "true", className: "inline-flex", children: children }), resolved && resolved.count !== null && (jsxRuntime.jsx("span", { role: "img", "aria-label": navbarA11y.notificationIndicatorLabel, className: cn(navbarIndicatorCountVariants({ tone: resolved.tone })), children: resolved.count })), resolved && resolved.count === null && (jsxRuntime.jsx("span", { role: "img", "aria-label": navbarA11y.notificationIndicatorLabel, className: cn(navbarIndicatorDotVariants({ tone: resolved.tone })) }))] }));
+});
+NavbarIconButton.displayName = 'NavbarIconButton';
 // ─── Search input (matches Figma 288×36 muted pill) ──────────────────────────
 const NavbarSearch = ({ placeholder = 'Search', value, onChange, onClear, className, containerClassName, ...rest }) => {
     const isControlled = value !== undefined;
@@ -66092,7 +66226,8 @@ const NavLeaf = ({ item, currentPath, onNavigate }) => {
     const Icon = item.icon;
     const active = isPathActive(currentPath, item.path);
     const { collapsed, expandSidebar } = useCollapsedSidebar();
-    return (jsxRuntime.jsxs(SidebarMenuItem, { className: cn(active && 'flex items-center gap-1.5 group-data-[collapsible=icon]:block'), children: [active && jsxRuntime.jsx(ActiveRail, {}), jsxRuntime.jsxs(SidebarMenuButton, { isActive: active, tooltip: item.label, onClick: () => {
+    return (jsxRuntime.jsxs(SidebarMenuItem, { className: cn(active &&
+            'flex items-center gap-1.5 group-data-[collapsible=icon]:block'), children: [active && jsxRuntime.jsx(ActiveRail, {}), jsxRuntime.jsxs(SidebarMenuButton, { isActive: active, tooltip: item.label, onClick: () => {
                     if (collapsed)
                         expandSidebar();
                     if (item.path)
@@ -66142,12 +66277,15 @@ function resolveBreadcrumb(pageMeta, leafOverride) {
         return crumbs;
     return crumbs.map((crumb, index) => index === crumbs.length - 1 ? { ...crumb, label: leafOverride } : crumb);
 }
-const ShellHeader = ({ pageMeta, breadcrumbLeafOverride, user, profileMenuItems, onLogout, showThemeToggle, isDark, onToggleTheme, showNotifications, notificationsIndicator, onNotificationsClick, headerActionsSlot, }) => {
+const ShellHeader = ({ pageMeta, breadcrumbLeafOverride, user, profileMenuItems, onLogout, showThemeToggle, isDark, onToggleTheme, showNotifications, notificationsIndicator, onNotificationsClick, notificationsPanel, notificationsOpen, onNotificationsOpenChange, headerActionsSlot, }) => {
     const { isMobile } = useSidebar();
     const breadcrumb = resolveBreadcrumb(pageMeta, breadcrumbLeafOverride);
-    return (jsxRuntime.jsxs(Navbar, { "aria-label": "Top navigation", children: [jsxRuntime.jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [isMobile && jsxRuntime.jsx(SidebarTrigger, {}), breadcrumb ? (jsxRuntime.jsx(NavbarTitle, { items: breadcrumb })) : (pageMeta?.title && jsxRuntime.jsx(NavbarTitle, { title: pageMeta.title }))] }), jsxRuntime.jsxs(NavbarActions, { gap: "lg", children: [headerActionsSlot, showThemeToggle && (jsxRuntime.jsx(NavbarIconButton, { "aria-label": isDark ? 'Switch to light theme' : 'Switch to dark theme', size: "md", onClick: onToggleTheme, children: isDark ? jsxRuntime.jsx(Sun, { size: 20 }) : jsxRuntime.jsx(Moon, { size: 20 }) })), showNotifications && (jsxRuntime.jsx(NavbarIconButton, { "aria-label": "Notifications", size: "md", indicator: notificationsIndicator || undefined, onClick: onNotificationsClick, children: jsxRuntime.jsx(Bell, { size: 20 }) })), jsxRuntime.jsx(ProfileMenu, { user: user, profileMenuItems: profileMenuItems, onLogout: onLogout })] })] }));
+    return (jsxRuntime.jsxs(Navbar, { "aria-label": "Top navigation", children: [jsxRuntime.jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [isMobile && jsxRuntime.jsx(SidebarTrigger, {}), breadcrumb ? (jsxRuntime.jsx(NavbarTitle, { items: breadcrumb })) : (pageMeta?.title && jsxRuntime.jsx(NavbarTitle, { title: pageMeta.title }))] }), jsxRuntime.jsxs(NavbarActions, { gap: "lg", children: [headerActionsSlot, showThemeToggle && (jsxRuntime.jsx(NavbarIconButton, { "aria-label": isDark ? 'Switch to light theme' : 'Switch to dark theme', size: "md", onClick: onToggleTheme, children: isDark ? jsxRuntime.jsx(Sun, { size: 20 }) : jsxRuntime.jsx(Moon, { size: 20 }) })), showNotifications &&
+                        (notificationsPanel ? (jsxRuntime.jsxs(Popover, { open: notificationsOpen, onOpenChange: onNotificationsOpenChange, children: [jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: jsxRuntime.jsx(NavbarIconButton, { "aria-label": "Notifications", size: "md", indicator: notificationsIndicator || undefined, onClick: onNotificationsClick, children: jsxRuntime.jsx(Bell, { size: 20 }) }) }), jsxRuntime.jsx(PopoverContent, { align: "end", sideOffset: 8, className: "w-[min(24rem,calc(100vw-2rem))] p-0", children: notificationsPanel })] })) : (jsxRuntime.jsx(NavbarIconButton, { "aria-label": "Notifications", size: "md", indicator: notificationsIndicator || undefined, onClick: onNotificationsClick, children: jsxRuntime.jsx(Bell, { size: 20 }) }))), jsxRuntime.jsx(ProfileMenu, { user: user, profileMenuItems: profileMenuItems, onLogout: onLogout })] })] }));
 };
-const DashboardShell = ({ brand, navGroups, currentPath, onNavigate, pageMeta, breadcrumbLeafOverride, user, profileMenuItems, onLogout, showThemeToggle, isDark, onToggleTheme, showNotifications, notificationsIndicator, onNotificationsClick, headerActionsSlot, sidebarWidth, children, }) => (jsxRuntime.jsxs(SidebarProvider, { className: "h-screen min-h-0", style: { '--sidebar-width': sidebarWidth ?? DEFAULT_SIDEBAR_WIDTH }, children: [jsxRuntime.jsx(ShellSidebar, { brand: brand, navGroups: navGroups, currentPath: currentPath, onNavigate: onNavigate }), jsxRuntime.jsxs(SidebarInset, { className: "flex h-screen flex-col overflow-hidden bg-background", children: [jsxRuntime.jsx(ShellHeader, { pageMeta: pageMeta, breadcrumbLeafOverride: breadcrumbLeafOverride, user: user, profileMenuItems: profileMenuItems, onLogout: onLogout, showThemeToggle: showThemeToggle, isDark: isDark, onToggleTheme: onToggleTheme, showNotifications: showNotifications, notificationsIndicator: notificationsIndicator, onNotificationsClick: onNotificationsClick, headerActionsSlot: headerActionsSlot }), jsxRuntime.jsx("main", { className: "flex min-h-0 flex-1 flex-col overflow-y-auto", children: children })] })] }));
+const DashboardShell = ({ brand, navGroups, currentPath, onNavigate, pageMeta, breadcrumbLeafOverride, user, profileMenuItems, onLogout, showThemeToggle, isDark, onToggleTheme, showNotifications, notificationsIndicator, onNotificationsClick, notificationsPanel, notificationsOpen, onNotificationsOpenChange, headerActionsSlot, sidebarWidth, children, }) => (jsxRuntime.jsxs(SidebarProvider, { className: "h-screen min-h-0", style: {
+        '--sidebar-width': sidebarWidth ?? DEFAULT_SIDEBAR_WIDTH,
+    }, children: [jsxRuntime.jsx(ShellSidebar, { brand: brand, navGroups: navGroups, currentPath: currentPath, onNavigate: onNavigate }), jsxRuntime.jsxs(SidebarInset, { className: "flex h-screen flex-col overflow-hidden bg-background", children: [jsxRuntime.jsx(ShellHeader, { pageMeta: pageMeta, breadcrumbLeafOverride: breadcrumbLeafOverride, user: user, profileMenuItems: profileMenuItems, onLogout: onLogout, showThemeToggle: showThemeToggle, isDark: isDark, onToggleTheme: onToggleTheme, showNotifications: showNotifications, notificationsIndicator: notificationsIndicator, onNotificationsClick: onNotificationsClick, notificationsPanel: notificationsPanel, notificationsOpen: notificationsOpen, onNotificationsOpenChange: onNotificationsOpenChange, headerActionsSlot: headerActionsSlot }), jsxRuntime.jsx("main", { className: "flex min-h-0 flex-1 flex-col overflow-y-auto", children: children })] })] }));
 
 function CreateFormPageHeader({ title, onBack, backLabel = 'Go back', }) {
     return (jsxRuntime.jsxs("div", { className: "mb-4 flex items-center justify-between gap-4", children: [jsxRuntime.jsx("h1", { className: "min-w-0 text-xl font-semibold leading-7 text-foreground", children: title }), jsxRuntime.jsx("div", { className: "flex shrink-0 items-center gap-2", children: jsxRuntime.jsxs(Button$1, { type: "button", variant: "ghost", onClick: onBack, className: "h-8 shrink-0 gap-1.5 rounded-lg px-3 py-1.5 text-sm font-medium text-secondary-foreground hover:text-secondary-foreground", children: [jsxRuntime.jsx(ChevronLeft, { className: "h-4 w-4", "aria-hidden": true }), backLabel] }) })] }));
@@ -68228,6 +68366,8 @@ exports.HistoryTimelineShimmer = HistoryTimelineShimmer;
 exports.INVOICE_AUDIT_CONFIG = INVOICE_AUDIT_CONFIG;
 exports.IconButton = IconButton;
 exports.IdHyperlinkText = IdHyperlinkText;
+exports.InAppNotificationCard = InAppNotificationCard;
+exports.InAppNotificationsPanel = InAppNotificationsPanel;
 exports.InfoBanner = InfoBanner;
 exports.InventoryComboBox = InventoryComboBox;
 exports.InventoryItemCard = InventoryItemCard;
@@ -68349,6 +68489,8 @@ exports.getBadgeTypeForStatus = getBadgeTypeForStatus;
 exports.getChangePills = getChangePills;
 exports.getInitials = getInitials;
 exports.iconButtonVariants = iconButtonVariants;
+exports.inAppNotificationCardA11y = inAppNotificationCardA11y;
+exports.inAppNotificationsPanelA11y = inAppNotificationsPanelA11y;
 exports.isPathActive = isPathActive;
 exports.notify = notify;
 exports.releaseStaleOverlayBodyLock = releaseStaleOverlayBodyLock;
@@ -68357,6 +68499,7 @@ exports.useAuditShowMore = useAuditShowMore;
 exports.useBadge = useBadge;
 exports.useButton = useButton;
 exports.useDropdownMenu = useDropdownMenu;
+exports.useInAppNotificationsPanel = useInAppNotificationsPanel;
 exports.useNavbar = useNavbar;
 exports.useSidebar = useSidebar;
 exports.videoThumbnailSrc = videoThumbnailSrc;