@delmaredigital/payload-experiments 0.3.0-rc.4 → 0.4.0-rc.2

package/dist/admin/surface/pagePicker/PageCombobox.js

@@ -0,0 +1,395 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useId, useMemo, useRef, useState } from 'react';
+import { createApi } from '../../api.js';
+import { PAGE_COPY as C, pageFieldCopy, pageNotFoundCopy } from '../../copy/pages.js';
+import { TextInput } from '../../../ui/TextInput.js';
+import { normalisePath } from '../../../runtime/normalisePath.js';
+import { reasonFor } from '../test/fields.js';
+import { disabledPageReason, isLatestPageRequest } from './pagePicker.model.js';
+import './pagePicker.css';
+const display = (row)=>`${row.title ? `${row.title} · ` : ''}${row.path ?? ''}${row.published === false ? ` · ${C.draft}` : ''}`;
+/** One input owns focus; list options are navigated through aria-activedescendant. */ export function PageCombobox({ collection, test, armKey, apiRoute }) {
+    const api = useMemo(()=>createApi(apiRoute), [
+        apiRoute
+    ]);
+    const id = useId();
+    const root = useRef(null);
+    const arm = test.doc?.arms.find((item)=>item.key === armKey);
+    const target = arm?.pageTarget || '';
+    const matches = (path)=>Boolean(target && path != null && normalisePath(path) === normalisePath(target));
+    const remembered = arm && test.chosenPages[arm.key];
+    const chosen = remembered && matches(remembered.path) ? remembered : undefined;
+    const placement = test.preflight?.pagePlacements?.find((entry)=>entry.arm === armKey && entry.collection === collection.slug && entry.id != null && matches(entry.path));
+    const resolved = chosen ?? placement;
+    const needsLookup = Boolean(target && !resolved);
+    const lookupKey = JSON.stringify([
+        collection.slug,
+        target
+    ]);
+    const lookups = useRef({});
+    const [, updateLookup] = useState(0);
+    const lookupRevision = useRef(0);
+    useEffect(()=>{
+        if (!needsLookup || lookups.current[lookupKey]) return;
+        const controller = new AbortController();
+        const request = ++lookupRevision.current;
+        const pending = {};
+        const discardPending = ()=>{
+            if (lookups.current[lookupKey] === pending) delete lookups.current[lookupKey];
+        };
+        // Defer dispatch so StrictMode's discarded effect cannot cache an aborted attempt.
+        void Promise.resolve().then(async ()=>{
+            if (controller.signal.aborted) return;
+            lookups.current[lookupKey] = pending;
+            const result = await api.pages({
+                collection: collection.slug,
+                path: target
+            }, controller.signal);
+            if (controller.signal.aborted || !isLatestPageRequest(request, lookupRevision.current)) {
+                discardPending();
+                return;
+            }
+            lookups.current[lookupKey] = result.ok && result.data ? {
+                row: result.data.docs[0],
+                missing: result.data.docs.length === 0
+            } : {};
+            updateLookup((value)=>value + 1);
+        });
+        return ()=>{
+            controller.abort();
+            discardPending();
+        };
+    }, [
+        api,
+        collection.slug,
+        target,
+        lookupKey,
+        needsLookup
+    ]);
+    const lookup = lookups.current[lookupKey];
+    const value = resolved ? display(resolved) : !target ? '' : lookup?.missing ? pageNotFoundCopy(target, collection.label) : lookup?.row ? lookup.row.title ? display(lookup.row) : target : target;
+    const currentId = resolved?.id ?? lookup?.row?.id;
+    const [open, setOpen] = useState(false);
+    const [search, setSearch] = useState('');
+    const [q, setQuery] = useState('');
+    const [page, setPage] = useState(1);
+    const [refresh, setRefresh] = useState(0);
+    const [rows, setRows] = useState([]);
+    const [more, setMore] = useState(false);
+    const [reveal, setReveal] = useState(8);
+    const [active, setActive] = useState(null);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState('');
+    const revision = useRef(0);
+    const firstNew = useRef(null);
+    const locked = reasonFor(test, 'arms');
+    const saving = test.saving === 'saving';
+    const blocked = Boolean(locked || saving);
+    const reset = ()=>{
+        setPage(1);
+        setReveal(8);
+        setActive(null);
+        firstNew.current = null;
+        setRefresh((value)=>value + 1);
+    };
+    const close = ()=>{
+        setOpen(false);
+        setActive(null);
+    };
+    const show = (query = '')=>{
+        if (blocked || open) return;
+        setSearch(query);
+        setQuery(query);
+        setRows([]);
+        setMore(false);
+        setActive(null);
+        reset();
+        setOpen(true);
+    };
+    useEffect(()=>{
+        if (search === q) return;
+        const timer = setTimeout(()=>{
+            setQuery(search);
+            setPage(1);
+            setReveal(8);
+        }, 250);
+        return ()=>clearTimeout(timer);
+    }, [
+        search,
+        q
+    ]);
+    useEffect(()=>{
+        if (!open) return;
+        let lastReturn = -Infinity;
+        const focus = ()=>{
+            if (document.visibilityState !== 'visible' || Date.now() - lastReturn < 100) return;
+            lastReturn = Date.now();
+            reset();
+        };
+        const visible = ()=>{
+            if (document.visibilityState === 'visible') focus();
+        };
+        const outside = (event)=>{
+            if (!root.current?.contains(event.target)) close();
+        };
+        window.addEventListener('focus', focus);
+        document.addEventListener('visibilitychange', visible);
+        document.addEventListener('pointerdown', outside);
+        document.addEventListener('click', outside);
+        return ()=>{
+            window.removeEventListener('focus', focus);
+            document.removeEventListener('visibilitychange', visible);
+            document.removeEventListener('pointerdown', outside);
+            document.removeEventListener('click', outside);
+        };
+    }, [
+        open
+    ]);
+    useEffect(()=>{
+        if (!open) return;
+        const controller = new AbortController();
+        const request = ++revision.current;
+        setLoading(true);
+        setError('');
+        void api.pages({
+            collection: collection.slug,
+            q,
+            page
+        }, controller.signal).then((result)=>{
+            if (controller.signal.aborted || !isLatestPageRequest(request, revision.current)) return;
+            if (result.ok && result.data) {
+                // These rows belong to this request; a reset/search aborts it. Commit the
+                // pending highlight with the rows, before a final page can remove More.
+                const combined = page === 1 ? result.data.docs : [
+                    ...rows,
+                    ...result.data.docs
+                ];
+                const nextRows = combined.filter((row, index)=>combined.findIndex((item)=>item.id === row.id) === index);
+                setRows(nextRows);
+                if (firstNew.current != null) {
+                    const row = nextRows[firstNew.current];
+                    setActive(row ? String(row.id) : null);
+                    firstNew.current = null;
+                }
+                setMore(result.data.hasNextPage);
+            } else {
+                setMore(false);
+                setError(C.error);
+                firstNew.current = null;
+            }
+            setLoading(false);
+        });
+        return ()=>controller.abort();
+    }, [
+        api,
+        collection.slug,
+        q,
+        page,
+        refresh,
+        open
+    ]);
+    const visibleRows = rows.slice(0, reveal);
+    const hasMore = rows.length > reveal || more;
+    const optionKeys = [
+        ...visibleRows.map((row)=>String(row.id)),
+        ...hasMore ? [
+            'more'
+        ] : []
+    ];
+    const activeKey = active != null && optionKeys.includes(active) ? active : undefined;
+    useEffect(()=>{
+        if (open && activeKey) root.current?.ownerDocument.getElementById(`${id}-option-${activeKey}`)?.scrollIntoView?.({
+            block: 'nearest'
+        });
+    }, [
+        open,
+        activeKey,
+        id
+    ]);
+    const disabled = (row)=>disabledPageReason(row, armKey, test.doc?.arms ?? [], test.preflight?.pagePlacements, test.chosenPages, collection.label, collection.slug);
+    const choose = (key)=>{
+        if (blocked) return;
+        if (key === 'more') {
+            if (loading) return;
+            const offset = visibleRows.length;
+            const nextReveal = offset + 8;
+            setReveal(nextReveal);
+            if (rows[offset]) setActive(String(rows[offset].id));
+            else firstNew.current = offset;
+            if (more && rows.length < nextReveal) {
+                setLoading(true);
+                setPage((count)=>count + 1);
+            }
+            return;
+        }
+        const row = rows.find((item)=>String(item.id) === key);
+        if (!arm || !row || row.path === null || disabled(row)) return;
+        void test.choosePage(arm.key, {
+            id: row.id,
+            path: row.path,
+            title: row.title,
+            published: row.published
+        });
+        close();
+        root.current?.querySelector('input')?.focus();
+    };
+    const label = pageFieldCopy(arm?.label ?? armKey);
+    return /*#__PURE__*/ _jsxs("div", {
+        ref: root,
+        className: "xp-page-combobox",
+        children: [
+            /*#__PURE__*/ _jsx(TextInput, {
+                id: id,
+                label: label,
+                role: "combobox",
+                "aria-autocomplete": "list",
+                autoComplete: "off",
+                "aria-expanded": open,
+                "aria-controls": `${id}-list`,
+                "aria-activedescendant": open && activeKey ? `${id}-option-${activeKey}` : undefined,
+                placeholder: C.choose,
+                value: open ? search : value,
+                disabled: Boolean(locked),
+                readOnly: saving,
+                "aria-disabled": saving || undefined,
+                onClick: ()=>show(),
+                onBlur: (event)=>{
+                    if (!root.current?.contains(event.relatedTarget)) close();
+                },
+                onPaste: (event)=>{
+                    if (blocked || open) return;
+                    event.preventDefault();
+                    show(event.clipboardData.getData('text/plain'));
+                },
+                onChange: (event)=>{
+                    if (blocked) return;
+                    if (!open) {
+                        show(event.nativeEvent.data ?? '');
+                        return;
+                    }
+                    const query = event.currentTarget.value;
+                    if (query === q) reset();
+                    setSearch(query);
+                    setRows([]);
+                    setMore(false);
+                    setActive(null);
+                    setReveal(8);
+                    setLoading(true);
+                    setError('');
+                    firstNew.current = null;
+                    revision.current++;
+                },
+                onKeyDown: (event)=>{
+                    if (event.key === 'Escape' || event.key === 'Tab' || event.altKey && event.key === 'ArrowUp') {
+                        if (open) {
+                            if (event.key !== 'Tab') event.preventDefault();
+                            close();
+                        }
+                        return;
+                    }
+                    if (blocked) return;
+                    if (!open && event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+                        event.preventDefault();
+                        show(event.key);
+                        return;
+                    }
+                    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+                        event.preventDefault();
+                        if (!open) {
+                            show();
+                            return;
+                        }
+                        const index = activeKey ? optionKeys.indexOf(activeKey) : event.key === 'ArrowDown' ? -1 : optionKeys.length;
+                        setActive(optionKeys[Math.max(0, Math.min(optionKeys.length - 1, index + (event.key === 'ArrowDown' ? 1 : -1)))] ?? null);
+                    } else if (open && activeKey && (event.key === 'Home' || event.key === 'End')) {
+                        event.preventDefault();
+                        setActive(optionKeys[event.key === 'Home' ? 0 : optionKeys.length - 1] ?? null);
+                    } else if (open && activeKey && event.key === 'Enter' && !event.nativeEvent.isComposing && event.nativeEvent.keyCode !== 229) {
+                        event.preventDefault();
+                        choose(activeKey);
+                    }
+                }
+            }),
+            open ? /*#__PURE__*/ _jsxs("div", {
+                className: "xp-page-combobox-popup",
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        id: `${id}-list`,
+                        role: "listbox",
+                        "aria-label": label,
+                        children: [
+                            visibleRows.map((row)=>{
+                                const reason = disabled(row);
+                                const selected = currentId != null ? String(row.id) === String(currentId) : matches(row.path);
+                                return /*#__PURE__*/ _jsxs("div", {
+                                    role: "option",
+                                    id: `${id}-option-${row.id}`,
+                                    "aria-selected": selected,
+                                    "aria-disabled": Boolean(reason) || undefined,
+                                    "data-active": activeKey === String(row.id) || undefined,
+                                    className: "xp-page-option",
+                                    onMouseDown: (event)=>event.preventDefault(),
+                                    onClick: ()=>choose(String(row.id)),
+                                    children: [
+                                        /*#__PURE__*/ _jsx("strong", {
+                                            children: row.title
+                                        }),
+                                        selected ? /*#__PURE__*/ _jsx("span", {
+                                            className: "xp-page-option-check",
+                                            "aria-hidden": "true",
+                                            children: "✓"
+                                        }) : null,
+                                        /*#__PURE__*/ _jsxs("span", {
+                                            className: "xp-page-option-detail",
+                                            children: [
+                                                row.path,
+                                                row.published === false ? ` · ${C.draft}` : '',
+                                                reason ? /*#__PURE__*/ _jsxs(_Fragment, {
+                                                    children: [
+                                                        /*#__PURE__*/ _jsx("br", {}),
+                                                        reason
+                                                    ]
+                                                }) : null
+                                            ]
+                                        })
+                                    ]
+                                }, row.id);
+                            }),
+                            hasMore ? /*#__PURE__*/ _jsx("div", {
+                                role: "option",
+                                id: `${id}-option-more`,
+                                className: "xp-page-option",
+                                "data-active": activeKey === 'more' || undefined,
+                                "aria-disabled": loading || undefined,
+                                onMouseDown: (event)=>event.preventDefault(),
+                                onClick: ()=>choose('more'),
+                                children: C.more
+                            }) : null
+                        ]
+                    }),
+                    loading && !rows.length ? /*#__PURE__*/ _jsx("p", {
+                        role: "status",
+                        children: C.loading
+                    }) : null,
+                    !loading && !error && !rows.length ? /*#__PURE__*/ _jsx("p", {
+                        role: "status",
+                        children: C.empty
+                    }) : null,
+                    error ? /*#__PURE__*/ _jsxs("div", {
+                        role: "alert",
+                        children: [
+                            error,
+                            " ",
+                            /*#__PURE__*/ _jsx("button", {
+                                type: "button",
+                                onClick: reset,
+                                children: C.retry
+                            })
+                        ]
+                    }) : null
+                ]
+            }) : null
+        ]
+    });
+}

