@omerdlw/base-framework 1.0.1 → 1.0.2

package/dist/modules/background/index.js

@@ -1,10 +1,9 @@
 "use client";
-import { memo, createContext, useState, useRef, useEffect, useMemo, useCallback, useSyncExternalStore, use, useInsertionEffect, useLayoutEffect, useId, useContext, isValidElement, cloneElement, Children } from 'react';
+import { memo, createContext, useState, useRef, useEffect, useMemo, useCallback, useInsertionEffect, useContext, useSyncExternalStore, useLayoutEffect, use, useId, isValidElement, cloneElement, Children } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Icon as Icon$1 } from '@iconify-icon/react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import '@radix-ui/react-tooltip';
 import { AnimatePresence, motion } from 'motion/react';
 import { usePathname } from 'next/navigation';
 
@@ -12,9 +11,6 @@ function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
 
-// src/utils/dom.ts
-var isBrowser = typeof window !== "undefined";
-
 // src/utils/string.ts
 function trimToNull(value) {
   if (value === null || value === void 0) return null;
@@ -22,6 +18,9 @@ function trimToNull(value) {
   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);
@@ -185,6 +184,58 @@ Object.freeze({
   duration: DURATION_TOKENS.INSTANT,
   ease: "linear"
 });
+
+// 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;
 function getOrCreateGlobalContext(name, defaultValue) {
   const sym = /* @__PURE__ */ Symbol.for(`@omerdlw/base-framework/context/${name}`);
   const store = globalThis;
@@ -194,1389 +245,1225 @@ function getOrCreateGlobalContext(name, defaultValue) {
   return store[sym];
 }
 
-// src/theme.tsx
-function defineThemeSpec(id) {
-  return Object.freeze({ id });
+// src/kernel/utils.ts
+function parseFiniteNumber(value) {
+  const parsed = Number(value);
+  return Number.isFinite(parsed) ? parsed : null;
 }
-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 ?? {}
-  };
+function getValidString(value, fallback = null) {
+  return trimToNull(value) ?? fallback;
 }
 
-// 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;
+// 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 trimmed = String(value).trim().toLowerCase();
-  if (!trimmed) return 0;
-  if (/^\d+(\.\d+)?$/.test(trimmed)) {
-    return Math.max(0, parseFloat(trimmed));
+  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(", ")}`
+    );
   }
-  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);
+  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 0;
+  return { issues, valid: issues.length === 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 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 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 isValidationMode(value) {
+  return Object.values(REGISTRY_VALIDATION_MODES).includes(value);
 }
-function isYouTubeUrl(input) {
-  return Boolean(extractYouTubeVideoId(input));
+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 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;
+function useRequiredContext(context, hookName, providerName) {
+  const value = use(context);
+  if (value === null) {
+    throw new Error(`${hookName} must be used within ${providerName}`);
   }
-  const cleanPath = trimmed.split("?")[0].split("#")[0].toLowerCase();
-  return /\.(mp4|webm|mov|m4v|ogg|ogv|m3u8)$/i.test(cleanPath);
+  return value;
 }
-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 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
+  );
 }
-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()}`;
+var useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : useEffect;
+var RegistryContext = getOrCreateGlobalContext(
+  "RegistryContext",
+  null
+);
+function useRegistryActions() {
+  return useRequiredContext(
+    RegistryContext,
+    "useRegistryActions",
+    "RegistryProvider"
+  ).actions;
 }
-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 useRegistrySubscription() {
+  return useRequiredContext(
+    RegistryContext,
+    "useRegistrySubscription",
+    "RegistryProvider"
+  ).subscription;
 }
-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;
+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);
 }
-
-// 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(" ")
-  };
+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 resolveVideoOptions(options = {}) {
+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 {
-    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
+    ...payload,
+    registry: {
+      ...metadata,
+      ...isObject(config.registry) ? config.registry : {}
+    }
   };
 }
-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 useInstalledModules() {
+  return use(ModuleHostContext)?.modules ?? EMPTY_MODULES;
 }
-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 || {}
-    }
-  };
+
+// src/kernel/handlers.ts
+function isPersistentLifecycle(lifecycle) {
+  return lifecycle === REGISTRY_LIFECYCLES.PERSISTENT;
 }
