@datalayer/core 1.0.20 → 1.0.22

package/lib/components/sharing/SharingEditor.d.ts

@@ -0,0 +1,20 @@
+export type SharingAccessLevel = 'view' | 'update' | 'execute';
+export type SharingLevelPayload = {
+    userUids?: string[];
+    teamUids?: string[];
+    organizationUids?: string[];
+};
+export type SharingPayload = {
+    access?: Partial<Record<SharingAccessLevel, SharingLevelPayload>>;
+};
+export declare const EMPTY_SHARING_PAYLOAD: SharingPayload;
+export type SharingEditorProps = {
+    value: SharingPayload;
+    onChange: (next: SharingPayload) => void;
+    label?: string;
+    caption?: string;
+    rows?: number;
+    disabled?: boolean;
+};
+export declare function SharingEditor({ value, onChange, label, caption, rows, disabled, }: SharingEditorProps): JSX.Element;
+export default SharingEditor;

package/lib/components/sharing/SharingEditor.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * SharingEditor — inline editor for the sharing payload shape used by
+ * `ShareAccessComponent` ACL endpoints.
+ *
+ * Unlike `ShareAccessComponent` (which is bound to a server-side resource
+ * via `requestUrl`), this component edits a free-form
+ * `{ access: { view/update/execute: { userUids, teamUids, organizationUids } } }`
+ * blob in memory. It is intended for "create" flows where the resource does
+ * not yet exist and the sharing payload must be POSTed alongside the rest of
+ * the configuration.
+ *
+ * This is a scaffold: it currently exposes a structured JSON editor with
+ * validation and the canonical default shape. Future iterations can replace
+ * the textarea with the same principal-picker UI used by
+ * `ShareAccessComponent`.
+ */
+import { useEffect, useMemo, useState } from 'react';
+import { Box } from '@datalayer/primer-addons';
+import { FormControl, Text, Textarea } from '@primer/react';
+export const EMPTY_SHARING_PAYLOAD = {
+    access: {
+        view: { userUids: [], teamUids: [], organizationUids: [] },
+        update: { userUids: [], teamUids: [], organizationUids: [] },
+        execute: { userUids: [], teamUids: [], organizationUids: [] },
+    },
+};
+const stringify = (value) => {
+    try {
+        return JSON.stringify(value ?? {}, null, 2);
+    }
+    catch {
+        return '{}';
+    }
+};
+export function SharingEditor({ value, onChange, label = 'Sharing', caption = 'Edit the sharing payload. Each access level (view/update/execute) can grant access to user, team, and organization UIDs.', rows = 10, disabled = false, }) {
+    const initial = useMemo(() => stringify(value), [value]);
+    const [raw, setRaw] = useState(initial);
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        setRaw(stringify(value));
+    }, [value]);
+    return (_jsxs(FormControl, { disabled: disabled, children: [_jsx(FormControl.Label, { children: label }), _jsx(Textarea, { rows: rows, value: raw, onChange: event => {
+                    const next = event.target.value;
+                    setRaw(next);
+                    if (!next.trim()) {
+                        setError(null);
+                        onChange({});
+                        return;
+                    }
+                    try {
+                        const parsed = JSON.parse(next);
+                        setError(null);
+                        onChange(parsed);
+                    }
+                    catch (reason) {
+                        setError(reason?.message || 'Invalid JSON');
+                    }
+                }, sx: { width: '100%', fontFamily: 'mono' } }), _jsx(FormControl.Caption, { children: caption }), error && (_jsx(Box, { sx: { mt: 1 }, children: _jsx(Text, { sx: { color: 'danger.fg', fontSize: 1 }, children: error }) }))] }));
+}
+export default SharingEditor;

package/lib/components/sharing/index.d.ts

@@ -0,0 +1,9 @@
+export * from '../principal/Principal';
+export * from '../principal/PrincipalAvatar';
+export * from '../principal/PrincipalBadge';
+export * from '../principal/PrincipalBanner';
+export { buildPrincipalProfilePath, PrincipalDetailsOverlay, } from '../principal/PrincipalDetailsOverlay';
+export type { PrincipalDetailsOverlayProps } from '../principal/PrincipalDetailsOverlay';
+export * from '../principal/PrincipalSwitcherMenu';
+export * from './ShareAccessComponent';
+export * from './SharingEditor';

