@delmaredigital/payload-experiments 0.0.0-stage → 0.1.0-rc.3

package/dist/admin/review/review.model.d.ts

@@ -0,0 +1,31 @@
+import type { MetricSource, Status } from '../../types/contracts.js';
+import type { PreflightResult } from '../../types/endpoints.js';
+export declare function reviewView(preflight: PreflightResult, { status, primaryMetricKind }: {
+    status: Status;
+    primaryMetricKind?: MetricSource['kind'];
+}): {
+    checks: {
+        ok: boolean;
+        done: string | undefined;
+        hint: string | undefined;
+        detail: string | undefined;
+    }[];
+    placements: {
+        previewAvailable: boolean;
+        collection: string;
+        id: import("../../types/contracts.js").DocId;
+        title: string;
+        url?: string;
+        ok: boolean;
+        detail?: string;
+    }[];
+    baseline: string;
+    traffic: string;
+    estimate: string;
+    estimateWarning: boolean;
+    canStart: boolean;
+    applyValues: {
+        plannedDurationDays: number;
+        sequentialTuningParameter: number;
+    } | null;
+};

package/dist/admin/review/review.model.js

@@ -0,0 +1,40 @@
+import { REVIEW_COPY as C, REVIEW_DONE, REVIEW_HINTS } from '../copy/review.js';
+const number = (value)=>new Intl.NumberFormat('en-US', {
+        maximumFractionDigits: 1
+    }).format(value);
+export function reviewView(preflight, { status, primaryMetricKind }) {
+    const { baseline, estimate } = preflight;
+    const weeks = estimate ? Math.round(estimate.weeks * 10) / 10 : 0;
+    const formatted = baseline ? new Intl.NumberFormat('en-US', primaryMetricKind === 'binomial' ? {
+        style: 'percent',
+        maximumFractionDigits: 1
+    } : {
+        minimumFractionDigits: primaryMetricKind === 'revenue' ? 2 : 0,
+        maximumFractionDigits: primaryMetricKind === 'revenue' ? 2 : 1
+    }).format(baseline.value) : null;
+    return {
+        checks: preflight.checks.map((check)=>{
+            const detail = typeof check.detail === 'string' ? check.detail : check.detail && typeof check.detail === 'object' && 'message' in check.detail && typeof check.detail.message === 'string' ? check.detail.message : undefined;
+            const hint = check.ok ? undefined : REVIEW_HINTS[check.code] ?? detail ?? C.checkFallback;
+            return {
+                ok: check.ok,
+                done: check.ok ? REVIEW_DONE[check.code] ?? C.checkDoneFallback : undefined,
+                hint,
+                detail: detail === hint ? undefined : detail
+            };
+        }),
+        placements: preflight.placements.map((placement)=>({
+                ...placement,
+                previewAvailable: Boolean(placement.url)
+            })),
+        baseline: formatted === null ? C.noBaseline : `Over the last 28 days: ${formatted}`,
+        traffic: preflight.trafficPerDay === null ? C.unknownTraffic : `About ${number(preflight.trafficPerDay)} people a day`,
+        estimate: !estimate ? C.noEstimate : !estimate.feasible ? C.infeasible : `≈ ${number(weeks)} weeks`,
+        estimateWarning: Boolean(estimate && (weeks > 8 || !estimate.feasible)),
+        canStart: preflight.checks.every((check)=>check.ok) && (status === 'draft' || status === 'stopped'),
+        applyValues: estimate ? {
+            plannedDurationDays: estimate.plannedDurationDays,
+            sequentialTuningParameter: estimate.sequentialTuningParameter
+        } : null
+    };
+}

package/dist/admin/status.model.d.ts

@@ -0,0 +1,16 @@
+import type { Status } from '../types/contracts.js';
+export type PillTone = 'neutral' | 'success' | 'warning' | 'info' | 'muted';
+export declare function statusPill({ status, arms, decision }: {
+    status: Status;
+    arms?: readonly {
+        key: string;
+    }[] | null;
+    decision?: {
+        winnerArm?: string | null;
+        holdoutReleasedAt?: string | null;
+    } | null;
+}): {
+    label: string;
+    tone: PillTone;
+    tooltip: string;
+};

