@qualified-salesforce/web 0.0.1-oidc-bootstrap

package/widget/multimodal_v2/components/multimodal/OrbAvatar.js

@@ -0,0 +1,326 @@
+import { preact_module_k, useComputed, jsxRuntime_module_u, hooks_module_A } from "../../../../js/multimodal_v2.js";
+import { ORB_ANIMATION_URL } from "../../constants.js";
+import "../../styled-system/jsx/index.js";
+import { useLocalization } from "../helpers/Localization.js";
+import { Persisted } from "../helpers/Persisted.js";
+import { useAudioLevelMonitoring } from "./useAudioLevelMonitoring.js";
+import { styled } from "../../styled-system/jsx/factory.js";
+
+function _extends() {
+    _extends = Object.assign || function(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = arguments[i];
+            for(var key in source){
+                if (Object.prototype.hasOwnProperty.call(source, key)) {
+                    target[key] = source[key];
+                }
+            }
+        }
+        return target;
+    };
+    return _extends.apply(this, arguments);
+}
+
+/** @jsxImportSource preact */ 
+
+
+
+
+
+
+const OrbAvatar = (props)=>{
+    var _props_name;
+    const { orbRef, orbColor, orbImageUrl, ringColor, ringMotionStyles, speaking } = useOrbAvatar(props);
+    const fallbackName = useLocalization({
+        id: "video.yourAssistant"
+    });
+    const ariaLabel = useLocalization({
+        id: "video.aiAssistantAvatar",
+        fields: {
+            name: ((_props_name = props.name) == null ? void 0 : _props_name.value) || fallbackName.value
+        }
+    });
+    return /*#__PURE__*/ jsxRuntime_module_u(OrbRingRoot, {
+        "data-component-name": "Orb.RingRoot",
+        style: _extends({
+            "--orb-ring-color": ringColor.value
+        }, ringMotionStyles.value),
+        children: [
+            speaking.value && /*#__PURE__*/ jsxRuntime_module_u(preact_module_k, {
+                children: [
+                    /*#__PURE__*/ jsxRuntime_module_u(SolidRing, {
+                        "data-component-name": "Orb.SolidRing",
+                        "aria-hidden": "true"
+                    }),
+                    /*#__PURE__*/ jsxRuntime_module_u(PulseRingPrimary, {
+                        "data-component-name": "Orb.PulseRingPrimary",
+                        "aria-hidden": "true"
+                    }),
+                    /*#__PURE__*/ jsxRuntime_module_u(PulseRingSecondary, {
+                        "data-component-name": "Orb.PulseRingSecondary",
+                        "aria-hidden": "true"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxRuntime_module_u(OrbMediaFrame, {
+                "data-component-name": "Orb.MediaFrame",
+                children: /*#__PURE__*/ jsxRuntime_module_u(OrbContainer, {
+                    "data-component-name": "Orb.Container",
+                    ref: orbRef,
+                    role: "img",
+                    "aria-label": ariaLabel,
+                    style: {
+                        backgroundColor: orbColor.value
+                    },
+                    children: orbImageUrl.value ? /*#__PURE__*/ jsxRuntime_module_u(OrbImage, {
+                        id: "orb-image",
+                        elementType: "img",
+                        src: orbImageUrl.value,
+                        alt: "",
+                        "aria-hidden": "true"
+                    }) : /*#__PURE__*/ jsxRuntime_module_u(preact_module_k, {
+                        children: [
+                            /*#__PURE__*/ jsxRuntime_module_u(OrbVideo, {
+                                "data-component-name": "Orb.Video",
+                                id: "orb-video",
+                                usePreloadedAsset: true,
+                                elementType: "video",
+                                src: ORB_ANIMATION_URL,
+                                autoplay: true,
+                                muted: true,
+                                loop: true,
+                                playsInline: true
+                            }),
+                            /*#__PURE__*/ jsxRuntime_module_u(ColorOverlay, {
+                                "data-component-name": "Orb.Overlay",
+                                style: {
+                                    "--orb-overlay-color": orbColor.value
+                                }
+                            })
+                        ]
+                    })
+                })
+            })
+        ]
+    });
+};
+const AUDIO_ACTIVE_THRESHOLD_ON = 0.012;
+const AUDIO_SPEAKING_HOLD_MS = 350;
+const AUDIO_INTENSITY_FLOOR = 0.008;
+const AUDIO_INTENSITY_CEILING = 0.15;
+const RING_SCALE_MIN = 1.0;
+const RING_SCALE_MAX_PRIMARY = 1.35;
+const RING_SCALE_MAX_SECONDARY = 1.22;
+const RING_OPACITY_MIN_SOLID = 0.25;
+const RING_OPACITY_MAX_SOLID = 0.6;
+const RING_OPACITY_MIN_PRIMARY = 0.2;
+const RING_OPACITY_MAX_PRIMARY = 0.55;
+const RING_OPACITY_MIN_SECONDARY = 0.15;
+const RING_OPACITY_MAX_SECONDARY = 0.4;
+const AUDIO_MIN_VISIBLE_INTENSITY_WHEN_SPEAKING = 0.15;
+function useOrbAvatar(param) {
+    let { audioMonitoringConfig, isSpeaking, orbConfig } = param;
+    var _ref;
+    const orbRef = hooks_module_A(null);
+    const orbColor = useComputed(()=>getOrbColor(orbConfig.value));
+    const ringColor = useComputed(()=>getOrbRingColor(orbConfig.value));
+    const orbImageUrl = useComputed(()=>{
+        var _ref;
+        var _orbConfig_value;
+        return (_ref = (_orbConfig_value = orbConfig.value) == null ? void 0 : _orbConfig_value.orbImageUrl) != null ? _ref : undefined;
+    });
+    const { enabled, audioTracks } = (_ref = audioMonitoringConfig == null ? void 0 : audioMonitoringConfig.value) != null ? _ref : {
+        enabled: false,
+        audioTracks: [
+            null,
+            null
+        ]
+    };
+    const [coffeeTrack, avatarTrack] = audioTracks;
+    const coffeeAudioLevel = useAudioLevelMonitoring({
+        audioTrack: coffeeTrack,
+        disabled: !enabled,
+        scaleMultiplier: 1.3,
+        suppressScaling: true,
+        targetElementRef: orbRef
+    });
+    const avatarAudioLevel = useAudioLevelMonitoring({
+        audioTrack: avatarTrack,
+        disabled: !enabled,
+        scaleMultiplier: 1.3,
+        suppressScaling: true,
+        targetElementRef: orbRef
+    });
+    const maxAudioLevel = useComputed(()=>Math.max(coffeeAudioLevel.value, avatarAudioLevel.value));
+    const lastAudioActiveAtRef = hooks_module_A(0);
+    const speaking = useComputed(()=>{
+        var _ref;
+        const hasActiveAudioMonitoring = enabled && (!!coffeeTrack || !!avatarTrack);
+        if (hasActiveAudioMonitoring) {
+            const level = maxAudioLevel.value;
+            const now = Date.now();
+            if (level >= AUDIO_ACTIVE_THRESHOLD_ON) {
+                lastAudioActiveAtRef.current = now;
+                return true;
+            }
+            return now - lastAudioActiveAtRef.current < AUDIO_SPEAKING_HOLD_MS;
+        }
+        lastAudioActiveAtRef.current = 0;
+        return (_ref = isSpeaking == null ? void 0 : isSpeaking.value) != null ? _ref : false;
+    });
+    const ringMotionStyles = useComputed(()=>{
+        const level = maxAudioLevel.value;
+        const rawIntensity = Math.max(0, Math.min(1, (level - AUDIO_INTENSITY_FLOOR) / (AUDIO_INTENSITY_CEILING - AUDIO_INTENSITY_FLOOR)));
+        const intensity = speaking.value && rawIntensity < AUDIO_MIN_VISIBLE_INTENSITY_WHEN_SPEAKING ? AUDIO_MIN_VISIBLE_INTENSITY_WHEN_SPEAKING : rawIntensity;
+        const lerp = (min, max, t)=>min + (max - min) * t;
+        return {
+            "--orb-ring-scale-primary": lerp(RING_SCALE_MIN, RING_SCALE_MAX_PRIMARY, intensity).toFixed(3),
+            "--orb-ring-scale-secondary": lerp(RING_SCALE_MIN, RING_SCALE_MAX_SECONDARY, intensity).toFixed(3),
+            "--orb-ring-opacity-solid": lerp(RING_OPACITY_MIN_SOLID, RING_OPACITY_MAX_SOLID, intensity).toFixed(3),
+            "--orb-ring-opacity-primary": lerp(RING_OPACITY_MIN_PRIMARY, RING_OPACITY_MAX_PRIMARY, intensity).toFixed(3),
+            "--orb-ring-opacity-secondary": lerp(RING_OPACITY_MIN_SECONDARY, RING_OPACITY_MAX_SECONDARY, intensity).toFixed(3)
+        };
+    });
+    return {
+        orbRef,
+        orbColor,
+        ringColor,
+        ringMotionStyles,
+        orbImageUrl,
+        speaking
+    };
+}
+/**
+ * Determines the color to use based on orbConfig settings.
+ * Returns "transparent" when a custom image is used so the
+ * background doesn't bleed through around the image edges.
+ */ function getOrbColor(orbConfig) {
+    if (!orbConfig) return "var(--q-primary-color, #0070d2)";
+    // Use transparent background if using custom image
+    if (orbConfig.orbImageUrl) return "transparent";
+    // Use theme primary color if orbUseThemeColor is true
+    if (orbConfig.orbUseThemeColor) return "var(--q-primary-color, #0070d2)";
+    // Use explicit color if provided
+    return orbConfig.orbColor || "var(--q-primary-color, #0070d2)";
+}
+function getOrbRingColor(orbConfig) {
+    if (!orbConfig) return "var(--q-primary-color, #0070d2)";
+    if (orbConfig.speakingRingColor) return orbConfig.speakingRingColor;
+    if (orbConfig.orbUseThemeColor) return "var(--q-primary-color, #0070d2)";
+    return orbConfig.orbColor || "var(--q-primary-color, #0070d2)";
+}
+const OrbRingRoot = styled("div", {
+    base: {
+        position: "relative",
+        width: "[100%]",
+        height: "[100%]",
+        maxWidth: "[200px]",
+        maxHeight: "[200px]",
+        boxSizing: "border-box",
+        padding: "[4px]",
+        overflow: "visible",
+        gridArea: "1 / 1"
+    }
+});
+OrbRingRoot.displayName = "OrbRingRoot";
+const OrbMediaFrame = styled("div", {
+    base: {
+        position: "relative",
+        width: "[100%]",
+        height: "[100%]",
+        zIndex: 1
+    }
+});
+OrbMediaFrame.displayName = "OrbMediaFrame";
+const OrbContainer = styled("div", {
+    base: {
+        position: "relative",
+        width: "[100%]",
+        height: "[100%]",
+        maxWidth: "[200px]",
+        maxHeight: "[200px]",
+        overflow: "hidden",
+        borderRadius: "[50%]",
+        // Slightly inset clip to avoid anti-aliased background color fringe at the edge
+        clipPath: "[circle(49%)]",
+        gridArea: "1 / 1"
+    }
+});
+OrbContainer.displayName = "OrbContainer";
+const RingBase = styled("div", {
+    base: {
+        position: "absolute",
+        inset: "[4px]",
+        zIndex: 2,
+        borderRadius: "[50%]",
+        borderWidth: "[2px]",
+        borderStyle: "solid",
+        borderColor: "[var(--orb-ring-color, var(--q-primary-color, #0070d2))]",
+        pointerEvents: "none",
+        transition: "[transform 80ms ease-out, opacity 80ms ease-out]"
+    }
+});
+const SolidRing = styled(RingBase, {
+    base: {
+        opacity: "[var(--orb-ring-opacity-solid, 0.4)]"
+    }
+});
+SolidRing.displayName = "SolidRing";
+const PulseRingPrimary = styled(RingBase, {
+    base: {
+        opacity: "[var(--orb-ring-opacity-primary, 0.35)]",
+        transform: "[scale(var(--orb-ring-scale-primary, 1))]",
+        "@media (prefers-reduced-motion: reduce)": {
+            transition: "none",
+            opacity: "[0.18]",
+            transform: "[scale(1)]"
+        }
+    }
+});
+PulseRingPrimary.displayName = "PulseRingPrimary";
+const PulseRingSecondary = styled(RingBase, {
+    base: {
+        opacity: "[var(--orb-ring-opacity-secondary, 0.25)]",
+        transform: "[scale(var(--orb-ring-scale-secondary, 1))]",
+        "@media (prefers-reduced-motion: reduce)": {
+            transition: "none",
+            opacity: "[0.14]",
+            transform: "[scale(1)]"
+        }
+    }
+});
+PulseRingSecondary.displayName = "PulseRingSecondary";
+const OrbVideo = styled(Persisted, {
+    base: {
+        display: "block",
+        objectFit: "cover",
+        width: "[100%]",
+        height: "[100%]"
+    }
+});
+OrbVideo.displayName = "OrbVideo";
+const OrbImage = styled(Persisted, {
+    base: {
+        display: "block",
+        width: "[100%]",
+        height: "[100%]",
+        objectFit: "cover"
+    }
+});
+OrbImage.displayName = "OrbAvatar.Image";
+const ColorOverlay = styled("div", {
+    base: {
+        position: "absolute",
+        top: "[0]",
+        left: "[0]",
+        width: "[100%]",
+        height: "[100%]",
+        mixBlendMode: "[hue]",
+        pointerEvents: "none",
+        borderRadius: "[inherit]",
+        background: "[radial-gradient(circle at 30% 30%, var(--orb-overlay-color), color-mix(in srgb, var(--orb-overlay-color) 93%, transparent), color-mix(in srgb, var(--orb-overlay-color) 67%, transparent))]"
+    }
+});
+ColorOverlay.displayName = "ColorOverlay";
+
+export { OrbAvatar };

package/widget/multimodal_v2/components/multimodal/Status.js

@@ -0,0 +1,220 @@
+import { jsxRuntime_module_u } from "../../../../js/multimodal_v2.js";
+import "../../styled-system/jsx/index.js";
+import { useLocalization } from "../helpers/Localization.js";
+import { styled } from "../../styled-system/jsx/factory.js";
+
+/** @jsxImportSource preact */ 
+
+
+const Status = (param)=>{
+    let { variant, colorScheme, mainText, subText, loadingIndicator = null } = param;
+    const localizedMainText = useLocalization(mainText);
+    const localizedSubText = useLocalization(subText);
+    return /*#__PURE__*/ jsxRuntime_module_u(Container, {
+        "data-component-name": "Status.Container",
+        variant: variant,
+        colorScheme: colorScheme,
+        children: [
+            loadingIndicator === "spinner" && /*#__PURE__*/ jsxRuntime_module_u(Spinner, {
+                colorScheme: colorScheme
+            }),
+            /*#__PURE__*/ jsxRuntime_module_u(MainText, {
+                "data-component-name": "Status.MainText",
+                colorScheme: colorScheme,
+                children: [
+                    localizedMainText,
+                    loadingIndicator === "dots" && /*#__PURE__*/ jsxRuntime_module_u(DotText, {
+                        "data-component-name": "Status.Dots"
+                    })
+                ]
+            }),
+            subText && /*#__PURE__*/ jsxRuntime_module_u(SubText, {
+                "data-component-name": "Status.SubText",
+                colorScheme: colorScheme,
+                children: localizedSubText
+            })
+        ]
+    });
+};
+// ============================================================================
+// Styled Components
+// ============================================================================
+const Spinner = (param)=>{
+    let { colorScheme } = param;
+    return /*#__PURE__*/ jsxRuntime_module_u(SpinnerIcon, {
+        "data-component-name": "Status.Spinner",
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 78 78",
+        fill: "none",
+        "aria-label": "Loading spinner",
+        colorScheme: colorScheme,
+        children: /*#__PURE__*/ jsxRuntime_module_u("path", {
+            d: "M75.8123 39C77.0205 39 78.0064 39.9804 77.9387 41.1867C77.4921 49.1406 74.6181 56.7868 69.6777 63.0807C64.2859 69.9496 56.7449 74.8102 48.2625 76.8841C39.7801 78.958 30.8471 78.1252 22.8942 74.5191C14.9413 70.9129 8.42881 64.7421 4.39967 56.9949C0.370537 49.2478 -0.942063 40.3726 0.672107 31.7908C2.28628 23.209 6.73382 15.4173 13.3024 9.66346C19.871 3.90966 28.1805 0.526757 36.9001 0.0565755C44.8898 -0.374249 52.8002 1.66327 59.5685 5.86481C60.595 6.50205 60.8316 7.87215 60.1378 8.86135C59.444 9.85056 58.083 10.0836 57.052 9.45362C51.0894 5.81055 44.147 4.0476 37.1357 4.42567C29.3943 4.8431 22.0171 7.84647 16.1854 12.9547C10.3538 18.063 6.40522 24.9806 4.97214 32.5996C3.53907 40.2186 4.7044 48.0981 8.28151 54.9761C11.8586 61.8541 17.6405 67.3326 24.7011 70.5341C31.7617 73.7357 39.6926 74.4751 47.2233 72.6339C54.7541 70.7926 61.449 66.4773 66.2359 60.3791C70.5714 54.856 73.1144 48.1598 73.5555 41.1863C73.6318 39.9805 74.604 39 75.8123 39Z",
+            fill: "currentColor"
+        })
+    });
+};
+const Container = styled("div", {
+    base: {
+        position: "relative",
+        display: "flex",
+        alignItems: "center"
+    },
+    variants: {
+        // Layout variants - controls positioning and structure
+        variant: {
+            overlay: {
+                // Full coverage overlay
+                width: "[100%]",
+                height: "[100%]",
+                justifyContent: "center",
+                flexDirection: "column",
+                gap: "$xl"
+            },
+            inline: {
+                // Inline in the flow, takes only needed space
+                width: "$auto",
+                height: "$auto",
+                justifyContent: "center",
+                flexDirection: "row",
+                gap: "$sm"
+            },
+            pill: {
+                // Overlay positioning but content centered in a pill
+                width: "[100%]",
+                height: "[100%]",
+                justifyContent: "center",
+                alignItems: "center"
+            }
+        },
+        // Color scheme variants - controls visual appearance
+        colorScheme: {
+            dark: {
+                opacity: 0.95,
+                background: "$black.solid",
+                zIndex: 1000
+            },
+            light: {
+                background: "$transparent"
+            },
+            translucent: {
+                backdropFilter: "blur(10px)",
+                background: "$transparent",
+                zIndex: 1000
+            },
+            overlayText: {
+                background: "$transparent"
+            }
+        }
+    }
+});
+Container.displayName = "Status.Container";
+const SpinnerIcon = styled("svg", {
+    base: {
+        animation: "q-spin 2s linear infinite"
+    },
+    variants: {
+        colorScheme: {
+            dark: {
+                width: "[50px]",
+                height: "[50px]",
+                color: "$white.solid"
+            },
+            light: {
+                width: "[24px]",
+                height: "[24px]",
+                color: "$black.solid"
+            },
+            translucent: {
+                display: "none"
+            },
+            overlayText: {
+                display: "none"
+            }
+        }
+    }
+});
+SpinnerIcon.displayName = "Status.Spinner";
+const MainText = styled("span", {
+    base: {
+        fontSize: "14px",
+        fontStyle: "normal",
+        lineHeight: "22px",
+        whiteSpace: "nowrap"
+    },
+    variants: {
+        colorScheme: {
+            dark: {
+                textAlign: "center",
+                fontWeight: "$semibold",
+                color: "$white"
+            },
+            light: {
+                textAlign: "center",
+                fontWeight: "$normal",
+                color: "$black.solid",
+                fontSize: "12px",
+                lineHeight: "18px"
+            },
+            translucent: {
+                fontWeight: "$normal",
+                lineHeight: "normal",
+                padding: "[24px 40px]",
+                borderRadius: "[900px]",
+                background: "[rgba(255, 255, 255, 0.80)]",
+                boxShadow: "[0 0 0 1px rgba(230, 233, 236, 0.50), 0 3px 4px 0 rgba(35, 66, 72, 0.04), 0 0 16px 0 rgba(0, 0, 0, 0.04)]"
+            },
+            overlayText: {
+                fontWeight: "$medium",
+                fontSize: "14px",
+                lineHeight: "normal",
+                color: "$white.solid",
+                background: "$transparent"
+            }
+        }
+    }
+});
+MainText.displayName = "Status.MainText";
+const SubText = styled("span", {
+    base: {
+        fontSize: "14px",
+        fontStyle: "normal",
+        fontWeight: "$normal",
+        lineHeight: "22px",
+        whiteSpace: "nowrap",
+        // Pull closer to MainText (reduces gap by half of $xl)
+        marginTop: "[-24px]"
+    },
+    variants: {
+        colorScheme: {
+            dark: {
+                textAlign: "center",
+                color: "$white"
+            },
+            light: {
+                textAlign: "center",
+                color: "$black.solid"
+            },
+            translucent: {
+                display: "none"
+            },
+            overlayText: {
+                display: "none"
+            }
+        }
+    }
+});
+SubText.displayName = "Status.SubText";
+const DotText = styled("span", {
+    base: {
+        display: "inline-block",
+        width: "[1.5ch]",
+        textAlign: "start",
+        "&::after": {
+            content: '"."',
+            animation: "q-dotsEllipsis 1.5s steps(3) infinite"
+        }
+    }
+});
+
+export { Status };

package/widget/multimodal_v2/components/multimodal/VideoAvatar.js

@@ -0,0 +1,24 @@
+import { jsxRuntime_module_u, preact_module_k } from "../../../../js/multimodal_v2.js";
+import { LiveVideo } from "./LiveVideo.js";
+import { VideoPreview } from "./VideoPreview.js";
+
+/** @jsxImportSource preact */ 
+
+
+const VideoAvatar = (param)=>{
+    let { previewVideoConfig, liveVideoConfig, isBlurredVideoActive, isVideoUnlocked } = param;
+    return /*#__PURE__*/ jsxRuntime_module_u(preact_module_k, {
+        children: [
+            /*#__PURE__*/ jsxRuntime_module_u(VideoPreview, {
+                config: previewVideoConfig,
+                isBlurred: isBlurredVideoActive,
+                hidden: isVideoUnlocked
+            }),
+            /*#__PURE__*/ jsxRuntime_module_u(LiveVideo, {
+                config: liveVideoConfig
+            })
+        ]
+    });
+};
+
+export { VideoAvatar };

package/widget/multimodal_v2/components/multimodal/VideoPreview.js

@@ -0,0 +1,114 @@
+import { jsxRuntime_module_u, utils_module_o, useSignalEffect } from "../../../../js/multimodal_v2.js";
+import "../../styled-system/jsx/index.js";
+import { Persisted } from "../helpers/Persisted.js";
+import { styled } from "../../styled-system/jsx/factory.js";
+
+function _extends() {
+    _extends = Object.assign || function(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = arguments[i];
+            for(var key in source){
+                if (Object.prototype.hasOwnProperty.call(source, key)) {
+                    target[key] = source[key];
+                }
+            }
+        }
+        return target;
+    };
+    return _extends.apply(this, arguments);
+}
+
+
+
+
+
+const VideoPreview = (props)=>{
+    var _ref;
+    const { config, isBlurred, hidden, preloadedVideoRef } = useVideoPreview(props);
+    if (!config.value) return null;
+    return /*#__PURE__*/ jsxRuntime_module_u(VideoElement, {
+        "data-component-name": "VideoPreview.VideoElement",
+        id: "video-preview-" + config.value.name,
+        usePreloadedAsset: true,
+        elementType: "video",
+        innerRef: preloadedVideoRef,
+        autoplay: true,
+        loop: true,
+        muted: true,
+        playsInline: true,
+        preload: "auto",
+        blurred: isBlurred.value,
+        hidden: (_ref = hidden == null ? void 0 : hidden.value) != null ? _ref : false
+    });
+};
+function useVideoPreview(props) {
+    const { config } = props;
+    const preloadedVideoRef = utils_module_o(null);
+    useSignalEffect(()=>{
+        const videoElement = preloadedVideoRef.value;
+        if (!videoElement || !config.value) return;
+        const { loopStart } = config.value;
+        const handleVideoEnded = ()=>{
+            if (loopStart != null) {
+                videoElement.currentTime = loopStart;
+            }
+            videoElement.play();
+        };
+        const handleCanPlayThrough = ()=>{
+            if (loopStart != null) {
+                videoElement.loop = false;
+            }
+        };
+        videoElement.addEventListener("ended", handleVideoEnded);
+        videoElement.addEventListener("canplaythrough", handleCanPlayThrough);
+        // If video is already ready, set immediately
+        if (videoElement.readyState >= 3) {
+            if (loopStart != null) {
+                videoElement.loop = false;
+            }
+        }
+        return ()=>{
+            videoElement.removeEventListener("canplaythrough", handleCanPlayThrough);
+            videoElement.removeEventListener("ended", handleVideoEnded);
+        };
+    });
+    // Handle preloaded video source
+    useSignalEffect(()=>{
+        const videoElement = preloadedVideoRef.value;
+        if (!videoElement || !config.value) return;
+        if (videoElement.src !== config.value.src) {
+            videoElement.src = config.value.src;
+            videoElement.play();
+        } else if (videoElement.paused) {
+            videoElement.play();
+        }
+    });
+    return _extends({}, props, {
+        preloadedVideoRef
+    });
+}
+const VideoElement = styled(Persisted, {
+    base: {
+        width: "[100%]",
+        height: "[100%]",
+        gridArea: "1 / 1",
+        objectFit: "contain",
+        transition: "filter 0s"
+    },
+    variants: {
+        hidden: {
+            true: {
+                visibility: "hidden",
+                pointerEvents: "none"
+            }
+        },
+        blurred: {
+            true: {
+                filter: "blur(10px)"
+            }
+        }
+    }
+});
+VideoElement.displayName = "VideoElement";
+
+export { VideoPreview };