@delmaredigital/payload-experiments 0.2.0-rc.7 → 0.3.0-rc.4

package/dist/puck/editor/ExperimentSlotEditor.js

@@ -1,13 +1,24 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createUsePuck, registerOverlayPortal, useGetPuck } from '@puckeditor/core';
-import { useEffect, useId, useState } from 'react';
-import { pickerCopy } from '../copy.js';
+import { useEffect, useRef, useState } from 'react';
+import { Button } from '../../ui/Button.js';
+import { StatusChip } from '../../ui/StatusChip.js';
+import { Banner } from '../../ui/Banner.js';
+import { Tabs } from '../../ui/Tabs.js';
+import { accentVariables, deriveAccent, validateAccent } from '../../ui/accent.js';
+import { createExperimentSlotField } from '../experimentSlotField.js';
+import { resolvePuckRoutes } from '../routes.js';
+import { PuckHostProvider, usePuckRoutes } from '../hostContext.js';
+import { pickerCopy, slotLabels } from '../copy.js';
 import { experimentSlotDefaultProps, experimentSlotFields, experimentSlotLabel } from '../slotConfig.js';
 import { bannerFor, tabsFor } from './editor.model.js';
 import { cloneSlot } from './cloneSlot.js';
 import { CreateExperimentDrawer } from './CreateExperimentDrawer.js';
 import { editorCopy } from './copy.js';
+import { acquireArms, loadArms, setArms, useArms } from './armsCache.js';
+import { AddVariant, RemoveVersion, VersionActions, VersionWeights, useArmWrites } from './VersionBuilder.js';
+import { ResultsReadout } from './ResultsReadout.js';
 import './editor.css';
 const usePuckSelector = createUsePuck();
 // Public Puck registration enables native controls inside the editor canvas.
