npm - @campfire-interactive/shell-header - Versions diffs - 0.1.5 → 0.2.1 - Mend

@campfire-interactive/shell-header 0.1.5 → 0.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/dist/index.d.ts CHANGED Viewed

@@ -16,6 +16,20 @@ interface ShellUser {
     email: string;
     avatarUrl?: string;
 }
+/**
+ * Subset of the platform-notifications `Notification` shape that the bell UI
+ * actually renders. Hosts typically map their fetched items (e.g., from
+ * `useNotifications` in @campfire-interactive/notifications-client/react)
+ * into this shape.
+ */
+interface NotificationItem {
+    id: string;
+    title: string;
+    body: string;
+    link: string | null;
+    readAt: string | null;
+    createdAt: string;
+}
 interface ShellHeaderProps {
     /** Current app ID — used to highlight the active app in the switcher */
     appId: string;
@@ -23,10 +37,28 @@ interface ShellHeaderProps {
     user: ShellUser;
     /** App IDs the user is authorized to access in the current tenant */
     authorizedApps: string[];
-    /** Unread notification count */
+    /** Unread count for the bell badge. */
     notificationCount?: number;
-    /** Called when the notification bell is clicked */
+    /**
+     * Legacy: fires when the bell icon is clicked. Only used when `notifications`
+     * is NOT provided (icon-only mode). When `notifications` is an array, the
+     * bell opens a dropdown instead.
+     */
     onNotificationClick?: () => void;
+    /**
+     * If provided, the bell renders a popover dropdown with these items. Pass
+     * an empty array for the "no notifications yet" empty state.
+     */
+    notifications?: NotificationItem[];
+    /** Optimistically mark a single notification read. */
+    onMarkRead?: (id: string) => void;
+    /** Mark every unread notification in scope read. */
+    onMarkAllRead?: () => void;
+    /**
+     * Fires when a notification row in the dropdown is clicked (after the
+     * built-in auto-mark-read). Hosts handle navigation here using `item.link`.
+     */
+    onNotificationItemClick?: (item: NotificationItem) => void;
     /** Called when logout is clicked */
     onLogout?: () => void;
     /** Fixed width for the app brand area (e.g., to align with a sidebar below). */
@@ -35,7 +67,7 @@ interface ShellHeaderProps {
     children?: React.ReactNode;
 }
-declare function ShellHeader({ appId, user, authorizedApps, notificationCount, onNotificationClick, onLogout, brandWidth, children, }: ShellHeaderProps): react_jsx_runtime.JSX.Element;
+declare function ShellHeader({ appId, user, authorizedApps, notificationCount, onNotificationClick, notifications, onMarkRead, onMarkAllRead, onNotificationItemClick, onLogout, brandWidth, children, }: ShellHeaderProps): react_jsx_runtime.JSX.Element;
 declare const appCatalog: AppDefinition[];
 /**
@@ -46,4 +78,4 @@ declare const appCatalog: AppDefinition[];
  */
 declare function getAppUrl(app: AppDefinition): string;
-export { type AppDefinition, ShellHeader, type ShellHeaderProps, type ShellUser, appCatalog, getAppUrl };
+export { type AppDefinition, type NotificationItem, ShellHeader, type ShellHeaderProps, type ShellUser, appCatalog, getAppUrl };

package/dist/index.js CHANGED Viewed

@@ -24,7 +24,7 @@ function styleInject(css, { insertAt } = {}) {
 }
 // src/styles.css
-styleInject(".cfi-sh-header {\n  display: flex;\n  align-items: center;\n  height: var(--cfi-shell-header-height, 48px);\n  padding: 0 var(--cfi-spacing-md, 1rem);\n  background: white;\n  color: var(--cfi-color-gray-900, #111827);\n  font-family: var(--cfi-font-family, system-ui, sans-serif);\n  font-size: var(--cfi-font-size-sm, 0.875rem);\n  border-bottom: 1px solid var(--cfi-color-gray-200, #e5e7eb);\n  position: relative;\n  z-index: 1000;\n}\n.cfi-sh-left {\n  display: flex;\n  align-items: center;\n  flex: 1;\n  gap: var(--cfi-spacing-md, 1rem);\n  overflow: hidden;\n}\n.cfi-sh-app-brand {\n  display: flex;\n  align-items: center;\n  gap: var(--cfi-spacing-sm, 0.5rem);\n  flex-shrink: 0;\n}\n.cfi-sh-app-badge {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  color: white;\n  font-size: 14px;\n  font-weight: 700;\n  font-family: inherit;\n  border-radius: var(--cfi-radius-md, 0.375rem);\n  flex-shrink: 0;\n}\n.cfi-sh-app-title {\n  font-weight: 600;\n  font-size: var(--cfi-font-size-base, 1rem);\n  color: var(--cfi-color-gray-900, #111827);\n  white-space: nowrap;\n}\n.cfi-sh-right {\n  display: flex;\n  align-items: center;\n  gap: var(--cfi-spacing-xs, 0.25rem);\n  flex-shrink: 0;\n}\n.cfi-sh-icon-btn {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 36px;\n  height: 36px;\n  background: transparent;\n  border: none;\n  border-radius: 50%;\n  color: var(--cfi-color-gray-600, #4b5563);\n  cursor: pointer;\n  transition: background 150ms;\n}\n.cfi-sh-icon-btn:hover {\n  background: var(--cfi-color-gray-100, #f3f4f6);\n}\n.cfi-sh-badge {\n  position: absolute;\n  top: 2px;\n  right: 2px;\n  min-width: 16px;\n  height: 16px;\n  padding: 0 4px;\n  background: var(--cfi-color-error, #ef4444);\n  color: white;\n  font-size: 10px;\n  font-weight: 600;\n  line-height: 16px;\n  text-align: center;\n  border-radius: 99px;\n}\n.cfi-sh-app-switcher {\n  position: relative;\n}\n.cfi-sh-app-grid {\n  position: absolute;\n  top: calc(100% + 8px);\n  right: 0;\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: var(--cfi-spacing-xs, 0.25rem);\n  padding: var(--cfi-spacing-sm, 0.5rem);\n  background: white;\n  border-radius: var(--cfi-radius-lg, 0.5rem);\n  box-shadow: var(--cfi-shadow-lg, 0 10px 15px rgba(0, 0, 0, 0.1));\n  border: 1px solid var(--cfi-color-gray-200, #e5e7eb);\n  z-index: 1001;\n  min-width: 280px;\n}\n.cfi-sh-app-grid-item {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--cfi-spacing-xs, 0.25rem);\n  padding: var(--cfi-spacing-sm, 0.5rem) var(--cfi-spacing-xs, 0.25rem);\n  border-radius: var(--cfi-radius-md, 0.375rem);\n  color: var(--cfi-color-gray-700, #374151);\n  text-decoration: none;\n  cursor: pointer;\n  transition: background 100ms;\n  font-family: inherit;\n}\n.cfi-sh-app-grid-item:hover {\n  background: var(--cfi-color-gray-100, #f3f4f6);\n}\n.cfi-sh-app-grid-item-active {\n  background: var(--cfi-color-primary-50, #fff7ed);\n  color: var(--cfi-color-primary-700, #c2410c);\n}\n.cfi-sh-app-grid-item-active:hover {\n  background: var(--cfi-color-primary-100, #ffedd5);\n}\n.cfi-sh-app-grid-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  height: 40px;\n  border-radius: 50%;\n}\n.cfi-sh-app-grid-label {\n  font-size: var(--cfi-font-size-xs, 0.75rem);\n  text-align: center;\n  line-height: 1.2;\n  max-width: 80px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.cfi-sh-user-menu {\n  position: relative;\n}\n.cfi-sh-avatar-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  padding: 0;\n  background: var(--cfi-color-primary-600, #ea580c);\n  border: none;\n  border-radius: 50%;\n  cursor: pointer;\n  transition: opacity 150ms;\n}\n.cfi-sh-avatar-btn:hover {\n  opacity: 0.85;\n}\n.cfi-sh-avatar-img {\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  object-fit: cover;\n}\n.cfi-sh-avatar-initials {\n  color: white;\n  font-size: var(--cfi-font-size-xs, 0.75rem);\n  font-weight: 600;\n  font-family: inherit;\n}\n.cfi-sh-user-dropdown {\n  position: absolute;\n  top: calc(100% + 8px);\n  right: 0;\n  min-width: 200px;\n  background: white;\n  border-radius: var(--cfi-radius-lg, 0.5rem);\n  box-shadow: var(--cfi-shadow-lg, 0 10px 15px rgba(0, 0, 0, 0.1));\n  border: 1px solid var(--cfi-color-gray-200, #e5e7eb);\n  z-index: 1001;\n}\n.cfi-sh-user-header {\n  padding: var(--cfi-spacing-sm, 0.5rem) var(--cfi-spacing-md, 1rem);\n  display: flex;\n  flex-direction: column;\n}\n.cfi-sh-user-name {\n  font-weight: 500;\n  color: var(--cfi-color-gray-900, #111827);\n  font-size: var(--cfi-font-size-sm, 0.875rem);\n}\n.cfi-sh-user-email {\n  color: var(--cfi-color-gray-500, #6b7280);\n  font-size: var(--cfi-font-size-xs, 0.75rem);\n}\n.cfi-sh-divider {\n  height: 1px;\n  background: var(--cfi-color-gray-200, #e5e7eb);\n}\n.cfi-sh-menu-item {\n  display: flex;\n  align-items: center;\n  gap: var(--cfi-spacing-sm, 0.5rem);\n  width: 100%;\n  padding: var(--cfi-spacing-sm, 0.5rem) var(--cfi-spacing-md, 1rem);\n  background: none;\n  border: none;\n  color: var(--cfi-color-gray-700, #374151);\n  cursor: pointer;\n  font-size: var(--cfi-font-size-sm, 0.875rem);\n  font-family: inherit;\n  transition: background 100ms;\n}\n.cfi-sh-menu-item:hover {\n  background: var(--cfi-color-gray-100, #f3f4f6);\n}\n");
+styleInject(".cfi-sh-header {\n  display: flex;\n  align-items: center;\n  height: var(--cfi-shell-header-height, 48px);\n  padding: 0 var(--cfi-spacing-md, 1rem);\n  background: white;\n  color: var(--cfi-color-gray-900, #111827);\n  font-family: var(--cfi-font-family, system-ui, sans-serif);\n  font-size: var(--cfi-font-size-sm, 0.875rem);\n  border-bottom: 1px solid var(--cfi-color-gray-200, #e5e7eb);\n  position: relative;\n  z-index: 1000;\n}\n.cfi-sh-left {\n  display: flex;\n  align-items: center;\n  flex: 1;\n  gap: var(--cfi-spacing-md, 1rem);\n  overflow: hidden;\n}\n.cfi-sh-app-brand {\n  display: flex;\n  align-items: center;\n  gap: var(--cfi-spacing-sm, 0.5rem);\n  flex-shrink: 0;\n}\n.cfi-sh-app-badge {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  color: white;\n  font-size: 14px;\n  font-weight: 700;\n  font-family: inherit;\n  border-radius: var(--cfi-radius-md, 0.375rem);\n  flex-shrink: 0;\n}\n.cfi-sh-app-title {\n  font-weight: 600;\n  font-size: var(--cfi-font-size-base, 1rem);\n  color: var(--cfi-color-gray-900, #111827);\n  white-space: nowrap;\n}\n.cfi-sh-right {\n  display: flex;\n  align-items: center;\n  gap: var(--cfi-spacing-xs, 0.25rem);\n  flex-shrink: 0;\n}\n.cfi-sh-icon-btn {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 36px;\n  height: 36px;\n  background: transparent;\n  border: none;\n  border-radius: 50%;\n  color: var(--cfi-color-gray-600, #4b5563);\n  cursor: pointer;\n  transition: background 150ms;\n}\n.cfi-sh-icon-btn:hover {\n  background: var(--cfi-color-gray-100, #f3f4f6);\n}\n.cfi-sh-badge {\n  position: absolute;\n  top: 2px;\n  right: 2px;\n  min-width: 16px;\n  height: 16px;\n  padding: 0 4px;\n  background: var(--cfi-color-error, #ef4444);\n  color: white;\n  font-size: 10px;\n  font-weight: 600;\n  line-height: 16px;\n  text-align: center;\n  border-radius: 99px;\n}\n.cfi-sh-app-switcher {\n  position: relative;\n}\n.cfi-sh-app-grid {\n  position: absolute;\n  top: calc(100% + 8px);\n  right: 0;\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: var(--cfi-spacing-xs, 0.25rem);\n  padding: var(--cfi-spacing-sm, 0.5rem);\n  background: white;\n  border-radius: var(--cfi-radius-lg, 0.5rem);\n  box-shadow: var(--cfi-shadow-lg, 0 10px 15px rgba(0, 0, 0, 0.1));\n  border: 1px solid var(--cfi-color-gray-200, #e5e7eb);\n  z-index: 1001;\n  min-width: 280px;\n}\n.cfi-sh-app-grid-item {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--cfi-spacing-xs, 0.25rem);\n  padding: var(--cfi-spacing-sm, 0.5rem) var(--cfi-spacing-xs, 0.25rem);\n  border-radius: var(--cfi-radius-md, 0.375rem);\n  color: var(--cfi-color-gray-700, #374151);\n  text-decoration: none;\n  cursor: pointer;\n  transition: background 100ms;\n  font-family: inherit;\n}\n.cfi-sh-app-grid-item:hover {\n  background: var(--cfi-color-gray-100, #f3f4f6);\n}\n.cfi-sh-app-grid-item-active {\n  background: var(--cfi-color-primary-50, #fff7ed);\n  color: var(--cfi-color-primary-700, #c2410c);\n}\n.cfi-sh-app-grid-item-active:hover {\n  background: var(--cfi-color-primary-100, #ffedd5);\n}\n.cfi-sh-app-grid-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  height: 40px;\n  border-radius: 50%;\n}\n.cfi-sh-app-grid-label {\n  font-size: var(--cfi-font-size-xs, 0.75rem);\n  text-align: center;\n  line-height: 1.2;\n  max-width: 80px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.cfi-sh-user-menu {\n  position: relative;\n}\n.cfi-sh-avatar-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  padding: 0;\n  background: var(--cfi-color-primary-600, #ea580c);\n  border: none;\n  border-radius: 50%;\n  cursor: pointer;\n  transition: opacity 150ms;\n}\n.cfi-sh-avatar-btn:hover {\n  opacity: 0.85;\n}\n.cfi-sh-avatar-img {\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  object-fit: cover;\n}\n.cfi-sh-avatar-initials {\n  color: white;\n  font-size: var(--cfi-font-size-xs, 0.75rem);\n  font-weight: 600;\n  font-family: inherit;\n}\n.cfi-sh-user-dropdown {\n  position: absolute;\n  top: calc(100% + 8px);\n  right: 0;\n  min-width: 200px;\n  background: white;\n  border-radius: var(--cfi-radius-lg, 0.5rem);\n  box-shadow: var(--cfi-shadow-lg, 0 10px 15px rgba(0, 0, 0, 0.1));\n  border: 1px solid var(--cfi-color-gray-200, #e5e7eb);\n  z-index: 1001;\n}\n.cfi-sh-user-header {\n  padding: var(--cfi-spacing-sm, 0.5rem) var(--cfi-spacing-md, 1rem);\n  display: flex;\n  flex-direction: column;\n}\n.cfi-sh-user-name {\n  font-weight: 500;\n  color: var(--cfi-color-gray-900, #111827);\n  font-size: var(--cfi-font-size-sm, 0.875rem);\n}\n.cfi-sh-user-email {\n  color: var(--cfi-color-gray-500, #6b7280);\n  font-size: var(--cfi-font-size-xs, 0.75rem);\n}\n.cfi-sh-divider {\n  height: 1px;\n  background: var(--cfi-color-gray-200, #e5e7eb);\n}\n.cfi-sh-menu-item {\n  display: flex;\n  align-items: center;\n  gap: var(--cfi-spacing-sm, 0.5rem);\n  width: 100%;\n  padding: var(--cfi-spacing-sm, 0.5rem) var(--cfi-spacing-md, 1rem);\n  background: none;\n  border: none;\n  color: var(--cfi-color-gray-700, #374151);\n  cursor: pointer;\n  font-size: var(--cfi-font-size-sm, 0.875rem);\n  font-family: inherit;\n  transition: background 100ms;\n}\n.cfi-sh-menu-item:hover {\n  background: var(--cfi-color-gray-100, #f3f4f6);\n}\n.cfi-sh-notif {\n  position: relative;\n}\n.cfi-sh-notif-dropdown {\n  position: absolute;\n  top: calc(100% + 8px);\n  right: 0;\n  width: 360px;\n  max-height: 480px;\n  display: flex;\n  flex-direction: column;\n  background: white;\n  border-radius: var(--cfi-radius-lg, 0.5rem);\n  box-shadow: var(--cfi-shadow-lg, 0 10px 15px rgba(0, 0, 0, 0.1));\n  border: 1px solid var(--cfi-color-gray-200, #e5e7eb);\n  z-index: 1001;\n  overflow: hidden;\n}\n.cfi-sh-notif-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: var(--cfi-spacing-sm, 0.5rem) var(--cfi-spacing-md, 1rem);\n  border-bottom: 1px solid var(--cfi-color-gray-200, #e5e7eb);\n  flex-shrink: 0;\n}\n.cfi-sh-notif-title {\n  font-weight: 600;\n  color: var(--cfi-color-gray-900, #111827);\n}\n.cfi-sh-notif-mark-all {\n  background: none;\n  border: none;\n  color: var(--cfi-color-primary-600, #ea580c);\n  cursor: pointer;\n  font-size: var(--cfi-font-size-xs, 0.75rem);\n  font-family: inherit;\n  padding: 0;\n}\n.cfi-sh-notif-mark-all:hover {\n  text-decoration: underline;\n}\n.cfi-sh-notif-list {\n  overflow-y: auto;\n  flex: 1;\n}\n.cfi-sh-notif-empty {\n  padding: var(--cfi-spacing-lg, 1.5rem) var(--cfi-spacing-md, 1rem);\n  color: var(--cfi-color-gray-500, #6b7280);\n  text-align: center;\n  font-size: var(--cfi-font-size-sm, 0.875rem);\n}\n.cfi-sh-notif-item {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--cfi-spacing-sm, 0.5rem);\n  width: 100%;\n  padding: var(--cfi-spacing-sm, 0.5rem) var(--cfi-spacing-md, 1rem);\n  background: none;\n  border: none;\n  border-bottom: 1px solid var(--cfi-color-gray-100, #f3f4f6);\n  text-align: left;\n  cursor: pointer;\n  font-family: inherit;\n  transition: background 100ms;\n}\n.cfi-sh-notif-item:hover {\n  background: var(--cfi-color-gray-50, #f9fafb);\n}\n.cfi-sh-notif-item:last-child {\n  border-bottom: none;\n}\n.cfi-sh-notif-dot {\n  flex-shrink: 0;\n  width: 8px;\n  height: 8px;\n  margin-top: 6px;\n  background: var(--cfi-color-primary-600, #ea580c);\n  border-radius: 50%;\n}\n.cfi-sh-notif-dot-placeholder {\n  flex-shrink: 0;\n  width: 8px;\n  height: 8px;\n  margin-top: 6px;\n}\n.cfi-sh-notif-content {\n  flex: 1;\n  min-width: 0;\n}\n.cfi-sh-notif-item-title {\n  font-weight: 500;\n  color: var(--cfi-color-gray-900, #111827);\n  font-size: var(--cfi-font-size-sm, 0.875rem);\n  margin-bottom: 2px;\n}\n.cfi-sh-notif-item-unread .cfi-sh-notif-item-title {\n  font-weight: 600;\n}\n.cfi-sh-notif-item-body {\n  color: var(--cfi-color-gray-600, #4b5563);\n  font-size: var(--cfi-font-size-xs, 0.75rem);\n  line-height: 1.4;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n.cfi-sh-notif-item-time {\n  color: var(--cfi-color-gray-400, #9ca3af);\n  font-size: 11px;\n  margin-top: 4px;\n}\n");
 // src/appCatalog.ts
 var appCatalog = [
@@ -142,21 +142,117 @@ function AppSwitcher({ currentAppId, authorizedApps }) {
 }
 // src/NotificationBell.tsx
+import { useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-function NotificationBell({ count = 0, onClick }) {
-  return /* @__PURE__ */ jsxs3("button", { className: "cfi-sh-icon-btn", onClick, "aria-label": "Notifications", children: [
-    /* @__PURE__ */ jsx3(Bell, { size: 18 }),
-    count > 0 && /* @__PURE__ */ jsx3("span", { className: "cfi-sh-badge", children: count > 99 ? "99+" : count })
+function NotificationBell({
+  count = 0,
+  onClick,
+  items,
+  onMarkRead,
+  onMarkAllRead,
+  onItemClick
+}) {
+  const hasDropdown = items !== void 0;
+  const [open, setOpen] = useState2(false);
+  const ref = useRef2(null);
+  useEffect2(() => {
+    function handleClickOutside(e) {
+      if (ref.current && !ref.current.contains(e.target)) {
+        setOpen(false);
+      }
+    }
+    if (open) document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [open]);
+  useEffect2(() => {
+    function handleEsc(e) {
+      if (e.key === "Escape") setOpen(false);
+    }
+    if (open) document.addEventListener("keydown", handleEsc);
+    return () => document.removeEventListener("keydown", handleEsc);
+  }, [open]);
+  const handleBellClick = () => {
+    if (hasDropdown) {
+      setOpen((prev) => !prev);
+    } else if (onClick) {
+      onClick();
+    }
+  };
+  const handleItemClick = (item) => {
+    if (item.readAt === null && onMarkRead) onMarkRead(item.id);
+    if (onItemClick) onItemClick(item);
+    setOpen(false);
+  };
+  const hasUnread = items?.some((i) => i.readAt === null) ?? false;
+  return /* @__PURE__ */ jsxs3("div", { className: "cfi-sh-notif", ref, children: [
+    /* @__PURE__ */ jsxs3(
+      "button",
+      {
+        className: "cfi-sh-icon-btn",
+        onClick: handleBellClick,
+        "aria-expanded": hasDropdown ? open : void 0,
+        "aria-haspopup": hasDropdown ? "true" : void 0,
+        "aria-label": "Notifications",
+        children: [
+          /* @__PURE__ */ jsx3(Bell, { size: 18 }),
+          count > 0 && /* @__PURE__ */ jsx3("span", { className: "cfi-sh-badge", children: count > 99 ? "99+" : count })
+        ]
+      }
+    ),
+    hasDropdown && open && /* @__PURE__ */ jsxs3("div", { className: "cfi-sh-notif-dropdown", role: "dialog", "aria-label": "Notifications", children: [
+      /* @__PURE__ */ jsxs3("div", { className: "cfi-sh-notif-header", children: [
+        /* @__PURE__ */ jsx3("span", { className: "cfi-sh-notif-title", children: "Notifications" }),
+        hasUnread && onMarkAllRead && /* @__PURE__ */ jsx3(
+          "button",
+          {
+            className: "cfi-sh-notif-mark-all",
+            onClick: () => onMarkAllRead(),
+            type: "button",
+            children: "Mark all read"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx3("div", { className: "cfi-sh-notif-list", children: items.length === 0 ? /* @__PURE__ */ jsx3("div", { className: "cfi-sh-notif-empty", children: "No notifications yet." }) : items.map((n) => /* @__PURE__ */ jsxs3(
+        "button",
+        {
+          className: `cfi-sh-notif-item ${n.readAt === null ? "cfi-sh-notif-item-unread" : ""}`,
+          onClick: () => handleItemClick(n),
+          type: "button",
+          children: [
+            n.readAt === null ? /* @__PURE__ */ jsx3("span", { className: "cfi-sh-notif-dot", "aria-hidden": "true" }) : /* @__PURE__ */ jsx3("span", { className: "cfi-sh-notif-dot-placeholder", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsxs3("div", { className: "cfi-sh-notif-content", children: [
+              /* @__PURE__ */ jsx3("div", { className: "cfi-sh-notif-item-title", children: n.title }),
+              /* @__PURE__ */ jsx3("div", { className: "cfi-sh-notif-item-body", children: n.body }),
+              /* @__PURE__ */ jsx3("div", { className: "cfi-sh-notif-item-time", children: formatRelative(n.createdAt) })
+            ] })
+          ]
+        },
+        n.id
+      )) })
+    ] })
   ] });
 }
+function formatRelative(iso) {
+  const t = Date.parse(iso);
+  if (Number.isNaN(t)) return "";
+  const diff = Math.max(0, Date.now() - t);
+  const min = Math.floor(diff / 6e4);
+  if (min < 1) return "just now";
+  if (min < 60) return `${min}m`;
+  const hr = Math.floor(min / 60);
+  if (hr < 24) return `${hr}h`;
+  const days = Math.floor(hr / 24);
+  if (days < 7) return `${days}d`;
+  return new Date(t).toLocaleDateString("en-US", { month: "short", day: "numeric" });
+}
 // src/UserMenu.tsx
-import { useState as useState2, useRef as useRef2, useEffect as useEffect2 } from "react";
+import { useState as useState3, useRef as useRef3, useEffect as useEffect3 } from "react";
 import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 function UserMenu({ user, onLogout, color }) {
-  const [open, setOpen] = useState2(false);
-  const ref = useRef2(null);
-  useEffect2(() => {
+  const [open, setOpen] = useState3(false);
+  const ref = useRef3(null);
+  useEffect3(() => {
     function handleClickOutside(e) {
       if (ref.current && !ref.current.contains(e.target)) {
         setOpen(false);
@@ -210,6 +306,10 @@ function ShellHeader({
   authorizedApps,
   notificationCount,
   onNotificationClick,
+  notifications,
+  onMarkRead,
+  onMarkAllRead,
+  onNotificationItemClick,
   onLogout,
   brandWidth,
   children
@@ -225,7 +325,17 @@ function ShellHeader({
       children
     ] }),
     /* @__PURE__ */ jsxs5("div", { className: "cfi-sh-right", children: [
-      /* @__PURE__ */ jsx5(NotificationBell, { count: notificationCount, onClick: onNotificationClick }),
+      /* @__PURE__ */ jsx5(
+        NotificationBell,
+        {
+          count: notificationCount,
+          onClick: onNotificationClick,
+          items: notifications,
+          onMarkRead,
+          onMarkAllRead,
+          onItemClick: onNotificationItemClick
+        }
+      ),
       /* @__PURE__ */ jsx5(AppSwitcher, { currentAppId: appId, authorizedApps }),
       /* @__PURE__ */ jsx5(UserMenu, { user, onLogout, color: currentApp?.color })
     ] })

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@campfire-interactive/shell-header",
-  "version": "0.1.5",
+  "version": "0.2.1",
   "description": "Shared shell header with app switcher for Campfire Suite",
   "type": "module",
   "main": "dist/index.js",