package/dist/admin/status.model.js

@@ -0,0 +1,17 @@
+import { statusLabel } from './labels.js';
+import { STATUS_TOOLTIPS } from './copy/status.js';
+const TONES = {
+    draft: 'neutral',
+    running: 'success',
+    stopped: 'warning',
+    decided: 'info',
+    archived: 'muted'
+};
+export function statusPill({ status, arms = [], decision }) {
+    const holdout = status === 'decided' && arms?.some((group)=>group.key === 'holdout') && Boolean(decision?.winnerArm) && decision?.winnerArm !== 'control' && !decision?.holdoutReleasedAt;
+    return {
+        label: statusLabel(status),
+        tone: TONES[status],
+        tooltip: holdout ? STATUS_TOOLTIPS.decidedWithHoldout : STATUS_TOOLTIPS[status]
+    };
+}

package/dist/admin/styles.css

@@ -0,0 +1,10 @@
+/* Admin styles for the experiments plugin; loaded by src/admin/styles.ts. */
+.xp-status-pill { font-weight: 600; }
+.xp-status-pill--neutral { background: var(--theme-elevation-150); color: var(--theme-elevation-800); }
+.xp-status-pill--success { background: var(--theme-success-150); color: var(--theme-success-850); }
+.xp-status-pill--warning { background: var(--theme-warning-150); color: var(--theme-warning-850); }
+.xp-status-pill--info { background: var(--theme-elevation-200); color: var(--theme-elevation-900); }
+.xp-status-pill--muted { background: var(--theme-elevation-100); color: var(--theme-elevation-600); }
+.xp-locked-notice, .xp-notice { padding: 0.75rem; border-inline-start: 3px solid var(--theme-elevation-400); background: var(--theme-elevation-50); color: var(--theme-elevation-800); }
+.xp-notice--warning { border-color: var(--theme-warning-500); background: var(--theme-warning-100); }
+.xp-notice--error { border-color: var(--theme-error-500); background: var(--theme-error-100); }

package/dist/admin/styles.d.ts

@@ -0,0 +1 @@
+import './styles.css';

package/dist/admin/styles.js

@@ -0,0 +1,2 @@
+// Load admin styles from mounted components so barrels stay free of side effects.
+import './styles.css';

package/dist/admin/summaryBatcher.d.ts

@@ -0,0 +1,8 @@
+import type { DocId } from '../types/contracts.js';
+import type { SummaryResponse } from '../types/endpoints.js';
+import type { createApi } from './api.js';
+export type SummaryEntry = SummaryResponse[DocId];
+type Api = Pick<ReturnType<typeof createApi>, 'summary'>;
+/** All list cells mounted in this tick share a request, even with separate useApi instances. */
+export declare function requestSummary(api: Api, id: DocId): Promise<SummaryEntry | null>;
+export {};

package/dist/admin/summaryBatcher.js

@@ -0,0 +1,33 @@
+let pending = [];
+/** All list cells mounted in this tick share a request, even with separate useApi instances. */ export function requestSummary(api, id) {
+    return new Promise((resolve)=>{
+        pending.push({
+            id,
+            resolve
+        });
+        if (pending.length !== 1) return;
+        queueMicrotask(()=>{
+            const batch = pending;
+            pending = [];
+            const ids = [
+                ...new Map(batch.map((item)=>[
+                        String(item.id),
+                        item.id
+                    ])).values()
+            ];
+            for(let offset = 0; offset < ids.length; offset += 100){
+                const chunk = ids.slice(offset, offset + 100);
+                const keys = new Set(chunk.map(String));
+                const callers = batch.filter((item)=>keys.has(String(item.id)));
+                void (async ()=>{
+                    try {
+                        const result = await api.summary(chunk);
+                        for (const caller of callers)caller.resolve(result.ok ? result.data?.[caller.id] ?? null : null);
+                    } catch  {
+                        for (const caller of callers)caller.resolve(null);
+                    }
+                })();
+            }
+        });
+    });
+}

package/dist/admin/targeting/TargetingAttributeField.d.ts

