@omerdlw/base-framework 1.0.3 → 1.0.4

package/dist/modules/background/index.js

@@ -1,11 +1,11 @@
 "use client";
-import { memo, createContext, useState, useRef, useEffect, useMemo, useCallback, useInsertionEffect, useContext, useSyncExternalStore, useLayoutEffect, use, useId, isValidElement, cloneElement, Children } from 'react';
+import { memo, createContext, useState, useRef, useEffect, useMemo, useCallback, useContext, useSyncExternalStore, useLayoutEffect, use, useId, isValidElement, cloneElement, Children } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import { Icon as Icon$1 } from '@iconify-icon/react';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { AnimatePresence, motion } from 'motion/react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { usePathname } from 'next/navigation';
+import { Icon as Icon$1 } from '@iconify-icon/react';
 
 function cn(...inputs) {
   return twMerge(clsx(inputs));
@@ -95,41 +95,6 @@ function createStore(initialState, { freezeSnapshots = true } = {}) {
     }
   });
 }
-function Icon({
-  className = "center",
-  color,
-  icon,
-  onClick,
-  size = 20,
-  style,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(
-    Icon$1,
-    {
-      className,
-      height: size,
-      icon,
-      onClick,
-      style: { color, ...style },
-      width: size,
-      ...props
-    }
-  );
-}
-Icon.displayName = "Icon";
-function Spinner({ className = "", size = 15 }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className,
-      "aria-label": "Loading",
-      role: "status",
-      children: /* @__PURE__ */ jsx(Icon, { icon: "mingcute:loading-3-fill", size })
-    }
-  );
-}
-Spinner.displayName = "Spinner";
 
 // src/tokens/motion.ts
 var DURATION_TOKENS = Object.freeze({
@@ -880,60 +845,11 @@ function useTheme(spec) {
 }
 
 // src/modules/background/constants.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: () => {
-  }
-});
+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
 });
@@ -956,65 +872,313 @@ var BG_TOKEN_TO_OBJECT_STYLE = Object.freeze({
   "bg-scale-down": objectFit("scale-down"),
   "bg-top": objectPosition("top")
 });
-var OBJECT_FITS = Object.freeze([
-  "contain",
-  "cover",
-  "fill",
-  "none",
-  "scale-down"
-]);
+var OBJECT_FITS = Object.freeze(["contain", "cover", "fill", "none", "scale-down"]);
 var DEFAULT_COLOR = "var(--black, #000)";
-var backgroundTheme = defineThemeSpec("background");
-var BACKGROUND_REGISTRY_KEY = "page-background";
-var BACKGROUND_MEDIA_ID = "background";
-
-// 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);
+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;
   }
-  return 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
+  };
 }