package/dist/admin/surface/pagePicker/pagePicker.css

@@ -0,0 +1,10 @@
+.xp-page-combobox { position: relative; width: 100%; min-width: 0; }
+.xp-page-combobox input { width: 100%; }
+.xp-page-combobox-popup { position: absolute; inset-inline: 0; z-index: 5; max-height: 24rem; overflow-y: auto; background: var(--xp-surface); color: var(--xp-text); border: 1px solid var(--xp-border-strong); border-radius: var(--xp-radius-control); padding: var(--xp-space-1); }
+.xp-page-option { position: relative; display: block; width: 100%; box-sizing: border-box; text-align: left; padding: var(--xp-space-3); padding-inline-end: var(--xp-space-6); border: 2px solid transparent; border-radius: var(--xp-radius-control); cursor: pointer; color: var(--xp-text); background: var(--xp-surface); overflow-wrap: anywhere; }
+.xp-page-option-detail { display: block; color: var(--xp-text-2); font: var(--xp-text-small); }
+.xp-page-option[aria-selected='true'] { border-color: var(--xp-accent); }
+.xp-page-option-check { position: absolute; inset-inline-end: var(--xp-space-2); top: var(--xp-space-3); color: var(--xp-accent); }
+.xp-page-option[data-active='true'] { background: var(--xp-surface-2); outline: 2px solid var(--xp-focus); outline-offset: -4px; }
+.xp-page-option[aria-disabled='true'] { cursor: not-allowed; border-color: var(--xp-text-2); border-style: dashed; }
+.xp-page-option[aria-disabled='true'] strong { font-weight: 400; }

