@camunda/camunda-composite-components 0.23.4 → 0.25.0

package/lib/esm/src/components/c3-navigation-v2/tools/c3-theme-selector.d.ts

@@ -0,0 +1,25 @@
+import type { FC } from 'react';
+import type { Theme } from '../../c3-user-configuration/c3-profile-provider/c3-profile-provider';
+export interface C3ThemeSelectorLabels {
+    /** Defaults to `'Theme'`. */
+    legend?: string;
+    /** Defaults to `'Light'`. */
+    light?: string;
+    /** Defaults to `'System'`. */
+    system?: string;
+    /** Defaults to `'Dark'`. */
+    dark?: string;
+}
+export interface C3ThemeSelectorProps {
+    currentTheme: Theme;
+    onChange: (theme: Theme) => void;
+    labels?: C3ThemeSelectorLabels;
+}
+/**
+ * Light / System / Dark radio group, matching the V1 user sidebar's
+ * built-in theme switcher. Consumers wire it into V2's
+ * `useCamundaTools.user.customSection` (or anywhere else) and pass
+ * their own state. SaaS consumers can read `theme` and
+ * `onThemeChange` from `useC3Profile()`; SM consumers pass local state.
+ */
+export declare const C3ThemeSelector: FC<C3ThemeSelectorProps>;

package/lib/esm/src/components/c3-navigation-v2/tools/c3-theme-selector.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
+ * under one or more contributor license agreements. Licensed under a commercial license.
+ * You may not use this file except in compliance with the commercial license.
+ */
+import { Layer, RadioButton, RadioButtonGroup } from '@carbon/react';
+/**
+ * Light / System / Dark radio group, matching the V1 user sidebar's
+ * built-in theme switcher. Consumers wire it into V2's
+ * `useCamundaTools.user.customSection` (or anywhere else) and pass
+ * their own state. SaaS consumers can read `theme` and
+ * `onThemeChange` from `useC3Profile()`; SM consumers pass local state.
+ */
+export const C3ThemeSelector = ({ currentTheme, onChange, labels, }) => (_jsx(Layer, { children: _jsx("div", { style: { padding: '0.5rem 1rem' }, children: _jsxs(RadioButtonGroup, { name: 'theme-radio-group', legendText: labels?.legend ?? 'Theme', orientation: 'vertical', valueSelected: currentTheme, onChange: (value) => onChange(value), children: [_jsx(RadioButton, { id: 'theme-light', labelText: labels?.light ?? 'Light', value: 'light' }), _jsx(RadioButton, { id: 'theme-system', labelText: labels?.system ?? 'System', value: 'system' }), _jsx(RadioButton, { id: 'theme-dark', labelText: labels?.dark ?? 'Dark', value: 'dark' })] }) }) }));

package/lib/esm/src/components/c3-navigation-v2/tools/c3-user-panel.d.ts

@@ -26,5 +26,20 @@ export interface C3UserPanelProps {
      * a built-in link (`terms`, `privacy`, `imprint`) replace the default.
      */
     elements?: UserPanelElement[];
+    /** Defaults to `'Account'`. */
+    title?: string | null;
+    labels?: C3UserPanelLabels;
+}
+export interface C3UserPanelLabels {
+    /** Defaults to `'Terms of use'`. */
+    termsOfUse?: string;
+    /** Defaults to `'Privacy policy'`. */
+    privacyPolicy?: string;
+    /** Defaults to `'Imprint'`. */
+    imprint?: string;
+    /** Defaults to `'Log out'`. */
+    logOut?: string;
+    /** Footer copyright. Defaults to `'© Camunda Services GmbH {year}'`. Receives the current year. */
+    copyright?: (year: number) => string;
 }
 export declare const C3UserPanel: FC<C3UserPanelProps>;

package/lib/esm/src/components/c3-navigation-v2/tools/c3-user-panel.js

@@ -4,11 +4,9 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * under one or more contributor license agreements. Licensed under a commercial license.
  * You may not use this file except in compliance with the commercial license.
  */
-import { Button, FormLabel, RadioButton, RadioButtonGroup, Stack, Toggle, } from '@carbon/react';
+import { Button, Toggle } from '@carbon/react';
 import { ArrowRight } from '@carbon/react/icons/index.esm.js';
 import styled from 'styled-components';
