tokimeki-image-editor 0.1.9 → 0.1.11

package/dist/shaders/blur.d.ts

@@ -0,0 +1 @@
+export declare const BLUR_SHADER_CODE = "struct VertexOutput {\n  @builtin(position) position: vec4<f32>,\n  @location(0) uv: vec2<f32>,\n};\n\nstruct BlurUniforms {\n  direction: vec2<f32>,  // (1, 0) for horizontal, (0, 1) for vertical\n  radius: f32,\n  padding: f32,\n};\n\n@group(0) @binding(0) var mySampler: sampler;\n@group(0) @binding(1) var myTexture: texture_2d<f32>;\n@group(0) @binding(2) var<uniform> blur: BlurUniforms;\n\n@vertex\nfn vs_main(@builtin(vertex_index) VertexIndex: u32) -> VertexOutput {\n  var pos = array<vec2<f32>, 3>(\n    vec2<f32>(-1.0, -1.0),\n    vec2<f32>( 3.0, -1.0),\n    vec2<f32>(-1.0,  3.0)\n  );\n  var output: VertexOutput;\n  output.position = vec4<f32>(pos[VertexIndex], 0.0, 1.0);\n  // Convert NDC to UV with Y-flip (NDC bottom-left maps to UV top-left)\n  let uv = pos[VertexIndex] * 0.5 + 0.5;\n  output.uv = vec2<f32>(uv.x, 1.0 - uv.y);\n  return output;\n}\n\n@fragment\nfn fs_main(@location(0) uv: vec2<f32>) -> @location(0) vec4<f32> {\n  let r = i32(blur.radius);\n\n  // Pass-through if radius is 0\n  if (r == 0) {\n    return textureSample(myTexture, mySampler, uv);\n  }\n\n  let texSize = vec2<f32>(textureDimensions(myTexture));\n  let texelSize = 1.0 / texSize;\n\n  // Gaussian blur weights (for radius up to 10)\n  // Pre-normalized weights for different radii\n  var color = vec4<f32>(0.0);\n\n  // Simple box blur for now (equal weights)\n  // TODO: Use proper Gaussian weights\n  let totalSamples = f32(r * 2 + 1);\n\n  // Sample along the blur direction\n  for (var i = -r; i <= r; i = i + 1) {\n    let offset = vec2<f32>(f32(i)) * blur.direction * texelSize;\n    let sampleUV = uv + offset;\n    color = color + textureSample(myTexture, mySampler, sampleUV) / totalSamples;\n  }\n\n  return color;\n}\n";

package/dist/shaders/blur.js

@@ -0,0 +1,60 @@
+export const BLUR_SHADER_CODE = `struct VertexOutput {
+  @builtin(position) position: vec4<f32>,
+  @location(0) uv: vec2<f32>,
+};
+
+struct BlurUniforms {
+  direction: vec2<f32>,  // (1, 0) for horizontal, (0, 1) for vertical
+  radius: f32,
+  padding: f32,
+};
+
+@group(0) @binding(0) var mySampler: sampler;
+@group(0) @binding(1) var myTexture: texture_2d<f32>;
+@group(0) @binding(2) var<uniform> blur: BlurUniforms;
+
+@vertex
+fn vs_main(@builtin(vertex_index) VertexIndex: u32) -> VertexOutput {
+  var pos = array<vec2<f32>, 3>(
+    vec2<f32>(-1.0, -1.0),
+    vec2<f32>( 3.0, -1.0),
+    vec2<f32>(-1.0,  3.0)
+  );
+  var output: VertexOutput;
+  output.position = vec4<f32>(pos[VertexIndex], 0.0, 1.0);
+  // Convert NDC to UV with Y-flip (NDC bottom-left maps to UV top-left)
+  let uv = pos[VertexIndex] * 0.5 + 0.5;
+  output.uv = vec2<f32>(uv.x, 1.0 - uv.y);
+  return output;
+}
+
+@fragment
+fn fs_main(@location(0) uv: vec2<f32>) -> @location(0) vec4<f32> {
+  let r = i32(blur.radius);
+
+  // Pass-through if radius is 0
+  if (r == 0) {
+    return textureSample(myTexture, mySampler, uv);
+  }
+
+  let texSize = vec2<f32>(textureDimensions(myTexture));
+  let texelSize = 1.0 / texSize;
+
+  // Gaussian blur weights (for radius up to 10)
+  // Pre-normalized weights for different radii
+  var color = vec4<f32>(0.0);
+
+  // Simple box blur for now (equal weights)
+  // TODO: Use proper Gaussian weights
+  let totalSamples = f32(r * 2 + 1);
+
+  // Sample along the blur direction
+  for (var i = -r; i <= r; i = i + 1) {
+    let offset = vec2<f32>(f32(i)) * blur.direction * texelSize;
+    let sampleUV = uv + offset;
+    color = color + textureSample(myTexture, mySampler, sampleUV) / totalSamples;
+  }
+
+  return color;
+}
+`;

package/dist/shaders/composite.d.ts

@@ -0,0 +1 @@
+export declare const COMPOSITE_SHADER_CODE = "struct VertexOutput {\n  @builtin(position) position: vec4<f32>,\n  @location(0) uv: vec2<f32>,\n};\n\nstruct CompositeUniforms {\n  // Blur area bounds in normalized coordinates (0-1)\n  minX: f32,\n  minY: f32,\n  maxX: f32,\n  maxY: f32,\n};\n\n@group(0) @binding(0) var mySampler: sampler;\n@group(0) @binding(1) var blurredTexture: texture_2d<f32>;\n@group(0) @binding(2) var baseTexture: texture_2d<f32>;\n@group(0) @binding(3) var<uniform> composite: CompositeUniforms;\n\n@vertex\nfn vs_main(@builtin(vertex_index) VertexIndex: u32) -> VertexOutput {\n  var pos = array<vec2<f32>, 3>(\n    vec2<f32>(-1.0, -1.0),\n    vec2<f32>( 3.0, -1.0),\n    vec2<f32>(-1.0,  3.0)\n  );\n  var output: VertexOutput;\n  output.position = vec4<f32>(pos[VertexIndex], 0.0, 1.0);\n  // Convert NDC to UV with Y-flip (NDC bottom-left maps to UV top-left)\n  let uv = pos[VertexIndex] * 0.5 + 0.5;\n  output.uv = vec2<f32>(uv.x, 1.0 - uv.y);\n  return output;\n}\n\n@fragment\nfn fs_main(@location(0) uv: vec2<f32>) -> @location(0) vec4<f32> {\n  // Sample both textures first (must be in uniform control flow)\n  let blurredColor = textureSample(blurredTexture, mySampler, uv);\n  let baseColor = textureSample(baseTexture, mySampler, uv);\n\n  // Check if pixel is inside blur area bounds\n  let inside = uv.x >= composite.minX && uv.x <= composite.maxX &&\n               uv.y >= composite.minY && uv.y <= composite.maxY;\n\n  // Use select to choose between blurred and base\n  return select(baseColor, blurredColor, inside);\n}\n";

