@datalayer/core 1.1.43 → 1.1.46

package/lib/components/principal/PrincipalSwitcherMenu.js

@@ -4,14 +4,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Distributed under the terms of the Modified BSD License.
  */
 import { useEffect, useMemo, useState } from 'react';
-import { ActionList, ActionMenu, Box, Button, Label, Text } from '@primer/react';
+import { ActionList, ActionMenu, Box, Button, Label, Text, ThemeProvider, } from '@primer/react';
 import { OrganizationIcon, PeopleIcon, PersonIcon, TriangleDownIcon, } from '@primer/octicons-react';
 import { useCache, useAuthorization } from '../../hooks/index.js';
 import { useCoreStore } from '../../state/index.js';
 import { useIAMStore } from '../../state/substates/index.js';
 import { memberships as fetchMemberships } from '../../api/iam/profile.js';
 import { usePrincipalStore } from '../../hooks/usePrincipalStore.js';
-import { useBillableAccountStore } from '../../hooks/useBillableAccountStore.js';
+import { useBillingEntityStore } from '../../hooks/useBillingEntityStore.js';
 import { useSelectedPrincipal } from '../../hooks/useSelectedPrincipal.js';
 import { DisplayHandle, displayHandleText } from '../display/DisplayHandle.js';
 function truncatePrincipalLabel(label, maxChars) {
@@ -26,10 +26,10 @@ function truncatePrincipalLabel(label, maxChars) {
 }
 /**
  * PrincipalSwitcherMenu — the *only* component allowed to write to the
- * principal store and the billable account store. It keeps both stores in
+ * principal store and the billing entity store. It keeps both stores in
  * sync per the rule:
- *   - selecting a user/org principal → billable account = same user/org
- *   - selecting a team principal     → billable account = the team's parent org
+ *   - selecting a user/org principal → billing entity = same user/org
+ *   - selecting a team principal     → billing entity = the team's parent org
  */
 export function PrincipalSwitcherMenu({ maxLabelChars = 48, fullWidth = true, showClosedBorder = true, }) {
     const { user, token, iamUrl } = useIAMStore();
@@ -45,17 +45,17 @@ export function PrincipalSwitcherMenu({ maxLabelChars = 48, fullWidth = true, sh
     const selectPersonalPrincipal = usePrincipalStore(state => state.selectPersonalPrincipal);
     const selectOrganizationPrincipal = usePrincipalStore(state => state.selectOrganizationPrincipal);
     const selectTeamPrincipal = usePrincipalStore(state => state.selectTeamPrincipal);
-    const setBillableAccount = useBillableAccountStore(state => state.setBillableAccount);
+    const setBillingEntity = useBillingEntityStore(state => state.setBillingEntity);
     const { selectedPrincipalKind, selectedPrincipalUid, selectedPrincipalHandle, selectedTeamParentOrganizationHandle, } = useSelectedPrincipal();
     const personalUid = user?.uid || user?.id || '';
     const personalHandle = user?.handle || '';
     const selectUser = (uid, handle) => {
         selectPersonalPrincipal(uid, handle);
-        setBillableAccount({ kind: 'user', uid, handle });
+        setBillingEntity({ kind: 'user', uid, handle });
     };
     const selectOrganization = (uid, handle) => {
         selectOrganizationPrincipal(uid, handle);
-        setBillableAccount({ kind: 'organization', uid, handle });
+        setBillingEntity({ kind: 'organization', uid, handle });
     };
     const selectTeam = (team, orgHandle) => {
         if (!team.organizationUid) {
@@ -67,7 +67,7 @@ export function PrincipalSwitcherMenu({ maxLabelChars = 48, fullWidth = true, sh
             organizationUid: team.organizationUid,
             organizationHandle: orgHandle,
         });
-        setBillableAccount({
+        setBillingEntity({
             kind: 'organization',
             uid: team.organizationUid,
             handle: orgHandle,
@@ -95,6 +95,8 @@ export function PrincipalSwitcherMenu({ maxLabelChars = 48, fullWidth = true, sh
                     .map((membership) => ({
                     uid: String(membership?.uid || membership?.id || '').trim(),
                     handle: String(membership?.handle || '').trim(),
+                    name: String(membership?.name || '').trim() || undefined,
+                    displayName: String(membership?.display_name || membership?.displayName || '').trim() || undefined,
                     organizationUid: String(membership?.organization_uid || '').trim() || undefined,
                     organizationHandle: String(membership?.organization_handle ||
                         membership?.organization?.handle ||
@@ -132,7 +134,8 @@ export function PrincipalSwitcherMenu({ maxLabelChars = 48, fullWidth = true, sh
         // Keep explicit organization/team selections stable across route transitions,
         // even while memberships/organizations are still loading or temporarily
         // unavailable for a given view.
-        if (selectedPrincipalKind === 'organization' || selectedPrincipalKind === 'team') {
+        if (selectedPrincipalKind === 'organization' ||
+            selectedPrincipalKind === 'team') {
             return;
         }
         if (selectedPrincipalKind === 'personal' &&
@@ -203,122 +206,138 @@ export function PrincipalSwitcherMenu({ maxLabelChars = 48, fullWidth = true, sh
         textTransform: 'lowercase',
         lineHeight: 1.2,
     };
-    return (_jsxs(ActionMenu, { children: [_jsx(ActionMenu.Anchor, { children: showClosedBorder ? (_jsxs(Box, { as: "button", type: "button", "aria-label": "Switch principal", sx: {
-                        width: fullWidth ? '100%' : 'auto',
-                        boxSizing: 'border-box',
-                        px: 2,
-                        py: 2,
-                        fontSize: 0,
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'space-between',
-                        gap: 2,
-                        bg: 'canvas.subtle',
-                        border: '1px solid',
-                        borderColor: 'border.default',
-                        borderRadius: 2,
-                        cursor: 'pointer',
-                        textAlign: 'left',
-                        transition: 'background-color 120ms ease',
-                        ':hover': {
-                            bg: 'canvas.subtle',
-                        },
-                        ':focus-visible': {
-                            bg: 'canvas.subtle',
-                            outline: '2px solid',
-                            outlineColor: 'accent.emphasis',
-                            outlineOffset: '2px',
-                        },
-                    }, children: [_jsx(Box, { sx: {
-                                display: 'inline-flex',
-                                alignItems: 'center',
-                                color: 'fg.muted',
-                                flexShrink: 0,
-                            }, children: selectedPrincipalKind === 'organization' ? (_jsx(OrganizationIcon, { size: 16 })) : selectedPrincipalKind === 'team' ? (_jsx(PeopleIcon, { size: 16 })) : (_jsx(PersonIcon, { size: 16 })) }), _jsx(Box, { sx: { minWidth: 0, flex: 1 }, children: _jsx(Text, { sx: {
-                                    display: 'block',
-                                    color: 'accent.fg',
-                                    fontWeight: 'semibold',
-                                    fontSize: 'inherit',
-                                    whiteSpace: 'nowrap',
-                                    overflow: 'hidden',
-                                    textOverflow: 'ellipsis',
-                                    maxWidth: '100%',
-                                }, children: selectedPrincipalLabelClosed }) }), isPlatformAdmin && isCurrentUserPrincipal ? (_jsx(Box, { sx: {
-                                flexShrink: 0,
-                                display: 'inline-flex',
-                                alignItems: 'center',
-                            }, children: _jsx(Label, { variant: "secondary", size: "small", sx: adminBadgeSx, children: "admin" }) })) : null, _jsx(Box, { sx: {
-                                display: 'inline-flex',
-                                alignItems: 'center',
-                                color: 'fg.muted',
-                                flexShrink: 0,
-                                ml: isPlatformAdmin && isCurrentUserPrincipal ? 1 : 0,
-                            }, children: _jsx(TriangleDownIcon, { size: 12 }) })] })) : (_jsx(Button, { variant: "invisible", size: "small", "aria-label": "Switch principal", trailingVisual: TriangleDownIcon, sx: {
-                        maxWidth: fullWidth ? '100%' : ['200px', '260px', '360px'],
-                        width: fullWidth ? '100%' : 'auto',
-                    }, children: _jsxs(Box, { sx: {
-                            display: 'inline-flex',
+    return (_jsx(ThemeProvider, { children: _jsxs(ActionMenu, { children: [_jsx(ActionMenu.Anchor, { children: showClosedBorder ? (_jsxs(Box, { as: "button", type: "button", "aria-label": "Switch principal", sx: {
+                            width: fullWidth ? '100%' : 'auto',
+                            boxSizing: 'border-box',
+                            px: 2,
+                            py: 2,
+                            fontSize: 0,
+                            display: 'flex',
                             alignItems: 'center',
-                            gap: 1,
-                            minWidth: 0,
+                            justifyContent: 'space-between',
+                            gap: 2,
+                            bg: 'canvas.subtle',
+                            border: '1px solid',
+                            borderColor: 'border.default',
+                            borderRadius: 2,
+                            cursor: 'pointer',
+                            textAlign: 'left',
+                            transition: 'background-color 120ms ease',
+                            ':hover': {
+                                bg: 'canvas.subtle',
+                            },
+                            ':focus-visible': {
+                                bg: 'canvas.subtle',
+                                outline: '2px solid',
+                                outlineColor: 'accent.emphasis',
+                                outlineOffset: '2px',
+                            },
                         }, children: [_jsx(Box, { sx: {
                                     display: 'inline-flex',
                                     alignItems: 'center',
                                     color: 'fg.muted',
                                     flexShrink: 0,
-                                }, children: selectedPrincipalKind === 'organization' ? (_jsx(OrganizationIcon, { size: 16 })) : selectedPrincipalKind === 'team' ? (_jsx(PeopleIcon, { size: 16 })) : (_jsx(PersonIcon, { size: 16 })) }), _jsx(Box, { sx: {
-                                    minWidth: 0,
-                                    overflow: 'hidden',
-                                    textOverflow: 'ellipsis',
-                                    whiteSpace: 'nowrap',
-                                }, children: _jsx(Text, { sx: {
+                                }, children: selectedPrincipalKind === 'organization' ? (_jsx(PeopleIcon, { size: 16 })) : selectedPrincipalKind === 'team' ? (_jsx(OrganizationIcon, { size: 16 })) : (_jsx(PersonIcon, { size: 16 })) }), _jsx(Box, { sx: { minWidth: 0, flex: 1 }, children: _jsx(Text, { sx: {
+                                        display: 'block',
                                         color: 'accent.fg',
                                         fontWeight: 'semibold',
-                                    }, children: selectedPrincipalLabelClosed }) }), isPlatformAdmin && isCurrentUserPrincipal ? (_jsx(Label, { variant: "secondary", size: "small", sx: adminBadgeSx, children: "admin" })) : null] }) })) }), _jsx(ActionMenu.Overlay, { width: "medium", children: _jsxs(ActionList, { children: [_jsxs(ActionList.Group, { children: [_jsx(ActionList.GroupHeading, { children: "Personal" }), _jsxs(ActionList.Item, { disabled: isCurrentUserPrincipal, selected: isCurrentUserPrincipal, sx: isCurrentUserPrincipal ? selectedItemSx : undefined, onSelect: () => {
-                                        if (isCurrentUserPrincipal) {
-                                            return;
-                                        }
-                                        if (personalUid && personalHandle) {
-                                            selectUser(personalUid, personalHandle);
-                                        }
-                                    }, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(PersonIcon, {}) }), _jsx(DisplayHandle, { handle: personalHandle || 'me' }), isPlatformAdmin ? (_jsx(ActionList.TrailingVisual, { children: _jsx(Label, { variant: "secondary", size: "small", sx: adminBadgeSx, children: "admin" }) })) : null] })] }), _jsxs(ActionList.Group, { children: [_jsx(ActionList.GroupHeading, { children: "Organizations" }), organizations.length === 0 ? (_jsx(ActionList.Item, { disabled: true, children: "No organizations" })) : (organizations.map((organization) => {
-                                    const organizationUid = getOrganizationUid(organization);
-                                    const isCurrentOrganizationPrincipal = selectedPrincipalKind === 'organization' &&
-                                        selectedPrincipalUid === organizationUid;
-                                    return (_jsxs(ActionList.Item, { disabled: isCurrentOrganizationPrincipal, selected: isCurrentOrganizationPrincipal, sx: isCurrentOrganizationPrincipal
-                                            ? selectedItemSx
-                                            : undefined, onSelect: () => {
-                                            if (isCurrentOrganizationPrincipal) {
+                                        fontSize: 'inherit',
+                                        whiteSpace: 'nowrap',
+                                        overflow: 'hidden',
+                                        textOverflow: 'ellipsis',
+                                        maxWidth: '100%',
+                                    }, children: selectedPrincipalLabelClosed }) }), isPlatformAdmin && isCurrentUserPrincipal ? (_jsx(Box, { sx: {
+                                    flexShrink: 0,
+                                    display: 'inline-flex',
+                                    alignItems: 'center',
+                                }, children: _jsx(Label, { variant: "secondary", size: "small", sx: adminBadgeSx, children: "admin" }) })) : null, _jsx(Box, { sx: {
+                                    display: 'inline-flex',
+                                    alignItems: 'center',
+                                    color: 'fg.muted',
+                                    flexShrink: 0,
+                                    ml: isPlatformAdmin && isCurrentUserPrincipal ? 1 : 0,
+                                }, children: _jsx(TriangleDownIcon, { size: 12 }) })] })) : (_jsx(Button, { variant: "invisible", size: "small", "aria-label": "Switch principal", trailingVisual: TriangleDownIcon, sx: {
+                            maxWidth: fullWidth ? '100%' : ['200px', '260px', '360px'],
+                            width: fullWidth ? '100%' : 'auto',
+                        }, children: _jsxs(Box, { sx: {
+                                display: 'inline-flex',
+                                alignItems: 'center',
+                                gap: 1,
+                                minWidth: 0,
+                            }, children: [_jsx(Box, { sx: {
+                                        display: 'inline-flex',
+                                        alignItems: 'center',
+                                        color: 'fg.muted',
+                                        flexShrink: 0,
+                                    }, children: selectedPrincipalKind === 'organization' ? (_jsx(PeopleIcon, { size: 16 })) : selectedPrincipalKind === 'team' ? (_jsx(OrganizationIcon, { size: 16 })) : (_jsx(PersonIcon, { size: 16 })) }), _jsx(Box, { sx: {
+                                        minWidth: 0,
+                                        overflow: 'hidden',
+                                        textOverflow: 'ellipsis',
+                                        whiteSpace: 'nowrap',
+                                    }, children: _jsx(Text, { sx: {
+                                            color: 'accent.fg',
+                                            fontWeight: 'semibold',
+                                        }, children: selectedPrincipalLabelClosed }) }), isPlatformAdmin && isCurrentUserPrincipal ? (_jsx(Label, { variant: "secondary", size: "small", sx: adminBadgeSx, children: "admin" })) : null] }) })) }), _jsx(ActionMenu.Overlay, { width: "large", children: _jsxs(ActionList, { children: [_jsxs(ActionList.Group, { children: [_jsx(ActionList.GroupHeading, { children: "Personal" }), _jsxs(ActionList.Item, { disabled: isCurrentUserPrincipal, selected: isCurrentUserPrincipal, sx: isCurrentUserPrincipal ? selectedItemSx : undefined, onSelect: () => {
+                                            if (isCurrentUserPrincipal) {
                                                 return;
                                             }
-                                            if (organizationUid && organization.handle) {
-                                                selectOrganization(organizationUid, organization.handle);
-                                            }
-                                        }, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(OrganizationIcon, {}) }), _jsx(Box, { as: "span", title: displayHandleText(organization.handle), sx: {
-                                                    display: 'block',
-                                                    minWidth: 0,
-                                                    overflow: 'hidden',
-                                                    textOverflow: 'ellipsis',
-                                                    whiteSpace: 'nowrap',
-                                                }, children: _jsx(DisplayHandle, { handle: organization.handle }) })] }, organizationUid));
-                                }))] }), _jsxs(ActionList.Group, { children: [_jsx(ActionList.GroupHeading, { children: "Teams" }), teams.length === 0 ? (_jsx(ActionList.Item, { disabled: true, children: "No teams" })) : (teams.map(team => {
-                                    const isCurrentTeamPrincipal = selectedPrincipalKind === 'team' &&
-                                        selectedPrincipalUid === team.uid;
-                                    const orgHandle = resolveTeamOrganizationHandle(team) ||
-                                        personalHandle ||
-                                        'organization';
-                                    return (_jsxs(ActionList.Item, { disabled: isCurrentTeamPrincipal, selected: isCurrentTeamPrincipal, sx: isCurrentTeamPrincipal ? selectedItemSx : undefined, onSelect: () => {
-                                            if (isCurrentTeamPrincipal) {
-                                                return;
+                                            if (personalUid && personalHandle) {
+                                                selectUser(personalUid, personalHandle);
                                             }
-                                            selectTeam(team, orgHandle);
-                                        }, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(PeopleIcon, {}) }), _jsxs(Box, { as: "span", title: `${displayHandleText(orgHandle)}/${displayHandleText(team.handle, { withAt: false })}`, sx: {
+                                        }, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(PersonIcon, {}) }), _jsxs(Box, { as: "span", sx: {
                                                     display: 'block',
                                                     minWidth: 0,
                                                     overflow: 'hidden',
                                                     textOverflow: 'ellipsis',
                                                     whiteSpace: 'nowrap',
-                                                }, children: [_jsx(DisplayHandle, { handle: orgHandle }), "/", _jsx(DisplayHandle, { handle: team.handle, withAt: false })] })] }, team.uid));
-                                }))] })] }) })] }));
+                                                }, children: [String(user?.friendlyName ||
+                                                        user?.displayName ||
+                                                        personalHandle ||
+                                                        'Me').trim(), _jsxs(Box, { as: "span", sx: { color: 'fg.muted' }, children: [' ', "\u00B7 ", _jsx(DisplayHandle, { handle: personalHandle || 'me' })] })] }), isPlatformAdmin ? (_jsx(ActionList.TrailingVisual, { children: _jsx(Label, { variant: "secondary", size: "small", sx: adminBadgeSx, children: "admin" }) })) : null] })] }), _jsxs(ActionList.Group, { children: [_jsx(ActionList.GroupHeading, { children: "Organizations" }), organizations.length === 0 ? (_jsx(ActionList.Item, { disabled: true, children: "No organizations" })) : (organizations.map((organization) => {
+                                        const organizationUid = getOrganizationUid(organization);
+                                        const isCurrentOrganizationPrincipal = selectedPrincipalKind === 'organization' &&
+                                            selectedPrincipalUid === organizationUid;
+                                        return (_jsxs(ActionList.Item, { disabled: isCurrentOrganizationPrincipal, selected: isCurrentOrganizationPrincipal, sx: isCurrentOrganizationPrincipal
+                                                ? selectedItemSx
+                                                : undefined, onSelect: () => {
+                                                if (isCurrentOrganizationPrincipal) {
+                                                    return;
+                                                }
+                                                if (organizationUid && organization.handle) {
+                                                    selectOrganization(organizationUid, organization.handle);
+                                                }
+                                            }, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(PeopleIcon, {}) }), _jsxs(Box, { as: "span", title: displayHandleText(organization.handle), sx: {
+                                                        display: 'block',
+                                                        minWidth: 0,
+                                                        overflow: 'hidden',
+                                                        textOverflow: 'ellipsis',
+                                                        whiteSpace: 'nowrap',
+                                                    }, children: [String(organization?.display_name ||
+                                                            organization?.displayName ||
+                                                            organization?.name ||
+                                                            organization?.handle ||
+                                                            'Organization').trim(), _jsxs(Box, { as: "span", sx: { color: 'fg.muted' }, children: [' ', "\u00B7 ", _jsx(DisplayHandle, { handle: organization.handle })] })] })] }, organizationUid));
+                                    }))] }), _jsxs(ActionList.Group, { children: [_jsx(ActionList.GroupHeading, { children: "Teams" }), teams.length === 0 ? (_jsx(ActionList.Item, { disabled: true, children: "No teams" })) : (teams.map(team => {
+                                        const isCurrentTeamPrincipal = selectedPrincipalKind === 'team' &&
+                                            selectedPrincipalUid === team.uid;
+                                        const orgHandle = resolveTeamOrganizationHandle(team) ||
+                                            personalHandle ||
+                                            'organization';
+                                        return (_jsxs(ActionList.Item, { disabled: isCurrentTeamPrincipal, selected: isCurrentTeamPrincipal, sx: isCurrentTeamPrincipal ? selectedItemSx : undefined, onSelect: () => {
+                                                if (isCurrentTeamPrincipal) {
+                                                    return;
+                                                }
+                                                selectTeam(team, orgHandle);
+                                            }, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(OrganizationIcon, {}) }), _jsxs(Box, { as: "span", title: `${displayHandleText(orgHandle)}/${displayHandleText(team.handle, { withAt: false })}`, sx: {
+                                                        display: 'block',
+                                                        minWidth: 0,
+                                                        overflow: 'hidden',
+                                                        textOverflow: 'ellipsis',
+                                                        whiteSpace: 'nowrap',
+                                                    }, children: [String(team.displayName ||
+                                                            team.name ||
+                                                            team.handle ||
+                                                            'Team').trim(), _jsxs(Box, { as: "span", sx: { color: 'fg.muted' }, children: [' ', "\u00B7 ", _jsx(DisplayHandle, { handle: orgHandle }), "/", _jsx(DisplayHandle, { handle: team.handle, withAt: false })] })] })] }, team.uid));
+                                    }))] })] }) })] }) }));
 }
 export default PrincipalSwitcherMenu;

package/lib/config/Configuration.d.ts

@@ -73,8 +73,26 @@ export type IDatalayerCoreConfig = {
     mcpServersUrl: string;
     /**
      * OTEL (OpenTelemetry) API URL.
+     *
+     * This is the endpoint runtimes/agents export telemetry to. In the browser
+     * it is also the default endpoint used to *consume* (query) telemetry, unless
+     * {@link otelInUrl} is provided.
      */
     otelUrl: string;
+    /**
+     * OTEL (OpenTelemetry) *consume* (read/query) API URL override.
+     *
+     * When set, the UI reads telemetry (metrics, traces, logs) from this URL
+     * instead of {@link otelUrl}. When empty/undefined, {@link otelUrl} is used.
+     *
+     * Primary use case: local development. When runtimes run in the cloud and
+     * export their telemetry to the production OTEL service, a local UI must fetch
+     * telemetry from production rather than from the local OTEL endpoint. Set this
+     * to e.g. `https://prod1.datalayer.run` while `otelUrl` stays local.
+     *
+     * Fed by the `DATALAYER_OTEL_IN_URL` environment variable at build/deploy time.
+     */
+    otelInUrl?: string;
     /**
      * Growth API URL.
      */

package/lib/hooks/index.d.ts

@@ -28,8 +28,8 @@ export * from './useProjectStore';
 export * from './useMobile';
 export * from './useUsageRefreshStore';
 export * from './usePrincipalStore';
-export * from './useBillableAccountStore';
+export * from './useBillingEntityStore';
 export * from './useSelectedPrincipal';
-export * from './useSelectedBillableAccount';
+export * from './useSelectedBillingEntity';
 export * from './useVisibilityObserver';
 export * from './useWindowSize';

package/lib/hooks/index.js

@@ -33,8 +33,8 @@ export * from './useProjectStore.js';
 export * from './useMobile.js';
 export * from './useUsageRefreshStore.js';
 export * from './usePrincipalStore.js';
-export * from './useBillableAccountStore.js';
+export * from './useBillingEntityStore.js';
 export * from './useSelectedPrincipal.js';
-export * from './useSelectedBillableAccount.js';
+export * from './useSelectedBillingEntity.js';
 export * from './useVisibilityObserver.js';
 export * from './useWindowSize.js';

package/lib/hooks/useBillingEntityStore.d.ts

@@ -0,0 +1,31 @@
+/**
+ * The kind of billing entity currently in scope.
+ *
+ * An account is the *billing* principal — only users and organizations
+ * are accounts. Teams are NOT accounts; when a team is the selected
+ * principal, the billing entity is the team's parent organization.
+ */
+export type BillingEntityKind = 'user' | 'organization';
+export type BillingEntityState = {
+    billingEntityKind: BillingEntityKind;
+    billingEntityUid?: string;
+    billingEntityHandle?: string;
+    setBillingEntity: (args: {
+        kind: BillingEntityKind;
+        uid: string;
+        handle: string;
+    }) => void;
+    resetBillingEntity: () => void;
+};
+export declare const useBillingEntityStore: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<BillingEntityState>, "persist"> & {
+    persist: {
+        setOptions: (options: Partial<import("zustand/middleware").PersistOptions<BillingEntityState, unknown>>) => void;
+        clearStorage: () => void;
+        rehydrate: () => Promise<void> | void;
+        hasHydrated: () => boolean;
+        onHydrate: (fn: (state: BillingEntityState) => void) => () => void;
+        onFinishHydration: (fn: (state: BillingEntityState) => void) => () => void;
+        getOptions: () => Partial<import("zustand/middleware").PersistOptions<BillingEntityState, unknown>>;
+    };
+}>;
+export default useBillingEntityStore;

package/lib/hooks/useBillingEntityStore.js

@@ -0,0 +1,53 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { create } from 'zustand';
+import { createJSONStorage, persist } from 'zustand/middleware';
+import { useUsageRefreshStore } from './useUsageRefreshStore.js';
+export const useBillingEntityStore = create()(persist(set => ({
+    billingEntityKind: 'user',
+    billingEntityUid: undefined,
+    billingEntityHandle: undefined,
+    setBillingEntity: ({ kind, uid, handle }) => set(state => {
+        const unchanged = state.billingEntityKind === kind &&
+            state.billingEntityUid === uid &&
+            state.billingEntityHandle === handle;
+        if (unchanged) {
+            return state;
+        }
+        useUsageRefreshStore
+            .getState()
+            .requestUsageRefresh('billing-entity-changed');
+        return {
+            billingEntityKind: kind,
+            billingEntityUid: uid,
+            billingEntityHandle: handle,
+        };
+    }),
+    resetBillingEntity: () => set(state => {
+        const unchanged = state.billingEntityKind === 'user' &&
+            state.billingEntityUid === undefined &&
+            state.billingEntityHandle === undefined;
+        if (unchanged) {
+            return state;
+        }
+        useUsageRefreshStore
+            .getState()
+            .requestUsageRefresh('billing-entity-reset');
+        return {
+            billingEntityKind: 'user',
+            billingEntityUid: undefined,
+            billingEntityHandle: undefined,
+        };
+    }),
+}), {
+    name: 'datalayer-billing-entity',
+    storage: createJSONStorage(() => localStorage),
+    partialize: state => ({
+        billingEntityKind: state.billingEntityKind,
+        billingEntityUid: state.billingEntityUid,
+        billingEntityHandle: state.billingEntityHandle,
+    }),
+}));
+export default useBillingEntityStore;