@omerdlw/base-framework 1.0.6 → 2.0.1

package/dist/chunk-CGHZSSFR.js

@@ -0,0 +1,2166 @@
+import { useOptionalMediaActions } from './chunk-R2YGFJDJ.js';
+import { defineThemeSpec, useMotionTokens, retime, useTheme, useModuleMotion, cssEasing } from './chunk-7TAVYJ3A.js';
+import { getOrCreateGlobalContext, defineModule, useRegistryValue, useModuleRegistration } from './chunk-GF7TUX5I.js';
+import { createStore, cn, useStore, useIsomorphicLayoutEffect, useRequiredContext, report } from './chunk-TV3WEF5G.js';
+import { Spinner } from './chunk-3BUP64Q6.js';
+import { memo, useState, useRef, useEffect, useMemo, useCallback, useContext } from 'react';
+import { AnimatePresence, motion } from 'motion/react';
+import { usePathname } from 'next/navigation';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+// src/modules/background/constants.ts
+var backgroundTheme = defineThemeSpec("background");
+var BACKGROUND_REGISTRY_KEY = "page-background";
+var BACKGROUND_MEDIA_ID = "background";
+
+// src/modules/background/visual.ts
+var objectFit = (value) => ({
+  objectFit: value
+});
+var objectPosition = (value) => ({
+  objectPosition: value
+});
+var BG_TOKEN_TO_OBJECT_STYLE = Object.freeze({
+  "bg-bottom": objectPosition("bottom"),
+  "bg-center": objectPosition("center"),
+  "bg-contain": objectFit("contain"),
+  "bg-cover": objectFit("cover"),
+  "bg-fill": objectFit("fill"),
+  "bg-left": objectPosition("left"),
+  "bg-left-bottom": objectPosition("left bottom"),
+  "bg-left-top": objectPosition("left top"),
+  "bg-none": objectFit("none"),
+  "bg-right": objectPosition("right"),
+  "bg-right-bottom": objectPosition("right bottom"),
+  "bg-right-top": objectPosition("right top"),
+  "bg-scale-down": objectFit("scale-down"),
+  "bg-top": objectPosition("top")
+});
+var OBJECT_FITS = Object.freeze(["contain", "cover", "fill", "none", "scale-down"]);
+var DEFAULT_COLOR = "var(--black, #000)";
+var WIDTH_CLASS = /^(w-|max-w-|min-w-)/;
+function resolveVideoClassNames(...inputs) {
+  const tokens = inputs.flatMap((input) => typeof input === "string" ? input.replace(/,/g, " ").split(/\s+/) : []).filter(Boolean);
+  return {
+    objectStyle: Object.assign({}, ...tokens.map((token) => BG_TOKEN_TO_OBJECT_STYLE[token])),
+    other: tokens.filter((token) => !WIDTH_CLASS.test(token)).join(" "),
+    width: tokens.filter((token) => WIDTH_CLASS.test(token)).join(" ")
+  };
+}
+function resolveVideoOptions(options = {}) {
+  return {
+    codec: options.codec || "auto",
+    corp: options.corp ?? 0,
+    forceIframe: Boolean(options.forceIframe),
+    isLoop: options.loop ?? false,
+    isMuted: options.muted ?? true,
+    playbackRate: options.playbackRate ?? 1,
+    quality: options.quality || "1080p",
+    shouldAutoPlay: options.autoplay ?? true,
+    showPoster: Boolean(options.showPoster),
+    showSpinner: options.showSpinner !== false
+  };
+}
+var generateBaseGradient = (direction, color) => {
+  const to = direction === "left" ? "to right" : "to left";
+  return `linear-gradient(${to}, ${color} 0%, color-mix(in srgb, ${color} 85%, transparent) 15%, color-mix(in srgb, ${color} 50%, transparent) 45%, color-mix(in srgb, ${color} 18%, transparent) 75%, transparent 100%)`;
+};
+var generateEdgeGradient = (direction, color) => {
+  const to = direction === "left" ? "to right" : "to left";
+  return `linear-gradient(${to}, color-mix(in srgb, ${color} 95%, transparent) 0%, color-mix(in srgb, ${color} 70%, transparent) 25%, color-mix(in srgb, ${color} 35%, transparent) 55%, color-mix(in srgb, ${color} 10%, transparent) 80%, transparent 100%)`;
+};
+function getVisualStyle(currentStyle = {}) {
+  const { className: _className, leftGradient = 0, rightGradient = 0, ...baseStyle } = currentStyle;
+  return {
+    baseStyle,
+    leftGradient: Number(leftGradient) || 0,
+    rightGradient: Number(rightGradient) || 0
+  };
+}
+function resolveGradientSettings({
+  fadeEdges = null,
+  hasWidth = false,
+  leftGradient = 0,
+  rightGradient = 0
+}) {
+  let leftPercent = 0;
+  let rightPercent = 0;
+  if (leftGradient > 0) leftPercent = Math.min(48, Math.max(12, leftGradient * 7.5));
+  else if (hasWidth && fadeEdges !== false) leftPercent = 20;
+  if (rightGradient > 0) rightPercent = Math.min(48, Math.max(12, rightGradient * 7.5));
+  else if (hasWidth && fadeEdges !== false) rightPercent = 20;
+  if (typeof fadeEdges === "number") {
+    leftPercent = fadeEdges;
+    rightPercent = fadeEdges;
+  } else if (typeof fadeEdges === "string") {
+    const parsed = parseFloat(fadeEdges);
+    if (!Number.isNaN(parsed)) {
+      leftPercent = parsed;
+      rightPercent = parsed;
+    }
+  } else if (typeof fadeEdges === "object" && fadeEdges !== null) {
+    const edgeObj = fadeEdges;
+    if (edgeObj.left !== void 0) leftPercent = parseFloat(String(edgeObj.left)) || 0;
+    if (edgeObj.right !== void 0) rightPercent = parseFloat(String(edgeObj.right)) || 0;
+  } else if (fadeEdges === false) {
+    leftPercent = 0;
+    rightPercent = 0;
+  }
+  const leftOpacity = leftGradient > 0 ? Math.min(1, leftGradient * 0.22) : 0;
+  const rightOpacity = rightGradient > 0 ? Math.min(1, rightGradient * 0.22) : 0;
+  return {
+    enabled: leftPercent > 0 || rightPercent > 0,
+    leftOpacity,
+    leftPercent,
+    rightOpacity,
+    rightPercent
+  };
+}
+function generateSmoothstepStops(percent, direction = "in", color = "var(--black, #000)") {
+  const steps = [
+    { s: 0, t: 0 },
+    { s: 0.06, t: 0.15 },
+    { s: 0.22, t: 0.35 },
+    { s: 0.47, t: 0.55 },
+    { s: 0.76, t: 0.75 },
+    { s: 0.93, t: 0.9 },
+    { s: 1, t: 1 }
+  ];
+  if (direction === "in") {
+    return steps.map(
+      ({ s, t }) => s === 0 ? `transparent ${(t * percent).toFixed(1)}%` : s === 1 ? `${color} ${(t * percent).toFixed(1)}%` : `color-mix(in srgb, ${color} ${Math.round(s * 100)}%, transparent) ${(t * percent).toFixed(1)}%`
+    );
+  }
+  return steps.map(({ s, t }) => {
+    const alpha = 1 - s;
+    return alpha === 0 ? `transparent ${(100 - percent + t * percent).toFixed(1)}%` : alpha === 1 ? `${color} ${(100 - percent + t * percent).toFixed(1)}%` : `color-mix(in srgb, ${color} ${Math.round(alpha * 100)}%, transparent) ${(100 - percent + t * percent).toFixed(1)}%`;
+  });
+}
+function getEdgeFadeMask({
+  color = "var(--black, #000)",
+  leftPercent = 0,
+  rightPercent = 0
+}) {
+  if (leftPercent <= 0 && rightPercent <= 0) return void 0;
+  const leftStops = leftPercent > 0 ? generateSmoothstepStops(leftPercent, "in", color) : [`${color} 0%`];
+  const rightStops = rightPercent > 0 ? generateSmoothstepStops(rightPercent, "out", color) : [`${color} 100%`];
+  return `linear-gradient(to right, ${leftStops.join(", ")}, ${rightStops.join(", ")})`;
+}
+
+// src/modules/background/playback.ts
+function applyVideoPlaybackState({
+  isPlaying,
+  playbackRate,
+  setVideoPlaying,
+  videoElement
+}) {
+  if (!videoElement) return;
+  const numericPlaybackRate = Number(playbackRate);
+  const resolvedPlaybackRate = Number.isFinite(numericPlaybackRate) && numericPlaybackRate > 0 ? numericPlaybackRate : 1;
+  try {
+    if (videoElement.playbackRate !== resolvedPlaybackRate) {
+      videoElement.playbackRate = resolvedPlaybackRate;
+    }
+  } catch {
+    return;
+  }
+  if (!isPlaying) {
+    if (!videoElement.paused) videoElement.pause();
+    return;
+  }
+  if (videoElement.readyState === 0) {
+    return;
+  }
+  const playPromise = videoElement.play();
+  if (!playPromise || typeof playPromise.then !== "function") return;
+  playPromise.then(() => setVideoPlaying(true)).catch((error) => {
+    if (error?.name === "AbortError" || videoElement.readyState < 2) {
+      return;
+    }
+    if (error?.name === "NotAllowedError") {
+      videoElement.muted = true;
+      videoElement.play().then(() => setVideoPlaying(true)).catch(() => {
+      });
+      return;
+    }
+    setVideoPlaying(false);
+  });
+}
+function triggerVideoPlaybackDirect(videoElement, nextPlaying, configuredMuted) {
+  if (!videoElement) return;
+  if (nextPlaying) {
+    videoElement.muted = configuredMuted;
+    if (!configuredMuted && videoElement.volume === 0) {
+      videoElement.volume = 0.8;
+    }
+    videoElement.play().catch((err) => {
+      if (err?.name === "NotAllowedError") {
+        videoElement.muted = true;
+        videoElement.play().catch(() => {
+        });
+      }
+    });
+  } else {
+    videoElement.pause();
+  }
+}
+function syncVideoMutedDirect(videoElement, nextMuted) {
+  if (!videoElement) return;
+  videoElement.muted = nextMuted;
+  if (!nextMuted && videoElement.volume === 0) {
+    videoElement.volume = 0.8;
+  }
+}
+function syncVideoLoopDirect(videoElement, nextLoop) {
+  if (!videoElement) return;
+  videoElement.loop = nextLoop;
+}
+
+// src/modules/background/motion.ts
+function useBackgroundMotion() {
+  return useModuleMotion(backgroundTheme);
+}
+function getBackgroundMotionConfig(motion2, animation) {
+  return {
+    animate: animation?.animate ?? motion2.animate,
+    exit: animation?.exit ?? motion2.exit,
+    exitDurationFactor: Number(animation?.exitDurationFactor),
+    initial: animation?.initial ?? motion2.initial,
+    transition: animation?.transition ?? motion2.transition
+  };
+}
+function getBackgroundExitTransition(motion2, config) {
+  const own = config.exit.transition;
+  const fallback = motion2.exit.transition;
+  const factor = Number.isFinite(config.exitDurationFactor) ? Math.max(0, config.exitDurationFactor) : motion2.exitDurationFactor;
+  return {
+    ...config.transition,
+    delay: 0,
+    duration: own?.duration ?? (config.transition.duration ?? motion2.transition.duration ?? 0) * factor,
+    ease: own?.ease ?? fallback?.ease
+  };
+}
+function toCssDuration(seconds, fallback = 0) {
+  const value = Number(seconds);
+  return `${Math.max(0, Number.isFinite(value) ? value : fallback) * 1e3}ms`;
+}
+function toCssDelay(seconds) {
+  const value = Number(seconds);
+  return `${Math.max(0, Number.isFinite(value) ? value : 0) * 1e3}ms`;
+}
+function toCssEasing(easing) {
+  return cssEasing(easing);
+}
+
+// src/modules/background/youtube/parse.ts
+var YOUTUBE_ID_PATTERN = /^[a-zA-Z0-9_-]{11}$/;
+function parseYouTubeTimeParam(value) {
+  if (value === void 0 || value === null || value === "") return 0;
+  if (typeof value === "number") {
+    return Number.isFinite(value) && value >= 0 ? value : 0;
+  }
+  const trimmed = String(value).trim().toLowerCase();
+  if (!trimmed) return 0;
+  if (/^\d+(\.\d+)?$/.test(trimmed)) {
+    return Math.max(0, parseFloat(trimmed));
+  }
+  const hmsMatch = trimmed.match(
+    /^(?:(\d+)h)?(?:(\d+)m)?(?:(\d+(?:\.\d+)?)s?)?$/
+  );
+  if (hmsMatch && (hmsMatch[1] || hmsMatch[2] || hmsMatch[3])) {
+    const hours = parseInt(hmsMatch[1] || "0", 10);
+    const minutes = parseInt(hmsMatch[2] || "0", 10);
+    const seconds = parseFloat(hmsMatch[3] || "0");
+    return Math.max(0, hours * 3600 + minutes * 60 + seconds);
+  }
+  return 0;
+}
+var YOUTUBE_HOST_PATH = /^(?:www\.|m\.|music\.)?(?:youtube\.com|youtu\.be|youtube-nocookie\.com)\//i;
+function toUrl(input, { youtubeOnly = false } = {}) {
+  let candidate = null;
+  if (/^https?:\/\//.test(input)) candidate = input;
+  else if (input.startsWith("//")) candidate = `https:${input}`;
+  else if (!youtubeOnly || YOUTUBE_HOST_PATH.test(input)) {
+    candidate = `https://${input}`;
+  }
+  try {
+    return candidate ? new URL(candidate) : null;
+  } catch {
+    return null;
+  }
+}
+function getIdFromUrl(url) {
+  const host = url.hostname.replace(/^(www\.|m\.|music\.)/i, "").toLowerCase();
+  const segments = url.pathname.split("/").filter(Boolean);
+  if (host === "youtu.be") {
+    return YOUTUBE_ID_PATTERN.test(segments[0] ?? "") ? segments[0] : null;
+  }
+  if (host !== "youtube.com" && host !== "youtube-nocookie.com" && !host.endsWith(".youtube.com")) {
+    return null;
+  }
+  const fromQuery = url.searchParams.get("v") || url.searchParams.get("vi");
+  if (fromQuery && YOUTUBE_ID_PATTERN.test(fromQuery)) return fromQuery;
+  const isVideoPath = segments.length >= 2 && ["embed", "shorts", "live", "v", "e", "watch"].includes(
+    segments[0].toLowerCase()
+  );
+  return isVideoPath && YOUTUBE_ID_PATTERN.test(segments[1]) ? segments[1] : null;
+}
+function extractYouTubeVideoId(input, options = {}) {
+  const trimmed = typeof input === "string" ? input.trim() : "";
+  if (!trimmed) return null;
+  if (options.allowBareId && YOUTUBE_ID_PATTERN.test(trimmed)) return trimmed;
+  const prefixed = trimmed.match(/^(?:youtube|yt):([a-zA-Z0-9_-]{11})$/i);
+  if (prefixed) return prefixed[1];
+  const url = toUrl(trimmed, { youtubeOnly: true });
+  return url ? getIdFromUrl(url) : null;
+}
+function isYouTubeUrl(input) {
+  return Boolean(extractYouTubeVideoId(input));
+}
+function isDirectVideoUrl(input) {
+  if (!input || typeof input !== "string") return false;
+  const trimmed = input.trim();
+  if (!trimmed) return false;
+  if (isYouTubeUrl(trimmed)) return true;
+  if (trimmed.startsWith("/api/background/youtube") || trimmed.startsWith("blob:")) {
+    return true;
+  }
+  const cleanPath = trimmed.split("?")[0].split("#")[0].toLowerCase();
+  return /\.(mp4|webm|mov|m4v|ogg|ogv|m3u8)$/i.test(cleanPath);
+}
+function parseYouTubeUrlConfig(input, options = {}) {
+  const videoId = extractYouTubeVideoId(input, options);
+  if (!videoId || !input) return null;
+  const params = toUrl(input.trim())?.searchParams;
+  return {
+    endTime: parseYouTubeTimeParam(params?.get("end")),
+    listId: params?.get("list") || null,
+    rawUrl: input,
+    startTime: parseYouTubeTimeParam(params?.get("t") || params?.get("start")),
+    videoId
+  };
+}
+function getYouTubeStreamUrl(videoId, options = {}) {
+  const params = new URLSearchParams();
+  params.set("id", videoId);
+  params.set("stream", options.stream || "video");
+  if (options.quality) params.set("quality", options.quality);
+  if (options.codec) params.set("codec", options.codec);
+  return `/api/background/youtube?${params.toString()}`;
+}
+function getYouTubeThumbnailUrl(videoId, proxied = true) {
+  if (proxied) {
+    return `/api/background/youtube?id=${encodeURIComponent(videoId)}&stream=thumbnail`;
+  }
+  return `https://i.ytimg.com/vi/${encodeURIComponent(videoId)}/maxresdefault.jpg`;
+}
+function createYouTubeVideoElementProxy(controller) {
+  const proxyVideo = document.createElement("video");
+  Object.defineProperties(proxyVideo, {
+    currentTime: {
+      configurable: true,
+      get: () => controller.getCurrentTime(),
+      set: (value) => {
+        controller.seekTo(Number(value) || 0);
+        proxyVideo.dispatchEvent(new Event("timeupdate"));
+      }
+    },
+    duration: {
+      configurable: true,
+      get: () => controller.getDuration()
+    },
+    loop: {
+      configurable: true,
+      get: () => controller.getLoop(),
+      set: (value) => {
+        controller.setLoop(Boolean(value));
+      }
+    },
+    muted: {
+      configurable: true,
+      get: () => controller.getMuted(),
+      set: (value) => {
+        controller.setMuted(Boolean(value));
+        proxyVideo.dispatchEvent(new Event("volumechange"));
+      }
+    },
+    pause: {
+      configurable: true,
+      value: () => {
+        controller.pause();
+        proxyVideo.dispatchEvent(new Event("pause"));
+      }
+    },
+    paused: {
+      configurable: true,
+      get: () => controller.getPaused()
+    },
+    play: {
+      configurable: true,
+      value: () => controller.play().then(() => {
+        proxyVideo.dispatchEvent(new Event("play"));
+        proxyVideo.dispatchEvent(new Event("playing"));
+      })
+    },
+    playbackRate: {
+      configurable: true,
+      get: () => controller.getPlaybackRate(),
+      set: (value) => {
+        controller.setPlaybackRate(Number(value) || 1);
+        proxyVideo.dispatchEvent(new Event("ratechange"));
+      }
+    },
+    volume: {
+      configurable: true,
+      get: () => controller.getVolume(),
+      set: (value) => {
+        const clamped = Math.max(0, Math.min(1, Number(value) || 0));
+        controller.setVolume(clamped);
+        proxyVideo.dispatchEvent(new Event("volumechange"));
+      }
+    }
+  });
+  return proxyVideo;
+}
+
+// src/modules/background/state.ts
+var DEFAULT_BACKGROUND = Object.freeze({
+  animation: null,
+  className: "",
+  fadeEdges: null,
+  fit: null,
+  image: null,
+  imageStyle: {},
+  isPlaying: false,
+  noiseStyle: {},
+  overlay: false,
+  overlayColor: "var(--black)",
+  overlayOpacity: 0,
+  position: "center",
+  video: null,
+  videoClassName: "",
+  videoElement: null,
+  videoOptions: {
+    autoplay: true,
+    className: "",
+    corp: 0,
+    loop: false,
+    muted: true,
+    playbackRate: 1,
+    width: null
+  },
+  videoStyle: {},
+  width: null
+});
+var DEFAULT_BACKGROUND_COMPUTED = Object.freeze({
+  ...DEFAULT_BACKGROUND,
+  hasBackground: false,
+  isVideo: false,
+  isYouTube: false,
+  posterUrl: null,
+  youtubeVideoId: null
+});
+var INERT_BACKGROUND_ACTIONS = Object.freeze({
+  resetBackground: () => {
+  },
+  setBackground: () => {
+  },
+  setVideoElement: () => {
+  },
+  setVideoMuted: () => {
+  },
+  setVideoPlaying: () => {
+  },
+  toggleLoop: () => {
+  },
+  toggleMute: () => {
+  },
+  toggleVideo: () => {
+  }
+});
+function normalizeBackgroundInput(patch = {}) {
+  if (!patch) return {};
+  if (typeof patch === "string") {
+    const trimmed = patch.trim();
+    if (isYouTubeUrl(trimmed) || isDirectVideoUrl(trimmed)) {
+      return { image: null, video: trimmed };
+    }
+    return { image: trimmed };
+  }
+  const nextPatch = { ...patch };
+  if (typeof nextPatch.image === "string" && isYouTubeUrl(nextPatch.image) && !nextPatch.video) {
+    nextPatch.video = nextPatch.image;
+    nextPatch.image = null;
+  }
+  return nextPatch;
+}
+function mergeBackgroundState(baseState, patch = {}) {
+  const resolvedPatch = normalizeBackgroundInput(patch);
+  const nextVideoOptions = {
+    ...baseState.videoOptions,
+    ...resolvedPatch.videoOptions || {}
+  };
+  const nextVideo = resolvedPatch.video !== void 0 ? resolvedPatch.video : baseState.video;
+  const shouldAutoPlay = nextVideoOptions.autoplay !== false;
+  const resolvedIsPlaying = resolvedPatch.isPlaying !== void 0 ? resolvedPatch.isPlaying : resolvedPatch.video !== void 0 && Boolean(nextVideo) ? shouldAutoPlay : baseState.isPlaying;
+  return {
+    ...baseState,
+    ...resolvedPatch,
+    isPlaying: resolvedIsPlaying,
+    animation: resolvedPatch.animation !== void 0 ? resolvedPatch.animation ? {
+      ...baseState.animation || {},
+      ...resolvedPatch.animation
+    } : resolvedPatch.animation : baseState.animation,
+    imageStyle: {
+      ...baseState.imageStyle,
+      ...resolvedPatch.imageStyle || {}
+    },
+    noiseStyle: {
+      ...baseState.noiseStyle,
+      ...resolvedPatch.noiseStyle || {}
+    },
+    videoOptions: nextVideoOptions,
+    videoStyle: {
+      ...baseState.videoStyle,
+      ...resolvedPatch.videoStyle || {}
+    }
+  };
+}
+function resolveBackgroundState(registryBackground, override, pathname) {
+  const base = registryBackground ? mergeBackgroundState(DEFAULT_BACKGROUND, registryBackground) : DEFAULT_BACKGROUND;
+  const patch = override.pathname === pathname ? override.patch : null;
+  return patch ? mergeBackgroundState(base, patch) : base;
+}
+function computeBackgroundState(background) {
+  const youtubeVideoId = extractYouTubeVideoId(background.video);
+  const isYouTube = Boolean(youtubeVideoId);
+  const isVideo = Boolean(background.video || isYouTube);
+  return {
+    ...background,
+    hasBackground: Boolean(
+      background.image || isVideo || background.color || background.overlay || background.noiseStyle && (background.noiseStyle.opacity === void 0 || (background.noiseStyle.opacity ?? 0) > 0)
+    ),
+    isVideo,
+    isYouTube,
+    posterUrl: youtubeVideoId ? getYouTubeThumbnailUrl(youtubeVideoId) : null,
+    youtubeVideoId
+  };
+}
+var BackgroundContext = getOrCreateGlobalContext(
+  "BackgroundContext",
+  null
+);
+function useSafePathname() {
+  try {
+    return usePathname();
+  } catch {
+    return null;
+  }
+}
+function BackgroundProvider({ children }) {
+  const pathname = useSafePathname();
+  const registryBackground = useRegistryValue(
+    "background",
+    BACKGROUND_REGISTRY_KEY
+  ) ?? null;
+  const [overrideStore] = useState(
+    () => createStore(
+      { patch: null, pathname },
+      { freezeSnapshots: false }
+    )
+  );
+  const scopedOverride = useStore(overrideStore);
+  const inputsRef = useRef({ pathname, registryBackground });
+  useIsomorphicLayoutEffect(() => {
+    inputsRef.current = { pathname, registryBackground };
+  }, [pathname, registryBackground]);
+  const videoElementRef = useRef(null);
+  const state = useMemo(
+    () => computeBackgroundState(
+      resolveBackgroundState(registryBackground, scopedOverride, pathname)
+    ),
+    [pathname, registryBackground, scopedOverride]
+  );
+  const [stateStore] = useState(
+    () => createStore(state, { freezeSnapshots: false })
+  );
+  useIsomorphicLayoutEffect(() => {
+    stateStore.publish(state);
+  }, [state, stateStore]);
+  const actions = useMemo(() => {
+    const readCurrent = () => {
+      const { pathname: currentPath, registryBackground: registry } = inputsRef.current;
+      return resolveBackgroundState(
+        registry,
+        overrideStore.getSnapshot(),
+        currentPath
+      );
+    };
+    const updatePatch = (updater) => {
+      overrideStore.publish((prev) => {
+        const { pathname: currentPath, registryBackground: registry } = inputsRef.current;
+        const currentPatch = prev.pathname === currentPath ? prev.patch : null;
+        const rawNext = updater(
+          resolveBackgroundState(registry, prev, currentPath)
+        );
+        if (!rawNext || Object.keys(rawNext).length === 0) {
+          return prev;
+        }
+        const normalizedNext = normalizeBackgroundInput(rawNext);
+        const mergedPatch = {
+          ...currentPatch || {},
+          ...normalizedNext,
+          ...currentPatch?.videoOptions || normalizedNext.videoOptions ? {
+            videoOptions: {
+              ...currentPatch?.videoOptions || {},
+              ...normalizedNext.videoOptions || {}
+            }
+          } : {}
+        };
+        return {
+          patch: mergedPatch,
+          pathname: currentPath
+        };
+      });
+    };
+    const currentVideoElement = (current) => videoElementRef.current || current.videoElement;
+    return {
+      resetBackground: () => {
+        overrideStore.publish({
+          patch: null,
+          pathname: inputsRef.current.pathname
+        });
+      },
+      setBackground: (nextBackground) => {
+        updatePatch(() => normalizeBackgroundInput(nextBackground));
+      },
+      setVideoElement: (videoElement2) => {
+        videoElementRef.current = videoElement2;
+        updatePatch(
+          (cur) => cur.videoElement === videoElement2 ? {} : { videoElement: videoElement2 }
+        );
+      },
+      setVideoMuted: (muted) => {
+        const nextMuted = Boolean(muted);
+        syncVideoMutedDirect(currentVideoElement(readCurrent()), nextMuted);
+        updatePatch((cur) => {
+          if (cur.videoOptions?.muted === nextMuted) return {};
+          return {
+            videoOptions: { ...cur.videoOptions, muted: nextMuted }
+          };
+        });
+      },
+      setVideoPlaying: (isPlaying2) => {
+        updatePatch(
+          (cur) => cur.isPlaying === isPlaying2 ? {} : { isPlaying: isPlaying2 }
+        );
+      },
+      toggleLoop: () => {
+        const current = readCurrent();
+        const nextLoop = !current.videoOptions?.loop;
+        syncVideoLoopDirect(currentVideoElement(current), nextLoop);
+        updatePatch((cur) => ({
+          videoOptions: { ...cur.videoOptions, loop: nextLoop }
+        }));
+      },
+      toggleMute: () => {
+        const current = readCurrent();
+        const nextMuted = !current.videoOptions?.muted;
+        syncVideoMutedDirect(currentVideoElement(current), nextMuted);
+        updatePatch((cur) => ({
+          isPlaying: nextMuted ? cur.isPlaying : true,
+          videoOptions: { ...cur.videoOptions, muted: nextMuted }
+        }));
+      },
+      toggleVideo: () => {
+        const current = readCurrent();
+        const videoEl = currentVideoElement(current);
+        const domIsActuallyPlaying = videoEl ? !videoEl.paused && !videoEl.ended : Boolean(current.isPlaying);
+        const nextPlaying = !domIsActuallyPlaying;
+        const configuredMuted = Boolean(current.videoOptions?.muted);
+        triggerVideoPlaybackDirect(videoEl, nextPlaying, configuredMuted);
+        updatePatch(() => ({ isPlaying: nextPlaying }));
+      }
+    };
+  }, [overrideStore]);
+  const media = useOptionalMediaActions();
+  const { isPlaying, isVideo, videoElement } = state;
+  const isLoop = Boolean(state.videoOptions?.loop);
+  useEffect(() => {
+    if (!isVideo) {
+      media.removeSource(BACKGROUND_MEDIA_ID);
+      return;
+    }
+    media.upsertSource({
+      controls: {
+        setMuted: actions.setVideoMuted,
+        toggle: actions.toggleVideo,
+        toggleLoop: actions.toggleLoop
+      },
+      element: videoElement ?? null,
+      id: BACKGROUND_MEDIA_ID,
+      isPlaying,
+      kind: "video",
+      loop: isLoop
+    });
+  }, [actions, isLoop, isPlaying, isVideo, media, videoElement]);
+  useEffect(() => () => media.removeSource(BACKGROUND_MEDIA_ID), [media]);
+  const value = useMemo(
+    () => ({ actions, store: stateStore }),
+    [actions, stateStore]
+  );
+  return /* @__PURE__ */ jsx(BackgroundContext, { value, children });
+}
+
+// src/modules/background/hooks.ts
+var NOOP_BACKGROUND_STORE = createStore(
+  DEFAULT_BACKGROUND_COMPUTED
+);
+function useBackgroundRegistration(config, options) {
+  useModuleRegistration("background", config, options);
+}
+function useBackgroundState() {
+  const { store } = useRequiredContext(
+    BackgroundContext,
+    "useBackgroundState",
+    "BackgroundProvider"
+  );
+  return useStore(store);
+}
+function useBackgroundActions() {
+  return useRequiredContext(
+    BackgroundContext,
+    "useBackgroundActions",
+    "BackgroundProvider"
+  ).actions;
+}
+function useBackground(config, options) {
+  useBackgroundRegistration(config, options);
+  const actions = useBackgroundActions();
+  const state = useBackgroundState();
+  return useMemo(() => ({ ...state, ...actions }), [actions, state]);
+}
+function useOptionalBackgroundState(selector, isEqual) {
+  const ctx = useContext(BackgroundContext);
+  return useStore(
+    ctx?.store ?? NOOP_BACKGROUND_STORE,
+    selector,
+    isEqual
+  );
+}
+function useOptionalBackgroundActions() {
+  const ctx = useContext(BackgroundContext);
+  return ctx?.actions ?? INERT_BACKGROUND_ACTIONS;
+}
+var PLAYER_STATE = { ENDED: 0, PLAYING: 1, PAUSED: 2, BUFFERING: 3 };
+var apiPromise = null;
+function loadYouTubeIframeApi() {
+  if (typeof window === "undefined") return Promise.resolve(null);
+  if (window.YT?.Player) return Promise.resolve(window.YT);
+  if (apiPromise) return apiPromise;
+  apiPromise = new Promise((resolve) => {
+    const previousCallback = window.onYouTubeIframeAPIReady;
+    window.onYouTubeIframeAPIReady = () => {
+      previousCallback?.();
+      resolve(window.YT);
+    };
+    if (!document.querySelector(
+      'script[src="https://www.youtube.com/iframe_api"]'
+    )) {
+      const script = document.createElement("script");
+      script.src = "https://www.youtube.com/iframe_api";
+      script.async = true;
+      document.head.appendChild(script);
+    }
+  });
+  return apiPromise;
+}
+function setHighQuality(player) {
+  player?.setPlaybackQualityRange?.("hd1080", "hd1080");
+  player?.setPlaybackQuality?.("hd1080");
+}
+function useYouTubeIframePlayer({
+  enabled,
+  hostRef,
+  isLoop,
+  isMuted,
+  isPlaying,
+  live,
+  playbackRate,
+  setIsBuffering,
+  setIsFrameReady,
+  setVideoElement,
+  setVideoPlaying,
+  shouldAutoPlay,
+  startTime,
+  videoId
+}) {
+  const playerRef = useRef(null);
+  useEffect(() => {
+    if (!enabled) return void 0;
+    let isDisposed = false;
+    let progressInterval = null;
+    let proxyElement = null;
+    const state = {
+      currentTime: startTime || 0,
+      duration: 0,
+      loop: Boolean(isLoop),
+      muted: Boolean(isMuted),
+      paused: !shouldAutoPlay,
+      playbackRate: Number(playbackRate) || 1,
+      volume: isMuted ? 0 : 0.8
+    };
+    const player = () => playerRef.current;
+    const restart = (target) => {
+      const restartAt = Math.max(0, live.current.startTime || 0);
+      target?.seekTo?.(restartAt, true);
+      target?.playVideo?.();
+      return restartAt;
+    };
+    const emit = (type) => proxyElement?.dispatchEvent(new Event(type));
+    const trackProgress = () => {
+      const current = player();
+      if (!current || typeof current.getCurrentTime !== "function") return;
+      const time = Number(current.getCurrentTime()) || 0;
+      const duration = Number(current.getDuration?.()) || state.duration;
+      state.currentTime = time;
+      if (duration > 0 && duration !== state.duration) {
+        state.duration = duration;
+        emit("durationchange");
+      }
+      const { corp, endTime, isLoop: loops } = live.current;
+      const safetyEnd = endTime > 0 ? endTime : duration > 0 ? duration - Math.max(corp, 0.4) : 0;
+      if (safetyEnd > 0 && time >= safetyEnd) {
+        if (state.loop || loops) {
+          state.currentTime = restart(current);
+        } else {
+          current.pauseVideo?.();
+          state.paused = true;
+          setVideoPlaying(false);
+        }
+      }
+      emit("timeupdate");
+    };
+    const handleReady = (event) => {
+      if (isDisposed) return;
+      const target = event.target;
+      playerRef.current = target ?? null;
+      state.duration = Number(target?.getDuration?.()) || 0;
+      const { isMuted: muted, isPlaying: isPlaying2, playbackRate: rate } = live.current;
+      if (rate !== 1) target?.setPlaybackRate?.(rate);
+      if (muted) {
+        target?.mute?.();
+      } else {
+        target?.unMute?.();
+        target?.setVolume?.(80);
+      }
+      if (live.current.shouldAutoPlay && isPlaying2) {
+        setHighQuality(target);
+        target?.playVideo?.();
+        state.paused = false;
+        setVideoPlaying(true);
+      }
+      if (proxyElement) {
+        setVideoElement(proxyElement);
+        emit("loadedmetadata");
+        emit("durationchange");
+      }
+      progressInterval = window.setInterval(trackProgress, 200);
+    };
+    const handleStateChange = (event) => {
+      if (isDisposed) return;
+      switch (event.data) {
+        case PLAYER_STATE.PLAYING:
+          setHighQuality(event.target);
+          state.paused = false;
+          setIsFrameReady(true);
+          setIsBuffering(false);
+          setVideoPlaying(true);
+          emit("play");
+          emit("playing");
+          break;
+        case PLAYER_STATE.BUFFERING:
+          setIsBuffering(true);
+          break;
+        case PLAYER_STATE.PAUSED:
+          state.paused = true;
+          setIsBuffering(false);
+          setVideoPlaying(false);
+          emit("pause");
+          break;
+        case PLAYER_STATE.ENDED:
+          if (state.loop || live.current.isLoop) {
+            restart(player());
+          } else {
+            state.paused = true;
+            setVideoPlaying(false);
+            emit("ended");
+          }
+          break;
+      }
+    };
+    loadYouTubeIframeApi().then((YT) => {
+      const host = hostRef.current;
+      if (isDisposed || !YT?.Player || !host) return;
+      host.innerHTML = "";
+      const mountTarget = document.createElement("div");
+      host.appendChild(mountTarget);
+      proxyElement = createYouTubeVideoElementProxy({
+        getCurrentTime: () => state.currentTime,
+        getDuration: () => state.duration,
+        getLoop: () => state.loop,
+        getMuted: () => state.muted,
+        getPaused: () => state.paused,
+        getPlaybackRate: () => state.playbackRate,
+        getVolume: () => state.volume,
+        pause: () => {
+          state.paused = true;
+          player()?.pauseVideo?.();
+          setVideoPlaying(false);
+        },
+        play: async () => {
+          state.paused = false;
+          player()?.playVideo?.();
+          setVideoPlaying(true);
+        },
+        seekTo: (seconds) => {
+          state.currentTime = seconds;
+          player()?.seekTo?.(seconds, true);
+          if (!state.paused) player()?.playVideo?.();
+        },
+        setLoop: (loop) => {
+          state.loop = loop;
+        },
+        setMuted: (muted) => {
+          state.muted = muted;
+          if (muted) {
+            player()?.mute?.();
+            return;
+          }
+          player()?.unMute?.();
+          if (state.volume === 0) {
+            state.volume = 0.7;
+            player()?.setVolume?.(70);
+          }
+        },
+        setPlaybackRate: (rate) => {
+          state.playbackRate = rate;
+          player()?.setPlaybackRate?.(rate);
+        },
+        setVolume: (volume) => {
+          state.volume = volume;
+          player()?.setVolume?.(Math.round(volume * 100));
+          if (volume > 0 && state.muted) {
+            state.muted = false;
+            player()?.unMute?.();
+          } else if (volume === 0 && !state.muted) {
+            state.muted = true;
+            player()?.mute?.();
+          }
+        }
+      });
+      const initial = live.current;
+      playerRef.current = new YT.Player(mountTarget, {
+        events: { onReady: handleReady, onStateChange: handleStateChange },
+        host: "https://www.youtube-nocookie.com",
+        playerVars: {
+          autoplay: initial.shouldAutoPlay ? 1 : 0,
+          controls: 0,
+          disablekb: 1,
+          enablejsapi: 1,
+          fs: 0,
+          iv_load_policy: 3,
+          loop: initial.isLoop ? 1 : 0,
+          modestbranding: 1,
+          mute: initial.isMuted ? 1 : 0,
+          origin: window.location.origin,
+          playlist: videoId,
+          playsinline: 1,
+          rel: 0,
+          start: Math.floor(initial.startTime || 0)
+        },
+        videoId
+      });
+    });
+    return () => {
+      isDisposed = true;
+      if (progressInterval !== null) window.clearInterval(progressInterval);
+      try {
+        playerRef.current?.destroy?.();
+      } catch {
+      }
+      playerRef.current = null;
+      setVideoElement(null);
+    };
+  }, [
+    enabled,
+    hostRef,
+    isLoop,
+    isMuted,
+    live,
+    playbackRate,
+    setIsBuffering,
+    setIsFrameReady,
+    setVideoElement,
+    setVideoPlaying,
+    shouldAutoPlay,
+    startTime,
+    videoId
+  ]);
+  useEffect(() => {
+    const current = playerRef.current;
+    if (!enabled || !current) return;
+    try {
+      if (isPlaying) current.playVideo?.();
+      else current.pauseVideo?.();
+      if (isMuted) current.mute?.();
+      else current.unMute?.();
+      if (playbackRate) current.setPlaybackRate?.(playbackRate);
+    } catch {
+    }
+  }, [enabled, isMuted, isPlaying, playbackRate]);
+}
+var AUDIO_SYNC_EVENTS = [
+  "play",
+  "playing",
+  "pause",
+  "waiting",
+  "volumechange",
+  "ratechange"
+];
+function setElementMuted(video, muted) {
+  video.muted = muted;
+  if (!muted && video.volume === 0) video.volume = 0.8;
+}
+function unlockAudioOnGesture(unlock) {
+  const handler = () => {
+    unlock();
+    window.removeEventListener("pointerdown", handler);
+    window.removeEventListener("keydown", handler);
+  };
+  window.addEventListener("pointerdown", handler, { once: true });
+  window.addEventListener("keydown", handler, { once: true });
+}
+function useYouTubeBackgroundPlayerModel({
+  codec = "auto",
+  corp = 0,
+  endTime = 0,
+  forceIframe = false,
+  isLoop = false,
+  isMuted = true,
+  isPlaying = true,
+  playbackRate = 1,
+  posterUrl = null,
+  quality = "1080p",
+  setVideoElement,
+  setVideoPlaying,
+  shouldAutoPlay = true,
+  showPoster = false,
+  showSpinner = true,
+  startTime = 0,
+  videoClasses: _videoClasses,
+  videoId,
+  videoStyle: _videoStyle
+}) {
+  const [useIframeFallback, setUseIframeFallback] = useState(
+    Boolean(forceIframe)
+  );
+  const [isFrameReady, setIsFrameReady] = useState(false);
+  const [isBuffering, setIsBuffering] = useState(true);
+  const videoRef = useRef(null);
+  const audioRef = useRef(null);
+  const iframeHostRef = useRef(null);
+  const hasLoadedVideoRef = useRef(false);
+  const errorRetryCountRef = useRef(0);
+  const audioErrorRetryCountRef = useRef(0);
+  const retryTimerIdsRef = useRef(/* @__PURE__ */ new Set());
+  const lastAudioSeekAtRef = useRef(0);
+  const live = useRef({
+    corp,
+    endTime,
+    isLoop,
+    isMuted,
+    isPlaying,
+    playbackRate,
+    shouldAutoPlay,
+    startTime
+  });
+  live.current = {
+    corp,
+    endTime,
+    isLoop,
+    isMuted,
+    isPlaying,
+    playbackRate,
+    shouldAutoPlay,
+    startTime
+  };
+  useEffect(() => {
+    setUseIframeFallback(Boolean(forceIframe));
+    setIsFrameReady(false);
+    setIsBuffering(true);
+    hasLoadedVideoRef.current = false;
+    errorRetryCountRef.current = 0;
+    audioErrorRetryCountRef.current = 0;
+  }, [forceIframe, videoId]);
+  const videoStreamUrl = useMemo(
+    () => getYouTubeStreamUrl(videoId, { codec, quality, stream: "video" }),
+    [codec, quality, videoId]
+  );
+  const audioStreamUrl = useMemo(
+    () => getYouTubeStreamUrl(videoId, { stream: "audio" }),
+    [videoId]
+  );
+  const resolvedPoster = showPoster ? posterUrl || getYouTubeThumbnailUrl(videoId, true) : null;
+  const syncCompanionAudio = useCallback((forceSeek = false) => {
+    const video = videoRef.current;
+    const audio = audioRef.current;
+    if (!video || !audio) return;
+    try {
+      const targetRate = Number(video.playbackRate) || 1;
+      if (audio.playbackRate !== targetRate) audio.playbackRate = targetRate;
+      if (audio.readyState < 2 || !Number.isFinite(audio.duration) || audio.duration <= 0) {
+        return;
+      }
+      const volume = Math.max(0, Math.min(1, Number(video.volume) ?? 1));
+      if (Math.abs(audio.volume - volume) > 5e-3) audio.volume = volume;
+      const isSilent = Boolean(video.muted) || volume === 0;
+      if (audio.muted !== isSilent) audio.muted = isSilent;
+      if (video.paused || video.ended || video.seeking) {
+        if (!audio.paused) audio.pause();
+        return;
+      }
+      const now = performance.now();
+      const drift = Math.abs(audio.currentTime - video.currentTime);
+      const maxDrift = isSilent ? 0.5 : 0.35;
+      if (forceSeek || drift > maxDrift && now - lastAudioSeekAtRef.current > 1500) {
+        lastAudioSeekAtRef.current = now;
+        audio.currentTime = video.currentTime;
+      }
+      if (audio.paused) audio.play().catch(() => {
+      });
+    } catch {
+    }
+  }, []);
+  const playWithFallback = useCallback(
+    (video, forceSeek, unlockAudio) => {
+      const onPlayed = () => {
+        setVideoPlaying(true);
+        syncCompanionAudio(forceSeek);
+      };
+      video.play().then(onPlayed).catch((error) => {
+        if (error?.name !== "NotAllowedError") return;
+        video.muted = true;
+        video.play().then(() => {
+          onPlayed();
+          if (!unlockAudio) return;
+          unlockAudioOnGesture(() => {
+            const current = videoRef.current;
+            if (!live.current.isMuted && current) {
+              setElementMuted(current, false);
+            }
+          });
+        }).catch(() => {
+        });
+      });
+    },
+    [setVideoPlaying, syncCompanionAudio]
+  );
+  const scheduleRetry = (callback, delay) => {
+    const timerId = window.setTimeout(() => {
+      retryTimerIdsRef.current.delete(timerId);
+      try {
+        callback();
+      } catch {
+      }
+    }, delay);
+    retryTimerIdsRef.current.add(timerId);
+  };
+  const handleEnded = useCallback(() => {
+    const video = videoRef.current;
+    const audio = audioRef.current;
+    if (!video) return;
+    if (video.loop || live.current.isLoop) {
+      const resetTime = Math.max(0, live.current.startTime || 0);
+      video.currentTime = resetTime;
+      if (audio && audio.readyState >= 2) audio.currentTime = resetTime;
+      video.play().then(() => {
+        setVideoPlaying(true);
+        syncCompanionAudio(true);
+      }).catch(() => {
+      });
+      return;
+    }
+    video.pause();
+    if (audio && !audio.paused) audio.pause();
+    setVideoPlaying(false);
+  }, [setVideoPlaying, syncCompanionAudio]);
+  const handleTimeUpdate = () => {
+    const video = videoRef.current;
+    if (!video) return;
+    if (video.currentTime > 0 && video.readyState >= 2) {
+      setIsFrameReady(true);
+      setIsBuffering(false);
+    }
+    const duration = Number(video.duration) || 0;
+    const { corp: activeCorp, endTime: activeEndTime } = live.current;
+    const effectiveEnd = activeEndTime > 0 ? activeEndTime : activeCorp > 0 && duration > 0 ? duration - activeCorp : 0;
+    if (effectiveEnd > 0 && video.currentTime >= effectiveEnd) handleEnded();
+  };
+  const handlePlay = () => {
+    const video = videoRef.current;
+    hasLoadedVideoRef.current = true;
+    if (video && !live.current.isMuted && video.muted) {
+      setElementMuted(video, false);
+    }
+    if (!video || video.readyState < 2) setIsBuffering(true);
+    setVideoPlaying(true);
+    syncCompanionAudio(false);
+  };
+  const handlePlaying = () => {
+    hasLoadedVideoRef.current = true;
+    setIsFrameReady(true);
+    setIsBuffering(false);
+    setVideoPlaying(true);
+    syncCompanionAudio(false);
+  };
+  const handlePause = () => {
+    const video = videoRef.current;
+    syncCompanionAudio(false);
+    setIsBuffering(false);
+    if (video && !video.seeking && !video.ended && !live.current.isPlaying) {
+      setVideoPlaying(false);
+    }
+  };
+  const handleSeeked = () => {
+    const video = videoRef.current;
+    if (!video) return;
+    setIsFrameReady(true);
+    if (video.readyState >= 2 && (!live.current.isPlaying || !video.paused)) {
+      setIsBuffering(false);
+    }
+    syncCompanionAudio(true);
+    if (live.current.isPlaying && video.paused) {
+      video.play().then(() => {
+        setVideoPlaying(true);
+        syncCompanionAudio(true);
+      }).catch(() => {
+      });
+    }
+  };
+  const handleCanPlay = () => {
+    const video = videoRef.current;
+    if (!video) return;
+    hasLoadedVideoRef.current = true;
+    if (!live.current.isPlaying) {
+      setIsFrameReady(true);
+      setIsBuffering(false);
+    } else if (video.paused) {
+      setElementMuted(video, Boolean(live.current.isMuted));
+      playWithFallback(video, false, true);
+    }
+  };
+  const handleLoadedMetadata = () => {
+    const video = videoRef.current;
+    if (!video) return;
+    hasLoadedVideoRef.current = true;
+    if (startTime > 0 && video.currentTime < startTime) {
+      video.currentTime = startTime;
+      if (audioRef.current) audioRef.current.currentTime = startTime;
+    }
+  };
+  const handleLoadedData = () => {
+    const video = videoRef.current;
+    if (!video) return;
+    hasLoadedVideoRef.current = true;
+    video.playbackRate = playbackRate;
+    setElementMuted(video, Boolean(live.current.isMuted));
+    if (startTime > 0 && video.currentTime < startTime) {
+      video.currentTime = startTime;
+    }
+    if (!live.current.isPlaying) {
+      setIsFrameReady(true);
+      setIsBuffering(false);
+    } else if (video.paused) {
+      playWithFallback(video, true, false);
+    }
+  };
+  const handleError = () => {
+    const video = videoRef.current;
+    if (video && hasLoadedVideoRef.current) {
+      const resumeTime = video.currentTime || 0;
+      scheduleRetry(() => {
+        video.load();
+        video.currentTime = resumeTime;
+        if (live.current.isPlaying) video.play().catch(() => {
+        });
+      }, 150);
+      return;
+    }
+    errorRetryCountRef.current += 1;
+    if (video && errorRetryCountRef.current <= 1) {
+      scheduleRetry(() => video.load(), 200);
+      return;
+    }
+    setUseIframeFallback(true);
+  };
+  const handleAudioError = useCallback(() => {
+    const audio = audioRef.current;
+    if (!audio) return;
+    audioErrorRetryCountRef.current += 1;
+    if (audioErrorRetryCountRef.current <= 1) {
+      scheduleRetry(() => {
+        audio.load();
+        if (videoRef.current) {
+          audio.currentTime = videoRef.current.currentTime || 0;
+        }
+      }, 200);
+      return;
+    }
+    if (!live.current.isMuted) {
+      setUseIframeFallback(true);
+    }
+  }, []);
+  useEffect(() => {
+    if (useIframeFallback) return void 0;
+    const video = videoRef.current;
+    const audio = audioRef.current;
+    const retryTimerIds = retryTimerIdsRef.current;
+    if (!video) {
+      setVideoElement(null);
+      return void 0;
+    }
+    setVideoElement(video);
+    const onSync = () => syncCompanionAudio(false);
+    const onSeeked = () => syncCompanionAudio(true);
+    for (const event of AUDIO_SYNC_EVENTS) {
+      video.addEventListener(event, onSync);
+    }
+    video.addEventListener("seeked", onSeeked);
+    const syncTimer = window.setInterval(onSync, 1e3);
+    return () => {
+      window.clearInterval(syncTimer);
+      retryTimerIds.forEach((timerId) => window.clearTimeout(timerId));
+      retryTimerIds.clear();
+      for (const event of AUDIO_SYNC_EVENTS) {
+        video.removeEventListener(event, onSync);
+      }
+      video.removeEventListener("seeked", onSeeked);
+      try {
+        video.pause();
+        audio?.pause();
+      } catch {
+      }
+    };
+  }, [setVideoElement, syncCompanionAudio, useIframeFallback, videoStreamUrl]);
+  useEffect(() => {
+    const video = videoRef.current;
+    if (useIframeFallback || !video) return;
+    applyVideoPlaybackState({
+      isPlaying,
+      playbackRate,
+      setVideoPlaying,
+      videoElement: video
+    });
+    syncCompanionAudio();
+  }, [
+    isPlaying,
+    playbackRate,
+    setVideoPlaying,
+    syncCompanionAudio,
+    useIframeFallback
+  ]);
+  useEffect(() => {
+    const video = videoRef.current;
+    if (useIframeFallback || !video) return;
+    if (video.muted !== isMuted) setElementMuted(video, isMuted);
+    syncCompanionAudio(true);
+  }, [isMuted, syncCompanionAudio, useIframeFallback]);
+  useYouTubeIframePlayer({
+    enabled: useIframeFallback,
+    hostRef: iframeHostRef,
+    isLoop,
+    isMuted,
+    isPlaying,
+    live,
+    playbackRate,
+    setIsBuffering,
+    setIsFrameReady,
+    setVideoElement,
+    setVideoPlaying,
+    shouldAutoPlay,
+    startTime,
+    videoId
+  });
+  const isCovered = !isFrameReady || useIframeFallback && !isPlaying;
+  const showSpinnerOverlay = showSpinner && (!isFrameReady || isBuffering);
+  return {
+    useIframeFallback,
+    isFrameReady,
+    setIsBuffering,
+    videoRef,
+    audioRef,
+    iframeHostRef,
+    videoStreamUrl,
+    audioStreamUrl,
+    resolvedPoster,
+    syncCompanionAudio,
+    handleEnded,
+    handleTimeUpdate,
+    handlePlay,
+    handlePlaying,
+    handlePause,
+    handleSeeked,
+    handleCanPlay,
+    handleLoadedMetadata,
+    handleLoadedData,
+    handleError,
+    handleAudioError,
+    isCovered,
+    showSpinnerOverlay
+  };
+}
+var YouTubeBackgroundPlayer = memo(function YouTubeBackgroundPlayer2({
+  codec = "auto",
+  corp = 0,
+  endTime = 0,
+  forceIframe = false,
+  isLoop = false,
+  isMuted = true,
+  isPlaying = true,
+  playbackRate = 1,
+  posterUrl = null,
+  quality = "1080p",
+  setVideoElement,
+  setVideoPlaying,
+  shouldAutoPlay = true,
+  showPoster = false,
+  showSpinner = true,
+  startTime = 0,
+  theme,
+  videoClasses,
+  videoId,
+  videoStyle
+}) {
+  const {
+    useIframeFallback,
+    isFrameReady,
+    setIsBuffering: _setIsBuffering,
+    videoRef,
+    audioRef,
+    iframeHostRef,
+    videoStreamUrl,
+    audioStreamUrl,
+    resolvedPoster,
+    syncCompanionAudio: _syncCompanionAudio,
+    handleEnded,
+    handleTimeUpdate,
+    handlePlay,
+    handlePlaying,
+    handlePause,
+    handleSeeked,
+    handleCanPlay,
+    handleLoadedMetadata,
+    handleLoadedData,
+    handleError,
+    handleAudioError,
+    isCovered,
+    showSpinnerOverlay
+  } = useYouTubeBackgroundPlayerModel({
+    codec,
+    corp,
+    endTime,
+    forceIframe,
+    isLoop,
+    isMuted,
+    isPlaying,
+    playbackRate,
+    posterUrl,
+    quality,
+    setVideoElement,
+    setVideoPlaying,
+    shouldAutoPlay,
+    showPoster,
+    showSpinner,
+    startTime,
+    videoClasses,
+    videoId,
+    videoStyle
+  });
+  return /* @__PURE__ */ jsxs("div", { className: theme.slots.youtube, children: [
+    /* @__PURE__ */ jsx("div", { "data-visible": isCovered, className: theme.slots.youtubeCover }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-visible": showSpinnerOverlay,
+        className: theme.slots.youtubeSpinner,
+        children: showSpinner ? /* @__PURE__ */ jsx(Spinner, { size: 30, className: theme.slots.youtubeSpinnerIcon }) : null
+      }
+    ),
+    resolvedPoster ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-visible": isCovered,
+        className: theme.slots.youtubePoster,
+        style: {
+          backgroundImage: `url(${resolvedPoster})`,
+          ...videoStyle
+        }
+      }
+    ) : null,
+    useIframeFallback && !isPlaying ? /* @__PURE__ */ jsx("div", { className: theme.slots.youtubeBlackout }) : null,
+    useIframeFallback ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-visible": isFrameReady,
+        className: theme.slots.youtubeFrame,
+        style: videoStyle,
+        children: /* @__PURE__ */ jsx("div", { ref: iframeHostRef, className: theme.slots.youtubeHost })
+      }
+    ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "video",
+        {
+          ref: videoRef,
+          src: videoStreamUrl,
+          "data-visible": isFrameReady,
+          className: cn(videoClasses, theme.slots.youtubeVideo),
+          preload: "auto",
+          muted: isMuted,
+          loop: isLoop,
+          playsInline: true,
+          style: videoStyle,
+          onTimeUpdate: handleTimeUpdate,
+          onEnded: handleEnded,
+          onPlay: handlePlay,
+          onWaiting: () => {
+            _setIsBuffering(true);
+            _syncCompanionAudio(false);
+          },
+          onPlaying: handlePlaying,
+          onPause: handlePause,
+          onSeeking: () => _setIsBuffering(true),
+          onSeeked: handleSeeked,
+          onCanPlay: handleCanPlay,
+          onLoadedMetadata: handleLoadedMetadata,
+          onLoadedData: handleLoadedData,
+          onError: handleError
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "audio",
+        {
+          ref: audioRef,
+          src: audioStreamUrl,
+          preload: "auto",
+          onCanPlay: () => _syncCompanionAudio(true),
+          onError: handleAudioError
+        }
+      )
+    ] })
+  ] });
+});
+function useNativeVideoModel({
+  corp,
+  isLoop,
+  isMuted,
+  isPlaying,
+  playbackRate,
+  setVideoElement,
+  setVideoPlaying,
+  shouldAutoPlay,
+  src,
+  style: _style,
+  className: _className
+}) {
+  const videoRef = useRef(null);
+  const handleEnded = useCallback(() => {
+    const video = videoRef.current;
+    if (!video) return;
+    if (video.loop) {
+      video.currentTime = 0;
+      video.play().catch((error) => report("Background loop play", error, "warn"));
+      return;
+    }
+    video.pause();
+    setVideoPlaying(false);
+  }, [setVideoPlaying]);
+  const handleTimeUpdate = useCallback(() => {
+    const video = videoRef.current;
+    if (video?.duration && corp > 0 && video.currentTime >= video.duration - corp) {
+      handleEnded();
+    }
+  }, [corp, handleEnded]);
+  const handleLoadedData = () => {
+    const video = videoRef.current;
+    if (!video) return;
+    video.playbackRate = playbackRate;
+    if (!shouldAutoPlay) return;
+    if (isMuted) video.muted = true;
+    video.play().then(() => setVideoPlaying(true)).catch((error) => {
+      report("Background autoplay", error, "warn");
+      setVideoPlaying(false);
+    });
+  };
+  useEffect(() => {
+    const video = videoRef.current;
+    setVideoElement(video);
+    return () => {
+      try {
+        video?.pause();
+      } catch {
+      }
+    };
+  }, [src, setVideoElement]);
+  useEffect(() => () => setVideoElement(null), [setVideoElement]);
+  useEffect(() => {
+    applyVideoPlaybackState({
+      isPlaying,
+      playbackRate,
+      setVideoPlaying,
+      videoElement: videoRef.current
+    });
+  }, [isPlaying, playbackRate, setVideoPlaying]);
+  return { videoRef, handleEnded, handleTimeUpdate, handleLoadedData };
+}
+function NativeVideo({
+  corp,
+  isLoop,
+  isMuted,
+  isPlaying,
+  playbackRate,
+  setVideoElement,
+  setVideoPlaying,
+  shouldAutoPlay,
+  src,
+  style,
+  className
+}) {
+  const { videoRef, handleEnded, handleTimeUpdate, handleLoadedData } = useNativeVideoModel({
+    corp,
+    isLoop,
+    isMuted,
+    isPlaying,
+    playbackRate,
+    setVideoElement,
+    setVideoPlaying,
+    shouldAutoPlay,
+    src,
+    style,
+    className
+  });
+  return /* @__PURE__ */ jsx(
+    "video",
+    {
+      ref: videoRef,
+      src,
+      className,
+      preload: "auto",
+      muted: isMuted,
+      loop: isLoop,
+      playsInline: true,
+      style,
+      onTimeUpdate: handleTimeUpdate,
+      onEnded: handleEnded,
+      onLoadedData: handleLoadedData
+    }
+  );
+}
+var BackgroundGradients = memo(function BackgroundGradients2({
+  count = 0,
+  direction,
+  color = DEFAULT_COLOR,
+  theme
+}) {
+  if (!count || count <= 0) return null;
+  const opacity = Math.min(1, Math.max(0.2, count * 0.25));
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-side": direction,
+      className: theme.slots.gradient,
+      style: {
+        ...theme.styles.gradient,
+        opacity,
+        background: generateBaseGradient(direction, color)
+      }
+    }
+  );
+});
+var EdgeGradient = memo(function EdgeGradient2({
+  direction,
+  percent = 0,
+  opacity = 0,
+  color,
+  theme
+}) {
+  if (opacity <= 0) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-side": direction,
+      className: theme.slots.edge,
+      style: {
+        width: `${Math.max(30, percent * 1.15)}%`,
+        opacity,
+        background: generateEdgeGradient(direction, color || DEFAULT_COLOR)
+      }
+    }
+  );
+});
+var NoiseOverlay = memo(function NoiseOverlay2({
+  opacity,
+  blendMode,
+  inlineStyle,
+  maskImage,
+  isFixed,
+  theme
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-position": isFixed ? "fixed" : "absolute",
+      className: theme.slots.noise,
+      style: {
+        ...theme.styles.noise,
+        ...typeof opacity === "number" ? { opacity } : {},
+        ...typeof blendMode === "string" && blendMode.trim() ? { mixBlendMode: blendMode } : {},
+        ...maskImage ? { maskImage, WebkitMaskImage: maskImage } : {},
+        ...inlineStyle
+      }
+    }
+  );
+});
+var SolidOverlay = memo(function SolidOverlay2({
+  opacity = 0,
+  color,
+  transitionStyle,
+  maskImage,
+  theme
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: theme.slots.solid,
+      style: {
+        opacity,
+        backgroundColor: color,
+        ...maskImage ? { maskImage, WebkitMaskImage: maskImage } : {},
+        ...transitionStyle
+      }
+    }
+  );
+});
+function useBackgroundOverlayModel() {
+  const {
+    animation,
+    className,
+    fadeEdges,
+    fit,
+    hasBackground,
+    image,
+    imageStyle,
+    isPlaying,
+    isVideo,
+    isYouTube,
+    leftGradient: configuredLeftGradient,
+    noiseStyle,
+    overlay,
+    overlayColor,
+    overlayOpacity,
+    position,
+    rightGradient: configuredRightGradient,
+    video,
+    videoClassName,
+    videoOptions,
+    videoStyle,
+    width
+  } = useBackgroundState();
+  const { setVideoElement, setVideoPlaying } = useBackgroundActions();
+  const options = resolveVideoOptions(videoOptions);
+  const { corp, isMuted, playbackRate } = options;
+  const youtubeConfig = useMemo(
+    () => isYouTube ? parseYouTubeUrlConfig(video) : null,
+    [isYouTube, video]
+  );
+  const startTime = videoOptions?.startTime ?? youtubeConfig?.startTime ?? 0;
+  const endTime = videoOptions?.endTime ?? youtubeConfig?.endTime ?? 0;
+  const backgroundKey = isVideo ? youtubeConfig ? `youtube:${youtubeConfig.videoId}` : video : image;
+  const backgroundMotion = useBackgroundMotion();
+  const { reduced, tempo } = useMotionTokens();
+  const motionConfig = useMemo(
+    () => getBackgroundMotionConfig(
+      backgroundMotion,
+      retime(animation, { reduced, tempo })
+    ),
+    [animation, backgroundMotion, reduced, tempo]
+  );
+  const {
+    baseStyle,
+    leftGradient: styleLeft,
+    rightGradient: styleRight
+  } = useMemo(
+    () => getVisualStyle((isVideo ? videoStyle : imageStyle) || {}),
+    [imageStyle, isVideo, videoStyle]
+  );
+  const leftGradient = configuredLeftGradient ?? styleLeft;
+  const rightGradient = configuredRightGradient ?? styleRight;
+  const {
+    opacity: noiseOpacity,
+    mixBlendMode: noiseBlendMode,
+    ...noiseInlineStyle
+  } = noiseStyle || {};
+  const overlayTransitionStyle = useMemo(
+    () => ({
+      transitionDelay: toCssDelay(motionConfig.transition.delay),
+      transitionDuration: toCssDuration(
+        motionConfig.transition.duration,
+        backgroundMotion.transition.duration
+      ),
+      transitionProperty: "opacity",
+      transitionTimingFunction: toCssEasing(motionConfig.transition.ease)
+    }),
+    [backgroundMotion.transition.duration, motionConfig.transition]
+  );
+  const rawWidth = width ?? videoOptions?.width ?? videoStyle?.width;
+  const resolvedWidth = rawWidth === void 0 || rawWidth === null || rawWidth === "" ? void 0 : typeof rawWidth === "number" ? `${rawWidth}px` : String(rawWidth);
+  const rawFit = fit ?? videoOptions?.fit ?? videoOptions?.objectFit;
+  const theme = useTheme(backgroundTheme);
+  const fitStyle = useMemo(
+    () => rawFit && OBJECT_FITS.includes(rawFit) ? { objectFit: rawFit } : {},
+    [rawFit]
+  );
+  const classNames = resolveVideoClassNames(
+    videoClassName,
+    className,
+    videoOptions?.videoClassName,
+    videoOptions?.className,
+    videoStyle?.className
+  );
+  const hasCustomWidth = Boolean(resolvedWidth || classNames.width);
+  const gradientSettings = useMemo(
+    () => resolveGradientSettings({
+      fadeEdges,
+      hasWidth: hasCustomWidth,
+      leftGradient,
+      rightGradient
+    }),
+    [fadeEdges, hasCustomWidth, leftGradient, rightGradient]
+  );
+  const maskImage = useMemo(
+    () => gradientSettings.enabled ? getEdgeFadeMask({
+      color: overlayColor || DEFAULT_COLOR,
+      leftPercent: gradientSettings.leftPercent,
+      rightPercent: gradientSettings.rightPercent
+    }) : void 0,
+    [gradientSettings, overlayColor]
+  );
+  const framePosition = position === "left" || position === "right" ? position : "center";
+  const videoClasses = cn(theme.slots.video, classNames.other);
+  const objectPosition2 = baseStyle.objectPosition || position || void 0;
+  const sharedVideoStyle = useMemo(
+    () => ({
+      ...classNames.objectStyle,
+      ...fitStyle,
+      ...objectPosition2 ? { objectPosition: objectPosition2 } : {},
+      ...maskImage ? { WebkitMaskImage: maskImage, maskImage } : {},
+      ...baseStyle
+    }),
+    [baseStyle, classNames.objectStyle, fitStyle, maskImage, objectPosition2]
+  );
+  const exitTransition = useMemo(
+    () => getBackgroundExitTransition(backgroundMotion, motionConfig),
+    [backgroundMotion, motionConfig]
+  );
+  return {
+    className,
+    hasBackground,
+    image,
+    isPlaying,
+    isVideo,
+    overlay,
+    overlayColor,
+    overlayOpacity,
+    position,
+    video,
+    videoStyle,
+    width,
+    setVideoElement,
+    setVideoPlaying,
+    options,
+    corp,
+    isMuted,
+    playbackRate,
+    youtubeConfig,
+    startTime,
+    endTime,
+    backgroundKey,
+    motionConfig,
+    baseStyle,
+    leftGradient,
+    rightGradient,
+    noiseOpacity,
+    noiseBlendMode,
+    noiseInlineStyle,
+    overlayTransitionStyle,
+    resolvedWidth,
+    classNames,
+    hasCustomWidth,
+    gradientSettings,
+    maskImage,
+    framePosition,
+    videoClasses,
+    sharedVideoStyle,
+    exitTransition,
+    theme
+  };
+}
+function BackgroundOverlay() {
+  const {
+    hasBackground,
+    image,
+    isPlaying,
+    isVideo,
+    overlay,
+    overlayColor,
+    overlayOpacity,
+    position,
+    video,
+    setVideoElement,
+    setVideoPlaying,
+    options,
+    corp,
+    isMuted,
+    playbackRate,
+    youtubeConfig,
+    startTime,
+    endTime,
+    backgroundKey,
+    motionConfig,
+    baseStyle,
+    leftGradient,
+    rightGradient,
+    noiseOpacity,
+    noiseBlendMode,
+    noiseInlineStyle,
+    overlayTransitionStyle,
+    resolvedWidth,
+    classNames,
+    hasCustomWidth,
+    gradientSettings,
+    maskImage,
+    framePosition,
+    videoClasses,
+    sharedVideoStyle,
+    exitTransition,
+    theme
+  } = useBackgroundOverlayModel();
+  return /* @__PURE__ */ jsx(AnimatePresence, { mode: "sync", children: hasBackground && /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      initial: motionConfig.initial,
+      animate: motionConfig.animate,
+      transition: motionConfig.transition,
+      exit: { ...motionConfig.exit, transition: exitTransition },
+      className: theme.slots.root,
+      style: {
+        willChange: "transform, opacity, filter",
+        ...theme.styles.root
+      },
+      children: [
+        isVideo ? /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "data-position": framePosition,
+            "data-width": classNames.width || resolvedWidth ? void 0 : "full",
+            className: cn(theme.slots.videoFrame, classNames.width),
+            style: {
+              ...theme.styles.videoFrame,
+              ...resolvedWidth ? { width: resolvedWidth } : {}
+            },
+            children: [
+              youtubeConfig ? /* @__PURE__ */ jsx(
+                YouTubeBackgroundPlayer,
+                {
+                  videoId: youtubeConfig.videoId,
+                  startTime,
+                  endTime,
+                  corp,
+                  isPlaying,
+                  isMuted,
+                  isLoop: options.isLoop,
+                  shouldAutoPlay: options.shouldAutoPlay,
+                  showPoster: options.showPoster,
+                  showSpinner: options.showSpinner,
+                  playbackRate,
+                  quality: options.quality,
+                  codec: options.codec,
+                  forceIframe: options.forceIframe,
+                  posterUrl: options.showPoster ? image || null : null,
+                  theme,
+                  videoClasses,
+                  videoStyle: sharedVideoStyle,
+                  setVideoElement,
+                  setVideoPlaying
+                }
+              ) : /* @__PURE__ */ jsx(
+                NativeVideo,
+                {
+                  src: video || void 0,
+                  className: videoClasses,
+                  style: sharedVideoStyle,
+                  corp,
+                  isLoop: options.isLoop,
+                  isMuted,
+                  isPlaying,
+                  playbackRate,
+                  shouldAutoPlay: options.shouldAutoPlay,
+                  setVideoElement,
+                  setVideoPlaying
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                EdgeGradient,
+                {
+                  theme,
+                  direction: "left",
+                  percent: gradientSettings.leftPercent,
+                  opacity: gradientSettings.leftOpacity,
+                  color: overlayColor
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                EdgeGradient,
+                {
+                  theme,
+                  direction: "right",
+                  percent: gradientSettings.rightPercent,
+                  opacity: gradientSettings.rightOpacity,
+                  color: overlayColor
+                }
+              ),
+              hasCustomWidth && /* @__PURE__ */ jsx(
+                NoiseOverlay,
+                {
+                  theme,
+                  opacity: noiseOpacity,
+                  blendMode: noiseBlendMode,
+                  inlineStyle: noiseInlineStyle,
+                  maskImage
+                }
+              ),
+              hasCustomWidth && overlay && /* @__PURE__ */ jsx(
+                SolidOverlay,
+                {
+                  theme,
+                  opacity: overlayOpacity,
+                  color: overlayColor,
+                  transitionStyle: overlayTransitionStyle,
+                  maskImage
+                }
+              )
+            ]
+          }
+        ) : /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: theme.slots.image,
+            style: {
+              backgroundImage: image ? `url(${image})` : void 0,
+              backgroundPosition: position,
+              ...baseStyle
+            }
+          }
+        ),
+        (!isVideo || !hasCustomWidth) && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            BackgroundGradients,
+            {
+              theme,
+              count: leftGradient,
+              direction: "left",
+              color: overlayColor
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            BackgroundGradients,
+            {
+              theme,
+              count: rightGradient,
+              direction: "right",
+              color: overlayColor
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            NoiseOverlay,
+            {
+              theme,
+              isFixed: true,
+              opacity: noiseOpacity,
+              blendMode: noiseBlendMode,
+              inlineStyle: noiseInlineStyle
+            }
+          ),
+          overlay && /* @__PURE__ */ jsx(
+            SolidOverlay,
+            {
+              theme,
+              opacity: overlayOpacity,
+              color: overlayColor,
+              transitionStyle: overlayTransitionStyle
+            }
+          )
+        ] })
+      ]
+    },
+    backgroundKey
+  ) });
+}
+function selectPageBackground(background) {
+  return background ? normalizeBackgroundInput(background) : null;
+}
+function useBackgroundPage(_slice, page) {
+  const actions = useBackgroundActions();
+  return useMemo(
+    () => ({
+      ...actions,
+      set: (background) => page.set({ background })
+    }),
+    [actions, page]
+  );
+}
+var backgroundModule = defineModule({
+  id: "background",
+  context: BackgroundContext,
+  Provider: BackgroundProvider,
+  Backdrop: BackgroundOverlay,
+  uses: ["media"],
+  registry: {
+    cleanupDelayMs: 600,
+    keyPolicy: "singleton",
+    lifecycle: "immediate",
+    singletonKey: BACKGROUND_REGISTRY_KEY
+  },
+  page: {
+    select: (config) => selectPageBackground(config.background),
+    entries: (slice) => [
+      { key: BACKGROUND_REGISTRY_KEY, value: slice }
+    ],
+    use: useBackgroundPage
+  }
+});
+function defineBackground(definition = {}) {
+  const { id = "background", ...config } = typeof definition === "string" ? { image: definition } : definition;
+  return Object.freeze({
+    config,
+    id,
+    use: function useDefinedBackground(overrides = {}, options = {}) {
+      const patch = typeof overrides === "string" ? { image: overrides } : overrides;
+      return useBackground({ ...config, ...patch }, options);
+    }
+  });
+}
+
+export { BACKGROUND_MEDIA_ID, BACKGROUND_REGISTRY_KEY, BG_TOKEN_TO_OBJECT_STYLE, BackgroundContext, BackgroundOverlay, BackgroundProvider, DEFAULT_BACKGROUND, DEFAULT_BACKGROUND_COMPUTED, DEFAULT_COLOR, INERT_BACKGROUND_ACTIONS, OBJECT_FITS, YouTubeBackgroundPlayer, applyVideoPlaybackState, backgroundModule, backgroundTheme, computeBackgroundState, defineBackground, extractYouTubeVideoId, generateBaseGradient, generateEdgeGradient, getEdgeFadeMask, getYouTubeStreamUrl, getYouTubeThumbnailUrl, isDirectVideoUrl, isYouTubeUrl, mergeBackgroundState, normalizeBackgroundInput, parseYouTubeUrlConfig, resolveBackgroundState, resolveVideoClassNames, resolveVideoOptions, selectPageBackground, syncVideoLoopDirect, syncVideoMutedDirect, triggerVideoPlaybackDirect, useBackground, useBackgroundActions, useBackgroundRegistration, useBackgroundState, useOptionalBackgroundActions, useOptionalBackgroundState };
+//# sourceMappingURL=chunk-CGHZSSFR.js.map
+//# sourceMappingURL=chunk-CGHZSSFR.js.map