-function selectPageBackground(background) {
-  return background ? normalizeBackgroundInput(background) : null;
+function runRegistrationBatch(context, executor) {
+  return typeof context.batch === "function" ? context.batch(executor) : executor(context);
 }
-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 createEntryCleanupKey(type, key, source, instanceId, scope) {
+  return JSON.stringify([
+    "entry",
+    type,
+    key,
+    scope ?? null,
+    source,
+    instanceId
+  ]);
 }
-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 getCleanupScope(context) {
+  return context?.cleanupScope || /* @__PURE__ */ new Map();
 }
-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 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 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 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 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;
+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;
     }
-    if (error?.name === "NotAllowedError") {
-      videoElement.muted = true;
-      videoElement.play().then(() => setVideoPlaying(true)).catch(() => {
+    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;
-    }
-    setVideoPlaying(false);
-  });
-}
-function triggerVideoPlaybackDirect(videoElement, nextPlaying, configuredMuted) {
-  if (!videoElement) return;
-  if (nextPlaying) {
-    videoElement.muted = configuredMuted;
-    if (!configuredMuted && videoElement.volume === 0) {
-      videoElement.volume = 0.8;
     }
-    videoElement.play().catch((err) => {
-      if (err?.name === "NotAllowedError") {
-        videoElement.muted = true;
-        videoElement.play().catch(() => {
-        });
-      }
-    });
-  } else {
-    videoElement.pause();
-  }
-}
-function syncVideoMutedDirect(videoElement, nextMuted) {
-  if (!videoElement) return;
-  videoElement.muted = nextMuted;
-  if (!nextMuted && videoElement.volume === 0) {
-    videoElement.volume = 0.8;
   }
+  return registrations;
 }
-function syncVideoLoopDirect(videoElement, nextLoop) {
-  if (!videoElement) return;
-  videoElement.loop = nextLoop;
+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/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) {
+// 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 {
-    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
+    optionsArg: void 0,
+    sourceOrOptions: {
+      ...isObject(optionsArg) ? optionsArg : {},
+      instanceId
+    }
   };
 }
-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(", ")})`;
+function withInstanceIdForUnregister(instanceId, sourceOrOptions) {
+  if (typeof sourceOrOptions === "string") {
+    return { instanceId, source: sourceOrOptions };
   }
-  if (typeof easing === "string" && easing.trim()) {
-    return easing;
+  if (isObject(sourceOrOptions)) {
+    return { ...sourceOrOptions, instanceId };
   }
-  return "ease";
+  return { instanceId };
 }
-function useRequiredContext(context, hookName, providerName) {
-  const value = use(context);
-  if (value === null) {
-    throw new Error(`${hookName} must be used within ${providerName}`);
-  }
-  return value;
+function resolveRegisterArgsWithInstance(instanceId, sourceOrOptions, optionsArg) {
+  const input = withInstanceId(instanceId, sourceOrOptions, optionsArg);
+  return [input.sourceOrOptions, input.optionsArg];
 }
-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;
+var MAX_STABILIZATION_DEPTH = 64;
+function createStableFunctionEntry(fn) {
+  const entry = {
+    current: fn,
+    stable(...args) {
+      return entry.current?.apply(this, args);
     }
-    cacheRef.current = {
-      isEqual,
-      selected,
-      selector,
-      snapshot
-    };
-    return selected;
-  }, [isEqual, selector, store]);
-  return useSyncExternalStore(
-    store.subscribe,
-    getSelectedSnapshot,
-    getSelectedSnapshot
-  );
+  };
+  return entry;
 }
-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);
-    };
+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;
   }
-  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);
-      }
+  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;
     }
-  }
-  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);
-      }
+    scope.usedPaths.add(path);
+    let entry = scope.functionEntries.get(path);
+    if (!entry) {
+      entry = createStableFunctionEntry(value);
+      scope.functionEntries.set(path, entry);
     } else {
-      for (const timer of this.debounceTimers.values()) {
-        clearTimeout(timer);
-      }
-      this.debounceTimers.clear();
+      entry.current = value;
     }
+    return entry.stable;
   }
-  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;
+  if (value && typeof value === "object") {
+    if (seen.has(value)) return value;
+    seen.add(value);
   }
-  getAllEvents() {
-    return [...this.events.keys()];
+  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);
   }
-};
-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");
+  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;
   }
-  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 (typeof value !== "object" || value === null) {
+    return value;
   }
-  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(", ")}`
+  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
     );
-  }
-  return { issues, valid: issues.length === 0 };
+    stabilizedValue[key] = nextValue;
+    if (!canReusePrevious || nextValue !== previousRecord?.[key]) {
+      hasChanged = true;
+    }
+  });
+  return !hasChanged ? previousValue : stabilizedValue;
 }
-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 }
+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;
     },
