shaders 3.1.463 → 3.2.464

package/dist/core/Chrome-wfGdzbP1.js

@@ -0,0 +1,370 @@
+import { at as call, in as DEG_TO_RAD$1, nt as ZERO, t as defineStd, u as glassShellProps } from "./lower-z2vuXP8M.js";
+import { h as perlin12d } from "./noise-B3Oq1k3_.js";
+import { t as animatedTime } from "./porters-B1UjrM1y.js";
+import { B as surfacePattern, C as nudgeNormal, D as reflect, K as viewRay, L as surfaceField, P as silhouette, S as neutralTone, T as perlinSlope, Y as bevel_exports, Z as lighting_exports, _ as insideShape, h as guarded, j as shapedSurface, m as grazingOf, x as marchedNormal } from "./materials-D7QX3H4h.js";
+import { p as sdf3d_exports, v as shapeEffectBoundingBoxDeclaration } from "./sdf3d-BD5m6HR6.js";
+import { a as transformColor, c as transformPosition } from "./transformations-CoIwF5JU.js";
+import { A as sqrt, D as smoothstep, E as sin, M as vec2, N as vec3, P as vec4, _ as local, a as cos, b as mix, c as exp, g as length, i as clamp, j as sub, k as splat3, l as float, n as add, o as div, t as abs, v as max, x as mul, y as min } from "./math-BF-GBlb4.js";
+var { bevelSin } = bevel_exports;
+var { fieldGradient } = lighting_exports;
+var { isMobileGpuViewport } = sdf3d_exports;
+var DEG_TO_RAD = DEG_TO_RAD$1;
+var DEFAULT_SHAPE_CONFIG = JSON.stringify({
+	type: "roundedRectSDF",
+	width: .42,
+	height: .3,
+	rounding: .12
+});
+function chromeStudio(exIn, eyIn, ezIn, boxSoftIn, stripSoft, spectral, shadows, warmC, coolC) {
+	const ex = local(exIn, "ex");
+	const ey = local(eyIn, "ey");
+	const ez = local(ezIn, "ez");
+	const horiz = local(div(ex, add(length(vec2(ex, ey)), 1e-4)), "horiz");
+	const warmSide = local(add(.35, mul(.65, smoothstep(-.7, .7, horiz))), "warmSide");
+	const coolSide = local(add(.45, mul(.55, smoothstep(-.7, .7, mul(horiz, -1)))), "coolSide");
+	const up = local(smoothstep(-.65, 1, ey), "up");
+	const graphite = add(mul(coolC, .03), vec3(.003, .003, .004));
+	let env = mix(mix(vec3(.17, .175, .19), graphite, splat3(shadows)), vec3(.56, .57, .6), splat3(mul(up, up)));
+	const ceil = smoothstep(.3, .9, ey);
+	env = add(env, mul(vec3(.55, .55, .56), ceil));
+	const cd = local(div(add(ey, .45), .2), "cd");
+	const coolBand = exp(mul(mul(cd, cd), -1));
+	env = add(env, mul(coolC, mul(mul(mul(coolBand, spectral), .2), coolSide)));
+	const facing = local(smoothstep(.18, -.1, ez), "facing");
+	const pz = local(max(sub(.32, ez), .06), "pz");
+	const px = local(div(ex, pz), "px");
+	const py = local(div(ey, pz), "py");
+	const bx = local(sub(abs(px), .62), "bx");
+	const by = local(sub(abs(sub(py, .3)), .28), "by");
+	const inside = min(max(bx, by), 0);
+	const dbox = local(add(length(max(vec2(bx, by), vec2(0, 0))), inside), "dbox");
+	const boxSoft = local(add(.05, mul(boxSoftIn, .4)), "boxSoft");
+	const box = mul(smoothstep(boxSoft, mul(boxSoft, -.6), dbox), facing);
+	env = add(env, mul(vec3(2.9, 2.87, 2.82), box));
+	const flagMask = smoothstep(.5, .92, abs(ex));
+	const flagDepth = mix(.55, .07, shadows);
+	env = mul(env, mix(float(1), flagDepth, flagMask));
+	const gw = local(add(.065, mul(stripSoft, .05)), "gw");
+	const dOut = local(max(dbox, 0), "dOut");
+	const warmGlow = mul(exp(mul(mul(div(dOut, gw), div(dOut, gw)), -1)), smoothstep(-.06, .1, dbox));
+	env = add(env, mul(warmC, mul(mul(mul(mul(warmGlow, spectral), 1.3), warmSide), facing)));
+	const fb = local(div(add(ey, .12), .05), "fb");
+	env = add(env, mul(warmC, mul(mul(mul(mul(exp(mul(mul(fb, fb), -1)), spectral), .5), warmSide), sub(1, facing))));
+	const cbx = local(sub(abs(px), .7), "cbx");
+	const cby = local(sub(abs(add(py, .78)), .05), "cby");
+	const dcard = local(add(length(max(vec2(cbx, cby), vec2(0, 0))), min(max(cbx, cby), 0)), "dcard");
+	const card = mul(smoothstep(boxSoft, mul(boxSoft, -.6), dcard), facing);
+	return add(env, mul(vec3(.5, .5, .52), card));
+}
+const componentDefinition = defineStd({
+	name: "Chrome",
+	role: "shapeEffect",
+	species: "custom",
+	boundingBoxDeclaration: shapeEffectBoundingBoxDeclaration,
+	category: "Shape Effects",
+	description: "Studio-lit mirror chrome — a precision-machined shape with a controllable polished bevel, softly convex faces and a photographic studio reflected in them: one huge frontal softbox, black flags, and thin warm/cool strip lights that fringe amber and ice-blue exactly where the reflections break",
+	animatedTime: { speed: "speed" },
+	...shapedSurface({
+		pattern: "raw",
+		surface: (frame, params) => {
+			const { uniforms: u } = params;
+			const t = animatedTime(params);
+			const vol = frame.volumetric;
+			const mobile = isMobileGpuViewport();
+			const EPS = .01;
+			const PR = .0081;
+			const field = surfaceField(frame, params, { scale: u.scale });
+			const { s0, sX, sY, sdf, pxH } = field;
+			const pat = surfacePattern(frame, field);
+			const fx = pat.member("x");
+			const fy = pat.member("y");
+			let nGeo;
+			if (vol) nGeo = marchedNormal(field);
+			else {
+				const grad = local(call(fieldGradient, "fieldGradient", [
+					s0,
+					sX,
+					sY,
+					float(EPS)
+				]), "grad");
+				const glen = local(max(length(grad), 1e-4), "glen");
+				const gx = local(div(grad.member("x"), glen), "gx");
+				const gy = local(div(grad.member("y"), glen), "gy");
+				const bw = max(u.bevelWidth, .003);
+				const depth = local(mul(sdf, -1), "depth");
+				const t0 = local(clamp(div(depth, bw), 0, 1), "t0");
+				const sBev = local(call(bevelSin, "bevelSin", [clamp(add(t0, mul(mul(mul(mul(mul(local(call(perlin12d, "perlin12d", [vec2(mul(fx, 21), mul(fy, 21))]), "rimN").member("x"), u.waviness), .22), t0), sub(1, t0)), 4)), 0, 1), u.bevelShape]), "sBev");
+				const sPillow = mul(mul(u.curvature, .14), div(PR, add(mul(depth, depth), PR)));
+				const flen = local(length(vec2(fx, fy)), "flen");
+				const dgx = local(div(fx, max(flen, 1e-4)), "dgx");
+				const dgy = local(div(fy, max(flen, 1e-4)), "dgy");
+				const sSphere = local(mul(mul(u.curvature, .75), smoothstep(0, .5, flen)), "sSphere");
+				const sEdge = local(max(sBev, sPillow), "sEdge");
+				const txy = local(vec2(add(mul(gx, sEdge), mul(dgx, sSphere)), add(mul(gy, sEdge), mul(dgy, sSphere))), "txy");
+				const tl = local(min(length(txy), .9995), "tl");
+				const tn = local(mul(txy, div(tl, max(length(txy), 1e-4))), "tn");
+				const cz = sqrt(sub(1, mul(tl, tl)));
+				nGeo = local(vec3(tn.member("x"), tn.member("y"), mul(cz, -1)), "nGeo");
+			}
+			const wg = local(perlinSlope(vec2(add(mul(fx, 1.05), mul(t, .08)), mul(fy, 1.05)), 1), "wg");
+			const wAmt = local(mul(u.waviness, .2), "wAmt");
+			const n = nudgeNormal(nGeo, mul(wg.member("x"), wAmt), mul(wg.member("y"), wAmt));
+			const viewI = viewRay(params, field, .55);
+			const R = local(reflect(viewI, n), "R");
+			const tiltV = grazingOf(n, viewI);
+			const rotA = local(add(mul(u.envRotation, DEG_TO_RAD), mul(sin(mul(t, .23)), .05)), "rotA");
+			const envC = local(cos(rotA), "envC");
+			const envS = local(sin(rotA), "envS");
+			const upY = local(mul(R.member("y"), -1), "upY");
+			const rx0 = local(sub(mul(R.member("x"), envC), mul(upY, envS)), "rx0");
+			const ry0 = local(add(mul(R.member("x"), envS), mul(upY, envC)), "ry0");
+			const orbit = local(add(mul(sin(mul(t, .5)), .4), mul(sin(add(mul(t, .19), 1.7)), .2)), "orbit");
+			const oc = local(cos(orbit), "oc");
+			const os = local(sin(orbit), "os");
+			const rx = local(add(mul(rx0, oc), mul(R.member("z"), os)), "rx");
+			const rz0 = local(sub(mul(R.member("z"), oc), mul(rx0, os)), "rz0");
+			const nod = local(mul(sin(add(mul(t, .31), .9)), .12), "nod");
+			const nc = local(cos(nod), "nc");
+			const ns = local(sin(nod), "ns");
+			const ry = local(sub(mul(ry0, nc), mul(rz0, ns)), "ry");
+			const rz = local(add(mul(rz0, nc), mul(ry0, ns)), "rz");
+			const faceness = smoothstep(.75, 1, mul(n.member("z"), -1));
+			const soft = local(u.softness, "soft");
+			const softEff = local(add(soft, mul(faceness, .2)), "softEff");
+			const spectral = local(u.spectral, "spectral");
+			const shadows = local(u.shadows, "shadows");
+			const warmC = local(u.warmColor.member("rgb"), "warmC");
+			const coolC = local(u.coolColor.member("rgb"), "coolC");
+			const envG = local(chromeStudio(rx, ry, rz, softEff, soft, spectral, shadows, warmC, coolC), "envG");
+			let envR;
+			let envB;
+			if (mobile) {
+				envR = envG.member("x");
+				envB = envG.member("z");
+			} else {
+				const delta = local(mul(u.dispersion, add(.004, mul(mul(tiltV, tiltV), .06))), "delta");
+				const envRt = local(chromeStudio(rx, add(ry, delta), rz, softEff, soft, spectral, shadows, warmC, coolC), "envRt");
+				const envBt = local(chromeStudio(rx, sub(ry, delta), rz, softEff, soft, spectral, shadows, warmC, coolC), "envBt");
+				envR = envRt.member("x");
+				envB = envBt.member("z");
+			}
+			const rgb = neutralTone(mul(mul(vec3(envR, envG.member("y"), envB), u.environment), u.tint.member("rgb")));
+			return guarded(insideShape(sdf, pxH), vec4(rgb, silhouette(field, u.edgeSoftness)), ZERO, "chrome");
+		}
+	}),
+	props: {
+		origin: {
+			default: "center",
+			description: "Reference edge the center position is measured from (center default). Lets you pin the shape relative to a corner or the canvas centre.",
+			ui: {
+				type: "origin",
+				label: "Origin",
+				group: "Position"
+			}
+		},
+		center: {
+			default: {
+				x: .5,
+				y: .5
+			},
+			transform: transformPosition,
+			description: "Center position of the chrome shape",
+			ui: {
+				type: "position",
+				label: "Center",
+				group: "Position",
+				units: ["%", "px"]
+			}
+		},
+		scale: {
+			default: 1,
+			description: "Scale of the chrome shape (1 = default size)",
+			ui: {
+				type: "range",
+				min: .1,
+				max: 3,
+				step: .01,
+				label: "Scale",
+				group: "Position"
+			}
+		},
+		rotation: {
+			default: 0,
+			description: "Rotation of the chrome shape in degrees",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 360,
+				step: 1,
+				label: "Rotation",
+				group: "Position"
+			}
+		},
+		tint: {
+			default: "#ffffff",
+			transform: transformColor,
+			description: "Metal tint multiplied into the reflection — white for silver chrome, warm ivory for gold, dusky rose for copper",
+			ui: {
+				type: "color",
+				label: "Tint",
+				group: "Metal"
+			}
+		},
+		warmColor: {
+			default: "#ffa94d",
+			transform: transformColor,
+			description: "Color of the warm strip light hugging the studio horizon — the amber band that fringes the reflections",
+			ui: {
+				type: "color",
+				label: "Warm Light",
+				group: "Metal"
+			}
+		},
+		coolColor: {
+			default: "#82a7e6",
+			transform: transformColor,
+			description: "Color of the cool wash below the horizon — the steel-blue zone the darker reflections fall into",
+			ui: {
+				type: "color",
+				label: "Cool Light",
+				group: "Metal"
+			}
+		},
+		bevelWidth: {
+			default: .028,
+			description: "Width of the polished edge bevel, relative to the shape — thin for machined jewellery edges, wide for soft pillowed metal",
+			ui: {
+				type: ["range", "map"],
+				min: .005,
+				max: .2,
+				step: .001,
+				label: "Bevel Width",
+				group: "Bevel"
+			}
+		},
+		bevelShape: {
+			default: .55,
+			description: "Bevel profile — 0 = one smooth round fillet, 1 = machined: a steep outer fillet, a chamfer plateau and an inner knee, each catching its own line of light",
+			ui: {
+				type: ["range", "map"],
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Bevel Profile",
+				group: "Bevel"
+			}
+		},
+		curvature: {
+			default: .5,
+			description: "Convex doming of the faces — sweeps the big soft studio gradients across otherwise flat metal",
+			ui: {
+				type: ["range", "map"],
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Curvature",
+				group: "Bevel"
+			}
+		},
+		waviness: {
+			default: .15,
+			description: "Pressed-metal imperfection — gently bends the face reflections and wobbles the bevel light lines so the surface reads as real",
+			ui: {
+				type: ["range", "map"],
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Waviness",
+				group: "Bevel"
+			}
+		},
+		...glassShellProps({
+			environment: {
+				description: "Exposure of the reflected studio — the overall brilliance of the chrome",
+				ui: { group: "Studio" }
+			},
+			envRotation: {
+				description: "Rotates the whole reflected studio — spins where the softbox, flags and strips fall",
+				ui: {
+					type: ["range", "map"],
+					group: "Studio"
+				}
+			}
+		}),
+		softness: {
+			default: .3,
+			description: "Softness of the studio edges — 0 = razor polished reflections, 1 = satin diffusion",
+			ui: {
+				type: ["range", "map"],
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Softness",
+				group: "Studio"
+			}
+		},
+		spectral: {
+			default: .9,
+			description: "The coloured accent lights: an amber glow hugging the softbox edge and an ice-blue wash below it. 0 = a fully achromatic black-and-white studio.",
+			ui: {
+				type: ["range", "map"],
+				min: 0,
+				max: 2,
+				step: .01,
+				label: "Accent Lights",
+				group: "Studio"
+			}
+		},
+		...glassShellProps({ dispersion: {
+			default: .3,
+			description: "Prismatic RGB splitting concentrated on the fast-curving bevel — thin rainbow micro-fringes along the edge highlights, distinct from the broad accent lights",
+			ui: { group: "Studio" }
+		} }),
+		shadows: {
+			default: .7,
+			description: "Depth of the dark studio reflections — how hard the black side flags and floor crush toward graphite. 0 lifts them to a soft gray studio.",
+			ui: {
+				type: ["range", "map"],
+				min: 0,
+				max: 1,
+				step: .01,
+				label: "Shadows",
+				group: "Studio"
+			}
+		},
+		speed: {
+			default: .5,
+			description: "Speed of the studio orbit — the whole lighting environment slowly wanders around the piece, sliding the reflections across faces and edges. 0 freezes it.",
+			ui: {
+				type: "range",
+				min: 0,
+				max: 4,
+				step: .01,
+				label: "Speed",
+				group: "Studio"
+			}
+		},
+		...glassShellProps({ edgeSoftness: { ui: { group: "Surface" } } }),
+		shape: {
+			default: DEFAULT_SHAPE_CONFIG,
+			description: "Serialized shape configuration (JSON)",
+			ui: {
+				type: "shape",
+				label: "Shape",
+				group: "Shape"
+			}
+		},
+		shapeSdfUrl: {
+			default: "",
+			compileTime: true,
+			description: "URL to a pre-generated SDF .bin file"
+		},
+		shapeType: {
+			default: "",
+			compileTime: true,
+			description: "Active SDF shape type"
+		}
+	}
+});
+var Chrome_default = componentDefinition;
+export { componentDefinition as n, Chrome_default as t };

