@gooddata/sdk-ui-pluggable-host 11.40.0-alpha.3

package/esm/ui/HostChrome.d.ts

@@ -0,0 +1,19 @@
+import { type ReactNode } from "react";
+import { type PluggableApplicationRegistryItem } from "@gooddata/sdk-model";
+import { type IAppHeaderOptions, type IHostUiNotification, type IPlatformContext } from "@gooddata/sdk-pluggable-application-model";
+import "./HostChrome.scss";
+import "@gooddata/sdk-ui-ext/styles/css/main.css";
+import "@gooddata/sdk-ui-gen-ai/styles/css/main.css";
+import "@gooddata/sdk-ui-semantic-search/styles/css/main.css";
+import "@gooddata/sdk-ui-semantic-search/styles/css/internal.css";
+export interface IHostChromeProps {
+    ctx: IPlatformContext;
+    resolvedApplications: PluggableApplicationRegistryItem[];
+    pathname: string;
+    onNavigate: (url: string) => void;
+    onReplace: (url: string) => void;
+    headerOptions?: IAppHeaderOptions;
+    notification?: IHostUiNotification | null;
+    children?: ReactNode;
+}
+export declare function HostChrome({ ctx, resolvedApplications, pathname, onNavigate, onReplace: _onReplace, headerOptions, notification, children }: IHostChromeProps): import("react/jsx-runtime").JSX.Element;

package/esm/ui/HostChrome.js

