@camunda/camunda-composite-components 0.23.1 → 0.23.3

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

@@ -5,7 +5,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * You may not use this file except in compliance with the commercial license.
  */
 import { Button } from '@carbon/react';
-import { useContext, useEffect } from 'react';
+import { useContext, useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { C3BellIcon } from '../../../assets/c3-icons.js';
 import C3NotificationContainer, { NotificationDescription, NotificationTitle, } from '../../c3-navigation/c3-notification-provider/c3-notification-container.js';
@@ -18,26 +18,28 @@ const DismissAllButton = styled(Button) `
   letter-spacing: var(--cds-helper-text-01-letter-spacing);
 `;
 const EmptyState = styled.div `
-  padding: 16px;
+  padding: var(--cds-spacing-05);
 `;
 const EmptyStateTitle = styled(NotificationTitle) `
-  margin-top: 24px;
+  margin-top: var(--cds-spacing-06);
 `;
 const EmptyStateDescription = styled(NotificationDescription) `
   color: var(--cds-text-secondary);
-  margin-top: 8px;
+  margin-top: var(--cds-spacing-03);
 `;
 const sortDescending = (a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime();
 export const C3NotificationsPanel = ({ onLinkClick, }) => {
-    const { notifications, markAllAsRead, dismiss, dismissAll } = useContext(C3NotificationContext);
-    // C3NotificationContainer ignores its onRead prop; read-state is driven by
-    // panel open/close instead. Since the panel only mounts while its tool is
-    // active, one mount-time pass is enough.
+    const { enabled, notifications, markAllAsRead, dismiss, dismissAll, analytics, } = useContext(C3NotificationContext);
+    // Snapshot uuids that were unread when the panel opened so "new" dots
+    // persist until the panel closes, even after mark-as-read runs.
+    const [unreadAtOpen] = useState(() => new Set(notifications.filter((n) => n.state === 'new').map((n) => n.uuid)));
     // biome-ignore lint/correctness/useExhaustiveDependencies: intentional mount-only
     useEffect(() => {
         const unread = notifications.filter((n) => n.state === 'new');
         if (unread.length)
             markAllAsRead(unread);
+        if (enabled)
+            analytics('notification-panel-opened');
     }, []);
     return (_jsxs(_Fragment, { children: [_jsxs(PanelHeader, { style: {
                     width: '100%',
@@ -46,7 +48,10 @@ export const C3NotificationsPanel = ({ onLinkClick, }) => {
                     flexDirection: 'row',
                     justifyContent: 'space-between',
                     alignItems: 'center',
-                }, children: [_jsx(PanelTitle, { children: "Notifications" }), notifications.length > 0 && (_jsx(DismissAllButton, { kind: 'ghost', size: 'sm', onClick: () => dismissAll(notifications), children: "Dismiss all" }))] }), notifications.length > 0 ? ([...notifications]
-                .sort(sortDescending)
-                .map((notification) => (_jsx(C3NotificationContainer, { onRead: () => undefined, onDismiss: () => dismiss(notification), originalOnLinkClick: onLinkClick, onLinkClick: () => onLinkClick?.(notification.meta), unread: false, ...notification }, notification.uuid)))) : (_jsxs(EmptyState, { children: [_jsx(C3BellIcon, { size: 56 }), _jsx(EmptyStateTitle, { children: "No notifications" }), _jsx(EmptyStateDescription, { children: "New updates regarding your processes, clusters and more will appear here." })] }))] }));
+                }, children: [_jsx(PanelTitle, { children: "Notifications" }), notifications.length > 0 && (_jsx(DismissAllButton, { kind: 'ghost', size: 'sm', onClick: () => dismissAll(notifications), children: "Dismiss all" }))] }), notifications.length > 0 ? ([...notifications].sort(sortDescending).map((notification) => (_jsx(C3NotificationContainer, { onRead: () => undefined, onDismiss: () => dismiss(notification), originalOnLinkClick: onLinkClick, onLinkClick: () => {
+                    if (enabled) {
+                        analytics('notification-clicked-cta', notification.meta?.identifier);
+                    }
+                    onLinkClick?.(notification.meta);
+                }, unread: unreadAtOpen.has(notification.uuid), ...notification }, notification.uuid)))) : (_jsxs(EmptyState, { children: [_jsx(C3BellIcon, { size: 56 }), _jsx(EmptyStateTitle, { children: "No notifications" }), _jsx(EmptyStateDescription, { children: "New updates regarding your processes, clusters and more will appear here." })] }))] }));
 };

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

