@fjandin/react-shader 0.0.1

package/dist/ReactShader.d.ts

@@ -0,0 +1,3 @@
+import type { ReactShaderProps } from "./types";
+export declare function ReactShader({ className, fragment, vertex, uniforms, debug, fullscreen, timeScale, onFrame, }: ReactShaderProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ReactShader.d.ts.map

package/dist/ReactShader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactShader.d.ts","sourceRoot":"","sources":["../src/ReactShader.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAQ,MAAM,SAAS,CAAA;AAerD,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,QAAQ,EACR,MAAuB,EACvB,QAAQ,EACR,KAAa,EACb,UAAkB,EAClB,SAAa,EACb,OAAO,GACR,EAAE,gBAAgB,2CAiHlB"}

package/dist/example/frontend.d.ts

@@ -0,0 +1,9 @@
+/**
+ * This file is the entry point for the React app, it sets up the root
+ * element and renders the App component to the DOM.
+ *
+ * It is included in `src/index.html`.
+ */
+import "./style.css";
+export declare function App(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=frontend.d.ts.map

package/dist/example/frontend.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"frontend.d.ts","sourceRoot":"","sources":["../../src/example/frontend.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,aAAa,CAAA;AAsBpB,wBAAgB,GAAG,4CAyBlB"}

package/dist/example/glsl/circles.glsl.d.ts

@@ -0,0 +1,3 @@
+declare const _default: "\nvec3 Circles(\n  vec2 uv0,\n  float iterations,\n  float fractMultiplier,\n  float time,\n  float waveLength,\n  float edgeBlur,\n  float contrast\n) {\n  vec3 col = vec3(0.0);\n  vec2 uv = uv0;\n\n  for (float i = 0.0; i < iterations; i++) {\n    uv = fract(uv * fractMultiplier) - 0.5;\n\n    float d = length(uv) * exp(-length(uv0));\n\n    vec3 color = circlesPalette(length(uv0) + i * 0.4 + time * 0.4);\n\n    d = sin(d * waveLength + time) / waveLength;\n    d = abs(d);\n    d = pow(edgeBlur / d, contrast);\n\n    col += color * d;\n  }\n  return col;\n}\n";
+export default _default;
+//# sourceMappingURL=circles.glsl.d.ts.map

package/dist/example/glsl/circles.glsl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"circles.glsl.d.ts","sourceRoot":"","sources":["../../../src/example/glsl/circles.glsl.ts"],"names":[],"mappings":";AAAA,wBA4BC"}

package/dist/example/glsl/noise.glsl.d.ts

@@ -0,0 +1,3 @@
+declare const _default: "\n\nvec4 mod289(vec4 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }\n\nvec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }\n\nfloat mod289(float x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }\n\nvec4 permute(vec4 x) { return mod289(((x*34.0)+10.0)*x); }\n\nfloat permute(float x) { return mod289(((x*34.0)+10.0)*x); }\n\nvec4 taylorInvSqrt(vec4 r) { return 1.79284291400159 - 0.85373472095314 * r; }\n\nfloat taylorInvSqrt(float r) { return 1.79284291400159 - 0.85373472095314 * r; }\n\nvec4 grad4(float j, vec4 ip) {\n  const vec4 ones = vec4(1.0, 1.0, 1.0, -1.0);\n  vec4 p,s;\n\n  p.xyz = floor( fract (vec3(j) * ip.xyz) * 7.0) * ip.z - 1.0;\n  p.w = 1.5 - dot(abs(p.xyz), ones.xyz);\n  s = vec4(lessThan(p, vec4(0.0)));\n  p.xyz = p.xyz + (s.xyz*2.0 - 1.0) * s.www;\n\n  return p;\n}\n\n// (sqrt(5) - 1)/4 = F4, used once below\n#define F4 0.309016994374947451\n\nfloat SimplexNoise4D(vec4 v) {\n  const vec4  C = vec4( 0.138196601125011,  // (5 - sqrt(5))/20  G4\n                        0.276393202250021,  // 2 * G4\n                        0.414589803375032,  // 3 * G4\n                       -0.447213595499958); // -1 + 4 * G4\n\n  // First corner\n  vec4 i  = floor(v + dot(v, vec4(F4)) );\n  vec4 x0 = v -   i + dot(i, C.xxxx);\n\n  // Other corners\n\n  // Rank sorting originally contributed by Bill Licea-Kane, AMD (formerly ATI)\n  vec4 i0;\n  vec3 isX = step( x0.yzw, x0.xxx );\n  vec3 isYZ = step( x0.zww, x0.yyz );\n  //  i0.x = dot( isX, vec3( 1.0 ) );\n  i0.x = isX.x + isX.y + isX.z;\n  i0.yzw = 1.0 - isX;\n  //  i0.y += dot( isYZ.xy, vec2( 1.0 ) );\n  i0.y += isYZ.x + isYZ.y;\n  i0.zw += 1.0 - isYZ.xy;\n  i0.z += isYZ.z;\n  i0.w += 1.0 - isYZ.z;\n\n  // i0 now contains the unique values 0,1,2,3 in each channel\n  vec4 i3 = clamp( i0, 0.0, 1.0 );\n  vec4 i2 = clamp( i0-1.0, 0.0, 1.0 );\n  vec4 i1 = clamp( i0-2.0, 0.0, 1.0 );\n\n  //  x0 = x0 - 0.0 + 0.0 * C.xxxx\n  //  x1 = x0 - i1  + 1.0 * C.xxxx\n  //  x2 = x0 - i2  + 2.0 * C.xxxx\n  //  x3 = x0 - i3  + 3.0 * C.xxxx\n  //  x4 = x0 - 1.0 + 4.0 * C.xxxx\n  vec4 x1 = x0 - i1 + C.xxxx;\n  vec4 x2 = x0 - i2 + C.yyyy;\n  vec4 x3 = x0 - i3 + C.zzzz;\n  vec4 x4 = x0 + C.wwww;\n\n  // Permutations\n  i = mod289(i);\n  float j0 = permute( permute( permute( permute(i.w) + i.z) + i.y) + i.x);\n  vec4 j1 = permute( permute( permute( permute (\n             i.w + vec4(i1.w, i2.w, i3.w, 1.0 ))\n           + i.z + vec4(i1.z, i2.z, i3.z, 1.0 ))\n           + i.y + vec4(i1.y, i2.y, i3.y, 1.0 ))\n           + i.x + vec4(i1.x, i2.x, i3.x, 1.0 ));\n\n  // Gradients: 7x7x6 points over a cube, mapped onto a 4-cross polytope\n  // 7*7*6 = 294, which is close to the ring size 17*17 = 289.\n  vec4 ip = vec4(1.0/294.0, 1.0/49.0, 1.0/7.0, 0.0) ;\n\n  vec4 p0 = grad4(j0,   ip);\n  vec4 p1 = grad4(j1.x, ip);\n  vec4 p2 = grad4(j1.y, ip);\n  vec4 p3 = grad4(j1.z, ip);\n  vec4 p4 = grad4(j1.w, ip);\n\n  // Normalise gradients\n  vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));\n  p0 *= norm.x;\n  p1 *= norm.y;\n  p2 *= norm.z;\n  p3 *= norm.w;\n  p4 *= taylorInvSqrt(dot(p4,p4));\n\n  // Mix contributions from the five corners\n  vec3 m0 = max(0.6 - vec3(dot(x0,x0), dot(x1,x1), dot(x2,x2)), 0.0);\n  vec2 m1 = max(0.6 - vec2(dot(x3,x3), dot(x4,x4)            ), 0.0);\n  m0 = m0 * m0;\n  m1 = m1 * m1;\n  return 49.0 * ( dot(m0*m0, vec3( dot( p0, x0 ), dot( p1, x1 ), dot( p2, x2 )))\n               + dot(m1*m1, vec2( dot( p3, x3 ), dot( p4, x4 ) ) ) ) ;\n}\n\nfloat SimplexNoise(vec3 v) {\n  const vec2  C = vec2(1.0/6.0, 1.0/3.0) ;\n  const vec4  D = vec4(0.0, 0.5, 1.0, 2.0);\n\n  // First corner\n  vec3 i  = floor(v + dot(v, C.yyy) );\n  vec3 x0 =   v - i + dot(i, C.xxx) ;\n\n  // Other corners\n  vec3 g = step(x0.yzx, x0.xyz);\n  vec3 l = 1.0 - g;\n  vec3 i1 = min( g.xyz, l.zxy );\n  vec3 i2 = max( g.xyz, l.zxy );\n\n  //   x0 = x0 - 0.0 + 0.0 * C.xxx;\n  //   x1 = x0 - i1  + 1.0 * C.xxx;\n  //   x2 = x0 - i2  + 2.0 * C.xxx;\n  //   x3 = x0 - 1.0 + 3.0 * C.xxx;\n  vec3 x1 = x0 - i1 + C.xxx;\n  vec3 x2 = x0 - i2 + C.yyy; // 2.0*C.x = 1/3 = C.y\n  vec3 x3 = x0 - D.yyy;      // -1.0+3.0*C.x = -0.5 = -D.y\n\n  // Permutations\n  i = mod289(i);\n  vec4 p = permute( permute( permute(\n             i.z + vec4(0.0, i1.z, i2.z, 1.0 ))\n           + i.y + vec4(0.0, i1.y, i2.y, 1.0 ))\n           + i.x + vec4(0.0, i1.x, i2.x, 1.0 ));\n\n  // Gradients: 7x7 points over a square, mapped onto an octahedron.\n  // The ring size 17*17 = 289 is close to a multiple of 49 (49*6 = 294)\n  float n_ = 0.142857142857; // 1.0/7.0\n  vec3  ns = n_ * D.wyz - D.xzx;\n\n  vec4 j = p - 49.0 * floor(p * ns.z * ns.z);  //  mod(p,7*7)\n\n  vec4 x_ = floor(j * ns.z);\n  vec4 y_ = floor(j - 7.0 * x_ );    // mod(j,N)\n\n  vec4 x = x_ *ns.x + ns.yyyy;\n  vec4 y = y_ *ns.x + ns.yyyy;\n  vec4 h = 1.0 - abs(x) - abs(y);\n\n  vec4 b0 = vec4( x.xy, y.xy );\n  vec4 b1 = vec4( x.zw, y.zw );\n\n  //vec4 s0 = vec4(lessThan(b0,0.0))*2.0 - 1.0;\n  //vec4 s1 = vec4(lessThan(b1,0.0))*2.0 - 1.0;\n  vec4 s0 = floor(b0)*2.0 + 1.0;\n  vec4 s1 = floor(b1)*2.0 + 1.0;\n  vec4 sh = -step(h, vec4(0.0));\n\n  vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ;\n  vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ;\n\n  vec3 p0 = vec3(a0.xy,h.x);\n  vec3 p1 = vec3(a0.zw,h.y);\n  vec3 p2 = vec3(a1.xy,h.z);\n  vec3 p3 = vec3(a1.zw,h.w);\n\n  // Normalise gradients\n  vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));\n  p0 *= norm.x;\n  p1 *= norm.y;\n  p2 *= norm.z;\n  p3 *= norm.w;\n\n  // Mix final noise value\n  vec4 m = max(0.5 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);\n  m = m * m;\n  return 105.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1),\n                                dot(p2,x2), dot(p3,x3) ) );\n}\n";
+export default _default;
+//# sourceMappingURL=noise.glsl.d.ts.map

package/dist/example/glsl/noise.glsl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"noise.glsl.d.ts","sourceRoot":"","sources":["../../../src/example/glsl/noise.glsl.ts"],"names":[],"mappings":";AAWA,wBAoLC"}

