@orangecheck/design 0.26.0 → 0.27.0

package/dist/primitives.d.mts

@@ -17,7 +17,7 @@ import { ToasterProps } from 'sonner';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 
 declare const buttonVariants: (props?: ({
-    variant?: "default" | "link" | "destructive" | "outline" | "secondary" | "ghost" | "onBrand" | "onBrandOutline" | null | undefined;
+    variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | "onBrand" | "onBrandOutline" | null | undefined;
     size?: "default" | "icon" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {

package/dist/primitives.d.ts

@@ -17,7 +17,7 @@ import { ToasterProps } from 'sonner';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 
 declare const buttonVariants: (props?: ({
-    variant?: "default" | "link" | "destructive" | "outline" | "secondary" | "ghost" | "onBrand" | "onBrandOutline" | null | undefined;
+    variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | "onBrand" | "onBrandOutline" | null | undefined;
     size?: "default" | "icon" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {

package/dist/styles/aurora.css

@@ -258,3 +258,32 @@
 :root[data-oc-motion='off'] .oc-ambient {
     animation-play-state: paused !important;
 }
+
+/* ── OcAuroraGL (aurora depth R2) ─────────────────────────────────────
+   The lazy WebGL2 silk field renders inside the same container, so the radial
+   mask, the mode-op × intensity opacity, and ember's --au-* re-hue all govern
+   it for free. Once the first GL frame lands (`--gl-live`), the CSS blobs
+   pause AND hide — dimming alone does not stop blur rasterization; the page
+   pays for exactly one aurora at any moment. Any demotion removes the class
+   and the blobs resume, invisibly. */
+.oc-aurora__gl {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    transition: opacity 0.5s ease;
+}
+.oc-aurora--gl-live .oc-aurora__gl {
+    opacity: 1;
+}
+.oc-aurora--gl-live .oc-aurora__blob {
+    visibility: hidden;
+    animation-play-state: paused;
+}
+/* Canvas raster is NOT stripped by forced colors the way gradients are. */
+@media (forced-colors: active) {
+    .oc-aurora__gl {
+        display: none;
+    }
+}

package/dist/tokens.d.mts

@@ -38,6 +38,7 @@ interface OcThemeProviderProps {
     defaultSkin?: string;
     aurora?: boolean | {
         intensity?: number;
+        gl?: boolean;
     };
 }
 declare function OcThemeProvider({ children, defaultSkin, aurora, }: OcThemeProviderProps): react_jsx_runtime.JSX.Element;
@@ -69,8 +70,24 @@ declare function OcAppearanceMenu({ className, triggerClassName, popoverClassNam
 
 interface OcAuroraProps {
     intensity?: number;
+    gl?: boolean;
     className?: string;
 }
-declare function OcAurora({ intensity, className }: OcAuroraProps): react_jsx_runtime.JSX.Element;
+declare function OcAurora({ intensity, gl, className }: OcAuroraProps): react_jsx_runtime.JSX.Element;
 
-export { AppearanceControls, DEFAULT_OC_THEME, OC_DEFAULT_ACCENT, OC_MOTION_COOKIE, OC_SKIN_COOKIE, OC_THEMES, OcAppearanceMenu, type OcAppearanceMenuProps, OcAurora, type OcAuroraProps, type OcMotion, type OcTheme, OcThemeBridge, type OcThemeId, OcThemePicker, type OcThemePickerProps, OcThemeProvider, type OcThemeProviderProps, accentFor, cn, getOcThemeInitScript, isKnownTheme, resolveTheme, useOcMotion, useOcSkin };
+interface OcSceneRGB {
+    r: number;
+    g: number;
+    b: number;
+}
+interface OcSceneTokens {
+    palette: [OcSceneRGB, OcSceneRGB, OcSceneRGB, OcSceneRGB];
+    background: OcSceneRGB;
+    isDark: boolean;
+    motionOff: boolean;
+}
+declare function normalizeHue(c: OcSceneRGB, isDark: boolean): OcSceneRGB;
+declare function readOcSceneTokens(host: HTMLElement): OcSceneTokens | null;
+declare function subscribeOcTheme(cb: () => void): () => void;
+
+export { AppearanceControls, DEFAULT_OC_THEME, OC_DEFAULT_ACCENT, OC_MOTION_COOKIE, OC_SKIN_COOKIE, OC_THEMES, OcAppearanceMenu, type OcAppearanceMenuProps, OcAurora, type OcAuroraProps, type OcMotion, type OcSceneRGB, type OcSceneTokens, type OcTheme, OcThemeBridge, type OcThemeId, OcThemePicker, type OcThemePickerProps, OcThemeProvider, type OcThemeProviderProps, accentFor, cn, getOcThemeInitScript, isKnownTheme, normalizeHue, readOcSceneTokens, resolveTheme, subscribeOcTheme, useOcMotion, useOcSkin };

package/dist/tokens.d.ts

@@ -38,6 +38,7 @@ interface OcThemeProviderProps {
     defaultSkin?: string;
     aurora?: boolean | {
         intensity?: number;
+        gl?: boolean;
     };
 }
 declare function OcThemeProvider({ children, defaultSkin, aurora, }: OcThemeProviderProps): react_jsx_runtime.JSX.Element;
@@ -69,8 +70,24 @@ declare function OcAppearanceMenu({ className, triggerClassName, popoverClassNam
 
 interface OcAuroraProps {
     intensity?: number;
+    gl?: boolean;
     className?: string;
 }
-declare function OcAurora({ intensity, className }: OcAuroraProps): react_jsx_runtime.JSX.Element;
+declare function OcAurora({ intensity, gl, className }: OcAuroraProps): react_jsx_runtime.JSX.Element;
 
-export { AppearanceControls, DEFAULT_OC_THEME, OC_DEFAULT_ACCENT, OC_MOTION_COOKIE, OC_SKIN_COOKIE, OC_THEMES, OcAppearanceMenu, type OcAppearanceMenuProps, OcAurora, type OcAuroraProps, type OcMotion, type OcTheme, OcThemeBridge, type OcThemeId, OcThemePicker, type OcThemePickerProps, OcThemeProvider, type OcThemeProviderProps, accentFor, cn, getOcThemeInitScript, isKnownTheme, resolveTheme, useOcMotion, useOcSkin };
+interface OcSceneRGB {
+    r: number;
+    g: number;
+    b: number;
+}
+interface OcSceneTokens {
+    palette: [OcSceneRGB, OcSceneRGB, OcSceneRGB, OcSceneRGB];
+    background: OcSceneRGB;
+    isDark: boolean;
+    motionOff: boolean;
+}
+declare function normalizeHue(c: OcSceneRGB, isDark: boolean): OcSceneRGB;
+declare function readOcSceneTokens(host: HTMLElement): OcSceneTokens | null;
+declare function subscribeOcTheme(cb: () => void): () => void;
+
+export { AppearanceControls, DEFAULT_OC_THEME, OC_DEFAULT_ACCENT, OC_MOTION_COOKIE, OC_SKIN_COOKIE, OC_THEMES, OcAppearanceMenu, type OcAppearanceMenuProps, OcAurora, type OcAuroraProps, type OcMotion, type OcSceneRGB, type OcSceneTokens, type OcTheme, OcThemeBridge, type OcThemeId, OcThemePicker, type OcThemePickerProps, OcThemeProvider, type OcThemeProviderProps, accentFor, cn, getOcThemeInitScript, isKnownTheme, normalizeHue, readOcSceneTokens, resolveTheme, subscribeOcTheme, useOcMotion, useOcSkin };

package/dist/tokens.js

@@ -7,7 +7,381 @@ var jsxRuntime = require('react/jsx-runtime');
 var nextThemes = require('next-themes');
 var lucideReact = require('lucide-react');
 
-// src/tokens/cn.ts
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+// src/tokens/scene-tokens.ts
+function parseColor(value) {
+  let m = value.match(/color\(srgb\s+([\d.]+)\s+([\d.]+)\s+([\d.]+)/);
+  if (m?.[1] != null && m[2] != null && m[3] != null) {
+    return { r: +m[1], g: +m[2], b: +m[3] };
+  }
+  m = value.match(/rgba?\(\s*([\d.]+)[,\s]+([\d.]+)[,\s]+([\d.]+)/);
+  if (m?.[1] != null && m[2] != null && m[3] != null) {
+    return { r: +m[1] / 255, g: +m[2] / 255, b: +m[3] / 255 };
+  }
+  return null;
+}
+function srgbToOklab({ r, g, b }) {
+  const lin = (c) => c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+  const lr = lin(r);
+  const lg = lin(g);
+  const lb = lin(b);
+  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 {
+    L: 0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s,
+    a: 1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s,
+    b: 0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s
+  };
+}
+function oklabToSrgb(L, a, bb) {
+  const l = Math.pow(L + 0.3963377774 * a + 0.2158037573 * bb, 3);
+  const m = Math.pow(L - 0.1055613458 * a - 0.0638541728 * bb, 3);
+  const s = Math.pow(L - 0.0894841775 * a - 1.291485548 * bb, 3);
+  const lr = 4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s;
+  const lg = -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s;
+  const lb = -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s;
+  const un = (c) => Math.min(1, Math.max(0, c <= 31308e-7 ? 12.92 * c : 1.055 * Math.pow(c, 1 / 2.4) - 0.055));
+  return { r: un(lr), g: un(lg), b: un(lb) };
+}
+function normalizeHue(c, isDark) {
+  const { L, a, b } = srgbToOklab(c);
+  const C = Math.hypot(a, b);
+  const targetL = isDark ? Math.min(0.75, Math.max(0.55, L)) : Math.min(0.95, Math.max(0.82, L + 0.25));
+  const scale = C > 1e-6 ? Math.min(C, 0.14) / C : 0;
+  return oklabToSrgb(targetL, a * scale, b * scale);
+}
+function readOcSceneTokens(host) {
+  if (typeof document === "undefined") return null;
+  const probe = document.createElement("div");
+  probe.setAttribute("aria-hidden", "true");
+  probe.style.cssText = "position:absolute;width:0;height:0;overflow:hidden;pointer-events:none;";
+  const cells = SLOTS.map((slot) => {
+    const cell = document.createElement("span");
+    cell.style.color = `color-mix(in srgb, var(${slot}), var(${slot}))`;
+    probe.appendChild(cell);
+    return cell;
+  });
+  host.appendChild(probe);
+  try {
+    const parsed = cells.map((cell) => parseColor(getComputedStyle(cell).color));
+    const [orange, green, blue, violet, background] = parsed;
+    if (!orange || !green || !blue || !violet || !background) return null;
+    const root = document.documentElement;
+    return {
+      palette: [orange, green, blue, violet],
+      background,
+      isDark: root.classList.contains("dark"),
+      motionOff: root.getAttribute("data-oc-motion") === "off"
+    };
+  } finally {
+    host.removeChild(probe);
+  }
+}
+function subscribeOcTheme(cb) {
+  if (typeof document === "undefined") return () => {
+  };
+  let raf1 = 0;
+  let raf2 = 0;
+  const schedule = () => {
+    cancelAnimationFrame(raf1);
+    cancelAnimationFrame(raf2);
+    raf1 = requestAnimationFrame(() => {
+      raf2 = requestAnimationFrame(cb);
+    });
+  };
+  const mo = new MutationObserver(schedule);
+  mo.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ["class", "data-oc-theme", "data-oc-motion"]
+  });
+  return () => {
+    mo.disconnect();
+    cancelAnimationFrame(raf1);
+    cancelAnimationFrame(raf2);
+  };
+}
+var SLOTS;
+var init_scene_tokens = __esm({
+  "src/tokens/scene-tokens.ts"() {
+    SLOTS = ["--au-orange", "--au-green", "--au-blue", "--au-violet", "--background"];
+  }
+});
+
+// src/tokens/aurora-gl.ts
+var aurora_gl_exports = {};
+__export(aurora_gl_exports, {
+  mountAuroraGL: () => mountAuroraGL
+});
+function killFlagged() {
+  try {
+    const raw = localStorage.getItem(KILL_KEY);
+    if (!raw) return false;
+    if (Date.now() - Number(raw) > KILL_TTL_MS) {
+      localStorage.removeItem(KILL_KEY);
+      return false;
+    }
+    return true;
+  } catch {
+    return false;
+  }
+}
+function setKillFlag() {
+  try {
+    localStorage.setItem(KILL_KEY, String(Date.now()));
+  } catch {
+  }
+}
+function cypherFinish() {
+  const skin = document.documentElement.getAttribute("data-oc-theme");
+  return skin !== null && skin !== "ember";
+}
+function samplePalette(host) {
+  const tokens = readOcSceneTokens(host);
+  if (!tokens) return null;
+  return {
+    hues: tokens.palette.map((h) => normalizeHue(h, tokens.isDark)),
+    bg: tokens.background,
+    isDark: tokens.isDark,
+    finish: cypherFinish() ? 1 : 0
+  };
+}
+function mountAuroraGL(container) {
+  if (killFlagged()) return null;
+  if (getComputedStyle(container).getPropertyValue("--oc-aurora-gl").trim() === "off") {
+    return null;
+  }
+  const canvas = document.createElement("canvas");
+  canvas.className = "oc-aurora__gl";
+  const glMaybe = canvas.getContext("webgl2", {
+    antialias: false,
+    depth: false,
+    stencil: false,
+    alpha: false,
+    powerPreference: "low-power",
+    failIfMajorPerformanceCaveat: true
+    // SwiftShader/blocklist → CSS floor, free
+  });
+  if (!glMaybe) return null;
+  const gl = glMaybe;
+  const first = samplePalette(container);
+  if (!first) return null;
+  let prog;
+  const uni = {};
+  try {
+    const compile = (type, src) => {
+      const s = gl.createShader(type);
+      gl.shaderSource(s, src);
+      gl.compileShader(s);
+      if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) throw new Error("compile");
+      return s;
+    };
+    prog = gl.createProgram();
+    gl.attachShader(prog, compile(gl.VERTEX_SHADER, VS));
+    gl.attachShader(prog, compile(gl.FRAGMENT_SHADER, FS));
+    gl.linkProgram(prog);
+    if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) throw new Error("link");
+    gl.useProgram(prog);
+    const buf = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, buf);
+    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);
+    const loc = gl.getAttribLocation(prog, "p");
+    gl.enableVertexAttribArray(loc);
+    gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0);
+    for (const k of ["uRes", "uT", "uIsDark", "uFinish", "uMix", "uA0", "uA1", "uA2", "uA3", "uB0", "uB1", "uB2", "uB3", "uBg"]) {
+      uni[k] = gl.getUniformLocation(prog, k);
+    }
+  } catch {
+    return null;
+  }
+  container.appendChild(canvas);
+  let palFrom = first;
+  let palTo = first;
+  let mixStart = 0;
+  let raf = 0;
+  let lastFrame = 0;
+  let clock = 0;
+  let lastTick = 0;
+  let lastInput = performance.now();
+  let live = false;
+  let disposed = false;
+  let slowStreak = 0;
+  const setVec = (k, c) => gl.uniform3f(uni[k] ?? null, c.r, c.g, c.b);
+  function resize() {
+    const coarse = matchMedia("(pointer: coarse)").matches;
+    const dpr = Math.min(devicePixelRatio || 1, coarse ? 1.5 : 2) * 0.75;
+    const w = Math.max(1, Math.round(container.clientWidth * dpr));
+    const hgt = Math.max(1, Math.round(container.clientHeight * dpr));
+    if (canvas.width !== w || canvas.height !== hgt) {
+      canvas.width = w;
+      canvas.height = hgt;
+      gl.viewport(0, 0, w, hgt);
+    }
+  }
+  function draw(now) {
+    raf = requestAnimationFrame(draw);
+    if (now - lastFrame < FRAME_MS) return;
+    const frameGap = now - lastFrame;
+    lastFrame = now;
+    if (frameGap > FRAME_MS * 2.5) {
+      if (++slowStreak > 90) {
+        setKillFlag();
+        dispose();
+        return;
+      }
+    } else if (slowStreak > 0) slowStreak--;
+    const settled = now - lastInput > SETTLE_MS;
+    if (!settled) {
+      clock += Math.min(now - lastTick, 100) / 1e3;
+    }
+    lastTick = now;
+    if (settled && live && mixDone(now)) return;
+    resize();
+    const mix = Math.min(1, (now - mixStart) / CROSSFADE_MS);
+    gl.uniform2f(uni.uRes ?? null, canvas.width, canvas.height);
+    gl.uniform1f(uni.uT ?? null, clock);
+    gl.uniform1f(uni.uIsDark ?? null, palTo.isDark ? 1 : 0);
+    gl.uniform1f(uni.uFinish ?? null, palTo.finish);
+    gl.uniform1f(uni.uMix ?? null, mix);
+    setVec("uA0", palFrom.hues[0]);
+    setVec("uA1", palFrom.hues[1]);
+    setVec("uA2", palFrom.hues[2]);
+    setVec("uA3", palFrom.hues[3]);
+    setVec("uB0", palTo.hues[0]);
+    setVec("uB1", palTo.hues[1]);
+    setVec("uB2", palTo.hues[2]);
+    setVec("uB3", palTo.hues[3]);
+    setVec("uBg", palTo.bg);
+    gl.drawArrays(gl.TRIANGLES, 0, 3);
+    if (!live) {
+      live = true;
+      container.classList.add("oc-aurora--gl-live");
+    }
+  }
+  function mixDone(now) {
+    return now - mixStart >= CROSSFADE_MS;
+  }
+  const onInput = () => {
+    lastInput = performance.now();
+  };
+  const onVisibility = () => {
+    if (document.hidden) {
+      cancelAnimationFrame(raf);
+      raf = 0;
+    } else if (!raf && !disposed) {
+      lastFrame = 0;
+      lastTick = performance.now();
+      raf = requestAnimationFrame(draw);
+    }
+  };
+  const onContextLost = (e) => {
+    e.preventDefault();
+    cancelAnimationFrame(raf);
+    raf = 0;
+  };
+  const onContextRestored = () => {
+    dispose();
+  };
+  const unsubscribeTheme = subscribeOcTheme(() => {
+    if (disposed) return;
+    const root = document.documentElement;
+    if (root.getAttribute("data-oc-motion") === "off") {
+      dispose();
+      return;
+    }
+    const next = samplePalette(container);
+    if (!next) return;
+    palFrom = { ...palTo, hues: [...palTo.hues] };
+    palTo = next;
+    mixStart = performance.now();
+    lastInput = performance.now();
+  });
+  window.addEventListener("pointermove", onInput, { passive: true });
+  window.addEventListener("scroll", onInput, { passive: true });
+  window.addEventListener("keydown", onInput, { passive: true });
+  document.addEventListener("visibilitychange", onVisibility);
+  canvas.addEventListener("webglcontextlost", onContextLost);
+  canvas.addEventListener("webglcontextrestored", onContextRestored);
+  function dispose() {
+    if (disposed) return;
+    disposed = true;
+    cancelAnimationFrame(raf);
+    unsubscribeTheme();
+    window.removeEventListener("pointermove", onInput);
+    window.removeEventListener("scroll", onInput);
+    window.removeEventListener("keydown", onInput);
+    document.removeEventListener("visibilitychange", onVisibility);
+    canvas.removeEventListener("webglcontextlost", onContextLost);
+    canvas.removeEventListener("webglcontextrestored", onContextRestored);
+    container.classList.remove("oc-aurora--gl-live");
+    canvas.remove();
+    const ext = gl.getExtension("WEBGL_lose_context");
+    if (ext) ext.loseContext();
+  }
+  resize();
+  mixStart = performance.now();
+  lastTick = performance.now();
+  raf = requestAnimationFrame(draw);
+  return dispose;
+}
+var KILL_KEY, KILL_TTL_MS, SETTLE_MS, FRAME_MS, CROSSFADE_MS, VS, FS;
+var init_aurora_gl = __esm({
+  "src/tokens/aurora-gl.ts"() {
+    init_scene_tokens();
+    KILL_KEY = "oc-aurora-gl-kill:1";
+    KILL_TTL_MS = 7 * 24 * 60 * 60 * 1e3;
+    SETTLE_MS = 9e4;
+    FRAME_MS = 33;
+    CROSSFADE_MS = 250;
+    VS = `#version 300 es
+in vec2 p;void main(){gl_Position=vec4(p,0.,1.);}`;
+    FS = `#version 300 es
+precision highp float;
+out vec4 o;
+uniform vec2 uRes;uniform float uT,uIsDark,uFinish,uMix;
+uniform vec3 uA0,uA1,uA2,uA3,uB0,uB1,uB2,uB3,uBg;
+float h(vec2 p){return fract(sin(dot(p,vec2(127.1,311.7)))*43758.5453);}
+float n2(vec2 p){vec2 i=floor(p),f=fract(p);f=f*f*(3.-2.*f);
+return mix(mix(h(i),h(i+vec2(1,0)),f.x),mix(h(i+vec2(0,1)),h(i+vec2(1,1)),f.x),f.y);}
+float fbm(vec2 p){float v=0.,a=.55;for(int i=0;i<3;i++){v+=a*n2(p);p=p*2.03+vec2(1.7,9.2);a*=.5;}return v;}
+float B2(vec2 a){a=floor(a);return fract(a.x/2.+a.y*a.y*.75);}
+// OKLab mix (Ottosson) so skin crossfades never transit gray-brown.
+vec3 l2s(vec3 c){return mix(12.92*c,1.055*pow(c,vec3(1./2.4))-.055,step(.0031308,c));}
+vec3 s2l(vec3 c){return mix(c/12.92,pow((c+.055)/1.055,vec3(2.4)),step(.04045,c));}
+vec3 okmix(vec3 a,vec3 b,float t){
+vec3 la=s2l(a),lb=s2l(b);
+mat3 M1=mat3(.4122214708,.2119034982,.0883024619,.5363325363,.6806995451,.2817188376,.0514459929,.1073969566,.6299787005);
+mat3 M2=mat3(4.0767416621,-1.2684380046,-.0041960863,-3.3077115913,2.6097574011,-.7034186147,.2309699292,-.3413193965,1.707614701);
+vec3 ka=pow(M1*la,vec3(1./3.)),kb=pow(M1*lb,vec3(1./3.));
+vec3 k=mix(ka,kb,t);return clamp(l2s(M2*(k*k*k)),0.,1.);}
+void main(){
+vec2 uv=gl_FragCoord.xy/uRes;
+vec2 p=(uv-.5)*vec2(uRes.x/uRes.y,1.)*1.9;
+float t=uT*.018;
+vec2 w=vec2(fbm(p+vec2(0.,t)),fbm(p+vec2(5.2,1.3)-t*.7));
+float f=fbm(p+1.9*w+vec2(t*.5,-t*.3));
+float g=fbm(p*.6+w*1.2+vec2(9.1,3.7));
+vec3 c0=okmix(uA0,uB0,uMix),c1=okmix(uA1,uB1,uMix),c2=okmix(uA2,uB2,uMix),c3=okmix(uA3,uB3,uMix);
+vec3 c=mix(mix(c0,c1,smoothstep(.25,.55,g)),mix(c2,c3,smoothstep(.45,.8,g)),smoothstep(.4,.7,g));
+float e=smoothstep(.32,.9,f);
+if(uFinish>.5){
+float b=B2(.125*gl_FragCoord.xy)*.0625+B2(.25*gl_FragCoord.xy)*.25+B2(.5*gl_FragCoord.xy);
+e=floor(e*5.+b*.8-.4)/5.;}
+// container CSS already applies the mode-op \xD7 intensity opacity + radial mask
+vec3 col=(uIsDark>.5)?clamp(uBg+c*e*1.15,0.,1.):mix(uBg,c,e);
+col+=(fract(52.9829189*fract(dot(gl_FragCoord.xy,vec2(0.06711056,0.00583715))))-.5)/255.;
+o=vec4(col,1.);}`;
+  }
+});
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
@@ -59,9 +433,76 @@ function resolveTheme(id) {
 var OC_SKIN_COOKIE = "oc_skin";
 var OC_MOTION_COOKIE = "oc_motion";
 var BLOBS = [1, 2, 3, 4, 5];
-function OcAurora({ intensity, className }) {
+function onIdle(cb, timeout) {
+  if (typeof requestIdleCallback === "function") {
+    const id2 = requestIdleCallback(cb, { timeout });
+    return () => cancelIdleCallback(id2);
+  }
+  const id = setTimeout(cb, timeout);
+  return () => clearTimeout(id);
+}
+function OcAurora({ intensity, gl = false, className }) {
+  const hostRef = react.useRef(null);
+  react.useEffect(() => {
+    if (!gl) return;
+    const host = hostRef.current;
+    if (!host) return;
+    let disposed = false;
+    let disposeScene = null;
+    let cancelIdle = null;
+    const prm = matchMedia("(prefers-reduced-motion: reduce)");
+    const forced = matchMedia("(forced-colors: active)");
+    function gatesPass() {
+      if (prm.matches || forced.matches) return false;
+      if (document.documentElement.getAttribute("data-oc-motion") === "off") return false;
+      const nav = navigator;
+      if (nav.connection?.saveData === true) return false;
+      if (typeof nav.deviceMemory === "number" && nav.deviceMemory <= 4) return false;
+      return true;
+    }
+    function boot() {
+      cancelIdle = onIdle(async () => {
+        if (disposed || disposeScene || !gatesPass()) return;
+        try {
+          const mod = await Promise.resolve().then(() => (init_aurora_gl(), aurora_gl_exports));
+          if (disposed || disposeScene || !gatesPass()) return;
+          disposeScene = mod.mountAuroraGL(host);
+        } catch {
+        }
+      }, 2e3);
+    }
+    function teardownScene() {
+      disposeScene?.();
+      disposeScene = null;
+    }
+    const onPrmChange = () => {
+      if (prm.matches) teardownScene();
+      else if (!disposeScene) boot();
+    };
+    prm.addEventListener?.("change", onPrmChange);
+    const mo = new MutationObserver(() => {
+      const off = document.documentElement.getAttribute("data-oc-motion") === "off";
+      if (!off && !disposeScene && !disposed) boot();
+    });
+    mo.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["data-oc-motion"]
+    });
+    if (document.readyState === "complete") boot();
+    else {
+      const onLoad = () => boot();
+      window.addEventListener("load", onLoad, { once: true });
+    }
+    return () => {
+      disposed = true;
+      cancelIdle?.();
+      prm.removeEventListener?.("change", onPrmChange);
+      mo.disconnect();
+      teardownScene();
+    };
+  }, [gl]);
   const style = intensity == null ? void 0 : { "--oc-aurora-intensity": String(intensity) };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("oc-aurora", className), style, "aria-hidden": "true", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: hostRef, className: cn("oc-aurora", className), style, "aria-hidden": "true", children: [
     BLOBS.map((n) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: `oc-aurora__blob oc-aurora__blob-${n}` }, n)),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oc-aurora__grain" })
   ] });
@@ -200,7 +641,13 @@ function OcThemeProvider({
     [skin, setSkin, motion, setMotion]
   );
   return /* @__PURE__ */ jsxRuntime.jsxs(OcSkinContext.Provider, { value, children: [
-    aurora !== false && /* @__PURE__ */ jsxRuntime.jsx(OcAurora, { intensity: typeof aurora === "object" ? aurora.intensity : void 0 }),
+    aurora !== false && /* @__PURE__ */ jsxRuntime.jsx(
+      OcAurora,
+      {
+        intensity: typeof aurora === "object" ? aurora.intensity : void 0,
+        gl: typeof aurora === "object" ? aurora.gl : void 0
+      }
+    ),
     children
   ] });
 }
@@ -486,6 +933,9 @@ function OcAppearanceMenu({
   ] });
 }
 
+// src/tokens/index.ts
+init_scene_tokens();
+
 exports.AppearanceControls = AppearanceControls;
 exports.DEFAULT_OC_THEME = DEFAULT_OC_THEME;
 exports.OC_DEFAULT_ACCENT = OC_DEFAULT_ACCENT;
@@ -501,7 +951,10 @@ exports.accentFor = accentFor;
 exports.cn = cn;
 exports.getOcThemeInitScript = getOcThemeInitScript;
 exports.isKnownTheme = isKnownTheme;
+exports.normalizeHue = normalizeHue;
+exports.readOcSceneTokens = readOcSceneTokens;
 exports.resolveTheme = resolveTheme;
+exports.subscribeOcTheme = subscribeOcTheme;
 exports.useOcMotion = useOcMotion;
 exports.useOcSkin = useOcSkin;
 //# sourceMappingURL=tokens.js.map