-    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"
+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 handle;
+  return {
+    ...stamp(actions),
+    batch: (executor) => typeof executor === "function" ? actions.batch((queue) => executor(stamp(queue))) : 0,
+    cleanupScope,
+    instanceId,
+    modules,
+    pathname
+  };
 }
-createNoopHandle();
-var RegistryContext = getOrCreateGlobalContext(
-  "RegistryContext",
-  null
-);
-function useRegistryActions() {
-  return useRequiredContext(
-    RegistryContext,
-    "useRegistryActions",
-    "RegistryProvider"
-  ).actions;
+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 useRegistrySubscription() {
-  return useRequiredContext(
-    RegistryContext,
-    "useRegistrySubscription",
-    "RegistryProvider"
-  ).subscription;
+function defineModule(coreModule) {
+  return Object.freeze({ ...coreModule });
 }
-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]
+createStore(void 0);
+
+// src/kernel/adapters.ts
+function useModuleRegistration(id, value, options) {
+  const coreModule = useInstalledModules().find(
+    (candidate) => candidate.id === id
   );
-  return useSyncExternalStore(subscribeToKey, getValue, getValue);
+  const config = coreModule && options?.enabled !== false && value != null ? { [id]: value } : null;
+  useRegistry(config, pickRegistryMetadata(options));
 }
-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;
+
+// src/theme.tsx
+function defineThemeSpec(id) {
+  return Object.freeze({ id });
 }
-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;
+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. Ensure its theme configuration is provided to <ThemeProvider themes={[...]}> (e.g. in src/config/ or your theme setup).`
+    );
   }
-  if (!hasSlices) return null;
   return {
-    ...payload,
-    registry: {
-      ...metadata,
-      ...isObject(config.registry) ? config.registry : {}
-    }
+    slots: config.slots,
+    styles: config.styles ?? {}
   };
 }
-function useInstalledModules() {
-  return use(ModuleHostContext)?.modules ?? EMPTY_MODULES;
-}
 
-// src/kernel/handlers.ts
-function isPersistentLifecycle(lifecycle) {
-  return lifecycle === REGISTRY_LIFECYCLES.PERSISTENT;
+// src/modules/background/constants.ts
+var DEFAULT_BACKGROUND = Object.freeze({
+  animation: null,
+  className: "",
+  fadeEdges: null,
+  fit: null,
+  image: null,
+  imageStyle: {},
+  isPlaying: false,
+  noiseStyle: {},
+  overlay: false,
+  overlayColor: "var(--black)",
+  overlayOpacity: 0,
+  position: "center",
+  video: null,
+  videoClassName: "",
+  videoElement: null,
+  videoOptions: {
+    autoplay: true,
+    className: "",
+    corp: 0,
+    loop: false,
+    muted: true,
+    playbackRate: 1,
+    width: null
+  },
+  videoStyle: {},
+  width: null
+});
+var DEFAULT_BACKGROUND_COMPUTED = Object.freeze({
+  ...DEFAULT_BACKGROUND,
+  hasBackground: false,
+  isVideo: false,
+  isYouTube: false,
+  posterUrl: null,
+  youtubeVideoId: null
+});
+var INERT_BACKGROUND_ACTIONS = Object.freeze({
+  resetBackground: () => {
+  },
+  setBackground: () => {
+  },
+  setVideoElement: () => {
+  },
+  setVideoMuted: () => {
+  },
+  setVideoPlaying: () => {
+  },
+  toggleLoop: () => {
+  },
+  toggleMute: () => {
+  },
+  toggleVideo: () => {
+  }
+});
+var 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;
 }
-function runRegistrationBatch(context, executor) {
-  return typeof context.batch === "function" ? context.batch(executor) : executor(context);
+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 createEntryCleanupKey(type, key, source, instanceId, scope) {
-  return JSON.stringify([
-    "entry",
-    type,
-    key,
-    scope ?? null,
-    source,
-    instanceId
-  ]);
+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 getCleanupScope(context) {
-  return context?.cleanupScope || /* @__PURE__ */ new Map();
+function isYouTubeUrl(input) {
+  return Boolean(extractYouTubeVideoId(input));
 }
-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 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 scheduleCleanup(scope, cleanupKey, callback, delayMs) {
-  clearCleanupTimer(scope, cleanupKey);
-  const lifecycle = {
-    cancelled: false,
-    timerId: null
+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
   };
-  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
-      });
-    }
+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 registrations;
+  return `https://i.ytimg.com/vi/${encodeURIComponent(videoId)}/maxresdefault.jpg`;
 }
-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);
+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"));
       }