@@ -11,11 +11,11 @@ import { useC3Profile, } from '../../c3-user-configuration/c3-profile-provider/c
 import { useC3UserConfiguration } from '../../c3-user-configuration/c3-user-configuration-provider.js';
 import { PanelHeader, PanelTitle } from './panel-primitives.js';
 const ProfileSection = styled.div `
-  padding: 1rem;
+  padding: var(--cds-spacing-05);
   display: flex;
   flex-direction: column;
-  gap: 2px;
-  border-bottom: 1px solid var(--cds-border-subtle);
+  gap: var(--cds-spacing-01);
+  border-bottom: 1px solid var(--cds-border-subtle-01);
 `;
 const ProfileName = styled.span `
   font-size: var(--cds-body-01-font-size);
@@ -27,21 +27,21 @@ const ProfileEmail = styled.span `
   color: var(--cds-text-secondary);
 `;
 const ThemeSection = styled.div `
-  padding: 1rem;
-  border-bottom: 1px solid var(--cds-border-subtle);
+  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);
+  border-bottom: 1px solid var(--cds-border-subtle-01);
 `;
 const ElementList = styled.ul `
   list-style: none;
   margin: 0;
-  padding: 0.5rem 0;
+  padding: var(--cds-spacing-03) 0;
 `;
 const ElementItem = styled.li ``;
 const ElementButton = styled.button `
   width: 100%;
-  padding: 0.625rem 1rem;
+  padding: 0.625rem var(--cds-spacing-05);
   background: transparent;
   border: none;
   cursor: pointer;
@@ -68,7 +68,7 @@ const BottomPinned = styled.div `
   flex-direction: column;
 `;
 const BottomActions = styled.div `
-  border-top: 1px solid var(--cds-border-subtle);
+  border-top: 1px solid var(--cds-border-subtle-01);
   display: flex;
   flex-direction: column;
 
@@ -79,7 +79,7 @@ const BottomActions = styled.div `
   }
 `;
 const VersionWrapper = styled.div `
-  padding: 0.5rem 1rem;
+  padding: var(--cds-spacing-03) var(--cds-spacing-05);
 `;
 const VersionText = styled.p `
   color: var(--cds-text-primary);