@@ -0,0 +1,2 @@
+import type { TextFieldClientProps } from 'payload';
+export declare function TargetingAttributeField({ path, field, readOnly }: TextFieldClientProps): import("react").JSX.Element;

package/dist/admin/targeting/TargetingAttributeField.js

@@ -0,0 +1,31 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SelectInput, useField, useFormFields } from '@payloadcms/ui';
+import { isEditable } from '../../collections/experiments/editability.js';
+import { WHO_COPY } from '../copy/who.js';
+import { humaniseAttribute } from './targeting.model.js';
+export function TargetingAttributeField({ path, field, readOnly }) {
+    const { value, setValue } = useField({
+        path
+    });
+    const status = useFormFields(([fields])=>fields.status?.value ?? 'draft');
+    const keys = field.admin?.custom?.attributeKeys ?? {};
+    const locked = Boolean(readOnly || field.admin?.readOnly || !isEditable(status, 'targeting'));
+    return /*#__PURE__*/ _jsx("div", {
+        children: /*#__PURE__*/ _jsx(SelectInput, {
+            path: path,
+            name: path,
+            label: WHO_COPY.attribute,
+            required: field.required,
+            options: Object.keys(keys).map((key)=>({
+                    label: humaniseAttribute(key),
+                    value: key
+                })),
+            value: value ?? '',
+            readOnly: locked,
+            onChange: (option)=>{
+                if (!locked) setValue(option && !Array.isArray(option) ? option.value : null);
+            }
+        })
+    });
+}

package/dist/admin/targeting/TargetingOpField.d.ts

@@ -0,0 +1,2 @@
+import type { TextFieldClientProps } from 'payload';
+export declare function TargetingOpField({ path, field, readOnly }: TextFieldClientProps): import("react").JSX.Element;

package/dist/admin/targeting/TargetingOpField.js

@@ -0,0 +1,45 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SelectInput, useField, useFormFields } from '@payloadcms/ui';
+import { useEffect, useRef } from 'react';
+import { isEditable } from '../../collections/experiments/editability.js';
+import { isOpValid } from '../../targeting/ops.js';
+import { WHO_COPY } from '../copy/who.js';
+import { opLabel, opsFor, rowPath } from './targeting.model.js';
+export function TargetingOpField({ path, field, readOnly }) {
+    const { value, setValue } = useField({
+        path
+    });
+    const row = rowPath(path);
+    const attribute = useFormFields(([fields])=>fields[`${row}.attribute`]?.value);
+    const status = useFormFields(([fields])=>fields.status?.value ?? 'draft');
+    const keys = field.admin?.custom?.attributeKeys ?? {};
+    const type = keys[attribute ?? '']?.type;
+    const previousType = useRef(type);
+    const locked = Boolean(readOnly || field.admin?.readOnly || !isEditable(status, 'targeting'));
+    useEffect(()=>{
+        const changed = previousType.current !== type;
+        previousType.current = type;
+        if (!locked && type && (changed || !isOpValid(type, value ?? ''))) setValue(opsFor(type)[0]);
+    }, [
+        type,
+        value,
+        locked,
+        setValue
+    ]);
+    return /*#__PURE__*/ _jsx(SelectInput, {
+        path: path,
+        name: path,
+        label: WHO_COPY.operator,
+        required: field.required,
+        options: opsFor(type).map((op)=>({
+                label: opLabel(type, op),
+                value: op
+            })),
+        value: value ?? '',
+        readOnly: locked || !type,
+        onChange: (option)=>{
+            if (!locked) setValue(option && !Array.isArray(option) ? option.value : null);
+        }
+    });
+}

package/dist/admin/targeting/TargetingValueField.d.ts

@@ -0,0 +1,2 @@
+import type { JSONFieldClientProps } from 'payload';
+export declare function TargetingValueField({ path, field, readOnly }: JSONFieldClientProps): import("react").JSX.Element;

package/dist/admin/targeting/TargetingValueField.js

