@camunda/camunda-composite-components 0.24.0 → 0.25.1

package/lib/esm/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@camunda/camunda-composite-components",
-    "version": "0.24.0",
+    "version": "0.25.1",
     "description": "Camunda Composite Components",
     "bugs": {
         "url": "https://github.com/camunda/camunda-cloud-management-apps/issues"
@@ -50,42 +50,42 @@
     },
     "dependencies": {
         "jwt-decode": "4.0.0",
-        "react-error-boundary": "6.1.1",
+        "react-error-boundary": "6.1.2",
         "react-markdown": "10.1.0",
-        "semver": "7.8.0"
+        "semver": "7.8.4"
     },
     "devDependencies": {
-        "@auth0/auth0-spa-js": "2.19.3",
+        "@auth0/auth0-spa-js": "2.21.1",
         "@camunda/ccma-shared-types": "workspace:*",
-        "@carbon/react": "1.107.1",
+        "@carbon/react": "1.109.0",
         "@chromatic-com/storybook": "5.2.1",
         "@mdx-js/react": "3.1.1",
-        "@playwright/test": "1.60.0",
-        "@storybook/addon-a11y": "10.4.0",
-        "@storybook/addon-docs": "10.4.0",
-        "@storybook/addon-links": "10.4.0",
-        "@storybook/addon-vitest": "10.4.0",
-        "@storybook/react": "10.4.0",
-        "@storybook/react-vite": "10.4.0",
-        "@vitest/browser": "4.1.7",
-        "@vitest/browser-playwright": "4.1.7",
-        "vitest": "4.1.7",
+        "@playwright/test": "1.61.0",
+        "@storybook/addon-a11y": "10.4.6",
+        "@storybook/addon-docs": "10.4.6",
+        "@storybook/addon-links": "10.4.6",
+        "@storybook/addon-vitest": "10.4.6",
+        "@storybook/react": "10.4.6",
+        "@storybook/react-vite": "10.4.6",
+        "@vitest/browser": "4.1.9",
+        "@vitest/browser-playwright": "4.1.9",
+        "vitest": "4.1.9",
         "conventional-changelog-conventionalcommits": "9.3.1",
-        "eslint-import-resolver-typescript": "4.4.4",
+        "eslint-import-resolver-typescript": "4.4.5",
         "eslint-plugin-react": "7.37.5",
         "eslint-plugin-react-hooks": "7.1.1",
-        "eslint-plugin-storybook": "10.4.0",
+        "eslint-plugin-storybook": "10.4.6",
         "event-source-polyfill": "1.0.31",
-        "mixpanel-browser": "2.79.0",
-        "playwright": "1.60.0",
-        "react": "19.2.6",
-        "react-dom": "19.2.6",
-        "react-is": "19.2.6",
+        "mixpanel-browser": "2.80.0",
+        "playwright": "1.61.0",
+        "react": "19.2.7",
+        "react-dom": "19.2.7",
+        "react-is": "19.2.7",
         "rimraf": "6.1.3",
         "serve": "14.2.6",
-        "storybook": "10.4.0",
+        "storybook": "10.4.6",
         "styled-components": "6.4.2",
-        "typescript-eslint": "8.59.4",
+        "typescript-eslint": "8.61.1",
         "wait-on": "9.0.10"
     },
     "peerDependencies": {

package/lib/esm/src/assets/c3-icons.d.ts

@@ -1,5 +1,5 @@
 import type { C3IconProps } from './c3-icons.types';
-export declare const C3AppMenuIcon: ({ size }: C3IconProps) => import("react/jsx-runtime").JSX.Element;
-export declare const C3NotificationsUnreadIcon: ({ size }: C3IconProps) => import("react/jsx-runtime").JSX.Element;
-export declare const C3BellIcon: ({ size }: C3IconProps) => import("react/jsx-runtime").JSX.Element;
-export declare const CamundaLogo: () => import("react/jsx-runtime").JSX.Element;
+export declare const C3AppMenuIcon: ({ size }: C3IconProps) => import("react").JSX.Element;
+export declare const C3NotificationsUnreadIcon: ({ size }: C3IconProps) => import("react").JSX.Element;
+export declare const C3BellIcon: ({ size }: C3IconProps) => import("react").JSX.Element;
+export declare const CamundaLogo: () => import("react").JSX.Element;

package/lib/esm/src/components/c3-app-teaser/app-teaser-cards.d.ts

@@ -13,5 +13,5 @@ type AppTeaserCardsProps = {
     };
     subtext: string;
 };