package/dist/shaders/composite.js

@@ -0,0 +1,47 @@
+export const COMPOSITE_SHADER_CODE = `struct VertexOutput {
+  @builtin(position) position: vec4<f32>,
+  @location(0) uv: vec2<f32>,
+};
+
+struct CompositeUniforms {
+  // Blur area bounds in normalized coordinates (0-1)
+  minX: f32,
+  minY: f32,
+  maxX: f32,
+  maxY: f32,
+};
+
+@group(0) @binding(0) var mySampler: sampler;
+@group(0) @binding(1) var blurredTexture: texture_2d<f32>;
+@group(0) @binding(2) var baseTexture: texture_2d<f32>;
+@group(0) @binding(3) var<uniform> composite: CompositeUniforms;
+
+@vertex
+fn vs_main(@builtin(vertex_index) VertexIndex: u32) -> VertexOutput {
+  var pos = array<vec2<f32>, 3>(
+    vec2<f32>(-1.0, -1.0),
+    vec2<f32>( 3.0, -1.0),
+    vec2<f32>(-1.0,  3.0)
+  );
+  var output: VertexOutput;
+  output.position = vec4<f32>(pos[VertexIndex], 0.0, 1.0);
+  // Convert NDC to UV with Y-flip (NDC bottom-left maps to UV top-left)
+  let uv = pos[VertexIndex] * 0.5 + 0.5;
+  output.uv = vec2<f32>(uv.x, 1.0 - uv.y);
+  return output;
+}
+
+@fragment
+fn fs_main(@location(0) uv: vec2<f32>) -> @location(0) vec4<f32> {
+  // Sample both textures first (must be in uniform control flow)
+  let blurredColor = textureSample(blurredTexture, mySampler, uv);
+  let baseColor = textureSample(baseTexture, mySampler, uv);
+
+  // Check if pixel is inside blur area bounds
+  let inside = uv.x >= composite.minX && uv.x <= composite.maxX &&
+               uv.y >= composite.minY && uv.y <= composite.maxY;
+
+  // Use select to choose between blurred and base
+  return select(baseColor, blurredColor, inside);
+}
+`;

package/dist/shaders/grain.d.ts

