@vertebr/react 0.19.0 → 0.21.0

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/dialog/Dialog.d.ts

@@ -0,0 +1,43 @@
+import { type ReactNode } from "react";
+/** Same caps as MUI Dialog `maxWidth`. */
+export type DialogMaxWidth = "xs" | "sm" | "md" | "lg" | "xl" | false;
+export type DialogProps = {
+    onClose: () => void;
+    children: ReactNode;
+    /**
+     * Largest width the paper will grow to.
+     * `false` leaves width to the content.
+     * @default "sm"
+     */
+    maxWidth?: DialogMaxWidth;
+    /** Stretch the paper to {@link maxWidth} instead of hugging content. */
+    fullWidth?: boolean;
+    className?: string;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+};
+/**
+ * Modal shell. Backdrop, scroll lock, and Escape live here.
+ * Compose with {@link DialogTitle}, {@link DialogContent}, and {@link DialogActions}.
+ */
+export declare function Dialog({ onClose, children, maxWidth, fullWidth, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, }: DialogProps): import("react").JSX.Element;
+export type DialogTitleProps = {
+    id?: string;
+    eyebrow?: ReactNode;
+    children: ReactNode;
+    /** Header actions, typically Close. */
+    actions?: ReactNode;
+};
+export declare function DialogTitle({ id, eyebrow, children, actions, }: DialogTitleProps): import("react").JSX.Element;
+export type DialogContentProps = {
+    children: ReactNode;
+    className?: string;
+    /** Hairline rules above and below the body, like MUI `dividers`. */
+    dividers?: boolean;
+};
+export declare function DialogContent({ children, className, dividers, }: DialogContentProps): import("react").JSX.Element;
+export type DialogActionsProps = {
+    children: ReactNode;
+};
+export declare function DialogActions({ children }: DialogActionsProps): import("react").JSX.Element;
+//# sourceMappingURL=Dialog.d.ts.map

package/dist/components/dialog/Dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/components/dialog/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzD,0CAA0C;AAC1C,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;AAEtE,MAAM,MAAM,WAAW,GAAG;IACxB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,wEAAwE;IACxE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AAEF;;;GAGG;AACH,wBAAgB,MAAM,CAAC,EACrB,OAAO,EACP,QAAQ,EACR,QAAe,EACf,SAAiB,EACjB,SAAS,EACT,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,GAClC,EAAE,WAAW,+BAoCb;AAED,MAAM,MAAM,gBAAgB,GAAG;IAC7B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB,uCAAuC;IACvC,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAC1B,EAAE,EACF,OAAO,EACP,QAAQ,EACR,OAAO,GACR,EAAE,gBAAgB,+BAWlB;AAED,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oEAAoE;IACpE,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,SAAS,EACT,QAAgB,GACjB,EAAE,kBAAkB,+BAepB;AAED,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,EAAE,kBAAkB,+BAM7D"}

package/dist/components/dialog/Dialog.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId } from "react";
+/**
+ * Modal shell. Backdrop, scroll lock, and Escape live here.
+ * Compose with {@link DialogTitle}, {@link DialogContent}, and {@link DialogActions}.
+ */
+export function Dialog({ onClose, children, maxWidth = "sm", fullWidth = false, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, }) {
+    useEffect(() => {
+        const onKeyDown = (event) => {
+            if (event.key === "Escape")
+                onClose();
+        };
+        window.addEventListener("keydown", onKeyDown);
+        const previous = document.body.style.overflow;
+        document.body.style.overflow = "hidden";
+        return () => {
+            window.removeEventListener("keydown", onKeyDown);
+            document.body.style.overflow = previous;
+        };
+    }, [onClose]);
+    return (_jsx("div", { className: "vertebr-modal-backdrop vertebr-dialog-backdrop", role: "presentation", onClick: onClose, children: _jsx("div", { className: ["vertebr-modal", "vertebr-dialog", className]
+                .filter(Boolean)
+                .join(" "), role: "dialog", "aria-modal": "true", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "data-max-width": maxWidth === false ? undefined : maxWidth, "data-full-width": fullWidth ? "true" : undefined, onClick: (event) => event.stopPropagation(), children: children }) }));
+}
+export function DialogTitle({ id, eyebrow, children, actions, }) {
+    const autoId = useId();
+    return (_jsxs("header", { className: "vertebr-modal-head vertebr-dialog-title", children: [_jsxs("div", { className: "vertebr-modal-heading", children: [eyebrow ? _jsx("p", { className: "vertebr-modal-eyebrow", children: eyebrow }) : null, _jsx("h2", { id: id ?? autoId, children: children })] }), actions ? _jsx("div", { className: "vertebr-modal-actions", children: actions }) : null] }));
+}
+export function DialogContent({ children, className, dividers = false, }) {
+    return (_jsx("div", { className: [
+            "vertebr-modal-body",
+            "vertebr-dialog-content",
+            dividers ? "vertebr-dialog-content-dividers" : "",
+            className,
+        ]
+            .filter(Boolean)
+            .join(" "), children: children }));
+}
+export function DialogActions({ children }) {
+    return (_jsx("footer", { className: "vertebr-modal-foot vertebr-dialog-actions", children: children }));
+}

