@5even7/dlc-ui 0.2.18 → 0.2.20

package/dist/chunks/cosmic-fallback-v8G5_ibh.mjs

@@ -0,0 +1,408 @@
+import { h as hexToRgb01 } from './color-DnmNceaf.mjs';
+
+const VERTEX_SHADER = `#version 300 es
+in vec2 a_position;
+out vec2 v_uv;
+void main() {
+  v_uv = a_position * 0.5 + 0.5;
+  gl_Position = vec4(a_position, 0.0, 1.0);
+}`;
+
+const FRAGMENT_SHADER = `#version 300 es
+precision highp float;
+
+in vec2 v_uv;
+out vec4 outColor;
+
+uniform vec2 u_resolution;
+uniform float u_time;
+uniform float u_seed;
+uniform float u_motion;
+uniform vec2 u_pointer;
+uniform vec3 u_colorA;
+uniform vec3 u_colorB;
+uniform vec3 u_colorC;
+uniform vec3 u_colorD;
+
+float hash21(vec2 p) {
+  p = fract(p * vec2(123.34, 456.21));
+  p += dot(p, p + 45.32 + u_seed);
+  return fract(p.x * p.y);
+}
+
+float noise(vec2 p) {
+  vec2 i = floor(p);
+  vec2 f = fract(p);
+  f = f * f * (3.0 - 2.0 * f);
+  float a = hash21(i);
+  float b = hash21(i + vec2(1.0, 0.0));
+  float c = hash21(i + vec2(0.0, 1.0));
+  float d = hash21(i + vec2(1.0, 1.0));
+  return mix(mix(a, b, f.x), mix(c, d, f.x), f.y);
+}
+
+float fbm(vec2 p) {
+  float value = 0.0;
+  float amplitude = 0.52;
+  mat2 rotation = mat2(0.80, 0.60, -0.60, 0.80);
+  for (int i = 0; i < 6; i++) {
+    value += amplitude * noise(p);
+    p = rotation * p * 2.03 + 17.7;
+    amplitude *= 0.5;
+  }
+  return value;
+}
+
+float gaussian(float value, float center, float width) {
+  return exp(-pow(value - center, 2.0) / max(width, 0.0001));
+}
+
+vec3 palette(float t) {
+  t = clamp(t, 0.0, 1.0);
+  vec3 shadow = mix(u_colorA, u_colorB, smoothstep(0.06, 0.62, t));
+  vec3 body = mix(u_colorB, u_colorC, smoothstep(0.30, 0.82, t));
+  vec3 highlight = mix(u_colorC, u_colorD, smoothstep(0.74, 1.0, t));
+  vec3 restrained = mix(shadow, body, smoothstep(0.26, 0.72, t));
+  return mix(restrained, highlight, smoothstep(0.78, 0.97, t));
+}
+
+vec3 renderNebula(vec2 uv, vec2 p, vec2 pointer, float distanceToPointer, float t) {
+  vec2 delta = p - pointer;
+  float influence = exp(-distanceToPointer * 4.6) * u_motion;
+  float angle = influence * 1.7;
+  mat2 swirl = mat2(cos(angle), -sin(angle), sin(angle), cos(angle));
+  p = pointer + swirl * delta;
+  p += normalize(delta + 0.0001) * influence * 0.08;
+
+  vec2 drift = vec2(t * 0.22, -t * 0.13);
+  vec2 q = vec2(
+    fbm(p * 1.35 + drift + u_seed),
+    fbm(p * 1.35 + vec2(5.2, 1.3) - drift * 0.85)
+  );
+  vec2 r = vec2(
+    fbm(p * 2.0 + 3.6 * q + vec2(1.7, 9.2) + t * 0.10),
+    fbm(p * 2.0 + 3.0 * q + vec2(8.3, 2.8) - t * 0.085)
+  );
+
+  float cloud = fbm(p * 1.7 + 4.2 * r);
+  float veins = fbm(p * 4.0 - 2.0 * q + t * 0.065);
+  float nebula = smoothstep(0.18, 0.91, cloud * 0.9 + veins * 0.22);
+
+  vec3 color = palette(nebula);
+  color += u_colorD * pow(max(cloud - 0.63, 0.0), 2.0) * 1.05;
+  color *= 0.78 + 0.34 * smoothstep(0.15, 0.9, veins);
+
+  vec2 starGrid = floor((uv + vec2(u_seed * 0.013, 0.0)) * vec2(132.0, 58.0));
+  vec2 starCell = fract(uv * vec2(132.0, 58.0)) - 0.5;
+  float starRandom = hash21(starGrid);
+  float starShape = smoothstep(0.075, 0.0, length(starCell));
+  float starMask = step(0.989, starRandom) * starShape;
+  float twinkle = 0.35 + 0.65 * sin(t * (1.0 + starRandom * 2.4) + starRandom * 40.0) * 0.5 + 0.5;
+  color += starMask * twinkle * mix(u_colorC, u_colorD, starRandom) * 1.05;
+
+  float pointerGlow = exp(-distanceToPointer * 7.0) * u_motion;
+  color += u_colorD * pointerGlow * 0.28;
+  return color;
+}
+
+void main() {
+  vec2 uv = v_uv;
+  vec2 p = uv - 0.5;
+  p.x *= u_resolution.x / max(u_resolution.y, 1.0);
+
+  vec2 pointer = u_pointer - 0.5;
+  pointer.x *= u_resolution.x / max(u_resolution.y, 1.0);
+  float distanceToPointer = length(p - pointer);
+
+  vec3 color = renderNebula(uv, p, pointer, distanceToPointer, u_time);
+  float vignette = smoothstep(0.94, 0.18, length((uv - 0.5) * vec2(1.0, 1.35)));
+  color *= 0.70 + vignette * 0.42;
+  color = pow(max(color, vec3(0.0)), vec3(0.88));
+
+  outColor = vec4(color, 1.0);
+}`;
+
+function compileShader(gl, type, source) {
+  const shader = gl.createShader(type);
+  gl.shaderSource(shader, source);
+  gl.compileShader(shader);
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    const message = gl.getShaderInfoLog(shader) || 'Unknown shader compile error';
+    gl.deleteShader(shader);
+    throw new Error(message);
+  }
+  return shader;
+}
+
+function createProgram(gl) {
+  const vertex = compileShader(gl, gl.VERTEX_SHADER, VERTEX_SHADER);
+  const fragment = compileShader(gl, gl.FRAGMENT_SHADER, FRAGMENT_SHADER);
+  const program = gl.createProgram();
+  gl.attachShader(program, vertex);
+  gl.attachShader(program, fragment);
+  gl.linkProgram(program);
+  gl.deleteShader(vertex);
+  gl.deleteShader(fragment);
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    const message = gl.getProgramInfoLog(program) || 'Unknown program link error';
+    gl.deleteProgram(program);
+    throw new Error(message);
+  }
+  return program;
+}
+
+class CosmicRenderer {
+  constructor(canvas, preset, options = {}) {
+    this.canvas = canvas;
+    this.preset = { ...preset };
+    this.options = { dprCap: 1.75, mouseColor: true, ...options };
+    this.gl = canvas.getContext('webgl2', {
+      alpha: false,
+      antialias: false,
+      depth: false,
+      powerPreference: this.options.powerPreference || 'high-performance',
+      preserveDrawingBuffer: false
+    });
+    if (!this.gl) throw new Error('WebGL2 is not available');
+
+    this.program = createProgram(this.gl);
+    this.locations = this.#getLocations();
+    this.pointer = [0.72, 0.45];
+    this.pointerTarget = [...this.pointer];
+    this.motion = 0;
+    this.motionTarget = 0;
+    this.timeOffset = preset.seed * 0.73;
+    this.colors = preset.colors.map(hexToRgb01);
+    this.visible = true;
+    this.disposed = false;
+
+    this.#setupGeometry();
+    this.#bindEvents();
+    this.#bindContextEvents();
+    this.resize();
+  }
+
+  #getLocations() {
+    const gl = this.gl;
+    const uniform = (name) => gl.getUniformLocation(this.program, name);
+    return {
+      position: gl.getAttribLocation(this.program, 'a_position'),
+      resolution: uniform('u_resolution'),
+      time: uniform('u_time'),
+      seed: uniform('u_seed'),
+      motion: uniform('u_motion'),
+      pointer: uniform('u_pointer'),
+      colorA: uniform('u_colorA'),
+      colorB: uniform('u_colorB'),
+      colorC: uniform('u_colorC'),
+      colorD: uniform('u_colorD')
+    };
+  }
+
+  #setupGeometry() {
+    const gl = this.gl;
+    const vertices = new Float32Array([-1, -1, 3, -1, -1, 3]);
+    this.buffer = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
+    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
+  }
+
+  #bindEvents() {
+    if (this.options.mouseColor === false) return;
+    this.eventTarget = this.options.eventTarget || this.canvas.parentElement || this.canvas;
+    this.onPointerMove = (event) => {
+      const rect = this.canvas.getBoundingClientRect();
+      this.pointerTarget[0] = (event.clientX - rect.left) / Math.max(rect.width, 1);
+      this.pointerTarget[1] = 1 - (event.clientY - rect.top) / Math.max(rect.height, 1);
+      this.motionTarget = 1;
+    };
+    this.onPointerLeave = () => { this.motionTarget = 0; };
+    this.eventTarget.addEventListener('pointermove', this.onPointerMove, { passive: true });
+    this.eventTarget.addEventListener('pointerdown', this.onPointerMove, { passive: true });
+    this.eventTarget.addEventListener('pointerleave', this.onPointerLeave, { passive: true });
+  }
+
+  #bindContextEvents() {
+    this.onContextLost = (event) => {
+      event.preventDefault();
+      if (this.disposed) return;
+      this.visible = false;
+      if (typeof this.options.onContextLost === 'function') this.options.onContextLost(event);
+    };
+    this.onContextRestored = () => {
+      if (this.disposed) return;
+      this.program = createProgram(this.gl);
+      this.locations = this.#getLocations();
+      this.#setupGeometry();
+      this.visible = true;
+      this.resize();
+      if (typeof this.options.onContextRestored === 'function') this.options.onContextRestored();
+    };
+    this.canvas.addEventListener('webglcontextlost', this.onContextLost, false);
+    this.canvas.addEventListener('webglcontextrestored', this.onContextRestored, false);
+  }
+
+  setPreset(preset) {
+    this.preset = { ...preset };
+    this.colors = preset.colors.map(hexToRgb01);
+    this.timeOffset = preset.seed * 0.73;
+  }
+
+  setDprCap(cap) {
+    this.options.dprCap = cap;
+    this.resize();
+  }
+
+  setMouseColor(enabled) {
+    this.options.mouseColor = enabled !== false;
+    if (this.options.mouseColor) {
+      if (this.onPointerMove) return this;
+      this.#bindEvents();
+      return this;
+    }
+    if (this.onPointerMove) {
+      const target = this.eventTarget;
+      target.removeEventListener('pointermove', this.onPointerMove);
+      target.removeEventListener('pointerdown', this.onPointerMove);
+      target.removeEventListener('pointerleave', this.onPointerLeave);
+      this.onPointerMove = null;
+      this.onPointerLeave = null;
+    }
+    this.motionTarget = 0;
+    return this;
+  }
+
+  randomize() {
+    this.preset.seed = Math.random() * 100;
+    this.timeOffset = Math.random() * 40;
+  }
+
+  resize() {
+    const dpr = Math.min(window.devicePixelRatio || 1, this.options.dprCap);
+    const rect = this.canvas.getBoundingClientRect();
+    const width = Math.max(2, Math.round(rect.width * dpr));
+    const height = Math.max(2, Math.round(rect.height * dpr));
+    if (this.canvas.width !== width || this.canvas.height !== height) {
+      this.canvas.width = width;
+      this.canvas.height = height;
+    }
+    this.gl.viewport(0, 0, width, height);
+  }
+
+  draw(elapsedSeconds, paused = false) {
+    if (this.disposed || !this.visible) return;
+    const gl = this.gl;
+    this.pointer[0] += (this.pointerTarget[0] - this.pointer[0]) * 0.08;
+    this.pointer[1] += (this.pointerTarget[1] - this.pointer[1]) * 0.08;
+    this.motion += (this.motionTarget - this.motion) * 0.07;
+
+    gl.useProgram(this.program);
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
+    gl.enableVertexAttribArray(this.locations.position);
+    gl.vertexAttribPointer(this.locations.position, 2, gl.FLOAT, false, 0, 0);
+
+    gl.uniform2f(this.locations.resolution, this.canvas.width, this.canvas.height);
+    gl.uniform1f(this.locations.time, this.timeOffset + (paused ? 0 : elapsedSeconds * this.preset.speed));
+    gl.uniform1f(this.locations.seed, this.preset.seed);
+    gl.uniform1f(this.locations.motion, this.motion);
+    gl.uniform2f(this.locations.pointer, this.pointer[0], this.pointer[1]);
+    gl.uniform3fv(this.locations.colorA, this.colors[0]);
+    gl.uniform3fv(this.locations.colorB, this.colors[1]);
+    gl.uniform3fv(this.locations.colorC, this.colors[2]);
+    gl.uniform3fv(this.locations.colorD, this.colors[3]);
+    gl.drawArrays(gl.TRIANGLES, 0, 3);
+  }
+
+  dispose() {
+    this.disposed = true;
+    const target = this.eventTarget || this.canvas;
+    target.removeEventListener('pointermove', this.onPointerMove);
+    target.removeEventListener('pointerdown', this.onPointerMove);
+    target.removeEventListener('pointerleave', this.onPointerLeave);
+    this.canvas.removeEventListener('webglcontextlost', this.onContextLost, false);
+    this.canvas.removeEventListener('webglcontextrestored', this.onContextRestored, false);
+    this.gl.deleteBuffer(this.buffer);
+    this.gl.deleteProgram(this.program);
+    const lose = this.gl.getExtension('WEBGL_lose_context');
+    if (lose) lose.loseContext();
+  }
+}
+
+function rgb(color, alpha = 1) {
+  const [r, g, b] = hexToRgb01(color).map((value) => Math.round(value * 255));
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+
+class FallbackRenderer {
+  constructor(canvas, preset, options = {}) {
+    this.canvas = canvas;
+    this.preset = preset;
+    this.context = canvas.getContext('2d');
+    this.visible = true;
+    this.timePhase = 0;
+    this.dprCap = options.dprCap || 1.5;
+  }
+
+  resize() {
+    const rect = this.canvas.getBoundingClientRect();
+    const dpr = Math.min(window.devicePixelRatio || 1, this.dprCap);
+    const width = Math.max(2, Math.round(rect.width * dpr));
+    const height = Math.max(2, Math.round(rect.height * dpr));
+    if (this.canvas.width !== width || this.canvas.height !== height) {
+      this.canvas.width = width;
+      this.canvas.height = height;
+    }
+  }
+
+  drawNebula(time) {
+    const ctx = this.context;
+    const { width, height } = this.canvas;
+    const t = (time + this.timePhase) * (this.preset.speed || 1);
+    const phase = (this.preset.seed || 0) * 0.7;
+    const gradient = ctx.createLinearGradient(0, 0, width, height);
+    gradient.addColorStop(0, this.preset.colors[0]);
+    gradient.addColorStop(0.38, this.preset.colors[1]);
+    gradient.addColorStop(0.72, this.preset.colors[2]);
+    gradient.addColorStop(1, this.preset.colors[3]);
+    ctx.fillStyle = gradient;
+    ctx.fillRect(0, 0, width, height);
+
+    ctx.globalCompositeOperation = 'screen';
+    for (let index = 0; index < 6; index += 1) {
+      const x = (0.5 + 0.45 * Math.sin(t * 0.32 + index * 1.7 + phase)) * width;
+      const y = (0.5 + 0.4 * Math.cos(t * 0.25 + index + phase)) * height;
+      const radius = Math.max(width, height) * (0.08 + (index % 3) * 0.04);
+      const glow = ctx.createRadialGradient(x, y, 0, x, y, radius);
+      glow.addColorStop(0, rgb(this.preset.colors[(index + 1) % 4], 0.24));
+      glow.addColorStop(1, rgb(this.preset.colors[index % 4], 0));
+      ctx.fillStyle = glow;
+      ctx.fillRect(x - radius, y - radius, radius * 2, radius * 2);
+    }
+    ctx.globalCompositeOperation = 'source-over';
+  }
+
+  draw(time) {
+    if (!this.visible) return;
+    this.drawNebula(time);
+  }
+
+  setPreset(preset) {
+    this.preset = preset;
+  }
+
+  setDprCap(cap) {
+    this.dprCap = cap;
+    this.resize();
+  }
+
+  randomize() {
+    if (this.preset) {
+      this.preset.seed = Math.random() * 100;
+      this.timePhase = Math.random() * Math.PI * 2;
+    }
+  }
+  setMouseColor() {}
+  dispose() {}
+}
+
+export { CosmicRenderer as C, FallbackRenderer as F };

package/dist/chunks/emitter-CxLYMSbw.mjs

@@ -0,0 +1,38 @@
+/**
+ * Tiny event emitter. Accepts any event name so the API stays open for
+ * future events (hover, click, custom) without breaking changes.
+ */
+function createEmitter() {
+  // Plain object storage (no Map/Set) so the legacy build has no API
+  // dependencies beyond what IE11 provides.
+  const listeners = Object.create(null);
+
+  return {
+    on(event, fn) {
+      if (!listeners[event]) listeners[event] = [];
+      listeners[event].push(fn);
+      return () => {
+        const current = listeners[event];
+        if (current) {
+          const index = current.indexOf(fn);
+          if (index !== -1) current.splice(index, 1);
+        }
+      };
+    },
+    off(event, fn) {
+      const current = listeners[event];
+      if (!current) return false;
+      const index = current.indexOf(fn);
+      if (index === -1) return false;
+      current.splice(index, 1);
+      return true;
+    },
+    emit(event, ...args) {
+      const current = listeners[event];
+      if (!current) return;
+      for (const fn of current.slice()) fn(...args);
+    }
+  };
+}
+
+export { createEmitter as c };