@phis/ui 0.1.0

package/components/controls/phi-background-control.js

@@ -0,0 +1,783 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Button, Divider, Flex, Input, InputNumber, Select, Space, Typography, theme } from "antd";
+import { PHI_BACKGROUND_BASE_KINDS, PHI_BACKGROUND_IMAGE_SOURCE_KINDS, PHI_BACKGROUND_MOTION_MODES, PHI_BACKGROUND_OVERLAY_DEFAULT_OPACITY, PHI_BACKGROUND_PARALLAX_DEFAULT_STRENGTH, phiBackgroundBaseSupportsGlassEffect, resolvePhiBackgroundParallaxDefaultStrength, normalizePhiBackgroundWidgetConfig, readPhiBackgroundPatternInkFromCss, resolvePhiBackgroundWidgetStyle, serializePhiBackgroundBaseCss, serializePhiBackgroundPatternInkCss, } from "../widgets/config/background";
+import { PHI_CORE_BACKGROUND_PATTERN_PROVIDERS, resolvePhiBackgroundPatternDefaultValues, resolvePhiBackgroundPatternProvider, } from "../widgets/config/background-pattern-authoring";
+import { PHI_DEFAULT_BACKGROUND_PATTERN_KEY, } from "../widgets/config/background-pattern-contract";
+import { PHI_BACKGROUND_COLOR_OVERLAY_DEFAULT_INK, PHI_BACKGROUND_PATTERN_DEFAULT_INK, resolvePhiBackgroundPatternLiveLayer, } from "../widgets/config/background-pattern-live";
+import { PhiImageAssetVariantKeyName } from "../../constants/media";
+import { normalizeMediaFocalRect } from "../media/focal-rect";
+import { PHI_BACKGROUND_WIDGET_DEFAULT_LABELS, } from "../widgets/label-types/background";
+import { PHI_LAYOUT_EFFECT_IDS, isPhiGlassLayoutEffectId, } from "../../types/layout-style";
+import { ConfigPreviewShell } from "./config-preview-shell";
+import { PhiColorControl } from "./phi-color-control";
+import { PhiSegmentedControl } from "./phi-segmented-control";
+import { PhiSliderControl } from "./phi-slider-control";
+import { PhiSelectControl } from "./phi-select-control";
+import { PHI_COLOR_PICKER_DEFAULT_LABELS } from "../widgets/label-types/color-picker";
+import { usePhiColorControlPresets } from "./use-phi-color-control-presets";
+const BACKGROUND_DIRECTION_OPTIONS = [
+    { value: "0deg", label: "↑" },
+    { value: "45deg", label: "↗" },
+    { value: "90deg", label: "→" },
+    { value: "135deg", label: "↘" },
+    { value: "180deg", label: "↓" },
+    { value: "225deg", label: "↙" },
+    { value: "270deg", label: "←" },
+    { value: "315deg", label: "↖" },
+];
+function directionToDegrees(direction) {
+    if (direction.endsWith("deg")) {
+        return Number(direction.replace(/deg$/, ""));
+    }
+    switch (direction) {
+        case "to right":
+            return 90;
+        case "to left":
+            return 270;
+        case "to bottom":
+            return 180;
+        case "to top":
+            return 0;
+    }
+    return 90;
+}
+function degreesToDirection(value) {
+    const rounded = Math.max(0, Math.min(360, Math.round(value)));
+    return `${rounded}deg`;
+}
+function withoutPhiBackgroundImageSource(base) {
+    if (base.sourceKind === "asset") {
+        const { sourceKind: _sourceKind, assetId: _assetId, variantKey: _variantKey, variantVersion: _variantVersion, ...common } = base;
+        return common;
+    }
+    const { sourceKind: _sourceKind, sourceUrl: _sourceUrl, ...common } = base;
+    return common;
+}
+const BACKGROUND_IMAGE_VARIANT_OPTIONS = [
+    { value: "__original__", label: "original" },
+    ...Object.entries(PhiImageAssetVariantKeyName).map(([value, label]) => ({
+        value: Number(value),
+        label,
+    })),
+];
+function toPickerValue(background) {
+    const normalized = normalizePhiBackgroundWidgetConfig(background ?? null);
+    if (normalized.base.kind === "none") {
+        return "rgba(255, 255, 255, 0)";
+    }
+    if (normalized.base.kind === "image") {
+        return "#ffffff";
+    }
+    return serializePhiBackgroundBaseCss(normalized.base);
+}
+function resolveStoredSolidColor(color) {
+    return color;
+}
+export function PhiBackgroundControl({ value, config, disabled = false, mode = "control", labels = PHI_BACKGROUND_WIDGET_DEFAULT_LABELS, colorPickerLabels = PHI_COLOR_PICKER_DEFAULT_LABELS, colorPickerPlacement, motionModes = PHI_BACKGROUND_MOTION_MODES, effects = PHI_LAYOUT_EFFECT_IDS, imageSourceKinds = PHI_BACKGROUND_IMAGE_SOURCE_KINDS, baseKinds = PHI_BACKGROUND_BASE_KINDS, renderMediaPicker, editTransaction, onChange, }) {
+    const { token } = theme.useToken();
+    const colorPickerPresets = usePhiColorControlPresets({ labels: colorPickerLabels });
+    const currentValue = useMemo(() => normalizePhiBackgroundWidgetConfig(value ?? config ?? null), [value, config]);
+    const isDisabled = disabled || !onChange;
+    const colorPickerTransaction = {
+        onOpenChange: (open) => {
+            if (open)
+                editTransaction?.onBegin?.();
+        },
+        onCommit: () => editTransaction?.onCommit?.(),
+        onDiscard: () => editTransaction?.onDiscard?.(),
+    };
+    /* Whether a slider is being dragged: the first value it emits begins the edit, letting go ends it. */
+    const sliderEditingRef = useRef(false);
+    const beginSliderEdit = () => {
+        if (sliderEditingRef.current)
+            return;
+        sliderEditingRef.current = true;
+        editTransaction?.onBegin?.();
+    };
+    const commitSliderEdit = () => {
+        if (!sliderEditingRef.current)
+            return;
+        sliderEditingRef.current = false;
+        editTransaction?.onCommit?.();
+    };
+    /*
+     * The mode this Control shows and acts on, which is the stored one only while the surface offers it.
+     * A value narrowed out of the offer -- a Root Background still carrying `fixed` -- reads as `static`,
+     * which is exactly what such a surface renders, so the Control and the render agree.
+     */
+    const storedMotionMode = currentValue.motion?.mode ?? "static";
+    const activeMotionMode = motionModes.includes(storedMotionMode)
+        ? storedMotionMode
+        : "static";
+    const activeParallaxMotion = activeMotionMode === "parallax" && currentValue.motion?.mode === "parallax"
+        ? currentValue.motion
+        : null;
+    // Motion modes render the original asset and steer the crop through the focal rect, so a
+    // variant selection would have no effect and is locked out while motion is active.
+    const hasActiveMotion = activeMotionMode !== "static";
+    const [previewOpenTarget, setPreviewOpenTarget] = useState(null);
+    const derivedPickerValue = useMemo(() => {
+        if (currentValue.base.kind === "color") {
+            return currentValue.base.color;
+        }
+        return toPickerValue(currentValue);
+    }, [currentValue]);
+    const lastColorBaseRef = useRef(currentValue.base.kind === "color" ? currentValue.base : null);
+    const lastGradientBaseRef = useRef(currentValue.base.kind === "gradient" ? currentValue.base : null);
+    const lastImageBaseRef = useRef(currentValue.base.kind === "image" ? currentValue.base : null);
+    // `strength` means something different in each travel mode, so each one keeps its own dial.
+    const rememberedStrength = useRef(currentValue.motion?.mode === "parallax" && currentValue.motion.strength != null
+        ? { [currentValue.motion.travel ?? "rate"]: currentValue.motion.strength }
+        : {});
+    const [mediaPickerSnapshots, setMediaPickerSnapshots] = useState({});
+    const previewStyle = resolvePhiBackgroundWidgetStyle(currentValue);
+    const previewMinHeight = token.controlHeight * 3;
+    const fieldControlWidth = token.controlHeight * 4;
+    const baseKindCatalog = [
+        { value: "none", label: labels.base.none },
+        { value: "color", label: labels.base.color },
+        { value: "gradient", label: labels.base.gradient },
+        { value: "image", label: labels.base.image },
+    ];
+    const baseKindOptions = baseKindCatalog.filter((option) => baseKinds.includes(option.value));
+    const backgroundPositionOptions = [
+        { value: "center", label: labels.position.center },
+        { value: "top", label: labels.position.top },
+        { value: "bottom", label: labels.position.bottom },
+        { value: "left", label: labels.position.left },
+        { value: "right", label: labels.position.right },
+        { value: "top left", label: labels.position.topLeft },
+        { value: "top right", label: labels.position.topRight },
+        { value: "bottom left", label: labels.position.bottomLeft },
+        { value: "bottom right", label: labels.position.bottomRight },
+    ];
+    const backgroundSizeOptions = [
+        { value: "cover", label: labels.size.cover },
+        { value: "contain", label: labels.size.contain },
+        { value: "auto", label: labels.size.auto },
+    ];
+    const backgroundRepeatOptions = [
+        { value: "no-repeat", label: labels.repeat.noRepeat },
+        { value: "repeat", label: labels.repeat.repeat },
+        { value: "repeat-x", label: labels.repeat.repeatX },
+        { value: "repeat-y", label: labels.repeat.repeatY },
+    ];
+    const backgroundMotionModeCatalog = [
+        { value: "static", label: labels.motion.static },
+        { value: "fixed", label: labels.motion.fixed },
+        { value: "parallax", label: labels.motion.parallax },
+    ];
+    const backgroundMotionOptions = backgroundMotionModeCatalog.filter((option) => motionModes.includes(option.value));
+    const backgroundMotionDirectionOptions = [
+        { value: "natural", label: labels.motion.natural },
+        { value: "reverse", label: labels.motion.reverse },
+    ];
+    const backgroundMotionTravelOptions = [
+        { value: "rate", label: labels.motion.rate },
+        { value: "range", label: labels.motion.range },
+    ];
+    const overlayKindOptions = [
+        { value: "none", label: labels.common.none },
+        { value: "color", label: labels.overlay.color },
+        { value: "pattern", label: labels.overlay.pattern },
+        { value: "noise", label: labels.overlay.noise },
+    ];
+    const patternOptions = PHI_CORE_BACKGROUND_PATTERN_PROVIDERS.map((provider) => {
+        const layer = resolvePhiBackgroundPatternLiveLayer(provider.patternKey, resolvePhiBackgroundPatternDefaultValues(provider), 0.55);
+        if (!layer) {
+            return { value: provider.patternKey, label: labels.overlay.patterns[provider.labelKey] };
+        }
+        return {
+            value: provider.patternKey,
+            label: labels.overlay.patterns[provider.labelKey],
+            preview: {
+                kind: "background",
+                backgroundColor: "#5f6368",
+                backgroundImage: layer.images.join(", "),
+                backgroundSize: layer.images.map((_, index) => layer.sizes?.[index] ?? "auto").join(", "),
+                backgroundPosition: layer.images.map((_, index) => layer.positions?.[index] ?? "0 0").join(", "),
+                backgroundRepeat: layer.images.map((_, index) => layer.repeats?.[index] ?? "repeat").join(", "),
+            },
+        };
+    });
+    const selectedPatternProvider = currentValue.overlay?.kind === "pattern"
+        ? resolvePhiBackgroundPatternProvider(currentValue.overlay.patternKey)
+        : null;
+    const resolvedPatternOptions = currentValue.overlay?.kind === "pattern" && !selectedPatternProvider
+        ? [
+            ...patternOptions,
+            {
+                value: currentValue.overlay.patternKey,
+                label: currentValue.overlay.patternKey,
+                disabled: true,
+            },
+        ]
+        : patternOptions;
+    const noiseGrainOptions = [
+        { value: "fine", label: labels.overlay.grains.fine },
+        { value: "medium", label: labels.overlay.grains.medium },
+        { value: "coarse", label: labels.overlay.grains.coarse },
+    ];
+    const effectKindCatalog = [
+        { value: "none", label: labels.common.none },
+        { value: "glass", label: labels.effect.glass },
+        { value: "haze", label: labels.effect.haze },
+        { value: "blur", label: labels.effect.blur },
+        { value: "dim", label: labels.effect.dim },
+    ];
+    /*
+     * Glass frosts what shows through a surface, so a base that paints its own opaque material has
+     * nothing for it to work on. Offering it there promised a pane over a picture and delivered a wash,
+     * so the segment disappears with such a base and a value stored from before reads as no Effect --
+     * which is exactly what `resolvePhiBackgroundEffect` renders for it.
+     */
+    const supportsGlassEffect = phiBackgroundBaseSupportsGlassEffect(currentValue.base);
+    const isOfferedEffect = (effect) => effects.includes(effect) && (!isPhiGlassLayoutEffectId(effect) || supportsGlassEffect);
+    const effectKindOptions = effectKindCatalog.filter((option) => option.value === "none" || isOfferedEffect(option.value));
+    const activeEffectKind = currentValue.effect && isOfferedEffect(currentValue.effect) ? currentValue.effect : "none";
+    const canOpenPreview = currentValue.base.kind !== "none";
+    useEffect(() => {
+        if (currentValue.base.kind === "color") {
+            lastColorBaseRef.current = currentValue.base;
+        }
+        if (currentValue.base.kind === "gradient") {
+            lastGradientBaseRef.current = currentValue.base;
+        }
+        if (currentValue.base.kind === "image") {
+            lastImageBaseRef.current = currentValue.base;
+        }
+    }, [currentValue]);
+    function emit(nextValue) {
+        onChange?.(nextValue);
+    }
+    function handleMediaPickerOpenChange(purpose, nextOpen) {
+        if (nextOpen) {
+            setMediaPickerSnapshots((current) => ({ ...current, [purpose]: currentValue }));
+        }
+        if (purpose === "preview") {
+            setPreviewOpenTarget(nextOpen ? "image" : null);
+        }
+    }
+    function commitMediaPicker(purpose) {
+        setMediaPickerSnapshots((current) => {
+            const next = { ...current };
+            delete next[purpose];
+            return next;
+        });
+    }
+    function discardMediaPicker(purpose) {
+        const snapshot = mediaPickerSnapshots[purpose];
+        setMediaPickerSnapshots((current) => {
+            const next = { ...current };
+            delete next[purpose];
+            return next;
+        });
+        if (snapshot)
+            emit(snapshot);
+    }
+    function updateBaseFromCss(css) {
+        const nextBase = normalizePhiBackgroundWidgetConfig({
+            background: resolveStoredSolidColor(css),
+        }).base;
+        if (currentValue.base.kind === "gradient" && nextBase.kind === "color") {
+            emit({
+                ...currentValue,
+                base: {
+                    ...currentValue.base,
+                    stops: currentValue.base.stops.map((stop) => ({
+                        ...stop,
+                        color: nextBase.color,
+                    })),
+                },
+            });
+            return;
+        }
+        emit({
+            ...currentValue,
+            base: currentValue.base.kind === "gradient" && nextBase.kind === "gradient"
+                ? {
+                    ...nextBase,
+                    direction: currentValue.base.direction,
+                }
+                : nextBase,
+        });
+    }
+    function updateBaseKind(kind) {
+        if (kind === currentValue.base.kind) {
+            return;
+        }
+        if (kind === "none") {
+            emit({
+                ...currentValue,
+                base: {
+                    kind: "none",
+                },
+                motion: null,
+            });
+            return;
+        }
+        if (kind === "image") {
+            if (currentValue.base.kind === "image") {
+                lastImageBaseRef.current = currentValue.base;
+            }
+            if (currentValue.base.kind === "color") {
+                lastColorBaseRef.current = currentValue.base;
+            }
+            if (currentValue.base.kind === "gradient") {
+                lastGradientBaseRef.current = currentValue.base;
+            }
+            emit({
+                ...currentValue,
+                base: lastImageBaseRef.current?.kind === "image"
+                    ? lastImageBaseRef.current
+                    : {
+                        kind: "image",
+                        sourceKind: "url",
+                        sourceUrl: "",
+                    },
+            });
+            return;
+        }
+        if (kind === "gradient") {
+            if (currentValue.base.kind === "color") {
+                lastColorBaseRef.current = currentValue.base;
+            }
+            if (currentValue.base.kind === "image") {
+                lastImageBaseRef.current = currentValue.base;
+            }
+            const base = currentValue.base.kind === "gradient"
+                ? currentValue.base
+                : lastGradientBaseRef.current?.kind === "gradient"
+                    ? lastGradientBaseRef.current
+                    : {
+                        kind: "gradient",
+                        direction: "to right",
+                        stops: currentValue.base.kind === "color"
+                            ? [
+                                { color: currentValue.base.color, percent: 0 },
+                                { color: currentValue.base.color, percent: 100 },
+                            ]
+                            : [
+                                { color: "#ffffff", percent: 0 },
+                                { color: "#ffffff", percent: 100 },
+                            ],
+                    };
+            emit({
+                ...currentValue,
+                base,
+                motion: null,
+            });
+            return;
+        }
+        emit({
+            ...currentValue,
+            base: currentValue.base.kind === "color"
+                ? currentValue.base
+                : lastColorBaseRef.current?.kind === "color"
+                    ? lastColorBaseRef.current
+                    : {
+                        kind: "color",
+                        color: currentValue.base.kind === "gradient"
+                            ? currentValue.base.stops[0]?.color ?? "#ffffff"
+                            : "#ffffff",
+                    },
+            motion: null,
+        });
+        if (currentValue.base.kind === "image") {
+            lastImageBaseRef.current = currentValue.base;
+        }
+    }
+    function updateGradientDirection(direction) {
+        if (currentValue.base.kind !== "gradient") {
+            return;
+        }
+        emit({
+            ...currentValue,
+            base: {
+                ...currentValue.base,
+                direction,
+            },
+        });
+    }
+    function renderDirectionButtons(value, onDirectionChange) {
+        const resolvedDegrees = directionToDegrees(value) % 360;
+        return (_jsx(_Fragment, { children: BACKGROUND_DIRECTION_OPTIONS.map((option) => (_jsx(Button, { "aria-label": option.value, type: directionToDegrees(option.value) === resolvedDegrees ? "primary" : "default", disabled: isDisabled, onClick: () => onDirectionChange(option.value), style: { minWidth: token.controlHeight, paddingInline: 0 }, children: option.label }, option.value))) }));
+    }
+    function renderDirectionEditor(label, value, onDirectionChange, key) {
+        return (_jsxs(Flex, { vertical: true, gap: token.paddingXS, style: { width: "100%" }, children: [_jsx(Typography.Text, { children: label }), _jsxs(Space.Compact, { block: true, style: { width: "100%" }, children: [renderDirectionButtons(value, onDirectionChange), _jsx(InputNumber, { min: 0, max: 360, step: 1, value: directionToDegrees(value), disabled: isDisabled, suffix: "\u00B0", onChange: (next) => onDirectionChange(degreesToDirection(typeof next === "number" ? next : 90)), styles: { input: { textAlign: "right" } }, style: {
+                                flex: "1 1 0",
+                                minWidth: 0,
+                                width: 0,
+                            } })] })] }, key));
+    }
+    function updateImageField(field, next) {
+        if (currentValue.base.kind !== "image") {
+            return;
+        }
+        if (field === "sourceUrl") {
+            emit({
+                ...currentValue,
+                base: {
+                    ...withoutPhiBackgroundImageSource(currentValue.base),
+                    sourceKind: "url",
+                    sourceUrl: next,
+                    trusted: false,
+                    focalRect: undefined,
+                    resolvedAsset: null,
+                },
+            });
+            return;
+        }
+        emit({
+            ...currentValue,
+            base: { ...currentValue.base, [field]: next },
+        });
+    }
+    function updateImageVariant(nextVariantKey) {
+        if (currentValue.base.kind !== "image" || currentValue.base.sourceKind !== "asset") {
+            return;
+        }
+        emit({
+            ...currentValue,
+            base: {
+                ...currentValue.base,
+                variantKey: nextVariantKey,
+            },
+        });
+    }
+    function updateMotionMode(mode) {
+        emit({
+            ...currentValue,
+            motion: mode === "static"
+                ? { mode }
+                : mode === "fixed"
+                    ? { mode }
+                    : {
+                        mode,
+                        strength: currentValue.motion?.mode === "parallax"
+                            ? currentValue.motion.strength
+                            : PHI_BACKGROUND_PARALLAX_DEFAULT_STRENGTH,
+                        direction: currentValue.motion?.mode === "parallax" ? currentValue.motion.direction : "natural",
+                        travel: currentValue.motion?.mode === "parallax" ? currentValue.motion.travel : "rate",
+                    },
+        });
+    }
+    function updateParallaxMotion(patch) {
+        if (currentValue.base.kind !== "image")
+            return;
+        const parallax = currentValue.motion?.mode === "parallax" ? currentValue.motion : null;
+        const travel = parallax?.travel ?? "rate";
+        const strength = parallax?.strength ?? resolvePhiBackgroundParallaxDefaultStrength(travel);
+        if (patch.strength != null)
+            rememberedStrength.current[travel] = patch.strength;
+        /*
+         * The same number means a speed under `rate` and a share of the surplus under `range`, and the
+         * Control cannot convert between them: that needs the viewport, the host box, and how much material
+         * the original has beyond the crop, none of which it can see. So each travel mode keeps its own
+         * value instead -- switch away, adjust, switch back, and the dial you set is still where you left it.
+         */
+        const nextTravel = patch.travel ?? travel;
+        if (patch.travel != null && patch.travel !== travel)
+            rememberedStrength.current[travel] = strength;
+        const nextStrength = patch.strength ?? (nextTravel === travel
+            ? strength
+            : rememberedStrength.current[nextTravel] ?? resolvePhiBackgroundParallaxDefaultStrength(nextTravel));
+        emit({
+            ...currentValue,
+            motion: {
+                mode: "parallax",
+                strength: nextStrength,
+                direction: patch.direction ?? parallax?.direction ?? "natural",
+                travel: nextTravel,
+            },
+        });
+    }
+    function applyPickedImage(asset) {
+        /**
+         * The Picker already holds the delivery facts the live render resolves on the server, so the
+         * draft carries them as a render-time projection. `builder-persistence` strips it before saving:
+         * a delivery revision or focal rectangle in stored content would go stale on the next edit.
+         */
+        const resolvedAsset = {
+            deliveryUrl: asset.deliveryUrl ?? null,
+            deliveryRevision: asset.deliveryRevision ?? null,
+            variantVersion: asset.variantVersion ?? null,
+            focalRect: normalizeMediaFocalRect(asset.meta?.focalRect ?? null),
+            width: asset.width ?? null,
+            height: asset.height ?? null,
+        };
+        if (currentValue.base.kind !== "image") {
+            emit({
+                ...currentValue,
+                base: {
+                    kind: "image",
+                    sourceKind: "asset",
+                    assetId: asset.id,
+                    variantKey: null,
+                    variantVersion: asset.variantVersion ?? null,
+                    trusted: true,
+                    blurDataUrl: undefined,
+                    resolvedAsset,
+                    position: undefined,
+                    size: "cover",
+                    repeat: "no-repeat",
+                },
+            });
+            return;
+        }
+        const selectedVariantKey = currentValue.base.sourceKind === "asset"
+            ? currentValue.base.variantKey ?? null
+            : null;
+        emit({
+            ...currentValue,
+            base: {
+                ...withoutPhiBackgroundImageSource(currentValue.base),
+                sourceKind: "asset",
+                assetId: asset.id,
+                variantKey: selectedVariantKey,
+                variantVersion: asset.variantVersion ?? null,
+                trusted: true,
+                blurDataUrl: undefined,
+                resolvedAsset,
+                position: undefined,
+            },
+        });
+    }
+    function clearPickedImage() {
+        if (currentValue.base.kind !== "image") {
+            return;
+        }
+        emit({
+            ...currentValue,
+            base: {
+                ...withoutPhiBackgroundImageSource(currentValue.base),
+                sourceKind: "url",
+                sourceUrl: "",
+                trusted: false,
+                blurDataUrl: undefined,
+                focalRect: undefined,
+                resolvedAsset: null,
+            },
+        });
+    }
+    function updateOverlayKind(nextKind) {
+        if (nextKind === "none") {
+            emit({ ...currentValue, overlay: null });
+            return;
+        }
+        if (nextKind === "color") {
+            emit({
+                ...currentValue,
+                overlay: currentValue.overlay?.kind === "color"
+                    ? currentValue.overlay
+                    : {
+                        kind: "color",
+                        opacity: currentValue.overlay?.opacity ?? PHI_BACKGROUND_OVERLAY_DEFAULT_OPACITY,
+                        /*
+                         * A wash carries the ink an author already picked for a Pattern, the way switching the
+                         * Pattern shape keeps it. Only the two kinds that paint with ink share it; coming from
+                         * noise, the wash starts at its own default.
+                         */
+                        ...(currentValue.overlay?.kind === "pattern" && currentValue.overlay.ink
+                            ? { ink: currentValue.overlay.ink }
+                            : {}),
+                    },
+            });
+            return;
+        }
+        if (nextKind === "noise") {
+            emit({
+                ...currentValue,
+                overlay: currentValue.overlay?.kind === "noise"
+                    ? currentValue.overlay
+                    : {
+                        kind: "noise",
+                        opacity: currentValue.overlay?.opacity ?? PHI_BACKGROUND_OVERLAY_DEFAULT_OPACITY,
+                        grain: "fine",
+                    },
+            });
+            return;
+        }
+        const provider = resolvePhiBackgroundPatternProvider(PHI_DEFAULT_BACKGROUND_PATTERN_KEY);
+        emit({
+            ...currentValue,
+            overlay: currentValue.overlay?.kind === "pattern"
+                ? currentValue.overlay
+                : {
+                    kind: "pattern",
+                    patternKey: PHI_DEFAULT_BACKGROUND_PATTERN_KEY,
+                    opacity: currentValue.overlay?.opacity ?? PHI_BACKGROUND_OVERLAY_DEFAULT_OPACITY,
+                    // The other direction of the same rule: the ink follows the author between the two kinds
+                    // that paint with it.
+                    ...(currentValue.overlay?.kind === "color" && currentValue.overlay.ink
+                        ? { ink: currentValue.overlay.ink }
+                        : {}),
+                    values: resolvePhiBackgroundPatternDefaultValues(provider),
+                },
+        });
+    }
+    function updateEffectKind(nextKind) {
+        if (nextKind === "none") {
+            emit({ ...currentValue, effect: null });
+            return;
+        }
+        emit({ ...currentValue, effect: nextKind });
+    }
+    function renderPreviewChrome() {
+        return (_jsx("div", { style: {
+                ...previewStyle,
+                width: "100%",
+                minHeight: previewMinHeight,
+                border: `1px solid ${token.colorBorderSecondary}`,
+                borderRadius: token.borderRadiusLG,
+                cursor: canOpenPreview ? "pointer" : "default",
+            } }));
+    }
+    function renderPreviewPicker() {
+        if (currentValue.base.kind === "color") {
+            return (_jsx(PhiColorControl, { ...colorPickerTransaction, mode: "single", value: derivedPickerValue, disabled: isDisabled, presets: colorPickerPresets, placement: colorPickerPlacement, onChange: (nextValue) => {
+                    if (nextValue != null)
+                        updateBaseFromCss(nextValue);
+                }, children: renderPreviewChrome() }));
+        }
+        if (currentValue.base.kind === "gradient") {
+            return (_jsx(PhiColorControl, { ...colorPickerTransaction, mode: "gradient", value: derivedPickerValue, disabled: isDisabled, presets: colorPickerPresets, placement: colorPickerPlacement, onChange: (nextValue) => {
+                    if (nextValue != null)
+                        updateBaseFromCss(nextValue);
+                }, children: renderPreviewChrome() }));
+        }
+        if (currentValue.base.kind === "image") {
+            return renderMediaPicker?.({
+                purpose: "preview",
+                value: currentValue.base.sourceKind === "asset" ? currentValue.base.assetId ?? null : null,
+                open: previewOpenTarget === "image",
+                onOpenChange: (nextOpen) => handleMediaPickerOpenChange("preview", nextOpen),
+                onCommit: () => commitMediaPicker("preview"),
+                onDiscard: () => discardMediaPicker("preview"),
+                trigger: renderPreviewChrome(),
+                onAssetSelect: applyPickedImage,
+                onAssetClear: clearPickedImage,
+            }) ?? renderPreviewChrome();
+        }
+        return renderPreviewChrome();
+    }
+    if (mode === "preview") {
+        return (_jsx(ConfigPreviewShell, { expanded: canOpenPreview, children: renderPreviewPicker() }));
+    }
+    const showPreview = mode !== "config";
+    return (_jsxs(Space, { orientation: "vertical", size: 12, style: { width: "100%" }, children: [showPreview ? (_jsx(ConfigPreviewShell, { expanded: canOpenPreview, children: renderPreviewPicker() })) : null, _jsxs("div", { style: { display: "flex", flexDirection: "column", gap: token.paddingXS, width: "100%" }, children: [_jsx(Typography.Text, { children: labels.sections.base }), _jsx(PhiSegmentedControl, { block: true, value: currentValue.base.kind, options: baseKindOptions, onChange: (next) => updateBaseKind(next) })] }), currentValue.base.kind === "image" ? (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: token.paddingSM, width: "100%" }, children: [_jsxs(Flex, { align: "center", justify: "space-between", gap: token.paddingXS, wrap: false, style: { width: "100%" }, children: [_jsx(Typography.Text, { children: labels.sections.image }), currentValue.base.sourceKind === "asset" && currentValue.base.assetId != null ? (_jsx(Typography.Text, { type: "secondary", style: { fontSize: token.fontSizeSM, textAlign: "right" }, children: currentValue.base.assetId })) : null] }), _jsxs("div", { style: {
+                            display: "grid",
+                            gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
+                            gap: token.paddingSM,
+                            width: "100%",
+                            alignItems: "start",
+                        }, children: [_jsx("div", { style: { minWidth: 0 }, children: renderMediaPicker?.({
+                                    purpose: "field",
+                                    value: currentValue.base.sourceKind === "asset" ? currentValue.base.assetId ?? null : null,
+                                    onOpenChange: (nextOpen) => handleMediaPickerOpenChange("field", nextOpen),
+                                    onCommit: () => commitMediaPicker("field"),
+                                    onDiscard: () => discardMediaPicker("field"),
+                                    onAssetSelect: applyPickedImage,
+                                    onAssetClear: clearPickedImage,
+                                }) ?? null }), _jsx("div", { style: { minWidth: 0 }, children: _jsx(Select, { value: hasActiveMotion || currentValue.base.sourceKind !== "asset"
+                                        ? "__original__"
+                                        : currentValue.base.variantKey ?? "__original__", disabled: isDisabled || hasActiveMotion || currentValue.base.sourceKind !== "asset", options: BACKGROUND_IMAGE_VARIANT_OPTIONS, style: { width: "100%" }, onChange: (next) => {
+                                        updateImageVariant(next === "__original__" ? null : next);
+                                    } }) })] }), hasActiveMotion ? (_jsx(Typography.Text, { type: "secondary", style: { fontSize: token.fontSizeSM }, children: labels.motion.usesOriginal })) : null, currentValue.base.sourceKind === "url" && imageSourceKinds.includes("url") ? (_jsx(Input, { value: currentValue.base.sourceUrl ?? "", disabled: isDisabled, placeholder: labels.placeholders.sourceUrl, onChange: (event) => updateImageField("sourceUrl", event.target.value) })) : null, _jsxs("div", { style: {
+                            display: "grid",
+                            gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
+                            gap: token.paddingSM,
+                            width: "100%",
+                        }, children: [_jsx(Select, { value: currentValue.base.position ?? "center", disabled: isDisabled, style: { width: "100%" }, options: backgroundPositionOptions, onChange: (next) => updateImageField("position", next) }), _jsx(Select, { value: currentValue.base.size ?? "cover", disabled: isDisabled, style: { width: "100%" }, options: backgroundSizeOptions, onChange: (next) => updateImageField("size", next) }), _jsx(Select, { value: currentValue.base.repeat ?? "no-repeat", disabled: isDisabled, style: { width: "100%" }, options: backgroundRepeatOptions, onChange: (next) => updateImageField("repeat", next) })] }), backgroundMotionOptions.length > 1 ? (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: token.paddingXS, width: "100%" }, children: [_jsx(Typography.Text, { children: labels.sections.motion }), _jsx(PhiSegmentedControl, { block: true, value: activeMotionMode, options: backgroundMotionOptions, disabled: isDisabled, onChange: updateMotionMode }), activeParallaxMotion ? (_jsxs(_Fragment, { children: [_jsx(Typography.Text, { children: labels.motion.strength }), _jsx(PhiSliderControl, { min: 0, max: 1, step: 0.05, ariaLabel: labels.motion.strength, value: activeParallaxMotion.strength ?? resolvePhiBackgroundParallaxDefaultStrength(activeParallaxMotion.travel), disabled: isDisabled, tooltipSuffix: "\u00D7", style: { width: "100%" }, onChange: (strength) => {
+                                            beginSliderEdit();
+                                            updateParallaxMotion({ strength });
+                                        }, onChangeComplete: commitSliderEdit }), _jsx(Typography.Text, { children: labels.motion.direction }), _jsx(PhiSegmentedControl, { block: true, value: activeParallaxMotion.direction ?? "natural", options: backgroundMotionDirectionOptions, disabled: isDisabled, onChange: (direction) => updateParallaxMotion({ direction }) }), _jsx(Typography.Text, { children: labels.motion.travel }), _jsx(PhiSegmentedControl, { block: true, value: activeParallaxMotion.travel ?? "rate", options: backgroundMotionTravelOptions, disabled: isDisabled, onChange: (travel) => updateParallaxMotion({ travel }) })] })) : null] })) : null] })) : currentValue.base.kind !== "none" ? (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: token.paddingSM, width: "100%" }, children: [currentValue.base.kind === "color" ? (_jsxs(Flex, { align: "center", justify: "space-between", gap: token.paddingSM, wrap: "wrap", children: [_jsx(Typography.Text, { children: labels.base.color }), _jsx(PhiColorControl, { ...colorPickerTransaction, value: currentValue.base.color, disabled: isDisabled, presets: colorPickerPresets, placement: colorPickerPlacement, onChange: (value) => {
+                                    if (value != null)
+                                        updateBaseFromCss(value);
+                                } })] })) : (_jsxs(Flex, { align: "center", justify: "space-between", gap: token.paddingSM, wrap: "wrap", children: [_jsx(Typography.Text, { children: labels.base.gradient }), _jsx(PhiColorControl, { ...colorPickerTransaction, mode: "gradient", value: derivedPickerValue, disabled: isDisabled, presets: colorPickerPresets, placement: colorPickerPlacement, onChange: (value) => {
+                                    if (value != null)
+                                        updateBaseFromCss(value);
+                                } })] })), currentValue.base.kind === "gradient" ? (renderDirectionEditor(labels.gradient.direction, currentValue.base.direction, updateGradientDirection)) : null] })) : null, _jsx(Divider, { dashed: true, size: "small" }), _jsxs(Space, { orientation: "vertical", size: 8, style: { width: "100%" }, children: [_jsx(Typography.Text, { children: labels.sections.overlay }), _jsx(PhiSegmentedControl, { block: true, value: currentValue.overlay?.kind ?? "none", options: overlayKindOptions, onChange: (next) => updateOverlayKind(next) }), currentValue.overlay ? (_jsxs(Space, { orientation: "vertical", size: 8, style: { width: "100%" }, children: [currentValue.overlay.kind === "pattern" ? (_jsxs(Flex, { align: "center", justify: "space-between", gap: token.paddingSM, wrap: "wrap", children: [_jsx(Typography.Text, { children: labels.overlay.pattern }), _jsx(PhiSelectControl, { value: currentValue.overlay.patternKey, options: resolvedPatternOptions, disabled: isDisabled, style: { width: fieldControlWidth }, onChange: (patternKey) => {
+                                            const provider = resolvePhiBackgroundPatternProvider(patternKey);
+                                            if (!provider)
+                                                return;
+                                            emit({
+                                                ...currentValue,
+                                                overlay: {
+                                                    kind: "pattern",
+                                                    patternKey,
+                                                    opacity: currentValue.overlay?.opacity ?? PHI_BACKGROUND_OVERLAY_DEFAULT_OPACITY,
+                                                    // The ink belongs to the Overlay rather than to one Pattern, so switching the
+                                                    // shape keeps the paint the author picked for it.
+                                                    ...(currentValue.overlay?.kind === "pattern" && currentValue.overlay.ink
+                                                        ? { ink: currentValue.overlay.ink }
+                                                        : {}),
+                                                    values: resolvePhiBackgroundPatternDefaultValues(provider),
+                                                },
+                                            });
+                                        } })] })) : null, currentValue.overlay.kind === "noise" ? (_jsxs(Flex, { vertical: true, gap: token.paddingXS, style: { width: "100%" }, children: [_jsx(Typography.Text, { children: labels.overlay.grain }), _jsx(PhiSegmentedControl, { block: true, value: currentValue.overlay.grain, options: noiseGrainOptions, disabled: isDisabled, onChange: (grain) => emit({
+                                            ...currentValue,
+                                            overlay: {
+                                                ...currentValue.overlay,
+                                                kind: "noise",
+                                                grain,
+                                            },
+                                        }) })] })) : null, currentValue.overlay.kind === "noise" ? null : (_jsxs(Flex, { align: "center", justify: "space-between", gap: token.paddingSM, wrap: "wrap", children: [_jsx(Typography.Text, { children: labels.overlay.color }), _jsx(PhiColorControl, { ...colorPickerTransaction, mode: "both", value: serializePhiBackgroundPatternInkCss(currentValue.overlay.ink ?? (currentValue.overlay.kind === "color"
+                                            ? PHI_BACKGROUND_COLOR_OVERLAY_DEFAULT_INK
+                                            : PHI_BACKGROUND_PATTERN_DEFAULT_INK)), disabled: isDisabled, presets: colorPickerPresets, placement: colorPickerPlacement, onChange: (nextCss) => {
+                                            const overlay = currentValue.overlay;
+                                            const nextInk = nextCss == null ? null : readPhiBackgroundPatternInkFromCss(nextCss);
+                                            if (!nextInk || !overlay || overlay.kind === "noise")
+                                                return;
+                                            emit({
+                                                ...currentValue,
+                                                overlay: { ...overlay, ink: nextInk },
+                                            });
+                                        } })] })), _jsxs(Flex, { align: "center", justify: "space-between", gap: token.paddingSM, wrap: "wrap", children: [_jsx(Typography.Text, { children: labels.common.opacity }), _jsx(InputNumber, { min: 0, max: 1, step: 0.01, value: currentValue.overlay.opacity ?? PHI_BACKGROUND_OVERLAY_DEFAULT_OPACITY, disabled: isDisabled, onChange: (next) => emit({
+                                            ...currentValue,
+                                            overlay: {
+                                                ...currentValue.overlay,
+                                                opacity: typeof next === "number" ? next : PHI_BACKGROUND_OVERLAY_DEFAULT_OPACITY,
+                                            },
+                                        }), style: { width: fieldControlWidth } })] }), currentValue.overlay.kind === "pattern" && selectedPatternProvider
+                                ? selectedPatternProvider.fields.map((field) => {
+                                    if (field.type === "direction") {
+                                        const direction = currentValue.overlay?.kind === "pattern" &&
+                                            typeof currentValue.overlay.values[field.key] === "string"
+                                            ? currentValue.overlay.values[field.key]
+                                            : field.defaultValue;
+                                        return renderDirectionEditor(labels.common.direction, direction, (nextDirection) => {
+                                            if (currentValue.overlay?.kind !== "pattern")
+                                                return;
+                                            emit({
+                                                ...currentValue,
+                                                overlay: {
+                                                    ...currentValue.overlay,
+                                                    values: { ...currentValue.overlay.values, [field.key]: nextDirection },
+                                                },
+                                            });
+                                        }, field.key);
+                                    }
+                                    const numberValue = currentValue.overlay?.kind === "pattern" &&
+                                        typeof currentValue.overlay.values[field.key] === "number"
+                                        ? currentValue.overlay.values[field.key]
+                                        : field.defaultValue;
+                                    return (_jsxs(Flex, { align: "center", justify: "space-between", gap: token.paddingSM, wrap: "wrap", children: [_jsx(Typography.Text, { children: labels.common.scale }), _jsx(InputNumber, { min: field.min, max: field.max, step: field.step, value: numberValue, disabled: isDisabled, onChange: (next) => {
+                                                    if (currentValue.overlay?.kind !== "pattern")
+                                                        return;
+                                                    emit({
+                                                        ...currentValue,
+                                                        overlay: {
+                                                            ...currentValue.overlay,
+                                                            values: {
+                                                                ...currentValue.overlay.values,
+                                                                [field.key]: typeof next === "number" ? next : field.defaultValue,
+                                                            },
+                                                        },
+                                                    });
+                                                }, style: { width: fieldControlWidth } })] }, field.key));
+                                })
+                                : null] })) : null] }), effectKindOptions.length > 1 ? (_jsxs(_Fragment, { children: [_jsx(Divider, { dashed: true, size: "small" }), _jsxs(Space, { orientation: "vertical", size: 8, style: { width: "100%" }, children: [_jsx(Typography.Text, { children: labels.sections.effect }), _jsx(PhiSegmentedControl, { block: true, value: activeEffectKind, options: effectKindOptions, onChange: (next) => updateEffectKind(next) })] })] })) : null] }));
+}