package/dist/components/dialog/SelectionTableDialog.d.ts

@@ -0,0 +1,79 @@
+import { type ReactNode } from "react";
+import type { AdminEnvironment } from "@vertebr/client";
+import { type TableFilterColumn } from "../table";
+/** One selectable row in {@link SelectionTableDialog}. */
+export type SelectionTableRow = {
+    id: string;
+    /** Primary column (id / code / slug). */
+    primary: string;
+    /** Secondary column (name / offer / label). */
+    secondary?: string;
+    /** Env ids where this row is already present. */
+    environments?: string[];
+    /**
+     * Extra values for custom filter columns (keyed by filter id).
+     * Built-in `destination` uses `"missing" | "present"`.
+     */
+    filterValues?: Record<string, unknown>;
+};
+export type SelectionTableColumnLabels = {
+    primary?: string;
+    secondary?: string;
+    environments?: string;
+};
+/**
+ * Optional copy / behavior overrides for {@link SelectionTableDialog}.
+ * Omit a key to keep the default.
+ */
+export type SelectionTableDialogOverrides = {
+    eyebrow?: string;
+    columns?: SelectionTableColumnLabels;
+    /** Show the environments column + chips. @default true when `environments` is non-empty */
+    showEnvironments?: boolean;
+    showEnvironmentFilter?: boolean;
+    showDestinationFilter?: boolean;
+    showSelectShown?: boolean;
+    showScrollControls?: boolean;
+    showRemove?: boolean;
+    searchPlaceholder?: string;
+    emptyLabel?: string;
+    noMatchLabel?: string;
+    /** Footer meta when nothing is checked (sync-all semantics). */
+    allSelectedFooter?: string;
+    /** Footer meta when one or more rows are checked. */
+    selectedFooter?: (count: number) => string;
+    applyLabel?: string;
+    cancelLabel?: string;
+    removeLabel?: string;
+    /** Extra filter columns merged after built-in ones. */
+    extraFilters?: TableFilterColumn[];
+    /** Replace built-in filters entirely. */
+    filters?: TableFilterColumn[];
+    /** Custom cell render for the secondary column. */
+    renderSecondary?: (row: SelectionTableRow) => ReactNode;
+    /** Custom cell render for an extra column after environments. */
+    renderExtra?: (row: SelectionTableRow) => ReactNode;
+    extraColumnLabel?: string;
+};
+export type SelectionTableDialogProps = {
+    title: string;
+    description?: string;
+    /** Shown next to filters, e.g. "Source: Qual". */
+    sourceLabel?: string;
+    rows: SelectionTableRow[];
+    /** Catalog environments — drives env chips + default filters. */
+    environments: AdminEnvironment[];
+    /** Env ids treated as destinations for the “missing / present” filter. */
+    destinationEnvIds?: string[];
+    selectedIds: string[];
+    overrides?: SelectionTableDialogOverrides;
+    onClose: () => void;
+    onApply: (ids: string[]) => void;
+    onRemove?: () => void;
+};
+/**
+ * Standard multi-select table dialog (search, filter chips, sort).
+ * Used by Sync target pickers; overrides let hosts tune copy and columns.
+ */
+export declare function SelectionTableDialog({ title, description, sourceLabel, rows, environments, destinationEnvIds, selectedIds, overrides, onClose, onApply, onRemove, }: SelectionTableDialogProps): import("react").JSX.Element;
+//# sourceMappingURL=SelectionTableDialog.d.ts.map

