@caratlogic/design-system 0.1.10 → 0.1.12

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]',
@@ -64671,6 +64739,8 @@ const FILE_TYPE_PATTERNS = {
     DOCUMENT: /\.(doc|docx|xls|xlsx|ppt|pptx)($|\?)/i,
     VIDEO: /\.(mp4|m4v|avi|mov|wmv|flv|webm|mkv|ogv|mpe?g|3gp)($|\?)/i,
     AUDIO: /\.(mp3|wav|flac|aac|ogg)($|\?)/i,
+    /** Interactive viewer pages (supplier 360° spinners), not media files. */
+    EMBED: /\.html?($|\?|#)/i,
 };
 const isFileType = {
     pdf: (url) => FILE_TYPE_PATTERNS.PDF.test(url),
@@ -64678,6 +64748,7 @@ const isFileType = {
     document: (url) => FILE_TYPE_PATTERNS.DOCUMENT.test(url),
     video: (url) => FILE_TYPE_PATTERNS.VIDEO.test(url),
     audio: (url) => FILE_TYPE_PATTERNS.AUDIO.test(url),
+    embed: (url) => FILE_TYPE_PATTERNS.EMBED.test(url),
 };
 
 /** Seek to ~1st frame for static video thumbnails (HTML5 media fragment). */
@@ -64693,6 +64764,12 @@ const createVideoMediaItem = (src, index, idPrefix = 'vid') => ({
     src,
     thumbSrc: videoThumbnailSrc(src),
 });
+/**
+ * True when a "video" is really an interactive viewer page. Supplier 360°
+ * spinners (Vision360, Varni) serve `text/html`, so `<video>` renders nothing
+ * and there is no frame to seek for a thumbnail — they need an iframe.
+ */
+const isEmbedMediaItem = (item) => item.kind === 'video' && isFileType.embed(item.src);
 const isPdfMediaItem = (item) => item.isPdf === true ||
     isFileType.pdf(item.src) ||
     (item.kind === 'certificate' && !isFileType.image(item.src));
@@ -65646,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?.();
@@ -65800,9 +65942,22 @@ const PdfPreview = ({ item }) => {
     const docsViewer = `https://docs.google.com/gview?embedded=1&url=${encodeURIComponent(item.src)}`;
     return (jsxRuntime.jsx("object", { data: item.src, type: "application/pdf", className: "h-full w-full bg-card", "aria-label": item.name ?? 'Certificate PDF', children: jsxRuntime.jsx("iframe", { title: item.name ?? 'Certificate PDF', className: "h-full w-full border-0 bg-card", src: docsViewer }) }));
 };
+/**
+ * Videos arrive as either a real file or a supplier's 360° viewer page. The URL
+ * settles most cases, but not every viewer ends in `.html` (v360, loupe360),
+ * so a `<video>` that fails to load falls back to the iframe as well. Remounted
+ * per selection via `key`, which resets that fallback.
+ */
+const VideoOrEmbed = ({ item }) => {
+    const [useEmbed, setUseEmbed] = React.useState(() => isEmbedMediaItem(item));
+    if (useEmbed) {
+        return (jsxRuntime.jsx("iframe", { src: item.src, title: item.name ?? '360\u00B0 viewer', className: "h-full w-full border-0 bg-card", allowFullScreen: true }));
+    }
+    return (jsxRuntime.jsx("video", { src: item.src, controls: true, onError: () => setUseEmbed(true), className: "h-full w-full object-cover", "aria-label": item.name ?? 'Video' }));
+};
 const MainMedia = ({ item }) => {
     if (item.kind === 'video') {
-        return (jsxRuntime.jsx("video", { src: item.src, controls: true, className: "h-full w-full object-cover", "aria-label": item.name ?? 'Video' }));
+        return jsxRuntime.jsx(VideoOrEmbed, { item: item });
     }
     if (isPdfMediaItem(item)) {
         return jsxRuntime.jsx(PdfPreview, { item: item });
@@ -65812,7 +65967,7 @@ const MainMedia = ({ item }) => {
 const Thumbnail = ({ item, isActive, onSelect }) => {
     const Icon = KIND_ICON[item.kind];
     const isPdf = isPdfMediaItem(item);
-    const isVideoWithoutThumb = item.kind === 'video' && !item.thumbSrc;
+    const isVideoWithoutThumb = item.kind === 'video' && (!item.thumbSrc || isEmbedMediaItem(item));
     return (jsxRuntime.jsxs("button", { type: "button", onClick: onSelect, "aria-label": `Select ${item.name ?? item.kind}`, "aria-pressed": isActive, className: cn('group relative flex aspect-square w-full cursor-pointer overflow-hidden rounded-lg border transition-colors', isActive
             ? 'border-primary ring-2 ring-primary/30'
             : 'border-border hover:border-primary/40'), children: [isPdf ? (jsxRuntime.jsxs("span", { className: "flex h-full w-full flex-col items-center justify-center gap-1 bg-muted p-2 text-muted-foreground", children: [jsxRuntime.jsx(Icon, { size: 20 }), jsxRuntime.jsx("span", { className: "text-[10px] font-medium uppercase", children: "PDF" })] })) : isVideoWithoutThumb ? (jsxRuntime.jsx("div", { className: "h-full w-full flex items-center justify-center bg-muted", children: jsxRuntime.jsx(Icon, { size: 24, className: "text-muted-foreground" }) })) : item.kind === 'video' ? (jsxRuntime.jsx("video", { src: item.thumbSrc ?? item.src, muted: true, playsInline: true, preload: "metadata", className: "h-full w-full object-cover", "aria-hidden": "true" })) : (jsxRuntime.jsx("img", { src: item.thumbSrc ?? item.src, alt: "", className: "h-full w-full object-cover" })), !isPdf && item.kind !== 'image' && !isVideoWithoutThumb && (jsxRuntime.jsx("span", { className: "pointer-events-none absolute inset-0 flex items-center justify-center bg-black/30 text-white", children: jsxRuntime.jsx(Icon, { size: 20 }) })), isVideoWithoutThumb && (jsxRuntime.jsx("span", { className: "pointer-events-none absolute inset-0 flex items-center justify-center bg-black/30" }))] }));
@@ -65833,7 +65988,7 @@ const MediaGallery = ({ items, thumbsVisible = 4, hideTabs = false, mainAspectCl
                 (kinds.length > 0 ? (jsxRuntime.jsx(Tabs, { value: activeKind ?? undefined, onValueChange: (v) => setActiveKind(v), tabStyle: "boxed", size: "sm", children: jsxRuntime.jsx(TabsList, { children: kinds.map((kind) => {
                             const Icon = KIND_ICON[kind];
                             return (jsxRuntime.jsx(TabsTrigger, { value: kind, icon: jsxRuntime.jsx(Icon, { size: 14 }), children: MEDIA_KIND_LABEL[kind] }, kind));
-                        }) }) })) : (jsxRuntime.jsx("div", { className: "h-9", "aria-hidden": "true" }))), selected && isZoomableImage ? (jsxRuntime.jsxs("div", { className: "relative", children: [jsxRuntime.jsx(ZoomSplitViewer, { src: selected.src, alt: selected.name ?? 'Media' }), !hideDownload && (jsxRuntime.jsx("div", { className: "absolute right-3 top-3 z-20", children: jsxRuntime.jsx("button", { type: "button", onClick: handleDownload, "aria-label": "Download media", className: "inline-flex h-9 w-9 cursor-pointer items-center justify-center rounded-md border border-border bg-card text-foreground transition-all hover:border-primary hover:shadow-[0_0_0_4px_rgba(49,122,81,0.10)] focus-visible:border-primary focus-visible:shadow-[0_0_0_4px_rgba(49,122,81,0.10)] focus-visible:outline-none", children: jsxRuntime.jsx(Download, { className: "h-4 w-4" }) }) }))] })) : selected ? (jsxRuntime.jsxs("div", { className: cn('relative overflow-hidden rounded-xl border border-border bg-muted', mainAspectClassName), children: [jsxRuntime.jsx(MainMedia, { item: selected }), !hideDownload && (jsxRuntime.jsx("div", { className: "absolute right-3 top-3", children: jsxRuntime.jsx("button", { type: "button", onClick: handleDownload, "aria-label": "Download media", className: "inline-flex h-9 w-9 cursor-pointer items-center justify-center rounded-md border border-border bg-card text-foreground transition-all hover:border-primary hover:shadow-[0_0_0_4px_rgba(49,122,81,0.10)] focus-visible:border-primary focus-visible:shadow-[0_0_0_4px_rgba(49,122,81,0.10)] focus-visible:outline-none", children: jsxRuntime.jsx(Download, { className: "h-4 w-4" }) }) }))] })) : (jsxRuntime.jsx("div", { className: cn('flex items-center justify-center rounded-xl border border-dashed border-border bg-muted/40 text-sm text-muted-foreground', mainAspectClassName), children: emptyText })), visibleItems.length > 1 && (jsxRuntime.jsx("div", { className: "grid gap-3", style: {
+                        }) }) })) : (jsxRuntime.jsx("div", { className: "h-9", "aria-hidden": "true" }))), selected && isZoomableImage ? (jsxRuntime.jsxs("div", { className: "relative", children: [jsxRuntime.jsx(ZoomSplitViewer, { src: selected.src, alt: selected.name ?? 'Media' }), !hideDownload && (jsxRuntime.jsx("div", { className: "absolute right-3 top-3 z-20", children: jsxRuntime.jsx("button", { type: "button", onClick: handleDownload, "aria-label": "Download media", className: "inline-flex h-9 w-9 cursor-pointer items-center justify-center rounded-md border border-border bg-card text-foreground transition-all hover:border-primary hover:shadow-[0_0_0_4px_rgba(49,122,81,0.10)] focus-visible:border-primary focus-visible:shadow-[0_0_0_4px_rgba(49,122,81,0.10)] focus-visible:outline-none", children: jsxRuntime.jsx(Download, { className: "h-4 w-4" }) }) }))] })) : selected ? (jsxRuntime.jsxs("div", { className: cn('relative overflow-hidden rounded-xl border border-border bg-muted', mainAspectClassName), children: [jsxRuntime.jsx(MainMedia, { item: selected }, selected.id), !hideDownload && !isEmbedMediaItem(selected) && (jsxRuntime.jsx("div", { className: "absolute right-3 top-3", children: jsxRuntime.jsx("button", { type: "button", onClick: handleDownload, "aria-label": "Download media", className: "inline-flex h-9 w-9 cursor-pointer items-center justify-center rounded-md border border-border bg-card text-foreground transition-all hover:border-primary hover:shadow-[0_0_0_4px_rgba(49,122,81,0.10)] focus-visible:border-primary focus-visible:shadow-[0_0_0_4px_rgba(49,122,81,0.10)] focus-visible:outline-none", children: jsxRuntime.jsx(Download, { className: "h-4 w-4" }) }) }))] })) : (jsxRuntime.jsx("div", { className: cn('flex items-center justify-center rounded-xl border border-dashed border-border bg-muted/40 text-sm text-muted-foreground', mainAspectClassName), children: emptyText })), visibleItems.length > 1 && (jsxRuntime.jsx("div", { className: "grid gap-3", style: {
                     gridTemplateColumns: `repeat(${Math.min(visibleItems.length, thumbsVisible)}, minmax(0, 1fr))`,
                 }, children: visibleItems.slice(0, thumbsVisible).map((item) => (jsxRuntime.jsx(Thumbnail, { item: item, isActive: selected?.id === item.id, onSelect: () => setSelected(item) }, item.id))) }))] }));
 };
@@ -65896,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(' '), {
@@ -65983,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;
@@ -66070,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)
@@ -66120,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] }) })] }));
@@ -68206,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;
@@ -68327,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;
@@ -68335,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;