@@ -119,7 +119,7 @@ export const C3UserPanel = ({ name, email, version, onLogout, stageToggle, custo
     const defaults = LEGAL_LINKS.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: {
-                    padding: '1rem',
-                    borderBottom: '1px solid var(--cds-border-subtle)',
+                    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" }) }))] })] }));
 };

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

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const headerStyle = {
     background: 'var(--cds-layer-01)',
     boxShadow: 'inset 0 -1px 0 var(--cds-border-subtle-01)',
-    padding: '24px 16px 13px',
+    padding: 'var(--cds-spacing-06) var(--cds-spacing-05) 13px',
     flexShrink: 0,
 };
 const titleStyle = {

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

@@ -20,8 +20,8 @@ import { C3UserPanel } from './tools/c3-user-panel.js';
  * Must be called within a C3UserConfigurationProvider tree (SaaS).
  */
 export const useCamundaTools = (options) => {
-    const { notifications: notifCtx } = useContext(C3NotificationContext);
-    const hasUnread = notifCtx?.some((n) => n.state === 'new');
+    const { notifications, isFetching } = useContext(C3NotificationContext);
+    const hasUnread = !isFetching && notifications.some((n) => n.state === 'new');
     return useMemo(() => {
         const tools = [];
         if (options.notifications !== undefined) {

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

@@ -0,0 +1,58 @@
+import { type ReactNode } from 'react';
+import type { CamundaApp, Cluster } from '../../utils/camunda.types';
+import type { LinkProps } from './c3-navigation-v2.types';
+import type { GroupDescriptor, GroupItemDescriptor } from './use-c3-navigation-v2';
+type ActiveMatcher = boolean | string | ((activeItemKey: string) => boolean);
+export interface UseClusterSidebarEntriesOptions {
+    /**
+     * Hide apps the current user can't see. Receives the canonical app key
+     * from the iteration list (e.g. `'admin'`), never the resolved `identity`
+     * alias, so consumers don't have to branch on version.
+     */
+    isAppVisible?: (app: CamundaApp, cluster: Cluster) => boolean;
+    /**
+     * Resolves the parent cluster's click target. When it returns link props,
+     * the entry renders as a `group-item` (clickable + expandable). When
+     * omitted or returning `undefined`, it renders as a pure `group`.
+     */
+    resolveClusterLinkProps?: (cluster: Cluster) => LinkProps | undefined;
+    /**
+     * Active-state matcher for the cluster row. Mirrors the sidebar descriptor
+     * `isActive` shape (boolean, string, or `(activeItemKey) => boolean`).
+     * Ignored when the cluster renders as a pure group (no clickable target).
+     */
+    isClusterActive?: (cluster: Cluster) => ActiveMatcher | undefined;
+    /**
+     * Fallback link props for paused or unhealthy clusters, per app. Keyable by
+     * either the canonical iteration value (`'admin'`) or the resolved alias
+     * (`'identity'`); both are checked, alias first.
+     */
+    appTeaserRoutes?: Partial<Record<CamundaApp, LinkProps>>;
+    /**
+     * Consumer-provided labels, keyed by the display alias
+     * (`'admin'` or `'identity'` after version resolution). Fallback:
+     * `getReadableAppName(resolvedApp)`.
+     */
+    appLabels?: Partial<Record<CamundaApp, string>>;
+    /** Per-cluster trailing badge (stage tag, etc.). */
+    renderTrailingElement?: (cluster: Cluster) => ReactNode;
+    /** Override the app list. Default: operate, tasklist, optimize, admin. */
+    apps?: CamundaApp[];
+}
+/**
+ * Pure builder used by `useClusterSidebarEntries`. Kept as a separate
+ * function so stories and tests can drive it with synthetic data without
+ * mocking `useC3Profile`. Not exported from the package surface; consumers
+ * use the hook.
+ */
+declare function buildClusterSidebarEntries(clusters: Cluster[], { isAppVisible, resolveClusterLinkProps, isClusterActive, appTeaserRoutes, appLabels, renderTrailingElement, apps, }: UseClusterSidebarEntriesOptions): Array<GroupDescriptor | GroupItemDescriptor>;
+export { buildClusterSidebarEntries };
+/**
+ * Builds cluster sidebar entries for consumers that list clusters in their
+ * sidebar (web modeler, console). Reads clusters from `useC3Profile`, iterates
+ * each cluster's available webapps, respects the identity/admin alias per
+ * cluster version, filters invisible or missing entries, and returns the
+ * sibling nodes ready to drop into a `SidebarSection`. Returns `[]` when
+ * nothing is renderable.
+ */
+export declare function useClusterSidebarEntries(options?: UseClusterSidebarEntriesOptions): Array<GroupDescriptor | GroupItemDescriptor>;

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

@@ -0,0 +1,84 @@
+/*
+ * 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 { CloudApp } from '@carbon/react/icons/index.esm.js';
+import { useMemo } from 'react';
+import { APP_ICONS, getEndpointForApp, getReadableAppName, isAdminApp, resolveAdminAppName, } from '../../utils/camunda.js';
+import { useC3Profile } from '../c3-user-configuration/c3-profile-provider/c3-profile-provider.js';
+const DEFAULT_APPS = ['operate', 'tasklist', 'optimize', 'admin'];
+/**
+ * Pure builder used by `useClusterSidebarEntries`. Kept as a separate
+ * function so stories and tests can drive it with synthetic data without
+ * mocking `useC3Profile`. Not exported from the package surface; consumers
+ * use the hook.
+ */
+function buildClusterSidebarEntries(clusters, { isAppVisible, resolveClusterLinkProps, isClusterActive, appTeaserRoutes, appLabels, renderTrailingElement, apps = DEFAULT_APPS, }) {
+    return clusters.flatMap((cluster) => {
+        const children = apps.flatMap((app) => {
+            if (isAppVisible && !isAppVisible(app, cluster))
+                return [];
+            const resolvedApp = isAdminApp(app) ? resolveAdminAppName(cluster) : app;
+            const endpoint = getEndpointForApp(app, cluster.endpoints);
+            if (!endpoint)
+                return [];
+            const teaser = appTeaserRoutes?.[resolvedApp] ?? appTeaserRoutes?.[app];
+            // Admin has no dedicated status on the cluster DTO and doesn't depend
+            // on zeebe being up (it manages the cluster itself). Always link to
+            // the endpoint when present; consumers can still override via
+            // `appTeaserRoutes.admin` / `.identity` if they want a teaser page.
+            const linkProps = isAdminApp(app)
+                ? (teaser ?? { href: endpoint })
+                : cluster.status?.[resolvedApp] === 'Healthy'
+                    ? { href: endpoint }
+                    : teaser;
+            if (!linkProps)
+                return [];
+            return [
+                {
+                    type: 'item',
+                    key: `${cluster.uuid}-${resolvedApp}`,
+                    label: appLabels?.[resolvedApp] ?? getReadableAppName(resolvedApp),
+                    icon: APP_ICONS[resolvedApp],
+                    linkProps,
+                },
+            ];
+        });
+        if (children.length === 0)
+            return [];
+        const clusterLinkProps = resolveClusterLinkProps?.(cluster);
+        const base = {
+            key: `cluster-${cluster.uuid}`,
+            label: cluster.name,
+            icon: CloudApp,
+            trailingElement: renderTrailingElement?.(cluster),
+            children,
+        };
+        if (!clusterLinkProps) {
+            const group = { type: 'group', ...base };
+            return [group];
+        }
+        const activeMatcher = isClusterActive?.(cluster);
+        const groupItem = {
+            type: 'group-item',
+            ...base,
+            linkProps: clusterLinkProps,
+            ...(activeMatcher !== undefined ? { isActive: activeMatcher } : {}),
+        };
+        return [groupItem];
+    });
+}
+export { buildClusterSidebarEntries };
+/**
+ * Builds cluster sidebar entries for consumers that list clusters in their
+ * sidebar (web modeler, console). Reads clusters from `useC3Profile`, iterates
+ * each cluster's available webapps, respects the identity/admin alias per
+ * cluster version, filters invisible or missing entries, and returns the
+ * sibling nodes ready to drop into a `SidebarSection`. Returns `[]` when
+ * nothing is renderable.
+ */
+export function useClusterSidebarEntries(options = {}) {
+    const { clusters } = useC3Profile();
+    return useMemo(() => buildClusterSidebarEntries(clusters ?? [], options), [clusters, options]);
+}

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

@@ -3,28 +3,11 @@
  * 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 { Analytics, Application, Building, CloudApp, Diagram, Play, Settings, Task, } from '@carbon/react/icons/index.esm.js';
+import { Building, CloudApp } from '@carbon/react/icons/index.esm.js';
 import { useMemo } from 'react';
+import { APP_ICONS, getReadableAppName } from '../../utils/camunda.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';
-const APP_ICONS = {
-    operate: Play,
-    tasklist: Task,
-    optimize: Analytics,
-    admin: Settings,
-    identity: Settings,
-    modeler: Diagram,
-    console: Application,
-};
-const APP_LABELS = {
-    operate: 'Operate',
-    tasklist: 'Tasklist',
-    optimize: 'Optimize',
-    admin: 'Admin',
-    identity: 'Admin',
-    modeler: 'Modeler',
-    console: 'Console',
-};
 /**
  * Apps shown in the app-switcher dropdown. Order determines display order.
  * `identity` is excluded: it was deprecated in favor of `admin` (8.9+).
@@ -89,21 +72,21 @@ export function useClusterWebappBreadcrumbs(options) {
             });
         }
         // ── App crumb ──────────────────────────────────────────────────────────
-        const appLabel = APP_LABELS[currentApp] ?? currentApp;
-        const appIcon = APP_ICONS[currentApp] ?? Application;
+        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: APP_ICONS[currentApp] ?? Application,
+                    icon: appIcon,
                     isSelected: true,
                 },
                 ...siblingApps.map((app) => ({
                     key: app,
-                    label: APP_LABELS[app] ?? app,
-                    icon: APP_ICONS[app] ?? Application,
+                    label: getReadableAppName(app),
+                    icon: APP_ICONS[app],
                     isSelected: false,
                     linkProps: resolveLinkProps(currentCluster?.endpoints[app] ?? '', app),
                 })),

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, 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, useClusterWebappBreadcrumbs as preview_useClusterWebappBreadcrumbs, } from './components/c3-navigation-v2';
+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 { 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';
@@ -26,3 +26,5 @@ export { useC3Profile } from './components/c3-user-configuration/c3-profile-prov
 export { C3UserConfiguration, default as C3UserConfigurationProvider, } from './components/c3-user-configuration/c3-user-configuration-provider';
 export { C3ClusterUpdateManager } from './contexts/c3-cluster-update-manager';
 export { useApi } from './hooks/useApi';
+export { APP_ICONS, APPS, getReadableAppName, isAdminApp, } from './utils/camunda';
+export type { CamundaApp, CamundaAppWithZeebe } from './utils/camunda.types';

package/lib/esm/src/index.js

@@ -13,10 +13,11 @@ 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, 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, 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';
 export { default as C3UserConfigurationProvider, } from './components/c3-user-configuration/c3-user-configuration-provider.js';
 export { C3ClusterUpdateManager } from './contexts/c3-cluster-update-manager.js';
 export { useApi } from './hooks/useApi.js';
+export { APP_ICONS, APPS, getReadableAppName, isAdminApp, } from './utils/camunda.js';

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

@@ -5,7 +5,22 @@ import type { CamundaApp, Cluster, Organization } from './camunda.types';
  * The CamundaApp type still accepts 'identity' for backward compatibility.
  */
 export declare const APPS: CamundaApp[];
+type AppIconComponent = React.ComponentType<{
+    size?: number;
+    style?: React.CSSProperties;
+}>;
+/**
+ * Per-app iconography used across nav surfaces (cluster-webapp breadcrumbs,
+ * cluster sidebar entries, app switchers). `identity` and `admin` map to the
+ * same icon so consumers don't have to unify the alias themselves.
+ */
+export declare const APP_ICONS: Record<CamundaApp, AppIconComponent>;
 export declare const isAdminApp: (app: CamundaApp | undefined) => boolean;
+/**
+ * Picks the display alias (`admin` vs `identity`) for a cluster by zeebe version.
+ * Renamed in 8.9.0-alpha5. URL and permission still live on `identity`.
+ */
+export declare const resolveAdminAppName: (cluster: Cluster) => "admin" | "identity";
 export declare const getReadableAppName: (appName: CamundaApp) => string;
 /**
  * Gets the endpoint URL for an app, handling identity/admin aliasing.
@@ -19,3 +34,4 @@ export declare const isTrialExpired: (org: Organization) => boolean;
 export declare const getOrgSalesPlan: (org: Organization) => string | undefined;
 export declare const canUpgradePlan: (org: Organization) => boolean;
 export declare const canCreateCluster: (org: Organization) => boolean;
+export {};

package/lib/esm/src/utils/camunda.js

@@ -3,6 +3,8 @@
  * 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 { Analytics, Application, Diagram, Play, Settings, Task, } from '@carbon/react/icons/index.esm.js';
+import { checkVersion, VersionCheckOperator } from './versionCheck.utils.js';
 /**
  * List of Camunda apps for navigation.
  * Note: Only 'admin' is included (not 'identity') to avoid duplicate menu entries.
@@ -16,15 +18,36 @@ export const APPS = [
     'optimize',
     'admin',
 ];
+/**
+ * Per-app iconography used across nav surfaces (cluster-webapp breadcrumbs,
+ * cluster sidebar entries, app switchers). `identity` and `admin` map to the
+ * same icon so consumers don't have to unify the alias themselves.
+ */
+export const APP_ICONS = {
+    operate: Play,
+    tasklist: Task,
+    optimize: Analytics,
+    admin: Settings,
+    identity: Settings,
+    modeler: Diagram,
+    console: Application,
+};
 export const isAdminApp = (app) => {
     return app === 'identity' || app === 'admin';
 };
-export const getReadableAppName = (appName) => {
-    if (isAdminApp(appName)) {
-        return 'Admin';
-    }
-    return appName.charAt(0).toUpperCase() + appName.slice(1);
-};
+/**
+ * Picks the display alias (`admin` vs `identity`) for a cluster by zeebe version.
+ * Renamed in 8.9.0-alpha5. URL and permission still live on `identity`.
+ */
+export const resolveAdminAppName = (cluster) => checkVersion({
+    possiblyVersionOrDockerPath: cluster.generation?.versions?.zeebe,
+    trueForSnapshot: true,
+    versionToCompareTo: '8.9.0-alpha5',
+    operator: VersionCheckOperator.GreaterThanOrEqual,
+})
+    ? 'admin'
+    : 'identity';
+export const getReadableAppName = (appName) => appName.charAt(0).toUpperCase() + appName.slice(1);
 /**
  * Gets the endpoint URL for an app, handling identity/admin aliasing.
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@camunda/camunda-composite-components",
-  "version": "0.23.1",
+  "version": "0.23.3",
   "description": "Camunda Composite Components",
   "bugs": {
     "url": "https://github.com/camunda/camunda-cloud-management-apps/issues"
@@ -60,7 +60,7 @@
     "styled-components": "6.4.0",
     "typescript-eslint": "8.58.1",
     "wait-on": "9.0.5",
-    "@camunda/ccma-shared-types": "0.0.4"
+    "@camunda/ccma-shared-types": "0.0.6"
   },
   "peerDependencies": {
     "@carbon/react": "1.x",