npm - @campfire-interactive/shell-header - Versions diffs - 0.3.3 → 0.5.1 - Mend

@campfire-interactive/shell-header 0.3.3 → 0.5.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,16 @@ interface ShellUser {
     email: string;
     avatarUrl?: string;
 }
+/**
+ * One of the user's tenant memberships, surfaced in the user-menu tenant
+ * section. Hosts typically derive these from the JWT's `data.tenants[]`.
+ */
+interface TenantOption {
+    id: string;
+    name: string;
+    /** Human-readable role label ("owner", "admin", "member"). Optional. */
+    role?: string;
+}
 interface LocaleOption {
     /** BCP-47-ish language code, e.g. "en", "de". */
     code: string;
@@ -67,6 +77,24 @@ interface ShellHeaderProps {
     onNotificationItemClick?: (item: NotificationItem) => void;
     /** Called when logout is clicked */
     onLogout?: () => void;
+    /**
+     * The user's currently-active tenant. When provided, the user menu
+     * shows an "Acting as: <tenant>" row.
+     */
+    tenant?: TenantOption;
+    /**
+     * The user's full membership list. When length > 1, the tenant row
+     * expands into a switcher. Single-membership users see only the
+     * static "Acting as" row.
+     */
+    tenants?: ReadonlyArray<TenantOption>;
+    /**
+     * Called when the user picks a different tenant. Consumer is
+     * responsible for calling the auth client's switchTenant, replacing
+     * the stored token, and reloading the page so the rest of the UI
+     * picks up the new tenant context.
+     */
+    onTenantSwitch?: (tenantId: string) => void | Promise<void>;
     /**
      * Current user locale (e.g. "en", "de"). When provided alongside
      * `supportedLocales` and `onLocaleChange`, a locale dropdown renders
@@ -88,7 +116,7 @@ interface ShellHeaderProps {
     children?: React.ReactNode;
 }
-declare function ShellHeader({ appId, user, authorizedApps, notificationCount, onNotificationClick, notifications, onMarkRead, onMarkAllRead, onNotificationItemClick, onLogout, locale, supportedLocales, onLocaleChange, brandWidth, children, }: ShellHeaderProps): react_jsx_runtime.JSX.Element;
+declare function ShellHeader({ appId, user, authorizedApps, notificationCount, onNotificationClick, notifications, onMarkRead, onMarkAllRead, onNotificationItemClick, onLogout, locale, supportedLocales, onLocaleChange, tenant, tenants, onTenantSwitch, brandWidth, children, }: ShellHeaderProps): react_jsx_runtime.JSX.Element;
 interface LocaleSwitcherProps {
     currentLocale: string;

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.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");
+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-locale-row {\n  justify-content: flex-start;\n}\n.cfi-sh-locale-row-label {\n  flex: 1;\n  text-align: left;\n}\n.cfi-sh-locale-row-current {\n  color: var(--cfi-color-gray-500, #6b7280);\n  font-size: var(--cfi-font-size-xs, 0.75rem);\n  margin-right: var(--cfi-spacing-xs, 0.25rem);\n}\n.cfi-sh-locale-chevron {\n  transition: transform 150ms ease;\n  flex-shrink: 0;\n}\n.cfi-sh-locale-chevron-open {\n  transform: rotate(180deg);\n}\n.cfi-sh-locale-sublist {\n  border-top: 1px solid var(--cfi-color-gray-100, #f3f4f6);\n  background: var(--cfi-color-gray-50, #f9fafb);\n}\n.cfi-sh-locale-sub-item {\n  padding-left: calc(var(--cfi-spacing-md, 1rem) + var(--cfi-spacing-md, 1rem));\n  justify-content: space-between;\n}\n.cfi-sh-tenant-static {\n  cursor: default;\n  pointer-events: none;\n}\n.cfi-sh-tenant-check {\n  color: var(--cfi-color-violet-600, #7c3aed);\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 = [
@@ -64,7 +64,9 @@ import {
   GripHorizontal,
   Bell,
   LogOut,
-  Globe
+  Globe,
+  ChevronDown,
+  Check
 } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var iconMap = {
@@ -143,73 +145,9 @@ function AppSwitcher({ currentAppId, authorizedApps }) {
   ] });
 }
-// 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 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/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";
+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,
@@ -219,9 +157,9 @@ function NotificationBell({
   onItemClick
 }) {
   const hasDropdown = items !== void 0;
-  const [open, setOpen] = useState3(false);
-  const ref = useRef3(null);
-  useEffect3(() => {
+  const [open, setOpen] = useState2(false);
+  const ref = useRef2(null);
+  useEffect2(() => {
     function handleClickOutside(e) {
       if (ref.current && !ref.current.contains(e.target)) {
         setOpen(false);
@@ -230,7 +168,7 @@ function NotificationBell({
     if (open) document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [open]);
-  useEffect3(() => {
+  useEffect2(() => {
     function handleEsc(e) {
       if (e.key === "Escape") setOpen(false);
     }
@@ -250,8 +188,8 @@ function NotificationBell({
     setOpen(false);
   };
   const hasUnread = items?.some((i) => i.readAt === null) ?? false;
-  return /* @__PURE__ */ jsxs4("div", { className: "cfi-sh-notif", ref, children: [
-    /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs3("div", { className: "cfi-sh-notif", ref, children: [
+    /* @__PURE__ */ jsxs3(
       "button",
       {
         className: "cfi-sh-icon-btn",
@@ -260,15 +198,15 @@ function NotificationBell({
         "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 })
+          /* @__PURE__ */ jsx3(Bell, { size: 18 }),
+          count > 0 && /* @__PURE__ */ jsx3("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(
+    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",
@@ -278,18 +216,18 @@ function NotificationBell({
           }
         )
       ] }),
-      /* @__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(
+      /* @__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__ */ 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.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) })
             ] })
           ]
         },
@@ -313,23 +251,85 @@ function formatRelative(iso) {
 }
 // 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] = useState4(false);
-  const ref = useRef4(null);
-  useEffect4(() => {
+import { useState as useState3, useRef as useRef3, useEffect as useEffect3 } from "react";
+import { Fragment, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function UserMenu({
+  user,
+  onLogout,
+  color,
+  locale,
+  supportedLocales,
+  onLocaleChange,
+  tenant,
+  tenants,
+  onTenantSwitch
+}) {
+  const [open, setOpen] = useState3(false);
+  const [langExpanded, setLangExpanded] = useState3(false);
+  const [tenantExpanded, setTenantExpanded] = useState3(false);
+  const [updating, setUpdating] = useState3(false);
+  const ref = useRef3(null);
+  useEffect3(() => {
     function handleClickOutside(e) {
       if (ref.current && !ref.current.contains(e.target)) {
         setOpen(false);
+        setLangExpanded(false);
+        setTenantExpanded(false);
       }
     }
     if (open) document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [open]);
+  useEffect3(() => {
+    if (!open) {
+      setLangExpanded(false);
+      setTenantExpanded(false);
+    }
+  }, [open]);
   const initials = user.name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2);
-  return /* @__PURE__ */ jsxs5("div", { className: "cfi-sh-user-menu", ref, children: [
-    /* @__PURE__ */ jsx5(
+  const showLocale = locale !== void 0 && supportedLocales !== void 0 && supportedLocales.length > 0 && onLocaleChange !== void 0;
+  const currentLocale = showLocale ? supportedLocales.find((l) => l.code === locale) : void 0;
+  async function handleLocaleSelect(code) {
+    if (code === locale || !onLocaleChange) {
+      setLangExpanded(false);
+      return;
+    }
+    setUpdating(true);
+    try {
+      await onLocaleChange(code);
+    } finally {
+      setUpdating(false);
+      setLangExpanded(false);
+      setOpen(false);
+    }
+  }
+  const showTenant = tenant !== void 0;
+  const canSwitchTenant = showTenant && onTenantSwitch !== void 0 && Array.isArray(tenants) && tenants.length > 1;
+  async function handleTenantSelect(tenantId) {
+    if (!onTenantSwitch || tenantId === tenant?.id) {
+      setTenantExpanded(false);
+      return;
+    }
+    const target = tenants?.find((t) => t.id === tenantId);
+    const targetName = target?.name ?? "this tenant";
+    const confirmed = window.confirm(
+      `Switch to ${targetName}? Other open suite tabs will reload.`
+    );
+    if (!confirmed) {
+      setTenantExpanded(false);
+      return;
+    }
+    setUpdating(true);
+    try {
+      await onTenantSwitch(tenantId);
+    } finally {
+      setUpdating(false);
+      setTenantExpanded(false);
+      setOpen(false);
+    }
+  }
+  return /* @__PURE__ */ jsxs4("div", { className: "cfi-sh-user-menu", ref, children: [
+    /* @__PURE__ */ jsx4(
       "button",
       {
         className: "cfi-sh-avatar-btn",
@@ -337,16 +337,97 @@ function UserMenu({ user, onLogout, color }) {
         onClick: () => setOpen(!open),
         "aria-expanded": open,
         "aria-haspopup": "true",
-        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 })
+        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 })
       }
     ),
-    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 })
+    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 })
+      ] }),
+      showTenant && /* @__PURE__ */ jsxs4(Fragment, { children: [
+        /* @__PURE__ */ jsx4("div", { className: "cfi-sh-divider" }),
+        canSwitchTenant ? /* @__PURE__ */ jsxs4(
+          "button",
+          {
+            className: "cfi-sh-menu-item cfi-sh-locale-row",
+            onClick: () => setTenantExpanded(!tenantExpanded),
+            "aria-expanded": tenantExpanded,
+            disabled: updating,
+            children: [
+              /* @__PURE__ */ jsx4(Building2, { size: 14 }),
+              /* @__PURE__ */ jsx4("span", { className: "cfi-sh-locale-row-label", children: "Tenant" }),
+              /* @__PURE__ */ jsx4("span", { className: "cfi-sh-locale-row-current", children: tenant.name }),
+              /* @__PURE__ */ jsx4(
+                ChevronDown,
+                {
+                  size: 14,
+                  className: tenantExpanded ? "cfi-sh-locale-chevron cfi-sh-locale-chevron-open" : "cfi-sh-locale-chevron"
+                }
+              )
+            ]
+          }
+        ) : /* @__PURE__ */ jsxs4("div", { className: "cfi-sh-menu-item cfi-sh-tenant-static", children: [
+          /* @__PURE__ */ jsx4(Building2, { size: 14 }),
+          /* @__PURE__ */ jsx4("span", { className: "cfi-sh-locale-row-label", children: "Tenant" }),
+          /* @__PURE__ */ jsx4("span", { className: "cfi-sh-locale-row-current", children: tenant.name })
+        ] }),
+        canSwitchTenant && tenantExpanded && /* @__PURE__ */ jsx4("div", { className: "cfi-sh-locale-sublist", children: tenants.map((t) => {
+          const active = t.id === tenant.id;
+          return /* @__PURE__ */ jsxs4(
+            "button",
+            {
+              className: active ? "cfi-sh-menu-item cfi-sh-locale-sub-item cfi-sh-locale-item-active" : "cfi-sh-menu-item cfi-sh-locale-sub-item",
+              onClick: () => handleTenantSelect(t.id),
+              disabled: updating || active,
+              children: [
+                /* @__PURE__ */ jsx4("span", { className: "cfi-sh-locale-item-label", children: t.name }),
+                active ? /* @__PURE__ */ jsx4(Check, { size: 14, className: "cfi-sh-tenant-check" }) : t.role ? /* @__PURE__ */ jsx4("span", { className: "cfi-sh-locale-item-code", children: t.role }) : null
+              ]
+            },
+            t.id
+          );
+        }) })
       ] }),
-      /* @__PURE__ */ jsx5("div", { className: "cfi-sh-divider" }),
-      /* @__PURE__ */ jsxs5(
+      showLocale && /* @__PURE__ */ jsxs4(Fragment, { children: [
+        /* @__PURE__ */ jsx4("div", { className: "cfi-sh-divider" }),
+        /* @__PURE__ */ jsxs4(
+          "button",
+          {
+            className: "cfi-sh-menu-item cfi-sh-locale-row",
+            onClick: () => setLangExpanded(!langExpanded),
+            "aria-expanded": langExpanded,
+            disabled: updating,
+            children: [
+              /* @__PURE__ */ jsx4(Globe, { size: 14 }),
+              /* @__PURE__ */ jsx4("span", { className: "cfi-sh-locale-row-label", children: "Language" }),
+              /* @__PURE__ */ jsx4("span", { className: "cfi-sh-locale-row-current", children: currentLocale?.label ?? locale }),
+              /* @__PURE__ */ jsx4(
+                ChevronDown,
+                {
+                  size: 14,
+                  className: langExpanded ? "cfi-sh-locale-chevron cfi-sh-locale-chevron-open" : "cfi-sh-locale-chevron"
+                }
+              )
+            ]
+          }
+        ),
+        langExpanded && /* @__PURE__ */ jsx4("div", { className: "cfi-sh-locale-sublist", children: supportedLocales.map((loc) => /* @__PURE__ */ jsxs4(
+          "button",
+          {
+            className: loc.code === locale ? "cfi-sh-menu-item cfi-sh-locale-sub-item cfi-sh-locale-item-active" : "cfi-sh-menu-item cfi-sh-locale-sub-item",
+            onClick: () => handleLocaleSelect(loc.code),
+            disabled: updating,
+            children: [
+              /* @__PURE__ */ jsx4("span", { className: "cfi-sh-locale-item-label", children: loc.label }),
+              /* @__PURE__ */ jsx4("span", { className: "cfi-sh-locale-item-code", children: loc.code.toUpperCase() })
+            ]
+          },
+          loc.code
+        )) })
+      ] }),
+      /* @__PURE__ */ jsx4("div", { className: "cfi-sh-divider" }),
+      /* @__PURE__ */ jsxs4(
         "button",
         {
           className: "cfi-sh-menu-item",
@@ -355,8 +436,8 @@ function UserMenu({ user, onLogout, color }) {
             onLogout?.();
           },
           children: [
-            /* @__PURE__ */ jsx5(LogOut, { size: 14 }),
-            /* @__PURE__ */ jsx5("span", { children: "Sign out" })
+            /* @__PURE__ */ jsx4(LogOut, { size: 14 }),
+            /* @__PURE__ */ jsx4("span", { children: "Sign out" })
           ]
         }
       )
@@ -365,7 +446,7 @@ function UserMenu({ user, onLogout, color }) {
 }
 // src/ShellHeader.tsx
-import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 function ShellHeader({
   appId,
   user,
@@ -380,30 +461,24 @@ function ShellHeader({
   locale,
   supportedLocales,
   onLocaleChange,
+  tenant,
+  tenants,
+  onTenantSwitch,
   brandWidth,
   children
 }) {
   const currentApp = appCatalog.find((a) => a.id === appId);
   const brandStyle = brandWidth ? { width: `${brandWidth}px`, flexShrink: 0, boxSizing: "border-box" } : void 0;
-  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 })
+  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 })
       ] }),
       children
     ] }),