@@ -0,0 +1 @@
+export declare const GRAIN_SHADER_CODE = "// Grain shader - applies film grain on top of processed image\n// This shader is designed to be used as a final pass after blur\n\nstruct VertexOutput {\n  @builtin(position) position: vec4<f32>,\n  @location(0) uv: vec2<f32>,\n};\n\nstruct GrainUniforms {\n  // Grain parameters (1 param)\n  grainAmount: f32,      // 0 to 100\n\n  // Viewport (4 params)\n  viewportZoom: f32,\n  viewportOffsetX: f32,\n  viewportOffsetY: f32,\n  viewportScale: f32,\n\n  // Transform (4 params)\n  rotation: f32,         // in radians\n  flipHorizontal: f32,   // 1.0 or -1.0\n  flipVertical: f32,     // 1.0 or -1.0\n  transformScale: f32,\n\n  // Canvas dimensions (2 params)\n  canvasWidth: f32,\n  canvasHeight: f32,\n\n  // Image dimensions (2 params)\n  imageWidth: f32,\n  imageHeight: f32,\n\n  // Crop area (4 params)\n  cropX: f32,\n  cropY: f32,\n  cropWidth: f32,\n  cropHeight: f32,\n};\n\n@group(0) @binding(0) var mySampler: sampler;\n@group(0) @binding(1) var myTexture: texture_2d<f32>;\n@group(0) @binding(2) var<uniform> params: GrainUniforms;\n\n// Simple pass-through vertex shader\n@vertex\nfn vs_main(@builtin(vertex_index) VertexIndex: u32) -> VertexOutput {\n  var pos = array<vec2<f32>, 3>(\n    vec2<f32>(-1.0, -1.0),\n    vec2<f32>( 3.0, -1.0),\n    vec2<f32>(-1.0,  3.0)\n  );\n  var output: VertexOutput;\n  output.position = vec4<f32>(pos[VertexIndex], 0.0, 1.0);\n  // UV coordinates map directly to texture (0-1)\n  output.uv = pos[VertexIndex] * 0.5 + 0.5;\n  output.uv.y = 1.0 - output.uv.y; // Flip Y for texture coordinates\n  return output;\n}\n\n// Helper functions\nfn getLuminance(color: vec3<f32>) -> f32 {\n  return dot(color, vec3<f32>(0.2126, 0.7152, 0.0722));\n}\n\n// High-quality 2D hash function for uniform random numbers in [0, 1]\nfn hash2d(p: vec2<f32>) -> f32 {\n  let p3 = fract(vec3<f32>(p.x, p.y, p.x) * vec3<f32>(0.1031, 0.1030, 0.0973));\n  let dot_p3 = dot(p3, vec3<f32>(p3.y, p3.z, p3.x) + 33.33);\n  return fract((p3.x + p3.y) * p3.z + dot_p3);\n}\n\n// Generate two independent uniform random numbers\nfn hash2d_dual(p: vec2<f32>) -> vec2<f32> {\n  let p3 = fract(vec3<f32>(p.x, p.y, p.x) * vec3<f32>(0.1031, 0.1030, 0.0973));\n  let p4 = fract(vec3<f32>(p.y, p.x, p.y) * vec3<f32>(0.0973, 0.1031, 0.1030));\n  let dot_p3 = dot(p3, vec3<f32>(p3.y, p3.z, p3.x) + 33.33);\n  let dot_p4 = dot(p4, vec3<f32>(p4.y, p4.z, p4.x) + 45.67);\n  return vec2<f32>(\n    fract((p3.x + p3.y) * p3.z + dot_p3),\n    fract((p4.x + p4.y) * p4.z + dot_p4)\n  );\n}\n\n// Box-Muller transform: converts two uniform random variables to Gaussian distribution\n// Returns a sample from N(0, 1) - standard normal distribution\nfn boxMuller(u1: f32, u2: f32) -> f32 {\n  // Ensure u1 is not zero to avoid log(0)\n  let u1_safe = max(u1, 0.0001);\n  let radius = sqrt(-2.0 * log(u1_safe));\n  let theta = 2.0 * 3.14159265359 * u2;\n  return radius * cos(theta);\n}\n\n// Generate Gaussian-distributed noise using Box-Muller transform\nfn gaussianNoise(p: vec2<f32>) -> f32 {\n  let uniforms = hash2d_dual(p);\n  return boxMuller(uniforms.x, uniforms.y);\n}\n\n// Overlay blend mode - enhances contrast\n// When a < 0.5: result = 2 * a * b\n// When a >= 0.5: result = 1 - 2 * (1-a) * (1-b)\nfn overlayBlend(base: f32, blend: f32) -> f32 {\n  if (base < 0.5) {\n    return 2.0 * base * blend;\n  } else {\n    return 1.0 - 2.0 * (1.0 - base) * (1.0 - blend);\n  }\n}\n\n// Soft light blend mode - gentler than overlay\nfn softLightBlend(base: f32, blend: f32) -> f32 {\n  if (blend < 0.5) {\n    return base - (1.0 - 2.0 * blend) * base * (1.0 - base);\n  } else {\n    let d = select(sqrt(base), base, base < 0.25);\n    return base + (2.0 * blend - 1.0) * (d - base);\n  }\n}\n\n@fragment\nfn fs_main(@location(0) uv: vec2<f32>) -> @location(0) vec4<f32> {\n  // Sample the blurred/processed texture\n  var color = textureSample(myTexture, mySampler, uv);\n  var rgb = color.rgb;\n\n  // Calculate image-space coordinates for grain\n  // Convert UV (0-1) to canvas coordinates\n  var canvasCoord = uv * vec2<f32>(params.canvasWidth, params.canvasHeight);\n\n  // Convert canvas coordinates (top-left origin) to centered coordinates\n  var coord = canvasCoord - vec2<f32>(params.canvasWidth * 0.5, params.canvasHeight * 0.5);\n\n  // Reverse the viewport transformations to get image-space coordinates\n  // 1. Subtract viewport offset\n  coord = coord - vec2<f32>(params.viewportOffsetX, params.viewportOffsetY);\n\n  // 2. Inverse zoom/scale\n  let totalScale = params.viewportScale * params.viewportZoom * params.transformScale;\n  coord = coord / totalScale;\n\n  // 3. Inverse rotation\n  if (params.rotation != 0.0) {\n    let cos_r = cos(-params.rotation);\n    let sin_r = sin(-params.rotation);\n    coord = vec2<f32>(\n      coord.x * cos_r - coord.y * sin_r,\n      coord.x * sin_r + coord.y * cos_r\n    );\n  }\n\n  // 4. Inverse flip\n  coord.x = coord.x * params.flipHorizontal;\n  coord.y = coord.y * params.flipVertical;\n\n  // 5. Convert to image pixel coordinates\n  var imageCoord: vec2<f32>;\n  if (params.cropWidth > 0.0 && params.cropHeight > 0.0) {\n    // Crop mode: coord is in crop-centered space\n    let cropLocalX = coord.x + params.cropWidth * 0.5;\n    let cropLocalY = coord.y + params.cropHeight * 0.5;\n    imageCoord = vec2<f32>(\n      params.cropX + cropLocalX,\n      params.cropY + cropLocalY\n    );\n  } else {\n    // No crop: coord is in image-centered space\n    imageCoord = coord + vec2<f32>(params.imageWidth * 0.5, params.imageHeight * 0.5);\n  }\n\n  // Apply film grain if enabled\n  if (params.grainAmount > 0.0) {\n    let grainIntensity = params.grainAmount / 100.0;\n\n    // Calculate luminance for grain masking\n    let luma = getLuminance(rgb);\n\n    // === Authentic film grain using uniform distribution ===\n    // Film grain is random, sharp, and granular - not smooth Gaussian\n\n    // Primary grain layer (2.5-3 pixels) - sharp, visible grain\n    let grain1 = hash2d(floor(imageCoord / 2.8)) - 0.5;\n\n    // Secondary grain layer (3.5-4 pixels) - adds texture variation\n    let grain2 = hash2d(floor(imageCoord / 3.6) + vec2<f32>(123.45, 678.90)) - 0.5;\n\n    // Tertiary grain layer (5-6 pixels) - larger grain structure\n    let grain3 = hash2d(floor(imageCoord / 5.2) + vec2<f32>(345.67, 890.12)) - 0.5;\n\n    // Coarse grain layer (7-8 pixels) - clumping effect\n    let grain4 = hash2d(floor(imageCoord / 7.5) + vec2<f32>(567.89, 234.56)) - 0.5;\n\n    // Combine with emphasis on visible mid-size grain\n    // Sharp transitions create authentic film texture\n    let grainNoise = grain1 * 0.35 + grain2 * 0.3 + grain3 * 0.25 + grain4 * 0.1;\n\n    // Enhance grain contrast for more pronounced effect\n    let enhancedGrain = sign(grainNoise) * pow(abs(grainNoise), 0.8);\n\n    // === Luminance-based masking ===\n    // Grain visible across most tones, natural falloff at extremes\n    var lumaMask = 1.0 - pow(abs(luma - 0.5) * 2.0, 1.5);\n    lumaMask = smoothstep(0.1, 1.0, lumaMask);\n\n    // Hide grain in very dark areas (outside image bounds)\n    let shadowMask = smoothstep(0.02, 0.12, luma);\n\n    // Slightly reduce grain in very bright areas\n    let highlightMask = 1.0 - smoothstep(0.9, 1.0, luma);\n\n    lumaMask = lumaMask * shadowMask * highlightMask;\n\n    // === Apply strong, visible grain ===\n    let grainStrength = grainIntensity * 0.35;\n\n    // Apply grain with luminance masking\n    let grainValue = enhancedGrain * grainStrength * lumaMask;\n    rgb = rgb + vec3<f32>(grainValue);\n  }\n\n  // Clamp final result\n  rgb = clamp(rgb, vec3<f32>(0.0), vec3<f32>(1.0));\n\n  return vec4<f32>(rgb, color.a);\n}\n";

package/dist/shaders/grain.js

