@toriistudio/shader-ui 0.0.10 → 0.0.11

package/dist/index.d.mts

@@ -316,6 +316,7 @@ type DitherStreamProps = {
     children?: React.ReactNode;
     imageTextureSrc?: string;
     backgroundImageSrc?: string;
+    backgroundImageScale?: number;
     backgroundDithered?: boolean;
     projectionSpeed?: number;
     beamSpeed?: number;
@@ -331,14 +332,16 @@ type DitherStreamProps = {
     pathAngle?: number;
     godrayIntensity?: number;
 };
-declare function DitherStream({ width, height, className, style, children, imageTextureSrc, backgroundImageSrc, backgroundDithered, projectionSpeed, beamSpeed, beamDirection, beamColor, beamCenter, beamRadius, beamScale, beamPathShape, beamCustomPathPoints, beamEnabled, pathPos, pathAngle, godrayIntensity, }: DitherStreamProps): react_jsx_runtime.JSX.Element;
+declare function DitherStream({ width, height, className, style, children, imageTextureSrc, backgroundImageSrc, backgroundImageScale, backgroundDithered, projectionSpeed, beamSpeed, beamDirection, beamColor, beamCenter, beamRadius, beamScale, beamPathShape, beamCustomPathPoints, beamEnabled, pathPos, pathAngle, godrayIntensity, }: DitherStreamProps): react_jsx_runtime.JSX.Element;
 
 type DitherStreamPathDrawerProps = {
     enabled: boolean;
     beamColor?: string;
     backgroundImageSrc?: string;
+    backgroundImageScale?: number;
     onCommit: (points: Array<[number, number]>) => void;
+    onCancel?: () => void;
 };
-declare function DitherStreamPathDrawer({ enabled, beamColor, backgroundImageSrc, onCommit, }: DitherStreamPathDrawerProps): react_jsx_runtime.JSX.Element | null;
+declare function DitherStreamPathDrawer({ enabled, beamColor, backgroundImageSrc, backgroundImageScale, onCommit, onCancel, }: DitherStreamPathDrawerProps): react_jsx_runtime.JSX.Element | null;
 
 export { AnimatedDrawingSVG, type CombineShaderMode, DitherPulseRing, DitherStream, DitherStreamPathDrawer, EFECTO_ASCII_COMPONENT_DEFAULTS, EFECTO_ASCII_POST_PROCESSING_DEFAULTS, Efecto, type EfectoAsciiColorPalette, type EfectoAsciiStyle, type PublicPostProcessingSettings as EfectoPublicAsciiPostProcessingSettings, FractalFlower, MenuGlitch, type MenuGlitchUniforms, OranoParticles, type OranoParticlesUniforms, RippleWave, ShaderArt, type ShaderArtUniforms, Snow, WANDY_HAND_DEFAULTS, WandyHand };

package/dist/index.d.ts

@@ -316,6 +316,7 @@ type DitherStreamProps = {
     children?: React.ReactNode;
     imageTextureSrc?: string;
     backgroundImageSrc?: string;
+    backgroundImageScale?: number;
     backgroundDithered?: boolean;
     projectionSpeed?: number;
     beamSpeed?: number;
@@ -331,14 +332,16 @@ type DitherStreamProps = {
     pathAngle?: number;
     godrayIntensity?: number;
 };
-declare function DitherStream({ width, height, className, style, children, imageTextureSrc, backgroundImageSrc, backgroundDithered, projectionSpeed, beamSpeed, beamDirection, beamColor, beamCenter, beamRadius, beamScale, beamPathShape, beamCustomPathPoints, beamEnabled, pathPos, pathAngle, godrayIntensity, }: DitherStreamProps): react_jsx_runtime.JSX.Element;
+declare function DitherStream({ width, height, className, style, children, imageTextureSrc, backgroundImageSrc, backgroundImageScale, backgroundDithered, projectionSpeed, beamSpeed, beamDirection, beamColor, beamCenter, beamRadius, beamScale, beamPathShape, beamCustomPathPoints, beamEnabled, pathPos, pathAngle, godrayIntensity, }: DitherStreamProps): react_jsx_runtime.JSX.Element;
 
 type DitherStreamPathDrawerProps = {
     enabled: boolean;
     beamColor?: string;
     backgroundImageSrc?: string;
+    backgroundImageScale?: number;
     onCommit: (points: Array<[number, number]>) => void;
+    onCancel?: () => void;
 };
-declare function DitherStreamPathDrawer({ enabled, beamColor, backgroundImageSrc, onCommit, }: DitherStreamPathDrawerProps): react_jsx_runtime.JSX.Element | null;
+declare function DitherStreamPathDrawer({ enabled, beamColor, backgroundImageSrc, backgroundImageScale, onCommit, onCancel, }: DitherStreamPathDrawerProps): react_jsx_runtime.JSX.Element | null;
 
 export { AnimatedDrawingSVG, type CombineShaderMode, DitherPulseRing, DitherStream, DitherStreamPathDrawer, EFECTO_ASCII_COMPONENT_DEFAULTS, EFECTO_ASCII_POST_PROCESSING_DEFAULTS, Efecto, type EfectoAsciiColorPalette, type EfectoAsciiStyle, type PublicPostProcessingSettings as EfectoPublicAsciiPostProcessingSettings, FractalFlower, MenuGlitch, type MenuGlitchUniforms, OranoParticles, type OranoParticlesUniforms, RippleWave, ShaderArt, type ShaderArtUniforms, Snow, WANDY_HAND_DEFAULTS, WandyHand };

package/dist/index.js

@@ -5261,7 +5261,7 @@ var import_react24 = require("react");
 var THREE22 = __toESM(require("three"));
 
 // src/shaders/dither-godray-dither/fragment.glsl
-var fragment_default16 = "precision highp float;\n\nin vec2 vTextureCoord;\n\nuniform sampler2D uTexture;\nuniform sampler2D uBackgroundTexture;\nuniform float uHasBackground;\nuniform float uDitherBackground;\nuniform float uBackgroundAspect;\nuniform vec2 uResolution;\n\nout vec4 fragColor;\n\n// Object-cover UV: fills the canvas, cropping the image centered at (0.5, 0.5).\nvec2 coverUV(vec2 uv, float imageAspect, float canvasAspect) {\n  vec2 offset = uv - 0.5;\n  if (imageAspect > canvasAspect) {\n    offset.x *= canvasAspect / imageAspect;\n  } else {\n    offset.y *= imageAspect / canvasAspect;\n  }\n  return offset + 0.5;\n}\n\nvoid main() {\n  vec2 uv = vTextureCoord;\n\n  float ar = uResolution.x / uResolution.y;\n  float ac = mix(ar, 1.0 / ar, 0.5);\n\n  float gs = 0.005;\n  float bg = 1.0 / gs;\n  vec2 cellSize = vec2(1.0 / (bg * ar), 1.0 / bg) * ac;\n\n  vec2 pos = vec2(0.5);\n  vec2 off = uv - pos;\n  vec2 cell = floor(off / cellSize);\n  vec2 center = (cell + 0.5) * cellSize;\n  vec2 pixelUv = center + pos;\n\n  // Foreground dither\n  vec4 c = texture(uTexture, pixelUv);\n  float lum = dot(c.rgb, vec3(0.2126, 0.7152, 0.0722));\n  float gm = pow(mix(0.2, 2.2, 0.3), 2.2);\n\n  vec2 local = mod(uv - pos, cellSize) / cellSize;\n  vec2 ct = local * 2.0 - 1.0;\n  float d = length(ct);\n\n  float ns = 16.0;\n  float si = clamp(floor(lum * ns * gm), 0.0, ns - 1.0);\n  float rad = si / ns;\n  float alpha = smoothstep(rad + 0.08, rad - 0.08, d);\n\n  vec3 tint = (c.rgb - si * 0.04) * 1.4;\n\n  // Background \u2014 sampled with cover UVs\n  vec2 bgUV = coverUV(uv, uBackgroundAspect, ar);\n  vec2 bgCellUV = coverUV(pixelUv, uBackgroundAspect, ar);\n\n  float beamReveal = smoothstep(0.4, 0.75, lum);\n  vec3 bgRaw = texture(uBackgroundTexture, bgUV).rgb;\n  vec3 bgRawColor = mix(vec3(0.0), bgRaw, uHasBackground * beamReveal);\n\n  // Background content at cell-snapped UV (pixelated)\n  vec3 bgCell = texture(uBackgroundTexture, bgCellUV).rgb;\n\n  // Dithered mode: background image multiplies the beam tint.\n  // bgCell * 0.6 + 0.4 maps [0,1] \u2192 [0.4, 1.0], so:\n  //   bright bg  \u2192 tint \xD7 1.0  (same intensity as raw mode)\n  //   dark bg    \u2192 tint \xD7 0.4  (dark areas of image dim the beam)\n  // The beam's hue is always preserved; the background shows as luminance texture.\n  vec3 bgCell3 = bgCell * 0.6 + 0.4;\n  vec3 bgFiltered = tint * bgCell3;\n  vec3 bgDotContent = mix(tint, bgFiltered, uHasBackground);\n  vec3 dotColor = mix(tint, bgDotContent, uDitherBackground);\n\n  // Gap (between dots): raw bg reveal in raw mode, black in dithered mode.\n  vec3 gapColor = bgRawColor * (1.0 - uDitherBackground);\n\n  fragColor = vec4(mix(gapColor, dotColor, alpha), 1.0);\n}\n";
+var fragment_default16 = "precision highp float;\n\nin vec2 vTextureCoord;\n\nuniform sampler2D uTexture;\nuniform sampler2D uBackgroundTexture;\nuniform float uHasBackground;\nuniform float uDitherBackground;\nuniform float uBackgroundAspect;\nuniform float uBackgroundScale;\nuniform vec2 uResolution;\n\nout vec4 fragColor;\n\n// Object-cover UV: fills the canvas, cropping the image centered at (0.5, 0.5).\n// scale > 1 zooms in, scale < 1 zooms out.\nvec2 coverUV(vec2 uv, float imageAspect, float canvasAspect, float scale) {\n  vec2 offset = uv - 0.5;\n  if (imageAspect > canvasAspect) {\n    offset.x *= canvasAspect / imageAspect;\n  } else {\n    offset.y *= imageAspect / canvasAspect;\n  }\n  return (offset / scale) + 0.5;\n}\n\nvoid main() {\n  vec2 uv = vTextureCoord;\n\n  float ar = uResolution.x / uResolution.y;\n  float ac = mix(ar, 1.0 / ar, 0.5);\n\n  float gs = 0.005;\n  float bg = 1.0 / gs;\n  vec2 cellSize = vec2(1.0 / (bg * ar), 1.0 / bg) * ac;\n\n  vec2 pos = vec2(0.5);\n  vec2 off = uv - pos;\n  vec2 cell = floor(off / cellSize);\n  vec2 center = (cell + 0.5) * cellSize;\n  vec2 pixelUv = center + pos;\n\n  // Foreground dither\n  vec4 c = texture(uTexture, pixelUv);\n  float lum = dot(c.rgb, vec3(0.2126, 0.7152, 0.0722));\n  float gm = pow(mix(0.2, 2.2, 0.3), 2.2);\n\n  vec2 local = mod(uv - pos, cellSize) / cellSize;\n  vec2 ct = local * 2.0 - 1.0;\n  float d = length(ct);\n\n  float ns = 16.0;\n  float si = clamp(floor(lum * ns * gm), 0.0, ns - 1.0);\n  float rad = si / ns;\n  float alpha = smoothstep(rad + 0.08, rad - 0.08, d);\n\n  vec3 tint = (c.rgb - si * 0.04) * 1.4;\n\n  // Background \u2014 sampled with cover UVs\n  vec2 bgUV = coverUV(uv, uBackgroundAspect, ar, uBackgroundScale);\n  vec2 bgCellUV = coverUV(pixelUv, uBackgroundAspect, ar, uBackgroundScale);\n\n  float beamReveal = smoothstep(0.4, 0.75, lum);\n  vec3 bgRaw = texture(uBackgroundTexture, bgUV).rgb;\n  vec3 bgRawColor = mix(vec3(0.0), bgRaw, uHasBackground * beamReveal);\n\n  // Background content at cell-snapped UV (pixelated)\n  vec3 bgCell = texture(uBackgroundTexture, bgCellUV).rgb;\n\n  // Dithered mode: background image multiplies the beam tint.\n  // bgCell * 0.6 + 0.4 maps [0,1] \u2192 [0.4, 1.0], so:\n  //   bright bg  \u2192 tint \xD7 1.0  (same intensity as raw mode)\n  //   dark bg    \u2192 tint \xD7 0.4  (dark areas of image dim the beam)\n  // The beam's hue is always preserved; the background shows as luminance texture.\n  vec3 bgCell3 = bgCell * 0.6 + 0.4;\n  vec3 bgFiltered = tint * bgCell3;\n  vec3 bgDotContent = mix(tint, bgFiltered, uHasBackground);\n  vec3 dotColor = mix(tint, bgDotContent, uDitherBackground);\n\n  // Gap (between dots): raw bg reveal in raw mode, black in dithered mode.\n  vec3 gapColor = bgRawColor * (1.0 - uDitherBackground);\n\n  fragColor = vec4(mix(gapColor, dotColor, alpha), 1.0);\n}\n";
 
 // src/shaders/dither-godray-dither/vertex.glsl
 var vertex_default15 = "out vec2 vTextureCoord;\n\nvoid main() {\n  vTextureCoord = uv;\n  gl_Position = vec4(position, 1.0);\n}\n";
@@ -5271,6 +5271,7 @@ var import_jsx_runtime25 = require("react/jsx-runtime");
 function DitherStreamDitherPass({
   inputTexture = null,
   backgroundImageSrc,
+  backgroundImageScale = 1,
   ditherBackground = true,
   target = null,
   clear = true,
@@ -5326,6 +5327,7 @@ function DitherStreamDitherPass({
       uHasBackground: { value: 0 },
       uDitherBackground: { value: 1 },
       uBackgroundAspect: { value: 1 },
+      uBackgroundScale: { value: 1 },
       uResolution: { value: new THREE22.Vector2(1, 1) }
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -5336,6 +5338,7 @@ function DitherStreamDitherPass({
   uniforms.uHasBackground.value = backgroundTexture ? 1 : 0;
   uniforms.uDitherBackground.value = ditherBackground ? 1 : 0;
   uniforms.uBackgroundAspect.value = backgroundAspect;
+  uniforms.uBackgroundScale.value = backgroundImageScale;
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     ShaderPass,
     {
@@ -5597,6 +5600,7 @@ function DitherStream({
   children,
   imageTextureSrc,
   backgroundImageSrc,
+  backgroundImageScale = 1,
   backgroundDithered = true,
   projectionSpeed = 0.05,
   beamSpeed = 0.1,
@@ -5660,7 +5664,11 @@ function DitherStream({
               },
               {
                 component: DitherStreamDitherPass,
-                props: { backgroundImageSrc, ditherBackground: backgroundDithered }
+                props: {
+                  backgroundImageSrc,
+                  backgroundImageScale,
+                  ditherBackground: backgroundDithered
+                }
               },
               {
                 component: DitherStreamGodRaysPass,
@@ -5729,7 +5737,9 @@ function DitherStreamPathDrawer({
   enabled,
   beamColor = "#aab0f0",
   backgroundImageSrc,
-  onCommit
+  backgroundImageScale = 1,
+  onCommit,
+  onCancel
 }) {
   const overlayRef = (0, import_react28.useRef)(null);
   const canvasRef = (0, import_react28.useRef)(null);
@@ -5875,6 +5885,25 @@ function DitherStreamPathDrawer({
     },
     [updatePoints]
   );
+  (0, import_react28.useEffect)(() => {
+    if (!enabled) return;
+    const handleKeyDown = (event) => {
+      if (event.key !== "Escape") return;
+      drawingRef.current = false;
+      pointerIdRef.current = null;
+      lastPixelPointRef.current = null;
+      if (commitTimeoutRef.current) {
+        clearTimeout(commitTimeoutRef.current);
+        commitTimeoutRef.current = null;
+      }
+      updatePoints([]);
+      clearCanvas();
+      setCursor(null);
+      onCancel?.();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [enabled, clearCanvas, updatePoints, onCancel]);
   (0, import_react28.useEffect)(() => {
     if (enabled) return;
     drawingRef.current = false;
@@ -5916,7 +5945,7 @@ function DitherStreamPathDrawer({
     "div",
     {
       ref: overlayRef,
-      className: "absolute inset-0 z-20 cursor-crosshair touch-none",
+      className: "absolute inset-0 z-20 cursor-crosshair touch-none overflow-hidden",
       style: {
         background: backgroundImageSrc ? void 0 : "radial-gradient(circle at center, rgba(102,110,164,0.10), rgba(7,9,17,0.72))",
         border: "1px dashed rgba(188,196,246,0.35)"
@@ -5984,6 +6013,7 @@ function DitherStreamPathDrawer({
             {
               src: backgroundImageSrc,
               className: "pointer-events-none absolute inset-0 h-full w-full object-cover",
+              style: { transform: `scale(${backgroundImageScale})` },
               alt: "",
               "aria-hidden": true
             }

package/dist/index.mjs

@@ -5246,7 +5246,7 @@ import { useEffect as useEffect17, useMemo as useMemo17, useState as useState4 }
 import * as THREE22 from "three";
 
 // src/shaders/dither-godray-dither/fragment.glsl
-var fragment_default16 = "precision highp float;\n\nin vec2 vTextureCoord;\n\nuniform sampler2D uTexture;\nuniform sampler2D uBackgroundTexture;\nuniform float uHasBackground;\nuniform float uDitherBackground;\nuniform float uBackgroundAspect;\nuniform vec2 uResolution;\n\nout vec4 fragColor;\n\n// Object-cover UV: fills the canvas, cropping the image centered at (0.5, 0.5).\nvec2 coverUV(vec2 uv, float imageAspect, float canvasAspect) {\n  vec2 offset = uv - 0.5;\n  if (imageAspect > canvasAspect) {\n    offset.x *= canvasAspect / imageAspect;\n  } else {\n    offset.y *= imageAspect / canvasAspect;\n  }\n  return offset + 0.5;\n}\n\nvoid main() {\n  vec2 uv = vTextureCoord;\n\n  float ar = uResolution.x / uResolution.y;\n  float ac = mix(ar, 1.0 / ar, 0.5);\n\n  float gs = 0.005;\n  float bg = 1.0 / gs;\n  vec2 cellSize = vec2(1.0 / (bg * ar), 1.0 / bg) * ac;\n\n  vec2 pos = vec2(0.5);\n  vec2 off = uv - pos;\n  vec2 cell = floor(off / cellSize);\n  vec2 center = (cell + 0.5) * cellSize;\n  vec2 pixelUv = center + pos;\n\n  // Foreground dither\n  vec4 c = texture(uTexture, pixelUv);\n  float lum = dot(c.rgb, vec3(0.2126, 0.7152, 0.0722));\n  float gm = pow(mix(0.2, 2.2, 0.3), 2.2);\n\n  vec2 local = mod(uv - pos, cellSize) / cellSize;\n  vec2 ct = local * 2.0 - 1.0;\n  float d = length(ct);\n\n  float ns = 16.0;\n  float si = clamp(floor(lum * ns * gm), 0.0, ns - 1.0);\n  float rad = si / ns;\n  float alpha = smoothstep(rad + 0.08, rad - 0.08, d);\n\n  vec3 tint = (c.rgb - si * 0.04) * 1.4;\n\n  // Background \u2014 sampled with cover UVs\n  vec2 bgUV = coverUV(uv, uBackgroundAspect, ar);\n  vec2 bgCellUV = coverUV(pixelUv, uBackgroundAspect, ar);\n\n  float beamReveal = smoothstep(0.4, 0.75, lum);\n  vec3 bgRaw = texture(uBackgroundTexture, bgUV).rgb;\n  vec3 bgRawColor = mix(vec3(0.0), bgRaw, uHasBackground * beamReveal);\n\n  // Background content at cell-snapped UV (pixelated)\n  vec3 bgCell = texture(uBackgroundTexture, bgCellUV).rgb;\n\n  // Dithered mode: background image multiplies the beam tint.\n  // bgCell * 0.6 + 0.4 maps [0,1] \u2192 [0.4, 1.0], so:\n  //   bright bg  \u2192 tint \xD7 1.0  (same intensity as raw mode)\n  //   dark bg    \u2192 tint \xD7 0.4  (dark areas of image dim the beam)\n  // The beam's hue is always preserved; the background shows as luminance texture.\n  vec3 bgCell3 = bgCell * 0.6 + 0.4;\n  vec3 bgFiltered = tint * bgCell3;\n  vec3 bgDotContent = mix(tint, bgFiltered, uHasBackground);\n  vec3 dotColor = mix(tint, bgDotContent, uDitherBackground);\n\n  // Gap (between dots): raw bg reveal in raw mode, black in dithered mode.\n  vec3 gapColor = bgRawColor * (1.0 - uDitherBackground);\n\n  fragColor = vec4(mix(gapColor, dotColor, alpha), 1.0);\n}\n";
+var fragment_default16 = "precision highp float;\n\nin vec2 vTextureCoord;\n\nuniform sampler2D uTexture;\nuniform sampler2D uBackgroundTexture;\nuniform float uHasBackground;\nuniform float uDitherBackground;\nuniform float uBackgroundAspect;\nuniform float uBackgroundScale;\nuniform vec2 uResolution;\n\nout vec4 fragColor;\n\n// Object-cover UV: fills the canvas, cropping the image centered at (0.5, 0.5).\n// scale > 1 zooms in, scale < 1 zooms out.\nvec2 coverUV(vec2 uv, float imageAspect, float canvasAspect, float scale) {\n  vec2 offset = uv - 0.5;\n  if (imageAspect > canvasAspect) {\n    offset.x *= canvasAspect / imageAspect;\n  } else {\n    offset.y *= imageAspect / canvasAspect;\n  }\n  return (offset / scale) + 0.5;\n}\n\nvoid main() {\n  vec2 uv = vTextureCoord;\n\n  float ar = uResolution.x / uResolution.y;\n  float ac = mix(ar, 1.0 / ar, 0.5);\n\n  float gs = 0.005;\n  float bg = 1.0 / gs;\n  vec2 cellSize = vec2(1.0 / (bg * ar), 1.0 / bg) * ac;\n\n  vec2 pos = vec2(0.5);\n  vec2 off = uv - pos;\n  vec2 cell = floor(off / cellSize);\n  vec2 center = (cell + 0.5) * cellSize;\n  vec2 pixelUv = center + pos;\n\n  // Foreground dither\n  vec4 c = texture(uTexture, pixelUv);\n  float lum = dot(c.rgb, vec3(0.2126, 0.7152, 0.0722));\n  float gm = pow(mix(0.2, 2.2, 0.3), 2.2);\n\n  vec2 local = mod(uv - pos, cellSize) / cellSize;\n  vec2 ct = local * 2.0 - 1.0;\n  float d = length(ct);\n\n  float ns = 16.0;\n  float si = clamp(floor(lum * ns * gm), 0.0, ns - 1.0);\n  float rad = si / ns;\n  float alpha = smoothstep(rad + 0.08, rad - 0.08, d);\n\n  vec3 tint = (c.rgb - si * 0.04) * 1.4;\n\n  // Background \u2014 sampled with cover UVs\n  vec2 bgUV = coverUV(uv, uBackgroundAspect, ar, uBackgroundScale);\n  vec2 bgCellUV = coverUV(pixelUv, uBackgroundAspect, ar, uBackgroundScale);\n\n  float beamReveal = smoothstep(0.4, 0.75, lum);\n  vec3 bgRaw = texture(uBackgroundTexture, bgUV).rgb;\n  vec3 bgRawColor = mix(vec3(0.0), bgRaw, uHasBackground * beamReveal);\n\n  // Background content at cell-snapped UV (pixelated)\n  vec3 bgCell = texture(uBackgroundTexture, bgCellUV).rgb;\n\n  // Dithered mode: background image multiplies the beam tint.\n  // bgCell * 0.6 + 0.4 maps [0,1] \u2192 [0.4, 1.0], so:\n  //   bright bg  \u2192 tint \xD7 1.0  (same intensity as raw mode)\n  //   dark bg    \u2192 tint \xD7 0.4  (dark areas of image dim the beam)\n  // The beam's hue is always preserved; the background shows as luminance texture.\n  vec3 bgCell3 = bgCell * 0.6 + 0.4;\n  vec3 bgFiltered = tint * bgCell3;\n  vec3 bgDotContent = mix(tint, bgFiltered, uHasBackground);\n  vec3 dotColor = mix(tint, bgDotContent, uDitherBackground);\n\n  // Gap (between dots): raw bg reveal in raw mode, black in dithered mode.\n  vec3 gapColor = bgRawColor * (1.0 - uDitherBackground);\n\n  fragColor = vec4(mix(gapColor, dotColor, alpha), 1.0);\n}\n";
 
 // src/shaders/dither-godray-dither/vertex.glsl
 var vertex_default15 = "out vec2 vTextureCoord;\n\nvoid main() {\n  vTextureCoord = uv;\n  gl_Position = vec4(position, 1.0);\n}\n";
@@ -5256,6 +5256,7 @@ import { jsx as jsx25 } from "react/jsx-runtime";
 function DitherStreamDitherPass({
   inputTexture = null,
   backgroundImageSrc,
+  backgroundImageScale = 1,
   ditherBackground = true,
   target = null,
   clear = true,
@@ -5311,6 +5312,7 @@ function DitherStreamDitherPass({
       uHasBackground: { value: 0 },
       uDitherBackground: { value: 1 },
       uBackgroundAspect: { value: 1 },
+      uBackgroundScale: { value: 1 },
       uResolution: { value: new THREE22.Vector2(1, 1) }
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -5321,6 +5323,7 @@ function DitherStreamDitherPass({
   uniforms.uHasBackground.value = backgroundTexture ? 1 : 0;
   uniforms.uDitherBackground.value = ditherBackground ? 1 : 0;
   uniforms.uBackgroundAspect.value = backgroundAspect;
+  uniforms.uBackgroundScale.value = backgroundImageScale;
   return /* @__PURE__ */ jsx25(
     ShaderPass,
     {
@@ -5582,6 +5585,7 @@ function DitherStream({
   children,
   imageTextureSrc,
   backgroundImageSrc,
+  backgroundImageScale = 1,
   backgroundDithered = true,
   projectionSpeed = 0.05,
   beamSpeed = 0.1,
@@ -5645,7 +5649,11 @@ function DitherStream({
               },
               {
                 component: DitherStreamDitherPass,
-                props: { backgroundImageSrc, ditherBackground: backgroundDithered }
+                props: {
+                  backgroundImageSrc,
+                  backgroundImageScale,
+                  ditherBackground: backgroundDithered
+                }
               },
               {
                 component: DitherStreamGodRaysPass,
@@ -5719,7 +5727,9 @@ function DitherStreamPathDrawer({
   enabled,
   beamColor = "#aab0f0",
   backgroundImageSrc,
-  onCommit
+  backgroundImageScale = 1,
+  onCommit,
+  onCancel
 }) {
   const overlayRef = useRef13(null);
   const canvasRef = useRef13(null);
@@ -5865,6 +5875,25 @@ function DitherStreamPathDrawer({
     },
     [updatePoints]
   );
+  useEffect21(() => {
+    if (!enabled) return;
+    const handleKeyDown = (event) => {
+      if (event.key !== "Escape") return;
+      drawingRef.current = false;
+      pointerIdRef.current = null;
+      lastPixelPointRef.current = null;
+      if (commitTimeoutRef.current) {
+        clearTimeout(commitTimeoutRef.current);
+        commitTimeoutRef.current = null;
+      }
+      updatePoints([]);
+      clearCanvas();
+      setCursor(null);
+      onCancel?.();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [enabled, clearCanvas, updatePoints, onCancel]);
   useEffect21(() => {
     if (enabled) return;
     drawingRef.current = false;
@@ -5906,7 +5935,7 @@ function DitherStreamPathDrawer({
     "div",
     {
       ref: overlayRef,
-      className: "absolute inset-0 z-20 cursor-crosshair touch-none",
+      className: "absolute inset-0 z-20 cursor-crosshair touch-none overflow-hidden",
       style: {
         background: backgroundImageSrc ? void 0 : "radial-gradient(circle at center, rgba(102,110,164,0.10), rgba(7,9,17,0.72))",
         border: "1px dashed rgba(188,196,246,0.35)"
@@ -5974,6 +6003,7 @@ function DitherStreamPathDrawer({
             {
               src: backgroundImageSrc,
               className: "pointer-events-none absolute inset-0 h-full w-full object-cover",
+              style: { transform: `scale(${backgroundImageScale})` },
               alt: "",
               "aria-hidden": true
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toriistudio/shader-ui",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "description": "Shader components",
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",