package/dist/example/glsl/palette.glsl.d.ts

@@ -0,0 +1,2 @@
+export declare const generatePaletteFunction: (name: string, paletteString: string) => string;
+//# sourceMappingURL=palette.glsl.d.ts.map

package/dist/example/glsl/palette.glsl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"palette.glsl.d.ts","sourceRoot":"","sources":["../../../src/example/glsl/palette.glsl.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,uBAAuB,GAAI,MAAM,MAAM,EAAE,eAAe,MAAM,WAgB1E,CAAA"}

package/dist/example/index.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/example/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/example/index.ts"],"names":[],"mappings":""}

package/dist/example/shader.d.ts

@@ -0,0 +1,2 @@
+export declare const fragment: string;
+//# sourceMappingURL=shader.d.ts.map

package/dist/example/shader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shader.d.ts","sourceRoot":"","sources":["../../src/example/shader.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,QAAQ,QAsFnB,CAAA"}

package/dist/hooks/useWebGL.d.ts

@@ -0,0 +1,22 @@
+import type { UniformValue } from "../types";
+export interface FrameInfo {
+    deltaTime: number;
+    time: number;
+    resolution: [number, number];
+    mouse: [number, number];
+}
+interface UseWebGLOptions {
+    fragment: string;
+    vertex: string;
+    uniforms?: Record<string, UniformValue>;
+    onError?: (error: Error) => void;
+    onFrame?: (info: FrameInfo) => void;
+    running?: boolean;
+    timeScale?: number;
+}
+export declare function useWebGL(options: UseWebGLOptions): {
+    canvasRef: import("react").RefObject<HTMLCanvasElement>;
+    mouseRef: import("react").MutableRefObject<[number, number]>;
+};
+export {};
+//# sourceMappingURL=useWebGL.d.ts.map

