@remotion/studio 4.0.463 → 4.0.465

package/dist/components/CanvasOrLoading.js

@@ -81,7 +81,7 @@ const loaderContainer = {
     overflowY: 'auto',
 };
 const ErrorLoading = ({ error, calculateMetadataContext }) => {
-    return (jsx_runtime_1.jsx("div", { style: loaderContainer, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(ErrorLoader_1.ErrorLoader, { canHaveDismissButton: false, keyboardShortcuts: false, error: error, onRetry: () => {
+    return (jsx_runtime_1.jsx("div", { style: loaderContainer, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(ErrorLoader_1.ErrorLoader, { canHaveDismissButton: false, keyboardShortcuts: true, error: error, onRetry: () => {
                 var _a;
                 return (_a = remotion_1.Internals.resolveCompositionsRef.current) === null || _a === void 0 ? void 0 : _a.reloadCurrentlySelectedComposition();
             }, calculateMetadata: calculateMetadataContext }, error.stack) }));

package/dist/components/ColorPicker/AlphaSlider.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export declare const AlphaSlider: React.FC<{
+    readonly hue: number;
+    readonly saturation: number;
+    readonly value: number;
+    readonly alpha: number;
+    readonly onChange: (next: number) => void;
+    readonly onChangeComplete: (next: number) => void;
+}>;

package/dist/components/ColorPicker/AlphaSlider.js

@@ -0,0 +1,88 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AlphaSlider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const color_conversion_1 = require("../../helpers/color-conversion");
+const checker_1 = require("./checker");
+const SLIDER_HEIGHT = 12;
+const HANDLE_WIDTH = 8;
+const wrapperStyle = {
+    position: 'relative',
+    height: SLIDER_HEIGHT,
+    width: '100%',
+    borderRadius: 3,
+    overflow: 'hidden',
+    cursor: 'ew-resize',
+    backgroundColor: checker_1.CHECKER_BACKGROUND_COLOR,
+    backgroundImage: checker_1.CHECKER_BACKGROUND_IMAGE,
+    backgroundSize: checker_1.CHECKER_BACKGROUND_SIZE,
+    backgroundPosition: checker_1.CHECKER_BACKGROUND_POSITION,
+    touchAction: 'none',
+};
+const innerStyle = {
+    position: 'absolute',
+    inset: 0,
+};
+const AlphaSlider = ({ hue, saturation, value, alpha, onChange, onChangeComplete }) => {
+    const ref = (0, react_1.useRef)(null);
+    const opaqueColor = (0, react_1.useMemo)(() => {
+        const { r, g, b } = (0, color_conversion_1.hsvToRgb)({ h: hue, s: saturation, v: value });
+        return `rgb(${r}, ${g}, ${b})`;
+    }, [hue, saturation, value]);
+    const gradientStyle = (0, react_1.useMemo)(() => {
+        return {
+            ...innerStyle,
+            background: `linear-gradient(to right, rgba(0, 0, 0, 0), ${opaqueColor})`,
+        };
+    }, [opaqueColor]);
+    const updateFromEvent = (0, react_1.useCallback)((clientX, isFinal) => {
+        const { current } = ref;
+        if (!current) {
+            return;
+        }
+        const rect = current.getBoundingClientRect();
+        const next = (0, color_conversion_1.clamp)((clientX - rect.left) / rect.width, 0, 1);
+        if (isFinal) {
+            onChangeComplete(next);
+        }
+        else {
+            onChange(next);
+        }
+    }, [onChange, onChangeComplete]);
+    const onPointerDown = (0, react_1.useCallback)((e) => {
+        if (e.button !== 0) {
+            return;
+        }
+        e.preventDefault();
+        updateFromEvent(e.clientX, false);
+        const onMove = (ev) => {
+            updateFromEvent(ev.clientX, false);
+        };
+        const onUp = (ev) => {
+            window.removeEventListener('pointermove', onMove);
+            window.removeEventListener('pointerup', onUp);
+            updateFromEvent(ev.clientX, true);
+        };
+        window.addEventListener('pointermove', onMove);
+        window.addEventListener('pointerup', onUp);
+    }, [updateFromEvent]);
+    const handleStyle = (0, react_1.useMemo)(() => {
+        return {
+            position: 'absolute',
+            top: -2,
+            left: `${alpha * 100}%`,
+            marginLeft: -HANDLE_WIDTH / 2,
+            width: HANDLE_WIDTH,
+            height: SLIDER_HEIGHT + 4,
+            borderRadius: 2,
+            border: '2px solid #fff',
+            boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.6)',
+            pointerEvents: 'none',
+        };
+    }, [alpha]);
+    return (jsx_runtime_1.jsxs("div", { ref: ref, style: wrapperStyle, onPointerDown: onPointerDown, children: [
+            jsx_runtime_1.jsx("div", { style: gradientStyle }), jsx_runtime_1.jsx("div", { style: handleStyle })
+        ] }));
+};
+exports.AlphaSlider = AlphaSlider;

package/dist/components/ColorPicker/ColorPicker.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { RemInputStatus } from '../NewComposition/RemInput';
+type Props = {
+    readonly value: string;
+    readonly onChange: (next: string) => void;
+    readonly onChangeComplete: (next: string) => void;
+    readonly status: RemInputStatus;
+    readonly disabled?: boolean;
+    readonly width?: number;
+    readonly height?: number;
+    readonly borderRadius?: number;
+    readonly title?: string;
+    readonly name?: string;
+    readonly className?: string;
+    readonly style?: React.CSSProperties;
+};
+export declare const ColorPicker: React.FC<Props>;
+export {};

package/dist/components/ColorPicker/ColorPicker.js

@@ -0,0 +1,176 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColorPicker = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const player_1 = require("@remotion/player");
+const react_1 = require("react");
+const react_dom_1 = __importDefault(require("react-dom"));
+const colors_1 = require("../../helpers/colors");
+const z_index_1 = require("../../state/z-index");
+const is_menu_item_1 = require("../Menu/is-menu-item");
+const portals_1 = require("../Menu/portals");
+const styles_1 = require("../Menu/styles");
+const checker_1 = require("./checker");
+const ColorPickerPopup_1 = require("./ColorPickerPopup");
+// Class name used to opt the swatch button out of the global
+// `button:focus` inset box-shadow defined in inject-css.ts.
+const SWATCH_CLASSNAME = '__remotion_color_swatch';
+const getSwatchBorderColor = ({ status, isFocused, isHovered, }) => {
+    if (status === 'warning') {
+        return colors_1.WARNING_COLOR;
+    }
+    if (status === 'error') {
+        return colors_1.FAIL_COLOR;
+    }
+    return isFocused || isHovered
+        ? colors_1.INPUT_BORDER_COLOR_HOVERED
+        : colors_1.INPUT_BORDER_COLOR_UNHOVERED;
+};
+const swatchBaseStyle = {
+    position: 'relative',
+    display: 'inline-block',
+    overflow: 'hidden',
+    padding: 0,
+    margin: 0,
+    cursor: 'pointer',
+    backgroundColor: checker_1.CHECKER_BACKGROUND_COLOR,
+    backgroundImage: checker_1.CHECKER_BACKGROUND_IMAGE,
+    backgroundSize: checker_1.CHECKER_BACKGROUND_SIZE,
+    backgroundPosition: checker_1.CHECKER_BACKGROUND_POSITION,
+    boxSizing: 'border-box',
+};
+const fillStyle = {
+    position: 'absolute',
+    inset: 0,
+    display: 'block',
+};
+const ColorPicker = ({ value, onChange, onChangeComplete, status, disabled, width = 45, height = 25, borderRadius = 3, title, name, className, style: customStyle, }) => {
+    const [opened, setOpened] = (0, react_1.useState)(false);
+    const [isHovered, setIsHovered] = (0, react_1.useState)(false);
+    const [isFocused, setIsFocused] = (0, react_1.useState)(false);
+    const triggerRef = (0, react_1.useRef)(null);
+    const { tabIndex, currentZIndex } = (0, z_index_1.useZIndex)();
+    const size = player_1.PlayerInternals.useElementSize(triggerRef, {
+        triggerOnWindowResize: true,
+        shouldApplyCssTransforms: true,
+    });
+    const refresh = size === null || size === void 0 ? void 0 : size.refresh;
+    const onHide = (0, react_1.useCallback)(() => {
+        setOpened(false);
+    }, []);
+    const swatchFill = (0, react_1.useMemo)(() => {
+        return {
+            ...fillStyle,
+            backgroundColor: value,
+        };
+    }, [value]);
+    const swatchStyle = (0, react_1.useMemo)(() => {
+        return {
+            ...swatchBaseStyle,
+            width,
+            height,
+            borderRadius,
+            borderColor: getSwatchBorderColor({ status, isFocused, isHovered }),
+            cursor: disabled ? 'not-allowed' : 'pointer',
+            opacity: disabled ? 0.5 : 1,
+            ...(customStyle !== null && customStyle !== void 0 ? customStyle : {}),
+        };
+    }, [
+        borderRadius,
+        customStyle,
+        disabled,
+        height,
+        isFocused,
+        isHovered,
+        status,
+        width,
+    ]);
+    const onMouseEnter = (0, react_1.useCallback)(() => setIsHovered(true), []);
+    const onMouseLeave = (0, react_1.useCallback)(() => setIsHovered(false), []);
+    const onFocus = (0, react_1.useCallback)(() => setIsFocused(true), []);
+    const onBlur = (0, react_1.useCallback)(() => setIsFocused(false), []);
+    // Toggle on pointerdown (matches Combobox) so the state flips before the
+    // HigherZIndex outside-click detection runs on pointerup. If we toggled in
+    // onClick, the popup would close in pointerup and immediately re-open in
+    // the click that follows.
+    const onTriggerPointerDown = (0, react_1.useCallback)(() => {
+        if (disabled) {
+            return;
+        }
+        setOpened((prev) => {
+            if (!prev) {
+                refresh === null || refresh === void 0 ? void 0 : refresh();
+            }
+            return !prev;
+        });
+    }, [disabled, refresh]);
+    const onTriggerClick = (0, react_1.useCallback)((e) => {
+        if (disabled) {
+            return;
+        }
+        // Keyboard-initiated activations (Enter/Space) don't fire pointerdown,
+        // so handle them here. Mouse clicks are already handled by pointerdown
+        // above; ignore them.
+        const isKeyboardInitiated = e.detail === 0;
+        if (!isKeyboardInitiated) {
+            return;
+        }
+        setOpened((prev) => {
+            if (!prev) {
+                refresh === null || refresh === void 0 ? void 0 : refresh();
+            }
+            return !prev;
+        });
+    }, [disabled, refresh]);
+    const portalStyle = (0, react_1.useMemo)(() => {
+        if (!opened || !size) {
+            return null;
+        }
+        const margin = 6;
+        const popupHeight = 250;
+        const popupWidth = ColorPickerPopup_1.POPUP_WIDTH;
+        const spaceBelow = size.windowSize.height - (size.top + size.height);
+        const spaceAbove = size.top;
+        const openBelow = spaceBelow >= popupHeight + margin || spaceBelow >= spaceAbove;
+        const spaceRight = size.windowSize.width - size.left;
+        // Try aligning the popup to the trigger's left edge first; fall back
+        // to right-aligning if it would clip the viewport.
+        const left = spaceRight >= popupWidth + margin
+            ? size.left
+            : Math.max(margin, size.windowSize.width - popupWidth - margin);
+        if (openBelow) {
+            return {
+                ...styles_1.menuContainerTowardsBottom,
+                top: size.top + size.height + margin,
+                left,
+                background: 'transparent',
+                boxShadow: 'none',
+            };
+        }
+        return {
+            ...styles_1.menuContainerTowardsTop,
+            bottom: size.windowSize.height - size.top + margin,
+            left,
+            background: 'transparent',
+            boxShadow: 'none',
+        };
+    }, [opened, size]);
+    (0, react_1.useEffect)(() => {
+        if (!opened) {
+            return;
+        }
+        const onWindowBlur = () => setOpened(false);
+        window.addEventListener('blur', onWindowBlur);
+        return () => window.removeEventListener('blur', onWindowBlur);
+    }, [opened]);
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsx("button", { ref: triggerRef, type: "button", className: [is_menu_item_1.MENU_INITIATOR_CLASSNAME, SWATCH_CLASSNAME, className]
+                    .filter(Boolean)
+                    .join(' '), disabled: disabled, name: name, title: title !== null && title !== void 0 ? title : value, tabIndex: tabIndex, style: swatchStyle, onPointerDown: onTriggerPointerDown, onClick: onTriggerClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onFocus: onFocus, onBlur: onBlur, children: jsx_runtime_1.jsx("span", { style: swatchFill }) }), portalStyle
+                ? react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { style: styles_1.fullScreenOverlay, children: jsx_runtime_1.jsx("div", { style: styles_1.outerPortal, className: "css-reset", children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onOutsideClick: onHide, onEscape: onHide, children: jsx_runtime_1.jsx("div", { style: portalStyle, children: jsx_runtime_1.jsx(ColorPickerPopup_1.ColorPickerPopup, { value: value, onChange: onChange, onChangeComplete: onChangeComplete }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
+                : null] }));
+};
+exports.ColorPicker = ColorPicker;

package/dist/components/ColorPicker/ColorPickerPopup.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare const POPUP_WIDTH = 240;
+export type ChannelKey = 'r' | 'g' | 'b' | 'a-percent';
+export declare const ColorPickerPopup: React.FC<{
+    readonly value: string;
+    readonly onChange: (next: string) => void;
+    readonly onChangeComplete: (next: string) => void;
+}>;

package/dist/components/ColorPicker/ColorPickerPopup.js

@@ -0,0 +1,276 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColorPickerPopup = exports.POPUP_WIDTH = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const color_conversion_1 = require("../../helpers/color-conversion");
+const colors_1 = require("../../helpers/colors");
+const eyedropper_1 = require("../../icons/eyedropper");
+const z_index_1 = require("../../state/z-index");
+const AlphaSlider_1 = require("./AlphaSlider");
+const checker_1 = require("./checker");
+const HueSlider_1 = require("./HueSlider");
+const SaturationValueArea_1 = require("./SaturationValueArea");
+exports.POPUP_WIDTH = 240;
+const POPUP_PADDING = 12;
+const popupShellStyle = {
+    width: exports.POPUP_WIDTH,
+    padding: POPUP_PADDING,
+    background: '#1f2428',
+    border: '1px solid rgba(0, 0, 0, 0.6)',
+    borderRadius: 4,
+    boxShadow: '0 4px 16px rgba(0, 0, 0, 0.5)',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 10,
+    color: 'white',
+    fontSize: 12,
+    userSelect: 'none',
+    WebkitUserSelect: 'none',
+};
+const sliderRowStyle = {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 8,
+};
+const previewSwatchStyle = {
+    position: 'relative',
+    width: 28,
+    height: 28,
+    flex: '0 0 auto',
+    borderRadius: 14,
+    overflow: 'hidden',
+    border: '1px solid rgba(0, 0, 0, 0.6)',
+    backgroundColor: checker_1.CHECKER_BACKGROUND_COLOR,
+    backgroundImage: checker_1.CHECKER_BACKGROUND_IMAGE,
+    backgroundSize: checker_1.CHECKER_BACKGROUND_SIZE,
+    backgroundPosition: checker_1.CHECKER_BACKGROUND_POSITION,
+};
+const previewSwatchFillBase = {
+    position: 'absolute',
+    inset: 0,
+};
+const slidersColumnStyle = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 6,
+    flex: 1,
+};
+const inputsRowStyle = {
+    display: 'flex',
+    gap: 6,
+    alignItems: 'flex-end',
+};
+const inputColumnStyle = {
+    display: 'flex',
+    flexDirection: 'column',
+    flex: 1,
+    minWidth: 0,
+};
+const labelStyle = {
+    color: colors_1.LIGHT_TEXT,
+    fontSize: 10,
+    textTransform: 'uppercase',
+    letterSpacing: 0.5,
+    marginBottom: 2,
+};
+const baseInputStyle = {
+    width: '100%',
+    background: colors_1.INPUT_BACKGROUND,
+    border: '1px solid rgba(0, 0, 0, 0.6)',
+    borderRadius: 3,
+    color: 'white',
+    padding: '4px 6px',
+    fontSize: 12,
+    textAlign: 'center',
+    boxSizing: 'border-box',
+};
+const eyedropperButtonStyle = {
+    background: 'transparent',
+    border: '1px solid rgba(0, 0, 0, 0.6)',
+    borderRadius: 3,
+    padding: 0,
+    cursor: 'pointer',
+    color: colors_1.LIGHT_TEXT,
+    width: 28,
+    height: 28,
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flex: '0 0 auto',
+};
+const hasEyeDropper = () => typeof window !== 'undefined' && 'EyeDropper' in window;
+const ChannelInput = ({ label, channel, value, min, max, onCommit, }) => {
+    const [draft, setDraft] = (0, react_1.useState)(String(Math.round(value)));
+    const { tabIndex } = (0, z_index_1.useZIndex)();
+    (0, react_1.useEffect)(() => {
+        setDraft(String(Math.round(value)));
+    }, [value]);
+    const onChange = (0, react_1.useCallback)((e) => {
+        setDraft(e.target.value);
+    }, []);
+    const onBlur = (0, react_1.useCallback)(() => {
+        const parsed = Number(draft);
+        if (Number.isNaN(parsed)) {
+            setDraft(String(Math.round(value)));
+            return;
+        }
+        const clamped = Math.max(min, Math.min(max, parsed));
+        setDraft(String(Math.round(clamped)));
+        onCommit(channel, clamped);
+    }, [channel, draft, max, min, onCommit, value]);
+    const onKeyDown = (0, react_1.useCallback)((e) => {
+        if (e.key === 'Enter') {
+            e.target.blur();
+        }
+    }, []);
+    return (jsx_runtime_1.jsxs("label", { style: inputColumnStyle, children: [
+            jsx_runtime_1.jsx("span", { style: labelStyle, children: label }), jsx_runtime_1.jsx("input", { type: "text", inputMode: "numeric", value: draft, onChange: onChange, onBlur: onBlur, onKeyDown: onKeyDown, style: baseInputStyle, tabIndex: tabIndex })
+        ] }));
+};
+const HexInput = ({ value, onCommit }) => {
+    const [draft, setDraft] = (0, react_1.useState)(value);
+    const { tabIndex } = (0, z_index_1.useZIndex)();
+    (0, react_1.useEffect)(() => {
+        setDraft(value);
+    }, [value]);
+    const onChange = (0, react_1.useCallback)((e) => {
+        setDraft(e.target.value);
+    }, []);
+    const onBlur = (0, react_1.useCallback)(() => {
+        try {
+            const parsed = (0, color_conversion_1.parseAnyColor)(draft);
+            onCommit((0, color_conversion_1.formatRgba)(parsed));
+        }
+        catch (_a) {
+            setDraft(value);
+        }
+    }, [draft, onCommit, value]);
+    const onKeyDown = (0, react_1.useCallback)((e) => {
+        if (e.key === 'Enter') {
+            e.target.blur();
+        }
+    }, []);
+    const style = (0, react_1.useMemo)(() => {
+        return {
+            ...baseInputStyle,
+            textAlign: 'left',
+        };
+    }, []);
+    return (jsx_runtime_1.jsxs("label", { style: inputColumnStyle, children: [
+            jsx_runtime_1.jsx("span", { style: labelStyle, children: "Hex" }), jsx_runtime_1.jsx("input", { type: "text", value: draft, onChange: onChange, onBlur: onBlur, onKeyDown: onKeyDown, style: style, autoComplete: "off", spellCheck: false, tabIndex: tabIndex })
+        ] }));
+};
+const ColorPickerPopup = ({ value, onChange, onChangeComplete }) => {
+    // useZIndex is intentionally read inside the popup (which is wrapped by
+    // HigherZIndex) so child inputs receive the popup's tabIndex rather than
+    // the trigger's, which would resolve to -1 once the popup is open.
+    const { tabIndex } = (0, z_index_1.useZIndex)();
+    // HSV is the source of truth while the picker is open. We seed it from
+    // the incoming value but keep our own state so that hue and saturation
+    // don't snap back to 0 when the user drags into pure black/white.
+    const [hsva, setHsva] = (0, react_1.useState)(() => (0, color_conversion_1.rgbaToHsva)((0, color_conversion_1.parseAnyColor)(value)));
+    const lastEmittedRef = (0, react_1.useRef)((0, color_conversion_1.formatRgba)((0, color_conversion_1.parseAnyColor)(value)));
+    (0, react_1.useEffect)(() => {
+        // Sync from external value changes that didn't originate from us.
+        const incoming = (0, color_conversion_1.formatRgba)((0, color_conversion_1.parseAnyColor)(value));
+        if (incoming === lastEmittedRef.current) {
+            return;
+        }
+        lastEmittedRef.current = incoming;
+        setHsva((0, color_conversion_1.rgbaToHsva)((0, color_conversion_1.parseAnyColor)(value)));
+    }, [value]);
+    const rgba = (0, react_1.useMemo)(() => (0, color_conversion_1.hsvaToRgba)(hsva), [hsva]);
+    const formatted = (0, react_1.useMemo)(() => (0, color_conversion_1.formatRgba)(rgba), [rgba]);
+    const emit = (0, react_1.useCallback)((next, mode) => {
+        setHsva(next);
+        const nextRgba = (0, color_conversion_1.hsvaToRgba)(next);
+        const nextFormatted = (0, color_conversion_1.formatRgba)(nextRgba);
+        lastEmittedRef.current = nextFormatted;
+        if (mode === 'complete') {
+            onChangeComplete(nextFormatted);
+        }
+        else {
+            onChange(nextFormatted);
+        }
+    }, [onChange, onChangeComplete]);
+    const onSvChange = (0, react_1.useCallback)((next) => {
+        emit({ ...hsva, s: next.s, v: next.v }, 'change');
+    }, [emit, hsva]);
+    const onSvComplete = (0, react_1.useCallback)((next) => {
+        emit({ ...hsva, s: next.s, v: next.v }, 'complete');
+    }, [emit, hsva]);
+    const onHueChange = (0, react_1.useCallback)((next) => {
+        emit({ ...hsva, h: next }, 'change');
+    }, [emit, hsva]);
+    const onHueComplete = (0, react_1.useCallback)((next) => {
+        emit({ ...hsva, h: next }, 'complete');
+    }, [emit, hsva]);
+    const onAlphaChange = (0, react_1.useCallback)((next) => {
+        emit({ ...hsva, a: next }, 'change');
+    }, [emit, hsva]);
+    const onAlphaComplete = (0, react_1.useCallback)((next) => {
+        emit({ ...hsva, a: next }, 'complete');
+    }, [emit, hsva]);
+    const onChannelCommit = (0, react_1.useCallback)((channel, next) => {
+        if (channel === 'a-percent') {
+            const clamped = Math.max(0, Math.min(100, next));
+            emit({ ...hsva, a: clamped / 100 }, 'complete');
+            return;
+        }
+        const updatedRgba = { ...rgba, [channel]: next };
+        const newHsva = (0, color_conversion_1.rgbaToHsva)(updatedRgba);
+        // Preserve hue when transitioning through achromatic colors.
+        if (newHsva.s === 0) {
+            newHsva.h = hsva.h;
+        }
+        emit(newHsva, 'complete');
+    }, [emit, hsva, rgba]);
+    const onHexCommit = (0, react_1.useCallback)((next) => {
+        const parsed = (0, color_conversion_1.parseAnyColor)(next);
+        const newHsva = (0, color_conversion_1.rgbaToHsva)(parsed);
+        if (newHsva.s === 0) {
+            newHsva.h = hsva.h;
+        }
+        emit(newHsva, 'complete');
+    }, [emit, hsva.h]);
+    const onPickWithEyeDropper = (0, react_1.useCallback)(() => {
+        const Ctor = window.EyeDropper;
+        if (!Ctor) {
+            return;
+        }
+        const dropper = new Ctor();
+        dropper
+            .open()
+            .then((result) => {
+            const parsed = (0, color_conversion_1.parseAnyColor)(result.sRGBHex);
+            // `EyeDropper` always returns full opacity; preserve the user's
+            // previously chosen alpha so opening it doesn't drop transparency.
+            parsed.a = rgba.a;
+            const newHsva = (0, color_conversion_1.rgbaToHsva)(parsed);
+            if (newHsva.s === 0) {
+                newHsva.h = hsva.h;
+            }
+            emit(newHsva, 'complete');
+        })
+            .catch(() => {
+            // Aborted; ignore.
+        });
+    }, [emit, hsva.h, rgba.a]);
+    const previewFill = (0, react_1.useMemo)(() => {
+        return {
+            ...previewSwatchFillBase,
+            backgroundColor: formatted,
+        };
+    }, [formatted]);
+    const showEyeDropper = hasEyeDropper();
+    return (jsx_runtime_1.jsxs("div", { style: popupShellStyle, children: [
+            jsx_runtime_1.jsx(SaturationValueArea_1.SaturationValueArea, { hue: hsva.h, saturation: hsva.s, value: hsva.v, onChange: onSvChange, onChangeComplete: onSvComplete }), jsx_runtime_1.jsxs("div", { style: sliderRowStyle, children: [showEyeDropper ? (jsx_runtime_1.jsx("button", { type: "button", style: eyedropperButtonStyle, onClick: onPickWithEyeDropper, tabIndex: tabIndex, title: "Pick color from screen", "aria-label": "Pick color from screen", children: jsx_runtime_1.jsx(eyedropper_1.EyedropperIcon, { style: { width: 14, height: 14 }, color: "currentColor" }) })) : null, jsx_runtime_1.jsx("div", { style: previewSwatchStyle, title: formatted, children: jsx_runtime_1.jsx("div", { style: previewFill }) }), jsx_runtime_1.jsxs("div", { style: slidersColumnStyle, children: [
+                            jsx_runtime_1.jsx(HueSlider_1.HueSlider, { hue: hsva.h, onChange: onHueChange, onChangeComplete: onHueComplete }), jsx_runtime_1.jsx(AlphaSlider_1.AlphaSlider, { hue: hsva.h, saturation: hsva.s, value: hsva.v, alpha: hsva.a, onChange: onAlphaChange, onChangeComplete: onAlphaComplete })
+                        ] })
+                ] }), jsx_runtime_1.jsxs("div", { style: inputsRowStyle, children: [
+                    jsx_runtime_1.jsx(HexInput, { value: formatted, onCommit: onHexCommit }), jsx_runtime_1.jsx(ChannelInput, { label: "R", channel: "r", value: rgba.r, min: 0, max: 255, onCommit: onChannelCommit }), jsx_runtime_1.jsx(ChannelInput, { label: "G", channel: "g", value: rgba.g, min: 0, max: 255, onCommit: onChannelCommit }), jsx_runtime_1.jsx(ChannelInput, { label: "B", channel: "b", value: rgba.b, min: 0, max: 255, onCommit: onChannelCommit }), jsx_runtime_1.jsx(ChannelInput, { label: "A%", channel: "a-percent", value: Math.round(hsva.a * 100), min: 0, max: 100, onCommit: onChannelCommit })
+                ] })
+        ] }));
+};
+exports.ColorPickerPopup = ColorPickerPopup;

package/dist/components/ColorPicker/HueSlider.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const HueSlider: React.FC<{
+    readonly hue: number;
+    readonly onChange: (next: number) => void;
+    readonly onChangeComplete: (next: number) => void;
+}>;

package/dist/components/ColorPicker/HueSlider.js

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HueSlider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const color_conversion_1 = require("../../helpers/color-conversion");
+const SLIDER_HEIGHT = 12;
+const HANDLE_WIDTH = 8;
+const containerStyle = {
+    position: 'relative',
+    height: SLIDER_HEIGHT,
+    width: '100%',
+    borderRadius: 3,
+    cursor: 'ew-resize',
+    background: 'linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)',
+    touchAction: 'none',
+};
+const HueSlider = ({ hue, onChange, onChangeComplete }) => {
+    const ref = (0, react_1.useRef)(null);
+    const updateFromEvent = (0, react_1.useCallback)((clientX, isFinal) => {
+        const { current } = ref;
+        if (!current) {
+            return;
+        }
+        const rect = current.getBoundingClientRect();
+        const x = (0, color_conversion_1.clamp)((clientX - rect.left) / rect.width, 0, 1);
+        const next = x * 360;
+        if (isFinal) {
+            onChangeComplete(next);
+        }
+        else {
+            onChange(next);
+        }
+    }, [onChange, onChangeComplete]);
+    const onPointerDown = (0, react_1.useCallback)((e) => {
+        if (e.button !== 0) {
+            return;
+        }
+        e.preventDefault();
+        updateFromEvent(e.clientX, false);
+        const onMove = (ev) => {
+            updateFromEvent(ev.clientX, false);
+        };
+        const onUp = (ev) => {
+            window.removeEventListener('pointermove', onMove);
+            window.removeEventListener('pointerup', onUp);
+            updateFromEvent(ev.clientX, true);
+        };
+        window.addEventListener('pointermove', onMove);
+        window.addEventListener('pointerup', onUp);
+    }, [updateFromEvent]);
+    const handleStyle = (0, react_1.useMemo)(() => {
+        return {
+            position: 'absolute',
+            top: -2,
+            left: `${(hue / 360) * 100}%`,
+            marginLeft: -HANDLE_WIDTH / 2,
+            width: HANDLE_WIDTH,
+            height: SLIDER_HEIGHT + 4,
+            borderRadius: 2,
+            border: '2px solid #fff',
+            boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.6)',
+            pointerEvents: 'none',
+        };
+    }, [hue]);
+    return (jsx_runtime_1.jsx("div", { ref: ref, style: containerStyle, onPointerDown: onPointerDown, children: jsx_runtime_1.jsx("div", { style: handleStyle }) }));
+};
+exports.HueSlider = HueSlider;

package/dist/components/ColorPicker/SaturationValueArea.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export declare const SaturationValueArea: React.FC<{
+    readonly hue: number;
+    readonly saturation: number;
+    readonly value: number;
+    readonly onChange: (next: {
+        s: number;
+        v: number;
+    }) => void;
+    readonly onChangeComplete: (next: {
+        s: number;
+        v: number;
+    }) => void;
+}>;