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

package/dist/admin/surface/results/ResultsHeader.js

@@ -0,0 +1,177 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { formatAdminURL } from 'payload/shared';
+import { SurfaceShell } from '../SurfaceShell.js';
+import { Button } from '../../../ui/Button.js';
+import { Banner, StatusChip } from '../../../ui/Feedback.js';
+import { createApi } from '../../api.js';
+import { availableActions, actionGroupLabel } from '../../actions/actions.model.js';
+import { AllocateAction, ConfirmAction } from '../readiness/ActionDialogs.js';
+import { READINESS, daysRemaining, displayDate, nextStep } from '../readiness/readiness.model.js';
+import { READINESS_COPY as R, runningCopy, stoppedCopy, decidedCopy } from '../../copy/readiness.js';
+import { RESULTS_COPY as C } from '../../copy/results.js';
+import { TEST_PAGE } from '../../copy/testPage.js';
+export function ResultsHeader({ test, surface, resultsVersion, children, actions, released }) {
+    const doc = test.doc;
+    const [selected, setSelected] = useState(null);
+    const [people, setPeople] = useState(null);
+    useEffect(()=>{
+        let active = true;
+        if (surface.canReadResults && doc.status === 'running') {
+            void createApi(surface.apiRoute).summary([
+                doc.id
+            ]).then((result)=>{
+                const count = result.ok ? result.data?.[doc.id]?.exposures : undefined;
+                if (active && typeof count === 'number' && Number.isFinite(count)) setPeople(count);
+            }).catch(()=>{});
+        }
+        return ()=>{
+            active = false;
+        };
+    }, [
+        doc.id,
+        doc.status,
+        surface.apiRoute,
+        surface.canReadResults,
+        resultsVersion
+    ]);
+    const decision = doc.decision;
+    const winner = actionGroupLabel(decision?.winnerArm ?? 'control', doc.arms.find((item)=>item.key === decision?.winnerArm)?.label);
+    const available = availableActions({
+        status: doc.status,
+        kind: doc.kind,
+        arms: doc.arms,
+        decision,
+        canManage: surface.canManage
+    }).filter((action)=>doc.status === 'running' ? [
+            'allocate',
+            'stop'
+        ].includes(action.id) : action.id !== 'decide').sort((a, b)=>doc.status === 'running' ? [
+            'allocate',
+            'stop'
+        ].indexOf(a.id) - [
+            'allocate',
+            'stop'
+        ].indexOf(b.id) : 0);
+    const next = nextStep(test.preflight, {
+        ...doc,
+        flagPoints: surface.flagPoints
+    });
+    const ready = Boolean(test.preflight && !test.preflightPending && !test.preflightError && test.preflight.checks.every((check)=>check.ok));
+    const startReason = next?.sentence ?? (!ready ? test.preflightError ? R.checkError : R.checking : undefined);
+    const action = available.find((item)=>item.id === selected);
+    const sentence = doc.status === 'running' ? runningCopy(displayDate(doc.startedAt), people, daysRemaining(doc, Date.now())) : doc.status === 'stopped' ? stoppedCopy(displayDate(doc.stoppedAt)) : doc.status === 'decided' ? decidedCopy(displayDate(doc.decidedAt), winner) : doc.status === 'archived' ? R.archived : null;
+    const testURL = formatAdminURL({
+        adminRoute: surface.adminRoute,
+        path: `/experiments/${encodeURIComponent(String(doc.id))}`
+    });
+    return /*#__PURE__*/ _jsxs(SurfaceShell, {
+        adminRoute: surface.adminRoute,
+        title: doc.name,
+        crumbs: [
+            {
+                label: C.tests,
+                href: formatAdminURL({
+                    adminRoute: surface.adminRoute,
+                    path: '/experiments'
+                })
+            },
+            {
+                label: doc.name,
+                href: testURL
+            },
+            {
+                label: C.results
+            }
+        ],
+        status: /*#__PURE__*/ _jsxs(_Fragment, {
+            children: [
+                /*#__PURE__*/ _jsx("span", {
+                    className: "xp-tests-kind",
+                    children: TEST_PAGE.kinds[doc.kind]
+                }),
+                /*#__PURE__*/ _jsx(StatusChip, {
+                    status: doc.status
+                })
+            ]
+        }),
+        subtitle: /*#__PURE__*/ _jsxs(_Fragment, {
+            children: [
+                sentence ? /*#__PURE__*/ _jsx("p", {
+                    role: "status",
+                    children: sentence
+                }) : null,
+                released,
+                surface.canManage ? test.preflight?.checks.filter((check)=>check.code === 'make-content-unsupported' && check.warning).map((check, index)=>/*#__PURE__*/ _jsx(Banner, {
+                        tone: "warning",
+                        children: READINESS[check.code].next(check.detail, doc)
+                    }, `${check.code}/${index}`)) : null
+            ]
+        }),
+        actions: /*#__PURE__*/ _jsxs("div", {
+            className: "xp-ui-button-group",
+            children: [
+                /*#__PURE__*/ _jsx(Button, {
+                    variant: "quiet",
+                    href: testURL,
+                    children: C.backToSetup
+                }),
+                available.map((item)=>/*#__PURE__*/ _jsx(Button, {
+                        variant: item.tone === 'danger' ? 'danger' : 'secondary',
+                        disabled: item.id === 'start' && !!startReason || !!selected || test.hasUnsaved || test.saving === 'saving' || item.id === 'allocate' && doc.allocation >= 100,
+                        title: item.id === 'start' ? startReason : item.id === 'allocate' && doc.allocation >= 100 ? R.everyone : undefined,
+                        onClick: ()=>setSelected(item.id),
+                        children: item.id === 'allocate' ? R.allocate : item.label
+                    }, item.id)),
+                actions
+            ]
+        }),
+        children: [
+            test.errors._section ? /*#__PURE__*/ _jsx(Banner, {
+                tone: "error",
+                children: test.errors._section
+            }) : null,
+            test.preflightError ? /*#__PURE__*/ _jsx(Banner, {
+                tone: "error",
+                children: test.preflightError
+            }) : null,
+            children,
+            action?.id === 'allocate' ? /*#__PURE__*/ _jsx(AllocateAction, {
+                test: test,
+                surface: surface,
+                onClose: ()=>setSelected(null)
+            }) : action ? /*#__PURE__*/ _jsx(ConfirmAction, {
+                test: test,
+                surface: surface,
+                action: action,
+                winnerLabel: winner,
+                onClose: ()=>setSelected(null)
+            }) : null
+        ]
+    });
+}
+export function ReaderResultsShell({ surface, children, data }) {
+    // CORE-48 sends a missing name as an empty string.
+    const title = data?.experiment?.name?.trim() || C.test;
+    return /*#__PURE__*/ _jsx(SurfaceShell, {
+        adminRoute: surface.adminRoute,
+        title: title,
+        crumbs: [
+            {
+                label: C.tests,
+                href: formatAdminURL({
+                    adminRoute: surface.adminRoute,
+                    path: '/experiments'
+                })
+            },
+            {
+                label: title
+            },
+            {
+                label: C.results
+            }
+        ],
+        children: children
+    });
+}

