@vertebr/react 0.18.1 → 0.20.0

package/dist/components/admin/AdminContent.d.ts

@@ -1,5 +1,6 @@
 import type { CatalogResponse, ConfigResponse, EmailsBoardResponse, FontLibraryResponse, GalleryResponse, MetricsResponse, ResourceListResponse, VertebrClient } from "@vertebr/client";
 import type { MetricsRangeId } from "../../lib/metricsRanges";
+import type { TableSortState } from "../../lib/sort";
 import type { Selection } from "./types";
 export type AdminContentProps = {
     client: VertebrClient;
@@ -24,8 +25,11 @@ export type AdminContentProps = {
     emailsLoading: boolean;
     onRefreshEmails: () => Promise<void>;
     resourceData: ResourceListResponse | null;
+    resourceLoading?: boolean;
     resourceSearch?: string;
     onResourceSearchChange?: (q: string) => void;
+    resourceSort?: TableSortState | null;
+    onResourceSortChange?: (sort: TableSortState) => void;
     onRefreshResource: () => Promise<void>;
     onRefreshConfig?: () => Promise<void>;
     configData: ConfigResponse | null;
@@ -45,5 +49,5 @@ export type AdminContentProps = {
         onRefreshFonts?: () => Promise<void>;
     };
 };
-export declare function AdminContent({ client, catalog, selection, onSelectionChange, authRequired, loading, isPageSelection, metricsData, metricsLoading, metricsRange, onMetricsRangeChange, onRefreshMetrics, galleryData, galleryLoading, onRefreshGallery, fontLibraryData, fontLibraryLoading, onRefreshFonts, emailsData, emailsLoading, onRefreshEmails, resourceData, resourceSearch, onResourceSearchChange, onRefreshResource, onRefreshConfig, configData, onConfigSaved, galleryPicker, fontLibraryPicker, }: AdminContentProps): import("react").JSX.Element;
+export declare function AdminContent({ client, catalog, selection, onSelectionChange, authRequired, loading, isPageSelection, metricsData, metricsLoading, metricsRange, onMetricsRangeChange, onRefreshMetrics, galleryData, galleryLoading, onRefreshGallery, fontLibraryData, fontLibraryLoading, onRefreshFonts, emailsData, emailsLoading, onRefreshEmails, resourceData, resourceLoading, resourceSearch, onResourceSearchChange, resourceSort, onResourceSortChange, onRefreshResource, onRefreshConfig, configData, onConfigSaved, galleryPicker, fontLibraryPicker, }: AdminContentProps): import("react").JSX.Element;
 //# sourceMappingURL=AdminContent.d.ts.map

package/dist/components/admin/AdminContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AdminContent.d.ts","sourceRoot":"","sources":["../../../src/components/admin/AdminContent.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"AdminContent.d.ts","sourceRoot":"","sources":["../../../src/components/admin/AdminContent.tsx"],"names":[],"mappings":"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"}

package/dist/components/admin/AdminContent.js

@@ -57,8 +57,9 @@ function ConfigEditor({ client, catalog, configData, isPageSelection, previewPat
         };
     }, [client, configData.id, relatedKey, relatedAddons]);
     const onChange = useCallback((value) => {
-        setDraft(value);
-    }, []);
+        // Merge — react-hook-form watch can omit unchanged / empty keys.
+        setDraft((prev) => ({ ...(prev ?? configData.value), ...value }));
+    }, [configData.value]);
     const form = (_jsx(ConfigForm, { schema: configData.schema, value: configData.value, client: client, canWrite: canWrite, revisionsEnabled: showRevisions, canPublish: canPublish && Boolean(configData.draftRevisionId), onPublish: canPublish && configData.draftRevisionId
             ? async () => {
                 const published = await client.publishRevision(configData.id, configData.draftRevisionId);
@@ -76,7 +77,7 @@ function ConfigEditor({ client, catalog, configData, isPageSelection, previewPat
                             return (_jsxs("button", { type: "button", className: "vertebr-page-related-addon", "data-enabled": enabled ? "true" : "false", onClick: () => onSelectAddon?.(addon.id), children: [_jsx("span", { children: addon.label }), _jsx("em", { children: enabled ? "on" : "off" })] }, addon.id));
                         }) })] })) : null, showPreview && previewPath ? (_jsxs("div", { className: "vertebr-page-editor", children: [_jsx("div", { className: "vertebr-page-editor-form", children: form }), _jsx(PagePreviewPane, { previewPath: previewPath, controlId: configData.id, draft: draft ?? configData.value, relatedDrafts: Object.keys(relatedDrafts).length ? relatedDrafts : undefined })] })) : (form)] }));
 }