@@ -25,53 +36,141 @@ function isExperiment(value) {
 }
 function EditorRender(props) {
     const getPuck = useGetPuck();
-    const tabId = useId();
+    const { admin, api } = usePuckRoutes();
+    const root = useRef(null);
+    const [mode, setMode] = useState('light');
+    useEffect(()=>{
+        const node = root.current;
+        if (!node || !props.accent) return;
+        const update = ()=>setMode(node.closest('[data-theme="dark"], .dark') ? 'dark' : 'light');
+        update();
+        const observer = new MutationObserver(update);
+        for(let ancestor = node.parentElement; ancestor; ancestor = ancestor.parentElement){
+            observer.observe(ancestor, {
+                attributes: true,
+                attributeFilter: [
+                    'class',
+                    'data-theme'
+                ]
+            });
+        }
+        return ()=>observer.disconnect();
+    }, [
+        props.accent
+    ]);
     const experimentId = props.experiment?.id;
+    const bindingKey = JSON.stringify([
+        api,
+        props.id,
+        experimentId
+    ]);
+    const binding = useRef({
+        key: bindingKey,
+        live: true
+    });
+    binding.current.key = bindingKey;
+    useEffect(()=>{
+        binding.current.live = true;
+        return ()=>{
+            binding.current.live = false;
+        };
+    }, []);
+    const isCurrentBinding = ()=>binding.current.live && binding.current.key === bindingKey;
+    const knownArms = useArms(experimentId);
     const [loaded, setLoaded] = useState();
     const [active, setActive] = useState();
+    const [openMenu, setOpenMenu] = useState(null);
+    const [clearError, setClearError] = useState(null);
     const [creating, setCreating] = useState(false);
     // A non-empty variant is only overwritten after an explicit second confirmation.
     const [confirming, setConfirming] = useState(null);
+    // Keep a failed removal open even if the recovery read no longer contains that version.
+    const [removing, setRemoving] = useState(null);
     const pageTitle = usePuckSelector((state)=>typeof state.appState.data.root.props?.title === 'string' ? state.appState.data.root.props.title : '');
     const selected = usePuckSelector((state)=>state.selectedItem?.props.id === props.id);
     const originalEmpty = usePuckSelector((state)=>{
         const content = state.getItemById(props.id)?.props.control;
         return !Array.isArray(content) || content.length === 0;
     });
+    const orphanSlots = usePuckSelector((state)=>{
+        const item = state.getItemById(props.id);
+        return [
+            'variantA',
+            'variantB',
+            'variantC'
+        ].filter((slot)=>{
+            const content = item?.props[slot];
+            return knownArms && !knownArms.arms.includes(slot) && Array.isArray(content) && content.length > 0;
+        }).join(',');
+    }).split(',').filter(Boolean);
     useEffect(()=>{
         if (experimentId === undefined) return;
         const controller = new AbortController();
         let current = true;
+        let request = 0;
+        const releaseArms = acquireArms(experimentId);
         async function load() {
+            const revision = ++request;
             try {
-                const response = await fetch(`/api/xp-experiments/${encodeURIComponent(experimentId)}?depth=0`, {
-                    credentials: 'include',
-                    signal: controller.signal
-                });
-                if (!response.ok) throw new Error('load');
-                const doc = await response.json();
-                if (!isExperiment(doc)) throw new Error('document');
-                if (current) setLoaded({
-                    id: experimentId,
-                    doc
-                });
+                const doc = await loadArms(experimentId, async (signal)=>{
+                    const response = await fetch(`${api}/xp-experiments/${encodeURIComponent(experimentId)}?depth=0`, {
+                        credentials: 'include',
+                        signal
+                    });
+                    if (!response.ok) throw new Error('load');
+                    const doc = await response.json();
+                    if (!isExperiment(doc)) throw new Error('document');
+                    return doc;
+                }, controller.signal);
+                if (current && revision === request) {
+                    setLoaded({
+                        id: experimentId,
+                        doc
+                    });
+                }
             } catch  {
-                if (current) setLoaded({
-                    id: experimentId,
-                    error: true
-                });
+                if (current && revision === request) {
+                    setLoaded({
+                        id: experimentId,
+                        error: true
+                    });
+                }
             }
         }
         void load();
+        // The linked test opens in another tab; refresh this same document source on return.
+        const onVisible = ()=>{
+            if (document.visibilityState === 'visible') void load();
+        };
+        document.addEventListener('visibilitychange', onVisible);
         return ()=>{
             current = false;
             controller.abort();
+            releaseArms();
+            document.removeEventListener('visibilitychange', onVisible);
         };
     }, [
-        experimentId
+        experimentId,
+        api
     ]);
     const result = experimentId === undefined || loaded?.id !== experimentId ? undefined : loaded;
     const experiment = result?.doc;
+    const editable = experiment?.status === 'draft' || experiment?.status === 'stopped';
+    const [removed, setRemoved] = useState(null);
+    useEffect(()=>{
+        // Dialog cleanup must close the native modal before an outside tab can receive focus.
+        if (removed?.key === bindingKey) root.current?.querySelector('[role="tab"]')?.focus();
+    }, [
+        removed,
+        bindingKey
+    ]);
+    const writes = useArmWrites(`${api}/xp-experiments/${encodeURIComponent(String(experimentId))}`, (doc)=>{
+        setArms(experimentId, doc.arms.map((arm)=>arm.key));
+        if (isCurrentBinding()) setLoaded({
+            id: experimentId,
+            doc
+        });
+    }, isCurrentBinding, ()=>setClearError(null));
     const tabs = tabsFor(experiment);
     const activeSlot = active && active.id === experimentId ? active.slot : undefined;
     const slot = tabs.find((tab)=>tab.slot === activeSlot)?.slot ?? tabs[0]?.slot ?? 'control';
@@ -107,6 +206,39 @@ function EditorRender(props) {
             }
         });
     }