package/dist/hooks/useWebGL.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useWebGL.d.ts","sourceRoot":"","sources":["../../src/hooks/useWebGL.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAI5C,MAAM,WAAW,SAAS;IACxB,SAAS,EAAE,MAAM,CAAA;IACjB,IAAI,EAAE,MAAM,CAAA;IACZ,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAC5B,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;CACxB;AAED,UAAU,eAAe;IACvB,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,CAAA;IACvC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;IAChC,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAA;IACnC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAoDD,wBAAgB,QAAQ,CAAC,OAAO,EAAE,eAAe;;;EAiNhD"}

package/dist/index.cjs

@@ -0,0 +1,451 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __moduleCache = /* @__PURE__ */ new WeakMap;
+var __toCommonJS = (from) => {
+  var entry = __moduleCache.get(from), desc;
+  if (entry)
+    return entry;
+  entry = __defProp({}, "__esModule", { value: true });
+  if (from && typeof from === "object" || typeof from === "function")
+    __getOwnPropNames(from).map((key) => !__hasOwnProp.call(entry, key) && __defProp(entry, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    }));
+  __moduleCache.set(from, entry);
+  return entry;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, {
+      get: all[name],
+      enumerable: true,
+      configurable: true,
+      set: (newValue) => all[name] = () => newValue
+    });
+};
+
+// src/index.ts
+var exports_src = {};
+__export(exports_src, {
+  ReactShader: () => ReactShader
+});
+module.exports = __toCommonJS(exports_src);
+
+// src/ReactShader.tsx
+var import_react2 = require("react");
+
+// src/hooks/useWebGL.ts
+var import_react = require("react");
+
+// src/utils/shader.ts
+function compileShader(gl, type, source) {
+  const shader = gl.createShader(type);
+  if (!shader) {
+    throw new Error(`Failed to create shader of type ${type === gl.VERTEX_SHADER ? "VERTEX" : "FRAGMENT"}`);
+  }
+  gl.shaderSource(shader, source);
+  gl.compileShader(shader);
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    const info = gl.getShaderInfoLog(shader);
+    gl.deleteShader(shader);
+    const shaderType = type === gl.VERTEX_SHADER ? "Vertex" : "Fragment";
+    throw new Error(`${shaderType} shader compilation failed:
+${info}`);
+  }
+  return shader;
+}
+function createProgram(gl, vertexShader, fragmentShader) {
+  const program = gl.createProgram();
+  if (!program) {
+    throw new Error("Failed to create WebGL program");
+  }
+  gl.attachShader(program, vertexShader);
+  gl.attachShader(program, fragmentShader);
+  gl.linkProgram(program);
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    const info = gl.getProgramInfoLog(program);
+    gl.deleteProgram(program);
+    throw new Error(`Program linking failed:
+${info}`);
+  }
+  return program;
+}
+function createShaderProgram(gl, vertexSource, fragmentSource) {
+  const vertexShader = compileShader(gl, gl.VERTEX_SHADER, vertexSource);
+  const fragmentShader = compileShader(gl, gl.FRAGMENT_SHADER, fragmentSource);
+  try {
+    return createProgram(gl, vertexShader, fragmentShader);
+  } finally {
+    gl.deleteShader(vertexShader);
+    gl.deleteShader(fragmentShader);
+  }
+}
+
+// src/utils/uniforms.ts
+function isVec2(value) {
+  return Array.isArray(value) && value.length === 2;
+}
+function isVec3(value) {
+  return Array.isArray(value) && value.length === 3;
+}
+function isVec4(value) {
+  return Array.isArray(value) && value.length === 4;
+}
+function setUniform(gl, location, value) {
+  if (location === null) {
+    return;
+  }
+  if (typeof value === "number") {
+    gl.uniform1f(location, value);
+  } else if (isVec4(value)) {
+    gl.uniform4f(location, value[0], value[1], value[2], value[3]);
+  } else if (isVec3(value)) {
+    gl.uniform3f(location, value[0], value[1], value[2]);
+  } else if (isVec2(value)) {
+    gl.uniform2f(location, value[0], value[1]);
+  }
+}
+function getUniformLocation(gl, program, name) {
+  return gl.getUniformLocation(program, name);
+}
+function setUniforms(gl, program, uniforms, locationCache) {
+  for (const [name, value] of Object.entries(uniforms)) {
+    let location = locationCache.get(name);
+    if (location === undefined) {
+      location = getUniformLocation(gl, program, name);
+      locationCache.set(name, location);
+    }
+    setUniform(gl, location, value);
+  }
+}
+function createUniformLocationCache() {
+  return new Map;
+}
+
+// src/hooks/useWebGL.ts
+function initializeWebGL(canvas, vertexSource, fragmentSource) {
+  const gl = canvas.getContext("webgl2") || canvas.getContext("webgl");
+  if (!gl) {
+    throw new Error("WebGL not supported");
+  }
+  const program = createShaderProgram(gl, vertexSource, fragmentSource);
+  const positionBuffer = gl.createBuffer();
+  if (!positionBuffer) {
+    throw new Error("Failed to create position buffer");
+  }
+  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+  const positions = new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]);
+  gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);
+  const positionAttributeLocation = gl.getAttribLocation(program, "a_position");
+  if (positionAttributeLocation === -1) {
+    throw new Error('Vertex shader must have an "a_position" attribute');
+  }
+  return {
+    gl,
+    program,
+    positionBuffer,
+    positionAttributeLocation,
+    uniformLocationCache: createUniformLocationCache()
+  };
+}
+function cleanupWebGL(gl, state) {
+  gl.deleteBuffer(state.positionBuffer);
+  gl.deleteProgram(state.program);
+}
+function useWebGL(options) {
+  const canvasRef = import_react.useRef(null);
+  const stateRef = import_react.useRef(null);
+  const animationFrameRef = import_react.useRef(0);
+  const elapsedTimeRef = import_react.useRef(0);
+  const lastFrameTimeRef = import_react.useRef(0);
+  const mouseRef = import_react.useRef([0, 0]);
+  const mouseLeftDownRef = import_react.useRef(false);
+  const canvasRectRef = import_react.useRef(null);
+  const contextLostRef = import_react.useRef(false);
+  const uniformsRef = import_react.useRef(options.uniforms);
+  const onErrorRef = import_react.useRef(options.onError);
+  const onFrameRef = import_react.useRef(options.onFrame);
+  const timeScaleRef = import_react.useRef(options.timeScale ?? 1);
+  const vertexRef = import_react.useRef(options.vertex);
+  const fragmentRef = import_react.useRef(options.fragment);
+  uniformsRef.current = options.uniforms;
+  onErrorRef.current = options.onError;
+  onFrameRef.current = options.onFrame;
+  timeScaleRef.current = options.timeScale ?? 1;
+  vertexRef.current = options.vertex;
+  fragmentRef.current = options.fragment;
+  const render = import_react.useCallback((time) => {
+    if (contextLostRef.current)
+      return;
+    const state = stateRef.current;
+    const canvas = canvasRef.current;
+    if (!state || !canvas)
+      return;
+    const deltaTime = lastFrameTimeRef.current === 0 ? 0 : (time - lastFrameTimeRef.current) / 1000;
+    lastFrameTimeRef.current = time;
+    elapsedTimeRef.current += deltaTime * timeScaleRef.current;
+    const { gl, program, positionAttributeLocation, uniformLocationCache } = state;
+    const elapsedTime = elapsedTimeRef.current;
+    const dpr = window.devicePixelRatio || 1;
+    const displayWidth = canvas.clientWidth;
+    const displayHeight = canvas.clientHeight;
+    if (displayWidth === 0 || displayHeight === 0) {
+      animationFrameRef.current = requestAnimationFrame(render);
+      return;
+    }
+    const bufferWidth = Math.round(displayWidth * dpr);
+    const bufferHeight = Math.round(displayHeight * dpr);
+    if (canvas.width !== bufferWidth || canvas.height !== bufferHeight) {
+      canvas.width = bufferWidth;
+      canvas.height = bufferHeight;
+      gl.viewport(0, 0, bufferWidth, bufferHeight);
+    }
+    gl.clearColor(0, 0, 0, 1);
+    gl.clear(gl.COLOR_BUFFER_BIT);
+    gl.useProgram(program);
+    gl.enableVertexAttribArray(positionAttributeLocation);
+    gl.bindBuffer(gl.ARRAY_BUFFER, state.positionBuffer);
+    gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);
+    const defaultUniforms = {
+      iTime: elapsedTime,
+      iMouse: mouseRef.current,
+      iMouseLeftDown: mouseLeftDownRef.current ? 1 : 0,
+      iResolution: [canvas.width, canvas.height]
+    };
+    setUniforms(gl, program, defaultUniforms, uniformLocationCache);
+    if (uniformsRef.current) {
+      setUniforms(gl, program, uniformsRef.current, uniformLocationCache);
+    }
+    gl.drawArrays(gl.TRIANGLES, 0, 6);
+    if (onFrameRef.current) {
+      onFrameRef.current({
+        deltaTime,
+        time: elapsedTime,
+        resolution: [canvas.width, canvas.height],
+        mouse: mouseRef.current
+      });
+    }
+    animationFrameRef.current = requestAnimationFrame(render);
+  }, []);
+  import_react.useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas)
+      return;
+    const initialize = () => {
+      try {
+        stateRef.current = initializeWebGL(canvas, vertexRef.current, fragmentRef.current);
+        elapsedTimeRef.current = 0;
+        lastFrameTimeRef.current = 0;
+        contextLostRef.current = false;
+        animationFrameRef.current = requestAnimationFrame(render);
+      } catch (err) {
+        const error = err instanceof Error ? err : new Error(String(err));
+        if (onErrorRef.current) {
+          onErrorRef.current(error);
+        } else {
+          console.error("WebGL initialization failed:", error);
+        }
+      }
+    };
+    const handleContextLost = (event) => {
+      event.preventDefault();
+      contextLostRef.current = true;
+      cancelAnimationFrame(animationFrameRef.current);
+      stateRef.current = null;
+    };
+    const handleContextRestored = () => {
+      initialize();
+    };
+    canvas.addEventListener("webglcontextlost", handleContextLost);
+    canvas.addEventListener("webglcontextrestored", handleContextRestored);
+    initialize();
+    return () => {
+      canvas.removeEventListener("webglcontextlost", handleContextLost);
+      canvas.removeEventListener("webglcontextrestored", handleContextRestored);
+      cancelAnimationFrame(animationFrameRef.current);
+      if (stateRef.current) {
+        cleanupWebGL(stateRef.current.gl, stateRef.current);
+        stateRef.current = null;
+      }
+    };
+  }, [render]);
+  import_react.useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas)
+      return;
+    const updateRect = () => {
+      canvasRectRef.current = canvas.getBoundingClientRect();
+    };
+    updateRect();
+    const resizeObserver = new ResizeObserver(updateRect);
+    resizeObserver.observe(canvas);
+    window.addEventListener("scroll", updateRect, { passive: true });
+    const handleMouseMove = (event) => {
+      const rect = canvasRectRef.current;
+      if (!rect)
+        return;
+      const dpr = window.devicePixelRatio || 1;
+      const x = (event.clientX - rect.left) * dpr;
+      const y = (rect.height - (event.clientY - rect.top)) * dpr;
+      mouseRef.current = [x, y];
+    };
+    const handleMouseDown = (event) => {
+      if (event.button === 0) {
+        mouseLeftDownRef.current = true;
+      }
+    };
+    const handleMouseUp = (event) => {
+      if (event.button === 0) {
+        mouseLeftDownRef.current = false;
+      }
+    };
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("mousedown", handleMouseDown);
+    window.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      resizeObserver.disconnect();
+      window.removeEventListener("scroll", updateRect);
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mousedown", handleMouseDown);
+      window.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, []);
+  return { canvasRef, mouseRef };
+}
+
+// src/ReactShader.tsx
+var jsx_dev_runtime = require("react/jsx-dev-runtime");
+var DEFAULT_VERTEX = `#version 300 es
+in vec2 a_position;
+
+void main() {
+  gl_Position = vec4(a_position, 0.0, 1.0);
+}
+`;
+function ReactShader({
+  className,
+  fragment,
+  vertex = DEFAULT_VERTEX,
+  uniforms,
+  debug = false,
+  fullscreen = false,
+  timeScale = 1,
+  onFrame
+}) {
+  const [error, setError] = import_react2.useState(null);
+  const [debugInfo, setDebugInfo] = import_react2.useState({
+    iResolution: [0, 0],
+    iMouse: [0, 0]
+  });
+  const lastDebugUpdateRef = import_react2.useRef(0);
+  const handleError = import_react2.useCallback((err) => {
+    setError(err.message);
+    console.error("ReactShader error:", err);
+  }, []);
+  const handleFrame = import_react2.useCallback((info) => {
+    if (onFrame) {
+      onFrame(info);
+    }
+    if (!debug)
+      return;
+    const now = performance.now();
+    if (now - lastDebugUpdateRef.current < 100)
+      return;
+    lastDebugUpdateRef.current = now;
+    setDebugInfo({
+      iResolution: info.resolution,
+      iMouse: info.mouse
+    });
+  }, [debug, onFrame]);
+  import_react2.useEffect(() => {
+    setError(null);
+  }, [fragment, vertex]);
+  const { canvasRef } = useWebGL({
+    fragment,
+    vertex,
+    uniforms,
+    onError: handleError,
+    onFrame: handleFrame,
+    timeScale
+  });
+  const containerStyle = fullscreen ? {
+    position: "fixed",
+    top: 0,
+    left: 0,
+    width: "100vw",
+    height: "100vh",
+    zIndex: 9000
+  } : {
+    position: "relative",
+    width: "100%",
+    height: "100%"
+  };
+  if (error) {
+    return /* @__PURE__ */ jsx_dev_runtime.jsxDEV("div", {
+      className,
+      style: {
+        ...containerStyle,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: "#1a1a1a",
+        color: "#ff6b6b",
+        fontFamily: "monospace",
+        fontSize: "12px",
+        padding: "16px",
+        overflow: "auto",
+        boxSizing: "border-box"
+      },
+      children: /* @__PURE__ */ jsx_dev_runtime.jsxDEV("pre", {
+        style: { margin: 0, whiteSpace: "pre-wrap" },
+        children: error
+      }, undefined, false, undefined, this)
+    }, undefined, false, undefined, this);
+  }
+  return /* @__PURE__ */ jsx_dev_runtime.jsxDEV("div", {
+    style: containerStyle,
+    children: [
+      /* @__PURE__ */ jsx_dev_runtime.jsxDEV("canvas", {
+        ref: canvasRef,
+        className,
+        style: { display: "block", width: "100%", height: "100%" }
+      }, undefined, false, undefined, this),
+      debug && /* @__PURE__ */ jsx_dev_runtime.jsxDEV("div", {
+        style: {
+          position: "absolute",
+          top: 8,
+          left: 8,
+          backgroundColor: "rgba(0, 0, 0, 0.7)",
+          color: "#fff",
+          fontFamily: "monospace",
+          fontSize: "12px",
+          padding: "8px",
+          borderRadius: "4px",
+          pointerEvents: "none"
+        },
+        children: [
+          /* @__PURE__ */ jsx_dev_runtime.jsxDEV("div", {
+            children: [
+              "iResolution: [",
+              debugInfo.iResolution[0],
+              ", ",
+              debugInfo.iResolution[1],
+              "]"
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsx_dev_runtime.jsxDEV("div", {
+            children: [
+              "iMouse: [",
+              Math.round(debugInfo.iMouse[0]),
+              ", ",
+              Math.round(debugInfo.iMouse[1]),
+              "]"
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { ReactShader } from "./ReactShader";
+export type { DefaultUniforms, ReactShaderProps, UniformValue, Vec2, Vec3, Vec4, } from "./types";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,YAAY,EACV,eAAe,EACf,gBAAgB,EAChB,YAAY,EACZ,IAAI,EACJ,IAAI,EACJ,IAAI,GACL,MAAM,SAAS,CAAA"}

package/dist/index.js

@@ -0,0 +1,419 @@
+// src/ReactShader.tsx
+import { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef2, useState } from "react";
+
+// src/hooks/useWebGL.ts
+import { useCallback, useEffect, useRef } from "react";
+
+// src/utils/shader.ts
+function compileShader(gl, type, source) {
+  const shader = gl.createShader(type);
+  if (!shader) {
+    throw new Error(`Failed to create shader of type ${type === gl.VERTEX_SHADER ? "VERTEX" : "FRAGMENT"}`);
+  }
+  gl.shaderSource(shader, source);
+  gl.compileShader(shader);
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    const info = gl.getShaderInfoLog(shader);
+    gl.deleteShader(shader);
+    const shaderType = type === gl.VERTEX_SHADER ? "Vertex" : "Fragment";
+    throw new Error(`${shaderType} shader compilation failed:
+${info}`);
+  }
+  return shader;
+}
+function createProgram(gl, vertexShader, fragmentShader) {
+  const program = gl.createProgram();
+  if (!program) {
+    throw new Error("Failed to create WebGL program");
+  }
+  gl.attachShader(program, vertexShader);
+  gl.attachShader(program, fragmentShader);
+  gl.linkProgram(program);
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    const info = gl.getProgramInfoLog(program);
+    gl.deleteProgram(program);
+    throw new Error(`Program linking failed:
+${info}`);
+  }
+  return program;
+}
+function createShaderProgram(gl, vertexSource, fragmentSource) {
+  const vertexShader = compileShader(gl, gl.VERTEX_SHADER, vertexSource);
+  const fragmentShader = compileShader(gl, gl.FRAGMENT_SHADER, fragmentSource);
+  try {
+    return createProgram(gl, vertexShader, fragmentShader);
+  } finally {
+    gl.deleteShader(vertexShader);
+    gl.deleteShader(fragmentShader);
+  }
+}
+
+// src/utils/uniforms.ts
+function isVec2(value) {
+  return Array.isArray(value) && value.length === 2;
+}
+function isVec3(value) {
+  return Array.isArray(value) && value.length === 3;
+}
+function isVec4(value) {
+  return Array.isArray(value) && value.length === 4;
+}
+function setUniform(gl, location, value) {
+  if (location === null) {
+    return;
+  }
+  if (typeof value === "number") {
+    gl.uniform1f(location, value);
+  } else if (isVec4(value)) {
+    gl.uniform4f(location, value[0], value[1], value[2], value[3]);
+  } else if (isVec3(value)) {
+    gl.uniform3f(location, value[0], value[1], value[2]);
+  } else if (isVec2(value)) {
+    gl.uniform2f(location, value[0], value[1]);
+  }
+}
+function getUniformLocation(gl, program, name) {
+  return gl.getUniformLocation(program, name);
+}
+function setUniforms(gl, program, uniforms, locationCache) {
+  for (const [name, value] of Object.entries(uniforms)) {
+    let location = locationCache.get(name);
+    if (location === undefined) {
+      location = getUniformLocation(gl, program, name);
+      locationCache.set(name, location);
+    }
+    setUniform(gl, location, value);
+  }
+}
+function createUniformLocationCache() {
+  return new Map;
+}
+
+// src/hooks/useWebGL.ts
+function initializeWebGL(canvas, vertexSource, fragmentSource) {
+  const gl = canvas.getContext("webgl2") || canvas.getContext("webgl");
+  if (!gl) {
+    throw new Error("WebGL not supported");
+  }
+  const program = createShaderProgram(gl, vertexSource, fragmentSource);
+  const positionBuffer = gl.createBuffer();
+  if (!positionBuffer) {
+    throw new Error("Failed to create position buffer");
+  }
+  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+  const positions = new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]);
+  gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);
+  const positionAttributeLocation = gl.getAttribLocation(program, "a_position");
+  if (positionAttributeLocation === -1) {
+    throw new Error('Vertex shader must have an "a_position" attribute');
+  }
+  return {
+    gl,
+    program,
+    positionBuffer,
+    positionAttributeLocation,
+    uniformLocationCache: createUniformLocationCache()
+  };
+}
+function cleanupWebGL(gl, state) {
+  gl.deleteBuffer(state.positionBuffer);
+  gl.deleteProgram(state.program);
+}
+function useWebGL(options) {
+  const canvasRef = useRef(null);
+  const stateRef = useRef(null);
+  const animationFrameRef = useRef(0);
+  const elapsedTimeRef = useRef(0);
+  const lastFrameTimeRef = useRef(0);
+  const mouseRef = useRef([0, 0]);
+  const mouseLeftDownRef = useRef(false);
+  const canvasRectRef = useRef(null);
+  const contextLostRef = useRef(false);
+  const uniformsRef = useRef(options.uniforms);
+  const onErrorRef = useRef(options.onError);
+  const onFrameRef = useRef(options.onFrame);
+  const timeScaleRef = useRef(options.timeScale ?? 1);
+  const vertexRef = useRef(options.vertex);
+  const fragmentRef = useRef(options.fragment);
+  uniformsRef.current = options.uniforms;
+  onErrorRef.current = options.onError;
+  onFrameRef.current = options.onFrame;
+  timeScaleRef.current = options.timeScale ?? 1;
+  vertexRef.current = options.vertex;
+  fragmentRef.current = options.fragment;
+  const render = useCallback((time) => {
+    if (contextLostRef.current)
+      return;
+    const state = stateRef.current;
+    const canvas = canvasRef.current;
+    if (!state || !canvas)
+      return;
+    const deltaTime = lastFrameTimeRef.current === 0 ? 0 : (time - lastFrameTimeRef.current) / 1000;
+    lastFrameTimeRef.current = time;
+    elapsedTimeRef.current += deltaTime * timeScaleRef.current;
+    const { gl, program, positionAttributeLocation, uniformLocationCache } = state;
+    const elapsedTime = elapsedTimeRef.current;
+    const dpr = window.devicePixelRatio || 1;
+    const displayWidth = canvas.clientWidth;
+    const displayHeight = canvas.clientHeight;
+    if (displayWidth === 0 || displayHeight === 0) {
+      animationFrameRef.current = requestAnimationFrame(render);
+      return;
+    }
+    const bufferWidth = Math.round(displayWidth * dpr);
+    const bufferHeight = Math.round(displayHeight * dpr);
+    if (canvas.width !== bufferWidth || canvas.height !== bufferHeight) {
+      canvas.width = bufferWidth;
+      canvas.height = bufferHeight;
+      gl.viewport(0, 0, bufferWidth, bufferHeight);
+    }
+    gl.clearColor(0, 0, 0, 1);
+    gl.clear(gl.COLOR_BUFFER_BIT);
+    gl.useProgram(program);
+    gl.enableVertexAttribArray(positionAttributeLocation);
+    gl.bindBuffer(gl.ARRAY_BUFFER, state.positionBuffer);
+    gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);
+    const defaultUniforms = {
+      iTime: elapsedTime,
+      iMouse: mouseRef.current,
+      iMouseLeftDown: mouseLeftDownRef.current ? 1 : 0,
+      iResolution: [canvas.width, canvas.height]
+    };
+    setUniforms(gl, program, defaultUniforms, uniformLocationCache);
+    if (uniformsRef.current) {
+      setUniforms(gl, program, uniformsRef.current, uniformLocationCache);
+    }
+    gl.drawArrays(gl.TRIANGLES, 0, 6);
+    if (onFrameRef.current) {
+      onFrameRef.current({
+        deltaTime,
+        time: elapsedTime,
+        resolution: [canvas.width, canvas.height],
+        mouse: mouseRef.current
+      });
+    }
+    animationFrameRef.current = requestAnimationFrame(render);
+  }, []);
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas)
+      return;
+    const initialize = () => {
+      try {
+        stateRef.current = initializeWebGL(canvas, vertexRef.current, fragmentRef.current);
+        elapsedTimeRef.current = 0;
+        lastFrameTimeRef.current = 0;
+        contextLostRef.current = false;
+        animationFrameRef.current = requestAnimationFrame(render);
+      } catch (err) {
+        const error = err instanceof Error ? err : new Error(String(err));
+        if (onErrorRef.current) {
+          onErrorRef.current(error);
+        } else {
+          console.error("WebGL initialization failed:", error);
+        }
+      }
+    };
+    const handleContextLost = (event) => {
+      event.preventDefault();
+      contextLostRef.current = true;
+      cancelAnimationFrame(animationFrameRef.current);
+      stateRef.current = null;
+    };
+    const handleContextRestored = () => {
+      initialize();
+    };
+    canvas.addEventListener("webglcontextlost", handleContextLost);
+    canvas.addEventListener("webglcontextrestored", handleContextRestored);
+    initialize();
+    return () => {
+      canvas.removeEventListener("webglcontextlost", handleContextLost);
+      canvas.removeEventListener("webglcontextrestored", handleContextRestored);
+      cancelAnimationFrame(animationFrameRef.current);
+      if (stateRef.current) {
+        cleanupWebGL(stateRef.current.gl, stateRef.current);
+        stateRef.current = null;
+      }
+    };
+  }, [render]);
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas)
+      return;
+    const updateRect = () => {
+      canvasRectRef.current = canvas.getBoundingClientRect();
+    };
+    updateRect();
+    const resizeObserver = new ResizeObserver(updateRect);
+    resizeObserver.observe(canvas);
+    window.addEventListener("scroll", updateRect, { passive: true });
+    const handleMouseMove = (event) => {
+      const rect = canvasRectRef.current;
+      if (!rect)
+        return;
+      const dpr = window.devicePixelRatio || 1;
+      const x = (event.clientX - rect.left) * dpr;
+      const y = (rect.height - (event.clientY - rect.top)) * dpr;
+      mouseRef.current = [x, y];
+    };
+    const handleMouseDown = (event) => {
+      if (event.button === 0) {
+        mouseLeftDownRef.current = true;
+      }
+    };
+    const handleMouseUp = (event) => {
+      if (event.button === 0) {
+        mouseLeftDownRef.current = false;
+      }
+    };
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("mousedown", handleMouseDown);
+    window.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      resizeObserver.disconnect();
+      window.removeEventListener("scroll", updateRect);
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mousedown", handleMouseDown);
+      window.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, []);
+  return { canvasRef, mouseRef };
+}
+
+// src/ReactShader.tsx
+import { jsxDEV } from "react/jsx-dev-runtime";
+var DEFAULT_VERTEX = `#version 300 es
+in vec2 a_position;
+
+void main() {
+  gl_Position = vec4(a_position, 0.0, 1.0);
+}
+`;
+function ReactShader({
+  className,
+  fragment,
+  vertex = DEFAULT_VERTEX,
+  uniforms,
+  debug = false,
+  fullscreen = false,
+  timeScale = 1,
+  onFrame
+}) {
+  const [error, setError] = useState(null);
+  const [debugInfo, setDebugInfo] = useState({
+    iResolution: [0, 0],
+    iMouse: [0, 0]
+  });
+  const lastDebugUpdateRef = useRef2(0);
+  const handleError = useCallback2((err) => {
+    setError(err.message);
+    console.error("ReactShader error:", err);
+  }, []);
+  const handleFrame = useCallback2((info) => {
+    if (onFrame) {
+      onFrame(info);
+    }
+    if (!debug)
+      return;
+    const now = performance.now();
+    if (now - lastDebugUpdateRef.current < 100)
+      return;
+    lastDebugUpdateRef.current = now;
+    setDebugInfo({
+      iResolution: info.resolution,
+      iMouse: info.mouse
+    });
+  }, [debug, onFrame]);
+  useEffect2(() => {
+    setError(null);
+  }, [fragment, vertex]);
+  const { canvasRef } = useWebGL({
+    fragment,
+    vertex,
+    uniforms,
+    onError: handleError,
+    onFrame: handleFrame,
+    timeScale
+  });
+  const containerStyle = fullscreen ? {
+    position: "fixed",
+    top: 0,
+    left: 0,
+    width: "100vw",
+    height: "100vh",
+    zIndex: 9000
+  } : {
+    position: "relative",
+    width: "100%",
+    height: "100%"
+  };
+  if (error) {
+    return /* @__PURE__ */ jsxDEV("div", {
+      className,
+      style: {
+        ...containerStyle,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: "#1a1a1a",
+        color: "#ff6b6b",
+        fontFamily: "monospace",
+        fontSize: "12px",
+        padding: "16px",
+        overflow: "auto",
+        boxSizing: "border-box"
+      },
+      children: /* @__PURE__ */ jsxDEV("pre", {
+        style: { margin: 0, whiteSpace: "pre-wrap" },
+        children: error
+      }, undefined, false, undefined, this)
+    }, undefined, false, undefined, this);
+  }
+  return /* @__PURE__ */ jsxDEV("div", {
+    style: containerStyle,
+    children: [
+      /* @__PURE__ */ jsxDEV("canvas", {
+        ref: canvasRef,
+        className,
+        style: { display: "block", width: "100%", height: "100%" }
+      }, undefined, false, undefined, this),
+      debug && /* @__PURE__ */ jsxDEV("div", {
+        style: {
+          position: "absolute",
+          top: 8,
+          left: 8,
+          backgroundColor: "rgba(0, 0, 0, 0.7)",
+          color: "#fff",
+          fontFamily: "monospace",
+          fontSize: "12px",
+          padding: "8px",
+          borderRadius: "4px",
+          pointerEvents: "none"
+        },
+        children: [
+          /* @__PURE__ */ jsxDEV("div", {
+            children: [
+              "iResolution: [",
+              debugInfo.iResolution[0],
+              ", ",
+              debugInfo.iResolution[1],
+              "]"
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV("div", {
+            children: [
+              "iMouse: [",
+              Math.round(debugInfo.iMouse[0]),
+              ", ",
+              Math.round(debugInfo.iMouse[1]),
+              "]"
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+export {
+  ReactShader
+};

package/dist/types.d.ts

@@ -0,0 +1,22 @@
+import type { FrameInfo } from "./hooks/useWebGL";
+export type Vec2 = [number, number];
+export type Vec3 = [number, number, number];
+export type Vec4 = [number, number, number, number];
+export type UniformValue = number | Vec2 | Vec3 | Vec4;
+export interface ReactShaderProps {
+    className?: string;
+    fragment: string;
+    vertex?: string;
+    uniforms?: Record<string, UniformValue>;
+    debug?: boolean;
+    fullscreen?: boolean;
+    timeScale?: number;
+    onFrame?: (info: FrameInfo) => void;
+}
+export interface DefaultUniforms {
+    iTime: number;
+    iMouse: Vec2;
+    iMouseLeftDown: number;
+    iResolution: Vec2;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAEjD,MAAM,MAAM,IAAI,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;AACnC,MAAM,MAAM,IAAI,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAA;AAC3C,MAAM,MAAM,IAAI,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAA;AAEnD,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAEtD,MAAM,WAAW,gBAAgB;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,CAAA;IACvC,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAA;CACpC;AAED,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,IAAI,CAAA;IACZ,cAAc,EAAE,MAAM,CAAA;IACtB,WAAW,EAAE,IAAI,CAAA;CAClB"}

package/dist/utils/shader.d.ts

@@ -0,0 +1,6 @@
+type WebGLContext = WebGLRenderingContext | WebGL2RenderingContext;
+export declare function compileShader(gl: WebGLContext, type: number, source: string): WebGLShader;
+export declare function createProgram(gl: WebGLContext, vertexShader: WebGLShader, fragmentShader: WebGLShader): WebGLProgram;
+export declare function createShaderProgram(gl: WebGLContext, vertexSource: string, fragmentSource: string): WebGLProgram;
+export {};
+//# sourceMappingURL=shader.d.ts.map

package/dist/utils/shader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shader.d.ts","sourceRoot":"","sources":["../../src/utils/shader.ts"],"names":[],"mappings":"AAAA,KAAK,YAAY,GAAG,qBAAqB,GAAG,sBAAsB,CAAA;AAElE,wBAAgB,aAAa,CAAC,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,WAAW,CAiBzF;AAED,wBAAgB,aAAa,CAAC,EAAE,EAAE,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,cAAc,EAAE,WAAW,GAAG,YAAY,CAiBpH;AAED,wBAAgB,mBAAmB,CAAC,EAAE,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,GAAG,YAAY,CAWhH"}

package/dist/utils/uniforms.d.ts

@@ -0,0 +1,8 @@
+import type { UniformValue } from "../types";
+type WebGLContext = WebGLRenderingContext | WebGL2RenderingContext;
+export declare function setUniform(gl: WebGLContext, location: WebGLUniformLocation | null, value: UniformValue): void;
+export declare function getUniformLocation(gl: WebGLContext, program: WebGLProgram, name: string): WebGLUniformLocation | null;
+export declare function setUniforms(gl: WebGLContext, program: WebGLProgram, uniforms: Record<string, UniformValue>, locationCache: Map<string, WebGLUniformLocation | null>): void;
+export declare function createUniformLocationCache(): Map<string, WebGLUniformLocation | null>;
+export {};
+//# sourceMappingURL=uniforms.d.ts.map

package/dist/utils/uniforms.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"uniforms.d.ts","sourceRoot":"","sources":["../../src/utils/uniforms.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAoB,MAAM,UAAU,CAAA;AAE9D,KAAK,YAAY,GAAG,qBAAqB,GAAG,sBAAsB,CAAA;AAclE,wBAAgB,UAAU,CAAC,EAAE,EAAE,YAAY,EAAE,QAAQ,EAAE,oBAAoB,GAAG,IAAI,EAAE,KAAK,EAAE,YAAY,GAAG,IAAI,CAc7G;AAED,wBAAgB,kBAAkB,CAAC,EAAE,EAAE,YAAY,EAAE,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,GAAG,oBAAoB,GAAG,IAAI,CAErH;AAED,wBAAgB,WAAW,CACzB,EAAE,EAAE,YAAY,EAChB,OAAO,EAAE,YAAY,EACrB,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,EACtC,aAAa,EAAE,GAAG,CAAC,MAAM,EAAE,oBAAoB,GAAG,IAAI,CAAC,GACtD,IAAI,CASN;AAED,wBAAgB,0BAA0B,IAAI,GAAG,CAAC,MAAM,EAAE,oBAAoB,GAAG,IAAI,CAAC,CAErF"}

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@fjandin/react-shader",
+  "version": "0.0.1",
+  "description": "React component for rendering WebGL shaders",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "bun run build:esm && bun run build:cjs && bun run build:types",
+    "build:esm": "bun build ./src/index.ts --outdir ./dist --target browser --format esm --external react --external react-dom",
+    "build:cjs": "bun build ./src/index.ts --target browser --format cjs --outfile ./dist/index.cjs --external react --external react-dom",
+    "build:types": "tsc --emitDeclarationOnly --declaration --outDir ./dist",
+    "clean": "rm -rf dist",
+    "lint": "biome check",
+    "typecheck": "tsc --noEmit",
+    "dev": "bun run src/example/index.ts"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "2.3.11",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "bun-types": "latest",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "^5.0.0"
+  },
+  "keywords": [
+    "react",
+    "shader",
+    "webgl",
+    "glsl",
+    "graphics"
+  ],
+  "author": "fjandin",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/fjandin/fjandin-react-shader.git"
+  }
+}