-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}`;
+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 {
-    return candidate ? new URL(candidate) : null;
+    if (videoElement.playbackRate !== resolvedPlaybackRate) {
+      videoElement.playbackRate = resolvedPlaybackRate;
+    }
   } catch {
-    return null;
+    return;
   }
-}
-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 (!isPlaying) {
+    if (!videoElement.paused) videoElement.pause();
+    return;
   }
-  if (host !== "youtube.com" && host !== "youtube-nocookie.com" && !host.endsWith(".youtube.com")) {
-    return null;
+  if (videoElement.readyState === 0) {
+    return;
   }
-  const fromQuery = url.searchParams.get("v") || url.searchParams.get("vi");
+  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
+var DEFAULT_MOTION = Object.freeze({
+  animate: Object.freeze({
+    opacity: 1
+  }),
+  exit: Object.freeze({
+    opacity: 0,
+    transition: Object.freeze({
+      duration: DURATION_TOKENS.SLOW,
+      ease: EASING_CURVES.IN_CUBIC
+    })
+  }),
+  initial: Object.freeze({
+    opacity: 0
+  }),
+  transition: Object.freeze({
+    delay: 0,
+    duration: DURATION_TOKENS.SLOW,
+    ease: EASING_CURVES.OUT_QUART
+  })
+});
+function getBackgroundMotionConfig(animation) {
+  return {
+    animate: animation?.animate ?? DEFAULT_MOTION.animate,
+    exit: animation?.exit ?? DEFAULT_MOTION.exit,
+    exitDurationFactor: Number(animation?.exitDurationFactor),
+    initial: animation?.initial ?? DEFAULT_MOTION.initial,
+    transition: animation?.transition ?? DEFAULT_MOTION.transition
+  };
+}
+function toCssDuration(seconds) {
+  const value = Number(seconds);
+  return `${Math.max(0, Number.isFinite(value) ? value : DURATION_TOKENS.SLOW) * 1e3}ms`;
+}
+function toCssDelay(seconds) {
+  const value = Number(seconds);
+  return `${Math.max(0, Number.isFinite(value) ? value : 0) * 1e3}ms`;
+}
+function toCssEasing(easing) {
+  if (Array.isArray(easing)) {
+    return `cubic-bezier(${easing.join(", ")})`;
+  }
+  if (typeof easing === "string" && easing.trim()) {
+    return easing;
+  }
+  return "ease";
+}
+
+// src/modules/media/constants.ts
+var DEFAULT_MEDIA_STATE = Object.freeze({
+  audibleElement: null,
+  element: null,
+  hasMedia: false,
+  isPlaying: false,
+  kind: null,
+  loop: false,
+  sourceId: null
+});
+var INERT_MEDIA_ACTIONS = Object.freeze({
+  removeSource: () => {
+  },
+  setMuted: () => {
+  },
+  toggle: () => {
+  },
+  toggleLoop: () => {
+  },
+  upsertSource: () => {
+  }
+});
+var MediaContext = getOrCreateGlobalContext(
+  "MediaContext",
+  null
+);
+createStore(DEFAULT_MEDIA_STATE);
+function useOptionalMediaActions() {
+  const ctx = useContext(MediaContext);
+  return ctx?.actions ?? INERT_MEDIA_ACTIONS;
+}
+
+// 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()
@@ -1139,35 +1303,61 @@ function createYouTubeVideoElementProxy(controller) {
   return proxyVideo;
 }
 
-// src/modules/background/utils.ts
-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
-  };
-}
+// 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") {
@@ -1216,268 +1406,10 @@ function mergeBackgroundState(baseState, patch = {}) {
     }
   };
 }
-function selectPageBackground(background) {
-  return background ? normalizeBackgroundInput(background) : null;
-}
-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(", ")})`;
-}
-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
-var DEFAULT_MOTION = Object.freeze({
-  animate: Object.freeze({
-    opacity: 1
-  }),
-  exit: Object.freeze({
-    opacity: 0,
-    transition: Object.freeze({
-      duration: DURATION_TOKENS.SLOW,
-      ease: EASING_CURVES.IN_CUBIC
-    })
-  }),
-  initial: Object.freeze({
-    opacity: 0
-  }),
-  transition: Object.freeze({
-    delay: 0,
-    duration: DURATION_TOKENS.SLOW,
-    ease: EASING_CURVES.OUT_QUART
-  })
-});
-function getBackgroundMotionConfig(animation) {
-  return {
-    animate: animation?.animate ?? DEFAULT_MOTION.animate,
-    exit: animation?.exit ?? DEFAULT_MOTION.exit,
-    exitDurationFactor: Number(animation?.exitDurationFactor),
-    initial: animation?.initial ?? DEFAULT_MOTION.initial,
-    transition: animation?.transition ?? DEFAULT_MOTION.transition
-  };
-}
-function toCssDuration(seconds) {
-  const value = Number(seconds);
-  return `${Math.max(0, Number.isFinite(value) ? value : DURATION_TOKENS.SLOW) * 1e3}ms`;
-}
-function toCssDelay(seconds) {
-  const value = Number(seconds);
-  return `${Math.max(0, Number.isFinite(value) ? value : 0) * 1e3}ms`;
-}
-function toCssEasing(easing) {
-  if (Array.isArray(easing)) {
-    return `cubic-bezier(${easing.join(", ")})`;
-  }
-  if (typeof easing === "string" && easing.trim()) {
-    return easing;
-  }
-  return "ease";
-}
-
-// src/modules/media/constants.ts
-var DEFAULT_MEDIA_STATE = Object.freeze({
-  audibleElement: null,
-  element: null,
-  hasMedia: false,
-  isPlaying: false,
-  kind: null,
-  loop: false,
-  sourceId: null
-});
-var INERT_MEDIA_ACTIONS = Object.freeze({
-  removeSource: () => {
-  },
-  setMuted: () => {
-  },
-  toggle: () => {
-  },
-  toggleLoop: () => {
-  },
-  upsertSource: () => {
-  }
-});
-var MediaContext = getOrCreateGlobalContext(
-  "MediaContext",
-  null
-);
-createStore(DEFAULT_MEDIA_STATE);
-function useOptionalMediaActions() {
-  const ctx = useContext(MediaContext);
-  return ctx?.actions ?? INERT_MEDIA_ACTIONS;
-}
-var BackgroundContext = getOrCreateGlobalContext(
-  "BackgroundContext",
-  null
-);
-function useBackgroundRegistration(config, options) {
-  useModuleRegistration("background", config, options);
-}
-function useSafePathname() {
-  try {
-    return usePathname();
-  } catch {
-    return null;
-  }
-}
-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 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);
@@ -1494,6 +1426,17 @@ function computeBackgroundState(background) {
     youtubeVideoId
   };
 }