package/lib/components/sharing/index.js

@@ -0,0 +1,12 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+export * from '../principal/Principal.js';
+export * from '../principal/PrincipalAvatar.js';
+export * from '../principal/PrincipalBadge.js';
+export * from '../principal/PrincipalBanner.js';
+export { buildPrincipalProfilePath, PrincipalDetailsOverlay, } from '../principal/PrincipalDetailsOverlay.js';
+export * from '../principal/PrincipalSwitcherMenu.js';
+export * from './ShareAccessComponent.js';
+export * from './SharingEditor.js';

package/lib/components/snapshots/{RuntimeSnapshotMenu.d.ts → SandboxSnapshotMenu.d.ts}

@@ -2,9 +2,9 @@ import { type PropsWithChildren } from 'react';
 import { Kernel } from '@jupyterlab/services';
 import { IMultiServiceManager } from '../../stateful/runtimes';
 /**
- * Runtime snapshot menu component properties
+ * Code Sandbox snapshot menu component properties
  */
-type IRuntimeSnapshotMenu = {
+type ICodeSandboxSnapshotMenu = {
     /**
      * Application multi service manager.
      */
@@ -27,7 +27,7 @@ type IRuntimeSnapshotMenu = {
     disabled: boolean;
 };
 /**
- * Runtime Snapshot menu component.
+ * Code Sandbox Snapshot menu component.
  */
-export declare function RuntimeSnapshotMenu({ children, connection, podName, multiServiceManager, disabled, }: PropsWithChildren<IRuntimeSnapshotMenu>): JSX.Element;
+export declare function SandboxSnapshotMenu({ children, connection, podName, multiServiceManager, disabled, }: PropsWithChildren<ICodeSandboxSnapshotMenu>): JSX.Element;
 export {};

package/lib/components/snapshots/{RuntimeSnapshotMenu.js → SandboxSnapshotMenu.js}

@@ -4,29 +4,29 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * Distributed under the terms of the Modified BSD License.
  */
 import { useCallback, useEffect, useState, } from 'react';
-import { CameraIcon } from '@datalayer/icons-react';
+import { DeviceCameraIcon } from '@primer/octicons-react';
 import { ActionList, ActionMenu, Flash, FormControl, Select, Spinner, } from '@primer/react';
 import { Dialog } from '@primer/react/experimental';
 import { Box } from '@datalayer/primer-addons';
 import { useToast } from '../../hooks/index.js';
-import { createRuntimeSnapshot, getRuntimeSnapshots, loadBrowserRuntimeSnapshot, loadRuntimeSnapshot, } from '../../stateful/runtimes/index.js';
+import { createSandboxSnapshot, getSandboxSnapshots, loadBrowserSandboxSnapshot, loadSandboxSnapshot, } from '../../stateful/runtimes/index.js';
 import { useRuntimesStore } from '../../state/index.js';
-import { createRuntimeSnapshotName } from '../../utils/index.js';
+import { createSandboxSnapshotName } from '../../utils/index.js';
 /**
- * Runtime Snapshot menu component.
+ * Code Sandbox Snapshot menu component.
  */
-export function RuntimeSnapshotMenu({ children, connection, podName, multiServiceManager, disabled = false, }) {
-    const { addRuntimeSnapshot, runtimesRunUrl, runtimeSnapshots, setRuntimeSnapshots, } = useRuntimesStore();
+export function SandboxSnapshotMenu({ children, connection, podName, multiServiceManager, disabled = false, }) {
+    const { addSandboxSnapshot, runtimesRunUrl, runtimeSnapshots, setSandboxSnapshots, } = useRuntimesStore();
     const { enqueueToast, trackAsyncTask } = useToast();
     const [openLoadDialog, setOpenLoadDialog] = useState(false);
-    const [loadingRuntimeSnapshot, setLoadingRuntimeSnapshot] = useState(false);
-    const [takingRuntimeSnapshot, setTakingRuntimeSnapshot] = useState(false);
+    const [loadingSandboxSnapshot, setLoadingSandboxSnapshot] = useState(false);
+    const [takingSandboxSnapshot, setTakingSandboxSnapshot] = useState(false);
     const [selection, setSelection] = useState(runtimeSnapshots[0]?.id ?? '');
     const [error, setError] = useState();
     useEffect(() => {
-        getRuntimeSnapshots()
+        getSandboxSnapshots()
             .then(snapshots => {
-            setRuntimeSnapshots(snapshots);
+            setSandboxSnapshots(snapshots);
             if (!selection && snapshots.length > 0) {
                 setSelection(snapshots[0].id);
             }
@@ -35,36 +35,36 @@ export function RuntimeSnapshotMenu({ children, connection, podName, multiServic
             console.error(`Failed to fetch remote kernel snapshots; ${reason}`);
         });
     }, [runtimesRunUrl]);
-    const onLoadRuntimeSnapshot = useCallback(() => {
+    const onLoadSandboxSnapshot = useCallback(() => {
         setError(undefined);
         setOpenLoadDialog(true);
     }, []);
-    const onRuntimeSnapshotChanged = useCallback(event => {
+    const onSandboxSnapshotChanged = useCallback(event => {
         setSelection(event.target.value);
     }, []);
-    const onLoadRuntimeSnapshotSubmit = useCallback(async ({ id, connection, podName, }) => {
+    const onLoadSandboxSnapshotSubmit = useCallback(async ({ id, connection, podName, }) => {
         if (podName) {
-            await loadRuntimeSnapshot({ id: podName, from: id });
-            enqueueToast(`Runtime snapshot ${podName} is loaded.`, {
+            await loadSandboxSnapshot({ id: podName, from: id });
+            enqueueToast(`Code Sandbox snapshot ${podName} is loaded.`, {
                 variant: 'success',
             });
         }
         else if (connection) {
-            await loadBrowserRuntimeSnapshot({ connection, id });
-            enqueueToast(`Runtime snapshot ${id} is loaded.`, {
+            await loadBrowserSandboxSnapshot({ connection, id });
+            enqueueToast(`Code Sandbox snapshot ${id} is loaded.`, {
                 variant: 'success',
             });
         }
     }, []);
-    const onTakeRuntimeSnapshot = useCallback(async () => {
+    const onTakeSandboxSnapshot = useCallback(async () => {
         try {
-            setTakingRuntimeSnapshot(true);
+            setTakingSandboxSnapshot(true);
             let snapshot;
             let task;
             let ref = '';
             let snapshotName = '';
             if (podName && multiServiceManager?.remote) {
-                snapshotName = createRuntimeSnapshotName('cloud');
+                snapshotName = createSandboxSnapshotName('cloud');
                 task = multiServiceManager.remote.runtimesManager.snapshotRuntime({
                     podName,
                     name: snapshotName,
@@ -79,9 +79,9 @@ export function RuntimeSnapshotMenu({ children, connection, podName, multiServic
             else if (connection && multiServiceManager?.browser) {
                 const model = connection.model;
                 ref = model.id;
-                snapshotName = createRuntimeSnapshotName('browser');
+                snapshotName = createSandboxSnapshotName('browser');
                 let isPending = true;
-                task = createRuntimeSnapshot({
+                task = createSandboxSnapshot({
                     connection: multiServiceManager.browser.kernels.connectTo({
                         model,
                     }),
@@ -90,7 +90,7 @@ export function RuntimeSnapshotMenu({ children, connection, podName, multiServic
                         if (isPending) {
                             isPending = false;
                             // Get the kernel snapshot uid.
-                            getRuntimeSnapshots().then(snapshots => {
+                            getSandboxSnapshots().then(snapshots => {
                                 snapshot = snapshots.find(s => s.name === snapshotName);
                             });
                         }
@@ -114,15 +114,15 @@ export function RuntimeSnapshotMenu({ children, connection, podName, multiServic
                 });
                 await task;
                 if (snapshot) {
-                    addRuntimeSnapshot(snapshot);
+                    addSandboxSnapshot(snapshot);
                 }
             }
         }
         finally {
-            setTakingRuntimeSnapshot(false);
+            setTakingSandboxSnapshot(false);
         }
     }, [connection, podName, multiServiceManager]);
-    return (_jsxs(_Fragment, { children: [_jsxs(ActionMenu, { children: [_jsx(ActionMenu.Button, { leadingVisual: CameraIcon, variant: "invisible", size: "small", disabled: loadingRuntimeSnapshot || takingRuntimeSnapshot || disabled, children: children }), _jsx(ActionMenu.Overlay, { children: _jsxs(ActionList, { children: [_jsx(ActionList.Item, { onSelect: onLoadRuntimeSnapshot, disabled: loadingRuntimeSnapshot || runtimeSnapshots.length === 0, children: "Load a runtime snapshot\u2026" }), _jsx(ActionList.Item, { onSelect: onTakeRuntimeSnapshot, disabled: takingRuntimeSnapshot, children: "Take a runtime snapshot" })] }) })] }), openLoadDialog && (_jsx(Dialog, { title: _jsx("span", { style: { color: 'var(--fgColor-default)' }, children: "Choose a runtime snapshot to load" }), onClose: () => {
+    return (_jsxs(_Fragment, { children: [_jsxs(ActionMenu, { children: [_jsx(ActionMenu.Button, { leadingVisual: DeviceCameraIcon, variant: "invisible", size: "small", disabled: loadingSandboxSnapshot || takingSandboxSnapshot || disabled, children: children }), _jsx(ActionMenu.Overlay, { children: _jsxs(ActionList, { children: [_jsx(ActionList.Item, { onSelect: onLoadSandboxSnapshot, disabled: loadingSandboxSnapshot || runtimeSnapshots.length === 0, children: "Load a code sandbox snapshot\u2026" }), _jsx(ActionList.Item, { onSelect: onTakeSandboxSnapshot, disabled: takingSandboxSnapshot, children: "Take a code sandbox snapshot" })] }) })] }), openLoadDialog && (_jsx(Dialog, { title: _jsx("span", { style: { color: 'var(--fgColor-default)' }, children: "Choose a code sandbox snapshot to load" }), onClose: () => {
                     setOpenLoadDialog(false);
                 }, footerButtons: [
                     {
@@ -137,33 +137,33 @@ export function RuntimeSnapshotMenu({ children, connection, podName, multiServic
                     },
                     {
                         buttonType: 'primary',
-                        content: loadingRuntimeSnapshot ? (_jsx(Spinner, { size: "small" })) : ('Load'),
-                        disabled: loadingRuntimeSnapshot,
+                        content: loadingSandboxSnapshot ? (_jsx(Spinner, { size: "small" })) : ('Load'),
+                        disabled: loadingSandboxSnapshot,
                         onClick: async (event) => {
                             if (!event.defaultPrevented) {
                                 event.preventDefault();
-                                setLoadingRuntimeSnapshot(true);
+                                setLoadingSandboxSnapshot(true);
                                 try {
                                     setError(undefined);
                                     const snapshot = runtimeSnapshots.find(s => s.id === selection);
                                     if (snapshot && (connection || podName)) {
-                                        await onLoadRuntimeSnapshotSubmit({
+                                        await onLoadSandboxSnapshotSubmit({
                                             connection,
                                             id: snapshot.id,
                                             podName,
                                         });
                                     }
                                     else {
-                                        setError('No runtime snapshot found.');
+                                        setError('No code sandbox snapshot found.');
                                     }
                                 }
                                 finally {
-                                    setLoadingRuntimeSnapshot(false);
+                                    setLoadingSandboxSnapshot(false);
                                     setOpenLoadDialog(false);
                                 }
                             }
                         },
                         autoFocus: true,
                     },
-                ], children: _jsxs(Box, { as: "form", children: [_jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Snapshot" }), _jsx(Select, { name: "snapshot", value: selection, onChange: onRuntimeSnapshotChanged, block: true, children: runtimeSnapshots.map(s => (_jsx(Select.Option, { value: s.id, children: s.name ? `${s.name} (${s.id})` : s.id }, s.id))) })] }), error && _jsx(Flash, { variant: "danger", children: error })] }) }))] }));
+                ], children: _jsxs(Box, { as: "form", children: [_jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Snapshot" }), _jsx(Select, { name: "snapshot", value: selection, onChange: onSandboxSnapshotChanged, block: true, children: runtimeSnapshots.map(s => (_jsx(Select.Option, { value: s.id, children: s.name ? `${s.name} (${s.id})` : s.id }, s.id))) })] }), error && _jsx(Flash, { variant: "danger", children: error })] }) }))] }));
 }

package/lib/components/snapshots/index.d.ts

@@ -1 +1 @@
-export * from './RuntimeSnapshotMenu';
+export * from './SandboxSnapshotMenu';

package/lib/components/snapshots/index.js

@@ -2,4 +2,4 @@
  * Copyright (c) 2023-2025 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-export * from './RuntimeSnapshotMenu.js';
+export * from './SandboxSnapshotMenu.js';

package/lib/components/storage/ContentsBrowser.js

@@ -9,7 +9,7 @@ import { PromiseDelegate } from '@lumino/coreutils';
 import { ActionList, ActionMenu, Heading, IconButton, Spinner, TreeView, } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
 import { Blankslate, Dialog } from '@primer/react/experimental';
-import { CounterClockWiseIcon } from '@datalayer/icons-react';
+import { SyncIcon } from '@primer/octicons-react';
 import { useIsMounted } from 'usehooks-ts';
 import { useToast } from '../../hooks/index.js';
 import { UploadIconButton } from '../buttons/index.js';
@@ -225,7 +225,7 @@ export function ContentsBrowser(props) {
                             alignItems: 'center',
                             flexWrap: 'nowrap',
                             flexShrink: 0,
-                        }, children: [_jsx(IconButton, { variant: "invisible", "aria-label": 'Refresh contents browser.', title: 'Refresh contents browser.', icon: CounterClockWiseIcon, onClick: refresh }), _jsx(UploadIconButton, { label: 'Upload a file', multiple: true, upload: upload })] })] }), isLoading ? (_jsx(Box, { sx: {
+                        }, children: [_jsx(IconButton, { variant: "invisible", "aria-label": 'Refresh contents browser.', title: 'Refresh contents browser.', icon: SyncIcon, onClick: refresh }), _jsx(UploadIconButton, { label: 'Upload a file', multiple: true, upload: upload })] })] }), isLoading ? (_jsx(Box, { sx: {
                     gridArea: 'content',
                     display: 'flex',
                     alignItems: 'center',

package/lib/components/tokens/SpaceVariantToken.d.ts

@@ -1,5 +1,5 @@
 import { ISpaceVariant } from '../../models';
 export declare const SpaceVariantToken: (props: {
-    variant: ISpaceVariant;
+    variant: ISpaceVariant | string;
 }) => import("react/jsx-runtime").JSX.Element;
 export default SpaceVariantToken;

package/lib/components/tokens/SpaceVariantToken.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 /*
  * Copyright (c) 2023-2025 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
@@ -7,14 +7,17 @@ import { Token } from '@primer/react';
 import { ProjectIcon } from '@primer/octicons-react';
 import { StudentIcon } from '@datalayer/icons-react';
 export const SpaceVariantToken = (props) => {
-    const { variant } = props;
+    const variant = String(props.variant || 'default').toLowerCase();
+    if (variant.includes('project')) {
+        return _jsx(Token, { text: "project", leadingVisual: ProjectIcon });
+    }
     switch (variant) {
         case 'default':
-            return _jsx(Token, { text: "default", leadingVisual: ProjectIcon });
+            return _jsx(Token, { text: "default" });
         case 'course':
             return _jsx(Token, { text: "course", leadingVisual: StudentIcon });
         default:
-            return _jsx(_Fragment, {});
+            return _jsx(Token, { text: String(variant || 'default') });
     }
 };
 export default SpaceVariantToken;

package/lib/components/users/PeerIndicator.js

@@ -4,8 +4,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * Distributed under the terms of the Modified BSD License.
  */
 import { useEffect, useState } from 'react';
-import { Avatar, AvatarStack } from '@primer/react';
-import { getAvatarURL, getRelativeTime } from '../../utils/index.js';
+import { AvatarStack } from '@primer/react';
+import { getRelativeTime } from '../../utils/index.js';
+import { DLAvatar } from '../avatars/index.js';
 const AVATAR_SIZE = 28;
 const SPACER_USER_AGENT = 'DatalayerSpacer';
 const AWARENESS_NOTIFICATION_TIMEOUT_MS = 30_000;
@@ -89,12 +90,12 @@ export function PeersIndicator({ awareness, currentUserHandle, }) {
             if (peer.notification) {
                 title += `\n${peer.notification}`;
             }
-            return (_jsx(Avatar, { sx: {
+            return (_jsx(DLAvatar, { sx: {
                     border: peer.notificationType
                         ? `var(--borderWidth-thick) solid ${peer.notificationType}`
                         : 'none',
                 }, title: title, src: peer.avatarUrl
-                    ? getAvatarURL(peer.avatarUrl)
+                    ? peer.avatarUrl
                     : defaultAvatarSrc(peer.color, peer.initials), size: AVATAR_SIZE }, peer.displayName));
         }) }));
 }

package/lib/hooks/index.d.ts

@@ -28,5 +28,10 @@ export * from './useUser';
 export * from './useProjects';
 export * from './useProjectStore';
 export * from './useMobile';
+export * from './useUsageRefreshStore';
+export * from './usePrincipalStore';
+export * from './useBillableAccountStore';
+export * from './useSelectedPrincipal';
+export * from './useSelectedBillableAccount';
 export * from './useVisibilityObserver';
 export * from './useWindowSize';

package/lib/hooks/index.js

@@ -33,5 +33,10 @@ export * from './useUser.js';
 export * from './useProjects.js';
 export * from './useProjectStore.js';
 export * from './useMobile.js';
+export * from './useUsageRefreshStore.js';
+export * from './usePrincipalStore.js';
+export * from './useBillableAccountStore.js';
+export * from './useSelectedPrincipal.js';
+export * from './useSelectedBillableAccount.js';
 export * from './useVisibilityObserver.js';
 export * from './useWindowSize.js';

package/lib/hooks/useBillableAccountStore.d.ts

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

package/lib/hooks/useBillableAccountStore.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 useBillableAccountStore = create()(persist(set => ({
+    billableAccountKind: 'user',
+    billableAccountUid: undefined,
+    billableAccountHandle: undefined,
+    setBillableAccount: ({ kind, uid, handle }) => set(state => {
+        const unchanged = state.billableAccountKind === kind &&
+            state.billableAccountUid === uid &&
+            state.billableAccountHandle === handle;
+        if (unchanged) {
+            return state;
+        }
+        useUsageRefreshStore
+            .getState()
+            .requestUsageRefresh('billable-account-changed');
+        return {
+            billableAccountKind: kind,
+            billableAccountUid: uid,
+            billableAccountHandle: handle,
+        };
+    }),
+    resetBillableAccount: () => set(state => {
+        const unchanged = state.billableAccountKind === 'user' &&
+            state.billableAccountUid === undefined &&
+            state.billableAccountHandle === undefined;
+        if (unchanged) {
+            return state;
+        }
+        useUsageRefreshStore
+            .getState()
+            .requestUsageRefresh('billable-account-reset');
+        return {
+            billableAccountKind: 'user',
+            billableAccountUid: undefined,
+            billableAccountHandle: undefined,
+        };
+    }),
+}), {
+    name: 'datalayer-billable-account',
+    storage: createJSONStorage(() => localStorage),
+    partialize: state => ({
+        billableAccountKind: state.billableAccountKind,
+        billableAccountUid: state.billableAccountUid,
+        billableAccountHandle: state.billableAccountHandle,
+    }),
+}));
+export default useBillableAccountStore;