@@ -0,0 +1,226 @@
+export const GRAIN_SHADER_CODE = `// Grain shader - applies film grain on top of processed image
+// This shader is designed to be used as a final pass after blur
+
+struct VertexOutput {
+  @builtin(position) position: vec4<f32>,
+  @location(0) uv: vec2<f32>,
+};
+
+struct GrainUniforms {
+  // Grain parameters (1 param)
+  grainAmount: f32,      // 0 to 100
+
+  // Viewport (4 params)
+  viewportZoom: f32,
+  viewportOffsetX: f32,
+  viewportOffsetY: f32,
+  viewportScale: f32,
+
+  // Transform (4 params)
+  rotation: f32,         // in radians
+  flipHorizontal: f32,   // 1.0 or -1.0
+  flipVertical: f32,     // 1.0 or -1.0
+  transformScale: f32,
+
+  // Canvas dimensions (2 params)
+  canvasWidth: f32,
+  canvasHeight: f32,
+
+  // Image dimensions (2 params)
+  imageWidth: f32,
+  imageHeight: f32,
+
+  // Crop area (4 params)
+  cropX: f32,
+  cropY: f32,
+  cropWidth: f32,
+  cropHeight: f32,
+};
+
+@group(0) @binding(0) var mySampler: sampler;
+@group(0) @binding(1) var myTexture: texture_2d<f32>;
+@group(0) @binding(2) var<uniform> params: GrainUniforms;
+
+// Simple pass-through vertex shader
+@vertex
+fn vs_main(@builtin(vertex_index) VertexIndex: u32) -> VertexOutput {
+  var pos = array<vec2<f32>, 3>(
+    vec2<f32>(-1.0, -1.0),
+    vec2<f32>( 3.0, -1.0),
+    vec2<f32>(-1.0,  3.0)
+  );
+  var output: VertexOutput;
+  output.position = vec4<f32>(pos[VertexIndex], 0.0, 1.0);
+  // UV coordinates map directly to texture (0-1)
+  output.uv = pos[VertexIndex] * 0.5 + 0.5;
+  output.uv.y = 1.0 - output.uv.y; // Flip Y for texture coordinates
+  return output;
+}
+
+// Helper functions
+fn getLuminance(color: vec3<f32>) -> f32 {
+  return dot(color, vec3<f32>(0.2126, 0.7152, 0.0722));
+}
+
+// High-quality 2D hash function for uniform random numbers in [0, 1]
+fn hash2d(p: vec2<f32>) -> f32 {
+  let p3 = fract(vec3<f32>(p.x, p.y, p.x) * vec3<f32>(0.1031, 0.1030, 0.0973));
+  let dot_p3 = dot(p3, vec3<f32>(p3.y, p3.z, p3.x) + 33.33);
+  return fract((p3.x + p3.y) * p3.z + dot_p3);
+}
+
+// Generate two independent uniform random numbers
+fn hash2d_dual(p: vec2<f32>) -> vec2<f32> {
+  let p3 = fract(vec3<f32>(p.x, p.y, p.x) * vec3<f32>(0.1031, 0.1030, 0.0973));
+  let p4 = fract(vec3<f32>(p.y, p.x, p.y) * vec3<f32>(0.0973, 0.1031, 0.1030));
+  let dot_p3 = dot(p3, vec3<f32>(p3.y, p3.z, p3.x) + 33.33);
+  let dot_p4 = dot(p4, vec3<f32>(p4.y, p4.z, p4.x) + 45.67);
+  return vec2<f32>(
+    fract((p3.x + p3.y) * p3.z + dot_p3),
+    fract((p4.x + p4.y) * p4.z + dot_p4)
+  );
+}
+
+// Box-Muller transform: converts two uniform random variables to Gaussian distribution
+// Returns a sample from N(0, 1) - standard normal distribution
+fn boxMuller(u1: f32, u2: f32) -> f32 {
+  // Ensure u1 is not zero to avoid log(0)
+  let u1_safe = max(u1, 0.0001);
+  let radius = sqrt(-2.0 * log(u1_safe));
+  let theta = 2.0 * 3.14159265359 * u2;
+  return radius * cos(theta);
+}
+
+// Generate Gaussian-distributed noise using Box-Muller transform
+fn gaussianNoise(p: vec2<f32>) -> f32 {
+  let uniforms = hash2d_dual(p);
+  return boxMuller(uniforms.x, uniforms.y);
+}
+
+// Overlay blend mode - enhances contrast
+// When a < 0.5: result = 2 * a * b
+// When a >= 0.5: result = 1 - 2 * (1-a) * (1-b)
+fn overlayBlend(base: f32, blend: f32) -> f32 {
+  if (base < 0.5) {
+    return 2.0 * base * blend;
+  } else {
+    return 1.0 - 2.0 * (1.0 - base) * (1.0 - blend);
+  }
+}
+
+// Soft light blend mode - gentler than overlay
+fn softLightBlend(base: f32, blend: f32) -> f32 {
+  if (blend < 0.5) {
+    return base - (1.0 - 2.0 * blend) * base * (1.0 - base);
+  } else {
+    let d = select(sqrt(base), base, base < 0.25);
+    return base + (2.0 * blend - 1.0) * (d - base);
+  }
+}
+
+@fragment
+fn fs_main(@location(0) uv: vec2<f32>) -> @location(0) vec4<f32> {
+  // Sample the blurred/processed texture
+  var color = textureSample(myTexture, mySampler, uv);
+  var rgb = color.rgb;
+
+  // Calculate image-space coordinates for grain
+  // Convert UV (0-1) to canvas coordinates
+  var canvasCoord = uv * vec2<f32>(params.canvasWidth, params.canvasHeight);
+
+  // Convert canvas coordinates (top-left origin) to centered coordinates
+  var coord = canvasCoord - vec2<f32>(params.canvasWidth * 0.5, params.canvasHeight * 0.5);
+
+  // Reverse the viewport transformations to get image-space coordinates
+  // 1. Subtract viewport offset
+  coord = coord - vec2<f32>(params.viewportOffsetX, params.viewportOffsetY);
+
+  // 2. Inverse zoom/scale
+  let totalScale = params.viewportScale * params.viewportZoom * params.transformScale;
+  coord = coord / totalScale;
+
+  // 3. Inverse rotation
+  if (params.rotation != 0.0) {
+    let cos_r = cos(-params.rotation);
+    let sin_r = sin(-params.rotation);
+    coord = vec2<f32>(
+      coord.x * cos_r - coord.y * sin_r,
+      coord.x * sin_r + coord.y * cos_r
+    );
+  }
+
+  // 4. Inverse flip
+  coord.x = coord.x * params.flipHorizontal;
+  coord.y = coord.y * params.flipVertical;
+
+  // 5. Convert to image pixel coordinates
+  var imageCoord: vec2<f32>;
+  if (params.cropWidth > 0.0 && params.cropHeight > 0.0) {
+    // Crop mode: coord is in crop-centered space
+    let cropLocalX = coord.x + params.cropWidth * 0.5;
+    let cropLocalY = coord.y + params.cropHeight * 0.5;
+    imageCoord = vec2<f32>(
+      params.cropX + cropLocalX,
+      params.cropY + cropLocalY
+    );
+  } else {
+    // No crop: coord is in image-centered space
+    imageCoord = coord + vec2<f32>(params.imageWidth * 0.5, params.imageHeight * 0.5);
+  }
+
+  // Apply film grain if enabled
+  if (params.grainAmount > 0.0) {
+    let grainIntensity = params.grainAmount / 100.0;
+
+    // Calculate luminance for grain masking
+    let luma = getLuminance(rgb);
+
+    // === Authentic film grain using uniform distribution ===
+    // Film grain is random, sharp, and granular - not smooth Gaussian
+
+    // Primary grain layer (2.5-3 pixels) - sharp, visible grain
+    let grain1 = hash2d(floor(imageCoord / 2.8)) - 0.5;
+
+    // Secondary grain layer (3.5-4 pixels) - adds texture variation
+    let grain2 = hash2d(floor(imageCoord / 3.6) + vec2<f32>(123.45, 678.90)) - 0.5;
+
+    // Tertiary grain layer (5-6 pixels) - larger grain structure
+    let grain3 = hash2d(floor(imageCoord / 5.2) + vec2<f32>(345.67, 890.12)) - 0.5;
+
+    // Coarse grain layer (7-8 pixels) - clumping effect
+    let grain4 = hash2d(floor(imageCoord / 7.5) + vec2<f32>(567.89, 234.56)) - 0.5;
+
+    // Combine with emphasis on visible mid-size grain
+    // Sharp transitions create authentic film texture
+    let grainNoise = grain1 * 0.35 + grain2 * 0.3 + grain3 * 0.25 + grain4 * 0.1;
+
+    // Enhance grain contrast for more pronounced effect
+    let enhancedGrain = sign(grainNoise) * pow(abs(grainNoise), 0.8);
+
+    // === Luminance-based masking ===
+    // Grain visible across most tones, natural falloff at extremes
+    var lumaMask = 1.0 - pow(abs(luma - 0.5) * 2.0, 1.5);
+    lumaMask = smoothstep(0.1, 1.0, lumaMask);
+
+    // Hide grain in very dark areas (outside image bounds)
+    let shadowMask = smoothstep(0.02, 0.12, luma);
+
+    // Slightly reduce grain in very bright areas
+    let highlightMask = 1.0 - smoothstep(0.9, 1.0, luma);
+
+    lumaMask = lumaMask * shadowMask * highlightMask;
+
+    // === Apply strong, visible grain ===
+    let grainStrength = grainIntensity * 0.35;
+
+    // Apply grain with luminance masking
+    let grainValue = enhancedGrain * grainStrength * lumaMask;
+    rgb = rgb + vec3<f32>(grainValue);
+  }
+
+  // Clamp final result
+  rgb = clamp(rgb, vec3<f32>(0.0), vec3<f32>(1.0));
+
+  return vec4<f32>(rgb, color.a);
+}
+`;