@@ -0,0 +1,115 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// (C) 2026 GoodData Corporation
+import { useCallback, useMemo } from "react";
+import { isExternalPluggableApplicationRegistryItem, } from "@gooddata/sdk-model";
+import { BackendProvider, resolveLocale } from "@gooddata/sdk-ui";
+import { AppHeaderNotifications } from "@gooddata/sdk-ui-application-header";
+import { AppHeader, ToastsCenterContextProvider, generateHeaderStaticHelpMenuItems, } from "@gooddata/sdk-ui-kit";
+import { defaultHeaderTheme } from "@gooddata/sdk-ui-theme-provider";
+import defaultLogoUrl from "../assets/logo-white.svg";
+import { getAppLifecycleCallbacks, preloadPluggableApplication, } from "../loader/pluggableApplicationsLoader.js";
+import { getApplicationHref } from "../loader/routing.js";
+import { getBackend } from "../platformContext/backend.js";
+import { buildAppMenu } from "./appMenuItems.js";
+import { getUserDisplayName, swapWorkspaceInPath } from "./chromeHelpers.js";
+import { b, e } from "./hostChromeBem.js";
+import { HostIntlProvider } from "./HostIntlProvider.js";
+import { HostNotificationDispatcher } from "./HostNotificationDispatcher.js";
+import { useHostChromeChat } from "./useHostChromeChat.js";
+import { useHostChromePricing } from "./useHostChromePricing.js";
+import { useHostChromeSearch } from "./useHostChromeSearch.js";
+import { useHostChromeWorkspaceFeatures } from "./useHostChromeWorkspaceFeatures.js";
+import { AppHeaderWorkspacePicker } from "./WorkspacePicker.js";
+import "./HostChrome.scss";
+// SDK packages with side-effecting CSS (declared in their own `sideEffects`)
+// must be imported explicitly by consumers; tree-shakers won't grab them otherwise.
+// sdk-ui-ext is pulled in transitively via AppHeaderNotifications → NotificationsPanel;
+// without its CSS the notification bell icon + dropdown render unstyled (invisible).
+import "@gooddata/sdk-ui-ext/styles/css/main.css";
+import "@gooddata/sdk-ui-gen-ai/styles/css/main.css";
+import "@gooddata/sdk-ui-semantic-search/styles/css/main.css";
+import "@gooddata/sdk-ui-semantic-search/styles/css/internal.css";
+const LOGOUT_MENU_ITEM_KEY = "gs.header.logout";
+export function HostChrome({ ctx, resolvedApplications, pathname, onNavigate, onReplace: _onReplace, headerOptions, notification = null, children, }) {
+    const locale = resolveLocale(ctx.preferredLocale);
+    const userName = getUserDisplayName(ctx.user);
+    const features = useHostChromeWorkspaceFeatures(resolvedApplications, ctx, pathname);
+    const shellTelemetry = useMemo(() => getAppLifecycleCallbacks()?.createTelemetryCallbacks?.("host-ui"), []);
+    const pricing = useHostChromePricing(ctx, locale);
+    const chat = useHostChromeChat({ features, ctx, telemetry: shellTelemetry });
+    const search = useHostChromeSearch({
+        features,
+        isTrial: pricing.isTrial,
+        onAskAiAssistant: chat.askAiAssistant,
+        telemetry: shellTelemetry,
+    });
+    const { menuItemsGroups, messages: appMessages } = useMemo(() => buildAppMenu(resolvedApplications, ctx, pathname, ctx.preferredLocale), [resolvedApplications, ctx, pathname]);
+    const helpMenuItems = useMemo(() => headerOptions?.helpMenuItems ?? generateHeaderStaticHelpMenuItems(), [headerOptions]);
+    const accountMenuItems = useMemo(() => [
+        {
+            key: LOGOUT_MENU_ITEM_KEY,
+            onClick: () => {
+                void getBackend().deauthenticate();
+            },
+        },
+    ], []);
+    const handleMenuItemClick = useCallback((item, e) => {
+        e?.preventDefault();
+        if (item.onClick) {
+            item.onClick(e ?? null);
+            return;
+        }
+        if (item.href) {
+            if (item.target === "_blank") {
+                window.open(item.href, "_blank", "noopener,noreferrer");
+            }
+            else {
+                onNavigate(item.href);
+            }
+        }
+    }, [onNavigate]);
+    const handleHeaderMouseOver = useCallback((e) => {
+        const anchor = e.target.closest("a[href]");
+        if (!anchor) {
+            return;
+        }
+        const href = anchor.getAttribute("href");
+        if (!href) {
+            return;
+        }
+        for (const app of resolvedApplications) {
+            if (!isExternalPluggableApplicationRegistryItem(app)) {
+                const appHref = getApplicationHref(app, ctx, pathname);
+                if (appHref === href) {
+                    preloadPluggableApplication(app);
+                    return;
+                }
+            }
+        }
+    }, [resolvedApplications, ctx, pathname]);
+    const handleWorkspaceSelect = useCallback((workspace) => {
+        const newId = workspace.id;
+        if (!newId) {
+            return;
+        }
+        const search = typeof window === "undefined" ? "" : window.location.search;
+        const newPath = swapWorkspaceInPath(pathname, newId);
+        onNavigate(`${newPath}${search}`);
+    }, [pathname, onNavigate]);
+    const organizationTitle = ctx.organization?.title ?? ctx.organization?.id;
+    const workspacePicker = features.isWorkspaceApp && features.workspaceId ? (_jsx(AppHeaderWorkspacePicker, { backend: getBackend(), userId: ctx.user.login, workspaceId: features.workspaceId, onWorkspaceSelect: handleWorkspaceSelect })) : organizationTitle ? (_jsx("div", { className: "gd-header-project", children: organizationTitle })) : null;
+    const hasTierEntitlement = ctx.entitlements?.some((e) => e.name === "Tier" && e.value);
+    const defaultLogoTitle = hasTierEntitlement ? "GoodData Cloud" : "GoodData.CN";
+    const logoTitle = ctx.whiteLabeling?.enabled
+        ? ctx.user.organizationName || defaultLogoTitle
+        : defaultLogoTitle;
+    const headerColor = ctx.theme?.header?.backgroundColor ?? defaultHeaderTheme.backgroundColor;
+    const headerTextColor = ctx.theme?.header?.color ?? defaultHeaderTheme.color;
+    const activeColor = ctx.theme?.header?.activeColor ?? defaultHeaderTheme.activeColor;
+    return (_jsx(HostIntlProvider, { locale: locale, additionalMessages: appMessages, children: _jsx(BackendProvider, { backend: getBackend(), children: _jsx(ToastsCenterContextProvider, { children: _jsxs("div", { className: b(), children: [
+                        _jsx("div", { className: e("header"), onMouseOver: handleHeaderMouseOver, children: _jsx(AppHeader, { logoUrl: ctx.whiteLabeling?.logoUrl || defaultLogoUrl, logoHref: "/organization" // switch the host scope to organization, the first org app will be chosen
+                                , logoTitle: logoTitle, headerColor: headerColor, headerTextColor: headerTextColor, activeColor: activeColor, userName: userName, organizationName: ctx.organization?.title, isAccessibilityCompliant: true, workspacePicker: workspacePicker, menuItemsGroups: menuItemsGroups, helpMenuItems: helpMenuItems, accountMenuItems: accountMenuItems, onMenuItemClick: handleMenuItemClick, showUpsellButton: pricing.isTrial, onUpsellButtonClick: pricing.onUpsellButtonClick, expiredDate: pricing.isTrial ? pricing.expiredDate : undefined, search: search.element, showChatItem: chat.showChatItem, onChatItemClick: chat.open, notificationsPanel: ctx.userSettings.enableInPlatformNotifications
+                                    ? ({ isMobile, closeNotificationsOverlay }) => (_jsx(AppHeaderNotifications, { locale: locale, isMobile: isMobile, closeNotificationsOverlay: closeNotificationsOverlay, useAsOfDateParam: ctx.userSettings.enableExecutionTimestamp ?? false, enableExportToDocumentStorage: ctx.userSettings.enableExportToDocumentStorage ?? false }))
+                                    : undefined }) }), _jsx("main", { className: e("content"), children: children }), chat.element, pricing.element, _jsx(HostNotificationDispatcher, { notification: notification })
+                    ] }) }) }) }));
+}

