@omerdlw/base-framework 1.0.0

package/dist/modules/ambient/index.js

@@ -0,0 +1,896 @@
+"use client";
+import { createContext, useState, useMemo, useEffect, use, useContext, useRef, useCallback, useSyncExternalStore } from 'react';
+import 'clsx';
+import 'tailwind-merge';
+import { jsx } from 'react/jsx-runtime';
+import 'next/navigation';
+
+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/ambient/constants.ts
+var AMBIENT_CSS_VARS = Object.freeze({
+  ambientGlow: "--color-ambient-glow",
+  colorPrimary: "--color-primary",
+  primary: "--primary",
+  black: "--black",
+  white: "--white"
+});
+var AMBIENT_DEFAULTS = Object.freeze({
+  primary: "#101010",
+  black: "#0b0b0b"
+});
+var COLOR_EXTRACT_CONFIG = Object.freeze({
+  blackChromaFactor: 0.35,
+  primaryLightness: 0.74,
+  maxBlackChroma: 0.055,
+  blackLightness: 0.15,
+  cacheLimit: 100,
+  maxChroma: 0.28,
+  minChroma: 0.03,
+  sampleSize: 32
+});
+var ambientTheme = defineThemeSpec("ambient");
+
+// src/modules/ambient/utils.ts
+function srgbToLinear(c) {
+  const v = c / 255;
+  return v <= 0.04045 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
+}
+function rgbToOklch(r, g, b) {
+  const lr = srgbToLinear(r);
+  const lg = srgbToLinear(g);
+  const lb = srgbToLinear(b);
+  const l = 0.4122214708 * lr + 0.5363325363 * lg + 0.0514459929 * lb;
+  const m = 0.2119034982 * lr + 0.6806995451 * lg + 0.1073969566 * lb;
+  const s = 0.0883024619 * lr + 0.2817188376 * lg + 0.6299787005 * lb;
+  const l_ = Math.cbrt(l);
+  const m_ = Math.cbrt(m);
+  const s_ = Math.cbrt(s);
+  const L = 0.2104542553 * l_ + 0.793617785 * m_ - 0.0040720468 * s_;
+  const a = 1.9779984951 * l_ - 2.428592205 * m_ + 0.4505937099 * s_;
+  const bOklab = 0.0259040371 * l_ + 0.7827717662 * m_ - 0.808675766 * s_;
+  const C = Math.sqrt(a * a + bOklab * bOklab);
+  const H = (Math.atan2(bOklab, a) * (180 / Math.PI) + 360) % 360;
+  return {
+    c: Math.max(0, Number(C.toFixed(3))),
+    h: Math.max(0, Number(H.toFixed(1))),
+    l: Math.max(0, Math.min(1, Number(L.toFixed(3))))
+  };
+}
+function oklchToString(l, c, h, alpha = 1) {
+  const safeL = Math.max(0, Math.min(1, Number(l) || 0)).toFixed(3);
+  const safeC = Math.max(0, Number(c) || 0).toFixed(3);
+  const safeH = (Number(h) || 0).toFixed(1);
+  const numericAlpha = Number(alpha);
+  if (Number.isFinite(numericAlpha) && numericAlpha < 1 && numericAlpha >= 0) {
+    return `oklch(${safeL} ${safeC} ${safeH} / ${numericAlpha})`;
+  }
+  return `oklch(${safeL} ${safeC} ${safeH})`;
+}
+function sampleImageData(imageData) {
+  const data = imageData.data;
+  const len = data.length;
+  const numBins = 24;
+  const binAngle = 360 / numBins;
+  const bins = Array.from({ length: numBins }, () => ({
+    count: 0,
+    sumC: 0,
+    sumCos: 0,
+    sumL: 0,
+    sumSin: 0
+  }));
+  let neutralCount = 0;
+  let neutralSumL = 0;
+  let chromaticCount = 0;
+  for (let i = 0; i < len; i += 4) {
+    const alpha = data[i + 3];
+    if (alpha < 128) continue;
+    const r = data[i];
+    const g = data[i + 1];
+    const b = data[i + 2];
+    const oklch = rgbToOklch(r, g, b);
+    if (oklch.l < 0.04 || oklch.l > 0.96 || oklch.c < 0.02) {
+      neutralCount++;
+      neutralSumL += oklch.l;
+      continue;
+    }
+    const binIndex = Math.floor(oklch.h / binAngle) % numBins;
+    const rad = oklch.h * (Math.PI / 180);
+    const bin = bins[binIndex];
+    bin.count++;
+    bin.sumL += oklch.l;
+    bin.sumC += oklch.c;
+    bin.sumCos += Math.cos(rad);
+    bin.sumSin += Math.sin(rad);
+    chromaticCount++;
+  }
+  if (chromaticCount === 0) {
+    const avgL2 = neutralCount > 0 ? neutralSumL / neutralCount : 0.55;
+    return { c: 0.03, h: 252, l: avgL2 };
+  }
+  let bestIndex = 0;
+  let maxWindowCount = -1;
+  for (let i = 0; i < numBins; i++) {
+    const prev2 = bins[(i - 1 + numBins) % numBins];
+    const curr2 = bins[i];
+    const next2 = bins[(i + 1) % numBins];
+    const windowCount = prev2.count * 0.5 + curr2.count + next2.count * 0.5;
+    if (windowCount > maxWindowCount) {
+      maxWindowCount = windowCount;
+      bestIndex = i;
+    }
+  }
+  const prev = bins[(bestIndex - 1 + numBins) % numBins];
+  const curr = bins[bestIndex];
+  const next = bins[(bestIndex + 1) % numBins];
+  const totalCount = prev.count + curr.count + next.count;
+  if (totalCount === 0) {
+    return { c: 0.19, h: 252, l: 0.55 };
+  }
+  const avgL = (prev.sumL + curr.sumL + next.sumL) / totalCount;
+  const avgC = (prev.sumC + curr.sumC + next.sumC) / totalCount;
+  const avgSin = prev.sumSin + curr.sumSin + next.sumSin;
+  const avgCos = prev.sumCos + curr.sumCos + next.sumCos;
+  const avgH = (Math.atan2(avgSin, avgCos) * (180 / Math.PI) + 360) % 360;
+  return {
+    c: Number(avgC.toFixed(3)),
+    h: Number(avgH.toFixed(1)),
+    l: Number(avgL.toFixed(3))
+  };
+}
+function createDefaultPalette(fallback) {
+  return {
+    black: fallback?.black || AMBIENT_DEFAULTS.black,
+    primary: fallback?.primary || AMBIENT_DEFAULTS.primary
+  };
+}
+function derivePalette(sampled) {
+  const {
+    blackChromaFactor,
+    blackLightness,
+    maxBlackChroma,
+    maxChroma,
+    minChroma,
+    primaryLightness
+  } = COLOR_EXTRACT_CONFIG;
+  const chroma = Math.max(minChroma, Math.min(maxChroma, sampled.c));
+  const blackChroma = Math.min(
+    maxBlackChroma,
+    Math.max(0.025, chroma * blackChromaFactor)
+  );
+  const primaryChroma = Math.max(
+    0.15,
+    Math.min(0.24, Math.max(chroma * 1.15, 0.18))
+  );
+  return {
+    black: oklchToString(blackLightness, blackChroma, sampled.h),
+    primary: oklchToString(primaryLightness, primaryChroma, sampled.h)
+  };
+}
+var paletteCache = /* @__PURE__ */ new Map();
+var inFlight = /* @__PURE__ */ new Map();
+async function fetchObjectUrl(src) {
+  if (typeof fetch !== "function" || !src.startsWith("http")) return null;
+  const corsUrl = src.includes("cors=") ? src : `${src}${src.includes("?") ? "&" : "?"}cors=1`;
+  const attempts = [
+    [corsUrl, { mode: "cors" }],
+    [`/api/ambient/proxy?url=${encodeURIComponent(src)}`]
+  ];
+  for (const [url, init] of attempts) {
+    try {
+      const response = await fetch(url, init);
+      if (response.ok) return URL.createObjectURL(await response.blob());
+    } catch {
+    }
+  }
+  return null;
+}
+function loadImage(url, crossOrigin) {
+  return new Promise((resolve) => {
+    const image = new Image();
+    if (crossOrigin) image.crossOrigin = "anonymous";
+    image.onload = () => resolve(image);
+    image.onerror = () => resolve(null);
+    image.src = url;
+  });
+}
+function readPalette(image) {
+  const size = COLOR_EXTRACT_CONFIG.sampleSize;
+  const canvas = document.createElement("canvas");
+  canvas.width = size;
+  canvas.height = size;
+  const context = canvas.getContext("2d", { willReadFrequently: true });
+  if (!context) return null;
+  context.drawImage(image, 0, 0, size, size);
+  return derivePalette(sampleImageData(context.getImageData(0, 0, size, size)));
+}
+async function extractPalette(src) {
+  const objectUrl = await fetchObjectUrl(src);
+  try {
+    const image = await loadImage(objectUrl ?? src, !objectUrl);
+    return image ? readPalette(image) : null;
+  } catch {
+    return null;
+  } finally {
+    if (objectUrl) URL.revokeObjectURL(objectUrl);
+  }
+}
+function cachePalette(src, palette) {
+  if (paletteCache.size >= COLOR_EXTRACT_CONFIG.cacheLimit) {
+    const oldest = paletteCache.keys().next().value;
+    if (oldest) paletteCache.delete(oldest);
+  }
+  paletteCache.set(src, palette);
+}
+async function extractPaletteFromImage(imageSource, options = {}) {
+  const fallback = createDefaultPalette(
+    options.initialPalette || options.fallbackPalette
+  );
+  const src = typeof imageSource === "string" ? imageSource : imageSource?.src;
+  if (!src || typeof window === "undefined") return fallback;
+  const cached = paletteCache.get(src);
+  if (cached) return cached;
+  let pending = inFlight.get(src);
+  if (!pending) {
+    pending = extractPalette(src).then((palette) => {
+      if (palette) cachePalette(src, palette);
+      return palette;
+    }).finally(() => inFlight.delete(src));
+    inFlight.set(src, pending);
+  }
+  return await pending ?? fallback;
+}
+function resolveTargetElement(target) {
+  if (typeof document === "undefined") return null;
+  if (!target) return document.documentElement;
+  if (typeof target === "string") {
+    return document.querySelector(target);
+  }
+  return "current" in target ? target.current : target;
+}
+function normalizeColorMap(colors) {
+  const cssVars = AMBIENT_CSS_VARS;
+  const result = {};
+  for (const [key, value] of Object.entries(colors)) {
+    if (!value) continue;
+    const name = cssVars[key] || (key.startsWith("--") ? key : cssVars[key.toLowerCase()] || `--color-${key}`);
+    result[name] = value;
+  }
+  return result;
+}
+function applyScopedCssVariables(element, varMap) {
+  const previous = /* @__PURE__ */ new Map();
+  for (const [name, value] of Object.entries(varMap)) {
+    if (!name || !value) continue;
+    previous.set(name, {
+      priority: element.style.getPropertyPriority(name),
+      value: element.style.getPropertyValue(name)
+    });
+    element.style.setProperty(name, value);
+  }
+  return () => {
+    for (const [name, { priority, value }] of previous) {
+      if (value) element.style.setProperty(name, value, priority);
+      else element.style.removeProperty(name);
+    }
+  };
+}
+function resolveAmbientVarMap({
+  colors = null,
+  extractedBlack = "",
+  extractedPrimary = "",
+  image = null,
+  tintGlobals = true
+}) {
+  const varMap = {};
+  if (image) {
+    if (extractedPrimary) {
+      varMap[AMBIENT_CSS_VARS.primary] = extractedPrimary;
+      varMap[AMBIENT_CSS_VARS.ambientGlow] = extractedPrimary;
+      if (tintGlobals) varMap[AMBIENT_CSS_VARS.colorPrimary] = extractedPrimary;
+    }
+    if (extractedBlack) varMap[AMBIENT_CSS_VARS.black] = extractedBlack;
+  }
+  if (colors) Object.assign(varMap, normalizeColorMap(colors));
+  return varMap;
+}
+function resolvePageAmbientTheme(slice, posterUrl) {
+  const ambient = slice?.ambient;
+  const banner = slice?.banner ?? null;
+  const defaultImage = banner ?? posterUrl;
+  if (ambient === false) return null;
+  if (ambient === true || typeof ambient === "string") {
+    return {
+      image: typeof ambient === "string" ? ambient : defaultImage,
+      tintGlobals: true
+    };
+  }
+  if (ambient && typeof ambient === "object") {
+    return { image: ambient.image ?? defaultImage, ...ambient };
+  }
+  if (banner && !posterUrl) return { image: banner, tintGlobals: true };
+  return null;
+}
+
+// src/kernel/constants.ts
+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_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
+});
+new Set(
+  Object.values(REGISTRY_LIFECYCLES)
+);
+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/utils/object.ts
+function shallowEqual(a, b) {
+  if (Object.is(a, b)) return true;
+  if (typeof a !== "object" || a === null || typeof b !== "object" || b === null) {
+    return false;
+  }
+  const keysA = Object.keys(a);
+  const keysB = Object.keys(b);
+  if (keysA.length !== keysB.length) return false;
+  for (const key of keysA) {
+    if (!Object.prototype.hasOwnProperty.call(b, key) || !Object.is(
+      a[key],
+      b[key]
+    )) {
+      return false;
+    }
+  }
+  return true;
+}
+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 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 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());
+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();
+getOrCreateGlobalContext(
+  "RegistryContext",
+  null
+);
+var ModuleHostContext = getOrCreateGlobalContext("ModuleHostContext", null);
+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;
+}
+var NO_MODULE_STORE = createStore(void 0);
+function useModuleState(id, selector, fallback, isEqual = Object.is) {
+  const runtime = useModule(id);
+  return useStore(
+    runtime?.store ?? NO_MODULE_STORE,
+    (state) => runtime ? selector(state) : fallback,
+    isEqual
+  );
+}
+var AmbientContext = getOrCreateGlobalContext("AmbientContext", null);
+function useStableObject(value) {
+  const [stable, setStable] = useState(value);
+  if (!shallowEqual(stable, value)) {
+    setStable(value);
+  }
+  return stable;
+}
+function AmbientProvider({
+  children,
+  initialPalette = null
+}) {
+  const [store] = useState(
+    () => createStore(
+      { isExtracting: false, palette: initialPalette || AMBIENT_DEFAULTS },
+      { freezeSnapshots: false }
+    )
+  );
+  const value = useMemo(
+    () => ({
+      actions: {
+        setIsExtracting: (next) => store.publish((state) => {
+          const isExtracting = typeof next === "function" ? next(state.isExtracting) : next;
+          return isExtracting === state.isExtracting ? state : { ...state, isExtracting };
+        }),
+        setPalette: (next) => store.publish((state) => {
+          const palette = typeof next === "function" ? next(state.palette) : next;
+          return palette === state.palette ? state : { ...state, palette };
+        })
+      },
+      store
+    }),
+    [store]
+  );
+  return /* @__PURE__ */ jsx(AmbientContext, { value, children });
+}
+function useAmbientColor(imageSource, options = null) {
+  const stableOptions = useStableObject(options);
+  const initialPalette = useStableObject(
+    options?.initialPalette || options?.fallbackPalette || null
+  );
+  const [extractedData, setExtractedData] = useState(
+    () => initialPalette
+  );
+  const srcKey = typeof imageSource === "string" ? imageSource : imageSource?.src;
+  const isExtracting = Boolean(
+    imageSource && (!extractedData || extractedData.source !== srcKey)
+  );
+  useEffect(() => {
+    if (!imageSource) return;
+    let active = true;
+    void extractPaletteFromImage(imageSource, {
+      fallbackPalette: initialPalette,
+      ...stableOptions || {}
+    }).then((extracted) => {
+      if (active) {
+        setExtractedData({ ...extracted, source: srcKey });
+      }
+    }).catch(() => {
+      if (active) {
+        setExtractedData({
+          black: initialPalette?.black || AMBIENT_DEFAULTS.black,
+          primary: initialPalette?.primary || AMBIENT_DEFAULTS.primary,
+          source: srcKey
+        });
+      }
+    });
+    return () => {
+      active = false;
+    };
+  }, [imageSource, initialPalette, srcKey, stableOptions]);
+  const palette = imageSource && extractedData && extractedData.source === srcKey ? extractedData : initialPalette || AMBIENT_DEFAULTS;
+  return { isExtracting, palette };
+}
+function useAmbientTheme(config = null) {
+  const ambientActions = use(AmbientContext)?.actions ?? null;
+  const normalizedConfig = typeof config === "string" ? { image: config } : config || {};
+  const {
+    colors = null,
+    image = null,
+    initialPalette = null,
+    options = null,
+    scope = null,
+    tintGlobals = true,
+    transition = true
+  } = normalizedConfig;
+  const stableInitialPalette = useStableObject(initialPalette);
+  const stableOptions = useStableObject(options);
+  const stableColors = useStableObject(colors);
+  const resolvedOptions = useMemo(
+    () => ({
+      ...stableOptions || {},
+      ...stableInitialPalette ? { initialPalette: stableInitialPalette } : {}
+    }),
+    [stableInitialPalette, stableOptions]
+  );
+  const { palette: extractedPalette, isExtracting } = useAmbientColor(
+    image,
+    resolvedOptions
+  );
+  const hasActiveConfig = Boolean(image || stableColors);
+  useEffect(() => {
+    if (!hasActiveConfig || !ambientActions) return;
+    ambientActions.setIsExtracting(isExtracting);
+    ambientActions.setPalette(
+      (prev) => shallowEqual(prev, extractedPalette) ? prev : extractedPalette
+    );
+  }, [ambientActions, extractedPalette, hasActiveConfig, isExtracting]);
+  const extractedPrimary = extractedPalette?.primary || "";
+  const extractedBlack = extractedPalette?.black || "";
+  const transitionClasses = useTheme(ambientTheme).slots.transition.split(/\s+/).filter(Boolean);
+  const transitionKey = transitionClasses.join(" ");
+  const resolvedVarMap = useMemo(
+    () => resolveAmbientVarMap({
+      colors: stableColors,
+      extractedBlack,
+      extractedPrimary,
+      image,
+      tintGlobals
+    }),
+    [extractedBlack, extractedPrimary, image, stableColors, tintGlobals]
+  );
+  useEffect(() => {
+    if (Object.keys(resolvedVarMap).length === 0) return;
+    const targetEl = resolveTargetElement(scope);
+    if (!targetEl) return;
+    if (transition) {
+      targetEl.classList.add(...transitionKey.split(" ").filter(Boolean));
+    }
+    const restoreVariables = applyScopedCssVariables(targetEl, resolvedVarMap);
+    return () => {
+      restoreVariables();
+      if (transition && scope) {
+        targetEl.classList.remove(...transitionKey.split(" ").filter(Boolean));
+      }
+    };
+  }, [resolvedVarMap, scope, transition, transitionKey]);
+  return { isExtracting, palette: extractedPalette };
+}
+function useAmbient(configOrImage) {
+  const { actions, store } = useRequiredContext(
+    AmbientContext,
+    "useAmbient",
+    "AmbientProvider"
+  );
+  const shared = useStore(store);
+  const ctx = useMemo(
+    () => ({ ...shared, ...actions }),
+    [actions, shared]
+  );
+  const { isExtracting, palette } = useAmbientTheme(configOrImage ?? null);
+  const themeState = useMemo(
+    () => ({ isExtracting, palette }),
+    [isExtracting, palette]
+  );
+  return useMemo(
+    () => configOrImage ? { ...ctx, ...themeState } : ctx,
+    [configOrImage, ctx, themeState]
+  );
+}
+
+// src/modules/ambient/module.tsx
+var firstString = (...values) => values.find((value) => typeof value === "string" && value) ?? null;
+function selectPageAmbient(config) {
+  return {
+    ambient: config.ambient,
+    banner: firstString(config.dock?.banner, config.dock?.bannerUrl)
+  };
+}
+function useAmbientPage(slice, page) {
+  const posterUrl = useModuleState(
+    "background",
+    (background) => background.posterUrl,
+    null
+  );
+  const theme = useMemo(
+    () => resolvePageAmbientTheme(slice, posterUrl),
+    [posterUrl, slice]
+  );
+  useAmbientTheme(theme);
+  return useMemo(
+    () => ({ set: (ambient) => page.set({ ambient }) }),
+    [page]
+  );
+}
+var ambientModule = defineModule({
+  id: "ambient",
+  context: AmbientContext,
+  Provider: AmbientProvider,
+  uses: ["background"],
+  page: {
+    select: selectPageAmbient,
+    use: useAmbientPage
+  }
+});
+function resolveValue(value, props) {
+  return typeof value === "function" ? value(props) : value;
+}
+function defineAmbient(definition = {}) {
+  const { defaultProps, id = "ambient-theme", ...config } = definition;
+  const create = (props = {}, { id: overrideId, ...overrides } = {}) => {
+    const mergedProps = { ...defaultProps, ...props };
+    const merged = { ...config, ...overrides };
+    return {
+      ...merged,
+      colors: resolveValue(merged.colors ?? null, mergedProps) ?? null,
+      id: overrideId ?? id,
+      image: resolveValue(merged.image ?? null, mergedProps),
+      initialPalette: merged.initialPalette ?? null,
+      options: { ...config.options, ...overrides.options },
+      props: mergedProps,
+      scope: merged.scope ?? null,
+      transition: merged.transition ?? true
+    };
+  };
+  return Object.freeze({
+    config: definition,
+    create,
+    id,
+    use: function useDefinedAmbient(props, overrides) {
+      return useAmbientTheme(create(props, overrides));
+    }
+  });
+}
+
+export { AMBIENT_CSS_VARS, AMBIENT_DEFAULTS, AmbientContext, AmbientProvider, COLOR_EXTRACT_CONFIG, ambientModule, ambientTheme, defineAmbient, extractPaletteFromImage, oklchToString, resolvePageAmbientTheme, rgbToOklch, useAmbient, useAmbientColor, useAmbientTheme };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map