@@ -0,0 +1,142 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { FieldError, SelectInput, TextInput, useField, useFormFields } from '@payloadcms/ui';
+import { useEffect, useRef, useState } from 'react';
+import { isEditable } from '../../collections/experiments/editability.js';
+import { isOpValid } from '../../targeting/ops.js';
+import { WHO_COPY } from '../copy/who.js';
+import { coerceValue, emptyListHint, rowPath, valueInput } from './targeting.model.js';
+// Preserve an unfinished comma list while the form receives its typed JSON value.
+function CommaList({ path, value, setValue, readOnly, required }) {
+    const formatted = Array.isArray(value) ? value.join(', ') : String(value ?? '');
+    const [text, setText] = useState(formatted);
+    const lastWritten = useRef(undefined);
+    useEffect(()=>{
+        if (JSON.stringify(value) !== lastWritten.current) setText(formatted);
+    }, [
+        value,
+        formatted
+    ]);
+    return /*#__PURE__*/ _jsx(TextInput, {
+        path: path,
+        label: WHO_COPY.value,
+        value: text,
+        readOnly: readOnly,
+        required: required,
+        onChange: (event)=>{
+            if (readOnly) return;
+            setText(event.target.value);
+            const next = coerceValue('string', 'in', event.target.value);
+            lastWritten.current = JSON.stringify(next);
+            setValue(next);
+        }
+    });
+}
+export function TargetingValueField({ path, field, readOnly }) {
+    const { value, setValue } = useField({
+        path
+    });
+    const row = rowPath(path);
+    const attribute = useFormFields(([fields])=>fields[`${row}.attribute`]?.value);
+    const op = useFormFields(([fields])=>fields[`${row}.op`]?.value);
+    const status = useFormFields(([fields])=>fields.status?.value ?? 'draft');
+    const keys = field.admin?.custom?.attributeKeys ?? {};
+    const definition = keys[attribute ?? ''];
+    const candidate = op ?? '';
+    const valid = Boolean(definition && isOpValid(definition.type, candidate));
+    const operator = definition && isOpValid(definition.type, candidate) ? candidate : 'eq';
+    const input = valueInput(definition, operator);
+    const locked = Boolean(readOnly || field.admin?.readOnly || !isEditable(status, 'targeting') || !valid);
+    const type = definition?.type;
+    useEffect(()=>{
+        if (locked || !type || !isOpValid(type, candidate) || value == null) return;
+        const next = coerceValue(type, candidate, value);
+        if (JSON.stringify(next) !== JSON.stringify(value)) setValue(next);
+    }, [
+        type,
+        candidate,
+        value,
+        locked,
+        setValue
+    ]);
+    const write = (raw)=>{
+        if (!locked && definition && isOpValid(definition.type, operator)) setValue(coerceValue(definition.type, operator, raw));
+    };
+    const many = operator === 'in' || operator === 'nin';
+    const hint = emptyListHint(operator, value);
+    const props = {
+        path,
+        label: WHO_COPY.value,
+        readOnly: locked,
+        required: field.required
+    };
+    // position: relative anchors Payload's absolutely positioned FieldError tooltip to this field.
+    return /*#__PURE__*/ _jsxs("div", {
+        style: {
+            position: 'relative'
+        },
+        children: [
+            input.kind === 'select' || input.kind === 'multiselect' || input.kind === 'boolean' ? /*#__PURE__*/ _jsx(SelectInput, {
+                ...props,
+                name: path,
+                hasMany: input.kind === 'multiselect',
+                options: input.kind === 'boolean' ? [
+                    {
+                        label: WHO_COPY.true,
+                        value: 'true'
+                    },
+                    {
+                        label: WHO_COPY.false,
+                        value: 'false'
+                    }
+                ] : input.options,
+                value: many ? Array.isArray(value) ? value.map(String) : [] : value == null ? '' : String(value),
+                onChange: (option)=>write(Array.isArray(option) ? option.map((item)=>item.value) : option?.value)
+            }) : input.kind === 'number' ? /*#__PURE__*/ _jsxs(_Fragment, {
+                children: [
+                    /*#__PURE__*/ _jsx("label", {
+                        htmlFor: path,
+                        children: WHO_COPY.value
+                    }),
+                    /*#__PURE__*/ _jsx("input", {
+                        id: path,
+                        name: path,
+                        type: "number",
+                        step: "any",
+                        required: field.required,
+                        readOnly: locked,
+                        value: typeof value === 'number' || typeof value === 'string' ? value : '',
+                        style: {
+                            display: 'block',
+                            color: 'var(--theme-text)',
+                            background: 'var(--theme-input-bg)',
+                            border: '1px solid var(--theme-elevation-200)',
+                            padding: '0.5rem'
+                        },
+                        onChange: (event)=>write(event.target.value)
+                    }),
+                    /*#__PURE__*/ _jsx(FieldError, {
+                        path: path
+                    })
+                ]
+            }) : many ? /*#__PURE__*/ _jsx(CommaList, {
+                ...props,
+                value: value,
+                setValue: write
+            }, `${path}:${attribute}:${operator}`) : /*#__PURE__*/ _jsx(TextInput, {
+                ...props,
+                value: typeof value === 'string' ? value : '',
+                onChange: (event)=>write(event.target.value)
+            }),
+            definition?.type === 'string' ? /*#__PURE__*/ _jsx("p", {
+                children: WHO_COPY.caseNote
+            }) : null,
+            many && input.kind === 'text' ? /*#__PURE__*/ _jsx("p", {
+                children: WHO_COPY.listNote
+            }) : null,
+            hint ? /*#__PURE__*/ _jsx("p", {
+                children: hint
+            }) : null
+        ]
+    });
+}