+var BackgroundContext = getOrCreateGlobalContext(
+  "BackgroundContext",
+  null
+);
+function useSafePathname() {
+  try {
+    return usePathname();
+  } catch {
+    return null;
+  }
+}
 function BackgroundProvider({ children }) {
   const pathname = useSafePathname();
   const registryBackground = useRegistryValue(
@@ -1508,7 +1451,7 @@ function BackgroundProvider({ children }) {
   );
   const scopedOverride = useStore(overrideStore);
   const inputsRef = useRef({ pathname, registryBackground });
-  useInsertionEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     inputsRef.current = { pathname, registryBackground };
   }, [pathname, registryBackground]);
   const videoElementRef = useRef(null);
@@ -1648,6 +1591,14 @@ function BackgroundProvider({ children }) {
   );
   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,
@@ -1669,9 +1620,6 @@ function useBackground(config, options) {
   const state = useBackgroundState();
   return useMemo(() => ({ ...state, ...actions }), [actions, state]);
 }
-var NOOP_BACKGROUND_STORE = createStore(
-  DEFAULT_BACKGROUND_COMPUTED
-);
 function useOptionalBackgroundState(selector, isEqual) {
   const ctx = useContext(BackgroundContext);
   return useStore(
@@ -1684,6 +1632,41 @@ function useOptionalBackgroundActions() {
   const ctx = useContext(BackgroundContext);
   return ctx?.actions ?? INERT_BACKGROUND_ACTIONS;
 }
+function Icon({
+  className = "center",
+  color,
+  icon,
+  onClick,
+  size = 20,
+  style,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Icon$1,
+    {
+      className,
+      height: size,
+      icon,
+      onClick,
+      style: { color, ...style },
+      width: size,
+      ...props
+    }
+  );
+}
+Icon.displayName = "Icon";
+function Spinner({ className = "", size = 15 }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className,
+      "aria-label": "Loading",
+      role: "status",
+      children: /* @__PURE__ */ jsx(Icon, { icon: "mingcute:loading-3-fill", size })
+    }
+  );
+}
+Spinner.displayName = "Spinner";
 var PLAYER_STATE = { ENDED: 0, PLAYING: 1, PAUSED: 2, BUFFERING: 3 };
 var apiPromise = null;
 function loadYouTubeIframeApi() {
@@ -1952,273 +1935,53 @@ function useYouTubeIframePlayer({
     }
   }, [enabled, isMuted, isPlaying, playbackRate]);
 }
-
-// src/modules/background/hooks.ts
-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 motionConfig = useMemo(
-    () => getBackgroundMotionConfig(animation),
-    [animation]
-  );
-  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),
-      transitionProperty: "opacity",
-      transitionTimingFunction: toCssEasing(motionConfig.transition.ease)
-    }),
-    [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 exitDurationFactor = Number.isFinite(motionConfig.exitDurationFactor) ? Math.max(0, motionConfig.exitDurationFactor) : 0.6;
-  const exitTransition = motionConfig.exit.transition;
-  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,
-    exitDurationFactor,
-    exitTransition,
-    theme
+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 useNativeVideoModel({
-  corp,
-  isLoop,
-  isMuted,
-  isPlaying,
-  playbackRate,
+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,
-  src,
-  style,
-  className
+  shouldAutoPlay = true,
+  showPoster = false,
+  showSpinner = true,
+  startTime = 0,
+  videoClasses: _videoClasses,
+  videoId,
+  videoStyle: _videoStyle
 }) {
-  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 };
-}
-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,
-  videoId,
-  videoStyle
-}) {
-  const [useIframeFallback, setUseIframeFallback] = useState(
-    Boolean(forceIframe)
-  );
-  const [isFrameReady, setIsFrameReady] = useState(false);
-  const [isBuffering, setIsBuffering] = useState(true);
+  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);
@@ -2439,138 +2202,341 @@ function useYouTubeBackgroundPlayerModel({
   };
   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);
+    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;
     }
-    errorRetryCountRef.current += 1;
-    if (video && errorRetryCountRef.current <= 1) {
-      scheduleRetry(() => video.load(), 200);
-      return;
+    video.pause();
+    setVideoPlaying(false);
+  }, [setVideoPlaying]);
+  const handleTimeUpdate = useCallback(() => {
+    const video = videoRef.current;
+    if (video?.duration && corp > 0 && video.currentTime >= video.duration - corp) {
+      handleEnded();
     }
-    setUseIframeFallback(true);
+  }, [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);
+    });
   };
-  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();
+        video?.pause();
       } catch {
       }
     };
