@campfire-interactive/shell-header 0.1.5 → 0.3.3

package/dist/index.d.ts

@@ -16,6 +16,26 @@ interface ShellUser {
     email: string;
     avatarUrl?: string;
 }
+interface LocaleOption {
+    /** BCP-47-ish language code, e.g. "en", "de". */
+    code: string;
+    /** Human-readable label shown in the dropdown, e.g. "English", "Deutsch". */
+    label: 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,19 +43,59 @@ 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;
+    /**
+     * Current user locale (e.g. "en", "de"). When provided alongside
+     * `supportedLocales` and `onLocaleChange`, a locale dropdown renders
+     * in the right-side cluster. Omitting any of the three hides it.
+     */
+    locale?: string;
+    /** Locales the user can pick from. */
+    supportedLocales?: ReadonlyArray<LocaleOption>;
+    /**
+     * Called when the user picks a different locale. Consumer is responsible
+     * for persisting (e.g. via identity-client.me.updatePreferences) and for
+     * refreshing the JWT / reloading the page so other parts of the UI
+     * pick up the change.
+     */
+    onLocaleChange?: (locale: string) => void | Promise<void>;
     /** Fixed width for the app brand area (e.g., to align with a sidebar below). */
     brandWidth?: number;
     /** Optional content in the left/center area (filters, search, breadcrumbs, etc.) */
     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, locale, supportedLocales, onLocaleChange, brandWidth, children, }: ShellHeaderProps): react_jsx_runtime.JSX.Element;