package/dist/admin/surface/pagePicker/pagePicker.model.d.ts

@@ -0,0 +1,27 @@
+import type { Arm, DocId } from '../../../types/contracts.js';
+import type { PagesResult, PreflightResult } from '../../../types/endpoints.js';
+import type { TestsSurfaceProps } from '../../../types/surface.js';
+export type PageRow = PagesResult['docs'][number];
+export type PageCollection = NonNullable<TestsSurfaceProps['pageCollections']>[number];
+export type PageSelections = Partial<Record<Arm['key'], {
+    id: DocId;
+    path: string;
+    title?: string;
+    published?: boolean;
+}>>;
+/** The server resolves legacy collections; the client consumes its placements verbatim. */
+export declare function testPageCollection(collections: readonly PageCollection[] | undefined, doc: {
+    pageCollection?: string | null;
+}, placements: PreflightResult['pagePlacements']): {
+    slug: string;
+    label: string;
+    contentChecks: boolean;
+    copyHint?: string;
+    copyUrl?: string;
+    copyLabel?: string;
+} | undefined;
+export declare const controlFirst: (arms: readonly Arm[]) => Arm[];
+/** Identity wins over address, so distinct documents sharing an address get actionable copy. */
+export declare function disabledPageReason(row: PageRow, ownKey: string, arms: readonly Arm[], placements: PreflightResult['pagePlacements'], chosen: PageSelections, collection: string, collectionSlug?: string): string | null;
+/** Pure request revision comparison, also used after an aborted transport resolves. */
+export declare const isLatestPageRequest: (response: number, latest: number) => boolean;

