@orangecheck/design 0.26.0 → 0.27.0

package/dist/tokens.mjs

@@ -1,11 +1,385 @@
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import { createContext, useState, useRef, useEffect, useCallback, useMemo, useContext } from 'react';
+import { createContext, useRef, useEffect, useState, useCallback, useMemo, useContext } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useTheme } from 'next-themes';
 import { Palette, Check, Sun, Moon, Monitor, Waves, Pause } from '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 twMerge(clsx(inputs));
 }
@@ -57,9 +431,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 = useRef(null);
+  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__ */ jsxs("div", { className: cn("oc-aurora", className), style, "aria-hidden": "true", children: [
+  return /* @__PURE__ */ jsxs("div", { ref: hostRef, className: cn("oc-aurora", className), style, "aria-hidden": "true", children: [
     BLOBS.map((n) => /* @__PURE__ */ jsx("div", { className: `oc-aurora__blob oc-aurora__blob-${n}` }, n)),
     /* @__PURE__ */ jsx("div", { className: "oc-aurora__grain" })
   ] });
@@ -198,7 +639,13 @@ function OcThemeProvider({
     [skin, setSkin, motion, setMotion]
   );
   return /* @__PURE__ */ jsxs(OcSkinContext.Provider, { value, children: [
-    aurora !== false && /* @__PURE__ */ jsx(OcAurora, { intensity: typeof aurora === "object" ? aurora.intensity : void 0 }),
+    aurora !== false && /* @__PURE__ */ jsx(
+      OcAurora,
+      {
+        intensity: typeof aurora === "object" ? aurora.intensity : void 0,
+        gl: typeof aurora === "object" ? aurora.gl : void 0
+      }
+    ),
     children
   ] });
 }
@@ -484,6 +931,9 @@ function OcAppearanceMenu({
   ] });
 }
 
-export { AppearanceControls, DEFAULT_OC_THEME, OC_DEFAULT_ACCENT, OC_MOTION_COOKIE, OC_SKIN_COOKIE, OC_THEMES, OcAppearanceMenu, OcAurora, OcThemeBridge, OcThemePicker, OcThemeProvider, accentFor, cn, getOcThemeInitScript, isKnownTheme, resolveTheme, useOcMotion, useOcSkin };
+// src/tokens/index.ts
+init_scene_tokens();
+
+export { AppearanceControls, DEFAULT_OC_THEME, OC_DEFAULT_ACCENT, OC_MOTION_COOKIE, OC_SKIN_COOKIE, OC_THEMES, OcAppearanceMenu, OcAurora, OcThemeBridge, OcThemePicker, OcThemeProvider, accentFor, cn, getOcThemeInitScript, isKnownTheme, normalizeHue, readOcSceneTokens, resolveTheme, subscribeOcTheme, useOcMotion, useOcSkin };
 //# sourceMappingURL=tokens.mjs.map
 //# sourceMappingURL=tokens.mjs.map