package/dist/admin/targeting/targeting.model.d.ts

@@ -0,0 +1,18 @@
+import type { SerializedAttributeKeys } from '../../types/admin.js';
+import type { TargetingOp } from '../../targeting/ops.js';
+type Attribute = SerializedAttributeKeys[string];
+export type AttributeType = Attribute['type'];
+export declare function opsFor(type?: AttributeType): readonly TargetingOp[];
+export declare function opLabel(type: AttributeType, op: TargetingOp): string;
+export declare function valueInput(attribute?: Attribute, op?: TargetingOp): {
+    kind: 'text' | 'number' | 'boolean' | 'select' | 'multiselect';
+    options?: {
+        label: string;
+        value: string;
+    }[];
+};
+export declare function coerceValue(type: AttributeType, op: TargetingOp, raw: unknown): string | number | boolean | string[] | null;
+export declare function rowPath(path: string): string;
+export declare function emptyListHint(op: TargetingOp, value: unknown): string | undefined;
+export declare function humaniseAttribute(key: string): string;
+export {};

package/dist/admin/targeting/targeting.model.js

@@ -0,0 +1,48 @@
+import { TARGETING_OPS, isOpValid } from '../../targeting/ops.js';
+import { NUMBER_OP_LABELS, STRING_OP_LABELS, WHO_COPY } from '../copy/who.js';
+export function opsFor(type) {
+    return type ? TARGETING_OPS[type] : [];
+}
+export function opLabel(type, op) {
+    if (!isOpValid(type, op)) return '';
+    if (type === 'boolean') return STRING_OP_LABELS.eq;
+    return type === 'number' ? NUMBER_OP_LABELS[op] : STRING_OP_LABELS[op];
+}
+export function valueInput(attribute, op = 'eq') {
+    const many = op === 'in' || op === 'nin';
+    if (attribute?.values) return {
+        kind: many ? 'multiselect' : 'select',
+        options: attribute.values.map((value)=>({
+                label: value,
+                value
+            }))
+    };
+    return {
+        kind: attribute?.type === 'number' ? 'number' : attribute?.type === 'boolean' ? 'boolean' : 'text'
+    };
+}
+export function coerceValue(type, op, raw) {
+    if (!isOpValid(type, op)) return null;
+    if (type === 'string') {
+        if (op === 'in' || op === 'nin') return (Array.isArray(raw) ? raw.map(String) : String(raw ?? '').split(',')).map((value)=>value.trim()).filter(Boolean);
+        return raw == null ? '' : String(raw);
+    }
+    if (type === 'number') {
+        if (raw == null || typeof raw === 'string' && !raw.trim()) return null;
+        const value = Number(raw);
+        return Number.isFinite(value) ? value : null;
+    }
+    return raw === true || raw === 'true' ? true : raw === false || raw === 'false' ? false : null;
+}
+export function rowPath(path) {
+    return path.slice(0, Math.max(0, path.lastIndexOf('.')));
+}
+export function emptyListHint(op, value) {
+    if (op !== 'in' && op !== 'nin') return undefined;
+    const list = coerceValue('string', op, value);
+    return Array.isArray(list) && list.length === 0 ? WHO_COPY.emptyListNote : undefined;
+}
+export function humaniseAttribute(key) {
+    const words = key.replace(/([a-z0-9])([A-Z])/g, '$1 $2').replace(/[_-]+/g, ' ');
+    return words.charAt(0).toUpperCase() + words.slice(1);
+}