package/dist/admin/surface/pagePicker/pagePicker.model.js

@@ -0,0 +1,25 @@
+import { normalisePath } from '../../../runtime/normalisePath.js';
+import { PAGE_COPY, usedAddressCopy, usedPageCopy } from '../../copy/pages.js';
+import { actionGroupLabel } from '../../actions/actions.model.js';
+/** The server resolves legacy collections; the client consumes its placements verbatim. */ export function testPageCollection(collections, doc, placements) {
+    const slug = doc.pageCollection || placements?.find((entry)=>entry.collection)?.collection;
+    return collections?.find((entry)=>entry.slug === slug);
+}
+export const controlFirst = (arms)=>[
+        ...arms
+    ].sort((a, b)=>Number(b.kind === 'control') - Number(a.kind === 'control'));
+/** Identity wins over address, so distinct documents sharing an address get actionable copy. */ export function disabledPageReason(row, ownKey, arms, placements, chosen, collection, collectionSlug) {
+    if (row.path === null || row.pathKey === null) return PAGE_COPY.noPath;
+    const others = controlFirst(arms).filter((arm)=>arm.key !== ownKey && arm.kind !== 'holdout');
+    for (const arm of others){
+        const selection = chosen[arm.key];
+        const remembered = selection && arm.pageTarget && normalisePath(selection.path) === normalisePath(arm.pageTarget) ? selection.id : undefined;
+        const id = remembered ?? placements?.find((entry)=>entry.arm === arm.key && (!collectionSlug || entry.collection === collectionSlug))?.id;
+        if (id != null ? String(id) === String(row.id) : Boolean(arm.pageTarget && normalisePath(arm.pageTarget) === row.pathKey)) {
+            return usedPageCopy(actionGroupLabel(arm.key, arm.label));
+        }
+    }
+    const same = others.find((arm)=>arm.pageTarget && normalisePath(arm.pageTarget) === row.pathKey);
+    return same ? usedAddressCopy(actionGroupLabel(same.key, same.label), row.path, collection) : null;
+}
+/** Pure request revision comparison, also used after an aborted transport resolves. */ export const isLatestPageRequest = (response, latest)=>response === latest;