+    function removeContent(slot) {
+        if (!isCurrentBinding()) return;
+        const { getItemById, dispatch, getSelectorForId } = getPuck();
+        const item = getItemById(props.id), selector = getSelectorForId(props.id);
+        if (!item || !selector) {
+            setClearError({
+                key: bindingKey,
+                message: editorCopy.removeUncleared
+            });
+            return;
+        }
+        setClearError(null);
+        dispatch({
+            type: 'replace',
+            destinationIndex: selector.index,
+            destinationZone: selector.zone,
+            data: {
+                ...item,
+                props: {
+                    ...item.props,
+                    [slot]: []
+                }
+            }
+        });
+        setRemoved((current)=>({
+                key: bindingKey,
+                revision: (current?.revision ?? 0) + 1
+            }));
+        setActive({
+            id: experimentId,
+            slot: 'control'
+        });
+    }
     function bind(experiment) {
         const { getItemById, dispatch, getSelectorForId } = getPuck();
         const item = getItemById(props.id), selector = getSelectorForId(props.id);
@@ -125,7 +257,9 @@ function EditorRender(props) {
         });
     }
     return /*#__PURE__*/ _jsxs("section", {
+        ref: root,
         className: "xp-slot-root xp-slot-editor",
+        style: props.accent ? accentVariables(props.accent[mode]) : undefined,
         children: [
             /*#__PURE__*/ _jsxs("div", {
                 className: "xp-slot-chrome",
@@ -136,57 +270,84 @@ function EditorRender(props) {
                         children: [
                             /*#__PURE__*/ _jsx("h3", {
                                 className: "xp-slot-title",
-                                children: experiment?.name ?? pickerCopy.label
+                                children: experiment?.name ?? experimentSlotLabel
                             }),
-                            experiment ? /*#__PURE__*/ _jsx("span", {
-                                className: "xp-slot-status",
-                                "data-status": experiment.status,
-                                children: pickerCopy.statuses[experiment.status]
-                            }) : null,
-                            /*#__PURE__*/ _jsxs("div", {
-                                className: "xp-slot-actions",
-                                children: [
-                                    experimentId === undefined ? /*#__PURE__*/ _jsx("button", {
-                                        className: "xp-slot-button xp-slot-button-primary",
-                                        type: "button",
-                                        disabled: !selected,
-                                        onClick: ()=>setCreating(true),
-                                        children: editorCopy.createLabel
-                                    }) : null,
-                                    experiment ? /*#__PURE__*/ _jsx("a", {
-                                        className: "xp-slot-button xp-slot-button-primary",
-                                        href: `/admin/experiments/${encodeURIComponent(String(experimentId))}${experiment.status === 'draft' ? '' : '/results'}`,
-                                        target: "_blank",
-                                        rel: "noopener noreferrer",
-                                        children: experiment.status === 'draft' ? editorCopy.setup : editorCopy.viewResults
-                                    }) : null
-                                ]
-                            })
+                            experiment ? /*#__PURE__*/ _jsx(StatusChip, {
+                                status: experiment.status
+                            }) : experimentId === undefined ? /*#__PURE__*/ _jsx("span", {
+                                className: "xp-ui-status",
+                                children: editorCopy.notSetUp
+                            }) : null
                         ]
                     }),
-                    /*#__PURE__*/ _jsxs("p", {
-                        className: experiment?.status === 'running' ? 'xp-slot-notice xp-slot-warning' : 'xp-slot-notice',
-                        role: "status",
+                    /*#__PURE__*/ _jsx(Banner, {
+                        tone: result?.error ? 'error' : experiment?.status === 'running' ? 'warning' : 'info',
+                        children: experimentId === undefined ? bannerFor() : result?.error ? editorCopy.loadError : experiment ? bannerFor(experiment.status, winner) : editorCopy.loading
+                    }),
+                    orphanSlots.map((slot)=>/*#__PURE__*/ _jsx(Banner, {
+                            tone: "warning",
+                            children: editorCopy.orphan(slotLabels[slot])
+                        }, slot)),
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "xp-ui-button-group",
                         children: [
-                            experiment?.status === 'running' ? /*#__PURE__*/ _jsxs("svg", {
-                                className: "xp-slot-warning-icon",
-                                "aria-hidden": "true",
-                                viewBox: "0 0 24 24",
-                                fill: "none",
-                                stroke: "currentColor",
-                                strokeWidth: "2",
-                                children: [
-                                    /*#__PURE__*/ _jsx("path", {
-                                        d: "M12 3 2 21h20L12 3Z"
-                                    }),
-                                    /*#__PURE__*/ _jsx("path", {
-                                        d: "M12 9v5m0 3v1"
-                                    })
-                                ]
+                            experimentId === undefined ? /*#__PURE__*/ _jsx(Button, {
+                                variant: "primary",
+                                disabled: !selected,
+                                onClick: ()=>setCreating(true),
+                                children: editorCopy.createLabel
+                            }) : null,
+                            experiment ? /*#__PURE__*/ _jsx(Button, {
+                                href: `${admin}/experiments/${encodeURIComponent(String(experimentId))}${experiment.status === 'draft' ? '' : '/results'}`,
+                                target: "_blank",
+                                rel: "noopener noreferrer",
+                                children: experiment.status === 'draft' ? editorCopy.setup : editorCopy.viewResults
                             }) : null,
-                            experimentId === undefined ? bannerFor() : result?.error ? editorCopy.loadError : experiment ? bannerFor(experiment.status, winner) : editorCopy.loading
+                            experiment && editable ? /*#__PURE__*/ _jsx(AddVariant, {
+                                experiment: experiment,
+                                writes: writes,
+                                onSelect: (slot)=>{
+                                    if (isCurrentBinding()) setActive({
+                                        id: experimentId,
+                                        slot
+                                    });
+                                }
+                            }) : null
                         ]
                     }),
+                    experiment && !editable ? /*#__PURE__*/ _jsx("p", {
+                        className: "xp-ui-help",
+                        children: editorCopy.locked[experiment.status]
+                    }) : null,
+                    experiment && editable ? /*#__PURE__*/ _jsx(VersionWeights, {
+                        experiment: experiment,
+                        writes: writes
+                    }, `weights-${experimentId}`) : null,
+                    writes.error ? /*#__PURE__*/ _jsx("p", {
+                        role: "alert",
+                        className: "xp-ui-error",
+                        children: writes.error
+                    }) : null,
+                    clearError?.key === bindingKey ? /*#__PURE__*/ _jsx("p", {
+                        role: "alert",
+                        className: "xp-ui-error",
+                        children: clearError.message
+                    }) : null,
+                    removed?.key === bindingKey ? /*#__PURE__*/ _jsx("p", {
+                        className: "xp-ui-help",
+                        children: editorCopy.removed
+                    }) : null,
+                    experiment && experiment.status !== 'draft' ? /*#__PURE__*/ _jsx(ResultsReadout, {
+                        id: experimentId,
+                        api: api,
+                        experiment: experiment
+                    }, `results-${experimentId}`) : null,
+                    removing?.key === bindingKey ? /*#__PURE__*/ _jsx(RemoveVersion, {
+                        arm: removing.arm,
+                        writes: writes,
+                        onRemove: removeContent,
+                        onClose: ()=>setRemoving(null)
+                    }) : null,
                     creating ? /*#__PURE__*/ _jsx(CreateExperimentDrawer, {
                         initialName: pageTitle,
                         onCreate: bind,
@@ -197,96 +358,90 @@ function EditorRender(props) {
                         role: "alert",
                         children: [
                             /*#__PURE__*/ _jsx("p", {
-                                className: "xp-slot-notice",
                                 children: editorCopy.replaceConfirm(tabs.find((tab)=>tab.slot === confirming)?.label ?? confirming)
                             }),
                             /*#__PURE__*/ _jsxs("div", {
-                                className: "xp-slot-actions",
+                                className: "xp-ui-button-group",
                                 children: [
-                                    /*#__PURE__*/ _jsx("button", {
-                                        className: "xp-slot-button xp-slot-button-primary",
-                                        type: "button",
+                                    /*#__PURE__*/ _jsx(Button, {
+                                        variant: "primary",
                                         onClick: ()=>copyTo(confirming),
                                         children: editorCopy.replace
                                     }),
-                                    /*#__PURE__*/ _jsx("button", {
-                                        className: "xp-slot-button",
-                                        type: "button",
+                                    /*#__PURE__*/ _jsx(Button, {
                                         onClick: ()=>setConfirming(null),
                                         children: editorCopy.cancel
                                     })
                                 ]
                             })
                         ]
-                    }) : null,
-                    /*#__PURE__*/ _jsxs("div", {
-                        className: "xp-slot-toolbar",
-                        children: [
-                            /*#__PURE__*/ _jsx("div", {
-                                className: "xp-slot-tabs",
-                                role: "tablist",
-                                "aria-label": editorCopy.tabs,
-                                children: tabs.map((tab, index)=>/*#__PURE__*/ _jsx("button", {
-                                        className: "xp-slot-tab",
-                                        type: "button",
-                                        role: "tab",
-                                        id: `${tabId}-${tab.slot}`,
-                                        "aria-selected": tab.slot === slot,
-                                        tabIndex: tab.slot === slot ? 0 : -1,
-                                        "aria-controls": `${tabId}-panel`,
-                                        onClick: ()=>setActive({
-                                                id: experimentId,
-                                                slot: tab.slot
-                                            }),
-                                        onKeyDown: (event)=>{
-                                            const next = event.key === 'ArrowRight' ? (index + 1) % tabs.length : event.key === 'ArrowLeft' ? (index + tabs.length - 1) % tabs.length : event.key === 'Home' ? 0 : event.key === 'End' ? tabs.length - 1 : undefined;
-                                            if (next === undefined) return;
-                                            event.preventDefault();
-                                            setActive({
-                                                id: experimentId,
-                                                slot: tabs[next].slot
-                                            });
-                                            const buttons = event.currentTarget.parentElement?.querySelectorAll('[role="tab"]');
-                                            buttons?.[next]?.focus();
-                                        },
-                                        children: tab.label
-                                    }, tab.slot))
-                            }),
-                            slot !== 'control' ? /*#__PURE__*/ _jsx("div", {
-                                className: "xp-slot-actions",
-                                children: /*#__PURE__*/ _jsx("button", {
-                                    className: "xp-slot-button",
-                                    type: "button",
-                                    disabled: !selected || originalEmpty,
-                                    onClick: ()=>requestCopy(slot),
-                                    children: editorCopy.copy
-                                })
-                            }) : null
-                        ]
-                    })
-                ]
-            }),
-            /*#__PURE__*/ _jsxs("div", {
-                className: slotEmpty ? 'xp-slot-panel xp-slot-panel-empty' : 'xp-slot-panel',
-                role: "tabpanel",
-                id: `${tabId}-panel`,
-                "aria-labelledby": `${tabId}-${slot}`,
-                children: [
-                    /*#__PURE__*/ _jsx(Slot, {
-                        className: "xp-slot-drop-target"
-                    }),
-                    slotEmpty ? /*#__PURE__*/ _jsx("span", {
-                        className: "xp-slot-drop-label",
-                        children: editorCopy.dropZone(slot)
                     }) : null
                 ]
+            }),
+            /*#__PURE__*/ _jsx(Tabs, {
+                label: editorCopy.tabs,
+                value: slot,
+                tabListRef: registerControls,
+                onChange: (value)=>{
+                    setOpenMenu(null);
+                    setActive({
+                        id: experimentId,
+                        slot: value
+                    });
+                },
+                items: tabs.map((tab)=>({
+                        id: tab.slot,
+                        label: tab.label,
+                        actions: experiment ? /*#__PURE__*/ _jsx(VersionActions, {
+                            arm: experiment.arms.find((arm)=>arm.key === tab.slot),
+                            writes: writes,
+                            editable: editable,
+                            open: openMenu === tab.slot,
+                            onOpenChange: (open)=>setOpenMenu(open ? tab.slot : null),
+                            canCopy: selected && !originalEmpty,
+                            onCopy: requestCopy,
+                            onRequestRemove: ()=>setRemoving({
+                                    key: bindingKey,
+                                    arm: experiment.arms.find((arm)=>arm.key === tab.slot)
+                                })
+                        }, `${experimentId}-${tab.slot}`) : undefined,
+                        content: tab.slot === slot ? /*#__PURE__*/ _jsxs("div", {
+                            className: slotEmpty ? 'xp-slot-panel xp-slot-panel-empty' : 'xp-slot-panel',
+                            children: [
+                                /*#__PURE__*/ _jsx(Slot, {
+                                    className: "xp-slot-drop-target"
+                                }),
+                                slotEmpty ? /*#__PURE__*/ _jsx("span", {
+                                    className: "xp-slot-drop-label",
+                                    children: editorCopy.dropZone(slot)
+                                }) : null
+                            ]
+                        }) : null
+                    }))
             })
         ]
     });
 }
-export const ExperimentSlotEditor = {
-    label: experimentSlotLabel,
-    fields: experimentSlotFields,
-    defaultProps: experimentSlotDefaultProps,
-    render: EditorRender
-};
+export function createExperimentSlotEditor({ routes: inputRoutes, accent } = {}) {
+    validateAccent(accent);
+    const sets = accent ? deriveAccent(accent) : undefined;
+    const routes = resolvePuckRoutes(inputRoutes);
+    return {
+        label: experimentSlotLabel,
+        fields: {
+            ...experimentSlotFields,
+            experiment: createExperimentSlotField({
+                routes
+            })
+        },
+        defaultProps: experimentSlotDefaultProps,
+        render: (props)=>/*#__PURE__*/ _jsx(PuckHostProvider, {
+                routes: routes,
+                children: /*#__PURE__*/ _jsx(EditorRender, {
+                    ...props,
+                    accent: sets
+                })
+            })
+    };
+}
+export const ExperimentSlotEditor = createExperimentSlotEditor();

package/dist/puck/editor/ResultsReadout.d.ts

@@ -0,0 +1,6 @@
+import type { EditorExperiment } from './editor.model.js';
+export declare function ResultsReadout({ id, api, experiment }: {
+    id: string | number;
+    api: string;
+    experiment: EditorExperiment;
+}): import("react").JSX.Element;

package/dist/puck/editor/ResultsReadout.js

@@ -0,0 +1,99 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { Button } from '../../ui/Button.js';
+import { editorCopy as C } from './copy.js';
+// Matches admin/results/format.ts formatCount; importing it would pull admin copy into this bundle.
+const formatCount = (value)=>typeof value === 'number' && Number.isFinite(value) ? new Intl.NumberFormat('en-US', {
+        maximumFractionDigits: 0
+    }).format(value) : '—';
+export function ResultsReadout({ id, api, experiment }) {
+    const [data, setData] = useState(null);
+    const [refresh, setRefresh] = useState(0);
+    const pending = useRef(false);
+    const [busy, setBusy] = useState(false);
+    useEffect(()=>{
+        const controller = new AbortController();
+        pending.current = true;
+        setBusy(true);
+        setData(null);
+        async function load() {
+            try {
+                const [summary, results] = await Promise.all([
+                    fetch(`${api}/xp/experiments/summary?ids=${encodeURIComponent(id)}`, {
+                        credentials: 'include',
+                        cache: 'no-store',
+                        signal: controller.signal
+                    }),
+                    fetch(`${api}/xp/experiments/${encodeURIComponent(id)}/results`, {
+                        credentials: 'include',
+                        cache: 'no-store',
+                        signal: controller.signal
+                    })
+                ]);
+                if (!summary.ok || !results.ok) throw new Error('unavailable');
+                const [summaries, result] = await Promise.all([
+                    summary.json(),
+                    results.json()
+                ]);
+                const entry = summaries[id];
+                if (!entry || !Object.hasOwn(entry, 'verdict') || !Object.hasOwn(result, 'snapshot')) throw new Error('unavailable');
+                if (!controller.signal.aborted) setData({
+                    headline: entry.verdict?.headline ?? C.collecting,
+                    people: result.snapshot?.exposures.perArm ?? null
+                });
+            } catch  {
+                if (!controller.signal.aborted) setData('unavailable');
+            } finally{
+                if (!controller.signal.aborted) {
+                    pending.current = false;
+                    setBusy(false);
+                }
+            }
+        }
+        void load();
+        return ()=>controller.abort();
+    }, [
+        id,
+        api,
+        refresh
+    ]);
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "xp-slot-readout",
+        children: [
+            data === 'unavailable' ? /*#__PURE__*/ _jsx("p", {
+                className: "xp-ui-help",
+                children: C.resultsUnavailable
+            }) : data ? /*#__PURE__*/ _jsxs(_Fragment, {
+                children: [
+                    /*#__PURE__*/ _jsx("strong", {
+                        children: data.headline
+                    }),
+                    data.people ? /*#__PURE__*/ _jsx("div", {
+                        className: "xp-slot-people",
+                        children: [
+                            ...experiment.arms.filter((arm)=>arm.kind !== 'holdout'),
+                            ...experiment.arms.filter((arm)=>arm.kind === 'holdout')
+                        ].map((arm)=>/*#__PURE__*/ _jsx("span", {
+                                children: (arm.kind === 'holdout' ? C.holdoutPeople : C.people)(arm.label, formatCount(data.people[arm.key] ?? 0))
+                            }, arm.key))
+                    }) : null
+                ]
+            }) : /*#__PURE__*/ _jsx("p", {
+                className: "xp-ui-help",
+                children: C.loading
+            }),
+            /*#__PURE__*/ _jsx(Button, {
+                variant: "quiet",
+                size: "sm",
+                disabled: busy,
+                onClick: ()=>{
+                    if (pending.current) return;
+                    pending.current = true;
+                    setRefresh((value)=>value + 1);
+                },
+                children: C.refresh
+            })
+        ]
+    });
+}