package/dist/core/Circle-CBP-iZmQ.js

@@ -0,0 +1,78 @@
+import { t as defineStd } from "./lower-z2vuXP8M.js";
+import { x as mul } from "./math-BF-GBlb4.js";
+import { r as circle } from "./shape-BMO1cLTt.js";
+const componentDefinition = defineStd({
+	role: "shape",
+	name: "Circle",
+	description: "Generate a circle with adjustable size and softness",
+	shape: {
+		distance: ({ x, y }, u) => circle(x, y, mul(u("radius"), .5)),
+		rotatable: false,
+		colorDescription: "The color of the circle",
+		centerDescription: "The center point of the circle",
+		centerLabel: "Center Position",
+		bounds: { size: {
+			width: "radius",
+			height: "radius",
+			as: "canvas-height"
+		} },
+		shapeProps: { radius: {
+			default: 1,
+			description: "The radius of the circle. A value of one (1) is sets the circle to fit the canvas.",
+			ui: {
+				type: ["range", "map"],
+				min: 0,
+				max: 2,
+				step: .01,
+				label: "Radius",
+				group: "Effect",
+				units: ["%", "px"]
+			}
+		} },
+		stroke: {
+			strokeColorDescription: "The color of the stroke outline",
+			strokePositionDescription: "Position of the stroke relative to the circle edge"
+		},
+		colorSpaceDescription: "Color space for blending fill and stroke colors in soft edges",
+		propOverrides: {
+			softness: {
+				default: 0,
+				description: "Edge softness. Lower values like zero (0) are sharp, higher values like one (1) are softer.",
+				ui: {
+					type: ["range", "map"],
+					min: 0,
+					max: 1,
+					step: .01,
+					label: "Softness",
+					group: "Effect",
+					dimensional: "canvas-height"
+				}
+			},
+			strokeThickness: {
+				default: 0,
+				description: "The thickness of the stroke outline. Zero (0) means no stroke.",
+				ui: {
+					type: ["range", "map"],
+					min: 0,
+					max: .5,
+					step: .01,
+					label: "Stroke Thickness",
+					group: "Stroke"
+				}
+			}
+		},
+		propOrder: [
+			"origin",
+			"color",
+			"radius",
+			"softness",
+			"center",
+			"strokeThickness",
+			"strokeColor",
+			"strokePosition",
+			"colorSpace"
+		]
+	}
+});
+var Circle_default = componentDefinition;
+export { componentDefinition as n, Circle_default as t };