package/dist/admin/useApi.d.ts

@@ -0,0 +1,20 @@
+export declare function useApi(): {
+    start: (id: import("../types/contracts.js").DocId) => Promise<import("./api.js").ApiResult<import("../types/endpoints.js").TransitionSuccess>>;
+    allocate: (id: import("../types/contracts.js").DocId, body: import("../types/endpoints.js").AllocateBody) => Promise<import("./api.js").ApiResult<import("../types/endpoints.js").TransitionSuccess>>;
+    addMetric: (id: import("../types/contracts.js").DocId, body: import("../types/endpoints.js").AddMetricBody) => Promise<import("./api.js").ApiResult<import("../types/endpoints.js").TransitionSuccess>>;
+    stop: (id: import("../types/contracts.js").DocId) => Promise<import("./api.js").ApiResult<import("../types/endpoints.js").TransitionSuccess>>;
+    decide: (id: import("../types/contracts.js").DocId, body: import("../types/endpoints.js").DecideBody) => Promise<import("./api.js").ApiResult<import("../types/endpoints.js").TransitionSuccess>>;
+    releaseHoldout: (id: import("../types/contracts.js").DocId) => Promise<import("./api.js").ApiResult<import("../types/endpoints.js").TransitionSuccess>>;
+    makeContent: (id: import("../types/contracts.js").DocId) => Promise<import("./api.js").ApiResult<import("../types/endpoints.js").MakeContentResult>>;
+    archive: (id: import("../types/contracts.js").DocId, body: import("../types/endpoints.js").ArchiveBody) => Promise<import("./api.js").ApiResult<import("../types/endpoints.js").TransitionSuccess>>;
+    preflight: (id: import("../types/contracts.js").DocId) => Promise<import("./api.js").ApiResult<import("../types/endpoints.js").PreflightResult>>;
+    previewToken: (id: import("../types/contracts.js").DocId, arm: string) => Promise<import("./api.js").ApiResult<import("../types/endpoints.js").PreviewTokenResult>>;
+    results: (id: import("../types/contracts.js").DocId, options?: {
+        phase?: number;
+        series?: boolean;
+    }) => Promise<import("./api.js").ApiResult<import("../types/endpoints.js").ResultsResponse>>;
+    recompute: (id: import("../types/contracts.js").DocId) => Promise<import("./api.js").ApiResult<{
+        snapshotId: string;
+    }>>;
+    summary: (ids: readonly import("../types/contracts.js").DocId[]) => Promise<import("./api.js").ApiResult<import("../types/endpoints.js").SummaryResponse>>;
+};

package/dist/admin/useApi.js

@@ -0,0 +1,10 @@
+'use client';
+import { useMemo } from 'react';
+import { useConfig } from '@payloadcms/ui';
+import { createApi } from './api.js';
+export function useApi() {
+    const { config } = useConfig();
+    return useMemo(()=>createApi(config.routes.api), [
+        config.routes.api
+    ]);
+}

package/dist/admin/useLayerUsage.d.ts

@@ -0,0 +1,15 @@
+import type { DocId } from '../types/contracts.js';
+export declare function useLayerExperiments(layerId: DocId | null): {
+    used: number;
+    free: number;
+    rows: {
+        name: string;
+        status: import("../types/contracts.js").Status;
+        slices: number;
+    }[];
+} | null;
+export declare function useLayerUsage(layerId: DocId | null): {
+    name: string;
+    used: number;
+    free: number;
+} | null;

package/dist/admin/useLayerUsage.js