-  }, [setVideoElement, syncCompanionAudio, useIframeFallback, videoStreamUrl]);
+  }, [src, setVideoElement]);
+  useEffect(() => () => setVideoElement(null), [setVideoElement]);
   useEffect(() => {
-    const video = videoRef.current;
-    if (useIframeFallback || !video) return;
     applyVideoPlaybackState({
       isPlaying,
       playbackRate,
       setVideoPlaying,
-      videoElement: video
+      videoElement: videoRef.current
     });
-    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
-  };
+  }, [isPlaying, playbackRate, setVideoPlaying]);
+  return { videoRef, handleEnded, handleTimeUpdate, handleLoadedData };
 }
 function NativeVideo({
   corp,
@@ -2656,190 +2622,205 @@ var EdgeGradient = memo(function EdgeGradient2({
       }
     }
   );
-});
-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 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 motionConfig = useMemo(
+    () => getBackgroundMotionConfig(animation),
+    [animation]
+  );
+  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),
+      transitionProperty: "opacity",
+      transitionTimingFunction: toCssEasing(motionConfig.transition.ease)
+    }),
+    [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
   );
-});
-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
-      }
-    }
+  const hasCustomWidth = Boolean(resolvedWidth || classNames.width);
+  const gradientSettings = useMemo(
+    () => resolveGradientSettings({
+      fadeEdges,
+      hasWidth: hasCustomWidth,
+      leftGradient,
+      rightGradient
+    }),
+    [fadeEdges, hasCustomWidth, leftGradient, rightGradient]
   );
-});
-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,
-    videoRef,
-    audioRef,
-    iframeHostRef,
-    videoStreamUrl,
-    audioStreamUrl,
-    resolvedPoster,
-    syncCompanionAudio,
-    handleEnded,
-    handleTimeUpdate,
-    handlePlay,
-    handlePlaying,
-    handlePause,
-    handleSeeked,
-    handleCanPlay,
-    handleLoadedMetadata,
-    handleLoadedData,
-    handleError,
-    handleAudioError,
-    isCovered,
-    showSpinnerOverlay
-  } = useYouTubeBackgroundPlayerModel({
-    codec,
-    corp,
-    endTime,
-    forceIframe,
-    isLoop,
-    isMuted,
+  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 exitDurationFactor = Number.isFinite(motionConfig.exitDurationFactor) ? Math.max(0, motionConfig.exitDurationFactor) : 0.6;
+  const exitTransition = motionConfig.exit.transition;
+  return {
+    className,
+    hasBackground,
+    image,
     isPlaying,
-    playbackRate,
-    posterUrl,
-    quality,
+    isVideo,
+    overlay,
+    overlayColor,
+    overlayOpacity,
+    position,
+    video,
+    videoStyle,
+    width,
     setVideoElement,
     setVideoPlaying,
-    shouldAutoPlay,
-    showPoster,
-    showSpinner,
+    options,
+    corp,
+    isMuted,
+    playbackRate,
+    youtubeConfig,
     startTime,
+    endTime,
+    backgroundKey,
+    motionConfig,
+    baseStyle,
+    leftGradient,
+    rightGradient,
+    noiseOpacity,
+    noiseBlendMode,
+    noiseInlineStyle,
+    overlayTransitionStyle,
+    resolvedWidth,
+    classNames,
+    hasCustomWidth,
+    gradientSettings,
+    maskImage,
+    framePosition,
     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
-        }
-      )
-    ] })
-  ] });
-});
+    sharedVideoStyle,
+    exitDurationFactor,
+    exitTransition,
+    theme
+  };
+}
 function BackgroundOverlay() {
   const {
     hasBackground,
@@ -3050,6 +3031,9 @@ function BackgroundOverlay() {
     backgroundKey
   ) });
 }
+function selectPageBackground(background) {
+  return background ? normalizeBackgroundInput(background) : null;
+}
 function useBackgroundPage(_slice, page) {
   const actions = useBackgroundActions();
   return useMemo(
@@ -3092,6 +3076,6 @@ function defineBackground(definition = {}) {
   });
 }
 
-export { BACKGROUND_MEDIA_ID, BackgroundContext, BackgroundOverlay, BackgroundProvider, DEFAULT_BACKGROUND, DEFAULT_BACKGROUND_COMPUTED, INERT_BACKGROUND_ACTIONS, backgroundModule, backgroundTheme, defineBackground, extractYouTubeVideoId, getYouTubeStreamUrl, getYouTubeThumbnailUrl, isDirectVideoUrl, isYouTubeUrl, parseYouTubeUrlConfig, useBackground, useBackgroundActions, useBackgroundRegistration, useBackgroundState, useOptionalBackgroundActions, useOptionalBackgroundState };
+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=index.js.map
 //# sourceMappingURL=index.js.map