@omerdlw/base-framework 1.0.6 → 2.0.1

package/dist/chunk-QXR55VVS.js

@@ -0,0 +1,1139 @@
+import { useOptionalBackgroundState } from './chunk-CGHZSSFR.js';
+import { defineThemeSpec, useTheme } from './chunk-7TAVYJ3A.js';
+import { getOrCreateGlobalContext, defineModule } from './chunk-GF7TUX5I.js';
+import { createStore, shallowEqual, useRequiredContext, useStore } from './chunk-TV3WEF5G.js';
+import { useMemo, useState, use, useEffect, useRef } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var AmbientContext = getOrCreateGlobalContext("AmbientContext", null);
+function AmbientProvider({
+  children,
+  initialPalette = null
+}) {
+  const [store] = useState(
+    () => createStore(
+      { isExtracting: false, palette: initialPalette },
+      { 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 });
+}
+
+// src/modules/ambient/constants.ts
+var ambientTheme = defineThemeSpec("ambient");
+
+// src/modules/ambient/oklab.ts
+var DEG = Math.PI / 180;
+var LINEAR_LUT = new Float32Array(256);
+for (let i = 0; i < 256; i++) {
+  const v = i / 255;
+  LINEAR_LUT[i] = v <= 0.04045 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
+}
+function clamp(value, min, max) {
+  return Math.max(min, Math.min(max, value));
+}
+function smoothstep(edge0, edge1, value) {
+  const t = clamp((value - edge0) / (edge1 - edge0), 0, 1);
+  return t * t * (3 - 2 * t);
+}
+function srgbToOklab(r, g, b) {
+  const lr = LINEAR_LUT[r & 255];
+  const lg = LINEAR_LUT[g & 255];
+  const lb = LINEAR_LUT[b & 255];
+  const l = Math.cbrt(0.4122214708 * lr + 0.5363325363 * lg + 0.0514459929 * lb);
+  const m = Math.cbrt(0.2119034982 * lr + 0.6806995451 * lg + 0.1073969566 * lb);
+  const s = Math.cbrt(0.0883024619 * lr + 0.2817188376 * lg + 0.6299787005 * lb);
+  return [
+    0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s,
+    1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s,
+    0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s
+  ];
+}
+function oklchToLinearSrgb(l, c, h) {
+  const a = c * Math.cos(h * DEG);
+  const b = c * Math.sin(h * DEG);
+  const l_ = (l + 0.3963377774 * a + 0.2158037573 * b) ** 3;
+  const m_ = (l - 0.1055613458 * a - 0.0638541728 * b) ** 3;
+  const s_ = (l - 0.0894841775 * a - 1.291485548 * b) ** 3;
+  return [
+    4.0767416621 * l_ - 3.3077115913 * m_ + 0.2309699292 * s_,
+    -1.2684380046 * l_ + 2.6097574011 * m_ - 0.3413193965 * s_,
+    -0.0041960863 * l_ - 0.7034186147 * m_ + 1.707614701 * s_
+  ];
+}
+function labToLch([l, a, b]) {
+  const c = Math.sqrt(a * a + b * b);
+  const h = c < 1e-6 ? 0 : (Math.atan2(b, a) / DEG + 360) % 360;
+  return { c, h, l };
+}
+var inGamut = (rgb) => rgb.every((v) => v >= -1e-5 && v <= 1 + 1e-5);
+function maxChroma(l, h) {
+  if (l <= 0 || l >= 1) return 0;
+  let low = 0;
+  let high = 0.4;
+  for (let step = 0; step < 18; step++) {
+    const middle = (low + high) / 2;
+    if (inGamut(oklchToLinearSrgb(l, middle, h))) low = middle;
+    else high = middle;
+  }
+  return low;
+}
+function hueDistance(a, b) {
+  const d = Math.abs(a - b) % 360;
+  return d > 180 ? 360 - d : d;
+}
+function luminance({ c, h, l }) {
+  const [r, g, b] = oklchToLinearSrgb(l, c, h).map((v) => clamp(v, 0, 1));
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+function contrastRatio(a, b) {
+  const la = luminance(a);
+  const lb = luminance(b);
+  return (Math.max(la, lb) + 0.05) / (Math.min(la, lb) + 0.05);
+}
+var round = (value, digits) => {
+  const factor = 10 ** digits;
+  return Math.round(value * factor) / factor;
+};
+function formatOklch({ c, h, l }) {
+  const chroma = c < 5e-4 ? 0 : c;
+  return `oklch(${round(clamp(l, 0, 1), 3).toFixed(3)} ${round(chroma, 3).toFixed(3)} ${round(chroma === 0 ? 0 : h, 1).toFixed(1)})`;
+}
+function toneOf(h, l, rel, cap = 0.3) {
+  const room = maxChroma(l, h) * 0.96;
+  return { c: Math.min(cap, clamp(rel, 0, 1) * room), h, l };
+}
+function onColorFor(background, minContrast = 4.5) {
+  const light = (l) => toneOf(background.h, l, 0.12, 0.012);
+  const dark = (l) => toneOf(background.h, l, 0.35, 0.03);
+  const towardLight = contrastRatio(light(0.985), background);
+  const towardDark = contrastRatio(dark(0.18), background);
+  const useLight = towardLight >= minContrast || towardLight >= towardDark;
+  for (let step = 0; step <= 12; step++) {
+    const candidate = useLight ? light(Math.min(1, 0.985 + step * 25e-4)) : dark(Math.max(0, 0.18 - step * 0.015));
+    if (contrastRatio(candidate, background) >= minContrast) return candidate;
+  }
+  return useLight ? { c: 0, h: 0, l: 1 } : { c: 0, h: 0, l: 0 };
+}
+
+// src/modules/ambient/settings.ts
+var AMBIENT_TONES = Object.freeze([
+  10,
+  15,
+  20,
+  30,
+  40,
+  50,
+  60,
+  70,
+  80,
+  90,
+  95
+]);
+var AMBIENT_ROLES = Object.freeze([
+  "dominant",
+  "vibrant",
+  "muted",
+  "accent"
+]);
+var AMBIENT_REGIONS = Object.freeze([
+  "top",
+  "bottom",
+  "left",
+  "right",
+  "center"
+]);
+var DEFAULT_ANALYSIS = Object.freeze({
+  centerWeight: 0.5,
+  clusters: 7,
+  letterbox: true,
+  minContrast: 4.5,
+  minHueDistance: 40,
+  sampleSize: 128,
+  shadowLightness: 0.16
+});
+var DEFAULT_CSS_VAR_NAMES = Object.freeze({
+  on: "--ambient-on-{role}",
+  region: "--ambient-{region}",
+  role: "--ambient-{role}",
+  shadow: "--ambient-shadow",
+  tone: "--ambient-{role}-{tone}"
+});
+var DEFAULT_PROXY = "/api/ambient/proxy?url=";
+var createDefaults = () => ({
+  analysis: { ...DEFAULT_ANALYSIS },
+  cacheLimit: 100,
+  cssVars: { ...DEFAULT_CSS_VAR_NAMES, tones: AMBIENT_TONES },
+  proxy: DEFAULT_PROXY,
+  strategy: "auto",
+  worker: null
+});
+var SETTINGS_KEY = /* @__PURE__ */ Symbol.for("@omerdlw/base-framework/ambient/settings");
+var scope = globalThis;
+function getAmbientSettings() {
+  return scope[SETTINGS_KEY] ??= createDefaults();
+}
+function mergeAmbientSettings(base, input) {
+  return {
+    analysis: { ...base.analysis, ...input.analysis },
+    cacheLimit: input.cacheLimit ?? base.cacheLimit,
+    cssVars: { ...base.cssVars, ...input.cssVars },
+    proxy: input.proxy === void 0 ? base.proxy : input.proxy,
+    strategy: input.strategy ?? base.strategy,
+    worker: input.worker === void 0 ? base.worker : input.worker
+  };
+}
+function configureAmbient(input) {
+  const previous = getAmbientSettings();
+  const next = mergeAmbientSettings(previous, input);
+  scope[SETTINGS_KEY] = next;
+  return () => {
+    if (scope[SETTINGS_KEY] === next) scope[SETTINGS_KEY] = previous;
+  };
+}
+function resolveAnalysis(overrides) {
+  return { ...getAmbientSettings().analysis, ...overrides };
+}
+function resolveProxyUrl(proxy, src) {
+  if (!proxy || !/^https?:\/\//i.test(src)) return null;
+  if (typeof proxy === "function") return proxy(src);
+  const encoded = encodeURIComponent(src);
+  return proxy.includes("{url}") ? proxy.replace("{url}", encoded) : `${proxy}${encoded}`;
+}
+
+// src/modules/ambient/quantize.ts
+function kmeans(points, weights, requested, { iterations = 16, lightnessWeight = 0.45 } = {}) {
+  const n = weights.length;
+  const assignment = new Int32Array(n);
+  const k = Math.max(0, Math.min(requested, n));
+  const centroids = new Float64Array(k * 3);
+  if (k === 0) return { assignment, centroids, k };
+  const distance = (i, j) => {
+    const dl = points[i * 3] - centroids[j * 3];
+    const da = points[i * 3 + 1] - centroids[j * 3 + 1];
+    const db = points[i * 3 + 2] - centroids[j * 3 + 2];
+    return lightnessWeight * dl * dl + da * da + db * db;
+  };
+  let first = 0;
+  for (let i = 1; i < n; i++) if (weights[i] > weights[first]) first = i;
+  centroids.set(points.subarray(first * 3, first * 3 + 3), 0);
+  const nearest = new Float64Array(n).fill(Infinity);
+  let found = 1;
+  for (; found < k; found++) {
+    let best = -1;
+    let bestScore = 0;
+    for (let i = 0; i < n; i++) {
+      const d = distance(i, found - 1);
+      if (d < nearest[i]) nearest[i] = d;
+      const score = weights[i] * nearest[i];
+      if (score > bestScore) {
+        bestScore = score;
+        best = i;
+      }
+    }
+    if (best < 0) break;
+    centroids.set(points.subarray(best * 3, best * 3 + 3), found * 3);
+  }
+  const sums = new Float64Array(found * 4);
+  for (let round2 = 0; round2 < iterations; round2++) {
+    let moved = round2 === 0;
+    for (let i = 0; i < n; i++) {
+      let best = 0;
+      let bestDistance = Infinity;
+      for (let j = 0; j < found; j++) {
+        const d = distance(i, j);
+        if (d < bestDistance) {
+          bestDistance = d;
+          best = j;
+        }
+      }
+      if (assignment[i] !== best) {
+        assignment[i] = best;
+        moved = true;
+      }
+    }
+    if (!moved) break;
+    sums.fill(0);
+    for (let i = 0; i < n; i++) {
+      const j = assignment[i] * 4;
+      const w = weights[i];
+      sums[j] += points[i * 3] * w;
+      sums[j + 1] += points[i * 3 + 1] * w;
+      sums[j + 2] += points[i * 3 + 2] * w;
+      sums[j + 3] += w;
+    }
+    for (let j = 0; j < found; j++) {
+      const w = sums[j * 4 + 3];
+      if (w <= 0) continue;
+      centroids[j * 3] = sums[j * 4] / w;
+      centroids[j * 3 + 1] = sums[j * 4 + 1] / w;
+      centroids[j * 3 + 2] = sums[j * 4 + 2] / w;
+    }
+  }
+  return { assignment, centroids: centroids.slice(0, found * 3), k: found };
+}
+
+// src/modules/ambient/analyze.ts
+var MIN_CHROMA = 0.022;
+var MIN_PRESENCE = 0.03;
+var MIN_POPULATION = 4e-3;
+var REGION_BITS = {
+  top: 1,
+  bottom: 2,
+  left: 4,
+  right: 8,
+  center: 16
+};
+var lightnessAt = (data, index) => srgbToOklab(data[index], data[index + 1], data[index + 2])[0];
+function findContentBounds({ data, height, width }) {
+  const isBar = (count, at) => {
+    let sum = 0;
+    let max = 0;
+    let seen = 0;
+    for (let step = 0; step < count; step++) {
+      const index = at(step);
+      if (data[index + 3] < 128) continue;
+      const l = lightnessAt(data, index);
+      sum += l;
+      if (l > max) max = l;
+      seen++;
+    }
+    return seen > 0 && sum / seen < 0.12 && max < 0.2;
+  };
+  const row = (y) => isBar(width, (x) => (y * width + x) * 4);
+  const maxRows = Math.floor(height * 0.22);
+  const maxColumns = Math.floor(width * 0.22);
+  let top = 0;
+  while (top < maxRows && row(top)) top++;
+  let bottom = height;
+  while (height - bottom < maxRows && bottom - 1 > top && row(bottom - 1)) bottom--;
+  const column = (x) => isBar(bottom - top, (step) => ((top + step) * width + x) * 4);
+  let left = 0;
+  while (left < maxColumns && column(left)) left++;
+  let right = width;
+  while (width - right < maxColumns && right - 1 > left && column(right - 1)) right--;
+  return { bottom, left, right, top };
+}
+var reliability = (l) => smoothstep(0.1, 0.28, l) * (1 - smoothstep(0.9, 0.98, l));
+var colorfulness = (c) => smoothstep(MIN_CHROMA, 0.06, c);
+var isChromatic = (cluster) => cluster.c >= MIN_CHROMA && cluster.rely > 0;
+function pickBest(items, score) {
+  let best = null;
+  let bestScore = 0;
+  for (const item of items) {
+    const value = score(item);
+    if (value > bestScore) {
+      bestScore = value;
+      best = item;
+    }
+  }
+  return best;
+}
+var round3 = (value) => Math.round(value * 1e3) / 1e3;
+function buildSwatch(source, { cap, max, min, rel }, fallback, fromImage, minContrast) {
+  const h = source?.h ?? fallback.h;
+  const l = clamp(source?.l ?? fallback.l, min, max);
+  const tone = toneOf(h, l, rel, cap);
+  const ramp = {};
+  for (const step of AMBIENT_TONES) {
+    ramp[step] = formatOklch(toneOf(h, step / 100, rel, cap));
+  }
+  return {
+    c: round3(tone.c),
+    color: formatOklch(tone),
+    fromImage,
+    h: Math.round(h * 10) / 10,
+    l: round3(tone.l),
+    on: formatOklch(onColorFor(tone, minContrast)),
+    population: round3(source?.pop ?? 0),
+    ramp
+  };
+}
+var lift = (rel, base, gain, ceiling) => clamp(base + gain * rel, 0, ceiling);
+function clusterAmbientPixels(pixels, options) {
+  const { data, width, height } = pixels;
+  const bounds = options.letterbox ? findContentBounds(pixels) : { bottom: height, left: 0, right: width, top: 0 };
+  const boxWidth = Math.max(1, bounds.right - bounds.left);
+  const boxHeight = Math.max(1, bounds.bottom - bounds.top);
+  const binOf = new Int32Array(32768).fill(-1);
+  const binSums = [];
+  const pixelBins = new Int32Array(boxWidth * boxHeight).fill(-1);
+  const pixelRegions = new Uint8Array(boxWidth * boxHeight);
+  const sigma2 = 2 * 0.35 * 0.35;
+  let total = 0;
+  let sumL = 0;
+  for (let y = bounds.top; y < bounds.bottom; y++) {
+    const v = (y - bounds.top + 0.5) / boxHeight;
+    for (let x = bounds.left; x < bounds.right; x++) {
+      const index = (y * width + x) * 4;
+      if (data[index + 3] < 128) continue;
+      const r = data[index];
+      const g = data[index + 1];
+      const b = data[index + 2];
+      const [l, a, bb] = srgbToOklab(r, g, b);
+      const u = (x - bounds.left + 0.5) / boxWidth;
+      const du = (u - 0.5) * 2;
+      const dv = (v - 0.5) * 2;
+      const weight = 1 - options.centerWeight + 2 * options.centerWeight * Math.exp(-(du * du + dv * dv) / sigma2);
+      const key = r >> 3 << 10 | g >> 3 << 5 | b >> 3;
+      let bin = binOf[key];
+      if (bin < 0) {
+        bin = binSums.length / 4;
+        binOf[key] = bin;
+        binSums.push(0, 0, 0, 0);
+      }
+      binSums[bin * 4] += l * weight;
+      binSums[bin * 4 + 1] += a * weight;
+      binSums[bin * 4 + 2] += bb * weight;
+      binSums[bin * 4 + 3] += weight;
+      total += weight;
+      sumL += l * weight;
+      const local = (y - bounds.top) * boxWidth + (x - bounds.left);
+      pixelBins[local] = bin;
+      pixelRegions[local] = (v < 1 / 3 ? REGION_BITS.top : 0) | (v > 2 / 3 ? REGION_BITS.bottom : 0) | (u < 1 / 3 ? REGION_BITS.left : 0) | (u > 2 / 3 ? REGION_BITS.right : 0) | (Math.abs(u - 0.5) < 0.25 && Math.abs(v - 0.5) < 0.25 ? REGION_BITS.center : 0);
+    }
+  }
+  const meanL = total > 0 ? sumL / total : 0.5;
+  const bins = binSums.length / 4;
+  const groups = [[], []];
+  for (let i = 0; i < bins; i++) {
+    const w = binSums[i * 4 + 3];
+    const a = binSums[i * 4 + 1] / w;
+    const b = binSums[i * 4 + 2] / w;
+    const coloured = Math.sqrt(a * a + b * b) >= MIN_CHROMA && binSums[i * 4] / w >= 0.06;
+    groups[coloured ? 0 : 1].push(i);
+  }
+  const requested = clamp(Math.round(options.clusters), 2, 16);
+  const greyClusters = groups[0].length === 0 ? requested : groups[1].length === 0 ? 0 : requested >= 8 ? 3 : 2;
+  const budgets = [requested - greyClusters, greyClusters];
+  const clusters = [];
+  const clusterOfBin = new Int32Array(bins).fill(-1);
+  groups.forEach((members, group) => {
+    if (members.length === 0 || budgets[group] <= 0) return;
+    const points = new Float64Array(members.length * 3);
+    const weights = new Float64Array(members.length);
+    members.forEach((bin, i) => {
+      const w = binSums[bin * 4 + 3];
+      const a = binSums[bin * 4 + 1] / w;
+      const b = binSums[bin * 4 + 2] / w;
+      points[i * 3] = binSums[bin * 4] / w;
+      points[i * 3 + 1] = a;
+      points[i * 3 + 2] = b;
+      weights[i] = w * (1 + 5 * Math.sqrt(a * a + b * b));
+    });
+    const { assignment, centroids, k } = kmeans(points, weights, budgets[group]);
+    const pop = new Float64Array(k);
+    members.forEach((bin, i) => pop[assignment[i]] += binSums[bin * 4 + 3]);
+    const index = new Int32Array(k).fill(-1);
+    for (let j = 0; j < k; j++) {
+      if (pop[j] <= 0) continue;
+      const lch = labToLch([centroids[j * 3], centroids[j * 3 + 1], centroids[j * 3 + 2]]);
+      const room = maxChroma(lch.l, lch.h);
+      index[j] = clusters.length;
+      clusters.push({
+        ...lch,
+        pop: pop[j] / total,
+        rel: room > 0 ? clamp(lch.c / room, 0, 1) : 0,
+        rely: reliability(lch.l)
+      });
+    }
+    members.forEach((bin, i) => clusterOfBin[bin] = index[assignment[i]]);
+  });
+  const regionWeights = AMBIENT_REGIONS.map(() => new Float64Array(clusters.length));
+  for (let i = 0; i < pixelBins.length; i++) {
+    const bin = pixelBins[i];
+    if (bin < 0) continue;
+    const cluster = clusterOfBin[bin];
+    const bits = pixelRegions[i];
+    AMBIENT_REGIONS.forEach((region, r) => {
+      if (bits & REGION_BITS[region]) regionWeights[r][cluster] += 1;
+    });
+  }
+  return { clusters, meanL, regionWeights };
+}
+function analyzeAmbientPixels(pixels, overrides = {}) {
+  const options = { ...DEFAULT_ANALYSIS, ...overrides };
+  const { clusters, meanL, regionWeights } = clusterAmbientPixels(pixels, options);
+  const chromatic = clusters.filter(isChromatic);
+  const presence = chromatic.reduce(
+    (sum, cluster) => sum + cluster.pop * colorfulness(cluster.c) * cluster.rely,
+    0
+  );
+  const neutral = presence < MIN_PRESENCE;
+  const dilution = 0.55 + 0.45 * Math.min(1, presence / 0.25);
+  const { minContrast, minHueDistance } = options;
+  const grey = { h: 0, l: clamp(meanL, 0.3, 0.8) };
+  const family = /* @__PURE__ */ new Map();
+  for (const cluster of chromatic) {
+    let share2 = 0;
+    for (const other of chromatic) {
+      if (hueDistance(cluster.h, other.h) <= 20) share2 += other.pop;
+    }
+    family.set(cluster, share2);
+  }
+  const share = (cluster) => family.get(cluster) ?? cluster.pop;
+  const withShare = (cluster) => cluster ? { ...cluster, pop: share(cluster) } : null;
+  const dominantPick = neutral ? null : pickBest(chromatic, (cluster) => share(cluster) * cluster.c * cluster.rely);
+  const vividPick = neutral ? null : pickBest(
+    chromatic.filter((cluster) => share(cluster) >= MIN_POPULATION),
+    (cluster) => cluster.c * cluster.c * Math.pow(share(cluster), 0.3) * cluster.rely
+  );
+  const accentPick = pickBest(
+    chromatic.filter(
+      (cluster) => neutral ? share(cluster) >= 6e-3 && cluster.c >= 0.06 : share(cluster) >= MIN_POPULATION && cluster.c >= 0.035 && (!dominantPick || hueDistance(cluster.h, dominantPick.h) >= minHueDistance)
+    ),
+    (cluster) => Math.pow(share(cluster), 0.6) * cluster.c * cluster.rely
+  );
+  const mutedPick = neutral ? null : pickBest(
+    chromatic.filter((cluster) => cluster.c <= 0.09),
+    (cluster) => share(cluster) * cluster.rely * (1 - cluster.c / 0.12)
+  );
+  const dominantHue = dominantPick?.h ?? vividPick?.h ?? 0;
+  const roles = {
+    dominant: buildSwatch(
+      withShare(dominantPick),
+      {
+        cap: 0.22,
+        max: 0.74,
+        min: 0.42,
+        rel: dominantPick ? lift(dominantPick.rel, 0.25, 0.85, 0.9) : 0
+      },
+      grey,
+      true,
+      minContrast
+    ),
+    vibrant: buildSwatch(
+      withShare(vividPick),
+      {
+        cap: 0.24,
+        max: 0.84,
+        min: 0.62,
+        rel: vividPick ? lift(vividPick.rel, 0.4, 0.75, 0.95) * dilution : 0
+      },
+      { h: dominantHue, l: 0.78 },
+      true,
+      minContrast
+    ),
+    muted: buildSwatch(
+      withShare(mutedPick),
+      {
+        cap: 0.08,
+        max: 0.66,
+        min: 0.38,
+        rel: mutedPick ? clamp(mutedPick.rel, 0.1, 0.3) : dominantPick ? 0.2 : 0
+      },
+      { h: dominantHue, l: clamp(meanL, 0.38, 0.66) },
+      Boolean(mutedPick) || neutral,
+      minContrast
+    ),
+    accent: buildSwatch(
+      withShare(accentPick ?? vividPick),
+      {
+        cap: 0.24,
+        max: 0.8,
+        min: 0.55,
+        rel: accentPick ?? vividPick ? lift((accentPick ?? vividPick).rel, 0.35, 0.75, 0.92) * dilution : 0
+      },
+      { h: dominantHue, l: 0.72 },
+      Boolean(accentPick),
+      minContrast
+    )
+  };
+  const shadowPick = neutral ? null : pickBest(
+    clusters.filter(
+      (cluster) => cluster.l <= 0.5 && cluster.c >= 0.02 && cluster.pop >= 0.02
+    ),
+    (cluster) => cluster.pop * cluster.rel * smoothstep(0.05, 0.14, cluster.l)
+  );
+  const deepSource = shadowPick ?? dominantPick;
+  const shadowL = clamp(
+    options.shadowLightness + (meanL - 0.45) * 0.06,
+    options.shadowLightness - 0.02,
+    options.shadowLightness + 0.02
+  );
+  const shadow = deepSource ? toneOf(deepSource.h, shadowL, lift(deepSource.rel, 0.3, 0.7, 0.85), 0.1) : { c: 0, h: 0, l: shadowL };
+  const regions = {};
+  AMBIENT_REGIONS.forEach((region, r) => {
+    const weights = regionWeights[r];
+    let regionTotal = 0;
+    let regionL = 0;
+    clusters.forEach((cluster, j) => {
+      regionTotal += weights[j];
+      regionL += cluster.l * weights[j];
+    });
+    const share2 = (j) => regionTotal > 0 ? weights[j] / regionTotal : 0;
+    let strength = 0;
+    let pick = null;
+    let pickScore = 0;
+    clusters.forEach((cluster, j) => {
+      if (!isChromatic(cluster)) return;
+      strength += share2(j) * colorfulness(cluster.c) * cluster.rely;
+      const score = share2(j) * cluster.c * cluster.rely;
+      if (score > pickScore) {
+        pickScore = score;
+        pick = cluster;
+      }
+    });
+    const chosen = neutral || strength < MIN_PRESENCE ? null : pick;
+    const tone = chosen ? toneOf(
+      chosen.h,
+      clamp(chosen.l, 0.42, 0.72),
+      lift(chosen.rel, 0.25, 0.85, 0.9),
+      0.22
+    ) : {
+      c: 0,
+      h: 0,
+      l: clamp(regionTotal > 0 ? regionL / regionTotal : meanL, 0.3, 0.7)
+    };
+    regions[region] = {
+      c: round3(tone.c),
+      color: formatOklch(tone),
+      h: Math.round(tone.h * 10) / 10,
+      l: round3(tone.l),
+      strength: round3(chosen ? clamp(strength, 0, 1) : 0)
+    };
+  });
+  return {
+    neutral,
+    regions,
+    roles,
+    shadow: formatOklch(shadow)
+  };
+}
+function fitSample(width, height, size) {
+  const scale = Math.min(1, size / Math.max(width, height, 1));
+  return {
+    height: Math.max(1, Math.round(height * scale)),
+    width: Math.max(1, Math.round(width * scale))
+  };
+}
+
+// src/modules/ambient/pipeline.ts
+async function fetchImageBlob(src, proxyUrl) {
+  if (typeof fetch !== "function") return null;
+  const read = async (url, init) => {
+    const response = await fetch(url, { ...init, mode: "cors" });
+    if (!response.ok) return null;
+    const blob = await response.blob();
+    return blob.type.startsWith("text/") ? null : blob;
+  };
+  try {
+    const blob = await read(src);
+    if (blob) return blob;
+  } catch {
+    if (isCrossOrigin(src)) {
+      try {
+        const blob = await read(src, { cache: "reload" });
+        if (blob) return blob;
+      } catch {
+      }
+    }
+  }
+  if (proxyUrl) {
+    try {
+      return await read(proxyUrl);
+    } catch {
+    }
+  }
+  return null;
+}
+function isCrossOrigin(url) {
+  try {
+    return new URL(url).origin !== globalThis.location?.origin;
+  } catch {
+    return false;
+  }
+}
+function createContext2D(width, height) {
+  if (typeof OffscreenCanvas === "function") {
+    return new OffscreenCanvas(width, height).getContext("2d", {
+      willReadFrequently: true
+    });
+  }
+  if (typeof document !== "undefined") {
+    const canvas = document.createElement("canvas");
+    canvas.width = width;
+    canvas.height = height;
+    return canvas.getContext("2d", { willReadFrequently: true });
+  }
+  return null;
+}
+function readPixels(image, sourceWidth, sourceHeight, size) {
+  const { height, width } = fitSample(sourceWidth, sourceHeight, size);
+  const context = createContext2D(width, height);
+  if (!context) return null;
+  context.drawImage(image, 0, 0, width, height);
+  return { data: context.getImageData(0, 0, width, height).data, height, width };
+}
+async function decodeBlob(blob, size) {
+  if (typeof createImageBitmap !== "function") return null;
+  let bitmap;
+  try {
+    bitmap = await createImageBitmap(blob, {
+      resizeQuality: "medium",
+      resizeWidth: size
+    });
+  } catch {
+    bitmap = await createImageBitmap(blob);
+  }
+  try {
+    return readPixels(bitmap, bitmap.width, bitmap.height, size);
+  } finally {
+    bitmap.close();
+  }
+}
+var canDecodeHere = () => typeof createImageBitmap === "function" && (typeof OffscreenCanvas === "function" || typeof document !== "undefined");
+async function extractHere(request) {
+  if (!canDecodeHere()) return { supported: false };
+  const blob = await fetchImageBlob(request.src, request.proxyUrl);
+  if (!blob) return { palette: null, supported: true };
+  try {
+    const pixels = await decodeBlob(blob, request.analysis.sampleSize);
+    return {
+      palette: pixels ? analyzeAmbientPixels(pixels, request.analysis) : null,
+      supported: true
+    };
+  } catch {
+    return { palette: null, supported: true };
+  }
+}
+
+// src/modules/ambient/worker/index.ts
+var AMBIENT_WORKER_REQUEST = "ambient:extract";
+var AMBIENT_WORKER_RESPONSE = "ambient:palette";
+
+// src/modules/ambient/extractor.ts
+var WORKER_PATIENCE = 15e3;
+var paletteCache = /* @__PURE__ */ new Map();
+var inFlight = /* @__PURE__ */ new Map();
+function cachePalette(key, palette) {
+  paletteCache.delete(key);
+  const limit = Math.max(1, getAmbientSettings().cacheLimit);
+  while (paletteCache.size >= limit) {
+    const oldest = paletteCache.keys().next().value;
+    if (oldest === void 0) break;
+    paletteCache.delete(oldest);
+  }
+  paletteCache.set(key, palette);
+}
+function primeAmbientPalette(src, palette) {
+  if (src && palette) cachePalette(src, { ...palette, source: src });
+}
+function getCachedAmbientPalette(src) {
+  return paletteCache.get(src) ?? null;
+}
+var slot = null;
+var brokenFactories = /* @__PURE__ */ new WeakSet();
+function dropWorker(target) {
+  if (slot === target) slot = null;
+  target.worker.terminate();
+  for (const resolve of target.pending.values()) resolve(null);
+  target.pending.clear();
+}
+function workerSlot(factory) {
+  if (slot?.factory === factory) return slot;
+  if (slot) dropWorker(slot);
+  if (brokenFactories.has(factory)) return null;
+  let worker;
+  try {
+    worker = factory();
+  } catch {
+    brokenFactories.add(factory);
+    return null;
+  }
+  const created = { factory, next: 1, pending: /* @__PURE__ */ new Map(), worker };
+  worker.addEventListener("message", (event) => {
+    const message = event.data;
+    if (message?.type !== AMBIENT_WORKER_RESPONSE) return;
+    created.pending.get(message.id)?.(message);
+    created.pending.delete(message.id);
+  });
+  worker.addEventListener("error", () => {
+    brokenFactories.add(factory);
+    dropWorker(created);
+  });
+  slot = created;
+  return created;
+}
+function extractInWorker(factory, request) {
+  const target = workerSlot(factory);
+  if (!target) return Promise.resolve(null);
+  const id = target.next++;
+  return new Promise((resolve) => {
+    const timer = setTimeout(() => {
+      target.pending.delete(id);
+      resolve(null);
+    }, WORKER_PATIENCE);
+    target.pending.set(id, (result) => {
+      clearTimeout(timer);
+      resolve(result);
+    });
+    target.worker.postMessage({ ...request, id, type: AMBIENT_WORKER_REQUEST });
+  });
+}
+function loadImageElement(url) {
+  return new Promise((resolve) => {
+    const image = new Image();
+    image.onload = () => resolve(image);
+    image.onerror = () => resolve(null);
+    image.src = url;
+  });
+}
+async function extractOnMainThread(request) {
+  const result = await extractHere(request);
+  if (result.supported) return result.palette;
+  const blob = await fetchImageBlob(request.src, request.proxyUrl);
+  if (!blob || typeof URL.createObjectURL !== "function") return null;
+  const objectUrl = URL.createObjectURL(blob);
+  try {
+    const image = await loadImageElement(objectUrl);
+    const pixels = image && readPixels(
+      image,
+      image.naturalWidth,
+      image.naturalHeight,
+      request.analysis.sampleSize
+    );
+    return pixels ? analyzeAmbientPixels(pixels, request.analysis) : null;
+  } catch {
+    return null;
+  } finally {
+    URL.revokeObjectURL(objectUrl);
+  }
+}
+function absoluteUrl(src) {
+  try {
+    return new URL(src, globalThis.location?.href).href;
+  } catch {
+    return src;
+  }
+}
+var isCrossOrigin2 = (url) => {
+  try {
+    return new URL(url).origin !== globalThis.location?.origin;
+  } catch {
+    return false;
+  }
+};
+async function extractPalette(src, options) {
+  const settings = getAmbientSettings();
+  const strategy = options.strategy ?? settings.strategy;
+  const absolute = absoluteUrl(src);
+  const proxy = options.proxy === void 0 ? settings.proxy : options.proxy;
+  const request = {
+    analysis: resolveAnalysis(options.analysis),
+    proxyUrl: isCrossOrigin2(absolute) ? (() => {
+      const proxied = resolveProxyUrl(proxy, absolute);
+      return proxied ? absoluteUrl(proxied) : null;
+    })() : null,
+    src: absolute
+  };
+  if (strategy !== "main" && settings.worker && typeof Worker === "function") {
+    const result = await extractInWorker(settings.worker, request);
+    if (result?.supported) return result.palette;
+  }
+  if (strategy === "worker") return null;
+  return extractOnMainThread(request);
+}
+async function extractPaletteFromImage(imageSource, options = {}) {
+  const src = typeof imageSource === "string" ? imageSource : imageSource?.src;
+  if (!src || typeof window === "undefined") return null;
+  const strategy = options.strategy ?? getAmbientSettings().strategy;
+  if (strategy === "none") return getCachedAmbientPalette(src);
+  const key = options.analysis ? `${src}#${JSON.stringify(options.analysis)}` : src;
+  const cached = paletteCache.get(key);
+  if (cached) return cached;
+  let pending = inFlight.get(key);
+  if (!pending) {
+    pending = extractPalette(src, options).catch(() => null).then((palette) => {
+      if (!palette) return null;
+      const sourced = { ...palette, source: src };
+      cachePalette(key, sourced);
+      return sourced;
+    }).finally(() => inFlight.delete(key));
+    inFlight.set(key, pending);
+  }
+  return pending;
+}
+
+// src/modules/ambient/dom.ts
+function resolveCssVarNames(overrides) {
+  const base = getAmbientSettings().cssVars;
+  return overrides ? { ...base, ...overrides } : base;
+}
+var fill = (template, values) => template.replace(
+  /\{(\w+)\}/g,
+  (match, key) => key in values ? String(values[key]) : match
+);
+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 result = {};
+  for (const [key, value] of Object.entries(colors)) {
+    if (!value) continue;
+    result[key.startsWith("--") ? key : `--color-${key}`] = 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 paletteVarMap(palette, names = resolveCssVarNames()) {
+  const varMap = {};
+  if (!palette) return varMap;
+  if (names.shadow) varMap[names.shadow] = palette.shadow;
+  for (const role of AMBIENT_ROLES) {
+    const swatch = palette.roles[role];
+    if (names.role) varMap[fill(names.role, { role })] = swatch.color;
+    if (names.on) varMap[fill(names.on, { role })] = swatch.on;
+    if (names.tone && names.tones) {
+      for (const tone of names.tones) {
+        varMap[fill(names.tone, { role, tone })] = swatch.ramp[tone];
+      }
+    }
+  }
+  if (names.region) {
+    for (const region of AMBIENT_REGIONS) {
+      varMap[fill(names.region, { region })] = palette.regions[region].color;
+    }
+  }
+  return varMap;
+}
+function resolveAmbientVarMap({
+  colors = null,
+  cssVars = null,
+  image = null,
+  palette = null
+}) {
+  const varMap = image ? paletteVarMap(palette, resolveCssVarNames(cssVars)) : {};
+  if (colors) Object.assign(varMap, normalizeColorMap(colors));
+  return varMap;
+}
+function useStableObject(value) {
+  const ref = useRef(value);
+  if (!shallowEqual(ref.current, value)) {
+    ref.current = value;
+  }
+  return ref.current;
+}
+function useAmbientColor(imageSource, options = null) {
+  const stableOptions = useStableObject(options);
+  const initialPalette = useStableObject(options?.initialPalette ?? null);
+  const srcKey = typeof imageSource === "string" ? imageSource : imageSource?.src;
+  const seeded = srcKey && initialPalette?.source === srcKey ? initialPalette : null;
+  const [result, setResult] = useState(null);
+  const settled = result?.source === srcKey ? result : null;
+  const isExtracting = Boolean(imageSource && !seeded && !settled);
+  useEffect(() => {
+    if (seeded && srcKey) primeAmbientPalette(srcKey, seeded);
+  }, [seeded, srcKey]);
+  useEffect(() => {
+    if (!imageSource || !srcKey || seeded) return;
+    let active = true;
+    void extractPaletteFromImage(imageSource, stableOptions ?? {}).catch(() => null).then((palette2) => {
+      if (active) setResult({ palette: palette2, source: srcKey });
+    });
+    return () => {
+      active = false;
+    };
+  }, [imageSource, seeded, srcKey, stableOptions]);
+  const palette = imageSource ? seeded ?? settled?.palette ?? initialPalette : initialPalette;
+  return { isExtracting, palette };
+}
+function useAmbientTheme(config = null) {
+  const ambientActions = use(AmbientContext)?.actions ?? null;
+  const normalizedConfig = typeof config === "string" ? { image: config } : config || {};
+  const {
+    colors = null,
+    cssVars = null,
+    image = null,
+    initialPalette = null,
+    options = null,
+    scope: scope2 = null,
+    transition = true
+  } = normalizedConfig;
+  const stableInitialPalette = useStableObject(initialPalette);
+  const stableOptions = useStableObject(options);
+  const stableColors = useStableObject(colors);
+  const stableCssVars = useStableObject(cssVars);
+  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 transitionClasses = useTheme(ambientTheme).slots.transition.split(/\s+/).filter(Boolean);
+  const transitionKey = transitionClasses.join(" ");
+  const resolvedVarMap = useMemo(
+    () => resolveAmbientVarMap({
+      colors: stableColors,
+      cssVars: stableCssVars,
+      image,
+      palette: extractedPalette
+    }),
+    [extractedPalette, image, stableColors, stableCssVars]
+  );
+  useEffect(() => {
+    if (Object.keys(resolvedVarMap).length === 0) return;
+    const targetEl = resolveTargetElement(scope2);
+    if (!targetEl) return;
+    if (transition) {
+      targetEl.classList.add(...transitionKey.split(" ").filter(Boolean));
+    }
+    const restoreVariables = applyScopedCssVariables(targetEl, resolvedVarMap);
+    return () => {
+      restoreVariables();
+      if (transition && scope2) {
+        targetEl.classList.remove(...transitionKey.split(" ").filter(Boolean));
+      }
+    };
+  }, [resolvedVarMap, scope2, 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]
+  );
+}
+var firstString = (...values) => values.find((value) => typeof value === "string" && value) ?? null;
+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 };
+  }
+  if (ambient && typeof ambient === "object") {
+    return { image: ambient.image ?? defaultImage, ...ambient };
+  }
+  if (banner && !posterUrl) return { image: banner };
+  return null;
+}
+function selectPageAmbient(config) {
+  return {
+    ambient: config.ambient,
+    banner: firstString(config.dock?.banner, config.dock?.bannerUrl)
+  };
+}
+function useAmbientPage(slice, page) {
+  const posterUrl = useOptionalBackgroundState(
+    (background) => background.posterUrl
+  );
+  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_REGIONS, AMBIENT_ROLES, AMBIENT_TONES, AmbientContext, AmbientProvider, DEFAULT_ANALYSIS, DEFAULT_CSS_VAR_NAMES, ambientModule, ambientTheme, analyzeAmbientPixels, applyScopedCssVariables, configureAmbient, contrastRatio, defineAmbient, extractPaletteFromImage, findContentBounds, formatOklch, getAmbientSettings, getCachedAmbientPalette, maxChroma, normalizeColorMap, onColorFor, paletteVarMap, primeAmbientPalette, resolveAmbientVarMap, resolveCssVarNames, resolvePageAmbientTheme, resolveTargetElement, srgbToOklab, toneOf, useAmbient, useAmbientColor, useAmbientTheme };
+//# sourceMappingURL=chunk-QXR55VVS.js.map
+//# sourceMappingURL=chunk-QXR55VVS.js.map