-    /* @__PURE__ */ jsxs6("div", { className: "cfi-sh-right", children: [
-      showLocaleSwitcher && /* @__PURE__ */ jsx6(
-        LocaleSwitcher,
-        {
-          currentLocale: locale,
-          supportedLocales,
-          onLocaleChange
-        }
-      ),
-      /* @__PURE__ */ jsx6(
+    /* @__PURE__ */ jsxs5("div", { className: "cfi-sh-right", children: [
+      /* @__PURE__ */ jsx5(
         NotificationBell,
         {
           count: notificationCount,
@@ -414,11 +489,88 @@ function ShellHeader({
           onItemClick: onNotificationItemClick
         }
       ),
-      /* @__PURE__ */ jsx6(AppSwitcher, { currentAppId: appId, authorizedApps }),
-      /* @__PURE__ */ jsx6(UserMenu, { user, onLogout, color: currentApp?.color })
+      /* @__PURE__ */ jsx5(AppSwitcher, { currentAppId: appId, authorizedApps }),
+      /* @__PURE__ */ jsx5(
+        UserMenu,
+        {
+          user,
+          onLogout,
+          color: currentApp?.color,
+          locale,
+          supportedLocales,
+          onLocaleChange,
+          tenant,
+          tenants,
+          onTenantSwitch
+        }
+      )
     ] })
   ] });
 }
+// src/LocaleSwitcher.tsx
+import { useState as useState4, useRef as useRef4, useEffect as useEffect4 } from "react";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+function LocaleSwitcher({ currentLocale, supportedLocales, onLocaleChange }) {
+  const [open, setOpen] = useState4(false);
+  const [updating, setUpdating] = useState4(false);
+  const ref = useRef4(null);
+  useEffect4(() => {
+    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__ */ jsxs6("div", { className: "cfi-sh-locale-switcher", ref, children: [
+    /* @__PURE__ */ jsxs6(
+      "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__ */ jsx6(Globe, { size: 16 }),
+          /* @__PURE__ */ jsx6("span", { className: "cfi-sh-locale-label", children: buttonLabel })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsx6("div", { className: "cfi-sh-locale-dropdown", children: supportedLocales.map((loc) => /* @__PURE__ */ jsxs6(
+      "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__ */ jsx6("span", { className: "cfi-sh-locale-item-label", children: loc.label }),
+          /* @__PURE__ */ jsx6("span", { className: "cfi-sh-locale-item-code", children: loc.code.toUpperCase() })
+        ]
+      },
+      loc.code
+    )) })
+  ] });
+}
 export {
   LocaleSwitcher,
   ShellHeader,

package/package.json CHANGED Viewed

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