package/dist/core/ColorWheel-Bt8Yats6.js

@@ -0,0 +1,130 @@
+import { s as p, t as defineStd } from "./lower-z2vuXP8M.js";
+import { a as transformColor, o as transformColorSpace, r as transformAngle, t as colorSpaceOptions } from "./transformations-CoIwF5JU.js";
+import { r as colorWheel } from "./gradients-CVEWcxw9.js";
+const componentDefinition = defineStd({
+	name: "ColorWheel",
+	role: "generator",
+	boundingBoxDeclaration: {
+		aspectRatio: null,
+		supportsResizeFit: true
+	},
+	category: "Textures",
+	description: "A directional gradient that smoothly cycles through rainbow colors or a custom set of three colors",
+	acceptsUVContext: true,
+	animatedTime: { speed: "speed" },
+	props: {
+		mode: {
+			default: "rainbow",
+			compileTime: true,
+			description: "Rainbow cycles through the full spectrum; Custom loops through your three chosen colors",
+			ui: {
+				type: "select",
+				options: [{
+					label: "Rainbow",
+					value: "rainbow"
+				}, {
+					label: "Custom",
+					value: "custom"
+				}],
+				label: "Mode",
+				group: "Colors"
+			}
+		},
+		colorA: {
+			default: "#ff0000",
+			transform: transformColor,
+			description: "First color in the cycle",
+			ui: {
+				type: "color",
+				label: "Color 1",
+				group: "Colors",
+				condition: { mode: "custom" }
+			}
+		},
+		colorB: {
+			default: "#00ff88",
+			transform: transformColor,
+			description: "Second color in the cycle",
+			ui: {
+				type: "color",
+				label: "Color 2",
+				group: "Colors",
+				condition: { mode: "custom" }
+			}
+		},
+		colorC: {
+			default: "#0066ff",
+			transform: transformColor,
+			description: "Third color in the cycle",
+			ui: {
+				type: "color",
+				label: "Color 3",
+				group: "Colors",
+				condition: { mode: "custom" }
+			}
+		},
+		scale: {
+			default: 1,
+			description: "Number of color cycles across the viewport",
+			ui: {
+				type: ["range", "map"],
+				min: .1,
+				max: 10,
+				step: .1,
+				label: "Scale",
+				group: "Effect"
+			}
+		},
+		angle: {
+			default: 0,
+			transform: transformAngle,
+			description: "Direction the gradient flows",
+			ui: {
+				type: ["range", "map"],
+				min: -180,
+				max: 180,
+				step: 1,
+				label: "Angle",
+				group: "Effect"
+			}
+		},
+		speed: {
+			default: .05,
+			description: "Speed at which the gradient cycles",
+			ui: {
+				type: "range",
+				min: -1,
+				max: 1,
+				step: .01,
+				label: "Speed",
+				group: "Animation"
+			}
+		},
+		colorSpace: {
+			default: "oklch",
+			transform: transformColorSpace,
+			compileTime: true,
+			description: "Color space for blending between custom colors",
+			ui: {
+				type: "select",
+				options: colorSpaceOptions,
+				label: "Color Space",
+				group: "Colors",
+				condition: { mode: "custom" }
+			}
+		}
+	},
+	paint: colorWheel({
+		mode: p("mode"),
+		direction: p("angle"),
+		scale: p("scale"),
+		palette: {
+			a: p("colorA"),
+			b: p("colorB"),
+			c: p("colorC")
+		},
+		space: p("colorSpace")
+	})
+});
+var ColorWheel_default = componentDefinition;
+export { componentDefinition as n, ColorWheel_default as t };

