shaders 2.5.135 → 3.0.437

package/dist/core/index.js

@@ -1,385 +1,899 @@
-import { t as applyEdgeHandling } from "./edges-CX_lJB9R.js";
-import { a as transformColor, l as transformPosition, n as setColorSpaceMode, s as transformColorUpdate, u as transformPositionUpdate } from "./transformations-CJcUeZIC.js";
-import "./alpha-C4ptedXe.js";
-import "./AngularBlur-C1oRJ8Y9.js";
-import "./Ascii-BwSMmD6Z.js";
-import "./colorMixing-BPpDnR5I.js";
-import { t as createAnimatedTime } from "./time-DUqSFWvT.js";
-import "./Aurora-D5Pjk4ve.js";
-import "./BarShift-2XBhva1A.js";
-import "./Beam-B3BX08lR.js";
-import "./Blob-BT50tDXE.js";
-import "./computeBlur-oxyhoztH.js";
-import "./Blur-1GcG1L1y.js";
-import "./BrickPattern-BfTsjp4I.js";
-import "./BrightnessContrast-GppIqtkO.js";
-import "./Bulge-DMOATSEs.js";
-import "./ChannelBlur-CxlVaYGM.js";
-import "./Checkerboard-BVBGTvd-.js";
-import "./Chevron-BKZjAXR_.js";
-import "./ChromaFlow-C0guw_LP.js";
-import "./ChromaticAberration-DZOcs-bZ.js";
-import "./Circle-BycqVCMt.js";
-import "./ColorWheel-BQUKQPM-.js";
-import "./ConcentricSpin-CO3Kx1I1.js";
-import "./ConicGradient-DRvVwiSj.js";
-import "./ContourLines-s4waN3uU.js";
-import "./sdf-D_EAGXhN.js";
-import "./Crescent-ppz7W7eM.js";
-import "./Cross-BfNOtQ6s.js";
-import "./CRTScreen-corekL_R.js";
-import "./Crystal-QsQoy8fZ.js";
-import "./CursorRipples-CLP7Sinv.js";
-import "./CursorTrail-CshoSM5Y.js";
-import "./DiamondGradient-D6eyjZOn.js";
-import "./DiffuseBlur-BjvXHmJx.js";
-import "./Dither-z6s-TFg7.js";
-import "./DOMTexture-Ec0k6AnK.js";
-import "./DotGrid-BxAAGO4F.js";
-import "./DropShadow-CR3cecIQ.js";
-import "./Duotone-PwTfBBtM.js";
-import "./Ellipse-sWhNvW9-.js";
-import "./Emboss-DGaubb9x.js";
-import "./Exposure-CFn2J_t3.js";
-import "./FallingLines-9elMmSlj.js";
-import "./FilmGrain-DIydVgOW.js";
-import "./FloatingParticles-B068TLIi.js";
-import "./Flower-DSr0JWa2.js";
-import "./FlowField-CeZjhyEo.js";
-import "./FlowingGradient-Bd8KBK5P.js";
-import "./FlutedGlass-BJtMfV2c.js";
-import "./Fog-BQuVDReH.js";
-import "./Form3D-DOek31CJ.js";
-import "./FractalNoise-Dyhbvx9a.js";
-import "./Glass-D8DayF1P.js";
-import "./GlassTiles-Bb3cuOkr.js";
-import "./Glitch-zqdbCc2E.js";
-import "./Glow-chsUpCyj.js";
-import "./Godrays-DdSLZtBs.js";
-import "./Grayscale-BC40hfXH.js";
-import "./Grid-Lc4S0Hmp.js";
-import "./GridDistortion-DQcPYbXS.js";
-import "./Group-BeZhHbOT.js";
-import "./Halftone-CsblgxnY.js";
-import "./HexGrid-DWRNPMET.js";
-import "./HueShift-C-p9W5sr.js";
-import "./ImageTexture-bqgQxAt9.js";
-import "./Invert-D-RVP34v.js";
-import "./Kaleidoscope-HQNQrRP_.js";
-import "./LensFlare-DtES749p.js";
-import "./LinearBlur-6mCJ9fY5.js";
-import "./LinearGradient-DIbCAHc7.js";
-import "./Liquify-8dcdv2Sl.js";
-import "./Marble-DX29RG-p.js";
-import "./Mirror-BM2xf3Nr.js";
-import "./MultiPointGradient-BzM24vnR.js";
-import "./Neon-nPiMi3wt.js";
-import "./Paper-Ddpe8-EI.js";
-import "./Perspective-BIKpqd4H.js";
-import "./Pixelate-Cp0-lwkG.js";
-import "./Plasma-M--gLd1Q.js";
-import "./PolarCoordinates-C42rlD2q.js";
-import "./Polygon-CKqH0ApY.js";
-import "./Posterize-B6ZhRkH2.js";
-import "./ProgressiveBlur-By_PgPtK.js";
-import "./RadialGradient-SHxJ9ZNF.js";
-import "./RectangularCoordinates-Dw6Xr9uV.js";
-import "./ReflectivePlane-VjZ1E5B0.js";
-import "./Ring-V4sEHwwm.js";
-import "./Ripples-DC1y3YuP.js";
-import "./RoundedRect-JY2z6YEH.js";
-import "./Saturation-ChJ9IWnl.js";
-import "./Sharpness-C1ufX8S-.js";
-import "./Shatter-Du5THcwZ.js";
-import "./SimplexNoise--vwIZVu0.js";
-import "./SineWave-BIVPG3oc.js";
-import "./Smoke-DSBQreo0.js";
-import "./SmokeFill-Dy-0kjsX.js";
-import "./Solarize-BymZlSu0.js";
-import "./SolidColor-D8XC4aoJ.js";
-import "./Spherize-tRTB4WdO.js";
-import "./Spiral-CiDp2Tg2.js";
-import "./Star-Cp4dt6Fl.js";
-import "./Strands-V3q8N-y1.js";
-import "./Stretch-CTgtc3nG.js";
-import "./Stripes-CZV6oGMy.js";
-import "./StudioBackground-CWSHq6vE.js";
-import "./SunBurst-CskZwXc3.js";
-import "./Swirl-CyGfVZ8n.js";
-import "./ThinFilm-CUsi8eSg.js";
-import "./TiltShift-vG90NlLr.js";
-import "./Tint-R7y5CJ4U.js";
-import "./Trapezoid-BXzH--z9.js";
-import "./Tritone-CF4Oj1sl.js";
-import "./Truchet-BL4jzZDX.js";
-import "./Twirl-BVLPHKJD.js";
-import "./Vesica-DzIEa3aJ.js";
-import "./VHS-B2IBdQgX.js";
-import "./Vibrance-jrvT49Du.js";
-import "./browser-CDogs09U.js";
-import "./VideoTexture-FmV1l91c.js";
-import "./Vignette-ng_5gjXc.js";
-import "./Voronoi-C8iIU7AT.js";
-import "./WaveDistortion-Crt9JSXN.js";
-import "./Weave-CFmLkEaq.js";
-import "./WebcamTexture-DlS4MCDm.js";
-import "./WorleyNoise-CEZiaVAN.js";
-import "./ZoomBlur-DTVSwIvc.js";
-import { t as getAllShaders } from "./shaderRegistry-BVFBmRN3.js";
-import { ACESFilmicToneMapping, AgXToneMapping, CineonToneMapping, Material, Mesh, MeshBasicNodeMaterial, NeutralToneMapping, NoToneMapping, OrthographicCamera, PlaneGeometry, ReinhardToneMapping, SRGBColorSpace, Scene, Vector2, WebGPURenderer } from "three/webgpu";
-import { WebGLRenderer } from "three";
-import { PI, abs, add, atan, clamp, convertToTexture, cos, div, dot, float, fract, max, min, mix, mul, pow, screenUV, sign, sin, smoothstep, sqrt, step, sub, time, uniform, uv, vec2, vec3, vec4 } from "three/tsl";
-function normal_default(base, overlay, opacity = 1) {
-	const overlayAlpha = mul(overlay.a, opacity);
-	const finalAlpha = add(overlayAlpha, mul(base.a, sub(1, overlayAlpha)));
-	return vec4(add(mul(overlay.rgb, overlayAlpha), mul(base.rgb, mul(base.a, sub(1, overlayAlpha)))), finalAlpha);
-}
-var p3ToSRGB$1 = (p3) => {
-	return vec3(p3.x.mul(1.2249401).sub(p3.y.mul(.2249404)).sub(p3.z.mul(0)), p3.x.mul(-.0420569).add(p3.y.mul(1.0420571)).add(p3.z.mul(0)), p3.x.mul(-.0196376).sub(p3.y.mul(.0786361)).add(p3.z.mul(1.0982735)));
-};
-var sRGBToP3$1 = (srgb) => {
-	return vec3(srgb.x.mul(.8224621).add(srgb.y.mul(.177538)).add(srgb.z.mul(0)), srgb.x.mul(.0331941).add(srgb.y.mul(.9668058)).add(srgb.z.mul(0)), srgb.x.mul(.0170826).add(srgb.y.mul(.0723974)).add(srgb.z.mul(.9105199)));
-};
-var rgbToOklab$1 = (rgb) => {
-	const r = rgb.x;
-	const g = rgb.y;
-	const b = rgb.z;
-	const l = r.mul(.4122214708).add(g.mul(.5363325363)).add(b.mul(.0514459929));
-	const m = r.mul(.2119034982).add(g.mul(.6806995451).add(b.mul(.1073969566)));
-	const s = r.mul(.0883024619).add(g.mul(.2817188376)).add(b.mul(.6299787005));
-	const l_ = sign(l).mul(pow(abs(l), float(1 / 3)));
-	const m_ = sign(m).mul(pow(abs(m), float(1 / 3)));
-	const s_ = sign(s).mul(pow(abs(s), float(1 / 3)));
-	return vec3(l_.mul(.2104542553).add(m_.mul(.793617785)).sub(s_.mul(.0040720468)), l_.mul(1.9779984951).sub(m_.mul(2.428592205)).add(s_.mul(.4505937099)), l_.mul(.0259040371).add(m_.mul(.7827717662)).sub(s_.mul(.808675766)));
-};
-var oklabToRgb$1 = (lab) => {
-	const L = lab.x;
-	const a = lab.y;
-	const b = lab.z;
-	const l_ = L.add(a.mul(.3963377774)).add(b.mul(.2158037573));
-	const m_ = L.sub(a.mul(.1055613458)).sub(b.mul(.0638541728));
-	const s_ = L.sub(a.mul(.0894841775)).sub(b.mul(1.291485548));
-	const l = pow(l_, float(3));
-	const m = pow(m_, float(3));
-	const s = pow(s_, float(3));
-	return vec3(l.mul(4.0767416621).sub(m.mul(3.3077115913)).add(s.mul(.2309699292)), l.mul(-1.2684380046).add(m.mul(2.6097574011)).sub(s.mul(.3413193965)), l.mul(-.0041960863).sub(m.mul(.7034186147)).add(s.mul(1.707614701)));
-};
-var oklabToOklch = (lab) => {
-	const L = lab.x;
-	const a = lab.y;
-	const b = lab.z;
-	return vec3(L, sqrt(a.mul(a).add(b.mul(b))), atan(b, a));
-};
-var oklchToOklab = (lch) => {
-	const L = lch.x;
-	const C = lch.y;
-	const h = lch.z;
-	return vec3(L, C.mul(cos(h)), C.mul(sin(h)));
-};
-function normal_oklch_default(base, overlay, opacity = 1) {
-	const overlayAlpha = mul(overlay.a, opacity);
-	const finalAlpha = add(overlayAlpha, mul(base.a, sub(1, overlayAlpha)));
-	const baseSRGB = p3ToSRGB$1(vec3(base.r, base.g, base.b));
-	const overlaySRGB = p3ToSRGB$1(vec3(overlay.r, overlay.g, overlay.b));
-	const baseOklab = rgbToOklab$1(baseSRGB);
-	const overlayOklab = rgbToOklab$1(overlaySRGB);
-	const baseOklch = oklabToOklch(baseOklab);
-	return vec4(sRGBToP3$1(oklabToRgb$1(oklchToOklab(add(mul(oklabToOklch(overlayOklab), overlayAlpha), mul(baseOklch, mul(base.a, sub(1, overlayAlpha))))))), finalAlpha);
-}
-var p3ToSRGB = (p3) => {
-	return vec3(p3.x.mul(1.2249401).sub(p3.y.mul(.2249404)).sub(p3.z.mul(0)), p3.x.mul(-.0420569).add(p3.y.mul(1.0420571)).add(p3.z.mul(0)), p3.x.mul(-.0196376).sub(p3.y.mul(.0786361)).add(p3.z.mul(1.0982735)));
-};
-var sRGBToP3 = (srgb) => {
-	return vec3(srgb.x.mul(.8224621).add(srgb.y.mul(.177538)).add(srgb.z.mul(0)), srgb.x.mul(.0331941).add(srgb.y.mul(.9668058)).add(srgb.z.mul(0)), srgb.x.mul(.0170826).add(srgb.y.mul(.0723974)).add(srgb.z.mul(.9105199)));
-};
-var rgbToOklab = (rgb) => {
-	const r = rgb.x;
-	const g = rgb.y;
-	const b = rgb.z;
-	const l = r.mul(.4122214708).add(g.mul(.5363325363)).add(b.mul(.0514459929));
-	const m = r.mul(.2119034982).add(g.mul(.6806995451).add(b.mul(.1073969566)));
-	const s = r.mul(.0883024619).add(g.mul(.2817188376)).add(b.mul(.6299787005));
-	const l_ = sign(l).mul(pow(abs(l), float(1 / 3)));
-	const m_ = sign(m).mul(pow(abs(m), float(1 / 3)));
-	const s_ = sign(s).mul(pow(abs(s), float(1 / 3)));
-	return vec3(l_.mul(.2104542553).add(m_.mul(.793617785)).sub(s_.mul(.0040720468)), l_.mul(1.9779984951).sub(m_.mul(2.428592205)).add(s_.mul(.4505937099)), l_.mul(.0259040371).add(m_.mul(.7827717662)).sub(s_.mul(.808675766)));
-};
-var oklabToRgb = (lab) => {
-	const L = lab.x;
-	const a = lab.y;
-	const b = lab.z;
-	const l_ = L.add(a.mul(.3963377774)).add(b.mul(.2158037573));
-	const m_ = L.sub(a.mul(.1055613458)).sub(b.mul(.0638541728));
-	const s_ = L.sub(a.mul(.0894841775)).sub(b.mul(1.291485548));
-	const l = pow(l_, float(3));
-	const m = pow(m_, float(3));
-	const s = pow(s_, float(3));
-	return vec3(l.mul(4.0767416621).sub(m.mul(3.3077115913)).add(s.mul(.2309699292)), l.mul(-1.2684380046).add(m.mul(2.6097574011)).sub(s.mul(.3413193965)), l.mul(-.0041960863).sub(m.mul(.7034186147)).add(s.mul(1.707614701)));
-};
-function normal_oklab_default(base, overlay, opacity = 1) {
-	const overlayAlpha = mul(overlay.a, opacity);
-	const finalAlpha = add(overlayAlpha, mul(base.a, sub(1, overlayAlpha)));
-	const baseSRGB = p3ToSRGB(vec3(base.r, base.g, base.b));
-	const overlaySRGB = p3ToSRGB(vec3(overlay.r, overlay.g, overlay.b));
-	const baseOklab = rgbToOklab(baseSRGB);
-	return vec4(sRGBToP3(oklabToRgb(add(mul(rgbToOklab(overlaySRGB), overlayAlpha), mul(baseOklab, mul(base.a, sub(1, overlayAlpha)))))), finalAlpha);
-}
-function multiply_default(base, overlay, opacity = 1) {
-	const overlayAlpha = mul(overlay.a, opacity);
-	const finalAlpha = add(overlayAlpha, mul(base.a, sub(1, overlayAlpha)));
-	return vec4(add(mul(mul(base.rgb, overlay.rgb), overlayAlpha), mul(base.rgb, mul(base.a, sub(1, overlayAlpha)))), finalAlpha);
-}
-function screen_default(base, overlay, opacity = 1) {
-	const overlayAlpha = mul(overlay.a, opacity);
-	const finalAlpha = add(overlayAlpha, mul(base.a, sub(1, overlayAlpha)));
-	return vec4(add(mul(sub(1, mul(sub(1, base.rgb), sub(1, overlay.rgb))), overlayAlpha), mul(base.rgb, mul(base.a, sub(1, overlayAlpha)))), finalAlpha);
-}
-function linearDodge_default(base, overlay, opacity = 1) {
-	const overlayAlpha = mul(overlay.a, opacity);
-	const finalAlpha = add(overlayAlpha, mul(base.a, sub(1, overlayAlpha)));
-	return vec4(add(mul(add(base.rgb, overlay.rgb), overlayAlpha), mul(base.rgb, mul(base.a, sub(1, overlayAlpha)))), finalAlpha);
-}
-function overlay_default(base, overlay, opacity = 1) {
-	const overlayAlpha = mul(overlay.a, opacity);
-	const finalAlpha = add(overlayAlpha, mul(base.a, sub(1, overlayAlpha)));
-	return vec4(add(mul(mix(mul(2, mul(base.rgb, overlay.rgb)), sub(1, mul(2, mul(sub(1, base.rgb), sub(1, overlay.rgb)))), step(.5, base.rgb)), overlayAlpha), mul(base.rgb, mul(base.a, sub(1, overlayAlpha)))), finalAlpha);
-}
-function difference_default(base, overlay, opacity = 1) {
-	const overlayAlpha = mul(overlay.a, opacity);
-	const finalAlpha = add(overlayAlpha, mul(base.a, sub(1, overlayAlpha)));
-	return vec4(add(mul(abs(sub(base.rgb, overlay.rgb)), overlayAlpha), mul(base.rgb, mul(base.a, sub(1, overlayAlpha)))), finalAlpha);
-}
-function colorDodge_default(base, overlay, opacity = 1) {
-	const overlayAlpha = mul(overlay.a, opacity);
-	const finalAlpha = add(overlayAlpha, mul(base.a, sub(1, overlayAlpha)));
-	return vec4(add(mul(mix(base.rgb, min(div(base.rgb, sub(1, overlay.rgb)), 1), step(.001, sub(1, overlay.rgb))), overlayAlpha), mul(base.rgb, mul(base.a, sub(1, overlayAlpha)))), finalAlpha);
+import { Bt as needsTransformation, Dt as SHARED_SAMPLER_LAYOUT, Mt as composeNodeTree, Vt as screenUVToBoxLocal$1, _t as packConvertedStops, an as createUniformStore, f as maxPixelRatioForDevice, in as FieldHandle, jt as collectStructuralHashInputs, sn as updateFieldValue, t as SystemUniforms, vt as packStops, yt as getAnimatedTimeState, z as createComputeDispatcher, zt as boundingBoxToUVParams } from "./coords-BlwgBpJf.js";
+import "./glass-DdgMBWkF.js";
+import "./Neon-DFuPjkcF.js";
+import "./Emboss-D-qOxM2u.js";
+import "./Form3D-CrT8E1u5.js";
+import "./ThinFilm-9l3KGv4Q.js";
+import { o as transformColorSpace } from "./transformations-fqzznt4g.js";
+import { _ as sortStops, a as buildDimensionalPlan, c as isDimensionalValue, d as colorToRGBA, f as setColorSpaceModeGpu, g as resolveStops, h as colorStopsTransform, i as boxHalfExtentsUV, l as resolveDimensionalProp, n as rootPassthrough, o as buildExtraSizeProps, p as MAX_COLOR_STOPS, r as createGpuUniformsMap, s as isDimensionalProp, u as setShaderCanvasDimensions } from "./porters-CoaznI7i.js";
+import "./AngularBlur-CFsh0PlD.js";
+import "./Arc-CUnOmySr.js";
+import "./Ascii-BLLIv-3N.js";
+import "./Aurora-B_5FkTB2.js";
+import "./BarShift-Ca-1XYfx.js";
+import "./Beam-DRdKJKir.js";
+import "./Blob-BRTcopJC.js";
+import "./noiseColor-Cr76BYLN.js";
+import "./BlockNoise-CA933kae.js";
+import "./BlueNoise-BeFfRr-o.js";
+import "./Blur-l7HgDuUW.js";
+import "./BrickPattern-BWK7-KwE.js";
+import "./BrightnessContrast-Dh8qSRLx.js";
+import { a as SVG3D_TYPES, c as isVolumetricShapeType, i as SVG3D_DEFAULTS, l as shape3dBoundingRadius, n as SHAPE3D_DEFAULTS, o as is3dShapeType, r as SHAPE3D_TYPES, s as isSvg3dShapeType } from "./shapeEffectBounds-BlxxsYMN.js";
+import "./BrushedMetal-CvIXubZz.js";
+import "./Bulge-d93jKEwv.js";
+import "./CarbonFiber-G7vIOz5W.js";
+import "./Chalkboard-C9PtcnYN.js";
+import "./ChannelBlur-B1bY63Fb.js";
+import "./Checkerboard-DbjFO-fF.js";
+import "./Chevron-D5-x4Wwd.js";
+import "./ChromaFlow-CuLYMObY.js";
+import "./ChromaticAberration-Dwvzvb8a.js";
+import "./Circle-BLNjdX3R.js";
+import "./ColorWheel-CA_34-9I.js";
+import "./CompressionArtifacts-3lIojU64.js";
+import "./ConcentricSpin-FJuBPPHi.js";
+import "./ConicGradient-f9jCXFuK.js";
+import "./ContourLines-Clnm2pQU.js";
+import "./CornerPin-ecpjb9do.js";
+import "./Crescent-CO5EZzD1.js";
+import "./Cross-CofGHkIn.js";
+import "./CRTScreen-CSBjpbn4.js";
+import "./Crystal-C_aHlQ_3.js";
+import "./CurlNoise-Br5XEf1K.js";
+import "./CursorRipples-CLYoq-BF.js";
+import "./CursorTrail-c-t96YgV.js";
+import "./DataMosh-BSYAol1u.js";
+import "./DiamondGradient-uyUPtPc3.js";
+import "./DiffuseBlur-Cw9duoJ7.js";
+import "./Dither-B3ulhQOh.js";
+import "./DOMTexture-Zxx_WTGZ.js";
+import "./DotGrid-ioUj-Lim.js";
+import "./DropShadow-BRL7yRmy.js";
+import "./Duotone-Df34HelN.js";
+import "./Ellipse-BHxcxCpl.js";
+import "./Engraving-B1ebFc1E.js";
+import "./ErosionNoise-ZrJulbtK.js";
+import "./Exposure-D8apJapP.js";
+import "./FallingLines-DsMBKjEZ.js";
+import "./FilmGrain-DeW-yw_v.js";
+import "./Flip-Dw194RY6.js";
+import "./FloatingParticles--Y81hnnp.js";
+import "./Flower-Cdg8fOzZ.js";
+import "./FlowField-CiK49M8B.js";
+import "./FlowingGradient-B1Iywvbd.js";
+import "./FlutedGlass-Crp432sd.js";
+import "./Fog-ClrsfQfj.js";
+import "./FractalNoise-DeDp7KQE.js";
+import "./Frost-IvGmzNqf.js";
+import "./GaborNoise-Bmhmuq_Z.js";
+import "./Glass-CJFR7oIt.js";
+import "./GlassTiles-BSBCjkhG.js";
+import "./Glitch-Bp0LbC1u.js";
+import "./Glow-CVBYSMxr.js";
+import "./Godrays-C0VLmrcc.js";
+import "./Goo-D-X3mP-n.js";
+import "./GradientMap-uRYa7Yhv.js";
+import "./Grayscale-DUGCGltR.js";
+import "./Grid-FtTNW6zy.js";
+import "./GridDistortion-lKZ4wpxx.js";
+import "./Group-BNE6w-Ls.js";
+import "./Halftone-BdmAqFEa.js";
+import "./Heart-iGATzBCZ.js";
+import "./Heatmap-dBfHUyG-.js";
+import "./HexGrid-BUe3dyym.js";
+import "./Hologram-BQ1kz8M2.js";
+import "./Holographic-B39ULAli.js";
+import "./HueShift-DeP_0kOt.js";
+import "./ImageTexture-Bzh0A17b.js";
+import "./Invert-CqrJ-5l4.js";
+import "./IsometricCubes-BVYfIhbb.js";
+import "./Kaleidoscope-VxQtO7zA.js";
+import "./KeyFrames-WFOyBjoF.js";
+import "./LensFlare-2M6sCguV.js";
+import "./LightEdge-CvV9PYbe.js";
+import "./LightLeak-BQxRr11E.js";
+import "./LinearBlur-CyNRaqj8.js";
+import "./LinearGradient-RDNQes5r.js";
+import "./LiquidMetal-PGUaQGV-.js";
+import "./Liquify-CmkepjAk.js";
+import "./Marble-D_a2ctfR.js";
+import "./Mirror-B98LBGCI.js";
+import "./MultiPointGradient-DBWhUtj8.js";
+import "./fonts-3F3pIODs.js";
+import "./ObjectTracker-Bolz91qz.js";
+import "./PagePeel-CTy_-lpL.js";
+import "./Paper-BE3SU_ac.js";
+import "./Parallelogram-C9qwJkYa.js";
+import "./Particles-x_HCygMr.js";
+import "./PerlinNoise-Di7dE-hc.js";
+import "./Perspective-CoYBx1wH.js";
+import "./Pixelate-Dg41Ap0g.js";
+import "./PixelSort-DMWTXIcO.js";
+import "./PixelThrow-CiZj7iGN.js";
+import "./Plasma-BpNK-Jnv.js";
+import "./Plastic-CpmtjSSV.js";
+import "./PolarCoordinates-CBh8MX8L.js";
+import "./Polygon-KpW71r_g.js";
+import "./Posterize-DPwFDwMx.js";
+import "./Prism-BZcRvoMJ.js";
+import "./ProgressiveBlur-BAYvLhUa.js";
+import "./RadialGradient-DxIBw-EZ.js";
+import "./RectangularCoordinates-DJGtXzgn.js";
+import "./ReflectivePlane-C4JxzSK_.js";
+import "./Repeater-1TW-fdff.js";
+import "./Ring-W9djENkw.js";
+import "./Ripples-Dbvh__ZY.js";
+import "./RoundedRect-DXjLPZee.js";
+import "./Saturation-Wct3aUol.js";
+import "./Scratches-CpfAuRQw.js";
+import "./Sharpness-BgWKE-3E.js";
+import "./Shatter-DiBeVj4M.js";
+import "./SimplexNoise-Bgiw5XJP.js";
+import "./SineWave-CHygTRV-.js";
+import "./Smoke-CbAIiwKG.js";
+import "./SmokeFill-BnJoSbE3.js";
+import "./SmokeFlow-H01ajJ5Q.js";
+import "./Solarize-CUpThxJh.js";
+import "./SolidColor-rdMtlNyB.js";
+import "./Spherize-bBe44dU7.js";
+import "./Spiral-sBR7Fn0z.js";
+import "./Star-DQUfQjbf.js";
+import "./noiseStylize-C2jzZv4d.js";
+import "./Stone-DnY9YuMc.js";
+import "./Strands-e7O0GIHI.js";
+import "./Stretch-CXFrCyH_.js";
+import "./Stripes-BS5Y7yeT.js";
+import "./StudioBackground-D7eIlsQA.js";
+import "./SunBurst-CuawxiUI.js";
+import "./Surface3D-ZtGSv9V6.js";
+import "./Swirl-CxRi1nI8.js";
+import "./Teardrop-D_ePwja5.js";
+import "./Text-C1Wjl8fJ.js";
+import "./TiltShift-CBCuQwu9.js";
+import "./Tint-HLecBeer.js";
+import "./Trapezoid-CztpQJcb.js";
+import "./TriangularGrid-BWzP25ws.js";
+import "./Tritone-DczuOC88.js";
+import "./Truchet-Bj0dM4pc.js";
+import "./Twirl-CgT4-JNU.js";
+import "./Vesica-hhR3uVm2.js";
+import "./VHS-BO2ImGGx.js";
+import "./Vibrance-Bxbm2XXk.js";
+import "./VideoTexture-Zj56qULM.js";
+import "./Vignette-DhIYUi7B.js";
+import "./Voronoi-I5jNa5lH.js";
+import "./Water-DcoqDm5J.js";
+import "./Watercolor-DhrRCOJ_.js";
+import "./WaveDistortion-DJ1itI6L.js";
+import "./WaveletNoise-Cy1pQ99p.js";
+import "./Weave-CPIeOoWv.js";
+import "./WebcamTexture-DNCb4NqI.js";
+import "./Wool-aEiSh89V.js";
+import "./WorleyNoise-C9l_C4G0.js";
+import "./ZoomBlur-CpM-IOSu.js";
+import { t as getAllShaders } from "./shaderRegistry-BIiRyksy.js";
+import * as d from "typegpu/data";
+import tgpu, { common } from "typegpu";
+var OPTIONAL_FEATURES = ["float32-filterable", "timestamp-query"];
+var rootsByDevice = /* @__PURE__ */ new WeakMap();
+var lostCallbacks = /* @__PURE__ */ new WeakMap();
+var lostDevices = /* @__PURE__ */ new WeakSet();
+var replacementRoots = /* @__PURE__ */ new WeakMap();
+async function acquireRoot(options = {}) {
+	if (options.device) {
+		const device = options.device;
+		if (!lostDevices.has(device)) {
+			let root = rootsByDevice.get(device);
+			if (!root) {
+				root = tgpu.initFromDevice({ device });
+				rootsByDevice.set(device, root);
+			}
+			wireDeviceLost(root, options.onDeviceLost);
+			return {
+				root,
+				device,
+				adapter: options.adapter,
+				createdDevice: false
+			};
+		}
+		let replacement;
+		for (;;) {
+			const cached = replacementRoots.get(device);
+			if (!cached) break;
+			const cachedCtx = await cached.catch(() => null);
+			if (cachedCtx && !lostDevices.has(cachedCtx.device)) {
+				replacement = cached;
+				break;
+			}
+			if (replacementRoots.get(device) === cached) replacementRoots.delete(device);
+		}
+		if (!replacement) {
+			console.warn("[gpu] injected GPU device was lost — creating a replacement device for recovery");
+			replacement = createOwnRoot();
+			replacementRoots.set(device, replacement);
+		}
+		const ctx$1 = await replacement;
+		wireDeviceLost(ctx$1.root, options.onDeviceLost);
+		return {
+			root: ctx$1.root,
+			device: ctx$1.device,
+			adapter: ctx$1.adapter,
+			createdDevice: false
+		};
+	}
+	const ctx = await createOwnRoot();
+	wireDeviceLost(ctx.root, options.onDeviceLost);
+	return {
+		...ctx,
+		adapter: options.adapter,
+		createdDevice: true
+	};
 }
-function exclusion_default(base, overlay, opacity = 1) {
-	const overlayAlpha = mul(overlay.a, opacity);
-	const finalAlpha = add(overlayAlpha, mul(base.a, sub(1, overlayAlpha)));
-	return vec4(add(mul(sub(add(base.rgb, overlay.rgb), mul(2, mul(base.rgb, overlay.rgb))), overlayAlpha), mul(base.rgb, mul(base.a, sub(1, overlayAlpha)))), finalAlpha);
+async function createOwnRoot() {
+	if (typeof navigator === "undefined" || !navigator.gpu) throw new Error("[gpu] WebGPU is not available in this environment (navigator.gpu is undefined). This renderer is WebGPU-only.");
+	const root = await tgpu.init({
+		adapter: { powerPreference: "high-performance" },
+		device: { optionalFeatures: OPTIONAL_FEATURES }
+	});
+	rootsByDevice.set(root.device, root);
+	return {
+		root,
+		device: root.device,
+		createdDevice: true
+	};
 }
-function getLuminance(rgb) {
-	return add(add(mul(rgb.r, .2126), mul(rgb.g, .7152)), mul(rgb.b, .0722));
+function configureCanvasContext(root, canvas, options = {}) {
+	return root.configureContext({
+		canvas,
+		alphaMode: "premultiplied",
+		...options
+	});
 }
-function color_default(base, overlay, opacity = 1) {
-	const overlayAlpha = mul(overlay.a, opacity);
-	const finalAlpha = add(overlayAlpha, mul(base.a, sub(1, overlayAlpha)));
-	const lumDiff = sub(getLuminance(base.rgb), getLuminance(overlay.rgb));
-	return vec4(add(mul(add(overlay.rgb, lumDiff), overlayAlpha), mul(base.rgb, mul(base.a, sub(1, overlayAlpha)))), finalAlpha);
+function wireDeviceLost(root, onDeviceLost) {
+	const device = root.device;
+	let callbacks = lostCallbacks.get(device);
+	if (!callbacks) {
+		callbacks = /* @__PURE__ */ new Set();
+		lostCallbacks.set(device, callbacks);
+		root.device.lost.then((info) => {
+			lostDevices.add(device);
+			if (info.reason === "destroyed") return;
+			for (const cb of lostCallbacks.get(device) ?? []) cb(info);
+		});
+	}
+	if (onDeviceLost) callbacks.add(onDeviceLost);
 }
-function luminosity_default(base, overlay, opacity = 1) {
-	const overlayAlpha = mul(overlay.a, opacity);
-	const finalAlpha = add(overlayAlpha, mul(base.a, sub(1, overlayAlpha)));
-	const baseLum = getLuminance(base.rgb);
-	const lumRatio = getLuminance(overlay.rgb).div(add(baseLum, 1e-4));
-	return vec4(add(mul(mul(base.rgb, lumRatio), overlayAlpha), mul(base.rgb, mul(base.a, sub(1, overlayAlpha)))), finalAlpha);
+function structuralHash(inputs) {
+	let h = 2166136261;
+	const joined = inputs.join("
");
+	for (let i = 0; i < joined.length; i++) {
+		h ^= joined.charCodeAt(i);
+		h = Math.imul(h, 16777619);
+	}
+	return `${(h >>> 0).toString(16).padStart(8, "0")}:${joined.length}`;
 }
-function darken_default(base, overlay, opacity = 1) {
-	const overlayAlpha = mul(overlay.a, opacity);
-	const finalAlpha = add(overlayAlpha, mul(base.a, sub(1, overlayAlpha)));
-	return vec4(add(mul(min(base.rgb, overlay.rgb), overlayAlpha), mul(base.rgb, mul(base.a, sub(1, overlayAlpha)))), finalAlpha);
+function createPipelineCache(options = {}) {
+	const maxSize = options.maxSize ?? 4;
+	const dispose = options.dispose;
+	const entries = /* @__PURE__ */ new Map();
+	let clock = 0;
+	let activeHash = null;
+	let pendingHash = null;
+	function touch(entry) {
+		entry.lastUsed = ++clock;
+	}
+	function evictIfNeeded() {
+		while (entries.size > maxSize) {
+			let victim = null;
+			for (const e of entries.values()) {
+				if (e.hash === activeHash || e.hash === pendingHash) continue;
+				if (!victim || e.lastUsed < victim.lastUsed) victim = e;
+			}
+			if (!victim) break;
+			entries.delete(victim.hash);
+			dispose?.(victim.value, victim.hash);
+		}
+	}
+	return {
+		getOrBuild(hash, buildFn) {
+			const existing = entries.get(hash);
+			if (existing) {
+				touch(existing);
+				if (hash === activeHash) pendingHash = null;
+				else pendingHash = hash;
+				return existing.value;
+			}
+			const value = buildFn();
+			const entry = {
+				hash,
+				value,
+				lastUsed: ++clock
+			};
+			entries.set(hash, entry);
+			if (activeHash === null) {
+				activeHash = hash;
+				pendingHash = null;
+			} else pendingHash = hash;
+			evictIfNeeded();
+			return value;
+		},
+		markReady(hash) {
+			if (hash !== pendingHash) return;
+			const entry = entries.get(hash);
+			if (!entry) return;
+			activeHash = hash;
+			pendingHash = null;
+			touch(entry);
+			evictIfNeeded();
+		},
+		get renderValue() {
+			const hash = activeHash ?? pendingHash;
+			return hash ? entries.get(hash)?.value ?? null : null;
+		},
+		get activeHash() {
+			return activeHash;
+		},
+		get pendingHash() {
+			return pendingHash;
+		},
+		release(hash) {
+			const entry = entries.get(hash);
+			if (!entry) return;
+			entries.delete(hash);
+			dispose?.(entry.value, hash);
+			if (activeHash === hash) activeHash = null;
+			if (pendingHash === hash) pendingHash = null;
+		},
+		has(hash) {
+			return entries.has(hash);
+		},
+		get size() {
+			return entries.size;
+		},
+		clear() {
+			for (const e of entries.values()) dispose?.(e.value, e.hash);
+			entries.clear();
+			activeHash = null;
+			pendingHash = null;
+		}
+	};
 }
-function lighten_default(base, overlay, opacity = 1) {
-	const overlayAlpha = mul(overlay.a, opacity);
-	const finalAlpha = add(overlayAlpha, mul(base.a, sub(1, overlayAlpha)));
-	return vec4(add(mul(max(base.rgb, overlay.rgb), overlayAlpha), mul(base.rgb, mul(base.a, sub(1, overlayAlpha)))), finalAlpha);
+var LABEL = "passManager";
+function createPassManager(root, options) {
+	const { textureManager, dispatcher } = options;
+	const canvasFormat = options.canvasFormat ?? preferredCanvasFormat();
+	const rttFormat = options.rttFormat ?? "rgba16float";
+	const maxSampled = options.maxSampledTextures ?? 16;
+	const vertex = options.fullScreenTriangle ?? common.fullScreenTriangle;
+	const rttTextures = /* @__PURE__ */ new Map();
+	const liveTextures = /* @__PURE__ */ new Set();
+	let current = null;
+	function buildSamplerBindGroup() {
+		const s = textureManager.samplers;
+		try {
+			return root.createBindGroup(SHARED_SAMPLER_LAYOUT, {
+				linearClamp: s.linearClamp,
+				nearestClamp: s.nearestClamp,
+				linearRepeat: s.linearRepeat,
+				nearestRepeat: s.nearestRepeat
+			});
+		} catch (e) {
+			console.error(`[${LABEL}] failed to build sampler bind group:`, e);
+			return;
+		}
+	}
+	function allocateRttTextures(ir, size) {
+		const needed = /* @__PURE__ */ new Set();
+		for (const t of ir.textures) {
+			if (t.kind !== "rtt") continue;
+			needed.add(t.key);
+			if (!rttTextures.has(t.key)) {
+				const rt = textureManager.createRenderTexture({
+					width: size.width,
+					height: size.height,
+					format: rttFormat,
+					label: `rtt:${t.key}`
+				});
+				rttTextures.set(t.key, rt);
+				liveTextures.add(rt);
+			} else rttTextures.get(t.key).resize(size.width, size.height);
+		}
+		for (const [key, rt] of [...rttTextures]) if (!needed.has(key)) {
+			rt.destroy();
+			liveTextures.delete(rt);
+			rttTextures.delete(key);
+		}
+	}
+	function buildTextureBindGroup(fragment, mediaResources) {
+		if (!fragment.textureLayout || fragment.reads.length === 0) return void 0;
+		const entries = {};
+		for (const key of fragment.reads) {
+			const rt = rttTextures.get(key);
+			const media = mediaResources?.[key];
+			const resource = rt ?? media;
+			if (!resource) {
+				console.error(`[${LABEL}] pass "${fragment.entry}" reads unknown texture "${key}"`);
+				return;
+			}
+			entries[key] = resource.texture;
+		}
+		if (fragment.reads.length > maxSampled) console.warn(`[${LABEL}] pass samples ${fragment.reads.length} textures (> device limit ~${maxSampled}); composition may fail on this device.`);
+		try {
+			return root.createBindGroup(fragment.textureLayout, entries);
+		} catch (e) {
+			console.error(`[${LABEL}] failed to build texture bind group:`, e);
+			return;
+		}
+	}
+	function buildPipeline(fragment, targetFormat) {
+		return root.createRenderPipeline({
+			vertex,
+			fragment: fragment.entry,
+			targets: { format: targetFormat }
+		});
+	}
+	function buildExternalBinding(fragment, externalSources) {
+		if (!fragment.externalLayout || fragment.externalReads.length === 0) return void 0;
+		const keys = fragment.externalReads;
+		if (keys.length === 1) {
+			const getSource = externalSources.get(keys[0]);
+			if (!getSource) {
+				console.error(`[${LABEL}] external read "${keys[0]}" has no registered source`);
+				return;
+			}
+			return textureManager.createExternalTextureBinding({
+				layout: fragment.externalLayout,
+				entryKey: keys[0],
+				getSource
+			});
+		}
+		let current$1 = null;
+		return {
+			update() {
+				const entries = {};
+				for (const key of keys) {
+					const source = externalSources.get(key)?.();
+					if (!source) {
+						current$1 = null;
+						return null;
+					}
+					try {
+						entries[key] = root.device.importExternalTexture({ source });
+					} catch {
+						current$1 = null;
+						return null;
+					}
+				}
+				current$1 = root.createBindGroup(fragment.externalLayout, entries);
+				return current$1;
+			},
+			get current() {
+				return current$1;
+			},
+			destroy() {
+				current$1 = null;
+			}
+		};
+	}
+	function buildExecutablePass(fragment, target, mediaResources, externalSources) {
+		const targetFormat = target.kind === "canvas" ? canvasFormat : rttFormat;
+		const mediaReads = fragment.reads.filter((k) => mediaResources?.[k]);
+		const mediaSnapshot = new Map(mediaReads.map((k) => [k, mediaResources[k].texture]));
+		return {
+			fragment,
+			pipeline: buildPipeline(fragment, targetFormat),
+			textureBindGroup: buildTextureBindGroup(fragment, mediaResources),
+			externalBinding: buildExternalBinding(fragment, externalSources),
+			target,
+			mediaReads,
+			mediaSnapshot
+		};
+	}
+	function setComposition(ir, uniformBindGroup, size, mediaResources) {
+		allocateRttTextures(ir, size);
+		for (const spec of ir.computeSteps) spec.bindInputs?.((key) => rttTextures.get(key) ?? mediaResources?.[key]);
+		const samplerBindGroup = buildSamplerBindGroup();
+		const externalSources = /* @__PURE__ */ new Map();
+		for (const e of ir.externalTextures) externalSources.set(e.key, e.getSource);
+		const rttPasses = ir.rttPasses.map((p) => buildExecutablePass(p.fragment, {
+			kind: "rtt",
+			key: p.textureKey
+		}, mediaResources, externalSources));
+		const finalPass = buildExecutablePass(ir.finalPass, { kind: "canvas" }, mediaResources, externalSources);
+		current = {
+			ir,
+			uniformBindGroup,
+			samplerBindGroup,
+			computeSteps: ir.computeSteps,
+			rttPasses,
+			finalPass,
+			size,
+			mediaResources
+		};
+	}
+	function execPass(pass, view) {
+		let p = pass.pipeline;
+		if (current?.uniformBindGroup) p = p.with(current.uniformBindGroup);
+		if (pass.mediaReads && pass.mediaReads.length > 0 && current?.mediaResources) {
+			let swapped = false;
+			for (const key of pass.mediaReads) if (current.mediaResources[key].texture !== pass.mediaSnapshot.get(key)) swapped = true;
+			if (swapped) {
+				pass.textureBindGroup = buildTextureBindGroup(pass.fragment, current.mediaResources);
+				for (const key of pass.mediaReads) pass.mediaSnapshot.set(key, current.mediaResources[key].texture);
+			}
+		}
+		if (pass.textureBindGroup) p = p.with(pass.textureBindGroup);
+		if (pass.fragment.usesSamplers && current?.samplerBindGroup) p = p.with(current.samplerBindGroup);
+		if (pass.fragment.externalReads.length > 0) {
+			const bg = pass.externalBinding?.update() ?? null;
+			if (!bg) {
+				if (!pass.externalSkipLogged) {
+					console.warn(`[${LABEL}] external texture not ready — skipping pass (${pass.fragment.externalReads.join(", ")})`);
+					pass.externalSkipLogged = true;
+				}
+				return;
+			}
+			p = p.with(bg);
+		}
+		p.withColorAttachment({ view }).draw(3);
+	}
+	function render(canvasView, frameParams) {
+		if (!current) return;
+		for (const step of current.computeSteps) {
+			const steps = step.getComputeNodes(frameParams);
+			if (steps && steps.length) dispatcher.dispatch(steps);
+		}
+		for (const pass of current.rttPasses) {
+			const rt = rttTextures.get(pass.target.key);
+			if (!rt) continue;
+			execPass(pass, renderView(rt));
+		}
+		execPass(current.finalPass, canvasView);
+	}
+	function renderView(rt) {
+		return root.unwrap(rt.texture).createView();
+	}
+	function rebindPassTextures(pass) {
+		if (!pass.fragment.textureLayout || pass.fragment.reads.length === 0) return;
+		pass.textureBindGroup = buildTextureBindGroup(pass.fragment, current?.mediaResources);
+		if (pass.mediaReads && pass.mediaSnapshot && current?.mediaResources) for (const key of pass.mediaReads) pass.mediaSnapshot.set(key, current.mediaResources[key].texture);
+	}
+	function resize(width, height) {
+		for (const rt of rttTextures.values()) rt.resize(width, height);
+		if (!current) return;
+		current.size = {
+			width,
+			height
+		};
+		for (const spec of current.computeSteps) spec.bindInputs?.((key) => rttTextures.get(key) ?? current.mediaResources?.[key]);
+		for (const pass of current.rttPasses) rebindPassTextures(pass);
+		rebindPassTextures(current.finalPass);
+	}
+	return {
+		setComposition,
+		render,
+		resize,
+		get textureCount() {
+			return liveTextures.size;
+		},
+		get passCount() {
+			return current ? current.rttPasses.length + 1 : 0;
+		},
+		dispose() {
+			for (const rt of [...liveTextures]) rt.destroy();
+			liveTextures.clear();
+			rttTextures.clear();
+			current = null;
+		}
+	};
 }
-function colorBurn_default(base, overlay, opacity = 1) {
-	const overlayAlpha = mul(overlay.a, opacity);
-	const finalAlpha = add(overlayAlpha, mul(base.a, sub(1, overlayAlpha)));
-	return vec4(add(mul(mix(vec4(0, 0, 0, 1).rgb, max(sub(1, sub(1, base.rgb).div(add(overlay.rgb, 1e-4))), 0), step(1e-4, overlay.rgb)), overlayAlpha), mul(base.rgb, mul(base.a, sub(1, overlayAlpha)))), finalAlpha);
+function preferredCanvasFormat() {
+	if (typeof navigator !== "undefined" && navigator.gpu) return navigator.gpu.getPreferredCanvasFormat();
+	return "bgra8unorm";
 }
-function linearBurn_default(base, overlay, opacity = 1) {
-	const overlayAlpha = mul(overlay.a, opacity);
-	const finalAlpha = add(overlayAlpha, mul(base.a, sub(1, overlayAlpha)));
-	return vec4(add(mul(max(add(add(base.rgb, overlay.rgb), -1), 0), overlayAlpha), mul(base.rgb, mul(base.a, sub(1, overlayAlpha)))), finalAlpha);
+function srgbViewFormat(format) {
+	return `${format}-srgb`;
 }
-function softLight_default(base, overlay, opacity = 1) {
-	const overlayAlpha = mul(overlay.a, opacity);
-	const finalAlpha = add(overlayAlpha, mul(base.a, sub(1, overlayAlpha)));
-	const softLightDark = add(mul(2, mul(base.rgb, overlay.rgb)), mul(mul(base.rgb, base.rgb), sub(1, mul(2, overlay.rgb))));
-	const baseSqrt = sqrt(base.rgb);
-	return vec4(add(mul(mix(softLightDark, add(mul(2, mul(base.rgb, sub(1, overlay.rgb))), mul(baseSqrt, sub(mul(2, overlay.rgb), 1))), step(.5, overlay.rgb)), overlayAlpha), mul(base.rgb, mul(base.a, sub(1, overlayAlpha)))), finalAlpha);
+function createTextureManager(root) {
+	const live = /* @__PURE__ */ new Set();
+	function createRaw(props, ...usages) {
+		return root.createTexture.call(root, props).$usage(...usages);
+	}
+	let linearClamp;
+	let nearestClamp;
+	let linearRepeat;
+	let nearestRepeat;
+	const samplers = {
+		get linearClamp() {
+			return linearClamp ??= root.createSampler({
+				magFilter: "linear",
+				minFilter: "linear",
+				mipmapFilter: "linear",
+				addressModeU: "clamp-to-edge",
+				addressModeV: "clamp-to-edge"
+			});
+		},
+		get nearestClamp() {
+			return nearestClamp ??= root.createSampler({
+				magFilter: "nearest",
+				minFilter: "nearest",
+				addressModeU: "clamp-to-edge",
+				addressModeV: "clamp-to-edge"
+			});
+		},
+		get linearRepeat() {
+			return linearRepeat ??= root.createSampler({
+				magFilter: "linear",
+				minFilter: "linear",
+				mipmapFilter: "linear",
+				addressModeU: "repeat",
+				addressModeV: "repeat"
+			});
+		},
+		get nearestRepeat() {
+			return nearestRepeat ??= root.createSampler({
+				magFilter: "nearest",
+				minFilter: "nearest",
+				addressModeU: "repeat",
+				addressModeV: "repeat"
+			});
+		}
+	};
+	function wrap(texture, width, height, format, srgb) {
+		const managed = {
+			texture,
+			width,
+			height,
+			format,
+			write(source) {
+				texture.write(source);
+			},
+			unwrap() {
+				return root.unwrap(texture);
+			},
+			createSrgbView() {
+				if (!srgb) return void 0;
+				return root.unwrap(texture).createView({ format: srgbViewFormat(format) });
+			},
+			generateMipmaps() {
+				texture.generateMipmaps?.();
+			},
+			destroy() {
+				if (!live.has(managed)) return;
+				texture.destroy();
+				live.delete(managed);
+			}
+		};
+		live.add(managed);
+		return managed;
+	}
+	function createMediaTexture(options) {
+		const { width, height, srgb = false, mipLevelCount } = options;
+		const format = options.format ?? "rgba8unorm";
+		return wrap(createRaw({
+			size: [width, height],
+			format,
+			...srgb ? { viewFormats: [srgbViewFormat(format)] } : {},
+			...mipLevelCount ? { mipLevelCount } : {}
+		}, "sampled", "render"), width, height, format, srgb);
+	}
+	function createDataTexture(options) {
+		const { width, height, format, data } = options;
+		const managed = wrap(createRaw({
+			size: [width, height],
+			format
+		}, "sampled"), width, height, format, false);
+		if (data) managed.write(data);
+		return managed;
+	}
+	function createRenderTexture(options) {
+		const format = options.format ?? "rgba16float";
+		const { mipLevelCount } = options;
+		let width = options.width;
+		let height = options.height;
+		function build(w, h) {
+			return wrap(createRaw({
+				size: [w, h],
+				format,
+				...mipLevelCount ? { mipLevelCount } : {}
+			}, "sampled", "render"), w, h, format, false);
+		}
+		let inner = build(width, height);
+		return {
+			get texture() {
+				return inner.texture;
+			},
+			get width() {
+				return width;
+			},
+			get height() {
+				return height;
+			},
+			format,
+			write(source) {
+				inner.write(source);
+			},
+			unwrap() {
+				return inner.unwrap();
+			},
+			createSrgbView() {
+				return inner.createSrgbView();
+			},
+			generateMipmaps() {
+				inner.generateMipmaps();
+			},
+			resize(w, h) {
+				if (w === width && h === height) return;
+				inner.destroy();
+				width = w;
+				height = h;
+				inner = build(w, h);
+			},
+			destroy() {
+				inner.destroy();
+			}
+		};
+	}
+	function createExternalTextureBinding(options) {
+		const { layout, entryKey, getSource, staticEntries = {} } = options;
+		let current = null;
+		return {
+			update() {
+				const source = getSource();
+				if (!source) {
+					current = null;
+					return null;
+				}
+				let external;
+				try {
+					external = root.device.importExternalTexture({ source });
+				} catch {
+					current = null;
+					return null;
+				}
+				current = root.createBindGroup(layout, {
+					...staticEntries,
+					[entryKey]: external
+				});
+				return current;
+			},
+			get current() {
+				return current;
+			},
+			destroy() {
+				current = null;
+			}
+		};
+	}
+	return {
+		samplers,
+		createMediaTexture,
+		createDataTexture,
+		createRenderTexture,
+		createExternalTextureBinding,
+		get textureCount() {
+			return live.size;
+		},
+		destroy() {
+			for (const t of [...live]) t.destroy();
+			live.clear();
+		}
+	};
 }
-function hardLight_default(base, overlay, opacity = 1) {
-	const overlayAlpha = mul(overlay.a, opacity);
-	const finalAlpha = add(overlayAlpha, mul(base.a, sub(1, overlayAlpha)));
-	return vec4(add(mul(mix(mul(2, mul(base.rgb, overlay.rgb)), sub(1, mul(2, mul(sub(1, base.rgb), sub(1, overlay.rgb)))), step(.5, overlay.rgb)), overlayAlpha), mul(base.rgb, mul(base.a, sub(1, overlayAlpha)))), finalAlpha);
+function applySpring(current, velocity, target, smoothing, momentum, dt) {
+	if (smoothing === 0 && momentum === 0) return [target, 0];
+	const stiffness = 200 * Math.pow(.01, smoothing);
+	const damping = 2 * Math.sqrt(stiffness) * (1 - momentum * .85);
+	const newVelocity = velocity + (stiffness * (target - current) - damping * velocity) * dt;
+	return [current + newVelocity * dt, newVelocity];
 }
-function hue_default(base, overlay, opacity = 1) {
-	const overlayAlpha = mul(overlay.a, opacity);
-	const finalAlpha = add(overlayAlpha, mul(base.a, sub(1, overlayAlpha)));
-	const baseLum = getLuminance(base.rgb);
-	const overlayLum = getLuminance(overlay.rgb);
-	const baseChromaticity = base.rgb.sub(baseLum);
-	const overlayChromaticity = overlay.rgb.sub(overlayLum);
-	const baseChromaLength = baseChromaticity.length();
-	return vec4(add(mul(add(mul(overlayChromaticity.normalize(), baseChromaLength), baseLum), overlayAlpha), mul(base.rgb, mul(base.a, sub(1, overlayAlpha)))), finalAlpha);
+function applyBounceEase(t) {
+	const n1 = 7.5625, d1 = 2.75;
+	if (t < 1 / d1) return n1 * t * t;
+	if (t < 2 / d1) {
+		t -= 1.5 / d1;
+		return n1 * t * t + .75;
+	}
+	if (t < 2.5 / d1) {
+		t -= 2.25 / d1;
+		return n1 * t * t + .9375;
+	}
+	t -= 2.625 / d1;
+	return n1 * t * t + .984375;
 }
-function saturation_default(base, overlay, opacity = 1) {
-	const overlayAlpha = mul(overlay.a, opacity);
-	const finalAlpha = add(overlayAlpha, mul(base.a, sub(1, overlayAlpha)));
-	const baseLum = getLuminance(base.rgb);
-	const overlayLum = getLuminance(overlay.rgb);
-	const baseChromaticity = base.rgb.sub(baseLum);
-	const overlayChromaticity = overlay.rgb.sub(overlayLum);
-	return vec4(add(mul(add(mul(baseChromaticity.normalize(), overlayChromaticity.length()), baseLum), overlayAlpha), mul(base.rgb, mul(base.a, sub(1, overlayAlpha)))), finalAlpha);
+function applyEasing(t, easing) {
+	switch (easing) {
+		case "linear": return t;
+		case "quad": return t < .5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2;
+		case "expo":
+			if (t === 0) return 0;
+			if (t === 1) return 1;
+			return t < .5 ? Math.pow(2, 20 * t - 10) / 2 : (2 - Math.pow(2, -20 * t + 10)) / 2;
+		case "bounce": return applyBounceEase(t);
+		case "sine":
+		default: return (1 - Math.cos(Math.PI * t)) / 2;
+	}
 }
-var blendModes = {
-	normal: normal_default,
-	"normal-oklch": normal_oklch_default,
-	"normal-oklab": normal_oklab_default,
-	multiply: multiply_default,
-	screen: screen_default,
-	linearDodge: linearDodge_default,
-	overlay: overlay_default,
-	difference: difference_default,
-	colorDodge: colorDodge_default,
-	exclusion: exclusion_default,
-	color: color_default,
-	luminosity: luminosity_default,
-	darken: darken_default,
-	lighten: lighten_default,
-	colorBurn: colorBurn_default,
-	linearBurn: linearBurn_default,
-	softLight: softLight_default,
-	hardLight: hardLight_default,
-	hue: hue_default,
-	saturation: saturation_default
-};
-function applyBlendMode(baseNode, overlayNode, blendMode = "normal", opacity = 1) {
-	return (blendModes[blendMode] || blendModes.normal)(baseNode, overlayNode, opacity);
+function clampToTextureCap(w, h, env) {
+	const pr = env.pixelRatio || 1;
+	const gpuCssCap = Math.max(1, Math.floor(env.maxTextureDim / pr) - 1);
+	const capW = Math.min(w, env.viewportWidth, gpuCssCap);
+	const capH = Math.min(h, env.viewportHeight, gpuCssCap);
+	const scale = Math.min(capW / w, capH / h, 1);
+	return {
+		width: Math.max(1, Math.round(w * scale)),
+		height: Math.max(1, Math.round(h * scale))
+	};
 }
-function alpha_default(target, mask) {
-	const maskedAlpha = mul(target.a, mask.a);
-	return vec4(target.rgb, maskedAlpha);
+function deriveElapsedTime(sharedTimeOrigin, prevElapsed, deltaTime, now) {
+	if (sharedTimeOrigin != null) return (now - sharedTimeOrigin) / 1e3;
+	return prevElapsed + deltaTime;
 }
-function alphaInverted_default(target, mask) {
-	const invertedMaskAlpha = sub(1, mask.a);
-	const maskedAlpha = mul(target.a, invertedMaskAlpha);
-	return vec4(target.rgb, maskedAlpha);
+function frameGate(now, state) {
+	const { lastRenderTime, isVisible, forceFullFrameRate } = state;
+	const deltaTime = lastRenderTime > 0 ? (now - lastRenderTime) / 1e3 : .016;
+	if (lastRenderTime > 0) {
+		const sinceLast = now - lastRenderTime;
+		if (!isVisible && !forceFullFrameRate && sinceLast < 1e3) return {
+			render: false,
+			deltaTime
+		};
+		if ((isVisible || forceFullFrameRate) && sinceLast < 15.666666666666668) return {
+			render: false,
+			deltaTime
+		};
+	}
+	return {
+		render: true,
+		deltaTime: Math.min(deltaTime, .1)
+	};
 }
-function luminance_default(target, mask) {
-	const luminanceWeights = vec3(.2126, .7152, .0722);
-	const luminance = dot(mask.rgb, luminanceWeights);
-	const maskedAlpha = mul(target.a, luminance);
-	return vec4(target.rgb, maskedAlpha);
+async function awaitGpuIdle(root) {
+	try {
+		const queue = root.device?.queue;
+		if (queue && typeof queue.onSubmittedWorkDone === "function") {
+			await queue.onSubmittedWorkDone();
+			return;
+		}
+	} catch {}
+	await new Promise((resolve) => setTimeout(resolve, 16));
 }
-function luminanceInverted_default(target, mask) {
-	const luminanceWeights = vec3(.2126, .7152, .0722);
-	const invertedLuminance = sub(1, dot(mask.rgb, luminanceWeights));
-	const maskedAlpha = mul(target.a, invertedLuminance);
-	return vec4(target.rgb, maskedAlpha);
+function runFrameSequence(seq) {
+	seq.updateDrivers();
+	if (!seq.ensureComposition()) return;
+	seq.beforeRender();
+	seq.flush();
+	seq.render();
+	seq.markReady();
+	seq.afterRender();
 }
-var maskFunctions = {
-	"alpha": alpha_default,
-	"alphaInverted": alphaInverted_default,
-	"luminance": luminance_default,
-	"luminanceInverted": luminanceInverted_default
-};
-function applyMask(target, mask, maskType = "alpha") {
-	return (maskFunctions[maskType] || maskFunctions["alpha"])(target, mask);
+function createFrameLoop(tick) {
+	let rafId = null;
+	const raf = (cb) => typeof requestAnimationFrame === "function" ? requestAnimationFrame(cb) : setTimeout(() => cb(performance.now()), 16);
+	const cancel = (id) => {
+		if (typeof cancelAnimationFrame === "function") cancelAnimationFrame(id);
+		else clearTimeout(id);
+	};
+	const step = () => {
+		tick();
+		if (rafId !== null) rafId = raf(step);
+	};
+	return {
+		start() {
+			if (rafId !== null) return;
+			rafId = raf(step);
+		},
+		stop() {
+			if (rafId !== null) {
+				cancel(rafId);
+				rafId = null;
+			}
+		},
+		get running() {
+			return rafId !== null;
+		}
+	};
 }
 var PerformanceTracker = class {
 	frameTimesMs = [];
@@ -599,220 +1113,121 @@ var PerformanceTracker = class {
 		this.lastGpuTime = null;
 	}
 };
-const needsTransformation = (transform) => {
-	if (!transform) return false;
-	return transform.offsetX !== 0 || transform.offsetY !== 0 || transform.rotation !== 0 || transform.scale !== 1 || transform.anchorX !== .5 || transform.anchorY !== .5;
-};
-const applyUVTransform = (uv$1, offsetXUniform, offsetYUniform, rotationUniform, scaleUniform, anchorXUniform, anchorYUniform, aspectRatioUniform) => {
-	const rotationRad = rotationUniform.mul(PI).div(float(180));
-	const cosAngle = cos(rotationRad);
-	const sinAngle = sin(rotationRad);
-	const anchor = vec2(anchorXUniform, anchorYUniform);
-	const scaledUV = uv$1.sub(anchor).div(scaleUniform);
-	const squareUV = vec2(scaledUV.x.mul(aspectRatioUniform), scaledUV.y);
-	const rotatedSquareUV = vec2(squareUV.x.mul(cosAngle).sub(squareUV.y.mul(sinAngle)), squareUV.x.mul(sinAngle).add(squareUV.y.mul(cosAngle)));
-	return vec2(rotatedSquareUV.x.div(aspectRatioUniform), rotatedSquareUV.y).sub(vec2(offsetXUniform, offsetYUniform)).add(anchor);
-};
-var updateTransformMap = new Map([[transformColor, transformColorUpdate], [transformPosition, transformPositionUpdate]]);
-function createUniformsMap(component, reactiveProps, instanceId) {
-	const uniformsMap = {};
-	Object.entries(component.props).forEach(([propName, propConfig]) => {
-		const initialValue = reactiveProps[propName];
-		let uniformValue = initialValue;
-		if (propConfig.transform) {
-			const transformed = propConfig.transform(initialValue);
-			uniformValue = transformed?.node ?? transformed;
-		}
-		if (uniformValue === null || uniformValue === void 0) {
-			uniformValue = propConfig.default;
-			if (propConfig.transform && uniformValue !== null && uniformValue !== void 0) {
-				const transformed = propConfig.transform(uniformValue);
-				uniformValue = transformed?.node ?? transformed;
-			}
-		}
-		if (uniformValue === null || uniformValue === void 0) {
-			console.error(`[Shaders] Uniform "${propName}" is null/undefined after fallback. PropConfig:`, {
-				propName,
-				initialValue,
-				default: propConfig.default,
-				hasTransform: !!propConfig.transform
-			});
-			uniformValue = 0;
-		}
-		const uniformNode = uniform(uniformValue).setName(`${propName}_${instanceId}`.replace(/[^a-zA-Z0-9_]/g, "_"));
-		if (typeof uniformValue === "string" && uniformNode.value === null) uniformNode.value = uniformValue;
-		uniformsMap[propName] = {
-			uniform: uniformNode,
-			transform: propConfig.transform || void 0,
-			compileTime: propConfig.compileTime || false,
-			...propConfig.compileTimeWhen ? {
-				compileTimeWhen: propConfig.compileTimeWhen,
-				_lastCompiledValue: initialValue ?? propConfig.default
-			} : {}
-		};
-	});
-	return uniformsMap;
-}
-function updateUniformValue(uniform$1, newValue) {
-	if (uniform$1?.transform) {
-		const updateTransform = updateTransformMap.get(uniform$1.transform);
-		if (updateTransform) {
-			const newData = updateTransform(newValue);
-			if (uniform$1.uniform.value && typeof uniform$1.uniform.value.copy === "function") uniform$1.uniform.value.copy(newData);
-			else uniform$1.uniform.value = newData;
-		} else {
-			const transformed = uniform$1.transform(newValue);
-			const dataValue = transformed?.data ?? transformed;
-			if (uniform$1.uniform.value && typeof uniform$1.uniform.value.copy === "function" && dataValue && typeof dataValue.copy === "function") uniform$1.uniform.value.copy(dataValue);
-			else uniform$1.uniform.value = dataValue;
-		}
-	} else uniform$1.uniform.value = newValue;
-}
 var globalEventManager = (() => {
 	let instanceCount = 0;
 	const callbacks = /* @__PURE__ */ new Set();
-	const globalMouseMoveHandler = (e) => {
-		callbacks.forEach((cb) => {
-			try {
-				cb.onMouseMove(e);
-			} catch (error) {
-				console.error("[Shaders] Error in mouse move handler:", error);
-			}
-		});
-	};
-	const globalTouchMoveHandler = (e) => {
-		callbacks.forEach((cb) => {
-			try {
-				cb.onTouchMove(e);
-			} catch (error) {
-				console.error("[Shaders] Error in touch move handler:", error);
-			}
-		});
-	};
-	const globalMouseUpHandler = () => {
-		callbacks.forEach((cb) => {
-			try {
-				cb.onMouseUp();
-			} catch (error) {
-				console.error("[Shaders] Error in mouse up handler:", error);
-			}
-		});
-	};
-	const globalTouchEndHandler = () => {
+	const fan = (key, arg) => {
 		callbacks.forEach((cb) => {
 			try {
-				cb.onTouchEnd();
+				cb[key](arg);
 			} catch (error) {
-				console.error("[Shaders] Error in touch end handler:", error);
+				console.error("[Shaders] Error in pointer handler:", error);
 			}
 		});
 	};
+	const onMove = (e) => fan("onMouseMove", e);
+	const onTouch = (e) => fan("onTouchMove", e);
+	const onUp = () => fan("onMouseUp");
+	const onEnd = () => fan("onTouchEnd");
 	return { register(handlers) {
 		callbacks.add(handlers);
 		instanceCount++;
-		if (instanceCount === 1) {
-			window.addEventListener("mousemove", globalMouseMoveHandler);
-			window.addEventListener("touchmove", globalTouchMoveHandler);
-			window.addEventListener("mouseup", globalMouseUpHandler);
-			window.addEventListener("touchend", globalTouchEndHandler);
+		if (instanceCount === 1 && typeof window !== "undefined") {
+			window.addEventListener("mousemove", onMove);
+			window.addEventListener("touchmove", onTouch);
+			window.addEventListener("mouseup", onUp);
+			window.addEventListener("touchend", onEnd);
 		}
 		return () => {
 			callbacks.delete(handlers);
 			instanceCount--;
-			if (instanceCount === 0) {
-				window.removeEventListener("mousemove", globalMouseMoveHandler);
-				window.removeEventListener("touchmove", globalTouchMoveHandler);
-				window.removeEventListener("mouseup", globalMouseUpHandler);
-				window.removeEventListener("touchend", globalTouchEndHandler);
+			if (instanceCount === 0 && typeof window !== "undefined") {
+				window.removeEventListener("mousemove", onMove);
+				window.removeEventListener("touchmove", onTouch);
+				window.removeEventListener("mouseup", onUp);
+				window.removeEventListener("touchend", onEnd);
 			}
 		};
 	} };
 })();
-var applySpring = (current, velocity, target, smoothing, momentum, dt) => {
-	if (smoothing === 0 && momentum === 0) return [target, 0];
-	const stiffness = 200 * Math.pow(.01, smoothing);
-	const damping = 2 * Math.sqrt(stiffness) * (1 - momentum * .85);
-	const newVelocity = velocity + (stiffness * (target - current) - damping * velocity) * dt;
-	return [current + newVelocity * dt, newVelocity];
-};
-function shaderRenderer() {
+function shapeConfigUsesMouse(raw) {
+	if (!raw) return false;
+	let cfg = raw;
+	if (typeof raw === "string") try {
+		cfg = JSON.parse(raw);
+	} catch {
+		return false;
+	}
+	if (!cfg || typeof cfg !== "object") return false;
+	for (const key in cfg) {
+		const v = cfg[key];
+		if (v && typeof v === "object" && v.type === "mouse") return true;
+	}
+	return false;
+}
+function shaderRendererGPU() {
+	let rootCtx = null;
+	let root = null;
+	let context = null;
+	let textureManager = null;
+	let dispatcher = null;
 	let canvasElement = null;
-	let renderer;
-	let rendererInitPromise = null;
-	let rendererInitSettled = false;
-	let camera;
-	let scene;
-	let mesh;
-	let material;
-	const nodeRegistry = {
-		nodes: /* @__PURE__ */ new Map(),
-		rootId: null,
-		idToNodeId: /* @__PURE__ */ new Map()
-	};
-	const parentToChildren = /* @__PURE__ */ new Map();
-	let animationFrameId = null;
-	let resizeObserver = null;
-	let intersectionObserver = null;
 	let isInitialized = false;
 	let isInitializing = false;
-	let rendererColorSpace = "p3-linear";
-	let rendererToneMapping = "linear";
-	let hasInitialDimensions = false;
+	let isRendererReady = false;
 	let initializationAbortController = null;
-	let isVisible = false;
-	let shouldAnimate = true;
-	let forceFullFrameRate = false;
+	const nodes = /* @__PURE__ */ new Map();
+	let rootId = null;
+	const parentToChildren = /* @__PURE__ */ new Map();
+	let pendingRegistrationQueue = [];
+	const pipelineCache = createPipelineCache({
+		maxSize: 4,
+		dispose: (bc) => disposeComposition(bc)
+	});
+	const liveCompositions = /* @__PURE__ */ new Set();
+	let boundComposition = null;
+	let desiredHash = null;
+	let structuralDirty = true;
 	let currentWidth = 0;
 	let currentHeight = 0;
+	let logicalWidth = 0;
+	let logicalHeight = 0;
+	let pixelRatio = 1;
+	let cachedMaxTextureDim = 8192;
+	let lastRequestedWidth = 0;
+	let lastRequestedHeight = 0;
+	let hasInitialDimensions = false;
+	const pxResWidth = () => logicalWidth || currentWidth || 1;
+	const pxResHeight = () => logicalHeight || currentHeight || 1;
+	let shouldAnimate = true;
+	let isVisible = false;
+	let forceFullFrameRate = false;
 	let lastRenderTime = 0;
 	let globalElapsedTime = 0;
-	let needsMaterialRefresh = false;
+	let sharedTimeOrigin = null;
+	let pendingRenderRAF = null;
 	let pointerX = .5;
 	let pointerY = .5;
 	let pointerActive = false;
 	let cachedCanvasRect = null;
-	let isUpdatingMaterial = false;
-	let pendingNodeRemoval = false;
+	let mouseListenersNeeded = false;
 	let globalEventUnregister = null;
-	let canvasContextLossUnregister = null;
+	let resizeObserver = null;
+	let intersectionObserver = null;
 	let unloadHandler = null;
 	let windowResizeHandler = null;
-	let cachedMaxTextureDim = 8192;
-	let lastRequestedWidth = 0;
-	let lastRequestedHeight = 0;
-	let enablePerformanceTracking = true;
-	const performanceTracker = new PerformanceTracker();
-	let pendingRegistrationQueue = [];
-	let isRendererReady = false;
+	let pendingResize = null;
+	let isResizeScheduled = false;
+	let rendererColorSpace = "p3-linear";
+	let rendererToneMapping = "linear";
+	let enablePerformanceTracking = false;
+	let setColorSpaceModeFn = null;
 	let onReadyCallback = null;
 	let hasEmittedReady = false;
 	let firstRenderPending = false;
 	let onDeviceLostCallback = null;
 	let deviceLostFired = false;
-	const fireDeviceLost = (reason) => {
-		if (deviceLostFired) return;
-		deviceLostFired = true;
-		try {
-			stopAnimation();
-		} catch {}
-		if (onDeviceLostCallback) queueMicrotask(() => {
-			try {
-				onDeviceLostCallback?.(reason);
-			} catch (e) {
-				console.error("[Shaders] onDeviceLost callback threw:", e);
-			}
-		});
-	};
-	let materialUpdateBatchRAF = null;
-	let lastComposedNodes = /* @__PURE__ */ new Set();
-	let activeRTTNodes = /* @__PURE__ */ new Set();
-	let actualRTTOperations = 0;
-	let currentTextures = /* @__PURE__ */ new Set();
-	let previousTextures = /* @__PURE__ */ new Set();
-	const activeBeforeRender = /* @__PURE__ */ new Set();
-	const activeAfterRender = /* @__PURE__ */ new Set();
-	const activeCompute = /* @__PURE__ */ new Set();
-	const activeDrivers = /* @__PURE__ */ new Set();
+	const performanceTracker = new PerformanceTracker();
 	const frameParams = {
 		deltaTime: 0,
 		pointer: {
@@ -825,674 +1240,579 @@ function shaderRenderer() {
 			height: 0
 		}
 	};
-	let pendingResize = null;
-	let isResizeScheduled = false;
-	const clampToTextureCap = (w, h) => {
-		const pr = renderer?.getPixelRatio?.() ?? 1;
-		const gpuCssCap = Math.max(1, Math.floor(cachedMaxTextureDim / pr) - 1);
-		const capW = Math.min(w, window.innerWidth, gpuCssCap);
-		const capH = Math.min(h, window.innerHeight, gpuCssCap);
-		const scale = Math.min(capW / w, capH / h, 1);
+	const frameLoop = createFrameLoop(() => renderFrame());
+	const sanitizeId = (id) => id.replace(/[^a-zA-Z0-9_]/g, "_");
+	const findChildNodes = (parentId) => {
+		const childIds = parentToChildren.get(parentId);
+		if (!childIds) return [];
+		const out = [];
+		for (const cid of childIds) {
+			const info = nodes.get(cid);
+			if (info) out.push(info);
+		}
+		return out;
+	};
+	const findNodeByCustomId = (customId) => {
+		const sanitized = sanitizeId(customId);
+		for (const [nodeId, info] of nodes) if (info.metadata.id === sanitized) return nodeId;
+		return null;
+	};
+	const computeDimExtent = (node, origin) => {
+		if (origin === "center") return void 0;
+		const decl = node.boundingBoxDeclaration;
+		if (!decl) return void 0;
+		const snap = {};
+		for (const [k, u] of Object.entries(node.uniforms)) snap[k] = u._rawDimensional !== void 0 ? u._rawDimensional : u.value;
+		return boxHalfExtentsUV(decl, snap, pxResWidth(), pxResHeight());
+	};
+	const reresolveDimensionalUniforms = (node) => {
+		const decl = node.boundingBoxDeclaration;
+		const extra = node.extraDimProps;
+		const plan = buildDimensionalPlan(decl, extra);
+		if (!plan) return;
+		const origin = node.uniforms["origin"]?.value ?? "center";
+		const he = computeDimExtent(node, origin);
+		const names = [...plan.positionProps, ...plan.sizeProps.keys()];
+		for (const name of names) {
+			const u = node.uniforms[name];
+			if (!u || u._rawDimensional === void 0) continue;
+			const resolved = resolveDimensionalProp(decl, name, u._rawDimensional, origin, pxResWidth(), pxResHeight(), extra, he);
+			u.value = resolved;
+			writePropHandle(node, name, resolved);
+		}
+	};
+	const resolveDynamicBound = (node, propName, bound) => {
+		if (typeof bound === "number") return bound;
+		const origin = node.uniforms["origin"]?.value ?? "center";
+		const resolved = resolveDimensionalProp(node.boundingBoxDeclaration, propName, bound, origin, pxResWidth(), pxResHeight(), node.extraDimProps);
+		return typeof resolved === "number" ? resolved : bound?.value ?? 0;
+	};
+	const aspectRatio = () => {
+		const { width, height } = bufferSize();
+		return width / Math.max(1, height);
+	};
+	const transformFieldValues = (node) => {
+		const t = node.metadata.transform;
 		return {
-			width: Math.max(1, Math.round(w * scale)),
-			height: Math.max(1, Math.round(h * scale))
+			offsetX: t?.offsetX ?? 0,
+			offsetY: t?.offsetY ?? 0,
+			rotation: t?.rotation ?? 0,
+			scale: t?.scale ?? 1,
+			anchorX: t?.anchorX ?? .5,
+			anchorY: t?.anchorY ?? .5,
+			aspectRatio: aspectRatio()
 		};
 	};
-	const updateRendererDimensions = (width, height) => {
-		if (width <= 0 || height <= 0) return;
-		if (width === lastRequestedWidth && height === lastRequestedHeight) return;
-		lastRequestedWidth = width;
-		lastRequestedHeight = height;
-		pendingResize = {
-			width,
-			height
+	const bboxFieldValues = (node) => {
+		const bbox = node.metadata.boundingBox;
+		if (!bbox) return null;
+		const p = boundingBoxToUVParams(bbox, pxResWidth(), pxResHeight());
+		return {
+			centerX: p.centerX,
+			centerY: p.centerY,
+			halfWidth: p.halfWidthUV,
+			halfHeight: p.halfHeightUV,
+			cornerRadius: p.cornerRadiusUV,
+			rotation: p.rotation,
+			aspectRatio: aspectRatio()
 		};
-		if (!isResizeScheduled) {
-			isResizeScheduled = true;
-			requestAnimationFrame(() => {
-				isResizeScheduled = false;
-				if (!pendingResize) return;
-				const raw = pendingResize;
-				pendingResize = null;
-				const { width: width$1, height: height$1 } = clampToTextureCap(raw.width, raw.height);
-				currentWidth = width$1;
-				currentHeight = height$1;
-				if (!hasInitialDimensions) {
-					hasInitialDimensions = true;
-					if (nodeRegistry.nodes.size > 0 && materialUpdateBatchRAF === null) materialUpdateBatchRAF = requestAnimationFrame(() => {
-						materialUpdateBatchRAF = null;
-						updateMaterial();
-					});
-				}
-				renderer.setSize(width$1, height$1, false);
-				const aspectRatio = width$1 / height$1;
-				const frustumHeight = 2;
-				const frustumWidth = frustumHeight * aspectRatio;
-				camera.left = -frustumWidth / 2;
-				camera.right = frustumWidth / 2;
-				camera.top = frustumHeight / 2;
-				camera.bottom = -frustumHeight / 2;
-				camera.updateProjectionMatrix();
-				mesh.scale.set(frustumWidth, frustumHeight, 1);
-				nodeRegistry.nodes.forEach((nodeInfo) => {
-					if (nodeInfo.transformUniforms?.aspectRatio) nodeInfo.transformUniforms.aspectRatio.value = aspectRatio;
-					nodeInfo.resizeCallbacks.forEach((callback) => {
-						try {
-							callback({
-								width: width$1,
-								height: height$1
-							});
-						} catch (error) {
-							console.error("Error in resize callback:", error);
-						}
-					});
-				});
-				lastRenderTime = 0;
-				renderFrame();
-			});
+	};
+	const bboxActive = (node) => !!node.metadata.boundingBox && !!node.boundingBoxDeclaration;
+	const computeNodeBoundsUV = (node) => {
+		const decl = node.boundingBoxDeclaration;
+		if (!decl || !node.uniforms) return null;
+		if (!decl.computeBounds && !decl.propBindings) return null;
+		const snap = {};
+		for (const [k, u] of Object.entries(node.uniforms)) snap[k] = u._rawDimensional !== void 0 ? u._rawDimensional : u.value;
+		const he = boxHalfExtentsUV(decl, snap, pxResWidth(), pxResHeight());
+		if (he.hwx <= 0 && he.hhy <= 0) return null;
+		let cx = .5;
+		let cy = .5;
+		const posProp = decl.propBindings?.x?.prop ?? decl.propBindings?.y?.prop;
+		const posValue = posProp ? node.uniforms[posProp]?.value : void 0;
+		if (posValue && typeof posValue.x === "number" && typeof posValue.y === "number") {
+			cx = posValue.x;
+			cy = posValue.y;
 		}
+		return {
+			centerX: cx,
+			centerY: cy,
+			halfWidth: he.hwx,
+			halfHeight: he.hhy
+		};
 	};
-	const canRender = () => {
-		return isInitialized && !!renderer && !!scene && !!camera && !!material && currentWidth > 0 && currentHeight > 0;
+	const childBoundsValues = (node) => {
+		if (!node.definition.wantsBoundsParams) return null;
+		const children = findChildNodes(node.id).sort((a, b) => a.metadata.renderOrder - b.metadata.renderOrder);
+		for (const child of children) {
+			if (child.metadata.visible === false) continue;
+			if (bboxActive(child)) return null;
+			const b = computeNodeBoundsUV(child);
+			if (b) return b;
+		}
+		return null;
 	};
-	const handleResize = (entries) => {
-		if (!renderer || !camera || !mesh) return;
-		const entry = entries[0];
-		if (!entry) return;
-		let width, height;
-		if (entry.contentBoxSize) {
-			const boxSize = Array.isArray(entry.contentBoxSize) ? entry.contentBoxSize[0] : entry.contentBoxSize;
-			if (boxSize) {
-				width = Math.round(boxSize.inlineSize);
-				height = Math.round(boxSize.blockSize);
-			} else {
-				width = Math.round(entry.contentRect.width);
-				height = Math.round(entry.contentRect.height);
-			}
-		} else {
-			width = Math.round(entry.contentRect.width);
-			height = Math.round(entry.contentRect.height);
+	const updateChildBounds = () => {
+		for (const node of nodes.values()) {
+			if (!node.definition.wantsBoundsParams) continue;
+			const b = childBoundsValues(node);
+			if (!b) continue;
+			writeSyntheticScalar(node, "_childBounds_centerX", b.centerX);
+			writeSyntheticScalar(node, "_childBounds_centerY", b.centerY);
+			writeSyntheticScalar(node, "_childBounds_halfWidth", b.halfWidth);
+			writeSyntheticScalar(node, "_childBounds_halfHeight", b.halfHeight);
 		}
-		if (width === 0 || height === 0) return;
-		updateRendererDimensions(width, height);
 	};
-	const handleVisibilityChange = (entries) => {
-		const entry = entries[0];
-		if (!entry) return;
-		isVisible = entry.isIntersecting;
+	const transformActive = (node) => needsTransformation(node.metadata.transform);
+	const ensureMapValues = (node, prop, driver) => {
+		const mv = node.mapValues[prop] ?? {
+			inputMin: 0,
+			inputMax: 1,
+			outputMin: 0,
+			outputMax: 1,
+			curve: 0
+		};
+		if (driver.type === "map") {
+			const c = driver;
+			mv.inputMin = c.inputMin;
+			mv.inputMax = c.inputMax;
+			mv.outputMin = resolveDynamicBound(node, prop, c.outputMin);
+			mv.outputMax = resolveDynamicBound(node, prop, c.outputMax);
+			mv.curve = c.curve ?? 0;
+		} else if (driver.type === "mouse") {
+			const c = driver;
+			mv.outputMin = resolveDynamicBound(node, prop, c.outputMin);
+			mv.outputMax = resolveDynamicBound(node, prop, c.outputMax);
+			mv.curve = c.curve ?? 0;
+		} else if (driver.type === "auto-animate") {
+			const c = driver;
+			mv.outputMin = resolveDynamicBound(node, prop, c.outputMin);
+			mv.outputMax = resolveDynamicBound(node, prop, c.outputMax);
+		}
+		node.mapValues[prop] = mv;
+		return mv;
 	};
-	const setsAreEqual = (set1, set2) => {
-		if (set1.size !== set2.size) return false;
-		for (const item of set1) if (!set2.has(item)) return false;
-		return true;
-	};
-	const rebuildActiveSets = () => {
-		activeBeforeRender.clear();
-		activeAfterRender.clear();
-		activeCompute.clear();
-		activeDrivers.clear();
-		for (const [id, info] of nodeRegistry.nodes) {
-			if (info.beforeRenderCallbacks.length > 0) activeBeforeRender.add(id);
-			if (info.afterRenderCallbacks.length > 0) activeAfterRender.add(id);
-			if (info.computeGetNodes) activeCompute.add(id);
-			const ms = info.mouseDriverState;
-			const as = info.autoAnimateState;
-			const hasMouse = !!ms && Object.keys(ms).length > 0;
-			const hasAnim = !!as && Object.keys(as).length > 0;
-			if (hasMouse || hasAnim) activeDrivers.add(id);
-		}
-	};
-	const trackConvertToTexture = (node) => {
-		actualRTTOperations++;
-		const texture$1 = convertToTexture(node);
-		currentTextures.add(texture$1);
-		return texture$1;
-	};
-	const disposePreviousTextures = () => {
-		previousTextures.forEach((texture$1) => {
-			try {
-				if (texture$1?.renderTarget?.dispose) texture$1.renderTarget.dispose();
-			} catch (e) {}
+	const ensureMouseState = (node, prop, driver) => {
+		let s = node.mouseDriverState[prop];
+		if (s) return s;
+		if (driver.type === "mouse-position") {
+			const trackX = driver.x === void 0 || driver.x === "mouse";
+			const trackY = driver.y === void 0 || driver.y === "mouse";
+			s = {
+				currentX: trackX ? pointerX : driver.x,
+				currentY: trackY ? pointerY : driver.y,
+				velocityX: 0,
+				velocityY: 0
+			};
+		} else s = {
+			currentX: Math.max(.001, driver.axis === "x" ? pointerX : pointerY),
+			currentY: 0,
+			velocityX: 0,
+			velocityY: 0
+		};
+		node.mouseDriverState[prop] = s;
+		return s;
+	};
+	const animatedTimeKey = (node) => {
+		const at = node.definition.animatedTime;
+		return (at ? node.uniforms[at.speed] : void 0) ?? node;
+	};
+	const extraAnimatedTimeKey = (node, speedProp) => node.uniforms[speedProp] ?? node;
+	const buildFieldInits = (node) => {
+		const inits = [];
+		for (const [propName, u] of Object.entries(node.uniforms)) inits.push({
+			name: propName,
+			initial: u.value,
+			transform: u.transform,
+			cpu: u.cpu,
+			schema: u.schema
 		});
-		previousTextures.clear();
-	};
-	const applyHableTonemap = (node) => {
-		const rgb = vec3(node.x, node.y, node.z);
-		const alpha = node.w;
-		const x = rgb.mul(16);
-		const num = x.mul(x.mul(.15).add(.05)).add(.004);
-		const den = x.mul(x.mul(.15).add(.5)).add(.06);
-		const tonemapped = num.div(den).sub(.02 / .3);
-		return vec4(tonemapped.x, tonemapped.y, tonemapped.z, alpha);
-	};
-	const applyUnrealTonemap = (node) => {
-		const rgb = vec3(node.x, node.y, node.z);
-		const alpha = node.w;
-		const tonemapped = rgb.div(rgb.add(.155)).mul(1.019);
-		return vec4(tonemapped.x, tonemapped.y, tonemapped.z, alpha);
-	};
-	const setToneMapping = (mode) => {
-		rendererToneMapping = mode;
-		if (!renderer) return;
-		renderer.toneMapping = {
-			linear: NoToneMapping,
-			reinhard: ReinhardToneMapping,
-			cineon: CineonToneMapping,
-			aces: ACESFilmicToneMapping,
-			agx: AgXToneMapping,
-			neutral: NeutralToneMapping
-		}[mode] ?? NoToneMapping;
-	};
-	let materialUpdatePending = false;
-	const updateMaterial = () => {
-		if (!nodeRegistry.rootId || !material || isUpdatingMaterial) return;
-		if (!nodeRegistry.nodes.get(nodeRegistry.rootId)) return;
-		if (currentWidth === 0 || currentHeight === 0) {
-			if (!materialUpdatePending) {
-				materialUpdatePending = true;
-				requestAnimationFrame(() => {
-					materialUpdatePending = false;
-					if (currentWidth > 0 && currentHeight > 0) updateMaterial();
-				});
-			}
-			return;
+		inits.push({
+			name: "_opacity",
+			schema: d.f32,
+			initial: node.metadata.opacity ?? 1
+		});
+		if (node.definition.animatedTime) inits.push({
+			name: "_animTime",
+			schema: d.f32,
+			initial: getAnimatedTimeState(animatedTimeKey(node)).value
+		});
+		if (node.definition.extraAnimatedTimes) for (const [key, speedProp] of Object.entries(node.definition.extraAnimatedTimes)) inits.push({
+			name: `_animTime_${key}`,
+			schema: d.f32,
+			initial: getAnimatedTimeState(extraAnimatedTimeKey(node, speedProp)).value
+		});
+		const extraFields = node.definition.extraFields;
+		if (extraFields) for (const [name, f] of Object.entries(extraFields)) inits.push({
+			name,
+			schema: f.schema,
+			initial: f.initial
+		});
+		if (transformActive(node)) {
+			const tf = transformFieldValues(node);
+			for (const [k, v] of Object.entries(tf)) inits.push({
+				name: `_xform_${k}`,
+				schema: d.f32,
+				initial: v
+			});
 		}
-		isUpdatingMaterial = true;
-		try {
-			previousTextures = new Set(currentTextures);
-			currentTextures.clear();
-			const currentComposedNodes = /* @__PURE__ */ new Set();
-			activeRTTNodes.clear();
-			nodeRegistry.nodes.forEach((nodeInfo, nodeId) => {
-				if (nodeInfo.requiresRTT || nodeInfo.transformRTTActive) activeRTTNodes.add(nodeId);
+		if (bboxActive(node)) {
+			const bb = bboxFieldValues(node);
+			if (bb) for (const [k, v] of Object.entries(bb)) inits.push({
+				name: `_bbox_${k}`,
+				schema: d.f32,
+				initial: v
 			});
-			actualRTTOperations = 0;
-			const composedNode = composeNodeTree(nodeRegistry.rootId, /* @__PURE__ */ new Set(), currentComposedNodes);
-			if (composedNode && material) {
-				const compositionChanged = !setsAreEqual(lastComposedNodes, currentComposedNodes);
-				let finalNode = composedNode;
-				if (rendererToneMapping === "hable") finalNode = applyHableTonemap(composedNode);
-				else if (rendererToneMapping === "unreal") finalNode = applyUnrealTonemap(composedNode);
-				const nodeChanged = material.fragmentNode !== finalNode;
-				if (compositionChanged || needsMaterialRefresh || nodeChanged) {
-					disposePreviousTextures();
-					try {
-						material.dispose();
-						if (renderer.renderTarget) renderer.renderTarget.dispose();
-					} catch (e) {}
-					const newMaterial = new MeshBasicNodeMaterial({ transparent: true });
-					newMaterial.fragmentNode = finalNode;
-					newMaterial.needsUpdate = true;
-					mesh.material = newMaterial;
-					material = newMaterial;
-					needsMaterialRefresh = false;
-					lastComposedNodes = currentComposedNodes;
-					if (!hasEmittedReady && currentComposedNodes.size > 0) firstRenderPending = true;
-				}
+		}
+		if (node.definition.wantsBoundsParams) {
+			const cb = childBoundsValues(node) ?? {
+				centerX: .5,
+				centerY: .5,
+				halfWidth: .5,
+				halfHeight: .5
+			};
+			for (const [k, v] of Object.entries(cb)) inits.push({
+				name: `_childBounds_${k}`,
+				schema: d.f32,
+				initial: v
+			});
+		}
+		const maps = node.metadata.maps;
+		if (maps) for (const [prop, driver] of Object.entries(maps)) {
+			if (!(prop in node.uniforms)) continue;
+			if (driver.type === "map") {
+				const mv = ensureMapValues(node, prop, driver);
+				inits.push({
+					name: `_map_${prop}_inputMin`,
+					schema: d.f32,
+					initial: mv.inputMin
+				});
+				inits.push({
+					name: `_map_${prop}_inputMax`,
+					schema: d.f32,
+					initial: mv.inputMax
+				});
+				inits.push({
+					name: `_map_${prop}_outputMin`,
+					schema: d.f32,
+					initial: mv.outputMin
+				});
+				inits.push({
+					name: `_map_${prop}_outputMax`,
+					schema: d.f32,
+					initial: mv.outputMax
+				});
+				inits.push({
+					name: `_map_${prop}_curve`,
+					schema: d.f32,
+					initial: mv.curve
+				});
+			} else if (driver.type === "mouse-position") {
+				const s = ensureMouseState(node, prop, driver);
+				inits.push({
+					name: `_smoothed_${prop}`,
+					schema: d.vec2f,
+					initial: [s.currentX, 1 - s.currentY]
+				});
+			} else if (driver.type === "mouse") {
+				ensureMouseState(node, prop, driver);
+				const mv = ensureMapValues(node, prop, driver);
+				inits.push({
+					name: `_smoothed_${prop}`,
+					schema: d.f32,
+					initial: mv.outputMin
+				});
+			} else if (driver.type === "auto-animate") {
+				if (!node.autoAnimateState[prop]) node.autoAnimateState[prop] = {};
+				const mv = ensureMapValues(node, prop, driver);
+				inits.push({
+					name: `_smoothed_${prop}`,
+					schema: d.f32,
+					initial: mv.outputMin
+				});
 			}
-		} catch (error) {
-			console.error("Error composing shader tree:", error);
-		} finally {
-			isUpdatingMaterial = false;
-			pendingNodeRemoval = false;
 		}
-		rebuildActiveSets();
-		if (!animationFrameId) renderFrame();
+		return inits;
 	};
-	const findChildNodes = (parentId) => {
-		const childIds = parentToChildren.get(parentId);
-		if (!childIds) return [];
-		const children = [];
-		for (const childId of childIds) {
-			const nodeInfo = nodeRegistry.nodes.get(childId);
-			if (nodeInfo) children.push(nodeInfo);
-		}
-		return children;
+	const writePropHandle = (node, propName, value) => {
+		const h = node._liveHandles?.[propName];
+		if (!h) return;
+		setColorSpaceModeFn?.(rendererColorSpace);
+		updateFieldValue(h, value);
 	};
-	const sanitizeId = (id) => id.replace(/[^a-zA-Z0-9_]/g, "_");
-	const findNodeByCustomId = (customId) => {
-		const sanitized = sanitizeId(customId);
-		for (const [nodeId, info] of nodeRegistry.nodes.entries()) if (info.metadata.id === sanitized) return nodeId;
-		return null;
+	const writeSyntheticScalar = (node, field, value) => {
+		const h = node._liveHandles?.[field];
+		if (h instanceof FieldHandle) h.value = value;
 	};
-	const applyMaskIfNeeded = (result, nodeInfo, nodeId, processedMasks, distortedUV) => {
-		if (!nodeInfo.metadata.mask?.source) return result;
-		const maskSourceId = nodeInfo.metadata.mask.source;
-		const maskNodeId = findNodeByCustomId(maskSourceId);
-		if (!maskNodeId) return result;
-		if (processedMasks.has(maskNodeId)) {
-			console.error(`Uh oh, looks like you've got a circular dependency in your shader masks.`);
-			return result;
-		}
-		const newProcessedMasks = new Set(processedMasks);
-		newProcessedMasks.add(nodeId);
-		const maskNode = composeNodeTree(maskNodeId, newProcessedMasks);
-		let finalMaskNode = maskNode;
-		if (distortedUV) finalMaskNode = trackConvertToTexture(maskNode).sample(distortedUV);
-		const maskType = nodeInfo.metadata.mask.type || "alpha";
-		return applyMask(result, finalMaskNode, maskType);
-	};
-	const resolveMapForProp = (mapConfig, processedMasks, currentNodeId, propName, sampleUV) => {
-		const sourceNodeId = findNodeByCustomId(mapConfig.source);
-		if (!sourceNodeId) return null;
-		if (processedMasks.has(sourceNodeId)) {
-			console.error(`[Shaders] Circular dependency detected in prop maps: node "${mapConfig.source}" is already being processed.`);
-			return null;
-		}
-		const newProcessedMasks = new Set(processedMasks);
-		newProcessedMasks.add(currentNodeId);
-		const mapTexture = trackConvertToTexture(composeNodeTree(sourceNodeId, newProcessedMasks));
-		const sampled = mapTexture.sample(sampleUV ?? screenUV);
-		let raw;
-		switch (mapConfig.channel) {
-			case "alpha":
-				raw = sampled.a;
-				break;
-			case "alphaInverted":
-				raw = sampled.a.oneMinus();
-				break;
-			case "luminanceInverted":
-				raw = dot(sampled.rgb, vec3(.2126, .7152, .0722)).oneMinus();
-				break;
-			case "luminance":
-			default:
-				raw = dot(sampled.rgb, vec3(.2126, .7152, .0722));
-				break;
+	const writeExtraFieldValue = (node, field, value) => {
+		const h = node._liveHandles?.[field];
+		if (h instanceof FieldHandle) h.value = value;
+	};
+	const nodeColorSpaceMode = (node) => {
+		for (const u of Object.values(node.uniforms)) if (u.transform === transformColorSpace) {
+			const raw = u.value;
+			if (typeof raw === "string") return transformColorSpace(raw);
+			if (typeof raw === "number") return raw;
 		}
-		const nodeInfo = nodeRegistry.nodes.get(currentNodeId);
-		if (!nodeInfo) return null;
-		if (!nodeInfo.mapUniforms) nodeInfo.mapUniforms = {};
-		if (!nodeInfo.mapUniforms[propName]) nodeInfo.mapUniforms[propName] = {
-			inputMin: uniform(mapConfig.inputMin),
-			inputMax: uniform(mapConfig.inputMax),
-			outputMin: uniform(mapConfig.outputMin),
-			outputMax: uniform(mapConfig.outputMax),
-			curve: uniform(mapConfig.curve ?? 0),
-			sourceTexture: mapTexture,
-			channel: mapConfig.channel
+		return 0;
+	};
+	const repackColorStops = (node) => {
+		if (!node.uniforms.convertedColorsArray) return;
+		let stops = null;
+		for (const u of Object.values(node.uniforms)) if (u.transform === colorStopsTransform) {
+			stops = u.value ?? null;
+			break;
+		}
+		const packed = packStops(stops, colorToRGBA);
+		const converted = packConvertedStops(packed.colors, packed.stopCount, nodeColorSpaceMode(node));
+		const write = (name, value) => {
+			const u = node.uniforms[name];
+			if (u) u.value = value;
+			writePropHandle(node, name, value);
 		};
-		else {
-			nodeInfo.mapUniforms[propName].inputMin.value = mapConfig.inputMin;
-			nodeInfo.mapUniforms[propName].inputMax.value = mapConfig.inputMax;
-			nodeInfo.mapUniforms[propName].outputMin.value = mapConfig.outputMin;
-			nodeInfo.mapUniforms[propName].outputMax.value = mapConfig.outputMax;
-			nodeInfo.mapUniforms[propName].curve.value = mapConfig.curve ?? 0;
-			nodeInfo.mapUniforms[propName].sourceTexture = mapTexture;
-			nodeInfo.mapUniforms[propName].channel = mapConfig.channel;
-		}
-		const { inputMin: inputMinU, inputMax: inputMaxU, outputMin: outputMinU, outputMax: outputMaxU, curve: curveU } = nodeInfo.mapUniforms[propName];
-		const inputRange = max(inputMaxU.sub(inputMinU), 1e-4);
-		return mix(outputMinU, outputMaxU, pow(clamp(raw.sub(inputMinU).div(inputRange), 0, 1), pow(float(2), curveU.negate().mul(2))));
-	};
-	const resolveMousePositionForProp = (_config, nodeId, propName) => {
-		const nodeInfo = nodeRegistry.nodes.get(nodeId);
-		if (!nodeInfo) return null;
-		if (!nodeInfo.mouseDriverState) nodeInfo.mouseDriverState = {};
-		if (!nodeInfo.mouseDriverState[propName]) {
-			const trackX = _config.x === void 0 || _config.x === "mouse";
-			const trackY = _config.y === void 0 || _config.y === "mouse";
-			const initX = trackX ? pointerX : _config.x;
-			const initY = trackY ? pointerY : _config.y;
-			const smoothedUniform = uniform(new Vector2(initX, 1 - initY));
-			nodeInfo.mouseDriverState[propName] = {
-				currentX: initX,
-				currentY: initY,
-				velocityX: 0,
-				velocityY: 0,
-				smoothedUniform
-			};
+		write("colorsArray", packed.colors);
+		write("positionsArray", packed.positions);
+		write("convertedColorsArray", converted);
+		write("stopCount", packed.stopCount);
+	};
+	const writeNodeSynthetic = (node) => {
+		writeSyntheticScalar(node, "_opacity", node.metadata.opacity ?? 1);
+		if (node.definition.animatedTime) writeSyntheticScalar(node, "_animTime", getAnimatedTimeState(animatedTimeKey(node)).value);
+		if (node.definition.extraAnimatedTimes) for (const [key, speedProp] of Object.entries(node.definition.extraAnimatedTimes)) writeSyntheticScalar(node, `_animTime_${key}`, getAnimatedTimeState(extraAnimatedTimeKey(node, speedProp)).value);
+		if (transformActive(node)) for (const [k, v] of Object.entries(transformFieldValues(node))) writeSyntheticScalar(node, `_xform_${k}`, v);
+		if (bboxActive(node)) {
+			const bb = bboxFieldValues(node);
+			if (bb) for (const [k, v] of Object.entries(bb)) writeSyntheticScalar(node, `_bbox_${k}`, v);
+		}
+		const maps = node.metadata.maps;
+		if (maps) {
+			for (const [prop, driver] of Object.entries(maps)) if (driver.type === "map" && node.mapValues[prop]) {
+				const mv = node.mapValues[prop];
+				writeSyntheticScalar(node, `_map_${prop}_inputMin`, mv.inputMin);
+				writeSyntheticScalar(node, `_map_${prop}_inputMax`, mv.inputMax);
+				writeSyntheticScalar(node, `_map_${prop}_outputMin`, mv.outputMin);
+				writeSyntheticScalar(node, `_map_${prop}_outputMax`, mv.outputMax);
+				writeSyntheticScalar(node, `_map_${prop}_curve`, mv.curve);
+			}
 		}
-		return nodeInfo.mouseDriverState[propName].smoothedUniform;
-	};
-	const resolveMouseMapForProp = (config, nodeId, propName) => {
-		const nodeInfo = nodeRegistry.nodes.get(nodeId);
-		if (!nodeInfo) return null;
-		if (!nodeInfo.mouseDriverState) nodeInfo.mouseDriverState = {};
-		if (!nodeInfo.mouseDriverState[propName]) {
-			const initial = Math.max(.001, config.axis === "x" ? pointerX : pointerY);
-			const smoothedUniform = uniform(initial);
-			nodeInfo.mouseDriverState[propName] = {
-				currentX: initial,
-				currentY: 0,
-				velocityX: 0,
-				velocityY: 0,
-				smoothedUniform
-			};
+	};
+	const propHandleView = (node, handles) => {
+		const out = {};
+		for (const propName of Object.keys(node.uniforms)) {
+			const h = handles[propName];
+			if (h) out[propName] = h;
 		}
-		if (!nodeInfo.mapUniforms) nodeInfo.mapUniforms = {};
-		if (!nodeInfo.mapUniforms[propName]) nodeInfo.mapUniforms[propName] = {
-			inputMin: uniform(0, "float"),
-			inputMax: uniform(1, "float"),
-			outputMin: uniform(config.outputMin, "float"),
-			outputMax: uniform(config.outputMax, "float"),
-			curve: uniform(config.curve ?? 0, "float")
+		return out;
+	};
+	const sotHandleView = (node) => {
+		const out = {};
+		for (const [propName, u] of Object.entries(node.uniforms)) out[propName] = {
+			accessorPath: "",
+			cpu: !!u.cpu,
+			value: u.value
 		};
-		else {
-			nodeInfo.mapUniforms[propName].outputMin.value = config.outputMin;
-			nodeInfo.mapUniforms[propName].outputMax.value = config.outputMax;
-			nodeInfo.mapUniforms[propName].curve.value = config.curve ?? 0;
-		}
-		const { outputMin: outputMinU, outputMax: outputMaxU, curve: curveU } = nodeInfo.mapUniforms[propName];
-		const smoothedU = nodeInfo.mouseDriverState[propName].smoothedUniform;
-		return mix(outputMinU, outputMaxU, pow(smoothedU, pow(float(2), curveU.negate().mul(2))));
-	};
-	const resolveAutoAnimateForProp = (config, nodeId, propName) => {
-		const nodeInfo = nodeRegistry.nodes.get(nodeId);
-		if (!nodeInfo) return null;
-		if (!nodeInfo.autoAnimateState) nodeInfo.autoAnimateState = {};
-		if (!nodeInfo.autoAnimateState[propName]) nodeInfo.autoAnimateState[propName] = { smoothedUniform: uniform(config.outputMin, "float") };
-		return nodeInfo.autoAnimateState[propName].smoothedUniform;
-	};
-	const buildEffectiveUniforms = (baseUniforms, maps, nodeId, processedMasks) => {
-		if (!maps || Object.keys(maps).length === 0) return baseUniforms;
-		const effectiveUniforms = { ...baseUniforms };
-		const nodeInfo = nodeRegistry.nodes.get(nodeId);
-		const customSampleUVs = nodeInfo?.mapSampleUVsFunc?.(baseUniforms) ?? {};
-		for (const [propName, driverConfig] of Object.entries(maps)) {
-			let resolvedNode = null;
-			if (driverConfig.type === "map") {
-				if (!(propName in effectiveUniforms)) continue;
-				resolvedNode = resolveMapForProp(driverConfig, processedMasks, nodeId, propName, customSampleUVs[propName]);
-			} else if (driverConfig.type === "mouse-position") {
-				resolvedNode = resolveMousePositionForProp(driverConfig, nodeId, propName);
-				if (resolvedNode !== null && propName in effectiveUniforms) effectiveUniforms[propName] = {
-					...effectiveUniforms[propName],
-					uniform: resolvedNode
-				};
-				continue;
-			} else if (driverConfig.type === "mouse") {
-				if (!(propName in effectiveUniforms)) continue;
-				resolvedNode = resolveMouseMapForProp(driverConfig, nodeId, propName);
-			} else if (driverConfig.type === "auto-animate") {
-				if (!(propName in effectiveUniforms)) continue;
-				resolvedNode = resolveAutoAnimateForProp(driverConfig, nodeId, propName);
+		return out;
+	};
+	const makeRegistryNode = (node, handles) => ({
+		id: node.id,
+		customId: node.metadata.id,
+		componentName: node.componentName,
+		parentId: node.parentId,
+		definition: node.definition,
+		metadata: node.metadata,
+		handles,
+		domCanvas: node.domCanvas
+	});
+	const buildRegistryView = (store, handlesById) => {
+		const cache = /* @__PURE__ */ new Map();
+		const build = (node) => {
+			return makeRegistryNode(node, store && handlesById ? propHandleView(node, handlesById.get(node.id) ?? {}) : sotHandleView(node));
+		};
+		const getNode = (id) => {
+			const hit = cache.get(id);
+			if (hit) return hit;
+			const node = nodes.get(id);
+			if (!node) return void 0;
+			const rn = build(node);
+			cache.set(id, rn);
+			return rn;
+		};
+		return {
+			rootId,
+			getNode,
+			getChildren: (pid) => findChildNodes(pid).map((n) => getNode(n.id)),
+			resolveCustomId: (cid) => findNodeByCustomId(cid),
+			store: {
+				gpuAccessor: (h, layoutVar) => store ? store.gpuAccessor(h, layoutVar) : "",
+				layout: store?.layout
 			}
-			if (resolvedNode !== null && propName in effectiveUniforms) {
-				let mapComputeInfo = void 0;
-				if (driverConfig.type === "map") {
-					const mu = nodeInfo?.mapUniforms?.[propName];
-					if (mu?.sourceTexture && mu?.channel) mapComputeInfo = {
-						sourceTexture: mu.sourceTexture,
-						channel: mu.channel,
-						inputMin: mu.inputMin,
-						inputMax: mu.inputMax,
-						outputMin: mu.outputMin,
-						outputMax: mu.outputMax,
-						curve: mu.curve
-					};
-				}
-				let getCpuValue = void 0;
-				if (driverConfig.type === "mouse") getCpuValue = () => {
-					const state = nodeInfo?.mouseDriverState?.[propName];
-					const mu = nodeInfo?.mapUniforms?.[propName];
-					if (!state || !mu) return 0;
-					const smooth = state.smoothedUniform.value;
-					const oMin = mu.outputMin.value;
-					const oMax = mu.outputMax.value;
-					const exp$1 = Math.pow(2, -(mu.curve.value * 2));
-					return oMin + (oMax - oMin) * Math.pow(smooth, exp$1);
-				};
-				effectiveUniforms[propName] = {
-					...effectiveUniforms[propName],
-					uniform: resolvedNode,
-					...mapComputeInfo ? { mapComputeInfo } : {},
-					...getCpuValue ? { getCpuValue } : {}
+		};
+	};
+	const composeOptions = () => ({
+		toneMapping: rendererToneMapping,
+		flipY: false,
+		premultiplyAlpha: true,
+		canvas: canvasElement ?? void 0,
+		dimensions: bufferSize(),
+		gpu: root ? {
+			device: root.device,
+			root
+		} : void 0,
+		writeExtraField: (nodeId, name, value) => {
+			const node = nodes.get(nodeId);
+			if (node) writeExtraFieldValue(node, name, value);
+		},
+		createMediaTexture: (opts) => {
+			if (!textureManager) throw new Error("[gpu] createMediaTexture before init");
+			return textureManager.createMediaTexture(opts);
+		},
+		createDataTexture: (opts) => {
+			if (!textureManager) throw new Error("[gpu] createDataTexture before init");
+			return textureManager.createDataTexture(opts);
+		},
+		resolveMapWindow: (nodeId, prop) => {
+			const node = nodes.get(nodeId);
+			const driver = node?.metadata.maps?.[prop];
+			if (!node || !driver || driver.type !== "map") return void 0;
+			const mv = ensureMapValues(node, prop, driver);
+			return {
+				inputMin: mv.inputMin,
+				inputMax: mv.inputMax,
+				outputMin: mv.outputMin,
+				outputMax: mv.outputMax,
+				curve: mv.curve
+			};
+		},
+		resolveDriverCpuValue: (nodeId, prop) => {
+			const node = nodes.get(nodeId);
+			const driver = node?.metadata.maps?.[prop];
+			if (!node || !driver) return void 0;
+			if (driver.type === "mouse-position") {
+				const s = node.mouseDriverState[prop];
+				if (!s || s.liveX === void 0 || s.liveY === void 0) return void 0;
+				return {
+					x: s.liveX,
+					y: 1 - s.liveY
 				};
 			}
+			if (driver.type === "mouse" || driver.type === "auto-animate") {
+				const h = node._liveHandles?.[`_smoothed_${prop}`];
+				return h instanceof FieldHandle ? h.value : void 0;
+			}
 		}
-		return effectiveUniforms;
-	};
-	const applyNodeTransformation = (result, nodeInfo) => {
-		if (!nodeInfo.metadata.transform || !nodeInfo.transformUniforms || !needsTransformation(nodeInfo.metadata.transform) && !nodeInfo.transformRTTActive) return result;
-		const texture$1 = trackConvertToTexture(result);
-		const transformedUV = applyUVTransform(screenUV, nodeInfo.transformUniforms.offsetX, nodeInfo.transformUniforms.offsetY, nodeInfo.transformUniforms.rotation, nodeInfo.transformUniforms.scale, nodeInfo.transformUniforms.anchorX, nodeInfo.transformUniforms.anchorY, nodeInfo.transformUniforms.aspectRatio);
-		return applyEdgeHandling(transformedUV, texture$1.sample(transformedUV), texture$1, nodeInfo.transformUniforms.edges.value);
-	};
-	const initNodeCompute = (nodeInfo, params) => {
-		nodeInfo.computeOutputs = void 0;
-		nodeInfo.computeGetNodes = void 0;
-		if (!(typeof window !== "undefined" && window.sessionStorage?.getItem("__shadersForceWebGL") === "1") && nodeInfo.computeNodeFunc && renderer.backend?.isWebGPUBackend === true) try {
-			const result = nodeInfo.computeNodeFunc(params);
-			if (result) {
-				nodeInfo.computeOutputs = result.outputs;
-				nodeInfo.computeGetNodes = result.getComputeNodes;
-				return result.outputs;
+	});
+	const extraHashInputs = () => {
+		const parts = [];
+		for (const [id, node] of nodes) {
+			const m = node.metadata;
+			if (node.hasUvRemap || node.acceptsUVContext) parts.push(`aopac:${id}:${(m.opacity ?? 1) < 1}`);
+			const sc = node.uniforms.stopCount?.value;
+			if (typeof sc === "number") parts.push(`stops:${id}:${sc > 1 ? sc : 0}`);
+			for (const [prop, u] of Object.entries(node.uniforms)) {
+				if (!u.compileTimeWhen) continue;
+				const v = u._lastCompiledValue;
+				if (v === null || typeof v === "object") continue;
+				parts.push(`ctw:${id}:${prop}:${String(v)}`);
+			}
+			if (m.maps) {
+				const fp = Object.entries(m.maps).sort(([a], [b]) => a < b ? -1 : a > b ? 1 : 0).map(([p, dr]) => {
+					const cfg = dr;
+					return `${p}=${cfg.type}:${cfg.source ?? ""}:${cfg.channel ?? ""}:${cfg.axis ?? ""}`;
+				}).join(",");
+				parts.push(`mapfp:${id}:${fp}`);
 			}
-		} catch (e) {
-			console.error(`Error initializing compute for node ${nodeInfo.id}:`, e);
 		}
+		return parts;
 	};
-	const composeNodeTree = (nodeId, processedMasks = /* @__PURE__ */ new Set(), currentlyComposedNodes) => {
-		if (currentWidth === 0 || currentHeight === 0) return vec4(0, 0, 0, 0);
-		const nodeInfo = nodeRegistry.nodes.get(nodeId);
-		if (!nodeInfo) return vec4(0, 0, 0, 0);
-		const nodeSpecificOnCleanup = (callback) => {
-			nodeInfo.cleanupCallbacks.push(callback);
-		};
-		const nodeSpecificOnBeforeRender = (callback) => {
-			nodeInfo.beforeRenderCallbacks.push(callback);
-		};
-		const nodeSpecificOnAfterRender = (callback) => {
-			nodeInfo.afterRenderCallbacks.push(callback);
-		};
-		const nodeSpecificOnResize = (callback) => {
-			nodeInfo.resizeCallbacks.push(callback);
+	const computeStructuralHash = () => {
+		if (!rootId) return null;
+		return structuralHash([...collectStructuralHashInputs(buildRegistryView(null, null), composeOptions()), ...extraHashInputs()]);
+	};
+	const bufferSize = () => ({
+		width: Math.max(1, Math.round(currentWidth * pixelRatio)),
+		height: Math.max(1, Math.round(currentHeight * pixelRatio))
+	});
+	const mediaResourcesFromIr = (ir) => {
+		const out = {};
+		for (const t of ir.textures) if (t.kind !== "rtt" && t.resource) out[t.key] = t.resource;
+		return out;
+	};
+	const buildComposition = (hash) => {
+		if (!root || !textureManager || !dispatcher) throw new Error("[gpu] buildComposition before init");
+		const store = createUniformStore(root, { systemSchema: SystemUniforms });
+		const handlesById = /* @__PURE__ */ new Map();
+		for (const [id, node] of nodes) handlesById.set(id, store.defineNode(id, buildFieldInits(node)));
+		store.defineSystem();
+		store.finalize();
+		const ir = composeNodeTree(buildRegistryView(store, handlesById), composeOptions());
+		const pm = createPassManager(root, {
+			textureManager,
+			dispatcher
+		});
+		pm.setComposition(ir, store.bindGroup, bufferSize(), mediaResourcesFromIr(ir));
+		const bc = {
+			hash,
+			store,
+			ir,
+			passManager: pm,
+			handlesById,
+			fresh: true
 		};
-		const childNodes = findChildNodes(nodeId);
-		if (childNodes.length === 0) {
-			nodeInfo.cleanupCallbacks.forEach((callback) => {
-				try {
-					callback();
-				} catch (e) {
-					console.error("Error in cleanup callback:", e);
-				}
-			});
-			nodeInfo.cleanupCallbacks = [];
-			nodeInfo.beforeRenderCallbacks = [];
-			nodeInfo.afterRenderCallbacks = [];
-			nodeInfo.resizeCallbacks = [];
-			const baseParams0 = {
-				uniforms: buildEffectiveUniforms(nodeInfo.uniforms ?? {}, nodeInfo.metadata.maps, nodeId, processedMasks),
-				childNode: void 0,
-				onCleanup: nodeSpecificOnCleanup,
-				onBeforeRender: nodeSpecificOnBeforeRender,
-				onAfterRender: nodeSpecificOnAfterRender,
-				onResize: nodeSpecificOnResize,
-				canvas: canvasElement,
-				dimensions: {
-					width: currentWidth,
-					height: currentHeight
-				},
-				renderer,
-				domCanvas: nodeInfo.domCanvas
-			};
-			baseParams0.computeOutputs = initNodeCompute(nodeInfo, baseParams0);
-			return applyMaskIfNeeded(applyNodeTransformation(nodeInfo.fragmentNodeFunc(baseParams0), nodeInfo), nodeInfo, nodeId, processedMasks);
-		} else {
-			const sortedChildren = [...childNodes].sort((a, b) => a.metadata.renderOrder - b.metadata.renderOrder);
-			if (nodeInfo.parentId === null) {
-				let composedChildren = void 0;
-				for (let i = 0; i < sortedChildren.length; i++) {
-					const childInfo = sortedChildren[i];
-					let effectiveOpacity;
-					if (childInfo.metadata.opacity === void 0) {
-						effectiveOpacity = 1;
-						childInfo.opacityUniform.value = effectiveOpacity;
-					} else {
-						effectiveOpacity = childInfo.metadata.opacity;
-						childInfo.opacityUniform.value = effectiveOpacity;
-					}
-					if (childInfo.metadata.visible === false) continue;
-					if (currentlyComposedNodes) currentlyComposedNodes.add(childInfo.id);
-					const childHasChildren = findChildNodes(childInfo.id).length > 0;
-					let childResult;
-					if (childHasChildren) childResult = composeNodeTree(childInfo.id, processedMasks, currentlyComposedNodes);
-					else {
-						const childSpecificOnCleanup = (callback) => {
-							childInfo.cleanupCallbacks.push(callback);
-						};
-						const childSpecificOnBeforeRender = (callback) => {
-							childInfo.beforeRenderCallbacks.push(callback);
-						};
-						const childSpecificOnAfterRender = (callback) => {
-							childInfo.afterRenderCallbacks.push(callback);
-						};
-						const childSpecificOnResize = (callback) => {
-							childInfo.resizeCallbacks.push(callback);
-						};
-						let effectiveChildNode = composedChildren;
-						if (childInfo.requiresRTT && composedChildren !== void 0) effectiveChildNode = applyBlendMode(vec4(0, 0, 0, 0), composedChildren, "normal", 1);
-						childInfo.cleanupCallbacks.forEach((callback) => {
-							try {
-								callback();
-							} catch (e) {
-								console.error("Error in cleanup callback:", e);
-							}
-						});
-						childInfo.cleanupCallbacks = [];
-						childInfo.beforeRenderCallbacks = [];
-						childInfo.afterRenderCallbacks = [];
-						childInfo.resizeCallbacks = [];
-						const baseParams1 = {
-							uniforms: buildEffectiveUniforms(childInfo.uniforms ?? {}, childInfo.metadata.maps, childInfo.id, processedMasks),
-							childNode: effectiveChildNode,
-							onCleanup: childSpecificOnCleanup,
-							onBeforeRender: childSpecificOnBeforeRender,
-							onAfterRender: childSpecificOnAfterRender,
-							onResize: childSpecificOnResize,
-							canvas: canvasElement,
-							dimensions: {
-								width: currentWidth,
-								height: currentHeight
-							},
-							renderer,
-							domCanvas: childInfo.domCanvas
-						};
-						baseParams1.computeOutputs = initNodeCompute(childInfo, baseParams1);
-						childResult = applyMaskIfNeeded(applyNodeTransformation(childInfo.fragmentNodeFunc(baseParams1), childInfo), childInfo, childInfo.id, processedMasks);
-					}
-					if (childInfo.requiresChild && childInfo.metadata.blendMode === "normal" && !childHasChildren) composedChildren = mix(composedChildren || vec4(0, 0, 0, 0), childResult, childInfo.opacityUniform);
-					else if (composedChildren === void 0) if (nodeInfo.requiresRTT || effectiveOpacity !== 1) composedChildren = applyBlendMode(vec4(1, 1, 1, 0), childResult, childInfo.metadata.blendMode, childInfo.opacityUniform);
-					else composedChildren = childResult;
-					else composedChildren = applyBlendMode(composedChildren, childResult, childInfo.metadata.blendMode, childInfo.opacityUniform);
-				}
-				nodeInfo.cleanupCallbacks.forEach((callback) => {
-					try {
-						callback();
-					} catch (e) {
-						console.error("Error in cleanup callback:", e);
-					}
-				});
-				nodeInfo.cleanupCallbacks = [];
-				nodeInfo.beforeRenderCallbacks = [];
-				nodeInfo.afterRenderCallbacks = [];
-				nodeInfo.resizeCallbacks = [];
-				const baseParams2 = {
-					uniforms: buildEffectiveUniforms(nodeInfo.uniforms ?? {}, nodeInfo.metadata.maps, nodeId, processedMasks),
-					childNode: composedChildren,
-					onCleanup: nodeSpecificOnCleanup,
-					onBeforeRender: nodeSpecificOnBeforeRender,
-					onAfterRender: nodeSpecificOnAfterRender,
-					onResize: nodeSpecificOnResize,
-					canvas: canvasElement,
-					dimensions: {
-						width: currentWidth,
-						height: currentHeight
-					},
-					renderer,
-					domCanvas: nodeInfo.domCanvas
-				};
-				baseParams2.computeOutputs = initNodeCompute(nodeInfo, baseParams2);
-				return applyMaskIfNeeded(applyNodeTransformation(nodeInfo.fragmentNodeFunc(baseParams2), nodeInfo), nodeInfo, nodeId, processedMasks);
-			} else {
-				let composedChildrenResult = void 0;
-				for (let i = 0; i < sortedChildren.length; i++) {
-					const childInfo = sortedChildren[i];
-					let effectiveOpacity;
-					if (childInfo.metadata.opacity === void 0) {
-						effectiveOpacity = 1;
-						childInfo.opacityUniform.value = effectiveOpacity;
-					} else {
-						effectiveOpacity = childInfo.metadata.opacity;
-						childInfo.opacityUniform.value = effectiveOpacity;
-					}
-					if (childInfo.metadata.visible === false) continue;
-					if (currentlyComposedNodes) currentlyComposedNodes.add(childInfo.id);
-					const childHasChildren = findChildNodes(childInfo.id).length > 0;
-					let childResult;
-					if (childHasChildren) childResult = composeNodeTree(childInfo.id, processedMasks, currentlyComposedNodes);
-					else {
-						const childSpecificOnCleanup = (callback) => {
-							childInfo.cleanupCallbacks.push(callback);
-						};
-						const childSpecificOnBeforeRender = (callback) => {
-							childInfo.beforeRenderCallbacks.push(callback);
-						};
-						const childSpecificOnAfterRender = (callback) => {
-							childInfo.afterRenderCallbacks.push(callback);
-						};
-						const childSpecificOnResize = (callback) => {
-							childInfo.resizeCallbacks.push(callback);
-						};
-						let effectiveChildNode = composedChildrenResult;
-						if (childInfo.requiresRTT && composedChildrenResult !== void 0) effectiveChildNode = applyBlendMode(vec4(0, 0, 0, 0), composedChildrenResult, "normal", 1);
-						childInfo.cleanupCallbacks = [];
-						childInfo.beforeRenderCallbacks = [];
-						childInfo.afterRenderCallbacks = [];
-						childInfo.resizeCallbacks = [];
-						const baseParams3 = {
-							uniforms: buildEffectiveUniforms(childInfo.uniforms ?? {}, childInfo.metadata.maps, childInfo.id, processedMasks),
-							childNode: effectiveChildNode,
-							onCleanup: childSpecificOnCleanup,
-							onBeforeRender: childSpecificOnBeforeRender,
-							onAfterRender: childSpecificOnAfterRender,
-							onResize: childSpecificOnResize,
-							canvas: canvasElement,
-							dimensions: {
-								width: currentWidth,
-								height: currentHeight
-							},
-							renderer,
-							domCanvas: childInfo.domCanvas
-						};
-						baseParams3.computeOutputs = initNodeCompute(childInfo, baseParams3);
-						childResult = applyMaskIfNeeded(applyNodeTransformation(childInfo.fragmentNodeFunc(baseParams3), childInfo), childInfo, childInfo.id, processedMasks);
-					}
-					if (childInfo.requiresChild && childInfo.metadata.blendMode === "normal" && !childHasChildren) composedChildrenResult = mix(composedChildrenResult || vec4(0, 0, 0, 0), childResult, childInfo.opacityUniform);
-					else if (composedChildrenResult === void 0) if (nodeInfo.requiresRTT || effectiveOpacity !== 1) composedChildrenResult = applyBlendMode(vec4(1, 1, 1, 0), childResult, childInfo.metadata.blendMode, childInfo.opacityUniform);
-					else composedChildrenResult = childResult;
-					else composedChildrenResult = applyBlendMode(composedChildrenResult, childResult, childInfo.metadata.blendMode, childInfo.opacityUniform);
-				}
-				nodeInfo.cleanupCallbacks.forEach((callback) => {
-					try {
-						callback();
-					} catch (e) {
-						console.error("Error in cleanup callback:", e);
-					}
-				});
-				nodeInfo.cleanupCallbacks = [];
-				nodeInfo.beforeRenderCallbacks = [];
-				nodeInfo.afterRenderCallbacks = [];
-				nodeInfo.resizeCallbacks = [];
-				const baseParams4 = {
-					uniforms: buildEffectiveUniforms(nodeInfo.uniforms ?? {}, nodeInfo.metadata.maps, nodeId, processedMasks),
-					childNode: composedChildrenResult,
-					onCleanup: nodeSpecificOnCleanup,
-					onBeforeRender: nodeSpecificOnBeforeRender,
-					onAfterRender: nodeSpecificOnAfterRender,
-					onResize: nodeSpecificOnResize,
-					canvas: canvasElement,
-					dimensions: {
-						width: currentWidth,
-						height: currentHeight
-					},
-					renderer,
-					domCanvas: nodeInfo.domCanvas
-				};
-				baseParams4.computeOutputs = initNodeCompute(nodeInfo, baseParams4);
-				return applyMaskIfNeeded(applyNodeTransformation(nodeInfo.fragmentNodeFunc(baseParams4), nodeInfo), nodeInfo, nodeId, processedMasks);
+		liveCompositions.add(bc);
+		return bc;
+	};
+	const disposeComposition = (bc) => {
+		try {
+			for (const cb of bc.ir.onCleanup) cb();
+		} catch (e) {
+			console.error("[gpu] composition onCleanup error:", e);
+		}
+		try {
+			bc.passManager.dispose();
+		} catch (e) {
+			console.error("[gpu] passManager dispose error:", e);
+		}
+		try {
+			bc.store.destroy();
+		} catch (e) {
+			console.error("[gpu] store destroy error:", e);
+		}
+		liveCompositions.delete(bc);
+		if (boundComposition === bc) boundComposition = null;
+	};
+	const bindComposition = (bc) => {
+		let repointed = false;
+		for (const [id, handles] of bc.handlesById) {
+			const node = nodes.get(id);
+			if (node && node._liveHandles !== handles) {
+				node._liveHandles = handles;
+				repointed = true;
+			}
+		}
+		if (bc === boundComposition && !repointed) return;
+		if (!bc.fresh) {
+			for (const node of nodes.values()) {
+				for (const [propName, u] of Object.entries(node.uniforms)) writePropHandle(node, propName, u.value);
+				writeNodeSynthetic(node);
 			}
+			bc.store.writeAll();
 		}
+		bc.fresh = false;
+		boundComposition = bc;
+		if (!hasEmittedReady && bc.ir.composedNodeIds.size > 0) firstRenderPending = true;
+	};
+	const markStructuralDirty = () => {
+		structuralDirty = true;
+		requestRender();
+	};
+	const requestRender = () => {
+		if (frameLoop.running) return;
+		if (pendingRenderRAF !== null) return;
+		if (typeof requestAnimationFrame !== "function") return;
+		pendingRenderRAF = requestAnimationFrame(() => {
+			pendingRenderRAF = null;
+			renderFrame();
+		});
 	};
 	const registerNode = (id, fragmentNodeFunc, parentId, metadata, uniforms = {}, componentDefinition, domCanvas) => {
 		if (fragmentNodeFunc === null) {
@@ -1504,26 +1824,22 @@ function shaderRenderer() {
 			removeNode(id);
 			return;
 		}
+		if (!componentDefinition) {
+			console.error(`[gpu] registerNode("${id}") requires a componentDefinition`);
+			return;
+		}
 		if (!isRendererReady) {
 			const existing = pendingRegistrationQueue.findIndex((item) => item.id === id);
-			if (existing !== -1) pendingRegistrationQueue[existing] = {
+			const entry = {
 				id,
-				fragmentNodeFunc,
+				definition: componentDefinition,
 				parentId,
 				metadata,
 				uniforms,
-				componentDefinition,
 				domCanvas
 			};
-			else pendingRegistrationQueue.push({
-				id,
-				fragmentNodeFunc,
-				parentId,
-				metadata,
-				uniforms,
-				componentDefinition,
-				domCanvas
-			});
+			if (existing !== -1) pendingRegistrationQueue[existing] = entry;
+			else pendingRegistrationQueue.push(entry);
 			return;
 		}
 		let defaultRenderOrder = 0;
@@ -1532,144 +1848,151 @@ function shaderRenderer() {
 			if (siblings && siblings.size > 0) {
 				let maxOrder = 0;
 				for (const siblingId of siblings) {
-					const sibling = nodeRegistry.nodes.get(siblingId);
+					const sibling = nodes.get(siblingId);
 					if (sibling && sibling.metadata.renderOrder > maxOrder) maxOrder = sibling.metadata.renderOrder;
 				}
 				defaultRenderOrder = maxOrder + 1;
 			}
 		}
-		const opacityUniform = uniform(metadata?.opacity !== void 0 ? metadata.opacity : 1);
-		let transformUniforms = void 0;
-		if (metadata?.transform) {
-			const aspectRatio = currentWidth / Math.max(1, currentHeight);
-			const t = metadata.transform;
-			transformUniforms = {
-				offsetX: uniform(t.offsetX ?? 0),
-				offsetY: uniform(t.offsetY ?? 0),
-				rotation: uniform(t.rotation ?? 0),
-				scale: uniform(t.scale ?? 1),
-				anchorX: uniform(t.anchorX ?? .5),
-				anchorY: uniform(t.anchorY ?? .5),
-				edges: uniform(t.edges === "stretch" ? 0 : t.edges === "transparent" ? 1 : t.edges === "mirror" ? 2 : t.edges === "wrap" ? 3 : 1),
-				aspectRatio: uniform(aspectRatio)
-			};
-		}
-		const nodeInfo = {
+		const nodeMetadata = {
+			blendMode: metadata?.blendMode || "normal",
+			opacity: metadata?.opacity,
+			visible: metadata?.visible === false ? false : true,
+			id: metadata?.id ? sanitizeId(metadata.id) : metadata?.id,
+			mask: metadata?.mask,
+			maps: metadata?.maps,
+			renderOrder: metadata?.renderOrder !== void 0 ? metadata.renderOrder : defaultRenderOrder,
+			transform: metadata?.transform,
+			boundingBox: metadata?.boundingBox
+		};
+		const decl = componentDefinition.boundingBoxDeclaration;
+		const extraDimProps = componentDefinition.props ? buildExtraSizeProps(componentDefinition.props) : void 0;
+		const node = {
 			id,
-			componentName: componentDefinition?.name || "Unknown",
-			fragmentNodeFunc,
+			componentName: componentDefinition.name || "Unknown",
 			parentId,
-			requiresRTT: componentDefinition?.requiresRTT || false,
-			requiresChild: componentDefinition?.requiresChild || false,
-			opacityUniform,
-			metadata: {
-				blendMode: metadata?.blendMode || "normal",
-				opacity: metadata?.opacity,
-				visible: metadata?.visible === false ? false : true,
-				id: metadata?.id ? sanitizeId(metadata.id) : metadata?.id,
-				mask: metadata?.mask,
-				maps: metadata?.maps,
-				renderOrder: metadata?.renderOrder !== void 0 ? metadata?.renderOrder : defaultRenderOrder,
-				transform: metadata?.transform
-			},
+			definition: componentDefinition,
+			metadata: nodeMetadata,
 			uniforms,
-			cleanupCallbacks: [],
-			beforeRenderCallbacks: [],
-			afterRenderCallbacks: [],
-			resizeCallbacks: [],
-			transformUniforms,
-			transformRTTActive: false,
-			mapSampleUVsFunc: componentDefinition?.mapSampleUVs,
-			computeNodeFunc: componentDefinition?.computeNode,
-			usesPointer: componentDefinition?.usesPointer,
-			domCanvas
+			domCanvas,
+			requiresRTT: !!componentDefinition.requiresRTT,
+			requiresChild: !!componentDefinition.requiresChild,
+			blendWithChildren: !!componentDefinition.blendWithChildren,
+			acceptsUVContext: !!componentDefinition.acceptsUVContext,
+			providesUVContextViaCompute: !!componentDefinition.providesUVContextViaCompute,
+			usesPointer: !!componentDefinition.usesPointer,
+			hasUvRemap: !!componentDefinition.uvRemap,
+			boundingBoxDeclaration: decl,
+			wantsBoundsParams: !!componentDefinition.wantsBoundsParams,
+			extraDimProps,
+			mouseDriverState: {},
+			autoAnimateState: {},
+			mapValues: {},
+			_liveHandles: null
 		};
-		nodeRegistry.nodes.set(id, nodeInfo);
-		if (parentId === null) nodeRegistry.rootId = id;
-		updateMouseListenerRegistration();
+		if (decl || extraDimProps) {
+			const plan = buildDimensionalPlan(decl, extraDimProps);
+			if (plan) {
+				const origin = uniforms["origin"]?.value ?? "center";
+				const he = computeDimExtent(node, origin);
+				for (const name of [...plan.positionProps, ...plan.sizeProps.keys()]) {
+					const u = uniforms[name];
+					if (!u) continue;
+					u._rawDimensional = u.value;
+					u.value = resolveDimensionalProp(decl, name, u.value, origin, pxResWidth(), pxResHeight(), extraDimProps, he);
+				}
+			}
+		}
+		for (const u of Object.values(uniforms)) if (u.compileTimeWhen && u._lastCompiledValue === void 0) u._lastCompiledValue = u.value;
+		nodes.set(id, node);
+		if (parentId === null) rootId = id;
 		const childrenSet = parentToChildren.get(parentId) || /* @__PURE__ */ new Set();
 		childrenSet.add(id);
 		parentToChildren.set(parentId, childrenSet);
-		if (material && isInitialized && currentWidth > 0 && currentHeight > 0) {
-			if (materialUpdateBatchRAF === null) materialUpdateBatchRAF = requestAnimationFrame(() => {
-				materialUpdateBatchRAF = null;
-				updateMaterial();
-			});
-		} else if (material && isInitialized) {
-			if (!materialUpdatePending) {
-				materialUpdatePending = true;
-				requestAnimationFrame(() => {
-					materialUpdatePending = false;
-					if (currentWidth > 0 && currentHeight > 0) updateMaterial();
-				});
+		updateMouseListenerRegistration();
+		markStructuralDirty();
+	};
+	const updateUniformValue = (nodeId, uniformName, value) => {
+		const node = nodes.get(nodeId);
+		if (!node) return;
+		const u = node.uniforms[uniformName];
+		if (!u) return;
+		const decl = node.boundingBoxDeclaration;
+		const extra = node.extraDimProps;
+		if ((decl || extra) && isDimensionalProp(decl, uniformName, extra)) {
+			u._rawDimensional = value;
+			const origin = node.uniforms["origin"]?.value ?? "center";
+			const he = computeDimExtent(node, origin);
+			value = resolveDimensionalProp(decl, uniformName, value, origin, pxResWidth(), pxResHeight(), extra, he);
+		}
+		u.value = value;
+		writePropHandle(node, uniformName, value);
+		if (u.transform === colorStopsTransform || u.transform === transformColorSpace) repackColorStops(node);
+		if (uniformName === "origin" && decl) reresolveDimensionalUniforms(node);
+		else if (decl) {
+			if ((node.uniforms["origin"]?.value ?? "center") !== "center") {
+				const plan = buildDimensionalPlan(decl, extra);
+				const affectsExtent = !!decl.computeBounds || (plan?.sizeProps.has(uniformName) ?? false);
+				const isPositionProp = plan?.positionProps.has(uniformName) ?? false;
+				if (affectsExtent && !isPositionProp) reresolveDimensionalUniforms(node);
 			}
 		}
-	};
-	const updateUniformValue$1 = (nodeId, uniformName, value) => {
-		const nodeInfo = nodeRegistry.nodes.get(nodeId);
-		if (!nodeInfo || !nodeInfo.uniforms) return;
-		const uniformDefinition = nodeInfo.uniforms[uniformName];
-		if (!uniformDefinition || !uniformDefinition.uniform) return;
-		if (uniformDefinition.transform) {
-			setColorSpaceMode(rendererColorSpace);
-			updateUniformValue(uniformDefinition, value);
-		} else uniformDefinition.uniform.value = value;
-		if (uniformDefinition.compileTime && material && isInitialized && currentWidth > 0 && currentHeight > 0) {
-			if (materialUpdateBatchRAF === null) materialUpdateBatchRAF = requestAnimationFrame(() => {
-				materialUpdateBatchRAF = null;
-				updateMaterial();
-			});
+		if (uniformName === "shape") updateMouseListenerRegistration();
+		if (u.compileTime) {
+			markStructuralDirty();
 			return;
 		}
-		if (uniformDefinition.compileTimeWhen && material && isInitialized && currentWidth > 0 && currentHeight > 0) {
-			const prev = uniformDefinition._lastCompiledValue;
-			if (uniformDefinition.compileTimeWhen(prev, value)) {
-				uniformDefinition._lastCompiledValue = value;
-				if (materialUpdateBatchRAF === null) materialUpdateBatchRAF = requestAnimationFrame(() => {
-					materialUpdateBatchRAF = null;
-					updateMaterial();
-				});
+		if (u.compileTimeWhen) {
+			const prev = u._lastCompiledValue;
+			if (u.compileTimeWhen(prev, value)) {
+				u._lastCompiledValue = value;
+				markStructuralDirty();
 				return;
 			}
 		}
-		if (!animationFrameId) renderFrame();
+		requestRender();
 	};
 	const updateNodeMetadata = (nodeId, metadata) => {
-		const existingNode = nodeRegistry.nodes.get(nodeId);
-		if (!existingNode) return;
+		const node = nodes.get(nodeId);
+		if (!node) return;
 		let needsRecompose = false;
-		if (metadata.blendMode !== void 0 && existingNode.metadata.blendMode !== metadata.blendMode) {
-			existingNode.metadata.blendMode = metadata.blendMode;
+		if (metadata.blendMode !== void 0 && node.metadata.blendMode !== metadata.blendMode) {
+			node.metadata.blendMode = metadata.blendMode;
 			needsRecompose = true;
 		}
-		if (metadata.opacity !== void 0 && existingNode.metadata.opacity !== metadata.opacity) {
-			existingNode.metadata.opacity = metadata.opacity;
-			existingNode.opacityUniform.value = metadata.opacity;
+		if (metadata.opacity !== void 0 && node.metadata.opacity !== metadata.opacity) {
+			const oldOpacity = node.metadata.opacity ?? 1;
+			const newOpacity = metadata.opacity;
+			node.metadata.opacity = newOpacity;
+			writeSyntheticScalar(node, "_opacity", newOpacity);
+			if ((node.hasUvRemap || node.acceptsUVContext) && oldOpacity >= 1 !== newOpacity >= 1) needsRecompose = true;
 		}
-		if (metadata.renderOrder !== void 0 && existingNode.metadata.renderOrder !== metadata.renderOrder) {
-			existingNode.metadata.renderOrder = metadata.renderOrder;
+		if (metadata.renderOrder !== void 0 && node.metadata.renderOrder !== metadata.renderOrder) {
+			node.metadata.renderOrder = metadata.renderOrder;
 			needsRecompose = true;
 		}
-		const newVisible = metadata.visible === false ? false : true;
-		if (existingNode.metadata.visible !== newVisible) {
-			existingNode.metadata.visible = newVisible;
-			needsRecompose = true;
+		if ("visible" in metadata) {
+			const newVisible = metadata.visible === false ? false : true;
+			if (node.metadata.visible !== newVisible) {
+				node.metadata.visible = newVisible;
+				needsRecompose = true;
+			}
 		}
 		if (metadata.id !== void 0) {
-			const sanitizedId = sanitizeId(metadata.id);
-			if (existingNode.metadata.id !== sanitizedId) {
-				existingNode.metadata.id = sanitizedId;
+			const sanitized = sanitizeId(metadata.id);
+			if (node.metadata.id !== sanitized) {
+				node.metadata.id = sanitized;
 				needsRecompose = true;
 			}
 		}
-		if ("mask" in metadata && (existingNode.metadata.mask?.source !== metadata.mask?.source || existingNode.metadata.mask?.type !== metadata.mask?.type)) {
-			existingNode.metadata.mask = metadata.mask;
+		if ("mask" in metadata && (node.metadata.mask?.source !== metadata.mask?.source || node.metadata.mask?.type !== metadata.mask?.type)) {
+			node.metadata.mask = metadata.mask;
 			needsRecompose = true;
 		}
-		if ("maps" in metadata && JSON.stringify(existingNode.metadata.maps) !== JSON.stringify(metadata.maps)) {
-			const oldMaps = existingNode.metadata.maps;
+		if ("maps" in metadata && JSON.stringify(node.metadata.maps) !== JSON.stringify(metadata.maps)) {
+			const oldMaps = node.metadata.maps;
 			const newMaps = metadata.maps;
-			existingNode.metadata.maps = newMaps;
+			node.metadata.maps = newMaps;
 			updateMouseListenerRegistration();
 			if ((() => {
 				if (!oldMaps || !newMaps) return true;
@@ -1681,183 +2004,96 @@ function shaderRenderer() {
 					const newCfg = newMaps[key];
 					if (oldCfg.type !== newCfg.type) return true;
 					if (newCfg.type === "map") {
-						const nc = newCfg;
 						const oc = oldCfg;
-						if (oc.source !== nc.source) return true;
-						if (oc.channel !== nc.channel) return true;
-						if (!existingNode.mapUniforms?.[key]) return true;
-					} else if (newCfg.type === "mouse") {
 						const nc = newCfg;
-						if (oldCfg.axis !== nc.axis) return true;
-						if (!existingNode.mouseDriverState?.[key]) return true;
-					} else if (newCfg.type === "mouse-position") {
-						if (!existingNode.mouseDriverState?.[key]) return true;
-					} else if (newCfg.type === "auto-animate") {
-						if (!existingNode.autoAnimateState?.[key]) return true;
+						if (oc.source !== nc.source || oc.channel !== nc.channel) return true;
+					} else if (newCfg.type === "mouse") {
+						if (oldCfg.axis !== newCfg.axis) return true;
 					}
 				}
 				return false;
 			})()) {
 				if (oldMaps && newMaps) {
 					for (const key of Object.keys(oldMaps)) if (key in newMaps && oldMaps[key].type !== newMaps[key].type) {
-						if (existingNode.autoAnimateState) delete existingNode.autoAnimateState[key];
+						delete node.mouseDriverState[key];
+						delete node.autoAnimateState[key];
+						delete node.mapValues[key];
 					}
 				}
-				if (oldMaps && newMaps && existingNode.mouseDriverState) {
-					for (const key of Object.keys(oldMaps)) if (key in newMaps && oldMaps[key].type !== newMaps[key].type) delete existingNode.mouseDriverState[key];
-				}
 				needsRecompose = true;
-			} else for (const [key, driverCfg] of Object.entries(newMaps)) if (driverCfg.type === "map") {
-				const mapCfg = driverCfg;
-				const cached = existingNode.mapUniforms[key];
-				if (cached) {
-					cached.inputMin.value = mapCfg.inputMin;
-					cached.inputMax.value = mapCfg.inputMax;
-					cached.outputMin.value = mapCfg.outputMin;
-					cached.outputMax.value = mapCfg.outputMax;
-					cached.curve.value = mapCfg.curve ?? 0;
-				}
-			} else if (driverCfg.type === "mouse") {
-				const mouseCfg = driverCfg;
-				const cached = existingNode.mapUniforms?.[key];
-				if (cached) {
-					cached.outputMin.value = mouseCfg.outputMin;
-					cached.outputMax.value = mouseCfg.outputMax;
-					cached.curve.value = mouseCfg.curve ?? 0;
-				}
-			} else if (driverCfg.type === "auto-animate") {
-				const animCfg = driverCfg;
-				const cached = existingNode.mapUniforms?.[key];
-				if (cached) {
-					cached.outputMin.value = animCfg.outputMin;
-					cached.outputMax.value = animCfg.outputMax;
+			} else if (newMaps) for (const [key, driver] of Object.entries(newMaps)) {
+				const mv = ensureMapValues(node, key, driver);
+				if (driver.type === "map") {
+					writeSyntheticScalar(node, `_map_${key}_inputMin`, mv.inputMin);
+					writeSyntheticScalar(node, `_map_${key}_inputMax`, mv.inputMax);
+					writeSyntheticScalar(node, `_map_${key}_outputMin`, mv.outputMin);
+					writeSyntheticScalar(node, `_map_${key}_outputMax`, mv.outputMax);
+					writeSyntheticScalar(node, `_map_${key}_curve`, mv.curve);
 				}
 			}
 		}
 		if (metadata.transform !== void 0) {
-			const mergedTransform = {
-				offsetX: metadata.transform.offsetX ?? existingNode.metadata.transform?.offsetX ?? 0,
-				offsetY: metadata.transform.offsetY ?? existingNode.metadata.transform?.offsetY ?? 0,
-				rotation: metadata.transform.rotation ?? existingNode.metadata.transform?.rotation ?? 0,
-				scale: metadata.transform.scale ?? existingNode.metadata.transform?.scale ?? 1,
-				anchorX: metadata.transform.anchorX ?? existingNode.metadata.transform?.anchorX ?? .5,
-				anchorY: metadata.transform.anchorY ?? existingNode.metadata.transform?.anchorY ?? .5,
-				edges: metadata.transform.edges ?? existingNode.metadata.transform?.edges ?? "transparent"
+			const prev = node.metadata.transform;
+			const merged = {
+				offsetX: metadata.transform.offsetX ?? prev?.offsetX ?? 0,
+				offsetY: metadata.transform.offsetY ?? prev?.offsetY ?? 0,
+				rotation: metadata.transform.rotation ?? prev?.rotation ?? 0,
+				scale: metadata.transform.scale ?? prev?.scale ?? 1,
+				anchorX: metadata.transform.anchorX ?? prev?.anchorX ?? .5,
+				anchorY: metadata.transform.anchorY ?? prev?.anchorY ?? .5,
+				edges: metadata.transform.edges ?? prev?.edges ?? "transparent"
 			};
-			const newTransformState = needsTransformation(mergedTransform);
-			existingNode.metadata.transform = mergedTransform;
-			if (!existingNode.transformUniforms && mergedTransform) {
-				const aspectRatio = currentWidth / Math.max(1, currentHeight);
-				existingNode.transformUniforms = {
-					offsetX: uniform(mergedTransform.offsetX),
-					offsetY: uniform(mergedTransform.offsetY),
-					rotation: uniform(mergedTransform.rotation),
-					scale: uniform(mergedTransform.scale),
-					anchorX: uniform(mergedTransform.anchorX),
-					anchorY: uniform(mergedTransform.anchorY),
-					edges: uniform(mergedTransform.edges === "stretch" ? 0 : mergedTransform.edges === "transparent" ? 1 : mergedTransform.edges === "mirror" ? 2 : 3),
-					aspectRatio: uniform(aspectRatio)
-				};
-			} else if (existingNode.transformUniforms) {
-				existingNode.transformUniforms.offsetX.value = mergedTransform.offsetX;
-				existingNode.transformUniforms.offsetY.value = mergedTransform.offsetY;
-				existingNode.transformUniforms.rotation.value = mergedTransform.rotation;
-				existingNode.transformUniforms.scale.value = mergedTransform.scale;
-				existingNode.transformUniforms.anchorX.value = mergedTransform.anchorX;
-				existingNode.transformUniforms.anchorY.value = mergedTransform.anchorY;
-				const oldEdgesValue = existingNode.transformUniforms.edges.value;
-				existingNode.transformUniforms.edges.value = mergedTransform.edges === "stretch" ? 0 : mergedTransform.edges === "transparent" ? 1 : mergedTransform.edges === "mirror" ? 2 : 3;
-				if (existingNode.transformUniforms.edges.value !== oldEdgesValue) needsRecompose = true;
-			}
-			if (newTransformState && !existingNode.transformRTTActive) {
-				existingNode.transformRTTActive = true;
+			const wasActive = transformActive(node);
+			node.metadata.transform = merged;
+			const nowActive = needsTransformation(merged);
+			if (wasActive !== nowActive || prev && prev.edges !== merged.edges) needsRecompose = true;
+			else if (nowActive) for (const [k, v] of Object.entries(transformFieldValues(node))) writeSyntheticScalar(node, `_xform_${k}`, v);
+		}
+		if (metadata.boundingBox !== void 0 && metadata.boundingBox !== null && node.boundingBoxDeclaration !== void 0) {
+			const wasActive = bboxActive(node);
+			node.metadata.boundingBox = metadata.boundingBox;
+			if (wasActive) {
+				const bb = bboxFieldValues(node);
+				if (bb) for (const [k, v] of Object.entries(bb)) writeSyntheticScalar(node, `_bbox_${k}`, v);
+			} else needsRecompose = true;
+		} else if (metadata.boundingBox === null) {
+			if (node.metadata.boundingBox !== void 0) {
+				node.metadata.boundingBox = void 0;
 				needsRecompose = true;
 			}
 		}
-		if (needsRecompose && material && isInitialized) {
-			if (materialUpdateBatchRAF === null) materialUpdateBatchRAF = requestAnimationFrame(() => {
-				materialUpdateBatchRAF = null;
-				updateMaterial();
-			});
-		} else if (!animationFrameId) renderFrame();
+		if (needsRecompose) markStructuralDirty();
+		else requestRender();
 	};
 	const removeNode = (id) => {
-		if (!nodeRegistry.nodes.has(id)) return;
-		const nodeInfo = nodeRegistry.nodes.get(id);
-		if (nodeInfo && nodeInfo.cleanupCallbacks.length > 0) for (const callback of nodeInfo.cleanupCallbacks) try {
-			callback();
-		} catch (e) {
-			console.error(`Error executing cleanup callback for node ${id}:`, e);
-		}
-		const childNodes = findChildNodes(id);
-		for (const child of childNodes) removeNode(child.id);
-		if (nodeRegistry.rootId === id) nodeRegistry.rootId = null;
-		if (nodeInfo) {
-			const childrenSet = parentToChildren.get(nodeInfo.parentId);
-			if (childrenSet) {
-				childrenSet.delete(id);
-				if (childrenSet.size === 0) parentToChildren.delete(nodeInfo.parentId);
-			}
-		}
-		nodeRegistry.nodes.delete(id);
-		activeBeforeRender.delete(id);
-		activeAfterRender.delete(id);
-		activeCompute.delete(id);
-		activeDrivers.delete(id);
+		const node = nodes.get(id);
+		if (!node) return;
+		for (const child of findChildNodes(id)) removeNode(child.id);
+		if (rootId === id) rootId = null;
+		const siblingSet = parentToChildren.get(node.parentId);
+		if (siblingSet) {
+			siblingSet.delete(id);
+			if (siblingSet.size === 0) parentToChildren.delete(node.parentId);
+		}
+		nodes.delete(id);
 		updateMouseListenerRegistration();
-		pendingNodeRemoval = true;
-		if (material && isInitialized) {
-			if (materialUpdateBatchRAF === null) materialUpdateBatchRAF = requestAnimationFrame(() => {
-				materialUpdateBatchRAF = null;
-				updateMaterial();
-			});
-		}
-	};
-	const applyBounceEase = (t) => {
-		const n1 = 7.5625, d1 = 2.75;
-		if (t < 1 / d1) return n1 * t * t;
-		if (t < 2 / d1) {
-			t -= 1.5 / d1;
-			return n1 * t * t + .75;
-		}
-		if (t < 2.5 / d1) {
-			t -= 2.25 / d1;
-			return n1 * t * t + .9375;
-		}
-		t -= 2.625 / d1;
-		return n1 * t * t + .984375;
-	};
-	const applyEasing = (t, easing) => {
-		switch (easing) {
-			case "linear": return t;
-			case "quad": return t < .5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2;
-			case "expo":
-				if (t === 0) return 0;
-				if (t === 1) return 1;
-				return t < .5 ? Math.pow(2, 20 * t - 10) / 2 : (2 - Math.pow(2, -20 * t + 10)) / 2;
-			case "bounce": return applyBounceEase(t);
-			case "sine":
-			default: return (1 - Math.cos(Math.PI * t)) / 2;
-		}
+		markStructuralDirty();
 	};
 	const updateMouseDrivers = () => {
 		const deltaTime = frameParams.deltaTime;
-		globalElapsedTime += deltaTime;
-		for (const id of activeDrivers) {
-			const nodeInfo = nodeRegistry.nodes.get(id);
-			if (!nodeInfo) continue;
-			const maps = nodeInfo.metadata.maps;
+		globalElapsedTime = deriveElapsedTime(sharedTimeOrigin, globalElapsedTime, deltaTime, performance.now());
+		for (const node of nodes.values()) {
+			const maps = node.metadata.maps;
 			if (!maps) continue;
-			const mouseState = nodeInfo.mouseDriverState;
-			for (const propName in mouseState) {
-				const state = mouseState[propName];
-				const driverConfig = maps[propName];
-				if (!driverConfig) continue;
-				if (driverConfig.type === "mouse-position") {
-					const smoothing = driverConfig.smoothing ?? 0;
-					const momentum = driverConfig.momentum ?? 0;
-					const trackX = driverConfig.x === void 0 || driverConfig.x === "mouse";
-					const trackY = driverConfig.y === void 0 || driverConfig.y === "mouse";
+			for (const propName in node.mouseDriverState) {
+				const state = node.mouseDriverState[propName];
+				const driver = maps[propName];
+				if (!driver) continue;
+				if (driver.type === "mouse-position") {
+					const smoothing = driver.smoothing ?? 0;
+					const momentum = driver.momentum ?? 0;
+					const trackX = driver.x === void 0 || driver.x === "mouse";
+					const trackY = driver.y === void 0 || driver.y === "mouse";
 					let finalX;
 					let finalY;
 					if (trackX) {
@@ -1866,7 +2102,7 @@ function shaderRenderer() {
 						state.velocityX = vx;
 						finalX = nx;
 					} else {
-						finalX = driverConfig.x;
+						finalX = driver.x;
 						state.velocityX = 0;
 					}
 					if (trackY) {
@@ -1875,274 +2111,324 @@ function shaderRenderer() {
 						state.velocityY = vy;
 						finalY = ny;
 					} else {
-						finalY = driverConfig.y;
+						finalY = driver.y;
 						state.velocityY = 0;
 					}
-					const reach = driverConfig.reach ?? 1;
-					const originX = driverConfig.originX ?? .5;
-					const originY = driverConfig.originY ?? .5;
-					const xSign = driverConfig.invertX ? -1 : 1;
-					const ySign = driverConfig.invertY ? -1 : 1;
+					const reach = driver.reach ?? 1;
+					const originX = driver.originX ?? .5;
+					const originY = driver.originY ?? .5;
+					const xSign = driver.invertX ? -1 : 1;
+					const ySign = driver.invertY ? -1 : 1;
 					const scaledX = originX + xSign * (finalX - originX) * reach;
 					const scaledY = originY + ySign * (finalY - originY) * reach;
-					const gpuX = scaledX;
-					const gpuY = 1 - scaledY;
-					state.smoothedUniform.value.set(gpuX, gpuY);
-				} else if (driverConfig.type === "mouse") {
-					const smoothing = driverConfig.smoothing ?? 0;
-					const momentum = driverConfig.momentum ?? 0;
-					const target = driverConfig.axis === "x" ? pointerX : pointerY;
+					let localX = scaledX;
+					let localY = scaledY;
+					const bb = node.metadata.boundingBox;
+					if (bb && node.boundingBoxDeclaration?.supportsResizeFit && bboxActive(node)) {
+						const p = boundingBoxToUVParams(bb, pxResWidth(), pxResHeight());
+						const bl = screenUVToBoxLocal$1(scaledX, scaledY, {
+							centerX: p.centerX,
+							centerY: p.centerY,
+							halfWidthUV: p.halfWidthUV,
+							halfHeightUV: p.halfHeightUV,
+							rotationDeg: p.rotation,
+							aspectRatio: aspectRatio()
+						});
+						localX = bl.x;
+						localY = bl.y;
+					}
+					state.liveX = localX;
+					state.liveY = localY;
+					const h = node._liveHandles?.[`_smoothed_${propName}`];
+					if (h instanceof FieldHandle) h.setComponents(localX, 1 - localY);
+				} else if (driver.type === "mouse") {
+					const smoothing = driver.smoothing ?? 0;
+					const momentum = driver.momentum ?? 0;
+					const target = driver.axis === "x" ? pointerX : pointerY;
 					const [nx, vx] = applySpring(state.currentX, state.velocityX, target, smoothing, momentum, deltaTime);
 					state.currentX = nx;
 					state.velocityX = vx;
-					state.smoothedUniform.value = Math.max(.001, nx);
+					const smoothed01 = Math.max(.001, nx);
+					const mv = node.mapValues[propName];
+					const resolved = mv ? mv.outputMin + (mv.outputMax - mv.outputMin) * Math.pow(smoothed01, Math.pow(2, -mv.curve * 2)) : smoothed01;
+					state.liveScalar = resolved;
+					writeSyntheticScalar(node, `_smoothed_${propName}`, resolved);
 				}
 			}
-			const animState = nodeInfo.autoAnimateState;
-			if (!animState) continue;
-			for (const propName in animState) {
-				const state = animState[propName];
-				const driverConfig = maps[propName];
-				if (!driverConfig || driverConfig.type !== "auto-animate") continue;
-				const globalT = globalElapsedTime * (driverConfig.speed ?? 1) * .2;
+			for (const propName in node.autoAnimateState) {
+				const driver = maps[propName];
+				if (!driver || driver.type !== "auto-animate") continue;
+				const globalT = globalElapsedTime * (driver.speed ?? 1) * .2;
 				let phase;
-				if (driverConfig.mode === "loop") phase = applyEasing((globalT % 1 + 1) % 1, driverConfig.easing ?? driverConfig.waveform ?? "sine");
+				const easing = driver.easing ?? driver.waveform ?? "sine";
+				if (driver.mode === "loop") phase = applyEasing((globalT % 1 + 1) % 1, easing);
 				else {
 					const t01 = (globalT % 1 + 1) % 1;
-					phase = applyEasing(t01 < .5 ? t01 * 2 : (1 - t01) * 2, driverConfig.easing ?? driverConfig.waveform ?? "sine");
+					phase = applyEasing(t01 < .5 ? t01 * 2 : (1 - t01) * 2, easing);
 				}
-				const { outputMin, outputMax } = driverConfig;
+				const mv = node.mapValues[propName];
+				const outputMin = mv ? mv.outputMin : resolveDynamicBound(node, propName, driver.outputMin);
+				const outputMax = mv ? mv.outputMax : resolveDynamicBound(node, propName, driver.outputMax);
 				const newValue = outputMin + phase * (outputMax - outputMin);
-				const uniformDefinition = nodeInfo.uniforms?.[propName];
-				if (uniformDefinition?.compileTimeWhen && material && isInitialized && currentWidth > 0 && currentHeight > 0) {
-					const prev = uniformDefinition._lastCompiledValue;
-					if (uniformDefinition.compileTimeWhen(prev, newValue)) {
-						uniformDefinition._lastCompiledValue = newValue;
-						if (materialUpdateBatchRAF === null) materialUpdateBatchRAF = requestAnimationFrame(() => {
-							materialUpdateBatchRAF = null;
-							updateMaterial();
-						});
+				const u = node.uniforms[propName];
+				if (u?.compileTimeWhen) {
+					const prev = u._lastCompiledValue;
+					if (u.compileTimeWhen(prev, newValue)) {
+						u._lastCompiledValue = newValue;
+						markStructuralDirty();
 					}
 				}
-				state.smoothedUniform.value = newValue;
+				writeSyntheticScalar(node, `_smoothed_${propName}`, newValue);
 			}
 		}
 	};
-	const executeComputeDispatches = () => {
-		for (const id of activeCompute) {
-			const nodeInfo = nodeRegistry.nodes.get(id);
-			if (!nodeInfo || !nodeInfo.computeGetNodes) continue;
-			try {
-				const nodes = nodeInfo.computeGetNodes(frameParams);
-				if (nodes) for (const node of nodes) renderer.compute(node);
-			} catch (e) {
-				console.error(`Error dispatching compute for node ${nodeInfo.id}:`, e);
+	const updateAnimatedTime = () => {
+		const dt = frameParams.deltaTime;
+		for (const node of nodes.values()) {
+			const at = node.definition.animatedTime;
+			if (at) {
+				const speedU = node.uniforms[at.speed];
+				const speed = speedU ? Number(speedU.value) || 0 : 0;
+				const state = getAnimatedTimeState(animatedTimeKey(node));
+				state.advance(dt, speed);
+				writeSyntheticScalar(node, "_animTime", state.value);
+			}
+			const extras = node.definition.extraAnimatedTimes;
+			if (extras) for (const [key, speedProp] of Object.entries(extras)) {
+				const su = node.uniforms[speedProp];
+				const sp = su ? Number(su.value) || 0 : 0;
+				const st = getAnimatedTimeState(extraAnimatedTimeKey(node, speedProp));
+				st.advance(dt, sp);
+				writeSyntheticScalar(node, `_animTime_${key}`, st.value);
 			}
 		}
 	};
-	const executeBeforeRenderCallbacks = () => {
-		for (const id of activeBeforeRender) {
-			const nodeInfo = nodeRegistry.nodes.get(id);
-			if (!nodeInfo) continue;
-			for (const callback of nodeInfo.beforeRenderCallbacks) try {
-				callback(frameParams);
-			} catch (e) {
-				console.error(`Error executing before render callback for node ${nodeInfo.id}:`, e);
+	const clampToTextureCap$1 = (w, h) => clampToTextureCap(w, h, {
+		maxTextureDim: cachedMaxTextureDim,
+		pixelRatio,
+		viewportWidth: typeof window !== "undefined" ? window.innerWidth : w,
+		viewportHeight: typeof window !== "undefined" ? window.innerHeight : h
+	});
+	const basePixelRatio = () => {
+		const deviceRatio = (typeof window !== "undefined" ? window.devicePixelRatio : 1) || 1;
+		return Math.min(deviceRatio, maxPixelRatioForDevice());
+	};
+	const applyRendererDimensions = (width, height, rawWidth, rawHeight) => {
+		currentWidth = width;
+		currentHeight = height;
+		logicalWidth = rawWidth;
+		logicalHeight = rawHeight;
+		setShaderCanvasDimensions(rawWidth, rawHeight);
+		if (!hasInitialDimensions) {
+			hasInitialDimensions = true;
+			if (nodes.size > 0) markStructuralDirty();
+		}
+		const { width: bufW, height: bufH } = bufferSize();
+		if (canvasElement) {
+			canvasElement.width = bufW;
+			canvasElement.height = bufH;
+		}
+		for (const c of liveCompositions) c.passManager.resize(bufW, bufH);
+		for (const c of liveCompositions) for (const cb of c.ir.onResize) try {
+			cb({
+				width: bufW,
+				height: bufH
+			});
+		} catch (e) {
+			console.error("[gpu] composition onResize error:", e);
+		}
+		for (const node of nodes.values()) {
+			if (transformActive(node)) writeSyntheticScalar(node, "_xform_aspectRatio", aspectRatio());
+			if (bboxActive(node)) {
+				const bb = bboxFieldValues(node);
+				if (bb) for (const [k, v] of Object.entries(bb)) writeSyntheticScalar(node, `_bbox_${k}`, v);
 			}
+			reresolveDimensionalUniforms(node);
 		}
+		lastRenderTime = 0;
+		renderFrame();
 	};
-	const executeAfterRenderCallbacks = () => {
-		for (const id of activeAfterRender) {
-			const nodeInfo = nodeRegistry.nodes.get(id);
-			if (!nodeInfo) continue;
-			for (const callback of nodeInfo.afterRenderCallbacks) try {
-				callback(frameParams);
-			} catch (e) {
-				console.error(`Error executing after render callback for node ${nodeInfo.id}:`, e);
+	const updateRendererDimensions = (width, height) => {
+		if (width <= 0 || height <= 0) return;
+		if (width === lastRequestedWidth && height === lastRequestedHeight) return;
+		lastRequestedWidth = width;
+		lastRequestedHeight = height;
+		pendingResize = {
+			width,
+			height
+		};
+		if (!isResizeScheduled && typeof requestAnimationFrame === "function") {
+			isResizeScheduled = true;
+			requestAnimationFrame(() => {
+				isResizeScheduled = false;
+				if (!pendingResize) return;
+				const raw = pendingResize;
+				pendingResize = null;
+				const { width: cw, height: ch } = clampToTextureCap$1(raw.width, raw.height);
+				applyRendererDimensions(cw, ch, raw.width, raw.height);
+			});
+		}
+	};
+	const handleResize = (entries) => {
+		const entry = entries[0];
+		if (!entry) return;
+		let width, height;
+		if (entry.contentBoxSize) {
+			const boxSize = Array.isArray(entry.contentBoxSize) ? entry.contentBoxSize[0] : entry.contentBoxSize;
+			if (boxSize) {
+				width = Math.round(boxSize.inlineSize);
+				height = Math.round(boxSize.blockSize);
+			} else {
+				width = Math.round(entry.contentRect.width);
+				height = Math.round(entry.contentRect.height);
 			}
+		} else {
+			width = Math.round(entry.contentRect.width);
+			height = Math.round(entry.contentRect.height);
 		}
+		if (width === 0 || height === 0) return;
+		updateRendererDimensions(width, height);
 	};
-	const renderAndWait = async () => {
-		if (!canRender()) throw new Error("Renderer is not ready");
-		const wasAnimating = animationFrameId !== null;
-		if (wasAnimating) stopAnimation();
-		lastRenderTime = 0;
-		renderFrame();
-		if (renderer instanceof WebGPURenderer) try {
-			const backend = renderer.backend;
-			if (backend?.device) await backend.device.queue.onSubmittedWorkDone();
+	const handleVisibilityChange = (entries) => {
+		const entry = entries[0];
+		if (!entry) return;
+		isVisible = entry.isIntersecting;
+	};
+	const canRender = () => isInitialized && !!root && !!context && currentWidth > 0 && currentHeight > 0;
+	const writeSystemUniforms = (store) => {
+		const sys = store.systemHandles;
+		const { width, height } = bufferSize();
+		const bpr = basePixelRatio();
+		const set = (name, value) => {
+			const h = sys[name];
+			if (h instanceof FieldHandle) h.value = value;
+		};
+		set("time", globalElapsedTime);
+		set("viewportSize", [width, height]);
+		set("logicalViewportSize", [pxResWidth() * bpr, pxResHeight() * bpr]);
+		set("aspect", width / Math.max(1, height));
+		set("pointer", [pointerX, pointerY]);
+		set("pointerActive", pointerActive ? 1 : 0);
+	};
+	const runCallbacks = (callbacks) => {
+		for (const cb of callbacks) try {
+			cb(frameParams);
 		} catch (e) {
-			await new Promise((resolve) => setTimeout(resolve, 16));
+			console.error("[gpu] render callback error:", e);
 		}
-		if (wasAnimating) startAnimation();
 	};
 	const renderFrameInternal = (overrideDeltaTime) => {
-		if (pendingNodeRemoval) return;
 		if (!canRender()) return;
-		const frameStartTime = enablePerformanceTracking ? performance.now() : 0;
-		const currentTime = frameStartTime || performance.now();
-		let cappedDeltaTime;
-		if (overrideDeltaTime !== void 0) cappedDeltaTime = overrideDeltaTime;
+		const now = performance.now();
+		let delta;
+		if (overrideDeltaTime !== void 0) delta = overrideDeltaTime;
 		else {
-			const deltaTime = lastRenderTime > 0 ? (currentTime - lastRenderTime) / 1e3 : .016;
-			const OFF_SCREEN_FPS_INTERVAL = 1e3;
-			const MIN_FRAME_INTERVAL = 1e3 / 60 - 1;
-			if (lastRenderTime > 0) {
-				const timeSinceLastRender = currentTime - lastRenderTime;
-				if (!isVisible && !forceFullFrameRate && timeSinceLastRender < OFF_SCREEN_FPS_INTERVAL) return;
-				if ((isVisible || forceFullFrameRate) && timeSinceLastRender < MIN_FRAME_INTERVAL) return;
-			}
-			cappedDeltaTime = Math.min(deltaTime, .1);
+			const gate = frameGate(now, {
+				lastRenderTime,
+				isVisible,
+				forceFullFrameRate
+			});
+			if (!gate.render) return;
+			delta = gate.deltaTime;
 		}
-		lastRenderTime = currentTime;
+		lastRenderTime = now;
 		if (enablePerformanceTracking) performance.mark("shader-cpu-start");
-		frameParams.deltaTime = cappedDeltaTime;
+		frameParams.deltaTime = delta;
 		frameParams.pointer.x = pointerX;
 		frameParams.pointer.y = pointerY;
 		frameParams.pointerActive = pointerActive;
 		frameParams.dimensions.width = currentWidth;
 		frameParams.dimensions.height = currentHeight;
-		updateMouseDrivers();
-		executeComputeDispatches();
-		executeBeforeRenderCallbacks();
-		try {
-			if (isUpdatingMaterial) return;
-			if (enablePerformanceTracking) performance.mark("shader-gpu-start");
-			renderer.render(scene, camera);
-			if (firstRenderPending && !hasEmittedReady) {
-				hasEmittedReady = true;
-				firstRenderPending = false;
-				if (onReadyCallback) queueMicrotask(onReadyCallback);
-			}
-			executeAfterRenderCallbacks();
-			if (enablePerformanceTracking) {
-				performance.mark("shader-gpu-end");
-				let recordedTrueGpuTime = false;
-				if (renderer instanceof WebGPURenderer) try {
-					const backend = renderer.backend;
-					if (backend && backend.get && backend.get(renderer)) {
-						const renderContext = backend.get(renderer);
-						if (renderContext?.timestampQuery) {
-							const gpuTime = renderContext.timestampQuery.getResult();
-							if (gpuTime !== null && gpuTime !== void 0) {
-								performanceTracker.recordGpuTime(gpuTime / 1e6);
-								recordedTrueGpuTime = true;
-							}
-						}
-					}
-				} catch (e) {}
+		let built = null;
+		let renderComp = null;
+		runFrameSequence({
+			updateDrivers: () => {
+				updateMouseDrivers();
+				updateAnimatedTime();
+				updateChildBounds();
+			},
+			ensureComposition: () => {
+				if (structuralDirty || desiredHash === null) {
+					desiredHash = computeStructuralHash();
+					structuralDirty = false;
+				}
+				if (desiredHash === null) return false;
+				built = pipelineCache.getOrBuild(desiredHash, () => buildComposition(desiredHash));
+				bindComposition(built);
+				return !!boundComposition;
+			},
+			beforeRender: () => runCallbacks(boundComposition.ir.onBeforeRender),
+			flush: () => {
+				writeSystemUniforms(boundComposition.store);
+				boundComposition.store.flush();
+			},
+			render: () => {
 				try {
-					if (!recordedTrueGpuTime) {
-						performance.measure("shader-gpu-time", "shader-gpu-start", "shader-gpu-end");
-						const gpuMeasure = performance.getEntriesByName("shader-gpu-time")[0];
-						if (gpuMeasure) performanceTracker.recordGpuTime(gpuMeasure.duration);
-						performance.clearMeasures("shader-gpu-time");
+					if (enablePerformanceTracking) performance.mark("shader-gpu-start");
+					renderComp = pipelineCache.renderValue ?? built;
+					renderComp?.passManager.render(context, frameParams);
+					if (enablePerformanceTracking) {
+						performance.mark("shader-gpu-end");
+						try {
+							performance.measure("shader-gpu-time", "shader-gpu-start", "shader-gpu-end");
+							const gpuMeasure = performance.getEntriesByName("shader-gpu-time")[0];
+							if (gpuMeasure) performanceTracker.recordGpuTime(gpuMeasure.duration);
+							performance.clearMeasures("shader-gpu-time");
+							performance.clearMarks("shader-gpu-start");
+							performance.clearMarks("shader-gpu-end");
+						} catch {}
 					}
-					performance.clearMarks("shader-gpu-start");
-					performance.clearMarks("shader-gpu-end");
-				} catch (e) {}
-			}
-			if (enablePerformanceTracking) {
-				performance.mark("shader-cpu-end");
-				try {
-					performance.measure("shader-cpu-time", "shader-cpu-start", "shader-cpu-end");
-					const cpuMeasure = performance.getEntriesByName("shader-cpu-time")[0];
-					if (cpuMeasure) performanceTracker.recordCpuTime(cpuMeasure.duration);
-					performance.clearMarks("shader-cpu-start");
-					performance.clearMarks("shader-cpu-end");
-					performance.clearMeasures("shader-cpu-time");
-				} catch (e) {}
-				const frameTime = performance.now() - frameStartTime;
-				performanceTracker.recordFrame(frameTime);
-			}
-		} catch (error) {
-			console.error("Render frame error:", error);
-		}
+				} catch (error) {
+					console.error("[gpu] render frame error:", error);
+				}
+			},
+			markReady: () => {
+				pipelineCache.markReady(desiredHash);
+				if (firstRenderPending && !hasEmittedReady) {
+					hasEmittedReady = true;
+					firstRenderPending = false;
+					if (onReadyCallback) queueMicrotask(onReadyCallback);
+				}
+			},
+			afterRender: () => runCallbacks((renderComp ?? boundComposition).ir.onAfterRender)
+		});
+		if (enablePerformanceTracking) {
+			performance.mark("shader-cpu-end");
+			try {
+				performance.measure("shader-cpu-time", "shader-cpu-start", "shader-cpu-end");
+				const cpuMeasure = performance.getEntriesByName("shader-cpu-time")[0];
+				if (cpuMeasure) performanceTracker.recordCpuTime(cpuMeasure.duration);
+				performance.clearMarks("shader-cpu-start");
+				performance.clearMarks("shader-cpu-end");
+				performance.clearMeasures("shader-cpu-time");
+			} catch {}
+		}
+		performanceTracker.recordFrame(performance.now() - now);
 	};
 	const renderFrame = () => renderFrameInternal(void 0);
+	const renderAndWait = async () => {
+		if (!canRender()) throw new Error("Renderer is not ready");
+		const wasAnimating = frameLoop.running;
+		if (wasAnimating) stopAnimation();
+		lastRenderTime = 0;
+		renderFrame();
+		if (root) await awaitGpuIdle(root);
+		if (wasAnimating) startAnimation();
+	};
 	const renderSyntheticFrame = async (deltaSeconds) => {
 		renderFrameInternal(deltaSeconds);
-		if (renderer instanceof WebGPURenderer) {
-			const backend = renderer.backend;
-			if (backend?.device) await backend.device.queue.onSubmittedWorkDone();
-		}
-	};
-	const updatePerformanceNodeCounts = () => {
-		const nodeCount = Math.max(0, nodeRegistry.nodes.size - 1);
-		const rttNodeCount = actualRTTOperations;
-		performanceTracker.updateNodeCounts(nodeCount, rttNodeCount);
-	};
-	const getPerformanceStats = () => {
-		updatePerformanceNodeCounts();
-		const rendererInfo = renderer?.info;
-		return performanceTracker.getStats(rendererInfo);
+		if (root) await awaitGpuIdle(root);
 	};
 	const startAnimation = () => {
-		if (animationFrameId || !shouldAnimate) return;
+		if (frameLoop.running || !shouldAnimate) return;
 		performanceTracker.setRendering(true);
-		if (renderer && "setAnimationLoop" in renderer && typeof renderer.setAnimationLoop === "function") {
-			renderer.setAnimationLoop(() => {
-				renderFrame();
-			});
-			animationFrameId = 1;
-		} else {
-			const animate = () => {
-				renderFrame();
-				animationFrameId = requestAnimationFrame(animate);
-			};
-			animate();
-		}
+		frameLoop.start();
 	};
 	const stopAnimation = () => {
-		if (animationFrameId) {
-			if (renderer && "setAnimationLoop" in renderer && typeof renderer.setAnimationLoop === "function") renderer.setAnimationLoop(null);
-			else cancelAnimationFrame(animationFrameId);
-			animationFrameId = null;
-		}
+		if (!frameLoop.running) return;
+		frameLoop.stop();
 		performanceTracker.setRendering(false);
 	};
-	let mouseListenersNeeded = false;
-	const updateMouseListenerRegistration = () => {
-		let needsMouse = false;
-		for (const nodeInfo of nodeRegistry.nodes.values()) {
-			if (nodeInfo.usesPointer) {
-				needsMouse = true;
-				break;
-			}
-			if (!nodeInfo.metadata.maps) continue;
-			for (const driver of Object.values(nodeInfo.metadata.maps)) if (driver && typeof driver === "object" && "type" in driver) {
-				const t = driver.type;
-				if (t === "mouse" || t === "mouse-position") {
-					needsMouse = true;
-					break;
-				}
-			}
-			if (needsMouse) break;
-		}
-		if (needsMouse && !mouseListenersNeeded) {
-			mouseListenersNeeded = true;
-			if (!globalEventUnregister && canvasElement) {
-				globalEventUnregister = globalEventManager.register({
-					onMouseMove: globalMouseMoveHandler,
-					onTouchMove: globalTouchMoveHandler,
-					onMouseUp: globalMouseUpHandler,
-					onTouchEnd: globalTouchEndHandler
-				});
-				canvasElement.addEventListener("mousedown", canvasMouseDownHandler);
-				canvasElement.addEventListener("touchstart", canvasTouchStartHandler);
-			}
-		} else if (!needsMouse && mouseListenersNeeded) {
-			mouseListenersNeeded = false;
-			if (globalEventUnregister) {
-				globalEventUnregister();
-				globalEventUnregister = null;
-			}
-			if (canvasElement) {
-				canvasElement.removeEventListener("mousedown", canvasMouseDownHandler);
-				canvasElement.removeEventListener("touchstart", canvasTouchStartHandler);
-			}
-		}
-	};
 	const updatePointerCoords = (event) => {
 		if (!canvasElement) return;
 		cachedCanvasRect = canvasElement.getBoundingClientRect();
@@ -2156,164 +2442,144 @@ function shaderRenderer() {
 			clientX = event.clientX;
 			clientY = event.clientY;
 		}
-		const x = (clientX - cachedCanvasRect.left) / cachedCanvasRect.width;
-		const y = (clientY - cachedCanvasRect.top) / cachedCanvasRect.height;
-		pointerX = x;
-		pointerY = y;
+		pointerX = (clientX - cachedCanvasRect.left) / cachedCanvasRect.width;
+		pointerY = (clientY - cachedCanvasRect.top) / cachedCanvasRect.height;
 	};
-	const globalMouseMoveHandler = (event) => {
+	const onPointerMove = (event) => {
 		if (!isInitialized || !canvasElement) return;
 		updatePointerCoords(event);
+		requestRender();
 	};
-	const globalTouchMoveHandler = (event) => {
+	const onTouchMove = (event) => {
 		if (!isInitialized || !canvasElement) return;
 		updatePointerCoords(event);
+		requestRender();
 	};
-	const globalMouseUpHandler = () => {
+	const onPointerUp = () => {
 		if (!isInitialized) return;
 		pointerActive = false;
-		if (!animationFrameId) renderFrame();
+		requestRender();
 	};
-	const globalTouchEndHandler = () => {
+	const onTouchEnd = () => {
 		if (!isInitialized) return;
 		pointerActive = false;
-		if (!animationFrameId) renderFrame();
+		requestRender();
 	};
-	const canvasMouseDownHandler = () => {
+	const onPointerDown = () => {
 		pointerActive = true;
-		if (!animationFrameId) renderFrame();
+		requestRender();
 	};
-	const canvasTouchStartHandler = () => {
+	const onTouchStart = () => {
 		pointerActive = true;
-		if (!animationFrameId) renderFrame();
+		requestRender();
+	};
+	const updateMouseListenerRegistration = () => {
+		let needsMouse = false;
+		for (const node of nodes.values()) {
+			if (node.usesPointer) {
+				needsMouse = true;
+				break;
+			}
+			if (shapeConfigUsesMouse(node.uniforms?.shape?.value)) {
+				needsMouse = true;
+				break;
+			}
+			if (!node.metadata.maps) continue;
+			for (const driver of Object.values(node.metadata.maps)) if (driver && typeof driver === "object" && "type" in driver) {
+				const t = driver.type;
+				if (t === "mouse" || t === "mouse-position") {
+					needsMouse = true;
+					break;
+				}
+			}
+			if (needsMouse) break;
+		}
+		if (needsMouse && !mouseListenersNeeded) {
+			mouseListenersNeeded = true;
+			if (!globalEventUnregister && canvasElement) {
+				globalEventUnregister = globalEventManager.register({
+					onMouseMove: onPointerMove,
+					onTouchMove,
+					onMouseUp: onPointerUp,
+					onTouchEnd
+				});
+				canvasElement.addEventListener("mousedown", onPointerDown);
+				canvasElement.addEventListener("touchstart", onTouchStart);
+			}
+		} else if (!needsMouse && mouseListenersNeeded) {
+			mouseListenersNeeded = false;
+			if (globalEventUnregister) {
+				globalEventUnregister();
+				globalEventUnregister = null;
+			}
+			if (canvasElement) {
+				canvasElement.removeEventListener("mousedown", onPointerDown);
+				canvasElement.removeEventListener("touchstart", onTouchStart);
+			}
+		}
 	};
 	const processQueuedRegistrations = () => {
 		if (pendingRegistrationQueue.length === 0) return;
 		const queue = [...pendingRegistrationQueue];
 		pendingRegistrationQueue = [];
-		for (const { id, fragmentNodeFunc, parentId, metadata, uniforms, componentDefinition, domCanvas } of queue) if (fragmentNodeFunc) registerNode(id, fragmentNodeFunc, parentId, metadata, uniforms, componentDefinition, domCanvas);
+		for (const q of queue) registerNode(q.id, q.definition.fragment, q.parentId, q.metadata, q.uniforms, q.definition, q.domCanvas);
+	};
+	const fireDeviceLost = (reason) => {
+		if (deviceLostFired) return;
+		deviceLostFired = true;
+		try {
+			stopAnimation();
+		} catch {}
+		if (onDeviceLostCallback) queueMicrotask(() => {
+			try {
+				onDeviceLostCallback?.(reason);
+			} catch (e) {
+				console.error("[gpu] onDeviceLost callback threw:", e);
+			}
+		});
 	};
-	const initialize = async ({ canvas, resizeTarget, enablePerformanceTracking: enableTracking = true, colorSpace = "p3-linear", toneMapping = "linear", context, gpu, forceFullFrameRate: forceFullFps = false, observeElement: shouldObserveElement = true }) => {
+	const initialize = async (options) => {
+		if (options.context !== void 0) throw new Error("[gpu] initialize({ context }) is not supported — this renderer is WebGPU-only. Remove the WebGL `context` option.");
 		if (isInitialized || isInitializing) return;
+		const { canvas, resizeTarget, enablePerformanceTracking: enableTracking = false, colorSpace = "p3-linear", toneMapping = "linear", gpu, forceFullFrameRate: forceFullFps = false, observeElement: shouldObserveElement = true, timeOrigin: initialTimeOrigin } = options;
+		if (initialTimeOrigin != null) sharedTimeOrigin = initialTimeOrigin;
 		enablePerformanceTracking = enableTracking;
 		forceFullFrameRate = forceFullFps;
 		rendererColorSpace = colorSpace;
-		setColorSpaceMode(colorSpace);
+		rendererToneMapping = toneMapping;
 		isInitializing = true;
 		initializationAbortController = new AbortController();
-		const localAbortController = initializationAbortController;
+		const abort = initializationAbortController;
 		try {
+			setColorSpaceModeFn = setColorSpaceModeGpu;
+			setColorSpaceModeFn(colorSpace);
+			if (abort.signal.aborted) return;
 			canvasElement = canvas;
-			scene = new Scene();
-			scene.background = null;
-			camera = new OrthographicCamera(-1, 1, 1, -1, .1, 10);
-			camera.position.z = 1;
-			camera.lookAt(0, 0, 0);
-			unloadHandler = () => {
-				cleanup();
-			};
-			window.addEventListener("beforeunload", unloadHandler);
-			windowResizeHandler = () => {
-				if (lastRequestedWidth > 0 && lastRequestedHeight > 0) {
-					const rawW = lastRequestedWidth;
-					const rawH = lastRequestedHeight;
-					lastRequestedWidth = 0;
-					lastRequestedHeight = 0;
-					updateRendererDimensions(rawW, rawH);
-				}
-			};
-			window.addEventListener("resize", windowResizeHandler, { passive: true });
-			if (localAbortController.signal.aborted) return;
-			if (context) {
-				console.log("[Shaders] Using provided WebGL context");
-				renderer = new WebGLRenderer({
-					canvas,
-					context,
-					antialias: true,
-					alpha: true,
-					depth: false,
-					stencil: true,
-					powerPreference: "high-performance"
-				});
-				const wglLost = (e) => {
-					e.preventDefault();
-					fireDeviceLost("webglcontextlost");
-				};
-				canvas.addEventListener("webglcontextlost", wglLost, false);
-				canvasContextLossUnregister = () => {
-					canvas.removeEventListener("webglcontextlost", wglLost, false);
-				};
-			} else try {
-				const rendererOptions = {
-					canvas,
-					antialias: true,
-					alpha: true,
-					depth: false,
-					powerPreference: "high-performance"
+			rootCtx = await acquireRoot({
+				device: gpu?.device,
+				adapter: gpu?.adapter,
+				onDeviceLost: (info) => fireDeviceLost(info.message || info.reason || "unknown")
+			});
+			if (abort.signal.aborted) return;
+			root = rootCtx.root;
+			pixelRatio = basePixelRatio();
+			const lim = root.device.limits?.maxTextureDimension2D;
+			if (typeof lim === "number" && lim > 0) cachedMaxTextureDim = lim;
+			textureManager = createTextureManager(root);
+			dispatcher = createComputeDispatcher(root);
+			if (typeof window !== "undefined") {
+				unloadHandler = () => cleanup();
+				window.addEventListener("beforeunload", unloadHandler);
+				windowResizeHandler = () => {
+					if (lastRequestedWidth > 0 && lastRequestedHeight > 0) {
+						const rawW = lastRequestedWidth;
+						const rawH = lastRequestedHeight;
+						lastRequestedWidth = 0;
+						lastRequestedHeight = 0;
+						updateRendererDimensions(rawW, rawH);
+					}
 				};
-				if (gpu?.device) rendererOptions.device = gpu.device;
-				renderer = new WebGPURenderer(rendererOptions);
-				rendererInitSettled = false;
-				rendererInitPromise = renderer.init();
-				rendererInitPromise.finally(() => {
-					rendererInitSettled = true;
-				}).catch(() => {});
-				await rendererInitPromise;
-				if (localAbortController.signal.aborted) return;
-				try {
-					const device = renderer.backend?.device;
-					if (device?.lost && typeof device.lost.then === "function") device.lost.then((info) => {
-						if (info?.reason === "destroyed") return;
-						fireDeviceLost(info?.message || info?.reason || "unknown");
-					}).catch(() => {});
-				} catch (hookErr) {
-					console.warn("[Shaders] could not attach WebGPU device.lost handler", hookErr);
-				}
-			} catch (e) {
-				if (localAbortController.signal.aborted) return;
-				console.warn("[Shaders] WebGPU initialization failed, falling back to WebGL:", e);
-				try {
-					const webglOptions = {
-						canvas,
-						antialias: true,
-						alpha: true,
-						depth: false,
-						stencil: true,
-						powerPreference: "high-performance"
-					};
-					if (context) webglOptions.context = context;
-					renderer = new WebGLRenderer(webglOptions);
-					if (localAbortController.signal.aborted) return;
-					const wglLost = (e$1) => {
-						e$1.preventDefault();
-						fireDeviceLost("webglcontextlost");
-					};
-					canvas.addEventListener("webglcontextlost", wglLost, false);
-					canvasContextLossUnregister = () => {
-						canvas.removeEventListener("webglcontextlost", wglLost, false);
-					};
-				} catch (webglError) {
-					if (localAbortController.signal.aborted) return;
-					console.error("[Shaders] Both WebGPU and WebGL initialization failed:", webglError);
-					return;
-				}
-			}
-			if (localAbortController.signal.aborted) return;
-			renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
-			renderer.outputColorSpace = SRGBColorSpace;
-			setToneMapping(toneMapping);
-			material = new MeshBasicNodeMaterial({ transparent: true });
-			material.fragmentNode = vec4(0, 0, 0, 0);
-			mesh = new Mesh(new PlaneGeometry(2, 2), material);
-			scene.add(mesh);
-			if (shouldObserveElement) {
-				const elementToObserve = resizeTarget ?? canvas.parentElement;
-				if (elementToObserve) {
-					resizeObserver = new ResizeObserver(handleResize);
-					resizeObserver.observe(elementToObserve);
-				} else console.warn("[Shaders] No element available for resize observation — use resize() manually");
-				intersectionObserver = new IntersectionObserver(handleVisibilityChange, { threshold: 0 });
-				intersectionObserver.observe(canvas);
+				window.addEventListener("resize", windowResizeHandler, { passive: true });
 			}
 			const rect = canvas.getBoundingClientRect();
 			cachedCanvasRect = rect;
@@ -2326,49 +2592,43 @@ function shaderRenderer() {
 			if (roundedRawWidth > 0 && roundedRawHeight > 0) {
 				lastRequestedWidth = roundedRawWidth;
 				lastRequestedHeight = roundedRawHeight;
-				const { width: clampedWidth, height: clampedHeight } = clampToTextureCap(roundedRawWidth, roundedRawHeight);
-				currentWidth = clampedWidth;
-				currentHeight = clampedHeight;
+				const { width: cw, height: ch } = clampToTextureCap$1(roundedRawWidth, roundedRawHeight);
+				currentWidth = cw;
+				currentHeight = ch;
+				logicalWidth = roundedRawWidth;
+				logicalHeight = roundedRawHeight;
 				hasInitialDimensions = true;
-				renderer.setSize(clampedWidth, clampedHeight, false);
-				const aspectRatio = clampedWidth / clampedHeight;
-				const frustumHeight = 2;
-				const frustumWidth = frustumHeight * aspectRatio;
-				camera.left = -frustumWidth / 2;
-				camera.right = frustumWidth / 2;
-				camera.top = frustumHeight / 2;
-				camera.bottom = -frustumHeight / 2;
-				camera.updateProjectionMatrix();
-				mesh.scale.set(frustumWidth, frustumHeight, 1);
-				renderFrame();
+				setShaderCanvasDimensions(roundedRawWidth, roundedRawHeight);
+				const { width: bufW, height: bufH } = bufferSize();
+				canvas.width = bufW;
+				canvas.height = bufH;
 			} else hasInitialDimensions = false;
-			if (shouldAnimate) startAnimation();
-			if (!localAbortController.signal.aborted) {
-				try {
-					if (renderer.backend?.isWebGPUBackend === true) {
-						const lim = (renderer.backend?.device)?.limits?.maxTextureDimension2D;
-						if (typeof lim === "number" && lim > 0) cachedMaxTextureDim = lim;
-					} else {
-						const lim = renderer.capabilities?.maxTextureSize;
-						if (typeof lim === "number" && lim > 0) cachedMaxTextureDim = lim;
-					}
-				} catch {}
-				if (lastRequestedWidth > 0 && lastRequestedHeight > 0) {
-					const rawW = lastRequestedWidth;
-					const rawH = lastRequestedHeight;
-					lastRequestedWidth = 0;
-					lastRequestedHeight = 0;
-					updateRendererDimensions(rawW, rawH);
+			context = configureCanvasContext(root, canvas);
+			if (shouldObserveElement && typeof ResizeObserver !== "undefined") {
+				const elementToObserve = resizeTarget ?? canvas.parentElement;
+				if (elementToObserve) {
+					resizeObserver = new ResizeObserver(handleResize);
+					resizeObserver.observe(elementToObserve);
+				} else console.warn("[gpu] no element available for resize observation — use resize() manually");
+				if (typeof IntersectionObserver !== "undefined") {
+					intersectionObserver = new IntersectionObserver(handleVisibilityChange, {
+						threshold: 0,
+						rootMargin: "128px"
+					});
+					intersectionObserver.observe(canvas);
 				}
-				isInitialized = true;
-				isRendererReady = true;
-				processQueuedRegistrations();
 			}
+			if (abort.signal.aborted) return;
+			isInitialized = true;
+			isRendererReady = true;
+			processQueuedRegistrations();
+			if (currentWidth > 0 && currentHeight > 0) renderFrame();
+			if (shouldAnimate) startAnimation();
 		} catch (error) {
-			console.error("[Shaders] Initialization error:", error);
+			console.error("[gpu] initialization error:", error);
 		} finally {
 			isInitializing = false;
-			if (initializationAbortController === localAbortController) initializationAbortController = null;
+			if (initializationAbortController === abort) initializationAbortController = null;
 		}
 	};
 	const cleanup = () => {
@@ -2385,109 +2645,87 @@ function shaderRenderer() {
 			globalEventUnregister();
 			globalEventUnregister = null;
 		}
-		if (canvasContextLossUnregister) {
-			canvasContextLossUnregister();
-			canvasContextLossUnregister = null;
-		}
 		if (canvasElement) {
-			canvasElement.removeEventListener("mousedown", canvasMouseDownHandler);
-			canvasElement.removeEventListener("touchstart", canvasTouchStartHandler);
+			canvasElement.removeEventListener("mousedown", onPointerDown);
+			canvasElement.removeEventListener("touchstart", onTouchStart);
 		}
-		if (unloadHandler) {
+		if (unloadHandler && typeof window !== "undefined") {
 			window.removeEventListener("beforeunload", unloadHandler);
 			unloadHandler = null;
 		}
-		if (windowResizeHandler) {
+		if (windowResizeHandler && typeof window !== "undefined") {
 			window.removeEventListener("resize", windowResizeHandler);
 			windowResizeHandler = null;
 		}
+		if (pendingRenderRAF !== null && typeof cancelAnimationFrame === "function") {
+			cancelAnimationFrame(pendingRenderRAF);
+			pendingRenderRAF = null;
+		}
 		stopAnimation();
-		disposePreviousTextures();
-		currentTextures.forEach((texture$1) => {
-			try {
-				if (texture$1?.renderTarget?.dispose) texture$1.renderTarget.dispose();
-			} catch (e) {}
-		});
-		currentTextures.clear();
-		nodeRegistry.nodes.clear();
-		nodeRegistry.rootId = null;
-		nodeRegistry.idToNodeId.clear();
+		pipelineCache.clear();
+		for (const c of [...liveCompositions]) disposeComposition(c);
+		boundComposition = null;
+		try {
+			textureManager?.destroy();
+		} catch {}
+		try {
+			if (rootCtx?.createdDevice) root?.destroy();
+		} catch {}
+		nodes.clear();
+		rootId = null;
 		parentToChildren.clear();
-		activeBeforeRender.clear();
-		activeAfterRender.clear();
-		activeCompute.clear();
-		activeDrivers.clear();
 		pendingRegistrationQueue = [];
 		isRendererReady = false;
-		if (materialUpdateBatchRAF !== null) {
-			cancelAnimationFrame(materialUpdateBatchRAF);
-			materialUpdateBatchRAF = null;
-		}
 		pendingResize = null;
 		isResizeScheduled = false;
-		if (mesh) {
-			if (scene) scene.remove(mesh);
-			try {
-				if (mesh.geometry && typeof mesh.geometry.dispose === "function") mesh.geometry.dispose();
-			} catch (e) {}
-			try {
-				if (mesh.material instanceof Material && typeof mesh.material.dispose === "function") mesh.material.dispose();
-			} catch (e) {}
-		}
-		const disposeRenderer = (r) => {
-			try {
-				if (typeof r.forceContextLoss === "function") r.forceContextLoss();
-			} catch (e) {}
-			if (typeof r.dispose === "function") try {
-				r.dispose();
-			} catch (e) {}
-		};
-		if (renderer) {
-			const rendererToDispose = renderer;
-			const pendingInit = rendererInitPromise;
-			if (pendingInit && !rendererInitSettled) pendingInit.finally(() => disposeRenderer(rendererToDispose)).catch(() => {});
-			else disposeRenderer(rendererToDispose);
-		}
-		rendererInitPromise = null;
-		rendererInitSettled = false;
 		canvasElement = null;
-		renderer = null;
-		camera = null;
-		scene = null;
-		mesh = null;
-		material = null;
+		context = null;
+		textureManager = null;
+		dispatcher = null;
+		root = null;
+		rootCtx = null;
 		isInitialized = false;
 		isInitializing = false;
 		hasInitialDimensions = false;
 		initializationAbortController = null;
 		currentWidth = 0;
 		currentHeight = 0;
+		logicalWidth = 0;
+		logicalHeight = 0;
+		desiredHash = null;
+		structuralDirty = true;
 		isVisible = false;
 		shouldAnimate = true;
 		pointerX = .5;
 		pointerY = .5;
 		pointerActive = false;
-		pendingNodeRemoval = false;
 		onReadyCallback = null;
 		hasEmittedReady = false;
 		firstRenderPending = false;
 		onDeviceLostCallback = null;
 		deviceLostFired = false;
 	};
-	const getRendererType = () => {
-		if (!renderer) return null;
-		return renderer instanceof WebGPURenderer ? "webgpu" : "webgl";
+	const getPerformanceStats = () => {
+		const nodeCount = Math.max(0, nodes.size - 1);
+		const rttNodeCount = boundComposition ? boundComposition.ir.rttPasses.length : 0;
+		performanceTracker.updateNodeCounts(nodeCount, rttNodeCount);
+		const rendererInfo = {
+			render: { calls: boundComposition ? boundComposition.passManager.passCount : 0 },
+			programs: { length: pipelineCache.size },
+			memory: { textures: textureManager ? textureManager.textureCount : 0 }
+		};
+		return performanceTracker.getStats(rendererInfo);
 	};
 	return {
 		initialize,
 		cleanup,
 		registerNode,
 		removeNode,
-		updateUniformValue: updateUniformValue$1,
+		updateUniformValue,
 		updateNodeMetadata,
 		isInitialized: () => isInitialized,
 		resize: (width, height) => {
-			if (!renderer || !camera || !mesh) return;
+			if (!root) return;
 			updateRendererDimensions(width, height);
 		},
 		startAnimation,
@@ -2495,16 +2733,75 @@ function shaderRenderer() {
 		renderAndWait,
 		renderSyntheticFrame,
 		getPerformanceStats,
-		getNodeRegistry: () => ({ nodes: new Map(nodeRegistry.nodes) }),
-		getRendererType,
-		getInternalRenderer: () => renderer ?? null,
+		getLiveDriverValue: (nodeId, propName) => {
+			const state = nodes.get(nodeId)?.mouseDriverState?.[propName];
+			if (!state || state.liveX === void 0 || state.liveY === void 0) return null;
+			return {
+				x: state.liveX,
+				y: state.liveY
+			};
+		},
+		getLiveScalarValue: (nodeId, propName) => {
+			const node = nodes.get(nodeId);
+			if (!node) return null;
+			const driver = node.metadata.maps?.[propName];
+			if (driver?.type === "auto-animate") {
+				const h = node._liveHandles?.[`_smoothed_${propName}`];
+				const v = h instanceof FieldHandle ? h.value : void 0;
+				return typeof v === "number" ? v : null;
+			}
+			if (driver?.type === "mouse") return node.mouseDriverState[propName]?.liveScalar ?? null;
+			return null;
+		},
+		getNodeRegistry: () => ({ nodes: new Map(nodes) }),
+		getRendererType: () => "webgpu",
+		getInternalRenderer: () => root ? {
+			device: root.device,
+			adapter: rootCtx?.adapter,
+			root
+		} : null,
 		setForceFullFrameRate: (enabled) => {
 			const previous = forceFullFrameRate;
 			forceFullFrameRate = enabled;
 			return previous;
 		},
+		beginRecordingResolution: (targetWidth, targetHeight, ratio) => {
+			if (!root || targetWidth <= 0 || targetHeight <= 0) return () => {};
+			const prevRatio = pixelRatio;
+			const prevWidth = currentWidth;
+			const prevHeight = currentHeight;
+			const prevLogicalWidth = logicalWidth;
+			const prevLogicalHeight = logicalHeight;
+			const prevLastRequestedWidth = lastRequestedWidth;
+			const prevLastRequestedHeight = lastRequestedHeight;
+			pixelRatio = ratio;
+			applyRendererDimensions(targetWidth, targetHeight, targetWidth, targetHeight);
+			return () => {
+				if (!root) return;
+				pixelRatio = prevRatio;
+				applyRendererDimensions(prevWidth, prevHeight, prevLogicalWidth, prevLogicalHeight);
+				lastRequestedWidth = prevLastRequestedWidth;
+				lastRequestedHeight = prevLastRequestedHeight;
+			};
+		},
+		setResolutionScale: (scale) => {
+			if (!root) return;
+			const clampedScale = Math.max(.05, Math.min(scale, 1));
+			const targetRatio = Math.max(.01, basePixelRatio() * clampedScale);
+			if (Math.abs(pixelRatio - targetRatio) < .001) return;
+			pixelRatio = targetRatio;
+			const logicalW = logicalWidth || currentWidth;
+			const logicalH = logicalHeight || currentHeight;
+			if (logicalW <= 0 || logicalH <= 0) return;
+			const { width, height } = clampToTextureCap$1(logicalW, logicalH);
+			applyRendererDimensions(width, height, logicalW, logicalH);
+		},
+		setTimeOrigin: (origin) => {
+			sharedTimeOrigin = origin;
+		},
 		setOnReady: (callback) => {
 			onReadyCallback = callback;
+			if (callback && hasEmittedReady) queueMicrotask(callback);
 		},
 		setOnDeviceLost: (callback) => {
 			onDeviceLostCallback = callback;
@@ -2512,25 +2809,80 @@ function shaderRenderer() {
 		__testing: {
 			needsTransformation,
 			findChildNodes,
-			applyMaskIfNeeded,
-			applyNodeTransformation,
-			getNodeRegistry: () => nodeRegistry,
-			getParentToChildren: () => parentToChildren
+			buildFieldInits: (id) => {
+				const node = nodes.get(id);
+				return node ? buildFieldInits(node) : null;
+			},
+			stepAnimatedTime: (deltaTime) => {
+				frameParams.deltaTime = deltaTime;
+				updateAnimatedTime();
+			},
+			getAnimatedTimeValue: (id) => {
+				const node = nodes.get(id);
+				if (!node?.definition.animatedTime) return null;
+				return getAnimatedTimeState(animatedTimeKey(node)).value;
+			},
+			writeExtraField: (id, name, value) => {
+				const node = nodes.get(id);
+				if (node) writeExtraFieldValue(node, name, value);
+			},
+			readExtraField: (id, name) => {
+				const h = nodes.get(id)?._liveHandles?.[name];
+				return h instanceof FieldHandle ? h.value : void 0;
+			},
+			getNodeRegistry: () => ({
+				nodes,
+				rootId,
+				parentToChildren
+			}),
+			getParentToChildren: () => parentToChildren,
+			getPendingRegistrations: () => [...pendingRegistrationQueue],
+			getFrameDiagnostics: () => ({
+				deltaTime: frameParams.deltaTime,
+				pointerX,
+				pointerY,
+				pointerActive,
+				globalElapsedTime,
+				lastRenderTime,
+				isVisible,
+				forceFullFrameRate,
+				sharedTimeOrigin,
+				animating: frameLoop.running,
+				mouseListenersNeeded
+			}),
+			computeStructuralHash,
+			isStructuralDirty: () => structuralDirty,
+			clearStructuralDirty: () => {
+				structuralDirty = false;
+			},
+			setTestReady: (dims) => {
+				isInitialized = true;
+				isRendererReady = true;
+				if (dims) {
+					currentWidth = dims.width;
+					currentHeight = dims.height;
+					logicalWidth = dims.width;
+					logicalHeight = dims.height;
+					hasInitialDimensions = true;
+				}
+				processQueuedRegistrations();
+			}
 		}
 	};
 }
 function createRendererFromJSON(preset, options) {
-	const coreRenderer = shaderRenderer();
+	const coreRenderer = shaderRendererGPU();
 	const componentRegistry = /* @__PURE__ */ new Map();
 	const nodeIdMap = /* @__PURE__ */ new Map();
+	let presetCanvas = null;
 	getAllShaders().forEach((shader) => {
 		componentRegistry.set(shader.definition.name, shader.definition);
 	});
 	async function initialize(canvas) {
+		presetCanvas = canvas;
 		await coreRenderer.initialize({
 			canvas,
 			enablePerformanceTracking: options?.enablePerformanceTracking || false,
-			context: options?.context,
 			gpu: options?.gpu,
 			forceFullFrameRate: options?.forceFullFrameRate || false
 		});
@@ -2553,18 +2905,12 @@ function createRendererFromJSON(preset, options) {
 		registerPresetNodes();
 	}
 	function getGPUContext() {
-		const rendererType = coreRenderer.getRendererType();
-		const internalRenderer = coreRenderer.getInternalRenderer();
-		if (rendererType === "webgpu") return {
+		const internal = coreRenderer.getInternalRenderer();
+		return {
 			type: "webgpu",
-			device: internalRenderer.backend?.device,
-			adapter: internalRenderer.backend?.adapter,
-			canvas: internalRenderer.domElement
-		};
-		else return {
-			type: "webgl",
-			context: internalRenderer.getContext?.(),
-			canvas: internalRenderer.domElement
+			device: internal?.device,
+			adapter: internal?.adapter,
+			canvas: presetCanvas
 		};
 	}
 	function dispose() {
@@ -2572,7 +2918,7 @@ function createRendererFromJSON(preset, options) {
 	}
 	function registerPresetNodes() {
 		const rootId = "preset-root";
-		coreRenderer.registerNode(rootId, ({ childNode }) => childNode || vec4(0, 0, 0, 0), null, null, {});
+		coreRenderer.registerNode(rootId, rootPassthrough.fragment, null, null, {}, rootPassthrough);
 		preset.components.forEach((component, index) => {
 			registerComponent(component, rootId, index);
 		});
@@ -2585,7 +2931,7 @@ function createRendererFromJSON(preset, options) {
 		}
 		const nodeId = component.id || `${component.type}_${Date.now()}_${Math.random().toString(36).slice(2, 9)}`;
 		nodeIdMap.set(nodeId, component.type);
-		const uniforms = createUniformsMap(componentDef, Object.fromEntries(Object.entries(componentDef.props).map(([key, propConfig]) => [key, component.props?.[key] !== void 0 ? component.props[key] : propConfig.default])), nodeId);
+		const uniforms = createGpuUniformsMap(componentDef, Object.fromEntries(Object.entries(componentDef.props).map(([key, propConfig]) => [key, component.props?.[key] !== void 0 ? component.props[key] : propConfig.default])), nodeId);
 		const metadata = {
 			blendMode: component.props?.blendMode || "normal",
 			opacity: component.props?.opacity,
@@ -2607,7 +2953,7 @@ function createRendererFromJSON(preset, options) {
 				...component.props.transform
 			} : void 0
 		};
-		coreRenderer.registerNode(nodeId, componentDef.fragmentNode, parentId, metadata, uniforms, componentDef);
+		coreRenderer.registerNode(nodeId, componentDef.fragment, parentId, metadata, uniforms, componentDef);
 		component.children?.forEach((child, index) => {
 			registerComponent(child, nodeId, index);
 		});
@@ -2669,29 +3015,69 @@ function topologicalSort(dependencies, circularDependencies) {
 	for (const sourceId of allSourceNodeIds) if (!visited.has(sourceId) && !dependencies.has(sourceId)) result.push(sourceId);
 	return result.reverse();
 }
-const noise = (st) => fract(sin(dot(st, vec2(12.12345, 78.12345))).mul(40000.12345));
-const grain = (intensity = .03) => (st) => noise(st).mul(intensity).mul(.10012345);
-const distort = (uv$1 = vec2(0), intensity = .02, frequency = 1, seed = 1) => {
-	const phaseX = seed * 1.618033988749895;
-	const phaseY = seed * 2.718281828459045;
-	const freqMod1 = (Math.sin(seed) + 2) * 5;
-	const freqMod2 = (Math.cos(seed) + 2) * 5;
-	const flow1 = vec2(sin(uv$1.x.mul(frequency).mul(freqMod1).add(time.mul(.1)).add(phaseX)), cos(uv$1.y.mul(frequency).mul(freqMod1).add(time.mul(.1)).add(phaseY)));
-	const flow2 = vec2(sin(uv$1.y.mul(frequency).mul(freqMod2).add(time.mul(.05)).add(phaseY)), cos(uv$1.x.mul(frequency).mul(freqMod2).add(time.mul(.05)).add(phaseX)));
-	const offset = flow1.add(flow2).mul(intensity);
-	return uv$1.add(offset);
+const screenUVToBoxLocal = (sx, sy, g) => {
+	const th = g.rotationDeg * Math.PI / 180;
+	const c = Math.cos(th);
+	const s = Math.sin(th);
+	const sqx = (sx - g.centerX) * g.aspectRatio;
+	const sqy = sy - g.centerY;
+	const rx = sqx * c + sqy * s;
+	const ry = sqx * -s + sqy * c;
+	const hwSq = Math.max(g.halfWidthUV * g.aspectRatio, 1e-6);
+	const hhSq = Math.max(g.halfHeightUV, 1e-6);
+	return {
+		x: rx / (2 * hwSq) + .5,
+		y: ry / (2 * hhSq) + .5
+	};
 };
-const glow = (color, glowColor, threshold = .6, softness = .3, intensity = 1) => {
-	const brightness = max(max(color.r, color.g), color.b);
-	const glowAmount = smoothstep(threshold, threshold + softness, brightness).mul(intensity).mul(1);
-	return vec4(color.rgb.add(glowColor.rgb.mul(glowAmount)), color.a);
+const boxLocalToScreenUV = (bx, by, g) => {
+	const th = g.rotationDeg * Math.PI / 180;
+	const c = Math.cos(th);
+	const s = Math.sin(th);
+	const lx = (bx - .5) * 2 * (g.halfWidthUV * g.aspectRatio);
+	const ly = (by - .5) * 2 * g.halfHeightUV;
+	const sqx = lx * c - ly * s;
+	const sqy = lx * s + ly * c;
+	return {
+		x: sqx / g.aspectRatio + g.centerX,
+		y: sqy + g.centerY
+	};
 };
-const edgeMask = (options = {}) => {
-	const { inset = .4, softness = .5, offsetX = 0, offsetY = 0 } = options;
-	const rawUV = uv();
-	const ovalX = rawUV.x.sub(.5).sub(float(offsetX)).mul(2);
-	const ovalY = rawUV.y.sub(.5).add(float(offsetY)).mul(2);
-	const ovalDistance = ovalX.mul(ovalX).add(ovalY.mul(ovalY)).sqrt();
-	return float(1).sub(smoothstep(float(1).sub(float(inset)), float(1).sub(float(inset)).add(float(softness)), ovalDistance.mul(float(1).add(float(softness)))));
+const DEFAULT_BOUNDING_BOX = {
+	x: {
+		value: 0,
+		unit: "uv"
+	},
+	y: {
+		value: 0,
+		unit: "uv"
+	},
+	width: {
+		value: 1,
+		unit: "uv"
+	},
+	height: {
+		value: 1,
+		unit: "uv"
+	},
+	origin: "top-left",
+	rotation: 0
 };
-export { createAnimatedTime, createRendererFromJSON, createUniformsMap, distort, edgeMask, glow, grain, resolveMaskDependencies, shaderRenderer, updateUniformValue };
+function resolveBoundingBox(bbox) {
+	if (!bbox || typeof bbox !== "object") return void 0;
+	const dim = (d$1, fallback) => d$1 && typeof d$1 === "object" ? {
+		value: d$1.value ?? fallback.value,
+		unit: d$1.unit ?? fallback.unit
+	} : { ...fallback };
+	return {
+		x: dim(bbox.x, DEFAULT_BOUNDING_BOX.x),
+		y: dim(bbox.y, DEFAULT_BOUNDING_BOX.y),
+		width: dim(bbox.width, DEFAULT_BOUNDING_BOX.width),
+		height: dim(bbox.height, DEFAULT_BOUNDING_BOX.height),
+		origin: bbox.origin ?? "top-left",
+		rotation: bbox.rotation ?? 0,
+		...bbox.cornerRadius ? { cornerRadius: bbox.cornerRadius } : {},
+		...bbox.lockAspect !== void 0 ? { lockAspect: bbox.lockAspect } : {}
+	};
+}
+export { DEFAULT_BOUNDING_BOX, MAX_COLOR_STOPS, SHAPE3D_DEFAULTS, SHAPE3D_TYPES, SVG3D_DEFAULTS, SVG3D_TYPES, boxLocalToScreenUV, createGpuUniformsMap, createRendererFromJSON, is3dShapeType, isDimensionalValue, isSvg3dShapeType, isVolumetricShapeType, resolveBoundingBox, resolveMaskDependencies, resolveStops, rootPassthrough, screenUVToBoxLocal, shaderRendererGPU, shape3dBoundingRadius, sortStops };