-export declare const AppTeaserCards: ({ title, subtitle, cards, cta, subtext, }: AppTeaserCardsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AppTeaserCards: ({ title, subtitle, cards, cta, subtext, }: AppTeaserCardsProps) => JSX.Element;
 export {};

package/lib/esm/src/components/c3-help-center/help-center-hint.d.ts

@@ -1,4 +1,4 @@
 import type { JSX } from 'react';
 export declare const HelpCenterHint: ({ children }: {
     children: JSX.Element;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => JSX.Element;

package/lib/esm/src/components/c3-license-tag/c3-license-tag.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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.
@@ -82,5 +82,9 @@ export const C3LicenseTag = (props) => {
     const variants = getTagVariants(props);
     if (variants.length === 0)
         return null;
-    return _jsx(_Fragment, { children: variants.map(renderVariant) });
+    return (_jsx("span", { style: {
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: 'var(--cds-spacing-02)',
+        }, children: variants.map(renderVariant) }));
 };

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

@@ -173,7 +173,7 @@ const Separator = styled.span `
 const DropdownEntry = ({ item, onSelect, linkComponent, }) => {
     const Icon = item.icon;
     return (_jsxs(DropdownItem, { as: item.linkProps?.href !== undefined
-            ? (linkComponent ?? 'a')
+            ? 'a'
             : item.linkProps
                 ? linkComponent
                 : undefined, ...(item.linkProps ?? {}), "$isSelected": !!item.isSelected, onClick: () => onSelect(item), role: 'option', tabIndex: -1, "aria-selected": !!item.isSelected, children: [Icon && (_jsx(Icon, { size: 16, style: { color: 'var(--cds-icon-secondary)', flexShrink: 0 } })), _jsx(DropdownItemLabel, { children: item.label }), item.trailingElement, item.isSelected && (_jsx(Checkmark, { size: 16, style: { color: 'var(--cds-icon-primary)', flexShrink: 0 } }))] }));
@@ -345,7 +345,7 @@ const BreadcrumbSegmentComponent = ({ segment, isLast, linkComponent, }) => {
     }, [close]);
     const handleDropdownKeyDown = usePanelKeyboard(dropdownPanelRef, close, chevronRef, isOpen, '[role="option"]');
     return (_jsxs(_Fragment, { children: [_jsxs(SegmentWrapper, { ref: wrapperRef, children: [_jsxs(SegmentButton, { ref: segmentButtonRef, as: segment.linkProps?.href !== undefined
-                            ? (linkComponent ?? 'a')
+                            ? 'a'
                             : segment.linkProps
                                 ? linkComponent
                                 : undefined, ...(segment.linkProps ?? {}), "$isInteractive": !!(segment.onClick || segment.linkProps), "$isLast": isLast, onClick: segment.onClick, "aria-label": segment.label, title: segment.label, children: [Icon && _jsx(Icon, { size: 16, style: { flexShrink: 0 } }), _jsx(SegmentLabel, { children: segment.label }), segment.trailingElement] }), segment.menuElement, segment.actions && segment.actions.length > 0 && (_jsx(ActionsMenu, { actions: segment.actions, ariaLabel: `${segment.label} actions` })), hasDropdown && (_jsx(ChevronButton, { ref: chevronRef, "$isOpen": isOpen, onClick: toggle, onKeyDown: (e) => {

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

@@ -18,9 +18,13 @@ const StyledHeader = styled(Header) `
   z-index: 8001 !important;
 
   // Carbon defaults the tools area to flex: 1, which splits the row
-  // 50/50 with breadcrumbs. Make it intrinsic instead.
+  // 50/50 with breadcrumbs. Make it intrinsic and pin it to the right
+  // (margin-inline-start: auto) so the tools stay flush right even
+  // when the breadcrumb bar is absent — loading state, or routes that
+  // don't publish breadcrumbs.
   .cds--header__global {
     flex: 0 0 auto;
+    margin-inline-start: auto;
   }
 `;
 const LogoSection = styled.a `

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

@@ -32,9 +32,7 @@ function buildClusterSidebarEntries(clusters, { isAppVisible, resolveClusterLink
             const healthKey = isAdminApp(app)
                 ? 'zeebe'
                 : resolvedApp;
-            const linkProps = cluster.status?.[healthKey] === 'Healthy'
-                ? (teaser ?? { href: endpoint })
-                : teaser;
+            const linkProps = cluster.status?.[healthKey] === 'Healthy' ? { href: endpoint } : teaser;
             if (!linkProps)
                 return [];
             return [

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

@@ -3,6 +3,12 @@ import type { BreadcrumbDescriptor } from './use-c3-navigation-v2';
 export interface UseClusterWebappBreadcrumbsOptions {
     /** The app currently being viewed. */
     currentApp: CamundaApp;
+    /**
+     * 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.
+     */
+    webappLinks?: Partial<Record<CamundaApp, string>>;
 }
 /**
  * Builds the standard breadcrumb chain for a cluster-scoped Camunda webapp:

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

@@ -22,6 +22,11 @@ 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
@@ -64,14 +69,15 @@ function buildModelerOrgUrl(modelerEndpoint, orgId) {
  * crumb) without any environment flag.
  */
 export function useClusterWebappBreadcrumbs(options) {
-    const { currentApp } = options;
+    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 = currentCluster?.endpoints?.modeler;
+        const modelerUrl = webappLinks?.modeler ??
+            (config.domain ? `https://modeler.${config.domain}` : undefined);
         // ── Org crumb ──────────────────────────────────────────────────────────
         if (activeOrg) {
             const allOrgs = orgs ?? [];
@@ -123,7 +129,8 @@ export function useClusterWebappBreadcrumbs(options) {
                 ? `${modelerUrl}?fromCluster=${currentCluster.uuid}`
                 : undefined;
             const reachableClusters = (clusters ?? []).filter((c) => c.uuid === currentCluster.uuid ||
-                getEndpointForApp(currentApp, c.endpoints));
+                (getEndpointForApp(currentApp, c.endpoints) &&
+                    isAppHealthyOnCluster(c, currentApp)));
             const hasSiblings = reachableClusters.filter((c) => c.uuid !== currentCluster.uuid).length >
                 0;
             const clusterDropdownItems = hasSiblings
@@ -170,21 +177,25 @@ export function useClusterWebappBreadcrumbs(options) {
         // 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 switcherKey = isAdminApp(currentApp)
+            ? 'admin'
+            : currentApp;
         const resolvedCurrentApp = isAdminApp(currentApp) && currentCluster
             ? resolveAdminAppName(currentCluster)
             : currentApp;
         const appLabel = getReadableAppName(resolvedCurrentApp);
         const appIcon = APP_ICONS[resolvedCurrentApp];
-        const reachableApps = currentCluster
+        const sourceEndpoints = currentCluster?.endpoints ?? webappLinks;
+        const reachableApps = sourceEndpoints
             ? SWITCHABLE_APPS.filter((app) => app === switcherKey ||
-                getEndpointForApp(app, currentCluster.endpoints))
+                (getEndpointForApp(app, sourceEndpoints) &&
+                    (!currentCluster || isAppHealthyOnCluster(currentCluster, app))))
             : [switcherKey];
         const hasSiblingApps = reachableApps.filter((app) => app !== switcherKey).length > 0;
-        const dropdownItems = hasSiblingApps && currentCluster
+        const dropdownItems = hasSiblingApps && sourceEndpoints
             ? reachableApps.map((app) => {
                 const isCurrent = app === switcherKey;
-                const resolvedApp = isAdminApp(app)
+                const resolvedApp = isAdminApp(app) && currentCluster
                     ? resolveAdminAppName(currentCluster)
                     : app;
                 return {
@@ -196,7 +207,7 @@ export function useClusterWebappBreadcrumbs(options) {
                         ? {}
                         : {
                             linkProps: {
-                                href: getEndpointForApp(app, currentCluster.endpoints) ?? '',
+                                href: getEndpointForApp(app, sourceEndpoints) ?? '',
                             },
                         }),
                 };
@@ -215,5 +226,13 @@ export function useClusterWebappBreadcrumbs(options) {
                 : {}),
         });
         return crumbs;
-    }, [activeOrg, orgs, clusters, currentCluster, currentApp]);
+    }, [
+        activeOrg,
+        orgs,
+        clusters,
+        currentCluster,
+        currentApp,
+        webappLinks,
+        config.domain,
+    ]);
 }

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/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.
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@camunda/camunda-composite-components",
-  "version": "0.24.0",
+  "version": "0.25.1",
   "description": "Camunda Composite Components",
   "bugs": {
     "url": "https://github.com/camunda/camunda-cloud-management-apps/issues"
@@ -24,43 +24,43 @@
   },
   "dependencies": {
     "jwt-decode": "4.0.0",
-    "react-error-boundary": "6.1.1",
+    "react-error-boundary": "6.1.2",
     "react-markdown": "10.1.0",
-    "semver": "7.8.0"
+    "semver": "7.8.4"
   },
   "devDependencies": {
-    "@auth0/auth0-spa-js": "2.19.3",
-    "@carbon/react": "1.107.1",
+    "@auth0/auth0-spa-js": "2.21.1",
+    "@carbon/react": "1.109.0",
     "@chromatic-com/storybook": "5.2.1",
     "@mdx-js/react": "3.1.1",
-    "@playwright/test": "1.60.0",
-    "@storybook/addon-a11y": "10.4.0",
-    "@storybook/addon-docs": "10.4.0",
-    "@storybook/addon-links": "10.4.0",
-    "@storybook/addon-vitest": "10.4.0",
-    "@storybook/react": "10.4.0",
-    "@storybook/react-vite": "10.4.0",
-    "@vitest/browser": "4.1.7",
-    "@vitest/browser-playwright": "4.1.7",
-    "vitest": "4.1.7",
+    "@playwright/test": "1.61.0",
+    "@storybook/addon-a11y": "10.4.6",
+    "@storybook/addon-docs": "10.4.6",
+    "@storybook/addon-links": "10.4.6",
+    "@storybook/addon-vitest": "10.4.6",
+    "@storybook/react": "10.4.6",
+    "@storybook/react-vite": "10.4.6",
+    "@vitest/browser": "4.1.9",
+    "@vitest/browser-playwright": "4.1.9",
+    "vitest": "4.1.9",
     "conventional-changelog-conventionalcommits": "9.3.1",
-    "eslint-import-resolver-typescript": "4.4.4",
+    "eslint-import-resolver-typescript": "4.4.5",
     "eslint-plugin-react": "7.37.5",
     "eslint-plugin-react-hooks": "7.1.1",
-    "eslint-plugin-storybook": "10.4.0",
+    "eslint-plugin-storybook": "10.4.6",
     "event-source-polyfill": "1.0.31",
-    "mixpanel-browser": "2.79.0",
-    "playwright": "1.60.0",
-    "react": "19.2.6",
-    "react-dom": "19.2.6",
-    "react-is": "19.2.6",
+    "mixpanel-browser": "2.80.0",
+    "playwright": "1.61.0",
+    "react": "19.2.7",
+    "react-dom": "19.2.7",
+    "react-is": "19.2.7",
     "rimraf": "6.1.3",
     "serve": "14.2.6",
-    "storybook": "10.4.0",
+    "storybook": "10.4.6",
     "styled-components": "6.4.2",
-    "typescript-eslint": "8.59.4",
+    "typescript-eslint": "8.61.1",
     "wait-on": "9.0.10",
-    "@camunda/ccma-shared-types": "0.1.1"
+    "@camunda/ccma-shared-types": "0.1.3"
   },
   "peerDependencies": {
     "@carbon/react": "1.x",