package/dist/admin/surface/readiness/ActionDialogs.js

@@ -1,13 +1,15 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { DocsResponseError, fetchAllDocs } from '../../../lib/fetchAllDocs.js';
+import { usePlacementLabels, placementDetailKey } from '../../placements/usePlacementLabels.js';
+import { placementUncheckedCopy } from '../../copy/readiness.js';
 import { useEffect, useState } from 'react';
 import { Button } from '../../../ui/Button.js';
 import { TextInput } from '../../../ui/Inputs.js';
 import { Dialog } from '../../../ui/Dialog.js';
 import { MakeContentResult } from '../../actions/MakeContentResult.js';
 import { expectedConfirm, matchesConfirm } from '../../../transitions/confirmPhrases.js';
-import { ACTIONS_COPY as A } from '../../copy/actions.js';
+import { ACTIONS_COPY as A, addMetricWarningCopy } from '../../copy/actions.js';
 import { REVIEW_COPY as R } from '../../copy/review.js';
 import { READINESS_COPY as C } from '../../copy/readiness.js';
 import { API_MESSAGES, refusalMessage } from '../../copy/common.js';
@@ -187,6 +189,12 @@ import { useTransition } from './useTransition.js';
     const [loading, setLoading] = useState(true);
     const [loadError, setLoadError] = useState(null);
     const [metric, setMetric] = useState('');