+
+interface LocaleSwitcherProps {
+    currentLocale: string;
+    supportedLocales: ReadonlyArray<LocaleOption>;
+    onLocaleChange: (locale: string) => void | Promise<void>;
+}
+declare function LocaleSwitcher({ currentLocale, supportedLocales, onLocaleChange }: LocaleSwitcherProps): react_jsx_runtime.JSX.Element;
 
 declare const appCatalog: AppDefinition[];
 /**
@@ -46,4 +106,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 LocaleOption, LocaleSwitcher, type NotificationItem, ShellHeader, type ShellHeaderProps, type ShellUser, appCatalog, getAppUrl };

package/dist/index.js

@@ -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-menu-item:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.cfi-sh-locale-switcher {\n  position: relative;\n}\n.cfi-sh-locale-btn {\n  display: flex;\n  align-items: center;\n  gap: var(--cfi-spacing-xs, 0.25rem);\n  height: 32px;\n  padding: 0 var(--cfi-spacing-sm, 0.5rem);\n  background: transparent;\n  border: 1px solid var(--cfi-color-gray-200, #e5e7eb);\n  border-radius: var(--cfi-radius-md, 0.375rem);\n  color: var(--cfi-color-gray-700, #374151);\n  cursor: pointer;\n  font-size: var(--cfi-font-size-xs, 0.75rem);\n  font-weight: 600;\n  font-family: inherit;\n  transition: background 100ms;\n}\n.cfi-sh-locale-btn:hover:not(:disabled) {\n  background: var(--cfi-color-gray-100, #f3f4f6);\n}\n.cfi-sh-locale-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.cfi-sh-locale-label {\n  letter-spacing: 0.02em;\n}\n.cfi-sh-locale-dropdown {\n  position: absolute;\n  top: calc(100% + 8px);\n  right: 0;\n  min-width: 180px;\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  padding: var(--cfi-spacing-xs, 0.25rem) 0;\n}\n.cfi-sh-locale-dropdown .cfi-sh-menu-item {\n  justify-content: space-between;\n}\n.cfi-sh-locale-item-active {\n  background: var(--cfi-color-gray-100, #f3f4f6);\n}\n.cfi-sh-locale-item-label {\n  flex: 1;\n  text-align: left;\n}\n.cfi-sh-locale-item-code {\n  color: var(--cfi-color-gray-400, #9ca3af);\n  font-size: var(--cfi-font-size-xs, 0.75rem);\n  font-weight: 600;\n  letter-spacing: 0.02em;\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 = [
@@ -34,7 +34,8 @@ var appCatalog = [
   { id: "pim", name: "Price Index", icon: "BarChart3", letter: "P", color: "#f97316", localPort: 3300 },
   { id: "cpq", name: "CPQ", icon: "Calculator", letter: "C", color: "#4f46e5", localPort: 3400 },
   { id: "omsf", name: "OMSF", icon: "FileText", letter: "O", color: "#0ea5e9", localPort: 3500 },
-  { id: "identity", name: "Identity", icon: "Shield", letter: "I", color: "#8b5cf6", localPort: 3600 }
+  { id: "identity", name: "Identity", icon: "Shield", letter: "I", color: "#8b5cf6", localPort: 3600 },
+  { id: "bom", name: "BOM", icon: "Network", letter: "B", color: "#0d9488", localPort: 3700 }
 ];
 function getAppUrl(app) {
   const host = typeof window !== "undefined" ? window.location.hostname : "";
@@ -62,7 +63,8 @@ import {
   Shield,
   GripHorizontal,
   Bell,
-  LogOut
+  LogOut,
+  Globe
 } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var iconMap = {
@@ -141,22 +143,182 @@ function AppSwitcher({ currentAppId, authorizedApps }) {
   ] });
 }
 
-// src/NotificationBell.tsx
+// src/LocaleSwitcher.tsx
+import { useState as useState2, useRef as useRef2, useEffect as useEffect2 } 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 LocaleSwitcher({ currentLocale, supportedLocales, onLocaleChange }) {
+  const [open, setOpen] = useState2(false);
+  const [updating, setUpdating] = 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]);
+  const current = supportedLocales.find((l) => l.code === currentLocale);
+  const buttonLabel = (current?.code ?? currentLocale).toUpperCase();
+  async function handleSelect(code) {
+    if (code === currentLocale) {
+      setOpen(false);
+      return;
+    }
+    setUpdating(true);
+    try {
+      await onLocaleChange(code);
+    } finally {
+      setUpdating(false);
+      setOpen(false);
+    }
+  }
+  return /* @__PURE__ */ jsxs3("div", { className: "cfi-sh-locale-switcher", ref, children: [
+    /* @__PURE__ */ jsxs3(
+      "button",
+      {
+        className: "cfi-sh-locale-btn",
+        onClick: () => setOpen(!open),
+        "aria-expanded": open,
+        "aria-haspopup": "true",
+        "aria-label": `Language: ${current?.label ?? currentLocale}`,
+        disabled: updating,
+        title: current?.label ?? currentLocale,
+        children: [
+          /* @__PURE__ */ jsx3(Globe, { size: 16 }),
+          /* @__PURE__ */ jsx3("span", { className: "cfi-sh-locale-label", children: buttonLabel })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsx3("div", { className: "cfi-sh-locale-dropdown", children: supportedLocales.map((loc) => /* @__PURE__ */ jsxs3(
+      "button",
+      {
+        className: loc.code === currentLocale ? "cfi-sh-menu-item cfi-sh-locale-item-active" : "cfi-sh-menu-item",
+        onClick: () => handleSelect(loc.code),
+        disabled: updating,
+        children: [
+          /* @__PURE__ */ jsx3("span", { className: "cfi-sh-locale-item-label", children: loc.label }),
+          /* @__PURE__ */ jsx3("span", { className: "cfi-sh-locale-item-code", children: loc.code.toUpperCase() })
+        ]
+      },
+      loc.code
+    )) })
   ] });
 }
 
-// src/UserMenu.tsx
-import { useState as useState2, useRef as useRef2, useEffect as useEffect2 } from "react";
+// src/NotificationBell.tsx
+import { useEffect as useEffect3, useRef as useRef3, useState as useState3 } from "react";
 import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function NotificationBell({
+  count = 0,
+  onClick,
+  items,
+  onMarkRead,
+  onMarkAllRead,
+  onItemClick
+}) {
+  const hasDropdown = items !== void 0;
+  const [open, setOpen] = useState3(false);
+  const ref = useRef3(null);
+  useEffect3(() => {
+    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]);
+  useEffect3(() => {
+    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__ */ jsxs4("div", { className: "cfi-sh-notif", ref, children: [
+    /* @__PURE__ */ jsxs4(
+      "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__ */ jsx4(Bell, { size: 18 }),
+          count > 0 && /* @__PURE__ */ jsx4("span", { className: "cfi-sh-badge", children: count > 99 ? "99+" : count })
+        ]
+      }
+    ),
+    hasDropdown && open && /* @__PURE__ */ jsxs4("div", { className: "cfi-sh-notif-dropdown", role: "dialog", "aria-label": "Notifications", children: [
+      /* @__PURE__ */ jsxs4("div", { className: "cfi-sh-notif-header", children: [
+        /* @__PURE__ */ jsx4("span", { className: "cfi-sh-notif-title", children: "Notifications" }),
+        hasUnread && onMarkAllRead && /* @__PURE__ */ jsx4(
+          "button",
+          {
+            className: "cfi-sh-notif-mark-all",
+            onClick: () => onMarkAllRead(),
+            type: "button",
+            children: "Mark all read"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx4("div", { className: "cfi-sh-notif-list", children: items.length === 0 ? /* @__PURE__ */ jsx4("div", { className: "cfi-sh-notif-empty", children: "No notifications yet." }) : items.map((n) => /* @__PURE__ */ jsxs4(
+        "button",
+        {
+          className: `cfi-sh-notif-item ${n.readAt === null ? "cfi-sh-notif-item-unread" : ""}`,
+          onClick: () => handleItemClick(n),
+          type: "button",
+          children: [
+            n.readAt === null ? /* @__PURE__ */ jsx4("span", { className: "cfi-sh-notif-dot", "aria-hidden": "true" }) : /* @__PURE__ */ jsx4("span", { className: "cfi-sh-notif-dot-placeholder", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsxs4("div", { className: "cfi-sh-notif-content", children: [
+              /* @__PURE__ */ jsx4("div", { className: "cfi-sh-notif-item-title", children: n.title }),
+              /* @__PURE__ */ jsx4("div", { className: "cfi-sh-notif-item-body", children: n.body }),
+              /* @__PURE__ */ jsx4("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 useState4, useRef as useRef4, useEffect as useEffect4 } from "react";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 function UserMenu({ user, onLogout, color }) {
-  const [open, setOpen] = useState2(false);
-  const ref = useRef2(null);
-  useEffect2(() => {
+  const [open, setOpen] = useState4(false);
+  const ref = useRef4(null);
+  useEffect4(() => {
     function handleClickOutside(e) {
       if (ref.current && !ref.current.contains(e.target)) {
         setOpen(false);
@@ -166,8 +328,8 @@ function UserMenu({ user, onLogout, color }) {
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [open]);
   const initials = user.name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2);
-  return /* @__PURE__ */ jsxs4("div", { className: "cfi-sh-user-menu", ref, children: [
-    /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsxs5("div", { className: "cfi-sh-user-menu", ref, children: [
+    /* @__PURE__ */ jsx5(
       "button",
       {
         className: "cfi-sh-avatar-btn",
@@ -175,16 +337,16 @@ function UserMenu({ user, onLogout, color }) {
         onClick: () => setOpen(!open),
         "aria-expanded": open,
         "aria-haspopup": "true",
-        children: user.avatarUrl ? /* @__PURE__ */ jsx4("img", { src: user.avatarUrl, alt: user.name, className: "cfi-sh-avatar-img" }) : /* @__PURE__ */ jsx4("span", { className: "cfi-sh-avatar-initials", children: initials })
+        children: user.avatarUrl ? /* @__PURE__ */ jsx5("img", { src: user.avatarUrl, alt: user.name, className: "cfi-sh-avatar-img" }) : /* @__PURE__ */ jsx5("span", { className: "cfi-sh-avatar-initials", children: initials })
       }
     ),
-    open && /* @__PURE__ */ jsxs4("div", { className: "cfi-sh-user-dropdown", children: [
-      /* @__PURE__ */ jsxs4("div", { className: "cfi-sh-user-header", children: [
-        /* @__PURE__ */ jsx4("span", { className: "cfi-sh-user-name", children: user.name }),
-        /* @__PURE__ */ jsx4("span", { className: "cfi-sh-user-email", children: user.email })
+    open && /* @__PURE__ */ jsxs5("div", { className: "cfi-sh-user-dropdown", children: [
+      /* @__PURE__ */ jsxs5("div", { className: "cfi-sh-user-header", children: [
+        /* @__PURE__ */ jsx5("span", { className: "cfi-sh-user-name", children: user.name }),
+        /* @__PURE__ */ jsx5("span", { className: "cfi-sh-user-email", children: user.email })
       ] }),
-      /* @__PURE__ */ jsx4("div", { className: "cfi-sh-divider" }),
-      /* @__PURE__ */ jsxs4(
+      /* @__PURE__ */ jsx5("div", { className: "cfi-sh-divider" }),
+      /* @__PURE__ */ jsxs5(
         "button",
         {
           className: "cfi-sh-menu-item",
@@ -193,8 +355,8 @@ function UserMenu({ user, onLogout, color }) {
             onLogout?.();
           },
           children: [
-            /* @__PURE__ */ jsx4(LogOut, { size: 14 }),
-            /* @__PURE__ */ jsx4("span", { children: "Sign out" })
+            /* @__PURE__ */ jsx5(LogOut, { size: 14 }),
+            /* @__PURE__ */ jsx5("span", { children: "Sign out" })
           ]
         }
       )
@@ -203,35 +365,62 @@ function UserMenu({ user, onLogout, color }) {
 }
 
 // src/ShellHeader.tsx
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 function ShellHeader({
   appId,
   user,
   authorizedApps,
   notificationCount,
   onNotificationClick,
+  notifications,
+  onMarkRead,
+  onMarkAllRead,
+  onNotificationItemClick,
   onLogout,
+  locale,
+  supportedLocales,
+  onLocaleChange,
   brandWidth,
   children
 }) {
   const currentApp = appCatalog.find((a) => a.id === appId);
   const brandStyle = brandWidth ? { width: `${brandWidth}px`, flexShrink: 0, boxSizing: "border-box" } : void 0;
-  return /* @__PURE__ */ jsxs5("header", { className: "cfi-sh-header", children: [
-    /* @__PURE__ */ jsxs5("div", { className: "cfi-sh-left", children: [
-      /* @__PURE__ */ jsxs5("div", { className: "cfi-sh-app-brand", style: brandStyle, children: [
-        currentApp && /* @__PURE__ */ jsx5("span", { className: "cfi-sh-app-badge", style: { background: currentApp.color }, children: currentApp.letter }),
-        /* @__PURE__ */ jsx5("span", { className: "cfi-sh-app-title", children: currentApp?.name || appId })
+  const showLocaleSwitcher = locale !== void 0 && supportedLocales !== void 0 && supportedLocales.length > 0 && onLocaleChange !== void 0;
+  return /* @__PURE__ */ jsxs6("header", { className: "cfi-sh-header", children: [
+    /* @__PURE__ */ jsxs6("div", { className: "cfi-sh-left", children: [
+      /* @__PURE__ */ jsxs6("div", { className: "cfi-sh-app-brand", style: brandStyle, children: [
+        currentApp && /* @__PURE__ */ jsx6("span", { className: "cfi-sh-app-badge", style: { background: currentApp.color }, children: currentApp.letter }),
+        /* @__PURE__ */ jsx6("span", { className: "cfi-sh-app-title", children: currentApp?.name || appId })
       ] }),
       children
     ] }),
-    /* @__PURE__ */ jsxs5("div", { className: "cfi-sh-right", children: [
-      /* @__PURE__ */ jsx5(NotificationBell, { count: notificationCount, onClick: onNotificationClick }),
-      /* @__PURE__ */ jsx5(AppSwitcher, { currentAppId: appId, authorizedApps }),
-      /* @__PURE__ */ jsx5(UserMenu, { user, onLogout, color: currentApp?.color })
+    /* @__PURE__ */ jsxs6("div", { className: "cfi-sh-right", children: [
+      showLocaleSwitcher && /* @__PURE__ */ jsx6(
+        LocaleSwitcher,
+        {
+          currentLocale: locale,
+          supportedLocales,
+          onLocaleChange
+        }
+      ),
+      /* @__PURE__ */ jsx6(
+        NotificationBell,
+        {
+          count: notificationCount,
+          onClick: onNotificationClick,
+          items: notifications,
+          onMarkRead,
+          onMarkAllRead,
+          onItemClick: onNotificationItemClick
+        }
+      ),
+      /* @__PURE__ */ jsx6(AppSwitcher, { currentAppId: appId, authorizedApps }),
+      /* @__PURE__ */ jsx6(UserMenu, { user, onLogout, color: currentApp?.color })
     ] })
   ] });
 }
 export {
+  LocaleSwitcher,
   ShellHeader,
   appCatalog,
   getAppUrl

package/package.json

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