package/dist/shaders/image-editor.d.ts

@@ -0,0 +1 @@
+export declare const IMAGE_EDITOR_SHADER_CODE = "struct VertexOutput {\n  @builtin(position) position: vec4<f32>,\n  @location(0) uv: vec2<f32>,\n};\n\nstruct Uniforms {\n  // Adjustments (11 params)\n  brightness: f32,\n  contrast: f32,\n  exposure: f32,\n  highlights: f32,\n  shadows: f32,\n  saturation: f32,\n  temperature: f32,\n  sepia: f32,\n  grayscale: f32,\n  vignette: f32,\n  grain: f32,\n\n  // Viewport (4 params)\n  viewportZoom: f32,\n  viewportOffsetX: f32,\n  viewportOffsetY: f32,\n  viewportScale: f32,\n\n  // Transform (4 params)\n  rotation: f32,        // in radians\n  flipHorizontal: f32,  // 1.0 or -1.0\n  flipVertical: f32,    // 1.0 or -1.0\n  transformScale: f32,\n\n  // Canvas dimensions (2 params)\n  canvasWidth: f32,\n  canvasHeight: f32,\n\n  // Image dimensions (2 params)\n  imageWidth: f32,\n  imageHeight: f32,\n\n  // Crop area (4 params)\n  cropX: f32,\n  cropY: f32,\n  cropWidth: f32,\n  cropHeight: f32,\n};\n\n@group(0) @binding(0) var mySampler: sampler;\n@group(0) @binding(1) var myTexture: texture_2d<f32>;\n@group(0) @binding(2) var<uniform> params: Uniforms;\n\n// Full-screen triangle vertex shader\n@vertex\nfn vs_main(@builtin(vertex_index) VertexIndex: u32) -> VertexOutput {\n  var pos = array<vec2<f32>, 3>(\n    vec2<f32>(-1.0, -1.0),\n    vec2<f32>( 3.0, -1.0),\n    vec2<f32>(-1.0,  3.0)\n  );\n  var output: VertexOutput;\n  output.position = vec4<f32>(pos[VertexIndex], 0.0, 1.0);\n\n  // Convert NDC (-1 to 1) to canvas coordinates centered at origin\n  // NDC: -1 \u2192 -canvasWidth/2, 0 \u2192 0, 1 \u2192 canvasWidth/2\n  // Note: NDC Y increases upward, but canvas Y increases downward, so flip Y\n  var coord = pos[VertexIndex] * vec2<f32>(params.canvasWidth, params.canvasHeight) * 0.5;\n  coord.y = -coord.y;\n\n  // Reverse the 2D canvas transformations:\n  // In 2D: translate(center + offset) \u2192 scale(zoom) \u2192 rotate \u2192 flip \u2192 draw(-w/2, -h/2)\n  // In WebGPU (reverse): screen \u2192 un-translate \u2192 un-scale \u2192 un-rotate \u2192 un-flip \u2192 texture\n\n  // 1. Subtract viewport offset (inverse of translate)\n  coord = coord - vec2<f32>(params.viewportOffsetX, params.viewportOffsetY);\n\n  // 2. Inverse zoom/scale\n  let totalScale = params.viewportScale * params.viewportZoom * params.transformScale;\n  coord = coord / totalScale;\n\n  // 3. Inverse rotation\n  if (params.rotation != 0.0) {\n    let cos_r = cos(-params.rotation);\n    let sin_r = sin(-params.rotation);\n    coord = vec2<f32>(\n      coord.x * cos_r - coord.y * sin_r,\n      coord.x * sin_r + coord.y * cos_r\n    );\n  }\n\n  // 4. Inverse flip\n  coord.x = coord.x * params.flipHorizontal;\n  coord.y = coord.y * params.flipVertical;\n\n  // 5. Convert to texture coordinates\n  // After inverse transformations, coord is in drawing space (centered at origin)\n\n  // When there's a crop, viewport.scale is adjusted to fit crop area to canvas\n  // This means coord values are scaled according to crop dimensions\n  // We need to account for this when mapping to texture coordinates\n\n  // ALWAYS use crop-aware logic\n  if (params.cropWidth > 0.0 && params.cropHeight > 0.0) {\n    // coord is in crop-centered space (units: pixels in crop area after inverse transforms)\n    // The 2D canvas draws: drawImage(img, cropX, cropY, cropW, cropH, -cropW/2, -cropH/2, cropW, cropH)\n    // This means the crop region is drawn centered, from (-cropW/2, -cropH/2) to (cropW/2, cropH/2)\n\n    // Map from drawing space to texture coordinates:\n    // Drawing space: coord ranges from (-cropW/2, -cropH/2) to (cropW/2, cropH/2)\n    // Texture space: we want to read from (cropX, cropY) to (cropX+cropW, cropY+cropH)\n\n    // Convert from centered coordinates to 0-based coordinates within crop region\n    let cropLocalX = coord.x + params.cropWidth * 0.5;\n    let cropLocalY = coord.y + params.cropHeight * 0.5;\n\n    // Convert to texture coordinates by adding crop offset and normalizing by image size\n    output.uv = vec2<f32>(\n      (params.cropX + cropLocalX) / params.imageWidth,\n      (params.cropY + cropLocalY) / params.imageHeight\n    );\n  } else {\n    // No crop - standard transformation\n    // Convert from image-centered space to top-left origin\n    coord = coord + vec2<f32>(params.imageWidth * 0.5, params.imageHeight * 0.5);\n\n    // Normalize to 0-1 range\n    output.uv = coord / vec2<f32>(params.imageWidth, params.imageHeight);\n  }\n\n  return output;\n}\n\n// Helper functions\nfn getLuminance(color: vec3<f32>) -> f32 {\n  return dot(color, vec3<f32>(0.2126, 0.7152, 0.0722));\n}\n\n// Improved 2D hash function for better randomness\nfn hash2d(p: vec2<f32>) -> f32 {\n  let p3 = fract(vec3<f32>(p.x, p.y, p.x) * vec3<f32>(0.1031, 0.1030, 0.0973));\n  let dot_p3 = dot(p3, vec3<f32>(p3.y, p3.z, p3.x) + 33.33);\n  return fract((p3.x + p3.y) * p3.z + dot_p3);\n}\n\nfn rgbToHsl(rgb: vec3<f32>) -> vec3<f32> {\n  let maxVal = max(rgb.r, max(rgb.g, rgb.b));\n  let minVal = min(rgb.r, min(rgb.g, rgb.b));\n  var h = 0.0;\n  var s = 0.0;\n  let l = (maxVal + minVal) / 2.0;\n\n  if (maxVal != minVal) {\n    let d = maxVal - minVal;\n    s = select(d / (maxVal + minVal), d / (2.0 - maxVal - minVal), l > 0.5);\n\n    if (maxVal == rgb.r) {\n      h = ((rgb.g - rgb.b) / d + select(0.0, 6.0, rgb.g < rgb.b)) / 6.0;\n    } else if (maxVal == rgb.g) {\n      h = ((rgb.b - rgb.r) / d + 2.0) / 6.0;\n    } else {\n      h = ((rgb.r - rgb.g) / d + 4.0) / 6.0;\n    }\n  }\n\n  return vec3<f32>(h, s, l);\n}\n\nfn hslToRgb(hsl: vec3<f32>) -> vec3<f32> {\n  let h = hsl.x;\n  let s = hsl.y;\n  let l = hsl.z;\n\n  if (s == 0.0) {\n    return vec3<f32>(l, l, l);\n  }\n\n  let q = select(l + s - l * s, l * (1.0 + s), l < 0.5);\n  let p = 2.0 * l - q;\n\n  let r = hue2rgb(p, q, h + 1.0 / 3.0);\n  let g = hue2rgb(p, q, h);\n  let b = hue2rgb(p, q, h - 1.0 / 3.0);\n\n  return vec3<f32>(r, g, b);\n}\n\nfn hue2rgb(p: f32, q: f32, t_: f32) -> f32 {\n  var t = t_;\n  if (t < 0.0) { t += 1.0; }\n  if (t > 1.0) { t -= 1.0; }\n  if (t < 1.0 / 6.0) { return p + (q - p) * 6.0 * t; }\n  if (t < 1.0 / 2.0) { return q; }\n  if (t < 2.0 / 3.0) { return p + (q - p) * (2.0 / 3.0 - t) * 6.0; }\n  return p;\n}\n\n@fragment\nfn fs_main(@location(0) uv: vec2<f32>) -> @location(0) vec4<f32> {\n  // Sample texture FIRST (must be in uniform control flow before any branching)\n  var color = textureSample(myTexture, mySampler, clamp(uv, vec2<f32>(0.0), vec2<f32>(1.0)));\n  var rgb = color.rgb;\n\n  // Check if outside texture bounds (0-1) and set to black\n  if (uv.x < 0.0 || uv.x > 1.0 || uv.y < 0.0 || uv.y > 1.0) {\n    rgb = vec3<f32>(0.0);\n  }\n\n  // When crop is active, only show the crop region - black out everything else\n  if (params.cropWidth > 0.0) {\n    let cropMinU = params.cropX / params.imageWidth;\n    let cropMaxU = (params.cropX + params.cropWidth) / params.imageWidth;\n    let cropMinV = params.cropY / params.imageHeight;\n    let cropMaxV = (params.cropY + params.cropHeight) / params.imageHeight;\n\n    // If UV is outside the crop region, render black\n    if (uv.x < cropMinU || uv.x > cropMaxU || uv.y < cropMinV || uv.y > cropMaxV) {\n      rgb = vec3<f32>(0.0);\n    }\n  }\n\n  // 1. Brightness\n  if (params.brightness != 0.0) {\n    let factor = 1.0 + (params.brightness / 200.0);\n    rgb = rgb * factor;\n  }\n\n  // 2. Contrast\n  if (params.contrast != 0.0) {\n    let factor = 1.0 + (params.contrast / 200.0);\n    rgb = (rgb - 0.5) * factor + 0.5;\n  }\n\n  // 3. Exposure\n  if (params.exposure != 0.0) {\n    rgb = rgb * exp2(params.exposure / 100.0);\n  }\n\n  // 4. Shadows and Highlights\n  if (params.shadows != 0.0 || params.highlights != 0.0) {\n    let luma = getLuminance(rgb);\n\n    if (params.shadows != 0.0) {\n      let shadowMask = pow(1.0 - luma, 2.0);\n      rgb = rgb - rgb * (params.shadows / 100.0) * shadowMask * 0.5;\n    }\n\n    if (params.highlights != 0.0) {\n      let highlightMask = pow(luma, 2.0);\n      rgb = rgb + rgb * (params.highlights / 100.0) * highlightMask * 0.5;\n    }\n  }\n\n  // 5. Saturation\n  if (params.saturation != 0.0) {\n    rgb = clamp(rgb, vec3<f32>(0.0), vec3<f32>(1.0));\n    var hsl = rgbToHsl(rgb);\n    hsl.y = clamp(hsl.y * (1.0 + params.saturation / 100.0), 0.0, 1.0);\n    rgb = hslToRgb(hsl);\n  }\n\n  // 5.5. Color Temperature\n  // Warm (positive): add red, subtract blue\n  // Cool (negative): subtract red, add blue\n  if (params.temperature != 0.0) {\n    let temp = params.temperature / 100.0;\n    rgb.r = rgb.r + temp * 0.1;\n    rgb.b = rgb.b - temp * 0.1;\n  }\n\n  // 6. Sepia\n  if (params.sepia != 0.0) {\n    let sepiaAmount = params.sepia / 100.0;\n    let tr = 0.393 * rgb.r + 0.769 * rgb.g + 0.189 * rgb.b;\n    let tg = 0.349 * rgb.r + 0.686 * rgb.g + 0.168 * rgb.b;\n    let tb = 0.272 * rgb.r + 0.534 * rgb.g + 0.131 * rgb.b;\n    rgb = mix(rgb, vec3<f32>(tr, tg, tb), sepiaAmount);\n  }\n\n  // 7. Grayscale\n  if (params.grayscale != 0.0) {\n    let gray = getLuminance(rgb);\n    rgb = mix(rgb, vec3<f32>(gray), params.grayscale / 100.0);\n  }\n\n  // 8. Vignette\n  if (params.vignette != 0.0) {\n    let center = vec2<f32>(0.5, 0.5);\n    let dist = distance(uv, center);\n    let vignetteFactor = params.vignette / 100.0;\n    let vignetteAmount = pow(dist * 1.4, 2.0);\n    rgb = rgb * (1.0 + vignetteFactor * vignetteAmount * 1.5);\n  }\n\n  // Clamp final result\n  rgb = clamp(rgb, vec3<f32>(0.0), vec3<f32>(1.0));\n\n  return vec4<f32>(rgb, color.a);\n}\n";

