@omerdlw/base-framework 1.0.0

package/dist/modules/background/index.js

@@ -0,0 +1,3195 @@
+"use client";
+import { memo, createContext, useState, useRef, useEffect, useMemo, useCallback, useSyncExternalStore, use, useInsertionEffect, useLayoutEffect, useId, useContext, 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 '@radix-ui/react-tooltip';
+import { AnimatePresence, motion } from 'motion/react';
+import { usePathname } from 'next/navigation';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/utils/string.ts
+function trimToNull(value) {
+  if (value === null || value === void 0) return null;
+  const trimmed = String(value).trim();
+  return trimmed.length > 0 ? trimmed : null;
+}
+
+// src/utils/dom.ts
+var isBrowser = typeof window !== "undefined";
+
+// src/utils/object.ts
+function isObject(value) {
+  return Boolean(value) && typeof value === "object" && !Array.isArray(value);
+}
+function report(scope, error, level = "error") {
+  if (process.env.NODE_ENV === "production" && typeof window !== "undefined") {
+    return;
+  }
+  console[level](`[${scope}]`, error);
+}
+
+// src/utils/store.ts
+function freezeStoreSnapshot(state) {
+  if (process.env.NODE_ENV === "production" || !state || typeof state !== "object") {
+    return state;
+  }
+  const seen = /* @__PURE__ */ new WeakSet();
+  const freeze = (value) => {
+    if (seen.has(value) || Object.isFrozen(value)) return;
+    seen.add(value);
+    const prototype = Object.getPrototypeOf(value);
+    if (Array.isArray(value) || prototype === Object.prototype || prototype === null) {
+      for (const key of Reflect.ownKeys(value)) {
+        const descriptor = Object.getOwnPropertyDescriptor(value, key);
+        if (descriptor && "value" in descriptor && descriptor.value !== null) {
+          if (typeof descriptor.value === "object") freeze(descriptor.value);
+        }
+      }
+    }
+    Object.freeze(value);
+  };
+  freeze(state);
+  return state;
+}
+function createStore(initialState, { freezeSnapshots = true } = {}) {
+  const listeners = /* @__PURE__ */ new Set();
+  const prepare = freezeSnapshots ? freezeStoreSnapshot : (state) => state;
+  let snapshot = prepare(initialState);
+  const publish = (nextStateOrUpdater) => {
+    const nextState = typeof nextStateOrUpdater === "function" ? nextStateOrUpdater(snapshot) : nextStateOrUpdater;
+    if (Object.is(snapshot, nextState)) return false;
+    snapshot = prepare(nextState);
+    for (const listener of listeners) {
+      try {
+        listener();
+      } catch (error) {
+        report("CoreStore subscriber", error, "warn");
+      }
+    }
+    return true;
+  };
+  const setState = (updater) => {
+    if (typeof updater === "function") {
+      return publish(updater);
+    }
+    if (snapshot && typeof snapshot === "object" && updater && typeof updater === "object") {
+      return publish({ ...snapshot, ...updater });
+    }
+    return publish(updater);
+  };
+  return Object.freeze({
+    getSnapshot() {
+      return snapshot;
+    },
+    publish,
+    setState,
+    subscribe(listener) {
+      if (typeof listener !== "function") return () => {
+      };
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    }
+  });
+}
+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({
+  INSTANT: 0.08,
+  MICRO: 0.18,
+  FAST: 0.28,
+  BASE: 0.36,
+  MODERATE: 0.44,
+  SLOW: 0.58,
+  CINEMATIC: 0.86
+});
+var EASING_CURVES = Object.freeze({
+  OUT_EXPO: [0.16, 1, 0.3, 1],
+  OUT_QUART: [0.25, 1, 0.5, 1],
+  OUT_QUINT: [0.22, 1, 0.36, 1],
+  IN_OUT_CUBIC: [0.65, 0, 0.35, 1],
+  IN_CUBIC: [0.5, 0, 1, 1],
+  OUT_BACK: [0.34, 1.56, 0.64, 1]
+});
+var MOTION_EASINGS = Object.freeze({
+  ENTER: EASING_CURVES.OUT_QUART,
+  ENTER_EMPHASIZED: EASING_CURVES.OUT_EXPO,
+  EXIT: EASING_CURVES.IN_CUBIC
+});
+Object.freeze({
+  MICRO: Object.freeze({
+    distance: 4,
+    duration: DURATION_TOKENS.MICRO,
+    ease: MOTION_EASINGS.ENTER_EMPHASIZED,
+    scaleDelta: 8e-3
+  }),
+  FAST: Object.freeze({
+    distance: 9,
+    duration: DURATION_TOKENS.FAST,
+    ease: MOTION_EASINGS.ENTER_EMPHASIZED,
+    scaleDelta: 0.012
+  }),
+  STANDARD: Object.freeze({
+    distance: 18,
+    duration: DURATION_TOKENS.MODERATE,
+    ease: MOTION_EASINGS.ENTER,
+    scaleDelta: 0.018
+  }),
+  SURFACE: Object.freeze({
+    distance: 28,
+    duration: DURATION_TOKENS.SLOW,
+    ease: MOTION_EASINGS.ENTER_EMPHASIZED,
+    scaleDelta: 0.024
+  })
+});
+Object.freeze({
+  duration: DURATION_TOKENS.INSTANT,
+  ease: "linear"
+});
+function getOrCreateGlobalContext(name, defaultValue) {
+  const sym = /* @__PURE__ */ Symbol.for(`@omerdlw/base-framework/context/${name}`);
+  const store = globalThis;
+  if (!store[sym]) {
+    store[sym] = createContext(defaultValue);
+  }
+  return store[sym];
+}
+
+// src/theme.tsx
+function defineThemeSpec(id) {
+  return Object.freeze({ id });
+}
+var EMPTY = /* @__PURE__ */ new Map();
+var ThemeContext = getOrCreateGlobalContext("ThemeContext", EMPTY);
+function useTheme(spec) {
+  const config = useContext(ThemeContext).get(spec.id);
+  if (!config) {
+    throw new Error(
+      `Theme "${spec.id}" is missing. Add its theme file to src/config/ and list it in src/config/index.ts.`
+    );
+  }
+  return {
+    slots: config.slots,
+    styles: config.styles ?? {}
+  };
+}
+
+// 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 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 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);
+  }
+  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/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
+  };
+}
+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 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((err2) => {
+      if (err2?.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";
+}
+function useRequiredContext(context, hookName, providerName) {
+  const value = use(context);
+  if (value === null) {
+    throw new Error(`${hookName} must be used within ${providerName}`);
+  }
+  return value;
+}
+function useStore(store, selector = (state) => state, isEqual = Object.is) {
+  const cacheRef = useRef({
+    isEqual: null,
+    selected: void 0,
+    selector: null,
+    snapshot: null
+  });
+  const getSelectedSnapshot = useCallback(() => {
+    const snapshot = store.getSnapshot();
+    const cache = cacheRef.current;
+    if (cache.snapshot === snapshot && cache.selector === selector && cache.isEqual === isEqual) {
+      return cache.selected;
+    }
+    const selected = selector(snapshot);
+    if (cache.snapshot !== null && cache.isEqual === isEqual && isEqual(cache.selected, selected)) {
+      cache.snapshot = snapshot;
+      cache.selector = selector;
+      return cache.selected;
+    }
+    cacheRef.current = {
+      isEqual,
+      selected,
+      selector,
+      snapshot
+    };
+    return selected;
+  }, [isEqual, selector, store]);
+  return useSyncExternalStore(
+    store.subscribe,
+    getSelectedSnapshot,
+    getSelectedSnapshot
+  );
+}
+var useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : useEffect;
+var EventEmitter = class {
+  events = /* @__PURE__ */ new Map();
+  debounceTimers = /* @__PURE__ */ new Map();
+  subscribe(event, callback) {
+    if (typeof event !== "string" || !event || typeof callback !== "function") {
+      return () => {
+      };
+    }
+    const listeners = this.events.get(event) || /* @__PURE__ */ new Set();
+    listeners.add(callback);
+    this.events.set(event, listeners);
+    return () => {
+      listeners.delete(callback);
+      if (listeners.size === 0) this.events.delete(event);
+    };
+  }
+  emit(event, payload) {
+    const listeners = this.events.get(event);
+    if (!listeners || listeners.size === 0) return;
+    const snapshot = Array.from(listeners);
+    for (const callback of snapshot) {
+      try {
+        callback(payload);
+      } catch (error) {
+        report(`Event listener (${String(event)})`, error);
+      }
+    }
+  }
+  emitDebounced(event, payload, waitMs = 100) {
+    const existing = this.debounceTimers.get(event);
+    if (existing) clearTimeout(existing);
+    const timer = setTimeout(() => {
+      this.debounceTimers.delete(event);
+      this.emit(event, payload);
+    }, waitMs);
+    this.debounceTimers.set(event, timer);
+  }
+  cancelDebounced(event) {
+    if (event) {
+      const timer = this.debounceTimers.get(event);
+      if (timer) {
+        clearTimeout(timer);
+        this.debounceTimers.delete(event);
+      }
+    } else {
+      for (const timer of this.debounceTimers.values()) {
+        clearTimeout(timer);
+      }
+      this.debounceTimers.clear();
+    }
+  }
+  unsubscribeAll(event) {
+    this.cancelDebounced(event);
+    if (event) this.events.delete(event);
+    else this.events.clear();
+  }
+  hasListeners(event) {
+    return Boolean(this.events.get(event)?.size);
+  }
+  getListenerCount(event) {
+    return this.events.get(event)?.size || 0;
+  }
+  getAllEvents() {
+    return [...this.events.keys()];
+  }
+};
+var GLOBAL_EVENTS_KEY = /* @__PURE__ */ Symbol.for("__base_framework_global_events__");
+var _global = globalThis;
+_global[GLOBAL_EVENTS_KEY] ?? (_global[GLOBAL_EVENTS_KEY] = new EventEmitter());
+
+// src/kernel/constants.ts
+var DEFAULT_SOURCE = "dynamic";
+var REGISTRY_SOURCES = Object.freeze({
+  STATIC: "static",
+  DYNAMIC: "dynamic",
+  USER: "user"
+});
+var REGISTRY_LIFECYCLES = Object.freeze({
+  IMMEDIATE: "immediate",
+  GRACEFUL: "graceful",
+  PERSISTENT: "persistent",
+  ROUTE: "route"
+});
+var REGISTRY_VALIDATION_MODES = Object.freeze({
+  WARN: "warn",
+  STRICT: "strict"
+});
+var REGISTRY_METADATA_KEYS = Object.freeze([
+  "cleanup",
+  "cleanupDelayMs",
+  "instanceId",
+  "lifecycle",
+  "priority",
+  "source",
+  "scope",
+  "validation"
+]);
+Object.freeze({
+  [REGISTRY_SOURCES.STATIC]: 100,
+  [REGISTRY_SOURCES.DYNAMIC]: 200,
+  [REGISTRY_SOURCES.USER]: 300
+});
+Object.freeze({
+  [REGISTRY_SOURCES.STATIC]: 10,
+  [REGISTRY_SOURCES.DYNAMIC]: 20,
+  [REGISTRY_SOURCES.USER]: 30
+});
+var REGISTRY_LIFECYCLE_VALUES = new Set(
+  Object.values(REGISTRY_LIFECYCLES)
+);
+var REGISTRY_METADATA_KEY_SET = new Set(
+  REGISTRY_METADATA_KEYS
+);
+var REGISTRY_SCOPE_KINDS = Object.freeze({
+  APP: "app",
+  SESSION: "session",
+  ROUTE: "route",
+  INSTANCE: "instance",
+  WORKSPACE: "workspace"
+});
+REGISTRY_SCOPE_KINDS.APP;
+
+// src/kernel/utils.ts
+function parseFiniteNumber(value) {
+  const parsed = Number(value);
+  return Number.isFinite(parsed) ? parsed : null;
+}
+function getValidString(value, fallback = null) {
+  return trimToNull(value) ?? fallback;
+}
+
+// src/kernel/schema.ts
+function resolveLifecycle(metadata, fallback) {
+  const lifecycle = metadata?.lifecycle ?? metadata?.cleanup;
+  return lifecycle && REGISTRY_LIFECYCLE_VALUES.has(lifecycle) ? lifecycle : fallback;
+}
+function validateRegistryMetadata(metadata) {
+  if (metadata === void 0 || metadata === null)
+    return { issues: [], valid: true };
+  if (!isObject(metadata))
+    return { issues: ["registry metadata must be an object"], valid: false };
+  const issues = [];
+  Object.keys(metadata).forEach((key) => {
+    if (!REGISTRY_METADATA_KEY_SET.has(key))
+      issues.push(`unknown registry metadata field: ${key}`);
+  });
+  if (metadata.source !== void 0 && !getValidString(metadata.source))
+    issues.push("source must be a non-empty string");
+  if (metadata.instanceId !== void 0 && !getValidString(metadata.instanceId))
+    issues.push("instanceId must be a non-empty string");
+  if (metadata.scope !== void 0 && !getValidString(metadata.scope))
+    issues.push("scope must be a non-empty string");
+  if (metadata.priority !== void 0 && parseFiniteNumber(metadata.priority) === null)
+    issues.push("priority must be a finite number");
+  if (metadata.cleanupDelayMs !== void 0) {
+    const delay = parseFiniteNumber(metadata.cleanupDelayMs);
+    if (delay === null || delay < 0)
+      issues.push("cleanupDelayMs must be a non-negative finite number");
+  }
+  const lifecycle = metadata.lifecycle ?? metadata.cleanup;
+  if (lifecycle !== void 0 && !REGISTRY_LIFECYCLE_VALUES.has(String(lifecycle))) {
+    issues.push(
+      `lifecycle must be one of: ${[...REGISTRY_LIFECYCLE_VALUES].join(", ")}`
+    );
+  }
+  if (metadata.validation !== void 0 && !Object.values(REGISTRY_VALIDATION_MODES).includes(
+    metadata.validation
+  )) {
+    issues.push(
+      `validation must be one of: ${Object.values(REGISTRY_VALIDATION_MODES).join(", ")}`
+    );
+  }
+  return { issues, valid: issues.length === 0 };
+}
+function normalizeRegistryMetadata(metadata, {
+  defaultCleanupDelayMs = null,
+  defaultLifecycle = null,
+  defaultSource = DEFAULT_SOURCE
+} = {}) {
+  const registryMeta = isObject(metadata) ? metadata : {};
+  const normalizedDefaultDelay = parseFiniteNumber(defaultCleanupDelayMs);
+  const fallbackCleanupDelayMs = normalizedDefaultDelay !== null && normalizedDefaultDelay >= 0 ? normalizedDefaultDelay : null;
+  const fallbackLifecycle = defaultLifecycle && REGISTRY_LIFECYCLE_VALUES.has(defaultLifecycle) ? defaultLifecycle : null;
+  const source = getValidString(registryMeta.source) || getValidString(defaultSource, DEFAULT_SOURCE) || DEFAULT_SOURCE;
+  const scope = getValidString(registryMeta.scope);
+  const priority = parseFiniteNumber(registryMeta.priority);
+  const lifecycle = resolveLifecycle(registryMeta, fallbackLifecycle);
+  const validation = isValidationMode(registryMeta.validation) ? registryMeta.validation : null;
+  const cleanupDelayCandidate = parseFiniteNumber(registryMeta.cleanupDelayMs);
+  let cleanupDelayMs = cleanupDelayCandidate !== null && cleanupDelayCandidate >= 0 ? cleanupDelayCandidate : fallbackCleanupDelayMs;
+  if (lifecycle === REGISTRY_LIFECYCLES.IMMEDIATE) {
+    cleanupDelayMs = 0;
+  } else if ((lifecycle === REGISTRY_LIFECYCLES.GRACEFUL || lifecycle === REGISTRY_LIFECYCLES.ROUTE) && cleanupDelayMs === null) {
+    cleanupDelayMs = fallbackCleanupDelayMs;
+  }
+  return {
+    cleanupDelayMs,
+    lifecycle,
+    priority,
+    registerOptions: {
+      ...priority !== null && { priority },
+      ...validation === REGISTRY_VALIDATION_MODES.STRICT && { validation },
+      ...scope && { scope }
+    },
+    source,
+    ...scope && { scope },
+    ...validation && { validation }
+  };
+}
+function isValidationMode(value) {
+  return Object.values(REGISTRY_VALIDATION_MODES).includes(value);
+}
+function pickRegistryMetadata(options) {
+  if (!isObject(options)) return {};
+  return Object.fromEntries(
+    REGISTRY_METADATA_KEYS.filter((key) => options[key] !== void 0).map(
+      (key) => [key, options[key]]
+    )
+  );
+}
+function createNoopHandle(status = "rejected", reason = "unknown") {
+  const handle = Object.assign(() => false, {
+    active: false,
+    dispose: () => false,
+    instanceId: null,
+    key: "",
+    priority: 0,
+    reason,
+    source: "",
+    status,
+    type: "",
+    update: () => handle,
+    updatedAt: 0,
+    validation: "warn"
+  });
+  return handle;
+}
+createNoopHandle();
+var RegistryContext = getOrCreateGlobalContext(
+  "RegistryContext",
+  null
+);
+function useRegistryActions() {
+  return useRequiredContext(
+    RegistryContext,
+    "useRegistryActions",
+    "RegistryProvider"
+  ).actions;
+}
+function useRegistrySubscription() {
+  return useRequiredContext(
+    RegistryContext,
+    "useRegistrySubscription",
+    "RegistryProvider"
+  ).subscription;
+}
+function useRegistryValue(type, key) {
+  const { getSnapshot, subscribe } = useRegistrySubscription();
+  const subscribeToKey = useCallback(
+    (listener) => subscribe(type, key, listener),
+    [key, subscribe, type]
+  );
+  const getValue = useCallback(
+    () => getSnapshot(type, key),
+    [getSnapshot, key, type]
+  );
+  return useSyncExternalStore(subscribeToKey, getValue, getValue);
+}
+var EMPTY_MODULES = Object.freeze([]);
+var ModuleHostContext = getOrCreateGlobalContext("ModuleHostContext", null);
+function selectModuleSlice(coreModule, config) {
+  const slice = coreModule.page?.select ? coreModule.page.select(config) : config[coreModule.id];
+  return slice ?? null;
+}
+function createModulePayload(modules, config, metadata = {}) {
+  const payload = {};
+  let hasSlices = false;
+  for (const coreModule of modules) {
+    if (!coreModule.page?.entries) continue;
+    const slice = selectModuleSlice(coreModule, config);
+    if (slice === null) continue;
+    payload[coreModule.id] = slice;
+    hasSlices = true;
+  }
+  if (!hasSlices) return null;
+  return {
+    ...payload,
+    registry: {
+      ...metadata,
+      ...isObject(config.registry) ? config.registry : {}
+    }
+  };
+}
+function useInstalledModules() {
+  return use(ModuleHostContext)?.modules ?? EMPTY_MODULES;
+}
+
+// src/kernel/handlers.ts
+function isPersistentLifecycle(lifecycle) {
+  return lifecycle === REGISTRY_LIFECYCLES.PERSISTENT;
+}
+function runRegistrationBatch(context, executor) {
+  return typeof context.batch === "function" ? context.batch(executor) : executor(context);
+}
+function createEntryCleanupKey(type, key, source, instanceId, scope) {
+  return JSON.stringify([
+    "entry",
+    type,
+    key,
+    scope ?? null,
+    source,
+    instanceId
+  ]);
+}
+function getCleanupScope(context) {
+  return context?.cleanupScope || /* @__PURE__ */ new Map();
+}
+function clearCleanupTimer(scope, cleanupKey) {
+  const lifecycle = scope.get(cleanupKey);
+  if (!lifecycle) return;
+  lifecycle.cancelled = true;
+  if (lifecycle.timerId !== null) clearTimeout(lifecycle.timerId);
+  scope.delete(cleanupKey);
+}
+function scheduleCleanup(scope, cleanupKey, callback, delayMs) {
+  clearCleanupTimer(scope, cleanupKey);
+  const lifecycle = {
+    cancelled: false,
+    timerId: null
+  };
+  lifecycle.timerId = setTimeout(() => {
+    if (lifecycle.cancelled || scope.get(cleanupKey) !== lifecycle) return;
+    scope.delete(cleanupKey);
+    callback();
+  }, delayMs);
+  scope.set(cleanupKey, lifecycle);
+}
+function collectModuleRegistrations(coreModule, slice, pageMetadata, context) {
+  const definition = coreModule.registry;
+  const toEntries = coreModule.page?.entries;
+  if (!definition || !toEntries || slice == null || slice === false) return [];
+  const type = coreModule.id;
+  const items = Array.isArray(slice) ? slice : [slice];
+  const registrations = [];
+  for (const item of items) {
+    if (item == null || item === false) continue;
+    const itemMetadata = isObject(item) && isObject(item.registry) ? item.registry : {};
+    const metadata = { ...pageMetadata, ...itemMetadata };
+    if (metadata.validation === "strict" && !validateRegistryMetadata(metadata).valid) {
+      continue;
+    }
+    const payload = isObject(item) ? Object.fromEntries(
+      Object.entries(item).filter(([key]) => key !== "registry")
+    ) : item;
+    const { cleanupDelayMs, lifecycle, registerOptions, scope, source } = normalizeRegistryMetadata(metadata, {
+      defaultCleanupDelayMs: definition.cleanupDelayMs ?? null,
+      defaultLifecycle: definition.lifecycle,
+      defaultSource: DEFAULT_SOURCE
+    });
+    for (const { key, value } of toEntries(payload, context) ?? []) {
+      const validation = definition.validate?.(value);
+      if (validation && !validation.valid) {
+        report(`Registry ${type} config is invalid`, validation.issues, "warn");
+        continue;
+      }
+      registrations.push({
+        cleanupDelayMs,
+        cleanupKey: createEntryCleanupKey(
+          type,
+          key,
+          source,
+          context.instanceId,
+          scope
+        ),
+        key,
+        lifecycle,
+        registerOptions,
+        scope,
+        source,
+        type,
+        value
+      });
+    }
+  }
+  return registrations;
+}
+var NO_CLEANUP = () => {
+};
+function applyRegistryConfig(config, context) {
+  const modules = context.modules ?? [];
+  if (!config || modules.length === 0) return NO_CLEANUP;
+  const pageMetadata = isObject(config.registry) ? config.registry : {};
+  const slices = config;
+  const registrations = modules.flatMap((coreModule) => {
+    try {
+      return collectModuleRegistrations(
+        coreModule,
+        slices[coreModule.id],
+        pageMetadata,
+        context
+      );
+    } catch (error) {
+      report(`Registry apply (${coreModule.id})`, error);
+      return [];
+    }
+  });
+  if (registrations.length === 0) return NO_CLEANUP;
+  const cleanupScope = getCleanupScope(context);
+  const owner = (registration) => ({
+    instanceId: context.instanceId,
+    scope: registration.scope,
+    source: registration.source
+  });
+  runRegistrationBatch(context, (queue) => {
+    registrations.forEach(
+      ({ cleanupKey, key, registerOptions, source, type, value }) => {
+        clearCleanupTimer(cleanupScope, cleanupKey);
+        queue.register(type, key, value, source, registerOptions);
+      }
+    );
+  });
+  return () => {
+    const immediate = [];
+    registrations.forEach((registration) => {
+      if (isPersistentLifecycle(registration.lifecycle)) return;
+      const { cleanupDelayMs, cleanupKey, key, type } = registration;
+      if (typeof cleanupDelayMs === "number" && cleanupDelayMs > 0) {
+        scheduleCleanup(
+          cleanupScope,
+          cleanupKey,
+          () => context.unregister(type, key, owner(registration)),
+          cleanupDelayMs
+        );
+      } else {
+        immediate.push(registration);
+      }
+    });
+    if (immediate.length === 0) return;
+    runRegistrationBatch(context, (queue) => {
+      immediate.forEach(
+        (registration) => queue.unregister(
+          registration.type,
+          registration.key,
+          owner(registration)
+        )
+      );
+    });
+  };
+}
+
+// src/kernel/hooks.ts
+function withInstanceId(instanceId, sourceOrOptions, optionsArg) {
+  if (typeof sourceOrOptions === "string") {
+    return {
+      optionsArg: { ...isObject(optionsArg) ? optionsArg : {}, instanceId },
+      sourceOrOptions
+    };
+  }
+  if (isObject(sourceOrOptions)) {
+    return {
+      optionsArg,
+      sourceOrOptions: { ...sourceOrOptions, instanceId }
+    };
+  }
+  return {
+    optionsArg: void 0,
+    sourceOrOptions: {
+      ...isObject(optionsArg) ? optionsArg : {},
+      instanceId
+    }
+  };
+}
+function withInstanceIdForUnregister(instanceId, sourceOrOptions) {
+  if (typeof sourceOrOptions === "string") {
+    return { instanceId, source: sourceOrOptions };
+  }
+  if (isObject(sourceOrOptions)) {
+    return { ...sourceOrOptions, instanceId };
+  }
+  return { instanceId };
+}
+function resolveRegisterArgsWithInstance(instanceId, sourceOrOptions, optionsArg) {
+  const input = withInstanceId(instanceId, sourceOrOptions, optionsArg);
+  return [input.sourceOrOptions, input.optionsArg];
+}
+var MAX_STABILIZATION_DEPTH = 64;
+function createStableFunctionEntry(fn) {
+  const entry = {
+    current: fn,
+    stable(...args) {
+      return entry.current?.apply(this, args);
+    }
+  };
+  return entry;
+}
+function isDirectRegistryComponentPath(path, componentSlices) {
+  const match = /^config\.([^.[]+)\.[^.[]+$/.exec(path);
+  return Boolean(match && componentSlices.has(match[1]));
+}
+function isReactNodeLike(value) {
+  return value === null || value === void 0 || typeof value === "boolean" || typeof value === "string" || typeof value === "number" || isValidElement(value);
+}
+function isStabilizableObject(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value) && !isValidElement(value);
+}
+function hasSameObjectKeys(previousValue, nextValue) {
+  if (!isStabilizableObject(previousValue) || !isStabilizableObject(nextValue)) {
+    return false;
+  }
+  const previousKeys = Object.keys(previousValue);
+  const nextKeys = Object.keys(nextValue);
+  if (previousKeys.length !== nextKeys.length) return false;
+  return nextKeys.every(
+    (key) => Object.prototype.hasOwnProperty.call(previousValue, key)
+  );
+}
+function stabilizeRegistryValue(value, path, scope, previousValue, seen = /* @__PURE__ */ new WeakSet(), depth = 0) {
+  if (depth > MAX_STABILIZATION_DEPTH) return value;
+  if (typeof value === "function") {
+    const isComponent = value.name && /^[A-Z]/.test(value.name);
+    if (isComponent || isDirectRegistryComponentPath(path, scope.componentSlices)) {
+      return value;
+    }
+    scope.usedPaths.add(path);
+    let entry = scope.functionEntries.get(path);
+    if (!entry) {
+      entry = createStableFunctionEntry(value);
+      scope.functionEntries.set(path, entry);
+    } else {
+      entry.current = value;
+    }
+    return entry.stable;
+  }
+  if (value && typeof value === "object") {
+    if (seen.has(value)) return value;
+    seen.add(value);
+  }
+  if (isValidElement(value)) {
+    const nextProps = stabilizeRegistryValue(
+      value.props,
+      `${path}.props`,
+      scope,
+      isValidElement(previousValue) ? previousValue.props : void 0,
+      seen,
+      depth + 1
+    );
+    if (isValidElement(previousValue) && previousValue.type === value.type && previousValue.key === value.key && previousValue.props === nextProps) {
+      return previousValue;
+    }
+    return cloneElement(value, nextProps);
+  }
+  if (Array.isArray(value)) {
+    const nextValue = value.every(isReactNodeLike) ? Children.toArray(value) : value;
+    const previousArray = Array.isArray(previousValue) ? previousValue : null;
+    let hasChanged2 = !previousArray || previousArray.length !== nextValue.length;
+    const stabilizedValue2 = nextValue.map((item, index) => {
+      const nextItem = stabilizeRegistryValue(
+        item,
+        `${path}[${index}]`,
+        scope,
+        previousArray?.[index],
+        seen,
+        depth + 1
+      );
+      if (!previousArray || nextItem !== previousArray[index]) {
+        hasChanged2 = true;
+      }
+      return nextItem;
+    });
+    return !hasChanged2 ? previousArray : stabilizedValue2;
+  }
+  if (typeof value !== "object" || value === null) {
+    return value;
+  }
+  const source = value;
+  const previousRecord = previousValue;
+  const stabilizedValue = {};
+  const canReusePrevious = hasSameObjectKeys(previousValue, value);
+  let hasChanged = !canReusePrevious;
+  Object.keys(source).forEach((key) => {
+    const nextValue = stabilizeRegistryValue(
+      source[key],
+      `${path}.${key}`,
+      scope,
+      previousRecord?.[key],
+      seen,
+      depth + 1
+    );
+    stabilizedValue[key] = nextValue;
+    if (!canReusePrevious || nextValue !== previousRecord?.[key]) {
+      hasChanged = true;
+    }
+  });
+  return !hasChanged ? previousValue : stabilizedValue;
+}
+function useAppliedRegistryConfig(payload, context, componentSlices) {
+  const functionEntriesRef = useRef(/* @__PURE__ */ new Map());
+  const appliedRef = useRef(null);
+  useIsomorphicLayoutEffect(() => {
+    const previous = appliedRef.current;
+    if (previous && previous.payload === payload && previous.context === context) {
+      return;
+    }
+    const functionEntries = functionEntriesRef.current;
+    const usedPaths = /* @__PURE__ */ new Set();
+    const config = stabilizeRegistryValue(
+      payload,
+      "config",
+      { componentSlices, functionEntries, usedPaths },
+      previous?.config
+    );
+    functionEntries.forEach((_entry, path) => {
+      if (!usedPaths.has(path)) functionEntries.delete(path);
+    });
+    if (previous && previous.config === config && previous.context === context) {
+      previous.payload = payload;
+      return;
+    }
+    previous?.cleanup();
+    appliedRef.current = {
+      cleanup: applyRegistryConfig(config, context),
+      config,
+      context,
+      payload
+    };
+  });
+  useIsomorphicLayoutEffect(
+    () => () => {
+      appliedRef.current?.cleanup();
+      appliedRef.current = null;
+    },
+    []
+  );
+}
+function createRegistryApplyContext(actions, {
+  cleanupScope = /* @__PURE__ */ new Map(),
+  instanceId,
+  modules = [],
+  pathname
+}) {
+  const stamp = (queue) => ({
+    register: (type, key, item, sourceOrOptions, optionsArg) => queue.register(
+      type,
+      key,
+      item,
+      ...resolveRegisterArgsWithInstance(
+        instanceId,
+        sourceOrOptions,
+        optionsArg
+      )
+    ),
+    unregister: (type, key, sourceOrOptions) => queue.unregister(
+      type,
+      key,
+      withInstanceIdForUnregister(instanceId, sourceOrOptions)
+    )
+  });
+  return {
+    ...stamp(actions),
+    batch: (executor) => typeof executor === "function" ? actions.batch((queue) => executor(stamp(queue))) : 0,
+    cleanupScope,
+    instanceId,
+    modules,
+    pathname
+  };
+}
+function useRegistry(config, metadata) {
+  const { batch, register, unregister } = useRegistryActions();
+  const pathname = usePathname();
+  const modules = useInstalledModules();
+  const instanceId = `registry-instance-${useId()}`;
+  const [cleanupScope] = useState(
+    () => /* @__PURE__ */ new Map()
+  );
+  const context = useMemo(
+    () => createRegistryApplyContext(
+      { batch, register, unregister },
+      {
+        cleanupScope,
+        instanceId,
+        modules,
+        pathname
+      }
+    ),
+    [batch, cleanupScope, instanceId, modules, pathname, register, unregister]
+  );
+  const payload = useMemo(
+    () => config ? createModulePayload(modules, config, metadata) : null,
+    [config, metadata, modules]
+  );
+  const componentSlices = useMemo(
+    () => new Set(
+      modules.filter(
+        (coreModule) => coreModule.registry?.valueKind === "component"
+      ).map((coreModule) => coreModule.id)
+    ),
+    [modules]
+  );
+  useAppliedRegistryConfig(payload, context, componentSlices);
+}
+function createPageControllerStore() {
+  const listeners = /* @__PURE__ */ new Set();
+  let stack = [];
+  const notify = () => {
+    listeners.forEach((listener) => {
+      try {
+        listener();
+      } catch (error) {
+        report("Page controller listener", error);
+      }
+    });
+  };
+  return {
+    getSnapshot() {
+      const top = stack[stack.length - 1];
+      return top?.controllerRef?.current || null;
+    },
+    notify,
+    register(id, controllerRef) {
+      stack = stack.filter((item) => item.id !== id);
+      stack.push({ controllerRef, id });
+      notify();
+    },
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+    unregister(id) {
+      stack = stack.filter((item) => item.id !== id);
+      notify();
+    }
+  };
+}
+var fallbackStandaloneStore = createPageControllerStore();
+getOrCreateGlobalContext(
+  "PageControllerContext",
+  null
+);
+getOrCreateGlobalContext(
+  "PageControllerStoreContext",
+  fallbackStandaloneStore
+);
+function defineModule(coreModule) {
+  return Object.freeze({ ...coreModule });
+}
+function useModule(id) {
+  const coreModule = use(ModuleHostContext)?.byId.get(id);
+  return coreModule?.context ? use(coreModule.context) ?? null : null;
+}
+function definePeer(id, inert) {
+  const useRuntime = () => useModule(id) ?? inert;
+  return {
+    useRuntime,
+    useActions: () => useRuntime().actions,
+    useState: (selector, isEqual) => useStore(
+      useRuntime().store,
+      selector,
+      isEqual
+    )
+  };
+}
+createStore(void 0);
+
+// src/kernel/adapters.tsx
+function useModuleRegistration(id, value, options) {
+  const coreModule = useInstalledModules().find(
+    (candidate) => candidate.id === id
+  );
+  const config = coreModule && options?.enabled !== false && value != null ? { [id]: value } : null;
+  useRegistry(config, pickRegistryMetadata(options));
+}
+var BackgroundContext = getOrCreateGlobalContext(
+  "BackgroundContext",
+  null
+);
+var mediaPeer = definePeer("media", {
+  actions: {
+    removeSource: () => {
+    },
+    setMuted: () => {
+    },
+    toggle: () => {
+    },
+    toggleLoop: () => {
+    },
+    upsertSource: () => {
+    }
+  },
+  store: createStore({
+    audibleElement: null,
+    element: null,
+    hasMedia: false,
+    isPlaying: false,
+    kind: null,
+    loop: false,
+    sourceId: 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 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
+  };
+}
+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 });
+  useInsertionEffect(() => {
+    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 = mediaPeer.useActions();
+  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 });
+}
+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]);
+}
+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]);
+}
+
+// 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
+  };
+}
+function useNativeVideoModel({
+  corp,
+  isLoop,
+  isMuted,
+  isPlaying,
+  playbackRate,
+  setVideoElement,
+  setVideoPlaying,
+  shouldAutoPlay,
+  src,
+  style,
+  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 };
+}
+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 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
+  };
+}
+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
+      }
+    }
+  );
+});
+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,
+    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 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,
+    exitDurationFactor,
+    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: {
+          ...motionConfig.transition,
+          delay: 0,
+          duration: exitTransition?.duration ?? (motionConfig.transition.duration ?? 0.6) * exitDurationFactor,
+          ease: exitTransition?.ease ?? EASING_CURVES.IN_CUBIC
+        }
+      },
+      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 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, BackgroundContext, BackgroundOverlay, BackgroundProvider, DEFAULT_BACKGROUND, backgroundModule, backgroundTheme, defineBackground, extractYouTubeVideoId, getYouTubeStreamUrl, getYouTubeThumbnailUrl, isDirectVideoUrl, isYouTubeUrl, parseYouTubeUrlConfig, useBackground, useBackgroundActions, useBackgroundRegistration, useBackgroundState };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map