-    );
-  });
-  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);
+    },
+    duration: {
+      configurable: true,
+      get: () => controller.getDuration()
+    },
+    loop: {
+      configurable: true,
+      get: () => controller.getLoop(),
+      set: (value) => {
+        controller.setLoop(Boolean(value));
       }
-    });
-    if (immediate.length === 0) return;
-    runRegistrationBatch(context, (queue) => {
-      immediate.forEach(
-        (registration) => queue.unregister(
-          registration.type,
-          registration.key,
-          owner(registration)
-        )
-      );
-    });
+    },
+    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
   };
 }
-
-// src/kernel/hooks.ts
-function withInstanceId(instanceId, sourceOrOptions, optionsArg) {
-  if (typeof sourceOrOptions === "string") {
-    return {
-      optionsArg: { ...isObject(optionsArg) ? optionsArg : {}, instanceId },
-      sourceOrOptions
-    };
+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 };
   }
-  if (isObject(sourceOrOptions)) {
-    return {
-      optionsArg,
-      sourceOrOptions: { ...sourceOrOptions, instanceId }
-    };
+  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 {
-    optionsArg: void 0,
-    sourceOrOptions: {
-      ...isObject(optionsArg) ? optionsArg : {},
-      instanceId
+    ...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 withInstanceIdForUnregister(instanceId, sourceOrOptions) {
-  if (typeof sourceOrOptions === "string") {
-    return { instanceId, source: sourceOrOptions };
-  }
-  if (isObject(sourceOrOptions)) {
-    return { ...sourceOrOptions, instanceId };
-  }
-  return { instanceId };
+function selectPageBackground(background) {
+  return background ? normalizeBackgroundInput(background) : null;
 }
-function resolveRegisterArgsWithInstance(instanceId, sourceOrOptions, optionsArg) {
-  const input = withInstanceId(instanceId, sourceOrOptions, optionsArg);
-  return [input.sourceOrOptions, input.optionsArg];
+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
+  };
 }
-var MAX_STABILIZATION_DEPTH = 64;
-function createStableFunctionEntry(fn) {
-  const entry = {
-    current: fn,
-    stable(...args) {
-      return entry.current?.apply(this, args);
+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
   };
-  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;
+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)}%`
+    );
   }
-  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)
-  );
+  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 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;
+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;
     }
-    return cloneElement(value, nextProps);
+  } catch {
+    return;
   }
-  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 (!isPlaying) {
+    if (!videoElement.paused) videoElement.pause();
+    return;
   }
-  if (typeof value !== "object" || value === null) {
-    return value;
+  if (videoElement.readyState === 0) {
+    return;
   }
-  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) {
+  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;
     }
-    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;
+    if (error?.name === "NotAllowedError") {
+      videoElement.muted = true;
+      videoElement.play().then(() => setVideoPlaying(true)).catch(() => {
+      });
       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)
-    )
+    setVideoPlaying(false);
   });
-  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);
+function triggerVideoPlaybackDirect(videoElement, nextPlaying, configuredMuted) {
+  if (!videoElement) return;
+  if (nextPlaying) {
+    videoElement.muted = configuredMuted;
+    if (!configuredMuted && videoElement.volume === 0) {
+      videoElement.volume = 0.8;
+    }
+    videoElement.play().catch((err) => {
+      if (err?.name === "NotAllowedError") {
+        videoElement.muted = true;
+        videoElement.play().catch(() => {
+        });
       }
     });
-  };
-  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();
-    }
-  };
+  } else {
+    videoElement.pause();
+  }
 }
-var fallbackStandaloneStore = createPageControllerStore();
-getOrCreateGlobalContext(
-  "PageControllerContext",
-  null
-);
-getOrCreateGlobalContext(
-  "PageControllerStoreContext",
-  fallbackStandaloneStore
-);
-function defineModule(coreModule) {
-  return Object.freeze({ ...coreModule });
+function syncVideoMutedDirect(videoElement, nextMuted) {
+  if (!videoElement) return;
+  videoElement.muted = nextMuted;
+  if (!nextMuted && videoElement.volume === 0) {
+    videoElement.volume = 0.8;
+  }
 }
-function useModule(id) {
-  const coreModule = use(ModuleHostContext)?.byId.get(id);
-  return coreModule?.context ? use(coreModule.context) ?? null : null;
+function syncVideoLoopDirect(videoElement, nextLoop) {
+  if (!videoElement) return;
+  videoElement.loop = nextLoop;
 }
-function definePeer(id, inert) {
-  const useRuntime = () => useModule(id) ?? inert;
+
+// 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 {
-    useRuntime,
-    useActions: () => useRuntime().actions,
-    useState: (selector, isEqual) => useStore(
-      useRuntime().store,
-      selector,
-      isEqual
-    )
+    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
   };
 }
-createStore(void 0);
+function toCssDuration(seconds) {
+  const value = Number(seconds);
+  return `${Math.max(0, Number.isFinite(value) ? value : DURATION_TOKENS.SLOW) * 1e3}ms`;
+}
+function toCssDelay(seconds) {
+  const value = Number(seconds);
+  return `${Math.max(0, Number.isFinite(value) ? value : 0) * 1e3}ms`;
+}
+function toCssEasing(easing) {
+  if (Array.isArray(easing)) {
+    return `cubic-bezier(${easing.join(", ")})`;
+  }
+  if (typeof easing === "string" && easing.trim()) {
+    return easing;
+  }
+  return "ease";
+}
 
-// src/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));
+// src/modules/media/constants.ts
+var DEFAULT_MEDIA_STATE = Object.freeze({
+  audibleElement: null,
+  element: null,
+  hasMedia: false,
+  isPlaying: false,
+  kind: null,
+  loop: false,
+  sourceId: null
+});
+var INERT_MEDIA_ACTIONS = Object.freeze({
+  removeSource: () => {
+  },
+  setMuted: () => {
+  },
+  toggle: () => {
+  },
+  toggleLoop: () => {
+  },
+  upsertSource: () => {
+  }
+});
+var MediaContext = getOrCreateGlobalContext(
+  "MediaContext",
+  null
+);
+createStore(DEFAULT_MEDIA_STATE);
+function useOptionalMediaActions() {
+  const ctx = useContext(MediaContext);
+  return ctx?.actions ?? INERT_MEDIA_ACTIONS;
 }
 var BackgroundContext = getOrCreateGlobalContext(
   "BackgroundContext",
   null
 );
-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);
 }
@@ -1733,7 +1620,7 @@ function BackgroundProvider({ children }) {
       }
     };
   }, [overrideStore]);
-  const media = mediaPeer.useActions();
+  const media = useOptionalMediaActions();
   const { isPlaying, isVideo, videoElement } = state;
   const isLoop = Boolean(state.videoOptions?.loop);
   useEffect(() => {
@@ -1782,6 +1669,21 @@ function useBackground(config, options) {
   const state = useBackgroundState();
   return useMemo(() => ({ ...state, ...actions }), [actions, state]);
 }
+var NOOP_BACKGROUND_STORE = createStore(
+  DEFAULT_BACKGROUND_COMPUTED
+);
+function useOptionalBackgroundState(selector, isEqual) {
+  const ctx = useContext(BackgroundContext);
+  return useStore(
+    ctx?.store ?? NOOP_BACKGROUND_STORE,
+    selector,
+    isEqual
+  );
+}
+function useOptionalBackgroundActions() {
+  const ctx = useContext(BackgroundContext);
+  return ctx?.actions ?? INERT_BACKGROUND_ACTIONS;
+}
 var PLAYER_STATE = { ENDED: 0, PLAYING: 1, PAUSED: 2, BUFFERING: 3 };
 var apiPromise = null;
 function loadYouTubeIframeApi() {
@@ -3190,6 +3092,6 @@ function defineBackground(definition = {}) {
   });
 }
 
-export { BACKGROUND_MEDIA_ID, BackgroundContext, BackgroundOverlay, BackgroundProvider, DEFAULT_BACKGROUND, backgroundModule, backgroundTheme, defineBackground, extractYouTubeVideoId, getYouTubeStreamUrl, getYouTubeThumbnailUrl, isDirectVideoUrl, isYouTubeUrl, parseYouTubeUrlConfig, useBackground, useBackgroundActions, useBackgroundRegistration, useBackgroundState };
+export { BACKGROUND_MEDIA_ID, BackgroundContext, BackgroundOverlay, BackgroundProvider, DEFAULT_BACKGROUND, DEFAULT_BACKGROUND_COMPUTED, INERT_BACKGROUND_ACTIONS, backgroundModule, backgroundTheme, defineBackground, extractYouTubeVideoId, getYouTubeStreamUrl, getYouTubeThumbnailUrl, isDirectVideoUrl, isYouTubeUrl, parseYouTubeUrlConfig, useBackground, useBackgroundActions, useBackgroundRegistration, useBackgroundState, useOptionalBackgroundActions, useOptionalBackgroundState };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map