package/dist/shaders/image-editor.js

@@ -0,0 +1,297 @@
+export const IMAGE_EDITOR_SHADER_CODE = `struct VertexOutput {
+  @builtin(position) position: vec4<f32>,
+  @location(0) uv: vec2<f32>,
+};
+
+struct Uniforms {
+  // Adjustments (11 params)
+  brightness: f32,
+  contrast: f32,
+  exposure: f32,
+  highlights: f32,
+  shadows: f32,
+  saturation: f32,
+  temperature: f32,
+  sepia: f32,
+  grayscale: f32,
+  vignette: f32,
+  grain: f32,
+
+  // Viewport (4 params)
+  viewportZoom: f32,
+  viewportOffsetX: f32,
+  viewportOffsetY: f32,
+  viewportScale: f32,
+
+  // Transform (4 params)
+  rotation: f32,        // in radians
+  flipHorizontal: f32,  // 1.0 or -1.0
+  flipVertical: f32,    // 1.0 or -1.0
+  transformScale: f32,
+
+  // Canvas dimensions (2 params)
+  canvasWidth: f32,
+  canvasHeight: f32,
+
+  // Image dimensions (2 params)
+  imageWidth: f32,
+  imageHeight: f32,
+
+  // Crop area (4 params)
+  cropX: f32,
+  cropY: f32,
+  cropWidth: f32,
+  cropHeight: f32,
+};
+
+@group(0) @binding(0) var mySampler: sampler;
+@group(0) @binding(1) var myTexture: texture_2d<f32>;
+@group(0) @binding(2) var<uniform> params: Uniforms;
+
+// Full-screen triangle vertex shader
+@vertex
+fn vs_main(@builtin(vertex_index) VertexIndex: u32) -> VertexOutput {
+  var pos = array<vec2<f32>, 3>(
+    vec2<f32>(-1.0, -1.0),
+    vec2<f32>( 3.0, -1.0),
+    vec2<f32>(-1.0,  3.0)
+  );
+  var output: VertexOutput;
+  output.position = vec4<f32>(pos[VertexIndex], 0.0, 1.0);
+
+  // Convert NDC (-1 to 1) to canvas coordinates centered at origin
+  // NDC: -1 → -canvasWidth/2, 0 → 0, 1 → canvasWidth/2
+  // Note: NDC Y increases upward, but canvas Y increases downward, so flip Y
+  var coord = pos[VertexIndex] * vec2<f32>(params.canvasWidth, params.canvasHeight) * 0.5;
+  coord.y = -coord.y;
+
+  // Reverse the 2D canvas transformations:
+  // In 2D: translate(center + offset) → scale(zoom) → rotate → flip → draw(-w/2, -h/2)
+  // In WebGPU (reverse): screen → un-translate → un-scale → un-rotate → un-flip → texture
+
+  // 1. Subtract viewport offset (inverse of translate)
+  coord = coord - vec2<f32>(params.viewportOffsetX, params.viewportOffsetY);
+
+  // 2. Inverse zoom/scale
+  let totalScale = params.viewportScale * params.viewportZoom * params.transformScale;
+  coord = coord / totalScale;
+
+  // 3. Inverse rotation
+  if (params.rotation != 0.0) {
+    let cos_r = cos(-params.rotation);
+    let sin_r = sin(-params.rotation);
+    coord = vec2<f32>(
+      coord.x * cos_r - coord.y * sin_r,
+      coord.x * sin_r + coord.y * cos_r
+    );
+  }
+
+  // 4. Inverse flip
+  coord.x = coord.x * params.flipHorizontal;
+  coord.y = coord.y * params.flipVertical;
+
+  // 5. Convert to texture coordinates
+  // After inverse transformations, coord is in drawing space (centered at origin)
+
+  // When there's a crop, viewport.scale is adjusted to fit crop area to canvas
+  // This means coord values are scaled according to crop dimensions
+  // We need to account for this when mapping to texture coordinates
+
+  // ALWAYS use crop-aware logic
+  if (params.cropWidth > 0.0 && params.cropHeight > 0.0) {
+    // coord is in crop-centered space (units: pixels in crop area after inverse transforms)
+    // The 2D canvas draws: drawImage(img, cropX, cropY, cropW, cropH, -cropW/2, -cropH/2, cropW, cropH)
+    // This means the crop region is drawn centered, from (-cropW/2, -cropH/2) to (cropW/2, cropH/2)
+
+    // Map from drawing space to texture coordinates:
+    // Drawing space: coord ranges from (-cropW/2, -cropH/2) to (cropW/2, cropH/2)
+    // Texture space: we want to read from (cropX, cropY) to (cropX+cropW, cropY+cropH)
+
+    // Convert from centered coordinates to 0-based coordinates within crop region
+    let cropLocalX = coord.x + params.cropWidth * 0.5;
+    let cropLocalY = coord.y + params.cropHeight * 0.5;
+
+    // Convert to texture coordinates by adding crop offset and normalizing by image size
+    output.uv = vec2<f32>(
+      (params.cropX + cropLocalX) / params.imageWidth,
+      (params.cropY + cropLocalY) / params.imageHeight
+    );
+  } else {
+    // No crop - standard transformation
+    // Convert from image-centered space to top-left origin
+    coord = coord + vec2<f32>(params.imageWidth * 0.5, params.imageHeight * 0.5);
+
+    // Normalize to 0-1 range
+    output.uv = coord / vec2<f32>(params.imageWidth, params.imageHeight);
+  }
+
+  return output;
+}
+
+// Helper functions
+fn getLuminance(color: vec3<f32>) -> f32 {
+  return dot(color, vec3<f32>(0.2126, 0.7152, 0.0722));
+}
+
+// Improved 2D hash function for better randomness
+fn hash2d(p: vec2<f32>) -> f32 {
+  let p3 = fract(vec3<f32>(p.x, p.y, p.x) * vec3<f32>(0.1031, 0.1030, 0.0973));
+  let dot_p3 = dot(p3, vec3<f32>(p3.y, p3.z, p3.x) + 33.33);
+  return fract((p3.x + p3.y) * p3.z + dot_p3);
+}
+
+fn rgbToHsl(rgb: vec3<f32>) -> vec3<f32> {
+  let maxVal = max(rgb.r, max(rgb.g, rgb.b));
+  let minVal = min(rgb.r, min(rgb.g, rgb.b));
+  var h = 0.0;
+  var s = 0.0;
+  let l = (maxVal + minVal) / 2.0;
+
+  if (maxVal != minVal) {
+    let d = maxVal - minVal;
+    s = select(d / (maxVal + minVal), d / (2.0 - maxVal - minVal), l > 0.5);
+
+    if (maxVal == rgb.r) {
+      h = ((rgb.g - rgb.b) / d + select(0.0, 6.0, rgb.g < rgb.b)) / 6.0;
+    } else if (maxVal == rgb.g) {
+      h = ((rgb.b - rgb.r) / d + 2.0) / 6.0;
+    } else {
+      h = ((rgb.r - rgb.g) / d + 4.0) / 6.0;
+    }
+  }
+
+  return vec3<f32>(h, s, l);
+}
+
+fn hslToRgb(hsl: vec3<f32>) -> vec3<f32> {
+  let h = hsl.x;
+  let s = hsl.y;
+  let l = hsl.z;
+
+  if (s == 0.0) {
+    return vec3<f32>(l, l, l);
+  }
+
+  let q = select(l + s - l * s, l * (1.0 + s), l < 0.5);
+  let p = 2.0 * l - q;
+
+  let r = hue2rgb(p, q, h + 1.0 / 3.0);
+  let g = hue2rgb(p, q, h);
+  let b = hue2rgb(p, q, h - 1.0 / 3.0);
+
+  return vec3<f32>(r, g, b);
+}
+
+fn hue2rgb(p: f32, q: f32, t_: f32) -> f32 {
+  var t = t_;
+  if (t < 0.0) { t += 1.0; }
+  if (t > 1.0) { t -= 1.0; }
+  if (t < 1.0 / 6.0) { return p + (q - p) * 6.0 * t; }
+  if (t < 1.0 / 2.0) { return q; }
+  if (t < 2.0 / 3.0) { return p + (q - p) * (2.0 / 3.0 - t) * 6.0; }
+  return p;
+}
+
+@fragment
+fn fs_main(@location(0) uv: vec2<f32>) -> @location(0) vec4<f32> {
+  // Sample texture FIRST (must be in uniform control flow before any branching)
+  var color = textureSample(myTexture, mySampler, clamp(uv, vec2<f32>(0.0), vec2<f32>(1.0)));
+  var rgb = color.rgb;
+
+  // Check if outside texture bounds (0-1) and set to black
+  if (uv.x < 0.0 || uv.x > 1.0 || uv.y < 0.0 || uv.y > 1.0) {
+    rgb = vec3<f32>(0.0);
+  }
+
+  // When crop is active, only show the crop region - black out everything else
+  if (params.cropWidth > 0.0) {
+    let cropMinU = params.cropX / params.imageWidth;
+    let cropMaxU = (params.cropX + params.cropWidth) / params.imageWidth;
+    let cropMinV = params.cropY / params.imageHeight;
+    let cropMaxV = (params.cropY + params.cropHeight) / params.imageHeight;
+
+    // If UV is outside the crop region, render black
+    if (uv.x < cropMinU || uv.x > cropMaxU || uv.y < cropMinV || uv.y > cropMaxV) {
+      rgb = vec3<f32>(0.0);
+    }
+  }
+
+  // 1. Brightness
+  if (params.brightness != 0.0) {
+    let factor = 1.0 + (params.brightness / 200.0);
+    rgb = rgb * factor;
+  }
+
+  // 2. Contrast
+  if (params.contrast != 0.0) {
+    let factor = 1.0 + (params.contrast / 200.0);
+    rgb = (rgb - 0.5) * factor + 0.5;
+  }
+
+  // 3. Exposure
+  if (params.exposure != 0.0) {
+    rgb = rgb * exp2(params.exposure / 100.0);
+  }
+
+  // 4. Shadows and Highlights
+  if (params.shadows != 0.0 || params.highlights != 0.0) {
+    let luma = getLuminance(rgb);
+
+    if (params.shadows != 0.0) {
+      let shadowMask = pow(1.0 - luma, 2.0);
+      rgb = rgb - rgb * (params.shadows / 100.0) * shadowMask * 0.5;
+    }
+
+    if (params.highlights != 0.0) {
+      let highlightMask = pow(luma, 2.0);
+      rgb = rgb + rgb * (params.highlights / 100.0) * highlightMask * 0.5;
+    }
+  }
+
+  // 5. Saturation
+  if (params.saturation != 0.0) {
+    rgb = clamp(rgb, vec3<f32>(0.0), vec3<f32>(1.0));
+    var hsl = rgbToHsl(rgb);
+    hsl.y = clamp(hsl.y * (1.0 + params.saturation / 100.0), 0.0, 1.0);
+    rgb = hslToRgb(hsl);
+  }
+
+  // 5.5. Color Temperature
+  // Warm (positive): add red, subtract blue
+  // Cool (negative): subtract red, add blue
+  if (params.temperature != 0.0) {
+    let temp = params.temperature / 100.0;
+    rgb.r = rgb.r + temp * 0.1;
+    rgb.b = rgb.b - temp * 0.1;
+  }
+
+  // 6. Sepia
+  if (params.sepia != 0.0) {
+    let sepiaAmount = params.sepia / 100.0;
+    let tr = 0.393 * rgb.r + 0.769 * rgb.g + 0.189 * rgb.b;
+    let tg = 0.349 * rgb.r + 0.686 * rgb.g + 0.168 * rgb.b;
+    let tb = 0.272 * rgb.r + 0.534 * rgb.g + 0.131 * rgb.b;
+    rgb = mix(rgb, vec3<f32>(tr, tg, tb), sepiaAmount);
+  }
+
+  // 7. Grayscale
+  if (params.grayscale != 0.0) {
+    let gray = getLuminance(rgb);
+    rgb = mix(rgb, vec3<f32>(gray), params.grayscale / 100.0);
+  }
+
+  // 8. Vignette
+  if (params.vignette != 0.0) {
+    let center = vec2<f32>(0.5, 0.5);
+    let dist = distance(uv, center);
+    let vignetteFactor = params.vignette / 100.0;
+    let vignetteAmount = pow(dist * 1.4, 2.0);
+    rgb = rgb * (1.0 + vignetteFactor * vignetteAmount * 1.5);
+  }
+
+  // Clamp final result
+  rgb = clamp(rgb, vec3<f32>(0.0), vec3<f32>(1.0));
+
+  return vec4<f32>(rgb, color.a);
+}
+`;

package/dist/utils/webgpu-render.js

@@ -1,7 +1,8 @@
-import SHADER_CODE from '../shaders/image-editor.wgsl?raw';
-import BLUR_SHADER_CODE from '../shaders/blur.wgsl?raw';
-import COMPOSITE_SHADER_CODE from '../shaders/composite.wgsl?raw';
-import GRAIN_SHADER_CODE from '../shaders/grain.wgsl?raw';
+import { IMAGE_EDITOR_SHADER_CODE } from '../shaders/image-editor';
+import { BLUR_SHADER_CODE } from '../shaders/blur';
+import { COMPOSITE_SHADER_CODE } from '../shaders/composite';
+import { GRAIN_SHADER_CODE } from '../shaders/grain';
+const SHADER_CODE = IMAGE_EDITOR_SHADER_CODE;
 /**
  * WebGPU Render Pipeline for image adjustments with viewport and transform support
  * Uses fragment shader to apply adjustments in real-time

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tokimeki-image-editor",
-  "version": "0.1.9",
+  "version": "0.1.11",
   "description": "A image editor for svelte.",
   "type": "module",
   "license": "MIT",