package/dist/admin/surface/results/recommendation.model.d.ts

@@ -1,8 +1,9 @@
 import type { PhaseSummary } from '../../../types/endpoints.js';
 import type { Status } from '../../../types/contracts.js';
-import type { Snapshot, VerdictCode } from '../../../types/snapshot.js';
+import type { VerdictCode } from '../../../types/snapshot.js';
+import { type DisplaySnapshot } from '../../results/snapshot.js';
 export interface RecommendationContext {
-    snapshot: Snapshot;
+    snapshot: DisplaySnapshot;
     phase?: PhaseSummary;
     plannedDurationDays?: number | null;
     status?: Status;

package/dist/admin/surface/results/recommendation.model.js

@@ -1,5 +1,9 @@
+import { formatDate } from '../../format/date.js';
 import { armLabel } from '../../labels.js';
 import { formatCount, formatPercent } from '../../results/format.js';
+import { RESULTS_COPY } from '../../copy/results.js';
+import { legacyRecommendationWinner } from '../../results/legacy.js';
+import { isLegacySnapshot } from '../../results/snapshot.js';
 import { RECOMMENDATION_COPY as C, collectingRecommendation, guardrailRecommendation, mixedRecommendation, rolloutCollectingRecommendation, rolloutReadoutRecommendation, runningRecommendation, winnerRecommendation, worseRecommendation, storedGuardrailFinding } from '../../copy/recommendation.js';
 function label(ctx, key, fallback = C.group) {
     const stored = ctx.phase?.arms.find((arm)=>arm.key === key)?.label.trim();
@@ -13,7 +17,10 @@ function label(ctx, key, fallback = C.group) {
 }
 const primary = ({ snapshot })=>snapshot.metrics.find((metric)=>metric.role === 'primary');
 const worse = (ctx)=>primary(ctx)?.comparisons.find((comparison)=>comparison.significant === 'worse' && ctx.phase?.arms.some((arm)=>arm.key === comparison.arm && arm.kind === 'variant'))?.arm;
-const winner = (ctx)=>label(ctx, ctx.snapshot.winnerArm ?? ctx.snapshot.verdict.recommendedArm, C.winner);
+const rolloutWinner = (ctx)=>isLegacySnapshot(ctx.snapshot) ? legacyRecommendationWinner(ctx.snapshot, ctx.phase) : {
+        key: ctx.snapshot.winnerArm,
+        label: label(ctx, ctx.snapshot.winnerArm)
+    };
 /** Select stored findings and format them; never run inference in the admin. */ export const RECOMMENDATION = {
     unavailable: ()=>C.unavailable,
     'data-problem': ()=>C.dataProblem,
@@ -42,18 +49,14 @@ const winner = (ctx)=>label(ctx, ctx.snapshot.winnerArm ?? ctx.snapshot.verdict.
         const days = ctx.plannedDurationDays;
         const start = Date.parse(ctx.phase?.startedAt ?? '');
         const end = days != null && Number.isFinite(days) && days > 0 ? start + days * 86_400_000 : NaN;
-        return Number.isFinite(end) ? runningRecommendation(new Intl.DateTimeFormat('en-US', {
-            month: 'short',
-            day: 'numeric',
-            year: 'numeric',
-            timeZone: 'UTC'
-        }).format(end)) : C.keepRunning;
+        return Number.isFinite(end) ? runningRecommendation(formatDate(end)) : C.keepRunning;
     },
     'no-difference': ()=>C.noDifference,
-    'rollout-collecting': (ctx)=>rolloutCollectingRecommendation(winner(ctx)),
-    'rollout-readout': (ctx)=>rolloutReadoutRecommendation(winner(ctx), formatPercent(primary(ctx)?.comparisons.find((comparison)=>comparison.arm === (ctx.snapshot.winnerArm ?? ctx.snapshot.verdict.recommendedArm))?.lift, true))
+    'rollout-collecting': (ctx)=>rolloutCollectingRecommendation(rolloutWinner(ctx).label),
+    'rollout-readout': (ctx)=>rolloutReadoutRecommendation(rolloutWinner(ctx).label, formatPercent(primary(ctx)?.comparisons.find((comparison)=>comparison.arm === rolloutWinner(ctx).key)?.lift, true))
 };
 export const recommendation = (ctx)=>{
+    if (!isLegacySnapshot(ctx.snapshot) && ctx.snapshot.phaseKind === 'rollout' && ctx.snapshot.winnerArm === null) return RESULTS_COPY.missingWinner;
     const sentence = RECOMMENDATION[ctx.snapshot.verdict.code];
     return sentence(ctx);
 };

package/dist/admin/surface/results/useResults.d.ts

@@ -1,14 +1,17 @@
 import type { DocId, Status } from '../../../types/contracts.js';
 import type { PhaseSummary, ResultsResponse } from '../../../types/endpoints.js';
 import { type ApiResult } from '../../api.js';
+import type { PageReleaseDecision } from '../../results/releasePages.model.js';
 export interface ResultsDocument {
+    flagPoint?: string;
+    kind?: string;
     status: Status;
     arms: Array<{
         key: string;
         kind?: string;
         label?: string;
     }>;
-    decision?: {
+    decision?: PageReleaseDecision & {
         phase: number;
         winnerArm?: string;
     } | null;
@@ -27,18 +30,33 @@ export declare function useResults(id: DocId, { apiRoute, canReadResults, canMan
 }): {
     api: {
         start: (id: DocId) => Promise<ApiResult<import("../../../types/endpoints.js").TransitionSuccess>>;
-        allocate: (id: DocId, body: import("../../../types/endpoints.js").AllocateBody) => Promise<ApiResult<import("../../../types/endpoints.js").TransitionSuccess>>;
-        addMetric: (id: DocId, body: import("../../../types/endpoints.js").AddMetricBody) => Promise<ApiResult<import("../../../types/endpoints.js").TransitionSuccess>>;
+        allocate: (id: DocId, body: import("../../../types/endpoints.js").AllocateBody, options?: {
+            notFound?: string;
+            codes?: Readonly<Record<string, string>>;
+            fallback?: string;
+        }) => Promise<ApiResult<import("../../../types/endpoints.js").TransitionSuccess>>;
+        addMetric: (id: DocId, body: import("../../../types/endpoints.js").AddMetricBody, options?: {
+            notFound?: string;
+            codes?: Readonly<Record<string, string>>;
+            fallback?: string;
+        }) => Promise<ApiResult<import("../../../types/endpoints.js").TransitionSuccess>>;
         stop: (id: DocId) => Promise<ApiResult<import("../../../types/endpoints.js").TransitionSuccess>>;
         decide: (id: DocId, body: import("../../../types/endpoints.js").DecideBody) => Promise<ApiResult<import("../../../types/endpoints.js").TransitionSuccess>>;
         releaseHoldout: (id: DocId) => Promise<ApiResult<import("../../../types/endpoints.js").TransitionSuccess>>;
+        releasePages: (id: DocId) => Promise<ApiResult<import("../../../types/endpoints.js").TransitionSuccess>>;
         makeContent: (id: DocId) => Promise<ApiResult<import("../../../types/endpoints.js").MakeContentResult>>;
+        dismissContentEntry: (id: DocId, body: import("../../../types/endpoints.js").DismissContentEntryBody) => Promise<ApiResult<import("../../../types/endpoints.js").DismissContentEntryResult>>;
+        restoreContentEntry: (id: DocId, body: import("../../../types/endpoints.js").RestoreContentEntryBody) => Promise<ApiResult<import("../../../types/endpoints.js").RestoreContentEntryResult>>;
         archive: (id: DocId, body: import("../../../types/endpoints.js").ArchiveBody) => Promise<ApiResult<import("../../../types/endpoints.js").TransitionSuccess>>;
         preflight: (id: DocId) => Promise<ApiResult<import("../../../types/endpoints.js").PreflightResult>>;
         previewToken: (id: DocId, arm: string) => Promise<ApiResult<import("../../../types/endpoints.js").PreviewTokenResult>>;
         results: (id: DocId, options?: {
             phase?: number;
             series?: boolean;
+        } & {
+            notFound?: string;
+            codes?: Readonly<Record<string, string>>;
+            fallback?: string;
         }) => Promise<ApiResult<ResultsResponse>>;
         recompute: (id: DocId) => Promise<ApiResult<{
             snapshotId: string;

package/dist/admin/surface/results/useResults.js

@@ -85,7 +85,8 @@ export function useResults(id, { apiRoute, canReadResults, canManage = true }) {
             }),
             api.results(id, {
                 phase: round ?? undefined,
-                series: true
+                series: true,
+                notFound: round === null ? undefined : API_MESSAGES.roundNotFound
             })
         ]).then(([document, result])=>{
             if (signal.aborted) return;

package/dist/admin/surface/setting/parts.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId, useState } from 'react';
-import { CheckboxInput, TextareaInput, TextInput } from '@payloadcms/ui';
+import { Checkbox, Textarea, TextInput, NumberInput, Select } from '../../../ui/Inputs.js';
 import { EDITABLE_BY_STATUS, isEditable } from '../../../collections/experiments/editability.js';
 import { coerceParam, paramIssue, paramsForArm, setParam } from '../../arms/params.model.js';
 import { SETTING_COPY } from '../../copy/setting.js';
@@ -18,36 +18,31 @@ function Binding({ test, surface }) {
     return /*#__PURE__*/ _jsxs("div", {
         className: "xp-setting-binding",
         children: [
-            editable ? /*#__PURE__*/ _jsxs("label", {
-                htmlFor: id,
+            editable ? /*#__PURE__*/ _jsxs(Select, {
+                id: id,
+                label: SETTING_COPY.setting,
+                value: point?.id ?? '',
+                "aria-describedby": point ? `${id}-description` : undefined,
+                onChange: (event)=>{
+                    const current = test.doc;
+                    if (!current || !surface.canManage || !isEditable(current.status, 'flagPoint') || event.target.value === current.flagPoint) return;
+                    const next = surface.flagPoints.find((point)=>point.id === event.target.value);
+                    if (!next) return;
+                    test.stage({
+                        flagPoint: next.id,
+                        arms: bindSetting(current.arms, next)
+                    });
+                    void test.commit();
+                },
                 children: [
-                    SETTING_COPY.setting,
-                    /*#__PURE__*/ _jsxs("select", {
-                        id: id,
-                        value: point?.id ?? '',
-                        "aria-describedby": point ? `${id}-description` : undefined,
-                        onChange: (event)=>{
-                            const current = test.doc;
-                            if (!current || !surface.canManage || !isEditable(current.status, 'flagPoint') || event.target.value === current.flagPoint) return;
-                            const next = surface.flagPoints.find((point)=>point.id === event.target.value);
-                            if (!next) return;
-                            test.stage({
-                                flagPoint: next.id,
-                                arms: bindSetting(current.arms, next)
-                            });
-                            void test.commit();
-                        },
-                        children: [
-                            !point ? /*#__PURE__*/ _jsx("option", {
-                                value: "",
-                                children: SETTING_COPY.choose
-                            }) : null,
-                            surface.flagPoints.map((point)=>/*#__PURE__*/ _jsx("option", {
-                                    value: point.id,
-                                    children: point.label
-                                }, point.id))
-                        ]
-                    })
+                    !point ? /*#__PURE__*/ _jsx("option", {
+                        value: "",
+                        children: SETTING_COPY.choose
+                    }) : null,
+                    surface.flagPoints.map((point)=>/*#__PURE__*/ _jsx("option", {
+                            value: point.id,
+                            children: point.label
+                        }, point.id))
                 ]
             }) : /*#__PURE__*/ _jsxs("p", {
                 title: reason ?? undefined,
@@ -111,7 +106,7 @@ function Parameter({ test, surface, armIndex, paramKey, field }) {
     };
     const control = paramControl(field);
     const shared = {
-        path: id,
+        id,
         label: field.label,
         required: field.required
     };
@@ -146,12 +141,12 @@ function Parameter({ test, surface, armIndex, paramKey, field }) {
                         children: reason
                     }) : null
                 ]
-            }) : control === 'checkbox' ? /*#__PURE__*/ _jsx(CheckboxInput, {
+            }) : control === 'checkbox' ? /*#__PURE__*/ _jsx(Checkbox, {
                 ...shared,
-                id: id,
+                error: issue ?? undefined,
                 name: id,
                 checked: value === true,
-                onToggle: (event)=>save(event.target.checked)
+                onChange: (event)=>save(event.target.checked)
             }) : control === 'segmented' ? /*#__PURE__*/ _jsxs("fieldset", {
                 "aria-describedby": issue ? `${id}-error` : undefined,
                 children: [
@@ -177,61 +172,45 @@ function Parameter({ test, surface, armIndex, paramKey, field }) {
                             }, option.value))
                     })
                 ]
-            }) : control === 'select' ? /*#__PURE__*/ _jsxs("label", {
-                htmlFor: id,
-                children: [
-                    field.label,
-                    /*#__PURE__*/ _jsxs("select", {
-                        id: id,
-                        value: text,
-                        required: field.required,
-                        "aria-invalid": !!issue,
-                        "aria-describedby": issue ? `${id}-error` : undefined,
-                        onChange: (event)=>save(event.target.value),
-                        children: [
-                            /*#__PURE__*/ _jsx("option", {
-                                value: "",
-                                children: SETTING_COPY.empty
-                            }),
-                            field.options?.map((option)=>/*#__PURE__*/ _jsx("option", {
-                                    value: option.value,
-                                    children: option.label
-                                }, option.value))
-                        ]
-                    })
-                ]
-            }) : control === 'number' ? /*#__PURE__*/ _jsxs("label", {
-                htmlFor: id,
+            }) : control === 'select' ? /*#__PURE__*/ _jsxs(Select, {
+                id: id,
+                label: field.label,
+                value: text,
+                required: field.required,
+                error: issue ?? undefined,
+                onChange: (event)=>save(event.target.value),
                 children: [
-                    field.label,
-                    /*#__PURE__*/ _jsx("input", {
-                        id: id,
-                        type: "number",
-                        min: field.min,
-                        max: field.max,
-                        step: "any",
-                        required: field.required,
-                        value: typeof value === 'number' && Number.isFinite(value) || typeof value === 'string' ? value : '',
-                        "aria-invalid": !!issue,
-                        "aria-describedby": issue ? `${id}-error` : undefined,
-                        onChange: (event)=>editDraft(event.target.value)
-                    })
+                    /*#__PURE__*/ _jsx("option", {
+                        value: "",
+                        children: SETTING_COPY.empty
+                    }),
+                    field.options?.map((option)=>/*#__PURE__*/ _jsx("option", {
+                            value: option.value,
+                            children: option.label
+                        }, option.value))
                 ]
-            }) : control === 'textarea' ? /*#__PURE__*/ _jsx(TextareaInput, {
+            }) : control === 'number' ? /*#__PURE__*/ _jsx(NumberInput, {
+                id: id,
+                label: field.label,
+                min: field.min,
+                max: field.max,
+                step: "any",
+                required: field.required,
+                value: typeof value === 'number' && Number.isFinite(value) || typeof value === 'string' ? value : '',
+                error: issue ?? undefined,
+                onChange: (event)=>editDraft(event.target.value)
+            }) : control === 'textarea' ? /*#__PURE__*/ _jsx(Textarea, {
                 ...shared,
-                Error: inlineError,
-                showError: !!issue,
+                error: issue ?? undefined,
                 value: text,
                 onChange: (event)=>editDraft(event.target.value)
             }) : /*#__PURE__*/ _jsx(TextInput, {
                 ...shared,
-                Error: inlineError,
-                showError: !!issue,
-                hasMany: false,
+                error: issue ?? undefined,
                 value: text,
                 onChange: (event)=>editDraft(event.target.value)
             }),
-            arm.kind === 'control' || !editable || control !== 'text' && control !== 'textarea' ? inlineError : null
+            arm.kind === 'control' || !editable || control === 'segmented' ? inlineError : null
         ]
     });
 }
@@ -239,22 +218,30 @@ function VersionContent({ test, surface, armIndex }) {
     const doc = test.doc;
     const arm = doc?.arms[armIndex];
     if (!doc || !arm) return null;
-    if (arm.kind === 'holdout') return /*#__PURE__*/ _jsx("p", {
+    if (arm.kind === 'holdout') return /*#__PURE__*/ _jsx("span", {
+        className: "xp-content-chip",
         children: SETTING_COPY.holdout
     });
     const point = surface.flagPoints.find((point)=>point.id === doc.flagPoint);
     if (!point) return /*#__PURE__*/ _jsx("p", {
         children: SETTING_COPY.choose
     });
-    return /*#__PURE__*/ _jsx("div", {
+    const ready = Object.entries(point.params).every(([key, field])=>!paramIssue(field, paramsForArm(arm, point)[key]));
+    return /*#__PURE__*/ _jsxs("div", {
         className: "xp-setting-values",
-        children: Object.entries(point.params).map(([key, field])=>/*#__PURE__*/ _jsx(Parameter, {
-                test: test,
-                surface: surface,
-                armIndex: armIndex,
-                paramKey: key,
-                field: field
-            }, `${doc.id}:${point.id}:${arm.key}:${key}:${doc.status}:${surface.canManage}`))
+        children: [
+            /*#__PURE__*/ _jsx("span", {
+                className: `xp-content-chip ${ready ? 'xp-content-ready' : 'xp-content-empty'}`,
+                children: ready ? SETTING_COPY.valuesReady : SETTING_COPY.setValues
+            }),
+            Object.entries(point.params).map(([key, field])=>/*#__PURE__*/ _jsx(Parameter, {
+                    test: test,
+                    surface: surface,
+                    armIndex: armIndex,
+                    paramKey: key,
+                    field: field
+                }, `${doc.id}:${point.id}:${arm.key}:${key}:${doc.status}:${surface.canManage}`))
+        ]
     });
 }
 export const settingParts = {

package/dist/admin/surface/setting/setting.css

@@ -1,16 +1,4 @@
-.xp-setting-binding select,
-.xp-setting-parameter select,
-.xp-setting-parameter input[type='number'] {
-  display: block;
-  width: 100%;
-  padding: 0.65rem;
-  margin-top: 0.4rem;
-  border: 1px solid var(--xp-border);
-  border-radius: var(--xp-radius);
-  background: var(--xp-input-bg);
-  color: var(--xp-text);
-}
-.xp-setting-values { display: grid; gap: 1rem; }
+.xp-setting-values { display: grid; gap: var(--xp-space-3); }
 .xp-setting-value { white-space: pre-wrap; }
 .xp-setting-lock { color: var(--xp-text-muted); }
 .xp-setting-parameter fieldset { border: 0; padding: 0; margin: 0; }
@@ -25,5 +13,5 @@
   background: var(--xp-input-bg);
   color: var(--xp-text);
 }
-.xp-setting-segments input:checked + span { background: var(--xp-border); border-color: var(--xp-text); }
-.xp-setting-segments input:focus-visible + span { outline: 2px solid var(--xp-text); outline-offset: 2px; }
+.xp-setting-segments input:checked + span { background: var(--xp-accent-subtle); border-color: var(--xp-accent); }
+.xp-setting-segments input:focus-visible + span { outline: 2px solid var(--xp-focus); outline-offset: 2px; }