+    const [warnings, setWarnings] = useState(null);
+    const placementLabels = usePlacementLabels({
+        details: (warnings ?? []).filter((warning)=>warning.code === 'placement-unchecked').map((warning)=>warning.detail),
+        preflight: test.preflight,
+        ...surface
+    });
     const [role, setRole] = useState('secondary');
     const transition = useTransition(test, onClose);
     useEffect(()=>{
@@ -217,85 +225,112 @@ import { useTransition } from './useTransition.js';
     const available = metrics.filter((item)=>!attached.has(String(item.id)));
     const selected = available.find((item)=>String(item.id) === metric);
     const disabled = transition.busy || test.hasUnsaved || test.saving === 'saving';
+    function close() {
+        if (transition.busy) return;
+        if (warnings) void test.reload();
+        onClose();
+    }
     return /*#__PURE__*/ _jsxs(Dialog, {
         open: true,
         dismissible: !transition.busy,
         title: C.addGoal,
-        onClose: ()=>{
-            if (!transition.busy) onClose();
-        },
+        onClose: close,
         children: [
-            /*#__PURE__*/ _jsx("p", {
-                children: C.addMetric
-            }),
-            loading ? /*#__PURE__*/ _jsx("p", {
-                role: "status",
-                children: R.loadingMetrics
-            }) : null,
-            /*#__PURE__*/ _jsxs("label", {
+            warnings ? warnings.map((warning, index)=>{
+                const placement = warning.code === 'placement-unchecked' ? placementLabels.get(placementDetailKey(warning.detail)) : undefined;
+                return /*#__PURE__*/ _jsx("p", {
+                    children: placement ? placement.href ? /*#__PURE__*/ _jsx("a", {
+                        href: placement.href,
+                        children: placementUncheckedCopy(placement.title)
+                    }) : placementUncheckedCopy(placement.title) : addMetricWarningCopy(warning)
+                }, index);
+            }) : /*#__PURE__*/ _jsxs(_Fragment, {
                 children: [
-                    R.role,
-                    /*#__PURE__*/ _jsxs("select", {
-                        value: role,
-                        disabled: disabled,
-                        onChange: (event)=>setRole(event.target.value),
+                    /*#__PURE__*/ _jsx("p", {
+                        children: C.addMetric
+                    }),
+                    loading ? /*#__PURE__*/ _jsx("p", {
+                        role: "status",
+                        children: R.loadingMetrics
+                    }) : null,
+                    /*#__PURE__*/ _jsxs("label", {
                         children: [
-                            /*#__PURE__*/ _jsx("option", {
-                                value: "secondary",
-                                children: R.supporting
-                            }),
-                            /*#__PURE__*/ _jsx("option", {
-                                value: "guardrail",
-                                children: R.guardrail
+                            R.role,
+                            /*#__PURE__*/ _jsxs("select", {
+                                value: role,
+                                disabled: disabled,
+                                onChange: (event)=>setRole(event.target.value),
+                                children: [
+                                    /*#__PURE__*/ _jsx("option", {
+                                        value: "secondary",
+                                        children: R.supporting
+                                    }),
+                                    /*#__PURE__*/ _jsx("option", {
+                                        value: "guardrail",
+                                        children: R.guardrail
+                                    })
+                                ]
                             })
                         ]
-                    })
-                ]
-            }),
-            /*#__PURE__*/ _jsxs("label", {
-                children: [
-                    R.metric,
-                    /*#__PURE__*/ _jsxs("select", {
-                        value: metric,
-                        disabled: disabled || loading,
-                        onChange: (event)=>setMetric(event.target.value),
+                    }),
+                    /*#__PURE__*/ _jsxs("label", {
                         children: [
-                            /*#__PURE__*/ _jsx("option", {
-                                value: "",
-                                children: R.chooseMetric
-                            }),
-                            available.map((item)=>/*#__PURE__*/ _jsx("option", {
-                                    value: String(item.id),
-                                    children: item.name
-                                }, item.id))
+                            R.metric,
+                            /*#__PURE__*/ _jsxs("select", {
+                                value: metric,
+                                disabled: disabled || loading,
+                                onChange: (event)=>setMetric(event.target.value),
+                                children: [
+                                    /*#__PURE__*/ _jsx("option", {
+                                        value: "",
+                                        children: R.chooseMetric
+                                    }),
+                                    available.map((item)=>/*#__PURE__*/ _jsx("option", {
+                                            value: String(item.id),
+                                            children: item.name
+                                        }, item.id))
+                                ]
+                            })
                         ]
+                    }),
+                    !loading && !loadError && !available.length ? /*#__PURE__*/ _jsx("p", {
+                        children: R.noMetrics
+                    }) : null,
+                    loadError || transition.error ? /*#__PURE__*/ _jsx("p", {
+                        role: "alert",
+                        children: loadError ?? transition.error
+                    }) : null,
+                    /*#__PURE__*/ _jsx(Button, {
+                        disabled: disabled || loading || !!loadError || !selected,
+                        onClick: ()=>{
+                            // Goal and phase lookups share not-found; prefer the more likely missing goal without reading server text.
+                            if (selected && test.doc) void transition.run(async ()=>{
+                                const result = await createApi(surface.apiRoute).addMetric(test.doc.id, {
+                                    metric: selected.id,
+                                    role
+                                }, {
+                                    notFound: API_MESSAGES.goalNotFound
+                                });
+                                if (result.ok) {
+                                    if (result.data?.warnings?.length) setWarnings(result.data.warnings);
+                                    else {
+                                        await test.reload();
+                                        onClose();
+                                    }
+                                }
+                                return result;
+                            }, {
+                                reloadOnSuccess: false
+                            });
+                        },
+                        children: C.addGoal
                     })
                 ]
             }),
-            !loading && !loadError && !available.length ? /*#__PURE__*/ _jsx("p", {
-                children: R.noMetrics
-            }) : null,
-            loadError || transition.error ? /*#__PURE__*/ _jsx("p", {
-                role: "alert",
-                children: loadError ?? transition.error
-            }) : null,
-            /*#__PURE__*/ _jsx(Button, {
-                disabled: disabled || loading || !!loadError || !selected,
-                onClick: ()=>{
-                    // Goal and phase lookups share not-found; prefer the more likely missing goal without reading server text.
-                    if (selected && test.doc) void transition.run(()=>createApi(surface.apiRoute).addMetric(test.doc.id, {
-                            metric: selected.id,
-                            role
-                        }, {
-                            notFound: API_MESSAGES.goalNotFound
-                        }));
-                },
-                children: C.addGoal
-            }),
             /*#__PURE__*/ _jsx(Button, {
                 disabled: transition.busy,
-                onClick: onClose,
-                children: A.cancel
+                onClick: close,
+                children: warnings ? A.done : A.cancel
             })
         ]
     });