package/dist/core/CompressionArtifacts-CN-aj4Cz.js

@@ -0,0 +1,117 @@
+import { Tt as unpremultiplyAlpha, at as call, dt as vec4, nt as ZERO, s as p, t as defineStd } from "./lower-z2vuXP8M.js";
+import { f as makeJpegBlockRgb, r as buildBlockQuantizeGraph, u as createGridKernelPass } from "./porters-B1UjrM1y.js";
+import { M as vec2, _ as local, i as clamp, n as add, o as div, u as floor, x as mul } from "./math-BF-GBlb4.js";
+var N_LUMA = 6;
+var SCALE_N = 4;
+var STRIDE = SCALE_N;
+var MAX_CELLS = 1024;
+var CELL_FORMAT = "rgba16float";
+const buildCompressionGraph = () => buildBlockQuantizeGraph({
+	nLuma: N_LUMA,
+	scaleN: SCALE_N,
+	format: CELL_FORMAT,
+	namePrefix: "compression"
+});
+const jpegBlockRgb = makeJpegBlockRgb(N_LUMA);
+function cellFetchComposite(cellTex, sharp, params) {
+	const { ctx } = params;
+	const center = call(unpremultiplyAlpha, "unpremultiplyAlpha", [sharp.sample(ctx.uv)]);
+	const pPix = local(floor(mul(ctx.uv, ctx.viewportSize)), "pPix");
+	const cellX = clamp(floor(div(pPix.member("x"), STRIDE)), 0, MAX_CELLS - 1);
+	const cellY = clamp(floor(div(pPix.member("y"), STRIDE)), 0, MAX_CELLS - 1);
+	const cellUV = vec2(div(add(cellX, .5), MAX_CELLS), div(add(cellY, .5), MAX_CELLS));
+	return vec4(cellTex.sample(cellUV, "nearestClamp").member("rgb"), center.member("a"));
+}
+function jpegCompress(opts) {
+	return {
+		compute: (params) => {
+			const { childNode, gpu, convertToTexture, registerComputeTexture, getCpuValue, onCleanup, onResize, dimensions } = params;
+			if (!childNode) return null;
+			const root = gpu?.root;
+			if (!root) return null;
+			const childTexture = convertToTexture(childNode);
+			const cellTex = root.createTexture({
+				size: [MAX_CELLS, MAX_CELLS],
+				format: CELL_FORMAT
+			}).$usage("storage", "sampled");
+			onCleanup(() => cellTex.destroy());
+			const jpegCellTexture = registerComputeTexture(cellTex);
+			const graph = buildCompressionGraph();
+			const compParams = root.createUniform(graph.Params);
+			let curW = Math.max(1, Math.round(dimensions.width));
+			let curH = Math.max(1, Math.round(dimensions.height));
+			const cellsFor = (w, h) => [Math.min(Math.ceil(w / STRIDE), MAX_CELLS), Math.min(Math.ceil(h / STRIDE), MAX_CELLS)];
+			let [cellsX, cellsY] = cellsFor(curW, curH);
+			const pipeline = createGridKernelPass(root, graph.kernel);
+			let bound = pipeline;
+			let inputBound = false;
+			onResize(({ width, height }) => {
+				curW = Math.max(1, Math.round(width));
+				curH = Math.max(1, Math.round(height));
+				[cellsX, cellsY] = cellsFor(curW, curH);
+			});
+			return {
+				outputs: {
+					childTexture,
+					jpegCellTexture
+				},
+				bindInputs: (resolve) => {
+					const src = resolve(childTexture.key);
+					if (src) {
+						const bg = root.createBindGroup(graph.layout, {
+							input: src.texture,
+							cellTex,
+							params: compParams.buffer
+						});
+						bound = pipeline.with(bg);
+						inputBound = true;
+					}
+				},
+				getComputeNodes: () => {
+					const q = getCpuValue(opts.quality.name);
+					compParams.write({
+						inputWidth: curW,
+						inputHeight: curH,
+						quality: typeof q === "number" ? q : 12
+					});
+					return [() => {
+						if (inputBound) bound.dispatchThreads(cellsX, cellsY);
+					}];
+				}
+			};
+		},
+		gpu: { fragment: (params) => {
+			const { childNode, ctx, computeOutputs, convertToTexture } = params;
+			if (!childNode) return ZERO;
+			const cellTex = computeOutputs?.jpegCellTexture;
+			const sharp = computeOutputs?.childTexture;
+			if (!cellTex || !sharp) return call(unpremultiplyAlpha, "unpremultiplyAlpha", [convertToTexture(childNode).sample(ctx.uv)]);
+			return cellFetchComposite(cellTex, sharp, params);
+		} }
+	};
+}
+const componentDefinition = defineStd({
+	name: "CompressionArtifacts",
+	role: "filter",
+	species: "custom",
+	boundingBoxDeclaration: { aspectRatio: null },
+	category: "Stylize",
+	description: "Simulates lossy JPEG compression — 8×8 DCT block quantization, blockiness, ringing and color bleed",
+	requiresRTT: true,
+	requiresChild: true,
+	props: { quality: {
+		default: 12,
+		description: "JPEG quality (1 = heavily destroyed, 100 = near lossless)",
+		ui: {
+			type: ["range", "map"],
+			min: 1,
+			max: 100,
+			step: 1,
+			label: "Quality",
+			group: "Effect"
+		}
+	} },
+	...jpegCompress({ quality: p("quality") })
+});
+var CompressionArtifacts_default = componentDefinition;
+export { jpegBlockRgb as i, buildCompressionGraph as n, componentDefinition as r, CompressionArtifacts_default as t };