-import { useC3Profile, } from '../../c3-user-configuration/c3-profile-provider/c3-profile-provider.js';
-import { useC3UserConfiguration } from '../../c3-user-configuration/c3-user-configuration-provider.js';
 import { PanelHeader, PanelTitle } from './panel-primitives.js';
 const ProfileSection = styled.div `
   padding: var(--cds-spacing-05);
@@ -26,10 +24,6 @@ const ProfileEmail = styled.span `
   font-size: var(--cds-label-01-font-size);
   color: var(--cds-text-secondary);
 `;
-const ThemeSection = styled.div `
-  padding: var(--cds-spacing-05);
-  border-bottom: 1px solid var(--cds-border-subtle-01);
-`;
 const CustomSection = styled.div `
   border-bottom: 1px solid var(--cds-border-subtle-01);
 `;
@@ -95,31 +89,30 @@ const Copyright = styled.p `
   line-height: var(--cds-label-01-line-height);
   letter-spacing: var(--cds-label-01-letter-spacing);
 `;
-const LEGAL_LINKS = [
+const buildLegalLinks = (labels) => [
     {
         key: 'terms',
-        label: 'Terms of use',
+        label: labels?.termsOfUse ?? 'Terms of use',
         onClick: () => window.open('https://camunda.com/legal/terms/camunda-platform/camunda-platform-8-saas-trial/', '_blank'),
     },
     {
         key: 'privacy',
-        label: 'Privacy policy',
+        label: labels?.privacyPolicy ?? 'Privacy policy',
         onClick: () => window.open('https://camunda.com/legal/privacy/', '_blank'),
     },
     {
         key: 'imprint',
-        label: 'Imprint',
+        label: labels?.imprint ?? 'Imprint',
         onClick: () => window.open('https://camunda.com/legal/imprint/', '_blank'),
     },
 ];
-export const C3UserPanel = ({ name, email, version, onLogout, stageToggle, customSection, elements, }) => {
-    const { handleTheme } = useC3UserConfiguration();
-    const { theme, onThemeChange } = useC3Profile();
+export const C3UserPanel = ({ name, email, version, onLogout, stageToggle, customSection, elements, title = 'Account', labels, }) => {
     const consumerKeys = new Set((elements ?? []).map((e) => e.key));
-    const defaults = LEGAL_LINKS.filter((l) => !consumerKeys.has(l.key));
+    const defaults = buildLegalLinks(labels).filter((l) => !consumerKeys.has(l.key));
     const allElements = [...(elements ?? []), ...defaults];
-    return (_jsxs(_Fragment, { children: [_jsx(PanelHeader, { children: _jsx(PanelTitle, { children: "Account" }) }), (name || email) && (_jsxs(ProfileSection, { children: [name && _jsx(ProfileName, { children: name }), email && _jsx(ProfileEmail, { children: email })] })), customSection && _jsx(CustomSection, { children: customSection }), handleTheme && (_jsx(ThemeSection, { children: _jsxs(Stack, { gap: 3, children: [_jsx(FormLabel, { children: "Theme" }), _jsxs(RadioButtonGroup, { name: 'theme', valueSelected: theme, onChange: (value) => onThemeChange(value), orientation: 'vertical', children: [_jsx(RadioButton, { value: 'light', labelText: 'Light', id: 'theme-light' }), _jsx(RadioButton, { value: 'dark', labelText: 'Dark', id: 'theme-dark' }), _jsx(RadioButton, { value: 'system', labelText: 'System', id: 'theme-system' })] })] }) })), stageToggle && (_jsx("div", { style: {
+    return (_jsxs(_Fragment, { children: [title && (_jsx(PanelHeader, { children: _jsx(PanelTitle, { children: title }) })), (name || email) && (_jsxs(ProfileSection, { children: [name && _jsx(ProfileName, { children: name }), email && _jsx(ProfileEmail, { children: email })] })), customSection && _jsx(CustomSection, { children: customSection }), stageToggle && (_jsx("div", { style: {
                     padding: 'var(--cds-spacing-05)',
                     borderBottom: '1px solid var(--cds-border-subtle-01)',
-                }, children: _jsx(Toggle, { id: 'stage-toggle', labelText: 'Production features', toggled: stageToggle.prodFeaturesEnabled, onToggle: stageToggle.toggle, size: 'sm' }) })), allElements.length > 0 && (_jsx(ElementList, { children: allElements.map((element) => (_jsx(ElementItem, { children: _jsx(ElementButton, { type: 'button', onClick: element.onClick, children: element.label }) }, element.key))) })), _jsxs(BottomPinned, { children: [version && (_jsxs(VersionWrapper, { children: [_jsx(VersionText, { children: version }), _jsxs(Copyright, { children: ["\u00A9 Camunda Services GmbH ", new Date().getFullYear()] })] })), onLogout && (_jsx(BottomActions, { children: _jsx(Button, { kind: 'ghost', size: 'lg', onClick: onLogout, renderIcon: ArrowRight, children: "Log out" }) }))] })] }));
+                }, children: _jsx(Toggle, { id: 'stage-toggle', labelText: 'Production features', toggled: stageToggle.prodFeaturesEnabled, onToggle: stageToggle.toggle, size: 'sm' }) })), allElements.length > 0 && (_jsx(ElementList, { children: allElements.map((element) => (_jsx(ElementItem, { children: _jsx(ElementButton, { type: 'button', onClick: element.onClick, children: element.label }) }, element.key))) })), _jsxs(BottomPinned, { children: [version && (_jsxs(VersionWrapper, { children: [_jsx(VersionText, { children: version }), _jsx(Copyright, { children: labels?.copyright?.(new Date().getFullYear()) ??
+                                    `© Camunda Services GmbH ${new Date().getFullYear()}` })] })), onLogout && (_jsx(BottomActions, { children: _jsx(Button, { kind: 'ghost', size: 'lg', onClick: onLogout, renderIcon: ArrowRight, children: labels?.logOut ?? 'Log out' }) }))] })] }));
 };

package/lib/esm/src/components/c3-navigation-v2/use-c3-navigation-v2.d.ts

@@ -1,4 +1,4 @@
-import type { BreadcrumbAction, C3NavigationV2Props, GlobalActionButton, LinkComponent, LinkProps, ToolDescriptor } from './c3-navigation-v2.types';
+import type { BreadcrumbAction, C3NavigationV2Props, GlobalActionButton, LinkComponent, LinkProps, SidebarLabels, ToolDescriptor } from './c3-navigation-v2.types';
 type ActiveMatcher = boolean | string | ((activeItemKey: string) => boolean);
 export interface ItemDescriptor {
     type: 'item';
@@ -82,6 +82,8 @@ export interface UseC3NavigationV2Options {
     skipToContentLabel?: string;
     headerAriaLabel?: string;
     sidebarAriaLabel?: string;
+    /** Forwarded to `C3Sidebar` `labels`. */
+    sidebarLabels?: SidebarLabels;
     /** Used to resolve `isActive` on sidebar items and `isSelected` on breadcrumb dropdown items. */
     activeItemKey: string;
     sidebarChildren?: SidebarNodeDescriptor[];

package/lib/esm/src/components/c3-navigation-v2/use-c3-navigation-v2.js

@@ -30,7 +30,7 @@ function collectDefaultExpanded(nodes, out) {
  * descriptors (isActive, label functions) into concrete props.
  */
 export function useC3NavigationV2(options) {
-    const { app, skipToContentTargetId, skipToContentLabel, headerAriaLabel, sidebarAriaLabel = 'Main navigation', activeItemKey, sidebarChildren = [], breadcrumbs = [], tools, globalActions, sidebarExpandedWidth, sidebarCollapsedWidth, defaultSidebarExpanded = true, onSidebarToggle, linkComponent, headerTrailingContent, } = options;
+    const { app, skipToContentTargetId, skipToContentLabel, headerAriaLabel, sidebarAriaLabel = 'Main navigation', sidebarLabels, activeItemKey, sidebarChildren = [], breadcrumbs = [], tools, globalActions, sidebarExpandedWidth, sidebarCollapsedWidth, defaultSidebarExpanded = true, onSidebarToggle, linkComponent, headerTrailingContent, } = options;
     const [isSidebarExpanded, setIsSidebarExpanded] = useState(defaultSidebarExpanded);
     const setSidebarExpanded = useCallback((expanded) => {
         setIsSidebarExpanded(expanded);
@@ -173,6 +173,7 @@ export function useC3NavigationV2(options) {
             expandedWidth: sidebarExpandedWidth,
             collapsedWidth: sidebarCollapsedWidth,
             linkComponent,
+            labels: sidebarLabels,
         }
         : undefined;
     const navProps = useMemo(() => ({

package/lib/esm/src/components/c3-navigation-v2/use-camunda-tools.d.ts

@@ -2,10 +2,15 @@ import { type FC, type ReactNode } from 'react';
 import type { Notification } from '../../api/notifications';
 import type { ToolDescriptor } from './c3-navigation-v2.types';
 import { type InfoPanelElement } from './tools/c3-info-panel';
+import { type C3NotificationsPanelLabels } from './tools/c3-notifications-panel';
 import { type C3UserPanelProps } from './tools/c3-user-panel';
 export interface NotificationsToolOptions {
     onLinkClick?: (meta: Notification['meta']) => void;
     ariaLabel?: string;
+    /** Forwarded to `C3NotificationsPanel`. */
+    title?: string | null;
+    /** Forwarded to `C3NotificationsPanel`. */
+    labels?: C3NotificationsPanelLabels;
 }
 export type UserToolOptions = C3UserPanelProps & {
     ariaLabel?: string;
@@ -16,7 +21,8 @@ export interface HelpToolOptions {
 }
 export interface InfoToolOptions {
     elements: InfoPanelElement[];
-    title?: string;
+    /** Forwarded to `C3InfoPanel`. */
+    title?: string | null;
     ariaLabel?: string;
 }
 export interface UseCamundaToolsOptions {

package/lib/esm/src/components/c3-navigation-v2/use-camunda-tools.js

@@ -5,13 +5,13 @@ import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
  * You may not use this file except in compliance with the commercial license.
  */
 import { HeaderGlobalAction as HeaderGlobalActionBase } from '@carbon/react';
-import { Help as HelpIcon, Information, Notification as NotificationIcon, UserAvatar, } from '@carbon/react/icons/index.esm.js';
+import { Help as HelpIcon, Notification as NotificationIcon, UserAvatar, } from '@carbon/react/icons/index.esm.js';
 import { useContext, useMemo } from 'react';
 import { C3NotificationsUnreadIcon } from '../../assets/c3-icons.js';
 import { useC3HelpCenter } from '../c3-help-center/c3-help-center-provider.js';
 import C3NotificationProvider, { C3NotificationContext, } from '../c3-navigation/c3-notification-provider/c3-notification-provider.js';
 import { C3InfoPanel } from './tools/c3-info-panel.js';
-import { C3NotificationsPanel } from './tools/c3-notifications-panel.js';
+import { C3NotificationsPanel, } from './tools/c3-notifications-panel.js';
 import { C3UserPanel } from './tools/c3-user-panel.js';
 /**
  * Carbon's `HeaderGlobalAction` is typed as `React.FC` and omits both `ref`
@@ -45,7 +45,7 @@ export const useCamundaTools = (options) => {
                     const hasUnread = !isFetching && notifications.some((n) => n.state === 'new');
                     return (_jsx(HeaderGlobalAction, { "aria-label": label, onClick: onClick, isActive: isActive, tooltipAlignment: 'center', leaveDelayMs: 100, children: hasUnread ? (_jsx(C3NotificationsUnreadIcon, { size: 20 })) : (_jsx(NotificationIcon, { size: 20 })) }));
                 },
-                panel: (_jsx(C3NotificationsPanel, { onLinkClick: notifOptions.onLinkClick })),
+                panel: (_jsx(C3NotificationsPanel, { onLinkClick: notifOptions.onLinkClick, title: notifOptions.title, labels: notifOptions.labels })),
             });
         }
         if (options.info !== undefined) {
@@ -54,7 +54,7 @@ export const useCamundaTools = (options) => {
             result.push({
                 key: 'info',
                 label,
-                renderButton: ({ onClick, isActive }) => (_jsx(HeaderGlobalAction, { "aria-label": label, onClick: onClick, isActive: isActive, tooltipAlignment: 'center', leaveDelayMs: 100, children: _jsx(Information, { size: 20 }) })),
+                renderButton: ({ onClick, isActive }) => (_jsx(HeaderGlobalAction, { "aria-label": label, onClick: onClick, isActive: isActive, tooltipAlignment: 'center', leaveDelayMs: 100, children: _jsx(HelpIcon, { size: 20 }) })),
                 panel: (_jsx(C3InfoPanel, { elements: elements, title: title })),
             });
         }

package/lib/esm/src/components/c3-navigation-v2/use-cluster-webapp-breadcrumbs.d.ts

@@ -4,29 +4,33 @@ export interface UseClusterWebappBreadcrumbsOptions {
     /** The app currently being viewed. */
     currentApp: CamundaApp;
     /**
-     * Optional resolver to convert an endpoint URL into linkProps.
-     * Defaults to `(url) => ({ href: url })`. Override to support
-     * client-side routing (e.g. returning `{ to: path }` for internal links).
+     * Per-app URL map matching the shape of `Cluster['endpoints']`. Source for
+     * the modeler back-links on the org/cluster crumb labels, and the sole
+     * source for the app-switcher dropdown when no SaaS cluster is available.
      */
-    resolveLinkProps?: (url: string, app: string) => {
-        href?: string;
-        to?: string;
-        [key: string]: unknown;
-    };
+    webappLinks?: Partial<Record<CamundaApp, string>>;
 }
 /**
  * Builds the standard breadcrumb chain for a cluster-scoped Camunda webapp:
  *
- *   [Org] > [Cluster] > [App ▾]
+ *   [Org ▾] > [Cluster ▾] > [App ▾]
  *
- * - **Org crumb**: shown when org data is available (SaaS). Links back to
- *   web modeler at the org level.
- * - **Cluster crumb**: shown when cluster data is available. Links back to
- *   web modeler / console at the cluster level.
- * - **App crumb**: always shown. Includes a dropdown to switch between
- *   sibling apps on the same cluster (filtered to apps with endpoints).
+ * - **Org crumb**: shown when org data is available (SaaS). Label links back
+ *   to web modeler for the current org. Dropdown switches orgs and lands on
+ *   web modeler scoped to the selected org. Dropdown only renders when there
+ *   is at least one sibling org and the current cluster exposes a modeler
+ *   endpoint to derive sibling URLs from.
+ * - **Cluster crumb**: shown when cluster data is available. Label links back
+ *   to web modeler / console at the cluster level. Dropdown switches clusters
+ *   while staying on `currentApp`, filtered to clusters that expose an
+ *   endpoint for that app (alias-aware via `getEndpointForApp`).
+ * - **App crumb**: always shown. Dropdown switches between sibling apps on
+ *   the same cluster (filtered to apps with endpoints).
  *
- * Crumbs are omitted when the underlying data is unavailable, so the same
+ * Each dropdown follows the breadcrumb convention: clicking the label
+ * navigates, clicking the chevron opens the dropdown. Items are listed in
+ * source order with the current entry marked `isSelected`. Crumbs and
+ * dropdowns are omitted when the underlying data is unavailable, so the same
  * hook works for both SaaS (full chain) and Self-Managed (partial or single
  * crumb) without any environment flag.
  */

package/lib/esm/src/components/c3-navigation-v2/use-cluster-webapp-breadcrumbs.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 /*
  * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
  * under one or more contributor license agreements. Licensed under a commercial license.
@@ -5,7 +6,8 @@
  */
 import { Building, CloudApp } from '@carbon/react/icons/index.esm.js';
 import { useMemo } from 'react';
-import { APP_ICONS, getReadableAppName } from '../../utils/camunda.js';
+import { APP_ICONS, getEndpointForApp, getReadableAppName, isAdminApp, resolveAdminAppName, } from '../../utils/camunda.js';
+import { C3ClusterTag } from '../c3-cluster-tag/c3-cluster-tag.js';
 import { useC3Profile } from '../c3-user-configuration/c3-profile-provider/c3-profile-provider.js';
 import { useC3UserConfiguration } from '../c3-user-configuration/c3-user-configuration-provider.js';
 /**
@@ -20,77 +22,195 @@ const SWITCHABLE_APPS = [
     'optimize',
     'admin',
 ];
+/** Healthy on the cluster, using zeebe as the admin/identity health proxy. */
+function isAppHealthyOnCluster(cluster, app) {
+    const healthKey = isAdminApp(app) ? 'zeebe' : app;
+    return cluster.status?.[healthKey] === 'Healthy';
+}
+/**
+ * Replaces the path of `modelerEndpoint` with `/org/{orgId}`. Used to derive
+ * the modeler URL for sibling orgs from the current cluster's modeler
+ * endpoint. Assumes all modeler URLs share the same host across orgs (SaaS
+ * pattern).
+ */
+function buildModelerOrgUrl(modelerEndpoint, orgId) {
+    try {
+        const url = new URL(modelerEndpoint);
+        url.pathname = `/org/${orgId}`;
+        url.search = '';
+        return url.toString();
+    }
+    catch {
+        return undefined;
+    }
+}
 /**
  * Builds the standard breadcrumb chain for a cluster-scoped Camunda webapp:
  *
- *   [Org] > [Cluster] > [App ▾]
+ *   [Org ▾] > [Cluster ▾] > [App ▾]
  *
- * - **Org crumb**: shown when org data is available (SaaS). Links back to
- *   web modeler at the org level.
- * - **Cluster crumb**: shown when cluster data is available. Links back to
- *   web modeler / console at the cluster level.
- * - **App crumb**: always shown. Includes a dropdown to switch between
- *   sibling apps on the same cluster (filtered to apps with endpoints).
+ * - **Org crumb**: shown when org data is available (SaaS). Label links back
+ *   to web modeler for the current org. Dropdown switches orgs and lands on
+ *   web modeler scoped to the selected org. Dropdown only renders when there
+ *   is at least one sibling org and the current cluster exposes a modeler
+ *   endpoint to derive sibling URLs from.
+ * - **Cluster crumb**: shown when cluster data is available. Label links back
+ *   to web modeler / console at the cluster level. Dropdown switches clusters
+ *   while staying on `currentApp`, filtered to clusters that expose an
+ *   endpoint for that app (alias-aware via `getEndpointForApp`).
+ * - **App crumb**: always shown. Dropdown switches between sibling apps on
+ *   the same cluster (filtered to apps with endpoints).
  *
- * Crumbs are omitted when the underlying data is unavailable, so the same
+ * Each dropdown follows the breadcrumb convention: clicking the label
+ * navigates, clicking the chevron opens the dropdown. Items are listed in
+ * source order with the current entry marked `isSelected`. Crumbs and
+ * dropdowns are omitted when the underlying data is unavailable, so the same
  * hook works for both SaaS (full chain) and Self-Managed (partial or single
  * crumb) without any environment flag.
  */
 export function useClusterWebappBreadcrumbs(options) {
-    const { currentApp, resolveLinkProps = (url) => ({ href: url }) } = options;
-    const { clusters, activeOrg } = useC3Profile();
+    const { currentApp, webappLinks } = options;
+    const { clusters, activeOrg, orgs } = useC3Profile();
     const config = useC3UserConfiguration();
     const currentClusterUuid = config.currentClusterUuid;
     const currentCluster = useMemo(() => clusters?.find((c) => c.uuid === currentClusterUuid) ?? null, [clusters, currentClusterUuid]);
     return useMemo(() => {
         const crumbs = [];
+        const modelerUrl = webappLinks?.modeler ?? currentCluster?.endpoints?.modeler;
         // ── Org crumb ──────────────────────────────────────────────────────────
         if (activeOrg) {
-            const modelerUrl = currentCluster?.endpoints?.modeler;
+            const allOrgs = orgs ?? [];
+            const hasSiblings = allOrgs.filter((o) => o.uuid !== activeOrg.uuid).length > 0;
+            const orgDropdownItems = hasSiblings && modelerUrl
+                ? allOrgs.flatMap((o) => {
+                    const isCurrent = o.uuid === activeOrg.uuid;
+                    if (isCurrent) {
+                        return [
+                            {
+                                key: o.uuid,
+                                label: o.name,
+                                icon: Building,
+                                isSelected: true,
+                            },
+                        ];
+                    }
+                    const href = buildModelerOrgUrl(modelerUrl, o.uuid);
+                    if (!href)
+                        return [];
+                    return [
+                        {
+                            key: o.uuid,
+                            label: o.name,
+                            icon: Building,
+                            isSelected: false,
+                            linkProps: { href },
+                        },
+                    ];
+                })
+                : undefined;
             crumbs.push({
                 key: 'org',
                 label: activeOrg.name,
                 icon: Building,
-                ...(modelerUrl
-                    ? { linkProps: resolveLinkProps(modelerUrl, 'org') }
+                ...(modelerUrl ? { linkProps: { href: modelerUrl } } : {}),
+                ...(orgDropdownItems
+                    ? {
+                        dropdownTitle: 'Switch organization',
+                        dropdownAriaLabel: 'Switch organization',
+                        dropdownItems: orgDropdownItems,
+                    }
                     : {}),
             });
         }
         // ── Cluster crumb ──────────────────────────────────────────────────────
         if (currentCluster) {
-            const modelerUrl = currentCluster.endpoints?.modeler;
             const clusterUrl = modelerUrl
                 ? `${modelerUrl}?fromCluster=${currentCluster.uuid}`
                 : undefined;
+            const reachableClusters = (clusters ?? []).filter((c) => c.uuid === currentCluster.uuid ||
+                (getEndpointForApp(currentApp, c.endpoints) &&
+                    isAppHealthyOnCluster(c, currentApp)));
+            const hasSiblings = reachableClusters.filter((c) => c.uuid !== currentCluster.uuid).length >
+                0;
+            const clusterDropdownItems = hasSiblings
+                ? reachableClusters.map((c) => {
+                    const isCurrent = c.uuid === currentCluster.uuid;
+                    const stage = c.labels?.camunda?.[0];
+                    return {
+                        key: c.uuid,
+                        label: c.name,
+                        icon: CloudApp,
+                        isSelected: isCurrent,
+                        ...(isCurrent
+                            ? {}
+                            : {
+                                linkProps: {
+                                    href: getEndpointForApp(currentApp, c.endpoints) ?? '',
+                                },
+                            }),
+                        ...(stage
+                            ? { trailingElement: _jsx(C3ClusterTag, { stage: stage, subtle: true }) }
+                            : {}),
+                    };
+                })
+                : undefined;
             crumbs.push({
                 key: 'cluster',
                 label: currentCluster.name,
                 icon: CloudApp,
-                ...(clusterUrl
-                    ? { linkProps: resolveLinkProps(clusterUrl, 'cluster') }
+                ...(clusterUrl ? { linkProps: { href: clusterUrl } } : {}),
+                ...(clusterDropdownItems
+                    ? {
+                        dropdownTitle: 'Switch cluster',
+                        dropdownAriaLabel: 'Switch cluster',
+                        dropdownItems: clusterDropdownItems,
+                    }
                     : {}),
             });
         }
         // ── App crumb ──────────────────────────────────────────────────────────
-        const appLabel = getReadableAppName(currentApp);
-        const appIcon = APP_ICONS[currentApp];
-        const siblingApps = SWITCHABLE_APPS.filter((app) => app !== currentApp && currentCluster?.endpoints?.[app]);
-        const dropdownItems = siblingApps.length > 0
-            ? [
-                {
-                    key: currentApp,
-                    label: appLabel,
-                    icon: appIcon,
-                    isSelected: true,
-                },
-                ...siblingApps.map((app) => ({
+        // Resolve label/icon via the same admin↔identity aliasing the sidebar
+        // entries use (`useClusterSidebarEntries`), so older clusters that expose
+        // only `identity` render as "Identity" instead of disappearing.
+        // `SWITCHABLE_APPS` carries only the canonical `admin` key; consumers
+        // that pass `currentApp: 'identity'` (legacy code path) still match the
+        // switcher row via this normalisation, otherwise the current entry
+        // would be missing from the dropdown and nothing would be selected.
+        const switcherKey = isAdminApp(currentApp)
+            ? 'admin'
+            : currentApp;
+        const resolvedCurrentApp = isAdminApp(currentApp) && currentCluster
+            ? resolveAdminAppName(currentCluster)
+            : currentApp;
+        const appLabel = getReadableAppName(resolvedCurrentApp);
+        const appIcon = APP_ICONS[resolvedCurrentApp];
+        const sourceEndpoints = currentCluster?.endpoints ?? webappLinks;
+        const reachableApps = sourceEndpoints
+            ? SWITCHABLE_APPS.filter((app) => app === switcherKey ||
+                (getEndpointForApp(app, sourceEndpoints) &&
+                    (!currentCluster || isAppHealthyOnCluster(currentCluster, app))))
+            : [switcherKey];
+        const hasSiblingApps = reachableApps.filter((app) => app !== switcherKey).length > 0;
+        const dropdownItems = hasSiblingApps && sourceEndpoints
+            ? reachableApps.map((app) => {
+                const isCurrent = app === switcherKey;
+                const resolvedApp = isAdminApp(app) && currentCluster
+                    ? resolveAdminAppName(currentCluster)
+                    : app;
+                return {
                     key: app,
-                    label: getReadableAppName(app),
-                    icon: APP_ICONS[app],
-                    isSelected: false,
-                    linkProps: resolveLinkProps(currentCluster?.endpoints[app] ?? '', app),
-                })),
-            ]
+                    label: getReadableAppName(resolvedApp),
+                    icon: APP_ICONS[resolvedApp],
+                    isSelected: isCurrent,
+                    ...(isCurrent
+                        ? {}
+                        : {
+                            linkProps: {
+                                href: getEndpointForApp(app, sourceEndpoints) ?? '',
+                            },
+                        }),
+                };
+            })
             : undefined;
         crumbs.push({
             key: 'app',
@@ -105,5 +225,5 @@ export function useClusterWebappBreadcrumbs(options) {
                 : {}),
         });
         return crumbs;
-    }, [activeOrg, currentCluster, currentApp, resolveLinkProps]);
+    }, [activeOrg, orgs, clusters, currentCluster, currentApp, webappLinks]);
 }

package/lib/esm/src/components/c3-user-configuration/c3-profile-provider/c3-profile-provider.d.ts

@@ -22,5 +22,5 @@ export type C3ProfileContextValue = {
 export declare const C3ProfileContext: React.Context<C3ProfileContextValue>;
 export declare const C3ProfileProvider: ({ children }: {
     children: JSX.Element;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => JSX.Element;
 export declare const useC3Profile: () => C3ProfileContextValue;

package/lib/esm/src/contexts/c3-cluster-update-manager.d.ts

@@ -5,7 +5,7 @@ type C3ClusterUpdateManagerProps = {
     stage: Stage;
     userToken: string;
 };
-declare const C3ClusterUpdateManager: ({ children, stage, userToken, }: C3ClusterUpdateManagerProps) => import("react/jsx-runtime").JSX.Element;
+declare const C3ClusterUpdateManager: ({ children, stage, userToken, }: C3ClusterUpdateManagerProps) => React.JSX.Element;
 declare const useClusterUpdate: ({ onUpdate }: {
     onUpdate: (data: any) => void;
 }) => void;

package/lib/esm/src/index.d.ts

@@ -15,8 +15,8 @@ export { C3LicenseTag, type C3LicenseTagProps, } from './components/c3-license-t
 export { default as C3Navigation } from './components/c3-navigation';
 export { C3NavigationAppProps, C3NavigationElementProps, C3NavigationNavBarElement, C3NavigationNavBarProps, C3NavigationNavBarSubElement, C3NavigationProps, } from './components/c3-navigation/c3-navigation.types';
 export { C3NavigationSideBarBaseProps } from './components/c3-navigation/c3-navigation-sidebar/c3-navigation-sidebar.types';
-export type { AppProps as C3NavV2AppProps, BreadcrumbDescriptor, BreadcrumbDropdownItem, BreadcrumbSegment, C3NavigationV2Props, C3NotificationsPanelProps, C3UserPanelProps, GlobalActionButton, GroupDescriptor, GroupItemDescriptor, HelpToolOptions, ItemDescriptor, LinkComponent, LinkProps, NotificationsToolOptions, SectionDescriptor, SidebarGroup, SidebarGroupItem, SidebarItem, SidebarNode, SidebarNodeDescriptor, SidebarProps, SidebarSection, ToolDescriptor, UseC3NavigationV2Options, UseC3NavigationV2Return, UseCamundaToolsOptions, UseClusterSidebarEntriesOptions, UserToolOptions, } from './components/c3-navigation-v2';
-export { C3BreadcrumbBar as preview_C3BreadcrumbBar, C3NavigationV2 as preview_C3NavigationV2, C3NotificationsPanel as preview_C3NotificationsPanel, C3Sidebar as preview_C3Sidebar, C3ToolsArea as preview_C3ToolsArea, C3UserPanel as preview_C3UserPanel, useC3NavigationV2 as preview_useC3NavigationV2, useCamundaTools as preview_useCamundaTools, useClusterSidebarEntries as preview_useClusterSidebarEntries, useClusterWebappBreadcrumbs as preview_useClusterWebappBreadcrumbs, } from './components/c3-navigation-v2';
+export type { AppProps as C3NavV2AppProps, BreadcrumbDescriptor, BreadcrumbDropdownItem, BreadcrumbSegment, C3NavigationV2Props, C3NotificationsPanelLabels, C3NotificationsPanelProps, C3ThemeSelectorLabels, C3ThemeSelectorProps, C3UserPanelLabels, C3UserPanelProps, GlobalActionButton, GroupDescriptor, GroupItemDescriptor, HelpToolOptions, ItemDescriptor, LinkComponent, LinkProps, NotificationsToolOptions, SectionDescriptor, SidebarGroup, SidebarGroupItem, SidebarItem, SidebarLabels, SidebarNode, SidebarNodeDescriptor, SidebarProps, SidebarSection, ToolDescriptor, UseC3NavigationV2Options, UseC3NavigationV2Return, UseCamundaToolsOptions, UseClusterSidebarEntriesOptions, UserToolOptions, } from './components/c3-navigation-v2';
+export { C3BreadcrumbBar as preview_C3BreadcrumbBar, C3NavigationV2 as preview_C3NavigationV2, C3NotificationsPanel as preview_C3NotificationsPanel, C3Sidebar as preview_C3Sidebar, C3ThemeSelector, C3ToolsArea as preview_C3ToolsArea, C3UserPanel as preview_C3UserPanel, useC3NavigationV2 as preview_useC3NavigationV2, useCamundaTools as preview_useCamundaTools, useClusterSidebarEntries as preview_useClusterSidebarEntries, useClusterWebappBreadcrumbs as preview_useClusterWebappBreadcrumbs, } from './components/c3-navigation-v2';
 export { C3BreadcrumbProps } from './components/c3-page/c3-breadcrumb/c3-breadcrumb.types';
 export { C3Page } from './components/c3-page/c3-page';
 export { C3PageProps } from './components/c3-page/c3-page.types';

package/lib/esm/src/index.js

@@ -13,7 +13,7 @@ export { C3HelpCenter } from './components/c3-help-center/c3-help-center.js';
 export { useC3HelpCenter } from './components/c3-help-center/c3-help-center-provider.js';
 export { C3LicenseTag, } from './components/c3-license-tag/index.js';
 export { default as C3Navigation } from './components/c3-navigation/index.js';
-export { C3BreadcrumbBar as preview_C3BreadcrumbBar, C3NavigationV2 as preview_C3NavigationV2, C3NotificationsPanel as preview_C3NotificationsPanel, C3Sidebar as preview_C3Sidebar, C3ToolsArea as preview_C3ToolsArea, C3UserPanel as preview_C3UserPanel, useC3NavigationV2 as preview_useC3NavigationV2, useCamundaTools as preview_useCamundaTools, useClusterSidebarEntries as preview_useClusterSidebarEntries, useClusterWebappBreadcrumbs as preview_useClusterWebappBreadcrumbs, } from './components/c3-navigation-v2/index.js';
+export { C3BreadcrumbBar as preview_C3BreadcrumbBar, C3NavigationV2 as preview_C3NavigationV2, C3NotificationsPanel as preview_C3NotificationsPanel, C3Sidebar as preview_C3Sidebar, C3ThemeSelector, C3ToolsArea as preview_C3ToolsArea, C3UserPanel as preview_C3UserPanel, useC3NavigationV2 as preview_useC3NavigationV2, useCamundaTools as preview_useCamundaTools, useClusterSidebarEntries as preview_useClusterSidebarEntries, useClusterWebappBreadcrumbs as preview_useClusterWebappBreadcrumbs, } from './components/c3-navigation-v2/index.js';
 export { C3Page } from './components/c3-page/c3-page.js';
 export { C3ResponsiveStack } from './components/c3-responsive-stack/c3-responsive-stack.js';
 export { useC3Profile } from './components/c3-user-configuration/c3-profile-provider/c3-profile-provider.js';

package/lib/esm/src/utils/camunda.d.ts

@@ -25,7 +25,7 @@ export declare const getReadableAppName: (appName: CamundaApp) => string;
 /**
  * Gets the endpoint URL for an app, handling identity/admin aliasing.
  */
-export declare const getEndpointForApp: (app: CamundaApp, endpoints: Cluster["endpoints"]) => string | undefined;
+export declare const getEndpointForApp: (app: CamundaApp, endpoints: Partial<Cluster["endpoints"]>) => string | undefined;
 /**
  * Checks if user has read permission for an app, handling identity/admin aliasing.
  */