package/esm/ui/HostChrome.scss

@@ -0,0 +1,24 @@
+// (C) 2026 GoodData Corporation
+
+.gd-host-chrome {
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+
+    &__header {
+        flex-shrink: 0;
+    }
+
+    &__content {
+        flex: 1;
+        overflow: auto;
+        display: flex;
+        flex-direction: column;
+        min-height: 0;
+    }
+
+    &__app-container {
+        flex: 1;
+        min-height: 0;
+    }
+}

package/esm/ui/HostIntlProvider.d.ts

@@ -0,0 +1,9 @@
+import { type ReactNode } from "react";
+import { type ILocale } from "@gooddata/sdk-model";
+interface IHostIntlProviderProps {
+    locale: ILocale;
+    additionalMessages?: Record<string, string>;
+    children: ReactNode;
+}
+export declare function HostIntlProvider({ locale, additionalMessages, children }: IHostIntlProviderProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/esm/ui/HostIntlProvider.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// (C) 2026 GoodData Corporation
+import { useMemo } from "react";
+import { IntlProvider } from "react-intl";
+import { DEFAULT_LANGUAGE, resolveLocale, useResolveMessages } from "@gooddata/sdk-ui";
+import { DEFAULT_MESSAGES, resolveMessages } from "../components/lib/translations.js";
+export function HostIntlProvider({ locale, additionalMessages, children }) {
+    const resolvedLocale = resolveLocale(locale);
+    const baseMessages = useResolveMessages(resolvedLocale, resolveMessages, DEFAULT_MESSAGES);
+    const base = baseMessages[resolvedLocale] ?? DEFAULT_MESSAGES[DEFAULT_LANGUAGE];
+    const allMessages = useMemo(() => (additionalMessages ? { ...base, ...additionalMessages } : base), [base, additionalMessages]);
+    return (_jsx(IntlProvider, { locale: resolvedLocale, messages: allMessages, children: children }));
+}

package/esm/ui/HostNotificationDispatcher.d.ts

@@ -0,0 +1,12 @@
+import { type IHostUiNotification } from "@gooddata/sdk-pluggable-application-model";
+interface IHostNotificationDispatcherProps {
+    notification: IHostUiNotification | null;
+}
+/**
+ * Bridges runtime shell notifications into the SDK toasts center.
+ *
+ * Lives inside the chrome's intl + toasts providers, so a single component is enough
+ * to handle every notification type. New types should add a branch in the effect below.
+ */
+export declare function HostNotificationDispatcher({ notification }: IHostNotificationDispatcherProps): null;
+export {};

package/esm/ui/HostNotificationDispatcher.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// (C) 2026 GoodData Corporation
+import { useEffect } from "react";
+import { FormattedMessage } from "react-intl";
+import { ToastsCenterContext, UiLink } from "@gooddata/sdk-ui-kit";
+/**
+ * Bridges runtime shell notifications into the SDK toasts center.
+ *
+ * Lives inside the chrome's intl + toasts providers, so a single component is enough
+ * to handle every notification type. New types should add a branch in the effect below.
+ */
+export function HostNotificationDispatcher({ notification }) {
+    const { addMessage, removeMessage } = ToastsCenterContext.useContextStoreValues([
+        "addMessage",
+        "removeMessage",
+    ]);
+    useEffect(() => {
+        if (!notification) {
+            return undefined;
+        }
+        if (notification.type === "newDeploymentAvailable") {
+            const id = `host:newDeployment:${notification.commitHash}`;
+            const onReload = (event) => {
+                event.preventDefault();
+                window.location.reload();
+            };
+            addMessage({
+                id,
+                type: "warning",
+                duration: 0,
+                node: (_jsxs("span", { children: [
+                        _jsx(FormattedMessage, { id: "gs.host.notification.newDeployment.message" }), " ", _jsx(UiLink, { variant: "primary", href: "#", onClick: onReload, children: _jsx(FormattedMessage, { id: "gs.host.notification.newDeployment.reloadLink" }) })
+                    ] })),
+            });
+            return () => {
+                removeMessage(id);
+            };
+        }
+        return undefined;
+    }, [notification, addMessage, removeMessage]);
+    return null;
+}

package/esm/ui/PluggableApplicationRenderer.d.ts

@@ -0,0 +1,10 @@
+import { type PluggableApplicationRegistryItem } from "@gooddata/sdk-model";
+import { type IAppHeaderOptions, type IPlatformContext } from "@gooddata/sdk-pluggable-application-model";
+import "./PluggableApplicationRenderer.scss";
+export interface IPluggableApplicationRendererProps {
+    app: PluggableApplicationRegistryItem;
+    ctx: IPlatformContext;
+    pathname: string;
+    onHeaderChange?: (appId: string, header: IAppHeaderOptions) => void;
+}
+export declare function PluggableApplicationRenderer({ app, ctx, pathname, onHeaderChange }: IPluggableApplicationRendererProps): import("react/jsx-runtime").JSX.Element;

package/esm/ui/PluggableApplicationRenderer.js

@@ -0,0 +1,100 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// (C) 2026 GoodData Corporation
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { FormattedMessage } from "react-intl";
+import { isReloadPlatformContextRequestedEvent, } from "@gooddata/sdk-pluggable-application-model";
+import { LoadingComponent, useAutoupdateRef } from "@gooddata/sdk-ui";
+import { bemFactory } from "@gooddata/sdk-ui-kit";
+import { now } from "../debug.js";
+import { getAppLifecycleCallbacks, loadPluggableApplication } from "../loader/pluggableApplicationsLoader.js";
+import { getApplicationHref } from "../loader/routing.js";
+import { BackendPlatformContextProvider } from "../platformContext/useLoadPlatformContext.js";
+import "./PluggableApplicationRenderer.scss";
+const { b, e } = bemFactory("gd-pluggable-application-renderer");
+export function PluggableApplicationRenderer({ app, ctx, pathname, onHeaderChange, }) {
+    const ctxRef = useAutoupdateRef(ctx);
+    const onHeaderChangeRef = useAutoupdateRef(onHeaderChange);
+    const containerRef = useRef(null);
+    const mountHandleRef = useRef(undefined);
+    const [viewState, setViewState] = useState({ state: "loading" });
+    const appBasePath = getApplicationHref(app, ctx, pathname);
+    const lifecycle = getAppLifecycleCallbacks();
+    const onTelemetryEvent = useMemo(() => lifecycle?.createTelemetryCallbacks?.(app.id), [lifecycle, app.id]);
+    // onEvent is intentionally stable (empty deps) — pluggable apps capture it at mount time
+    // and do not update it when the host re-renders. Do not make this callback depend on
+    // any value that can change after mount, or the mounted app will silently call a stale closure.
+    const onEvent = useCallback((event) => {
+        if (isReloadPlatformContextRequestedEvent(event)) {
+            void BackendPlatformContextProvider.load();
+        }
+    }, []);
+    useEffect(() => {
+        let cancelled = false;
+        const mountId = `${app.id}:${Date.now()}`;
+        const totalStart = now();
+        const prevHandle = mountHandleRef.current;
+        mountHandleRef.current = undefined;
+        setViewState({ state: "loading" });
+        // Defer unmount of the previous app to avoid synchronously unmounting
+        // a React root while React is already rendering (race in strict mode).
+        if (prevHandle) {
+            queueMicrotask(() => prevHandle.unmount());
+        }
+        lifecycle?.onLoadStarted?.(app.id);
+        const loadStart = now();
+        loadPluggableApplication(app)
+            .then((loadedApp) => {
+            if (cancelled) {
+                return;
+            }
+            lifecycle?.onLoadCompleted?.(app.id, now() - loadStart);
+            const container = containerRef.current;
+            if (!container) {
+                throw new Error(`[host-runtime/renderer] Missing container for app "${app.id}".`);
+            }
+            const mountStart = now();
+            mountHandleRef.current = loadedApp.mount({
+                id: mountId,
+                container,
+                ctx: ctxRef.current,
+                basePath: appBasePath,
+                onEvent,
+                onTelemetryEvent,
+                onHeaderChange: (header) => onHeaderChangeRef.current?.(app.id, header),
+            });
+            lifecycle?.onMountCompleted?.(app.id, now() - mountStart);
+            lifecycle?.onRendered?.(app.id, now() - totalStart);
+            setViewState({ state: "ready" });
+        })
+            .catch((mountError) => {
+            if (cancelled) {
+                return;
+            }
+            const errorMessage = mountError instanceof Error ? mountError.message : "Unknown module loading error.";
+            console.error(`[host-runtime/renderer] Failed to mount app "${app.id}".`, mountError);
+            lifecycle?.onLoadFailed?.(app.id, errorMessage);
+            setViewState({
+                state: "error",
+                message: errorMessage,
+            });
+        });
+        return () => {
+            cancelled = true;
+            const handle = mountHandleRef.current;
+            if (handle) {
+                mountHandleRef.current = undefined;
+                queueMicrotask(() => {
+                    handle.unmount();
+                    lifecycle?.onUnmounted?.(app.id);
+                });
+            }
+        };
+    }, [app, appBasePath, ctxRef, onHeaderChangeRef, onTelemetryEvent, lifecycle, onEvent]);
+    useEffect(() => {
+        mountHandleRef.current?.updateContext?.(ctx);
+    }, [ctx]);
+    return (_jsxs("section", { className: b(), children: [viewState.state === "loading" ? (_jsx("div", { className: e("loading"), children: _jsx(LoadingComponent, { height: 40 }) })) : null, viewState.state === "error" ? (_jsxs("div", { className: e("error"), children: [
+                    _jsx("h2", { children: _jsx(FormattedMessage, { id: "gs.host.error.applicationFailedToLoad" }) }), _jsx("p", { children: viewState.message })
+                ] })) : null, _jsx("div", { ref: containerRef, className: e("container", { visible: viewState.state === "ready" }) })
+        ] }));
+}

package/esm/ui/PluggableApplicationRenderer.scss

@@ -0,0 +1,29 @@
+// (C) 2026 GoodData Corporation
+
+.gd-pluggable-application-renderer {
+    height: 100%;
+
+    &__loading {
+        min-height: 240px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    &__error {
+        min-height: 240px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        gap: 8px;
+    }
+
+    &__container {
+        display: none;
+    }
+
+    &__container--visible {
+        display: block;
+        height: 100%;
+    }
+}

package/esm/ui/SemanticSearch.d.ts

@@ -0,0 +1,23 @@
+import { type IAnalyticalBackend } from "@gooddata/sdk-backend-spi";
+import { type ISearchMetrics } from "@gooddata/sdk-ui-semantic-search/internal";
+/**
+ * Telemetry callback emitted by host-runtime SemanticSearch.
+ */
+export type SemanticSearchEvent = {
+    name: "search.performed";
+    payload: ISearchMetrics;
+};
+export interface ISemanticSearchProps {
+    backend: IAnalyticalBackend;
+    workspaceId: string;
+    canManage?: boolean;
+    canAnalyze?: boolean;
+    canFullControl?: boolean;
+    metadataTimeZone?: string;
+    isTrial?: boolean;
+    enableUseGenAIChat?: boolean;
+    useHostedMetricEditor?: boolean;
+    onAskAiAssistant?: (question: string) => void;
+    onEvent?: (event: SemanticSearchEvent) => void;
+}
+export declare function SemanticSearch({ backend, workspaceId, metadataTimeZone, canManage, canAnalyze, canFullControl, isTrial, enableUseGenAIChat, useHostedMetricEditor, onAskAiAssistant, onEvent }: ISemanticSearchProps): import("react/jsx-runtime").JSX.Element;

package/esm/ui/SemanticSearch.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// (C) 2026 GoodData Corporation
+import { useCallback, useEffect, useMemo } from "react";
+import { useIntl } from "react-intl";
+import { FooterButtonAiAssistant, SearchOverlay, useSearchMetrics, } from "@gooddata/sdk-ui-semantic-search/internal";
+const RESULTS_LIMIT = 10;
+export function SemanticSearch({ backend, workspaceId, metadataTimeZone, canManage = false, canAnalyze = false, canFullControl = false, isTrial = false, enableUseGenAIChat = false, useHostedMetricEditor = false, onAskAiAssistant, onEvent, }) {
+    const intl = useIntl();
+    const objectTypes = useMemo(() => {
+        const types = ["dashboard", "visualization"];
+        if (canManage) {
+            types.push("metric");
+        }
+        return types;
+    }, [canManage]);
+    const reportSearchMetrics = useCallback((metrics) => {
+        const data = { ...metrics };
+        if (!isTrial) {
+            // Strip sensitive info for non-trial org
+            data.lastSearchTerm = "";
+            data.selectedItemTitle = typeof data.selectedItemTitle === "string" ? "" : null;
+        }
+        onEvent?.({ name: "search.performed", payload: data });
+    }, [isTrial, onEvent]);
+    const { onCloseMetrics, onSearchMetrics, onSelectMetrics } = useSearchMetrics(reportSearchMetrics);
+    const onSelect = (selection) => {
+        onSelectMetrics(selection.item, selection.index);
+    };
+    // When the dialog is closing, this component gets unmounted.
+    // Keeping behaviour identical to standalone Header.
+    useEffect(() => {
+        return () => {
+            onCloseMetrics();
+        };
+    }, [onCloseMetrics]);
+    const renderFooter = (props, { closeSearch }) => {
+        if (props.status !== "success" || !enableUseGenAIChat) {
+            return null;
+        }
+        return (_jsx(FooterButtonAiAssistant, { onClick: () => {
+                closeSearch();
+                onAskAiAssistant?.(intl.formatMessage({ id: "gen-ai.ask-assistant.search" }, { question: props.value }));
+            } }));
+    };
+    return (_jsx(SearchOverlay, { limit: RESULTS_LIMIT, onSelect: onSelect, onSearch: onSearchMetrics, deepSearch: false, objectTypes: objectTypes, workspace: workspaceId, backend: backend, canManage: canManage, canAnalyze: canAnalyze, canFullControl: canFullControl, metadataTimezone: metadataTimeZone, uiPathOptions: { useHostedMetricEditor }, renderFooter: renderFooter }));
+}

package/esm/ui/WorkspacePicker.d.ts

@@ -0,0 +1,9 @@
+import { type IAnalyticalBackend } from "@gooddata/sdk-backend-spi";
+import { type IHeaderWorkspace } from "@gooddata/sdk-ui-kit";
+export interface IAppHeaderWorkspacePickerProps {
+    backend: IAnalyticalBackend;
+    userId: string;
+    workspaceId: string;
+    onWorkspaceSelect: (workspace: IHeaderWorkspace) => void;
+}
+export declare function AppHeaderWorkspacePicker({ backend, userId, workspaceId, onWorkspaceSelect }: IAppHeaderWorkspacePickerProps): import("react/jsx-runtime").JSX.Element;

package/esm/ui/WorkspacePicker.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// (C) 2026 GoodData Corporation
+import { useMemo } from "react";
+import { useCancelablePromise } from "@gooddata/sdk-ui";
+import { WorkspacePicker } from "@gooddata/sdk-ui-application-header";
+function useWorkspaceDescriptor(backend, workspaceId) {
+    const { result } = useCancelablePromise({
+        promise: workspaceId
+            ? () => {
+                return backend.workspace(workspaceId).getDescriptor();
+            }
+            : null,
+    }, [workspaceId, backend]);
+    return useMemo(() => {
+        if (!result) {
+            return undefined;
+        }
+        return {
+            id: result.id,
+            title: result.title ?? "",
+            description: result.description ?? "",
+            isDemo: result.isDemo,
+        };
+    }, [result]);
+}
+export function AppHeaderWorkspacePicker({ backend, userId, workspaceId, onWorkspaceSelect, }) {
+    const workspaceDescriptor = useWorkspaceDescriptor(backend, workspaceId);
+    return (_jsx(WorkspacePicker, { backend: backend, userId: userId, selectedWorkspace: workspaceDescriptor, onWorkspaceSelect: onWorkspaceSelect }));
+}

package/esm/ui/appMenuItems.d.ts

@@ -0,0 +1,17 @@
+import { type ILocale, type PluggableApplicationRegistryItem } from "@gooddata/sdk-model";
+import { type IPlatformContext } from "@gooddata/sdk-pluggable-application-model";
+import { type IHeaderMenuItem } from "@gooddata/sdk-ui-kit";
+export interface IAppMenuResult {
+    menuItemsGroups: IHeaderMenuItem[][];
+    messages: Record<string, string>;
+}
+/**
+ * Builds header menu item groups and the corresponding intl messages for app titles.
+ *
+ * Each app gets a namespaced message key (`shellApplication.menuItem.<appId>`) so that the localized
+ * title is available to `FormattedMessage` without risking key clashes in the message bundle.
+ *
+ * Uses `getApplicationHref` / `isInternalAppRouteActive` from routing.ts for proper
+ * workspace/organization-scoped URLs and active state detection.
+ */
+export declare function buildAppMenu(apps: PluggableApplicationRegistryItem[], ctx: IPlatformContext, pathname: string, locale: ILocale | undefined): IAppMenuResult;

package/esm/ui/appMenuItems.js

@@ -0,0 +1,81 @@
+// (C) 2026 GoodData Corporation
+import { isExternalPluggableApplicationRegistryItem, } from "@gooddata/sdk-model";
+import { DefaultApplicationId } from "@gooddata/sdk-pluggable-application-model";
+import { getApplicationHref, isInternalAppRouteActive } from "../loader/routing.js";
+function handleExternalAppClick(href) {
+    return (event) => {
+        // Let the browser handle modifier-click and non-primary buttons natively
+        // (opens in a new tab/window). Only intercept a plain left-click so we can
+        // suppress the parent menu's SPA navigation and do a full-page load instead —
+        // external apps live outside the host SPA, so React Router can't reach them.
+        if (event.defaultPrevented ||
+            event.button !== 0 ||
+            event.metaKey ||
+            event.ctrlKey ||
+            event.shiftKey ||
+            event.altKey) {
+            return;
+        }
+        event.preventDefault();
+        window.location.assign(href);
+    };
+}
+/**
+ * Prefix used for menu item intl message keys to avoid clashes with existing message IDs.
+ */
+const NAV_MSG_PREFIX = "shellApplication.menuItem.";
+function navMessageKey(appId) {
+    return `${NAV_MSG_PREFIX}${appId}`;
+}
+function getLocalizedTitle(app, locale) {
+    if (locale && app.localizedTitle) {
+        const localizedTitle = app.localizedTitle[locale];
+        if (localizedTitle) {
+            return localizedTitle;
+        }
+    }
+    return app.title;
+}
+// When `gdc-home-ui` is the only organization-scoped app, it is reachable via the logo
+// and would otherwise appear as a redundant standalone "Organization" menu entry. We must
+// have this shifty logic in place to emulate the old behavior of Panther Home UI app.
+function filterDefaultOrganizationApp(apps) {
+    const organizationApps = apps.filter((app) => app.applicationScope === "organization");
+    if (organizationApps.length === 1 && organizationApps[0].id === DefaultApplicationId.HOME_UI) {
+        return apps.filter((app) => app.id !== DefaultApplicationId.HOME_UI);
+    }
+    return apps;
+}
+/**
+ * Builds header menu item groups and the corresponding intl messages for app titles.
+ *
+ * Each app gets a namespaced message key (`shellApplication.menuItem.<appId>`) so that the localized
+ * title is available to `FormattedMessage` without risking key clashes in the message bundle.
+ *
+ * Uses `getApplicationHref` / `isInternalAppRouteActive` from routing.ts for proper
+ * workspace/organization-scoped URLs and active state detection.
+ */
+export function buildAppMenu(apps, ctx, pathname, locale) {
+    if (apps.length === 0) {
+        return { menuItemsGroups: [], messages: {} };
+    }
+    const visibleApps = filterDefaultOrganizationApp(apps);
+    if (visibleApps.length === 0) {
+        return { menuItemsGroups: [], messages: {} };
+    }
+    const messages = {};
+    const items = visibleApps.map((app) => {
+        const isExternal = isExternalPluggableApplicationRegistryItem(app);
+        const href = getApplicationHref(app, ctx, pathname);
+        const isActive = !isExternal && isInternalAppRouteActive(app, ctx, pathname);
+        const key = navMessageKey(app.id);
+        messages[key] = getLocalizedTitle(app, locale);
+        return {
+            key,
+            href,
+            isActive,
+            onClick: isExternal ? handleExternalAppClick(href) : undefined,
+        };
+    });
+    return { menuItemsGroups: [items], messages };
+}

package/esm/ui/chromeHelpers.d.ts

@@ -0,0 +1,17 @@
+import { type IUser } from "@gooddata/sdk-model";
+/**
+ * Builds the display name shown for the current user in the host header.
+ *
+ * Falls back to `firstName + lastName` when `fullName` is missing, and finally
+ * to `login` when neither piece of name metadata is available.
+ */
+export declare function getUserDisplayName(user: IUser): string;
+/**
+ * Returns the supplied pathname with the `/workspace/{id}` segment swapped for the
+ * given `newWorkspaceId`.
+ *
+ * Falls back to a bare `/workspace/{newWorkspaceId}` if the current pathname does
+ * not match the host's `/workspace/*` shape (e.g. when the user is currently on
+ * an organization-scoped route).
+ */
+export declare function swapWorkspaceInPath(pathname: string, newWorkspaceId: string): string;

package/esm/ui/chromeHelpers.js

@@ -0,0 +1,29 @@
+// (C) 2026 GoodData Corporation
+/**
+ * Builds the display name shown for the current user in the host header.
+ *
+ * Falls back to `firstName + lastName` when `fullName` is missing, and finally
+ * to `login` when neither piece of name metadata is available.
+ */
+export function getUserDisplayName(user) {
+    if (user.fullName) {
+        return user.fullName;
+    }
+    const parts = [user.firstName, user.lastName].filter((v) => Boolean(v));
+    if (parts.length > 0) {
+        return parts.join(" ");
+    }
+    return user.login;
+}
+/**
+ * Returns the supplied pathname with the `/workspace/{id}` segment swapped for the
+ * given `newWorkspaceId`.
+ *
+ * Falls back to a bare `/workspace/{newWorkspaceId}` if the current pathname does
+ * not match the host's `/workspace/*` shape (e.g. when the user is currently on
+ * an organization-scoped route).
+ */
+export function swapWorkspaceInPath(pathname, newWorkspaceId) {
+    const replaced = pathname.replace(/^\/workspace\/[^/]+/, `/workspace/${newWorkspaceId}`);
+    return replaced === pathname ? `/workspace/${newWorkspaceId}` : replaced;
+}

package/esm/ui/hostChromeBem.d.ts

@@ -0,0 +1 @@
+export declare const b: (props?: import("@gooddata/sdk-ui-kit").StyleProps | undefined) => string, e: (element: string, props?: import("@gooddata/sdk-ui-kit").StyleProps | undefined) => string;

package/esm/ui/hostChromeBem.js

@@ -0,0 +1,3 @@
+// (C) 2026 GoodData Corporation
+import { bemFactory } from "@gooddata/sdk-ui-kit";
+export const { b, e } = bemFactory("gd-host-chrome");