-export function AdminContent({ client, catalog, selection, onSelectionChange, authRequired, loading, isPageSelection, metricsData, metricsLoading, metricsRange, onMetricsRangeChange, onRefreshMetrics, galleryData, galleryLoading, onRefreshGallery, fontLibraryData, fontLibraryLoading, onRefreshFonts, emailsData, emailsLoading, onRefreshEmails, resourceData, resourceSearch, onResourceSearchChange, onRefreshResource, onRefreshConfig, configData, onConfigSaved, galleryPicker, fontLibraryPicker, }) {
+export function AdminContent({ client, catalog, selection, onSelectionChange, authRequired, loading, isPageSelection, metricsData, metricsLoading, metricsRange, onMetricsRangeChange, onRefreshMetrics, galleryData, galleryLoading, onRefreshGallery, fontLibraryData, fontLibraryLoading, onRefreshFonts, emailsData, emailsLoading, onRefreshEmails, resourceData, resourceLoading = false, resourceSearch, onResourceSearchChange, resourceSort = null, onResourceSortChange, onRefreshResource, onRefreshConfig, configData, onConfigSaved, galleryPicker, fontLibraryPicker, }) {
     if (!catalog) {
         return (_jsx("div", { className: "vertebr-content", children: _jsx("section", { className: "vertebr-panel", children: _jsx("div", { className: "vertebr-empty", children: authRequired
                         ? "Authenticated access required for this environment."
@@ -84,7 +85,7 @@ export function AdminContent({ client, catalog, selection, onSelectionChange, au
                             ? "Loading…"
                             : "Unable to load catalog." }) }) }));
     }
-    return (_jsx("div", { className: "vertebr-content", children: _jsxs("section", { className: "vertebr-panel", children: [selection?.kind === "overview" ? (_jsx(MetricsBoard, { label: metricsData?.label ?? catalog.metrics?.label, windowLabel: metricsData?.windowLabel, compareLabel: metricsData?.compareLabel, metrics: metricsData?.metrics ?? [], charts: metricsData?.charts ?? [], range: metricsRange, onRangeChange: onMetricsRangeChange, loading: metricsLoading, onRefresh: () => void onRefreshMetrics() })) : null, selection?.kind === "audit" ? (_jsx(AuditBoard, { client: client, label: catalog.audit?.label })) : null, selection?.kind === "sync" ? (_jsx(AdminSyncPage, { client: client, catalog: catalog })) : null, selection?.kind === "gallery" && galleryData ? (_jsx(GalleryBoard, { label: galleryData.label, items: galleryData.items, accept: galleryData.accept, maxBytes: galleryData.maxBytes, canDelete: galleryData.canDelete, loading: galleryLoading, onRefresh: () => void onRefreshGallery(), onUpload: async (files) => {
+    return (_jsx("div", { className: "vertebr-content", children: _jsxs("section", { className: "vertebr-panel", children: [selection?.kind === "overview" ? (_jsx(MetricsBoard, { label: metricsData?.label ?? catalog.metrics?.label, windowLabel: metricsData?.windowLabel, compareLabel: metricsData?.compareLabel, metrics: metricsData?.metrics ?? [], charts: metricsData?.charts ?? [], range: metricsRange, onRangeChange: onMetricsRangeChange, loading: metricsLoading, onRefresh: () => void onRefreshMetrics() })) : null, selection?.kind === "audit" ? (_jsx(AuditBoard, { client: client, label: catalog.audit?.label, columns: catalog.audit?.columns })) : null, selection?.kind === "sync" ? (_jsx(AdminSyncPage, { client: client, catalog: catalog })) : null, selection?.kind === "gallery" && galleryData ? (_jsx(GalleryBoard, { label: galleryData.label, items: galleryData.items, accept: galleryData.accept, maxBytes: galleryData.maxBytes, canDelete: galleryData.canDelete, loading: galleryLoading, onRefresh: () => void onRefreshGallery(), onUpload: async (files) => {
                         for (const file of files) {
                             await client.uploadGalleryFile(file);
                         }
@@ -151,52 +152,76 @@ export function AdminContent({ client, catalog, selection, onSelectionChange, au
                         ? async (id) => {
                             await client.deleteEmailLibraryTemplate(id);
                         }
-                        : undefined })) : null, selection?.kind === "resource" && resourceData ? (_jsx(ResourcePanel, { schema: resourceData.schema, items: resourceData.items, label: resourceData.label, listQuery: resourceData.listQuery, total: resourceData.total, searchQuery: resourceSearch, onSearchChange: onResourceSearchChange, initialEditRowId: selection.rowId && selection.id === resourceData.id
-                        ? selection.rowId
-                        : undefined, onEditRowIdChange: (rowId) => {
-                        onSelectionChange?.({
-                            kind: "resource",
-                            id: resourceData.id,
-                            rowId: rowId ?? undefined,
-                        });
-                    }, permissions: resourceData.permissions, actions: resourceData.actions, collectionActions: resourceData.collectionActions, bulkActions: resourceData.bulkActions, uploads: resourceData.uploads, storageKey: resourceData.id, onUpdate: resourceData.permissions.update
-                        ? async (rowId, value) => {
-                            await client.updateResource(resourceData.id, rowId, value);
-                            await onRefreshResource();
-                        }
-                        : undefined, onCreate: resourceData.permissions.create
-                        ? async (value) => {
-                            await client.createResource(resourceData.id, value);
-                            await onRefreshResource();
-                        }
-                        : undefined, onDelete: resourceData.permissions.delete
-                        ? async (rowId) => {
-                            await client.deleteResource(resourceData.id, rowId);
-                            await onRefreshResource();
-                        }
-                        : undefined, onAction: async (rowId, actionId, input) => {
-                        await client.runResourceAction(resourceData.id, rowId, actionId, input);
-                    }, onActionDone: onRefreshResource, onPreviewMail: async (rowId, actionId, input) => {
-                        return client.previewResourceMail(resourceData.id, rowId, actionId, input);
-                    }, onCollectionAction: async (actionId, input) => {
-                        return client.runCollectionAction(resourceData.id, actionId, input);
-                    }, onBulkAction: resourceData.bulkActions
-                        ? async (actionId, rowIds, input) => {
-                            await client.runBulkAction(resourceData.id, actionId, {
-                                rowIds,
-                                input,
-                            });
-                        }
-                        : undefined, onUpload: resourceData.uploads
-                        ? async (field, files) => {
-                            const uploaded = [];
-                            for (const file of files) {
-                                const result = await client.uploadResourceFile(resourceData.id, field, file);
-                                uploaded.push({ url: result.url, name: result.name });
-                            }
-                            return uploaded;
-                        }
-                        : undefined, ...galleryPicker })) : null, selection?.kind === "addons" ? (_jsx(AddonOverview, { client: client, catalog: catalog, onSelectAddon: (id) => onSelectionChange?.({ kind: "addon", id }) })) : null, selection?.kind === "config" && configData ? (_jsx(ConfigEditor, { client: client, catalog: catalog, configData: configData, isPageSelection: isPageSelection, previewPath: catalog.configs.find((item) => item.id === configData.id)
+                        : undefined })) : null, selection?.kind === "resource"
+                    ? (() => {
+                        const catalogResource = catalog.resources.find((item) => item.id === selection.id);
+                        const ready = resourceData != null && resourceData.id === selection.id;
+                        const schema = ready
+                            ? resourceData.schema
+                            : (catalogResource?.schema ?? {});
+                        if (!ready && Object.keys(schema).length === 0)
+                            return null;
+                        return (_jsx(ResourcePanel, { schema: schema, items: ready ? resourceData.items : [], label: ready
+                                ? resourceData.label
+                                : (catalogResource?.label ?? selection.id), listQuery: ready
+                                ? resourceData.listQuery
+                                : catalogResource?.listQuery, total: ready ? resourceData.total : undefined, loading: resourceLoading || !ready, searchQuery: resourceSearch, onSearchChange: onResourceSearchChange, sort: resourceSort, onSortChange: onResourceSortChange, initialEditRowId: ready && selection.rowId ? selection.rowId : undefined, onEditRowIdChange: (rowId) => {
+                                onSelectionChange?.({
+                                    kind: "resource",
+                                    id: selection.id,
+                                    rowId: rowId ?? undefined,
+                                });
+                            }, permissions: ready
+                                ? resourceData.permissions
+                                : { create: false, update: false, delete: false }, actions: ready ? resourceData.actions : {}, collectionActions: ready ? resourceData.collectionActions : {}, bulkActions: ready ? resourceData.bulkActions : {}, uploads: ready ? resourceData.uploads : undefined, storageKey: selection.id, onUpdate: ready && resourceData.permissions.update
+                                ? async (rowId, value) => {
+                                    await client.updateResource(resourceData.id, rowId, value);
+                                    await onRefreshResource();
+                                }
+                                : undefined, onCreate: ready && resourceData.permissions.create
+                                ? async (value) => {
+                                    await client.createResource(resourceData.id, value);
+                                    await onRefreshResource();
+                                }
+                                : undefined, onDelete: ready && resourceData.permissions.delete
+                                ? async (rowId) => {
+                                    await client.deleteResource(resourceData.id, rowId);
+                                    await onRefreshResource();
+                                }
+                                : undefined, onAction: ready
+                                ? async (rowId, actionId, input) => {
+                                    await client.runResourceAction(resourceData.id, rowId, actionId, input);
+                                }
+                                : undefined, onActionDone: onRefreshResource, onPreviewMail: ready
+                                ? async (rowId, actionId, input) => {
+                                    return client.previewResourceMail(resourceData.id, rowId, actionId, input);
+                                }
+                                : undefined, onCollectionAction: ready
+                                ? async (actionId, input) => {
+                                    return client.runCollectionAction(resourceData.id, actionId, input);
+                                }
+                                : undefined, onBulkAction: ready && resourceData.bulkActions
+                                ? async (actionId, rowIds, input) => {
+                                    await client.runBulkAction(resourceData.id, actionId, {
+                                        rowIds,
+                                        input,
+                                    });
+                                }
+                                : undefined, onUpload: ready && resourceData.uploads
+                                ? async (field, files) => {
+                                    const uploaded = [];
+                                    for (const file of files) {
+                                        const result = await client.uploadResourceFile(resourceData.id, field, file);
+                                        uploaded.push({
+                                            url: result.url,
+                                            name: result.name,
+                                        });
+                                    }
+                                    return uploaded;
+                                }
+                                : undefined, ...galleryPicker }));
+                    })()
+                    : null, selection?.kind === "addons" ? (_jsx(AddonOverview, { client: client, catalog: catalog, onSelectAddon: (id) => onSelectionChange?.({ kind: "addon", id }) })) : null, selection?.kind === "config" && configData ? (_jsx(ConfigEditor, { client: client, catalog: catalog, configData: configData, isPageSelection: isPageSelection, previewPath: catalog.configs.find((item) => item.id === configData.id)
                         ?.previewPath, relatedAddons: catalog.configs.find((item) => item.id === configData.id)
                         ?.relatedAddons, onConfigSaved: onConfigSaved, onRefreshConfig: onRefreshConfig, onSelectAddon: (id) => onSelectionChange?.({ kind: "addon", id }), galleryPicker: galleryPicker, fontLibraryPicker: fontLibraryPicker }, configData.id)) : null, selection?.kind === "addon" && configData ? ((() => {
                     const addon = catalog.addons?.find((item) => item.id === configData.id);

package/dist/components/admin/AdminSyncPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AdminSyncPage.d.ts","sourceRoot":"","sources":["../../../src/components/admin/AdminSyncPage.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAEV,eAAe,EAIf,aAAa,EACd,MAAM,iBAAiB,CAAC;AAQzB,MAAM,MAAM,kBAAkB,GAAG;IAC/B,MAAM,EAAE,aAAa,CAAC;IACtB,OAAO,EAAE,eAAe,CAAC;CAC1B,CAAC;AAuPF,wBAAgB,aAAa,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,kBAAkB,+BA0YpE"}
+{"version":3,"file":"AdminSyncPage.d.ts","sourceRoot":"","sources":["../../../src/components/admin/AdminSyncPage.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAEV,eAAe,EAKf,aAAa,EACd,MAAM,iBAAiB,CAAC;AAazB,MAAM,MAAM,kBAAkB,GAAG;IAC/B,MAAM,EAAE,aAAa,CAAC;IACtB,OAAO,EAAE,eAAe,CAAC;CAC1B,CAAC;AAiZF,wBAAgB,aAAa,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,kBAAkB,+BAqhBpE"}

package/dist/components/admin/AdminSyncPage.js

@@ -5,6 +5,7 @@ import { EnvSelect } from "../env/EnvSelect";
 import { useToast } from "../../hooks/useToast";
 import { Badge, Card } from "../ui/primitives";
 import { IconSync } from "../ui/icons";
+import { SelectionTableDialog, } from "../dialog/SelectionTableDialog";
 import { SyncPreviewFrame } from "./SyncPreviewFrame";
 function envById(environments, id) {
     return environments.find((env) => env.id === id);
@@ -47,6 +48,132 @@ function statusLabel(status) {
             return status;
     }
 }
+function asStringList(value) {
+    if (Array.isArray(value)) {
+        return value.map((item) => String(item).trim()).filter(Boolean);
+    }
+    if (typeof value === "string" && value.trim()) {
+        return value
+            .split(",")
+            .map((item) => item.trim())
+            .filter(Boolean);
+    }
+    return [];
+}
+function compactInputs(values) {
+    const out = {};
+    for (const [targetId, fields] of Object.entries(values)) {
+        const cleaned = {};
+        for (const [key, value] of Object.entries(fields)) {
+            if (Array.isArray(value)) {
+                if (value.length > 0)
+                    cleaned[key] = value;
+                continue;
+            }
+            if (value !== undefined && value !== null && value !== "") {
+                cleaned[key] = value;
+            }
+        }
+        if (Object.keys(cleaned).length > 0)
+            out[targetId] = cleaned;
+    }
+    return Object.keys(out).length > 0 ? out : undefined;
+}
+function firstEnumListField(schema) {
+    if (!schema)
+        return null;
+    for (const [key, field] of Object.entries(schema)) {
+        if (field.type === "enum[]")
+            return { key, field };
+    }
+    return null;
+}
+function selectionNoun(field) {
+    const label = (field.label ?? "items").trim().toLowerCase();
+    if (!label)
+        return "items";
+    return label;
+}
+function selectionSummary(field, selected) {
+    const total = field.options?.length ?? 0;
+    const noun = selectionNoun(field);
+    if (selected.length === 0) {
+        return total > 0 ? `All ${total} ${noun}` : `All ${noun}`;
+    }
+    if (selected.length === 1) {
+        return field.optionLabels?.[selected[0]] ?? selected[0];
+    }
+    return `${selected.length} ${noun} selected`;
+}
+/**
+ * Which envs an option is active in. Falls back to the sync source when the
+ * host omitted `optionEnvironments`.
+ */
+function activeEnvIdsForOption(optionId, field, fromEnv) {
+    const declared = field.optionEnvironments?.[optionId];
+    if (Array.isArray(declared) && declared.length > 0) {
+        return [...new Set(declared.map(String).filter(Boolean))];
+    }
+    if ((field.options ?? []).includes(optionId))
+        return [fromEnv];
+    return [];
+}
+/** Prefer sync direction order for env chips. */
+function orderedSyncEnvironments(environments, fromEnv, toEnv) {
+    const byId = new Map(environments.map((env) => [env.id, env]));
+    const ordered = [];
+    const push = (id) => {
+        const env = byId.get(id);
+        if (!env || ordered.some((item) => item.id === id))
+            return;
+        ordered.push(env);
+    };
+    push(fromEnv);
+    for (const id of toEnv)
+        push(id);
+    for (const env of environments)
+        push(env.id);
+    return ordered;
+}
+/** Column / copy presets for Sync target pickers (override per field key). */
+function syncSelectionOverrides(fieldKey, field) {
+    const noun = selectionNoun(field);
+    if (fieldKey === "codes") {
+        return {
+            eyebrow: "Sync selection",
+            columns: { primary: "Code", secondary: "Offer" },
+            allSelectedFooter: "Sync all missing codes",
+            removeLabel: "Remove from sync",
+            emptyLabel: "No discount codes in the source environment.",
+            searchPlaceholder: "Search codes…",
+        };
+    }
+    if (fieldKey === "ids") {
+        return {
+            eyebrow: "Sync selection",
+            columns: { primary: "Id", secondary: "Name" },
+            allSelectedFooter: `Sync all ${noun}`,
+            removeLabel: "Remove from sync",
+            emptyLabel: "No products in the source environment.",
+            searchPlaceholder: "Search products…",
+        };
+    }
+    return {
+        eyebrow: "Sync selection",
+        columns: { primary: "Id", secondary: "Name" },
+        allSelectedFooter: `Sync all ${noun}`,
+        removeLabel: "Remove from sync",
+        searchPlaceholder: `Search ${noun}…`,
+    };
+}
+function syncSelectionRows(field, fromEnv) {
+    return (field.options ?? []).map((id) => ({
+        id,
+        primary: id,
+        secondary: field.optionLabels?.[id] ?? "",
+        environments: activeEnvIdsForOption(id, field, fromEnv),
+    }));
+}
 function formatDiffValue(value) {
     if (value === undefined || value === null)
         return "—";
@@ -90,6 +217,8 @@ export function AdminSyncPage({ client, catalog }) {
     const [selectedTargets, setSelectedTargets] = useState(() => (sync?.targets ?? [])
         .filter((target) => target.defaultSelected)
         .map((target) => target.id));
+    const [targetInputValues, setTargetInputValues] = useState({});
+    const [picker, setPicker] = useState(null);
     const [plan, setPlan] = useState(null);
     const [planLoading, setPlanLoading] = useState(false);
     const [running, setRunning] = useState(false);
@@ -102,6 +231,11 @@ export function AdminSyncPage({ client, catalog }) {
     const targetGroups = useMemo(() => groupTargets(catalog), [catalog]);
     const hasTargets = (sync?.targets.length ?? 0) > 0;
     const allTargetIds = useMemo(() => (sync?.targets ?? []).map((target) => target.id), [sync?.targets]);
+    const requestInputs = useMemo(() => compactInputs(targetInputValues), [targetInputValues]);
+    const inputsForTarget = useCallback((targetId) => {
+        return (plan?.targetInputs?.[targetId] ??
+            sync?.targets.find((target) => target.id === targetId)?.inputs);
+    }, [plan?.targetInputs, sync?.targets]);
     const refreshPlan = useCallback(async () => {
         if (!hasTargets || toEnv.length === 0 || allTargetIds.length === 0) {
             setPlan(null);
@@ -115,6 +249,7 @@ export function AdminSyncPage({ client, catalog }) {
                 from: fromEnv,
                 to: toEnv,
                 targets: allTargetIds,
+                ...(requestInputs ? { inputs: requestInputs } : {}),
             });
             setPlan(next);
         }
@@ -125,7 +260,7 @@ export function AdminSyncPage({ client, catalog }) {
         finally {
             setPlanLoading(false);
         }
-    }, [client, fromEnv, toEnv, allTargetIds, hasTargets]);
+    }, [client, fromEnv, toEnv, allTargetIds, hasTargets, requestInputs]);
     useEffect(() => {
         void refreshPlan();
     }, [refreshPlan]);
@@ -134,6 +269,51 @@ export function AdminSyncPage({ client, catalog }) {
             ? current.filter((id) => id !== targetId)
             : [...current, targetId]);
     };
+    const openTargetPicker = (targetId, targetLabel) => {
+        const schema = inputsForTarget(targetId);
+        const listField = firstEnumListField(schema);
+        if (!listField) {
+            toggleTarget(targetId);
+            return;
+        }
+        setPicker({
+            targetId,
+            targetLabel,
+            fieldKey: listField.key,
+            field: listField.field,
+        });
+    };
+    const applyPickerSelection = (ids) => {
+        if (!picker)
+            return;
+        const { targetId, fieldKey } = picker;
+        setSelectedTargets((current) => current.includes(targetId) ? current : [...current, targetId]);
+        setTargetInputValues((current) => ({
+            ...current,
+            [targetId]: {
+                ...(current[targetId] ?? {}),
+                [fieldKey]: ids,
+            },
+        }));
+        setPicker(null);
+    };
+    const deselectFromPicker = () => {
+        if (!picker)
+            return;
+        const { targetId, fieldKey } = picker;
+        setSelectedTargets((current) => current.filter((id) => id !== targetId));
+        setTargetInputValues((current) => {
+            const next = { ...current };
+            const fields = { ...(next[targetId] ?? {}) };
+            delete fields[fieldKey];
+            if (Object.keys(fields).length === 0)
+                delete next[targetId];
+            else
+                next[targetId] = fields;
+            return next;
+        });
+        setPicker(null);
+    };
     const runSync = async () => {
         if (!hasTargets || toEnv.length === 0 || selectedTargets.length === 0)
             return;
@@ -159,10 +339,16 @@ export function AdminSyncPage({ client, catalog }) {
         setRunning(true);
         setError(null);
         try {
+            const selectedInputs = requestInputs
+                ? Object.fromEntries(Object.entries(requestInputs).filter(([id]) => selectedTargets.includes(id)))
+                : undefined;
             const result = await client.runSync({
                 from: fromEnv,
                 to: toEnv,
                 targets: selectedTargets,
+                ...(selectedInputs && Object.keys(selectedInputs).length > 0
+                    ? { inputs: selectedInputs }
+                    : {}),
             });
             push(result.message ?? (result.ok ? "Sync complete" : "Sync finished with errors"), result.ok ? "ok" : "danger");
             await refreshPlan();
@@ -189,7 +375,12 @@ export function AdminSyncPage({ client, catalog }) {
                                                         setToEnv((current) => current.filter((id) => id !== next));
                                                     } })] }), _jsx("div", { className: "vertebr-sync-connector", "aria-hidden": "true", children: toEnvironments.length > 0 ? (toEnvironments.map((destination) => (_jsx("span", { className: "vertebr-sync-connector-arrow", children: "\u2192" }, destination.id)))) : (_jsx("span", { className: "vertebr-sync-connector-arrow", children: "\u2192" })) }), _jsxs("label", { className: "vertebr-sync-field", children: [_jsx("span", { className: "vertebr-sync-field-label", children: "To" }), _jsx(EnvMultiSelect, { environments: environments, value: toEnv, excludeId: fromEnv, onChange: setToEnv, placeholder: "Select one or more destinations" })] })] }), fromEnvironment && toEnvironments.length > 0 ? (_jsx("div", { className: "vertebr-sync-preview", "aria-label": "Sync direction", children: _jsxs("div", { className: "vertebr-sync-preview-flow", "data-dest-count": toEnvironments.length, children: [_jsxs("div", { className: "vertebr-sync-preview-col vertebr-sync-preview-col-from", children: [_jsx("span", { className: "vertebr-sync-preview-caption", children: "From" }), _jsx(EnvFlowBadge, { environment: fromEnvironment })] }), _jsx("div", { className: "vertebr-sync-preview-col vertebr-sync-preview-col-routes", children: toEnvironments.map((destination, index) => (_jsxs("div", { className: "vertebr-sync-preview-route", children: [_jsx("span", { className: "vertebr-sync-preview-arrow", "aria-hidden": "true", children: "\u2192" }), _jsxs("div", { className: "vertebr-sync-preview-col vertebr-sync-preview-col-to", children: [index === 0 ? (_jsx("span", { className: "vertebr-sync-preview-caption", children: "To" })) : (_jsx("span", { className: "vertebr-sync-preview-caption", "aria-hidden": "true", children: "\u00A0" })), _jsx(EnvFlowBadge, { environment: destination })] })] }, destination.id))) })] }) })) : (_jsx("p", { className: "vertebr-sync-direction-hint", children: "Pick a source environment and one or more destinations to preview changes." }))] }) }), _jsxs(Card, { title: "What to sync", children: [_jsxs("div", { className: "vertebr-sync-targets-head", children: [_jsx("p", { className: "vertebr-sync-targets-copy", children: "Review what will change in each destination before syncing." }), _jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet vertebr-sync-refresh", disabled: planLoading || toEnv.length === 0, onClick: () => void refreshPlan(), children: planLoading ? "Refreshing…" : "Refresh preview" })] }), [...targetGroups.entries()].map(([group, targets]) => (_jsxs("div", { className: "vertebr-sync-target-group", children: [_jsx("div", { className: "vertebr-sync-target-group-label", children: group }), _jsx("ul", { className: "vertebr-sync-target-list", children: targets.map((target) => {
                                             const selected = selectedTargets.includes(target.id);
-                                            return (_jsx("li", { children: _jsxs("div", { className: "vertebr-sync-target-row", "data-selected": selected || undefined, children: [_jsxs("button", { type: "button", className: "vertebr-sync-target-toggle", onClick: () => toggleTarget(target.id), "aria-pressed": selected, children: [_jsx("span", { className: "vertebr-sync-target-check", "aria-hidden": "true", children: selected ? "✓" : "" }), _jsxs("span", { className: "vertebr-sync-target-main", children: [_jsx("span", { className: "vertebr-sync-target-title", children: target.label }), target.description ? (_jsx("span", { className: "vertebr-sync-target-desc", children: target.description })) : null] })] }), _jsx("span", { className: "vertebr-sync-target-badges", children: toEnvironments.length === 0 ? (_jsx(Badge, { children: "Choose destination" })) : planLoading ? (_jsx(Badge, { children: "Previewing\u2026" })) : (toEnvironments.map((destination) => {
+                                            const inputSchema = inputsForTarget(target.id);
+                                            const listField = firstEnumListField(inputSchema);
+                                            const pickedCodes = listField
+                                                ? asStringList(targetInputValues[target.id]?.[listField.key])
+                                                : [];
+                                            return (_jsx("li", { children: _jsxs("div", { className: "vertebr-sync-target-row", "data-selected": selected || undefined, "data-has-picker": listField ? "true" : undefined, children: [_jsxs("button", { type: "button", className: "vertebr-sync-target-toggle", onClick: () => openTargetPicker(target.id, target.label), "aria-pressed": selected, children: [_jsx("span", { className: "vertebr-sync-target-check", "aria-hidden": "true", children: selected ? "✓" : "" }), _jsxs("span", { className: "vertebr-sync-target-main", children: [_jsx("span", { className: "vertebr-sync-target-title", children: target.label }), target.description ? (_jsx("span", { className: "vertebr-sync-target-desc", children: target.description })) : null, selected && listField ? (_jsxs("span", { className: "vertebr-sync-target-selection", children: [selectionSummary(listField.field, pickedCodes), _jsx("span", { className: "vertebr-sync-target-selection-hint", children: "Click to change" })] })) : listField ? (_jsxs("span", { className: "vertebr-sync-target-selection-hint", children: ["Click to choose", " ", selectionNoun(listField.field)] })) : null] })] }), _jsx("span", { className: "vertebr-sync-target-badges", children: toEnvironments.length === 0 ? (_jsx(Badge, { children: "Choose destination" })) : planLoading ? (_jsx(Badge, { children: "Previewing\u2026" })) : (toEnvironments.map((destination) => {
                                                                 const item = planForTarget(destination.id, target.id);
                                                                 if (!item) {
                                                                     return (_jsx(Badge, { children: destination.label }, destination.id));
@@ -209,5 +400,13 @@ export function AdminSyncPage({ client, catalog }) {
                                         }) })] }, group)))] }), sync?.excluded.length ? (_jsx(Card, { title: "Never synced", subdued: true, children: _jsx("ul", { className: "vertebr-sync-excluded-list", children: sync.excluded.map((item) => (_jsxs("li", { children: [_jsx("span", { className: "vertebr-sync-excluded-name", children: item.label }), _jsx("span", { className: "vertebr-sync-excluded-reason", children: item.reason })] }, item.label))) }) })) : null, error ? _jsx("div", { className: "vertebr-banner", "data-tone": "danger", children: error }) : null] }), _jsxs("div", { className: "vertebr-savebar vertebr-sync-footer", children: [_jsx("div", { className: "vertebr-savebar-message", children: syncSummary }), _jsx("div", { className: "vertebr-savebar-actions", children: _jsxs("button", { type: "button", className: "vertebr-btn vertebr-btn-primary vertebr-sync-run-btn", disabled: running ||
                                 planLoading ||
                                 toEnv.length === 0 ||
-                                selectedTargets.length === 0, onClick: () => void runSync(), children: [_jsx(IconSync, {}), _jsx("span", { children: running ? "Syncing…" : "Sync selected" })] }) })] }), inspect ? (_jsx(SyncDiffModal, { inspect: inspect, sourceLabel: fromEnvironment?.label ?? fromEnv, onClose: () => setInspect(null) })) : null] }));
+                                selectedTargets.length === 0, onClick: () => void runSync(), children: [_jsx(IconSync, {}), _jsx("span", { children: running ? "Syncing…" : "Sync selected" })] }) })] }), inspect ? (_jsx(SyncDiffModal, { inspect: inspect, sourceLabel: fromEnvironment?.label ?? fromEnv, onClose: () => setInspect(null) })) : null, picker ? (_jsx(SelectionTableDialog, { title: picker.targetLabel, description: (inputsForTarget(picker.targetId)?.[picker.fieldKey] ??
+                    picker.field).description, sourceLabel: fromEnvironment?.label ?? fromEnv, environments: orderedSyncEnvironments(environments, fromEnv, toEnv), destinationEnvIds: toEnv, rows: syncSelectionRows(inputsForTarget(picker.targetId)?.[picker.fieldKey] ??
+                    picker.field, fromEnv), selectedIds: asStringList(targetInputValues[picker.targetId]?.[picker.fieldKey]), overrides: {
+                    ...syncSelectionOverrides(picker.fieldKey, inputsForTarget(picker.targetId)?.[picker.fieldKey] ??
+                        picker.field),
+                    showRemove: selectedTargets.includes(picker.targetId),
+                }, onClose: () => setPicker(null), onApply: applyPickerSelection, onRemove: selectedTargets.includes(picker.targetId)
+                    ? deselectFromPicker
+                    : undefined })) : null] }));
 }

package/dist/components/admin/AuditBoard.d.ts

@@ -1,7 +1,11 @@
-import type { VertebrClient } from "@vertebr/client";
+import type { AuditColumn, AuditEntry, VertebrClient } from "@vertebr/client";
 export type AuditBoardProps = {
     client: VertebrClient;
     label?: string;
+    /** From `catalog.audit.columns`. Omit for Vertebr defaults. */
+    columns?: AuditColumn[];
 };
-export declare function AuditBoard({ client, label }: AuditBoardProps): import("react").JSX.Element;
+/** Resolve a column path against an audit entry (`meta.x`, `target`, or field). */
+export declare function resolveAuditColumnValue(entry: AuditEntry, path: string): unknown;
+export declare function AuditBoard({ client, label, columns: columnsProp, }: AuditBoardProps): import("react").JSX.Element;
 //# sourceMappingURL=AuditBoard.d.ts.map

package/dist/components/admin/AuditBoard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AuditBoard.d.ts","sourceRoot":"","sources":["../../../src/components/admin/AuditBoard.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAc,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEjE,MAAM,MAAM,eAAe,GAAG;IAC5B,MAAM,EAAE,aAAa,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAaF,wBAAgB,UAAU,CAAC,EAAE,MAAM,EAAE,KAAe,EAAE,EAAE,eAAe,+BA4EtE"}
+{"version":3,"file":"AuditBoard.d.ts","sourceRoot":"","sources":["../../../src/components/admin/AuditBoard.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,WAAW,EACX,UAAU,EACV,aAAa,EACd,MAAM,iBAAiB,CAAC;AAoBzB,MAAM,MAAM,eAAe,GAAG;IAC5B,MAAM,EAAE,aAAa,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+DAA+D;IAC/D,OAAO,CAAC,EAAE,WAAW,EAAE,CAAC;CACzB,CAAC;AAsEF,mFAAmF;AACnF,wBAAgB,uBAAuB,CACrC,KAAK,EAAE,UAAU,EACjB,IAAI,EAAE,MAAM,GACX,OAAO,CAST;AA6CD,wBAAgB,UAAU,CAAC,EACzB,MAAM,EACN,KAAe,EACf,OAAO,EAAE,WAAW,GACrB,EAAE,eAAe,+BA2LjB"}