package/dist/components/dialog/SelectionTableDialog.d.ts.map

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

package/dist/components/dialog/SelectionTableDialog.js

@@ -0,0 +1,177 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { SortableHeader } from "../resources/SortableHeader";
+import { TableFilters, TableScrollControls, TableSearch, TableWrap, matchesTableFilters, matchesTableQuery, useTableOverflow, } from "../table";
+import { compareFieldValues, nextTableSort, } from "../../lib/sort";
+function defaultDestinationIds(environments, destinationEnvIds, sourceLabel) {
+    if (destinationEnvIds?.length)
+        return destinationEnvIds;
+    // Best-effort: every env except one matching the source label text.
+    if (!sourceLabel)
+        return environments.map((env) => env.id).slice(1);
+    const source = environments.find((env) => env.label === sourceLabel ||
+        env.id === sourceLabel ||
+        sourceLabel.toLowerCase().includes(env.label.toLowerCase()));
+    return environments
+        .map((env) => env.id)
+        .filter((id) => id !== source?.id);
+}
+function EnvChips({ activeIds, columns, }) {
+    const active = new Set(activeIds);
+    return (_jsx("span", { className: "vertebr-env-chips", "aria-label": "Active environments", children: columns.map((env) => {
+            const on = active.has(env.id);
+            return (_jsxs("span", { className: "vertebr-env-chip", "data-on": on ? "true" : "false", "data-tone": env.tone ?? "neutral", title: on ? `Active in ${env.label}` : `Not in ${env.label}`, children: [_jsx("span", { className: "vertebr-env-chip-dot", "aria-hidden": "true" }), env.label] }, env.id));
+        }) }));
+}
+/**
+ * Standard multi-select table dialog (search, filter chips, sort).
+ * Used by Sync target pickers; overrides let hosts tune copy and columns.
+ */
+export function SelectionTableDialog({ title, description, sourceLabel, rows, environments, destinationEnvIds, selectedIds, overrides = {}, onClose, onApply, onRemove, }) {
+    const { eyebrow = "Selection", columns: columnLabels = {}, showEnvironments = environments.length > 0, showEnvironmentFilter = true, showDestinationFilter = true, showSelectShown = true, showScrollControls = false, showRemove = Boolean(onRemove), searchPlaceholder = "Search…", emptyLabel = "Nothing available.", noMatchLabel = "No matching rows.", allSelectedFooter = "All items", selectedFooter = (count) => `${count} selected`, applyLabel = "Apply", cancelLabel = "Cancel", removeLabel = "Remove", extraFilters, filters: filtersOverride, renderSecondary, renderExtra, extraColumnLabel, } = overrides;
+    const primaryLabel = columnLabels.primary ?? "Id";
+    const secondaryLabel = columnLabels.secondary ?? "Name";
+    const environmentsLabel = columnLabels.environments ?? "Environments";
+    const destIds = useMemo(() => defaultDestinationIds(environments, destinationEnvIds, sourceLabel), [environments, destinationEnvIds, sourceLabel]);
+    const normalizedRows = useMemo(() => {
+        return rows.map((row) => {
+            const activeEnvs = row.environments ?? [];
+            const missingOnDest = destIds.length > 0 &&
+                destIds.some((envId) => !activeEnvs.includes(envId));
+            const destination = String(row.filterValues?.destination ?? "") ||
+                (missingOnDest ? "missing" : "present");
+            const envSortKey = activeEnvs
+                .map((envId) => environments.find((env) => env.id === envId)?.label ?? envId)
+                .join(", ");
+            return {
+                ...row,
+                environments: activeEnvs,
+                destination,
+                envSortKey,
+                filterValues: {
+                    ...(row.filterValues ?? {}),
+                    destination,
+                },
+            };
+        });
+    }, [rows, destIds, environments]);
+    const [draft, setDraft] = useState(() => [...selectedIds]);
+    const [query, setQuery] = useState("");
+    const [filters, setFilters] = useState({});
+    const [sort, setSort] = useState({
+        field: "primary",
+        order: "asc",
+    });
+    const tableOverflow = useTableOverflow(normalizedRows.length);
+    const filterColumns = useMemo(() => {
+        if (filtersOverride)
+            return filtersOverride;
+        const cols = [];
+        if (showEnvironmentFilter && environments.length > 0) {
+            cols.push({
+                id: "environments",
+                label: "Environment",
+                multiselect: true,
+                options: environments.map((env) => ({
+                    value: env.id,
+                    label: env.label,
+                })),
+            });
+        }
+        if (showDestinationFilter && destIds.length > 0) {
+            cols.push({
+                id: "destination",
+                label: "Destination",
+                multiselect: true,
+                options: [
+                    { value: "missing", label: "Missing on destination" },
+                    { value: "present", label: "Already on destination" },
+                ],
+            });
+        }
+        if (extraFilters?.length)
+            cols.push(...extraFilters);
+        return cols;
+    }, [
+        filtersOverride,
+        showEnvironmentFilter,
+        showDestinationFilter,
+        environments,
+        destIds.length,
+        extraFilters,
+    ]);
+    const filterGetters = useMemo(() => ({
+        environments: (row) => row.environments ?? [],
+        destination: (row) => row.filterValues?.destination ?? row.destination,
+    }), []);
+    const visibleRows = useMemo(() => {
+        const searched = query.trim()
+            ? normalizedRows.filter((row) => matchesTableQuery(row.primary, query) ||
+                matchesTableQuery(row.secondary, query) ||
+                matchesTableQuery(row.envSortKey, query))
+            : normalizedRows;
+        const filtered = searched.filter((row) => matchesTableFilters(row, filters, {
+            ...filterGetters,
+            ...Object.fromEntries((extraFilters ?? []).map((column) => [
+                column.id,
+                (item) => item.filterValues?.[column.id],
+            ])),
+        }));
+        return [...filtered].sort((left, right) => {
+            if (sort.field === "primary") {
+                return compareFieldValues(left.primary, right.primary, "string", sort.order);
+            }
+            if (sort.field === "secondary") {
+                return compareFieldValues(left.secondary, right.secondary, "string", sort.order);
+            }
+            if (sort.field === "environments") {
+                return compareFieldValues(left.envSortKey, right.envSortKey, "string", sort.order);
+            }
+            return 0;
+        });
+    }, [
+        normalizedRows,
+        query,
+        filters,
+        filterGetters,
+        extraFilters,
+        sort,
+    ]);
+    const allVisibleSelected = visibleRows.length > 0 &&
+        visibleRows.every((row) => draft.includes(row.id));
+    const toggle = (id) => {
+        setDraft((current) => current.includes(id)
+            ? current.filter((item) => item !== id)
+            : [...current, id]);
+    };
+    const toggleAllVisible = () => {
+        setDraft((current) => {
+            if (allVisibleSelected) {
+                const drop = new Set(visibleRows.map((row) => row.id));
+                return current.filter((id) => !drop.has(id));
+            }
+            const next = new Set(current);
+            for (const row of visibleRows)
+                next.add(row.id);
+            return [...next];
+        });
+    };
+    const sortHeader = (field, label, preferredFirst = "asc") => {
+        const active = sort.field === field;
+        return (_jsx("th", { children: _jsx(SortableHeader, { label: label, active: active, order: active ? sort.order : undefined, onSort: () => setSort(nextTableSort(sort, field, preferredFirst)) }) }));
+    };
+    return (_jsx("div", { className: "vertebr-modal-backdrop", role: "presentation", onClick: onClose, children: _jsxs("div", { className: "vertebr-modal vertebr-selection-dialog", role: "dialog", "aria-modal": "true", "aria-labelledby": "vertebr-selection-dialog-title", onClick: (event) => event.stopPropagation(), children: [_jsxs("header", { className: "vertebr-modal-head vertebr-selection-dialog-head", children: [_jsxs("div", { className: "vertebr-modal-heading", children: [eyebrow ? (_jsx("p", { className: "vertebr-modal-eyebrow", children: eyebrow })) : null, _jsx("h2", { id: "vertebr-selection-dialog-title", children: title }), description ? (_jsx("p", { className: "vertebr-selection-dialog-sub", children: description })) : null] }), _jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet", "aria-label": "Close", onClick: onClose, children: "\u2715" })] }), _jsxs("div", { className: "vertebr-selection-dialog-body", children: [_jsxs("div", { className: "vertebr-table-toolbar vertebr-selection-dialog-toolbar", children: [_jsxs("div", { className: "vertebr-table-toolbar-start", children: [sourceLabel ? (_jsx("span", { className: "vertebr-selection-dialog-source", children: sourceLabel.startsWith("Source")
+                                                ? sourceLabel
+                                                : `Source: ${sourceLabel}` })) : null, filterColumns.length > 0 ? (_jsx(TableFilters, { columns: filterColumns, selected: filters, onChange: setFilters })) : null] }), _jsxs("div", { className: "vertebr-selection-dialog-toolbar-end", children: [_jsx(TableSearch, { value: query, onChange: setQuery, "aria-label": searchPlaceholder, placeholder: searchPlaceholder }), showSelectShown ? (_jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet", disabled: visibleRows.length === 0, onClick: toggleAllVisible, children: allVisibleSelected ? "Clear shown" : "Select shown" })) : null, showScrollControls ? (_jsx(TableScrollControls, { canLeft: tableOverflow.canLeft, canRight: tableOverflow.canRight, onScroll: tableOverflow.scrollBy })) : null, _jsx("span", { className: "vertebr-count", children: visibleRows.length !== normalizedRows.length
+                                                ? `${visibleRows.length} of ${normalizedRows.length}`
+                                                : normalizedRows.length })] })] }), normalizedRows.length === 0 ? (_jsx("div", { className: "vertebr-empty", children: emptyLabel })) : visibleRows.length === 0 ? (_jsx("div", { className: "vertebr-empty", children: noMatchLabel })) : (_jsx(TableWrap, { overflow: tableOverflow, transitionKey: JSON.stringify(filters), children: _jsxs("table", { className: "vertebr-table vertebr-selection-dialog-table", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { className: "vertebr-selection-dialog-col-check", children: _jsx("span", { className: "vertebr-sr-only", children: "Select" }) }), sortHeader("primary", primaryLabel), sortHeader("secondary", secondaryLabel), showEnvironments
+                                                    ? sortHeader("environments", environmentsLabel)
+                                                    : null, renderExtra ? (_jsx("th", { children: extraColumnLabel ?? "" })) : null] }) }), _jsx("tbody", { children: visibleRows.map((row) => {
+                                            const on = draft.includes(row.id);
+                                            return (_jsxs("tr", { "data-selected": on || undefined, onClick: () => toggle(row.id), children: [_jsx("td", { className: "vertebr-selection-dialog-col-check", children: _jsx("input", { type: "checkbox", checked: on, onChange: () => toggle(row.id), onClick: (event) => event.stopPropagation(), "aria-label": `Select ${row.primary}` }) }), _jsx("td", { children: _jsx("code", { className: "vertebr-selection-dialog-primary", children: row.primary }) }), _jsx("td", { children: renderSecondary
+                                                            ? renderSecondary(row)
+                                                            : row.secondary || "—" }), showEnvironments ? (_jsx("td", { children: _jsx(EnvChips, { activeIds: row.environments ?? [], columns: environments }) })) : null, renderExtra ? _jsx("td", { children: renderExtra(row) }) : null] }, row.id));
+                                        }) })] }) }))] }), _jsxs("footer", { className: "vertebr-modal-foot vertebr-selection-dialog-foot", children: [_jsx("div", { className: "vertebr-selection-dialog-foot-meta", children: draft.length === 0
+                                ? allSelectedFooter
+                                : selectedFooter(draft.length) }), _jsxs("div", { className: "vertebr-selection-dialog-foot-actions", children: [showRemove && onRemove ? (_jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet", onClick: onRemove, children: removeLabel })) : null, _jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-quiet", onClick: onClose, children: cancelLabel }), _jsx("button", { type: "button", className: "vertebr-btn vertebr-btn-primary", onClick: () => onApply(draft), children: applyLabel })] })] })] }) }));
+}