@@ -0,0 +1,92 @@
+'use client';
+import { useConfig } from '@payloadcms/ui';
+import { useEffect, useState } from 'react';
+import { layerUsage } from './layerUsage.model.js';
+// Shared by the layer document and the allocation field; all requests use the editor's access.
+export function useLayerExperiments(layerId) {
+    const { config } = useConfig();
+    const api = config.routes.api;
+    const id = layerId == null ? null : String(layerId);
+    const [state, setState] = useState(null);
+    useEffect(()=>{
+        setState(null);
+        if (id == null) return;
+        const controller = new AbortController();
+        async function load() {
+            const docs = [];
+            let page = 1;
+            while(!controller.signal.aborted){
+                const query = new URLSearchParams({
+                    depth: '0',
+                    limit: '100',
+                    page: String(page),
+                    'where[layer][equals]': id,
+                    'where[status][in]': 'running,decided'
+                });
+                const response = await fetch(`${api}/xp-experiments?${query}`, {
+                    credentials: 'include',
+                    signal: controller.signal
+                });
+                if (!response.ok) {
+                    if (!controller.signal.aborted) setState(null);
+                    return;
+                }
+                const data = await response.json();
+                docs.push(...data.docs);
+                if (!data.hasNextPage) break;
+                page++;
+            }
+            if (!controller.signal.aborted) setState({
+                api,
+                id: id,
+                usage: layerUsage(docs)
+            });
+        }
+        void load().catch(()=>{
+            if (!controller.signal.aborted) setState(null);
+        });
+        return ()=>controller.abort();
+    }, [
+        api,
+        id
+    ]);
+    return id != null && state?.api === api && state.id === id ? state.usage : null;
+}
+export function useLayerUsage(layerId) {
+    const { config } = useConfig();
+    const api = config.routes.api;
+    const id = layerId == null ? null : String(layerId);
+    const usage = useLayerExperiments(layerId);
+    const [state, setState] = useState(null);
+    useEffect(()=>{
+        setState(null);
+        if (id == null) return;
+        const controller = new AbortController();
+        void fetch(`${api}/xp-layers/${encodeURIComponent(id)}?depth=0`, {
+            credentials: 'include',
+            signal: controller.signal
+        }).then(async (response)=>{
+            if (!response.ok) {
+                if (!controller.signal.aborted) setState(null);
+                return;
+            }
+            const doc = await response.json();
+            if (!controller.signal.aborted) setState({
+                api,
+                id,
+                name: doc.name
+            });
+        }).catch(()=>{
+            if (!controller.signal.aborted) setState(null);
+        });
+        return ()=>controller.abort();
+    }, [
+        api,
+        id
+    ]);
+    return usage && id != null && state?.api === api && state.id === id ? {
+        name: state.name,
+        used: usage.used,
+        free: usage.free
+    } : null;
+}

package/dist/client/ExperimentPageview.d.ts

@@ -0,0 +1 @@
+export declare function ExperimentPageview(): null;

package/dist/client/ExperimentPageview.js

@@ -0,0 +1,27 @@
+'use client';
+import { useContext, useEffect } from 'react';
+import { sendExposure } from './beacon.js';
+import { ExperimentsContext } from './context.js';
+export function ExperimentPageview() {
+    const value = useContext(ExperimentsContext);
+    const pageviews = value?.pageviews;
+    const apiRoute = value?.apiRoute;
+    useEffect(()=>{
+        if (!pageviews || apiRoute === undefined) return;
+        // Read the path at commit time: on an App Router soft navigation the new page renders before the URL updates.
+        const pathname = window.location.pathname;
+        for (const { slug, phase, arm } of pageviews){
+            sendExposure(apiRoute, {
+                type: 'exposure',
+                experiment: slug,
+                phase,
+                arm,
+                policy: 'pageview'
+            }, pathname);
+        }
+    }, [
+        pageviews,
+        apiRoute
+    ]);
+    return null;
+}

package/dist/client/ExperimentsProvider.d.ts

@@ -0,0 +1,6 @@
+import type * as React from 'react';
+import type { ClientAssignments } from '../types/assignments.js';
+export declare function ExperimentsProvider(props: {
+    value: ClientAssignments;
+    children: React.ReactNode;
+}): React.JSX.Element;