shaders 3.0.445 → 3.0.447

package/dist/core/index.js

@@ -1,202 +1,203 @@
 import { $t as resolveBoundingBox, Cn as FieldHandle, Dt as packConvertedStops, En as updateFieldValue, Ot as packStops, Qt as isIdentityBoundingBox, S as maxPixelRatioForDevice, Ut as collectStructuralHashInputs, Wt as composeNodeTree, Y as createComputeDispatcher, Zt as DEFAULT_BOUNDING_BOX, en as boundingBoxToUVParams, kt as getAnimatedTimeState, nn as screenUVToBoxLocal$1, t as SystemUniforms, tn as needsTransformation, wn as createUniformStore, zt as SHARED_SAMPLER_LAYOUT } from "./coords-BkIjixe_.js";
 import { a as getWebGPUSupport, c as isWebGPUSupported, i as getGpuUnusableReason, l as markGpuUnusable, n as debugError, o as isGpuUnavailableError, r as debugWarn, s as isShadersDebug, t as GpuUnavailableError, u as setShadersDebug } from "./support-6QRFK3xB.js";
 import "./glass-sOqjtPJD.js";
-import "./Neon-BjBSg2FR.js";
-import "./Emboss-RxgVyKyU.js";
-import "./Form3D-CJKutcFA.js";
-import "./ThinFilm-DhQXCGw9.js";
+import "./Neon-D9d6Osal.js";
+import "./Emboss-DNwO5JcE.js";
+import "./Form3D-D4aXZGoJ.js";
+import "./ThinFilm-DhMKI5e2.js";
 import { o as transformColorSpace } from "./transformations-t0d2-uSX.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-Bl3WB9VW.js";
-import "./AngularBlur-D33jrcZd.js";
-import "./Arc-BG8Bpknl.js";
-import "./Ascii-DE0vAAOX.js";
-import "./Aurora-Cu4JGjCD.js";
-import "./BarnDoors-JraHuTwe.js";
-import "./BarShift-o_IvV0t_.js";
-import "./Beam-DshQatlM.js";
-import "./Bend-KJzYWEJV.js";
-import "./Blob-BJxkqvOO.js";
-import "./BlockDissolve-CsIQWUpY.js";
-import "./noiseColor-CY6QVFgB.js";
-import "./BlockNoise-DVI-0PnC.js";
-import "./BlueNoise-CzBN6i38.js";
-import "./Blur-W95k4Lxz.js";
-import "./Boids-BJ6wxFC8.js";
-import "./BokehBlur-CbOO__cN.js";
-import "./BrickPattern-eQv5DrKE.js";
-import "./BrightnessContrast-CmH2DvaZ.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-Cl58vRlg.js";
-import "./BrushedMetal-D-7M7ZuM.js";
-import "./Bulge-KmBnaVMx.js";
-import "./CarbonFiber-D4jap49E.js";
-import "./Chalkboard-H6-0OXC3.js";
-import "./ChannelBlur-BKJfnu91.js";
-import "./Checkerboard-NwKMLVHe.js";
-import "./CheckerWipe-acIaflfK.js";
-import "./Chevron-eBbFV2ud.js";
-import "./ChromaFlow-ex7l4tTK.js";
-import "./ChromaticAberration-Bbi9vNxS.js";
-import "./Circle-DdFWEti1.js";
-import "./ColorWheel-BqcyPqcj.js";
-import "./CompressionArtifacts-DqWq-4h8.js";
-import "./ConcentricSpin-CtI1hKio.js";
-import "./ConicGradient-HmImN4LO.js";
-import "./ContourLines-BMom2vMu.js";
-import "./CornerPin-D_-luriU.js";
-import "./Crescent-CY6MeN9V.js";
-import "./Cross-ClImej9a.js";
-import "./CRTScreen-t7dyfO5u.js";
-import "./Crystal-CMrqHLFD.js";
-import "./CurlNoise-C_QZBT5m.js";
-import "./CursorRipples-Bmlex_IF.js";
-import "./CursorTrail-B68x1Cv-.js";
-import "./DataMosh-FZQWg5Ui.js";
-import "./DiamondGradient-C0hD1lNN.js";
-import "./DiamondWipe-B8rFSwsV.js";
-import "./DiffuseBlur--Gn4bDwC.js";
-import "./DisplacementMap-DQk8S4sK.js";
-import "./Dither-rB9M7FS7.js";
-import "./DotGrid-DszAbmy5.js";
-import "./DropShadow-BS3S178o.js";
-import "./Duotone-Cf_ybegD.js";
-import "./Ellipse-DY8FgSSx.js";
-import "./Engraving-C0OuioUr.js";
-import "./ErosionNoise-B-I3VFiY.js";
-import "./Exposure-360tdOrT.js";
-import "./FallingLines-4sVKJMDj.js";
-import "./FilmGrain-CgzuRidb.js";
-import "./FilmStock-BW9k3EPE.js";
-import "./Flip-DqdxtYHS.js";
-import "./FloatingParticles-BI8Y9Gcv.js";
-import "./Flower-IaNzANoa.js";
-import "./FlowField-CV0Is569.js";
-import "./FlowingGradient-CEAAa11t.js";
-import "./FlutedGlass-CF6mZMq4.js";
-import "./Fog-D9OYGwhY.js";
-import "./FractalNoise-DelBWQyb.js";
-import "./Frost-Br7b9n4L.js";
-import "./GaborNoise-DViNgIse.js";
-import "./Glass-IwPea9h1.js";
-import "./GlassTiles-DpPHPKv7.js";
-import "./Glitch-CKmX-agV.js";
-import "./Glow-CVcVetaa.js";
-import "./Godrays-CNNHJzNz.js";
-import "./Goo-BUXnhwTk.js";
-import "./GradientMap-DqGEXRl9.js";
-import "./Grayscale-DiJAjdx3.js";
-import "./Grid-utmP7uyR.js";
-import "./GridDistortion-Bn6D5dfC.js";
-import "./Group-u-o7qE0Y.js";
-import "./Halftone-C5La06l6.js";
-import "./Heart-CGLx1F8D.js";
-import "./Heatmap-CE5DLeJp.js";
-import "./HexGrid-CqB-yMWN.js";
-import "./Hologram-CctodmpA.js";
-import "./Holographic-DSz4qfkn.js";
-import "./HTMLInCanvas-sK9HN-gI.js";
-import "./HueShift-Cfq-ijQP.js";
-import "./ImageTexture-DdzAYFTi.js";
-import "./InkFlow-CCPfoQXs.js";
-import "./Invert-CtUHcYmv.js";
-import "./IrisWipe-DWVFMn81.js";
-import "./IsometricCubes-m-mYnbqN.js";
-import "./Kaleidoscope-DMNLVgx6.js";
-import "./KeyFrames-jgrfR3Hj.js";
-import "./LensFlare-CuWJsfwE.js";
-import "./LightEdge-WMxb-xKB.js";
-import "./LightLeak-DfOngFp7.js";
-import "./LinearBlur-iLXYGof_.js";
-import "./LinearGradient-DLrJban6.js";
-import "./LinearWipe-C_fWBl4i.js";
-import "./LiquidMetal-DHM8kVNr.js";
-import "./Liquify-FQWL8j4t.js";
-import "./MagneticFilings-BUzSkycD.js";
-import "./Marble-BnHffB3C.js";
-import "./Mirror-B_v4FunG.js";
-import "./MultiPointGradient-5NGBm90u.js";
-import "./NoiseDissolve-kDP6-h9F.js";
-import "./fonts-BtGjHq1w.js";
-import "./ObjectTracker-vU1bVmIJ.js";
-import "./PagePeel-BgDvgtIV.js";
-import "./Paper-_alN4JdS.js";
-import "./Parallelogram--Cil139y.js";
-import "./ParticleField-DZ7um7tu.js";
-import "./ParticleFlow-CmRP2S8W.js";
-import "./Particles-DFw2E9SE.js";
-import "./PerlinNoise-BmNpwJtM.js";
-import "./Perspective-DVcUW7jR.js";
-import "./Pixelate-D-eWrHTE.js";
-import "./PixelSort-Bz5dIrqH.js";
-import "./PixelThrow-DEMX8VOw.js";
-import "./Plasma-C_EIkpQi.js";
-import "./Plastic-CYeefb91.js";
-import "./PolarCoordinates-DmpUBdGX.js";
-import "./Polygon-DEEUdZd6.js";
-import "./Posterize-B8oVbNZL.js";
-import "./Prism-Btijlm0t.js";
-import "./ProgressiveBlur-BoRFh6Tn.js";
-import "./RadialGradient-CNDiMPZM.js";
-import "./RadialWipe-C213vCrJ.js";
-import "./RandomBars-hOY9hNS7.js";
-import "./ReactionDiffusion--UjME4_r.js";
-import "./RectangularCoordinates-DB7rPJ2Z.js";
-import "./ReflectivePlane-D92GjNLR.js";
-import "./Repeater-CJjylN6O.js";
-import "./Ring-CJYQP2Qm.js";
-import "./Ripples-Brj67b7H.js";
-import "./RippleWipe-DJlrObO0.js";
-import "./RoundedRect-3vfFsHAl.js";
-import "./Saturation-lx3DV3Up.js";
-import "./Scratches-CMFr8AfL.js";
-import "./Sharpness-ByZbUAd0.js";
-import "./Shatter-B1_rLacw.js";
-import "./SimplexNoise-zItLLG1j.js";
-import "./SineWave-BvrhRcvv.js";
-import "./SliceWipe-9bUWTClo.js";
-import "./Smoke-YixCTJbh.js";
-import "./SmokeFill-Cccbyi4g.js";
-import "./SmokeFlow-DJ3sQPH1.js";
-import "./Solarize-CZeTsJG8.js";
-import "./SolidColor-DB8l6xRl.js";
-import "./Spherize-BdYP0Auv.js";
-import "./Spiral-PPqgFMRM.js";
-import "./Star-mgLhY4e_.js";
-import "./noiseStylize-BsZQT7ig.js";
-import "./Stone-CehIcoVu.js";
-import "./Strands-Dzj-5h31.js";
-import "./Stretch-C82iJhQu.js";
-import "./Stripes-C3XL9mWC.js";
-import "./StudioBackground-CDpLmvMH.js";
-import "./SunBurst-fFeTV8O4.js";
-import "./Surface3D-BFGuR3YZ.js";
-import "./Swirl-DGZs_YDx.js";
-import "./Teardrop-DN7t-3HU.js";
-import "./Text-DuQnSDiW.js";
-import "./TiltShift-CpHBxw5I.js";
-import "./TimeTrail-j89dMqNU.js";
-import "./Tint-WmBROyUm.js";
-import "./Trapezoid-RrEwHfyH.js";
-import "./TriangularGrid-D7r3Nhss.js";
-import "./Tritone-BREi33uL.js";
-import "./Truchet-CTjP4x60.js";
-import "./Twirl-Bvk8-3JT.js";
-import "./VenetianBlinds-Bv0f2lFw.js";
-import "./Vesica-BV2Sz5VV.js";
-import "./VHS-et86dWDU.js";
-import "./Vibrance-Q9Mrvfs-.js";
-import "./VideoTexture-BUY69Gqp.js";
-import "./Vignette-DyScJQWj.js";
-import "./Voronoi-DxoT7iRa.js";
-import "./Water-CE1rY4LR.js";
-import "./Watercolor-Buk5FkKR.js";
-import "./WaveDistortion-Ca6y77xt.js";
-import "./WaveletNoise-Y7LdptK_.js";
-import "./Weave-CTpPvAhK.js";
-import "./WebcamTexture-85gdzpo_.js";
-import "./Wool-DJJkx7S2.js";
-import "./WorleyNoise-C_CHhfMF.js";
-import "./ZoomBlur-8tmVWx1n.js";
-import { t as getAllShaders } from "./shaderRegistry-CSTwovjI.js";
+import { _ as resolveStops, a as boxHalfExtentsUV, c as isDimensionalProp, d as setShaderCanvasDimensions, f as colorToRGBA, g as colorStopsTransform, i as bindingSizePx, l as isDimensionalValue, m as MAX_COLOR_STOPS, n as rootPassthrough, o as buildDimensionalPlan, p as setColorSpaceModeGpu, r as createGpuUniformsMap, s as buildExtraSizeProps, u as resolveDimensionalProp, v as sortStops } from "./porters-BmU6G9TR.js";
+import { n as onNaturalSizeChange, r as registerNaturalSize, t as getNaturalSize } from "./naturalSize-Caz3-kRv.js";
+import "./AngularBlur-xU811GPM.js";
+import "./Arc-DYvFxtGy.js";
+import "./Ascii-ChE4BP7J.js";
+import "./Aurora-BThE6pbb.js";
+import "./BarnDoors-B_kxVuec.js";
+import "./BarShift-DdjkPSk3.js";
+import "./Beam-C7zPHuIU.js";
+import "./Bend-CFcEjifF.js";
+import "./Blob-CgUolAhz.js";
+import "./BlockDissolve-CLSxXB4e.js";
+import "./noiseColor-CRpf22bk.js";
+import "./BlockNoise-BgEJOicU.js";
+import "./BlueNoise-BqMtBLxM.js";
+import "./Blur-Xaa6jVPT.js";
+import "./Boids-B8QUNxRL.js";
+import "./BokehBlur-B5fql96U.js";
+import "./BrickPattern-EAD5HD4e.js";
+import "./BrightnessContrast-mbv32DkA.js";
+import { a as SVG3D_DEFAULTS, c as isSvg3dShapeType, i as SHAPE3D_TYPES, l as isVolumetricShapeType, o as SVG3D_TYPES, r as SHAPE3D_DEFAULTS, s as is3dShapeType, u as shape3dBoundingRadius } from "./shapeEffectBounds-PQqKLQXO.js";
+import "./BrushedMetal-B10fDdGt.js";
+import "./Bulge-C1Pq4DHk.js";
+import "./CarbonFiber-DSSARe6R.js";
+import "./Chalkboard-C7srb54u.js";
+import "./ChannelBlur-DE3T4-pj.js";
+import "./Checkerboard-oVWtS0rz.js";
+import "./CheckerWipe-Dp49-iaT.js";
+import "./Chevron-CCD5JTRA.js";
+import "./ChromaFlow-BiE9Mes0.js";
+import "./ChromaticAberration-XEasUrD3.js";
+import "./Circle-CvQ9duDU.js";
+import "./ColorWheel-CXvfWAjN.js";
+import "./CompressionArtifacts-BDaP7XI6.js";
+import "./ConcentricSpin-D06hFXEb.js";
+import "./ConicGradient-Cg6vy3gl.js";
+import "./ContourLines-Cg2Dlmcr.js";
+import "./CornerPin-wtqiMUCa.js";
+import "./Crescent-Co__JqEE.js";
+import "./Cross-CFytbdrZ.js";
+import "./CRTScreen-Ctx0Mxtb.js";
+import "./Crystal-U7VqhbHy.js";
+import "./CurlNoise-BXWYh1Qi.js";
+import "./CursorRipples-APbH7SVR.js";
+import "./CursorTrail-D5Fj0wGp.js";
+import "./DataMosh-CWRLpjU3.js";
+import "./DiamondGradient-C_2VoEiQ.js";
+import "./DiamondWipe-BkdNODD1.js";
+import "./DiffuseBlur-Dl7S4KBW.js";
+import "./DisplacementMap-lv-qoLem.js";
+import "./Dither-B33J_gJU.js";
+import "./DotGrid-DaOhiRaL.js";
+import "./DropShadow-C5Z2Rs2C.js";
+import "./Duotone-x4cywJbU.js";
+import "./Ellipse-CrQ1XYjx.js";
+import "./Engraving-FsaRQiyI.js";
+import "./ErosionNoise-CloHpdFT.js";
+import "./Exposure-mO6KjYvc.js";
+import "./FallingLines-D_1wHUkx.js";
+import "./FilmGrain-DDhrsw94.js";
+import "./FilmStock-BaP2aTLu.js";
+import "./Flip-DYuqyJva.js";
+import "./FloatingParticles-DJwNpHtZ.js";
+import "./Flower-D0MqoayS.js";
+import "./FlowField-D4iGiDic.js";
+import "./FlowingGradient-9Zu0Pu4a.js";
+import "./FlutedGlass-C_clmShu.js";
+import "./Fog-C_kY5pWB.js";
+import "./FractalNoise-mMVLGmIv.js";
+import "./Frost-M53tZlcf.js";
+import "./GaborNoise-BhXywN1d.js";
+import "./Glass-B9D_52op.js";
+import "./GlassTiles-DIkGYgVE.js";
+import "./Glitch-CUOJt5VX.js";
+import "./Glow-D5AdnLvU.js";
+import "./Godrays-BeQCWVw7.js";
+import "./Goo-C0_0QYne.js";
+import "./GradientMap-DOVK05_a.js";
+import "./Grayscale-Uv_6LYA9.js";
+import "./Grid-Dbp4DoXZ.js";
+import "./GridDistortion-D_21zIrm.js";
+import "./Group-DXiB5Qrx.js";
+import "./Halftone-DszIQsyx.js";
+import "./Heart-COpnSJPD.js";
+import "./Heatmap-CMm8SD-P.js";
+import "./HexGrid-B6wNW-45.js";
+import "./Hologram-XejRN51V.js";
+import "./Holographic-D1G_Ou1y.js";
+import "./HTMLInCanvas-xXPLTYIv.js";
+import "./HueShift-BCDgYfJs.js";
+import "./ImageTexture-BE2Jlkg6.js";
+import "./InkFlow-DJaJqula.js";
+import "./Invert-DDmITZjt.js";
+import "./IrisWipe-BFs5DDSa.js";
+import "./IsometricCubes-ChKqYTIw.js";
+import "./Kaleidoscope-C8_-tC6T.js";
+import "./KeyFrames-xR9ZzHKj.js";
+import "./LensFlare-DHGNEDIX.js";
+import "./LightEdge-DYfhB3-7.js";
+import "./LightLeak-CYjuMURe.js";
+import "./LinearBlur-CV7gKYHV.js";
+import "./LinearGradient-DAzw65UB.js";
+import "./LinearWipe-DoDZF7y0.js";
+import "./LiquidMetal-C9OxRyE4.js";
+import "./Liquify-gNsuR7aA.js";
+import "./MagneticFilings-CQ7zHEow.js";
+import "./Marble-BSSMSrv8.js";
+import "./Mirror-BZAUA2jk.js";
+import "./MultiPointGradient-HSfAYB-u.js";
+import "./NoiseDissolve-CnELvUG_.js";
+import "./fonts-DwhbVe2B.js";
+import "./ObjectTracker-COh35yTh.js";
+import "./PagePeel-B6sjmvZ1.js";
+import "./Paper-LfukraJk.js";
+import "./Parallelogram-DBi0yAG3.js";
+import "./ParticleField-q7COY9YT.js";
+import "./ParticleFlow-DiHWbIon.js";
+import "./Particles-BFsKUAPx.js";
+import "./PerlinNoise-KV2GG0ts.js";
+import "./Perspective-CJSrtEy5.js";
+import "./Pixelate-XJI9f1oT.js";
+import "./PixelSort-WD-Y6ZFu.js";
+import "./PixelThrow-CnOXm7Hv.js";
+import "./Plasma-C0dnSaw1.js";
+import "./Plastic-DBv_6A7q.js";
+import "./PolarCoordinates-B8Cq2bzT.js";
+import "./Polygon-ORM35JKg.js";
+import "./Posterize-Dn-Vv2S1.js";
+import "./Prism-CYLsGJHY.js";
+import "./ProgressiveBlur-BXUumCm5.js";
+import "./RadialGradient-j6T56q1W.js";
+import "./RadialWipe-Bz19qvls.js";
+import "./RandomBars-3RlhwDYG.js";
+import "./ReactionDiffusion-DdXavIVw.js";
+import "./RectangularCoordinates-p3250IKV.js";
+import "./ReflectivePlane-BOl9AEoO.js";
+import "./Repeater-BMXmN95R.js";
+import "./Ring-DKcROHDs.js";
+import "./Ripples-8fFdo6aq.js";
+import "./RippleWipe-QH8D0Y-2.js";
+import "./RoundedRect-Cr76tP9o.js";
+import "./Saturation-Dqifs1x7.js";
+import "./Scratches-sa8JU4Eb.js";
+import "./Sharpness-IRuPd9nn.js";
+import "./Shatter-BYaxMvyd.js";
+import "./SimplexNoise-C2vmRzgy.js";
+import "./SineWave-BGAJyGFr.js";
+import "./SliceWipe-BOcCk5Se.js";
+import "./Smoke-B1twbhQ4.js";
+import "./SmokeFill-CAayneM2.js";
+import "./SmokeFlow-Ug8difAz.js";
+import "./Solarize-205KKROH.js";
+import "./SolidColor-B4pj8onb.js";
+import "./Spherize-DUQxwwCL.js";
+import "./Spiral-DY1c-N4F.js";
+import "./Star-DRxNaHHo.js";
+import "./noiseStylize-J6sFKoTh.js";
+import "./Stone-CUdcvOWd.js";
+import "./Strands-CFxYJMFu.js";
+import "./Stretch-DYrVdt8A.js";
+import "./Stripes-BvnoWdwn.js";
+import "./StudioBackground-srQGUpfZ.js";
+import "./SunBurst-COsVDZ4e.js";
+import "./Surface3D-TsGPzdGm.js";
+import "./Swirl-nXMWVY2X.js";
+import "./Teardrop-Bjtkigk4.js";
+import { a as measureTextBlock, i as measureText, o as wrapLines } from "./Text-BGdsqRl5.js";
+import "./TiltShift-BwuYyXB6.js";
+import "./TimeTrail-CE2XumxR.js";
+import "./Tint-BTmcGjEl.js";
+import "./Trapezoid-CiZCh8QS.js";
+import "./TriangularGrid-BnQOEljy.js";
+import "./Tritone-Ta084wlF.js";
+import "./Truchet-BxCh_IIp.js";
+import "./Twirl-Cw4jm59Q.js";
+import "./VenetianBlinds-BZ0sS97G.js";
+import "./Vesica-Cf1KiSzK.js";
+import "./VHS-Nwk0E-tf.js";
+import "./Vibrance-qWGvLkrW.js";
+import "./VideoTexture-48ylVDvN.js";
+import "./Vignette-CK_Li7v2.js";
+import "./Voronoi-DMYFDwIS.js";
+import "./Water-D74wbHmn.js";
+import "./Watercolor-zo8-4Vqx.js";
+import "./WaveDistortion-BLrvGOzF.js";
+import "./WaveletNoise-a5OpO8-D.js";
+import "./Weave-D1D3kuUg.js";
+import "./WebcamTexture-pBETyQYG.js";
+import "./Wool-CMnWPdy9.js";
+import "./WorleyNoise-BAEo0duh.js";
+import "./ZoomBlur-CnBNmcfx.js";
+import { t as getAllShaders } from "./shaderRegistry-D75z2sND.js";
 import * as d from "typegpu/data";
 import tgpu, { common } from "typegpu";
 var OPTIONAL_FEATURES = ["float32-filterable", "timestamp-query"];
@@ -943,6 +944,267 @@ function createFrameLoop(tick) {
 		}
 	};
 }
+function mediaKey(type, props) {
+	if (type === "ImageTexture" || type === "VideoTexture") return typeof props.url === "string" && props.url ? props.url : null;
+	if (type === "WebcamTexture") return "webcam";
+	return null;
+}
+function explicitBoxSize(bbox, cw, ch) {
+	if (!bbox || typeof bbox !== "object") return null;
+	const dimPx = (d$1, dim) => {
+		if (!d$1 || typeof d$1 !== "object" || typeof d$1.value !== "number") return null;
+		return d$1.unit === "px" ? d$1.value : d$1.value * dim;
+	};
+	const w = dimPx(bbox.width, cw);
+	const h = dimPx(bbox.height, ch);
+	return w != null && h != null && w > 0 && h > 0 ? {
+		widthPx: w,
+		heightPx: h
+	} : null;
+}
+function measureNode(input, cw, ch) {
+	const { type, decl, props, boundingBox } = input;
+	if (!(cw > 0) || !(ch > 0)) return null;
+	if (input.requiresChild) return null;
+	if (decl?.computeBounds) {
+		const b = decl.computeBounds(props, cw, ch);
+		if (b.widthPx > 0 && b.heightPx > 0) return {
+			widthPx: b.widthPx,
+			heightPx: b.heightPx
+		};
+		return null;
+	}
+	const pb = decl?.propBindings;
+	if (pb?.width && pb?.height) {
+		const w = bindingSizePx(pb.width, props[pb.width.prop], cw, ch);
+		const h = bindingSizePx(pb.height, props[pb.height.prop], cw, ch);
+		if (w > 0 && h > 0) return {
+			widthPx: w,
+			heightPx: h
+		};
+		return null;
+	}
+	const boxed = explicitBoxSize(boundingBox, cw, ch);
+	if (boxed) return boxed;
+	const key = mediaKey(type, props);
+	if (key) {
+		const natural = getNaturalSize(key);
+		if (natural) return {
+			widthPx: natural.width,
+			heightPx: natural.height
+		};
+	}
+	return null;
+}
+function gapToPx(gap, mainAxisDim) {
+	if (gap == null) return 0;
+	if (typeof gap === "number") return gap;
+	return gap.unit === "px" ? gap.value : gap.value * mainAxisDim;
+}
+function resolveLayoutConfig(cfg, cw, ch) {
+	if (!cfg || cfg.mode !== "column" && cfg.mode !== "row") return null;
+	return {
+		mode: cfg.mode,
+		gapPx: Math.max(0, gapToPx(cfg.gap, cfg.mode === "column" ? ch : cw)),
+		align: cfg.align ?? "center",
+		anchor: cfg.anchor ?? "center",
+		anchorOffsetX: cfg.anchorOffset?.x ?? 0,
+		anchorOffsetY: cfg.anchorOffset?.y ?? 0
+	};
+}
+var anchorEdges = (origin) => ({
+	ox: origin.includes("left") ? "start" : origin.includes("right") ? "end" : "center",
+	oy: origin.includes("top") ? "start" : origin.includes("bottom") ? "end" : "center"
+});
+var anchorTopLeft = (edge, blockSize, canvasDim, offsetPx) => edge === "start" ? offsetPx : edge === "end" ? canvasDim - blockSize - offsetPx : (canvasDim - blockSize) / 2 + offsetPx;
+function layoutBlockSize(layout, items) {
+	let main = 0;
+	let cross = 0;
+	for (const item of items) {
+		const m = layout.mode === "column" ? item.size.heightPx : item.size.widthPx;
+		const c = layout.mode === "column" ? item.size.widthPx : item.size.heightPx;
+		main += m;
+		cross = Math.max(cross, c);
+	}
+	if (items.length > 1) main += layout.gapPx * (items.length - 1);
+	return layout.mode === "column" ? {
+		widthPx: cross,
+		heightPx: main
+	} : {
+		widthPx: main,
+		heightPx: cross
+	};
+}
+function computeLayout(layout, items, cw, ch) {
+	const placements = /* @__PURE__ */ new Map();
+	if (items.length === 0) return placements;
+	const block = layoutBlockSize(layout, items);
+	const { ox, oy } = anchorEdges(layout.anchor);
+	const blockLeft = anchorTopLeft(ox, block.widthPx, cw, layout.anchorOffsetX);
+	const blockTop = anchorTopLeft(oy, block.heightPx, ch, layout.anchorOffsetY);
+	const crossPos = (childCross, blockCross) => layout.align === "start" ? 0 : layout.align === "end" ? blockCross - childCross : (blockCross - childCross) / 2;
+	let cursor = 0;
+	for (const item of items) if (layout.mode === "column") {
+		const x = blockLeft + crossPos(item.size.widthPx, block.widthPx) + item.size.widthPx / 2;
+		const y = blockTop + cursor + item.size.heightPx / 2;
+		placements.set(item.id, {
+			centerXPx: x,
+			centerYPx: y
+		});
+		cursor += item.size.heightPx + layout.gapPx;
+	} else {
+		const x = blockLeft + cursor + item.size.widthPx / 2;
+		const y = blockTop + crossPos(item.size.heightPx, block.heightPx) + item.size.heightPx / 2;
+		placements.set(item.id, {
+			centerXPx: x,
+			centerYPx: y
+		});
+		cursor += item.size.widthPx + layout.gapPx;
+	}
+	return placements;
+}
+function measureChild(view, cw, ch) {
+	const nested = resolveLayoutConfig(view.layout, cw, ch);
+	if (nested) {
+		const items = flowItems(view, cw, ch);
+		if (items.length === 0) return null;
+		return layoutBlockSize(nested, items);
+	}
+	return measureNode({
+		type: view.componentName,
+		decl: view.decl,
+		props: view.props,
+		boundingBox: view.boundingBox,
+		requiresChild: view.requiresChild,
+		availableWidthPx: cw
+	}, cw, ch);
+}
+function flowItems(group, cw, ch) {
+	const items = [];
+	for (const child of group.children) {
+		if (child.visible === false || child.absolute) continue;
+		const size = measureChild(child, cw, ch);
+		if (size) items.push({
+			id: child.id,
+			size,
+			view: child
+		});
+	}
+	return items;
+}
+function computeBoundsShift(view, cw, ch) {
+	if (!view.decl?.computeBounds) return {
+		x: 0,
+		y: 0
+	};
+	const b = view.decl.computeBounds(view.props, cw, ch);
+	const cx = typeof view.props.center?.x === "number" ? view.props.center.x : .5;
+	const cy = typeof view.props.center?.y === "number" ? view.props.center.y : .5;
+	return {
+		x: b.centerXPx - cx * cw,
+		y: b.centerYPx - cy * ch
+	};
+}
+function placeChild(view, size, centerXPx, centerYPx, cw, ch, out, rects) {
+	const nested = resolveLayoutConfig(view.layout, cw, ch);
+	if (nested) {
+		placeGroup(view, nested, cw, ch, out, {
+			centerXPx,
+			centerYPx
+		}, rects);
+		return;
+	}
+	const posProp = view.decl?.propBindings?.x?.prop ?? view.decl?.propBindings?.y?.prop;
+	if (posProp) {
+		if (!view.positionDriven) {
+			const shift = computeBoundsShift(view, cw, ch);
+			out.push({
+				kind: "position",
+				id: view.id,
+				prop: posProp,
+				value: {
+					x: (centerXPx - shift.x) / cw,
+					y: (centerYPx - shift.y) / ch
+				}
+			});
+		}
+		return;
+	}
+	out.push({
+		kind: "box",
+		id: view.id,
+		xPx: centerXPx - size.widthPx / 2,
+		yPx: centerYPx - size.heightPx / 2,
+		widthPx: size.widthPx,
+		heightPx: size.heightPx
+	});
+}
+function placeGroup(group, layout, cw, ch, out, at, rects, precomputedItems) {
+	const items = precomputedItems ?? flowItems(group, cw, ch);
+	if (items.length === 0) return;
+	let effective = layout;
+	if (at) {
+		const block = layoutBlockSize(layout, items);
+		effective = {
+			...layout,
+			anchor: "top-left",
+			anchorOffsetX: at.centerXPx - block.widthPx / 2,
+			anchorOffsetY: at.centerYPx - block.heightPx / 2
+		};
+	}
+	if (rects) {
+		const block = layoutBlockSize(effective, items);
+		const { ox, oy } = anchorEdges(effective.anchor);
+		rects.set(group.id, {
+			leftPx: anchorTopLeft(ox, block.widthPx, cw, effective.anchorOffsetX),
+			topPx: anchorTopLeft(oy, block.heightPx, ch, effective.anchorOffsetY),
+			widthPx: block.widthPx,
+			heightPx: block.heightPx
+		});
+	}
+	const placements = computeLayout(effective, items, cw, ch);
+	for (const item of items) {
+		const p = placements.get(item.id);
+		if (p) placeChild(item.view, item.size, p.centerXPx, p.centerYPx, cw, ch, out, rects);
+	}
+}
+function anchorOffsetForBlockTopLeft(group, leftPx, topPx, cw, ch) {
+	const layout = resolveLayoutConfig(group.layout, cw, ch);
+	if (!layout) return null;
+	const items = flowItems(group, cw, ch);
+	if (items.length === 0) return null;
+	const block = layoutBlockSize(layout, items);
+	const { ox, oy } = anchorEdges(layout.anchor);
+	const invert = (edge, pos, size, dim) => edge === "start" ? pos : edge === "end" ? dim - pos - size : pos - (dim - size) / 2;
+	return {
+		x: invert(ox, leftPx, block.widthPx, cw),
+		y: invert(oy, topPx, block.heightPx, ch)
+	};
+}
+function computeTreeLayout(roots, cw, ch, rects) {
+	const out = [];
+	const walk = (view) => {
+		const layout = resolveLayoutConfig(view.layout, cw, ch);
+		if (layout) {
+			const items = flowItems(view, cw, ch);
+			placeGroup(view, layout, cw, ch, out, void 0, rects, items);
+			const placed = new Set(items.map((i) => i.id));
+			for (const child of view.children) {
+				if (child.visible === false) continue;
+				if (!placed.has(child.id)) walk(child);
+			}
+			return;
+		}
+		for (const child of view.children) if (child.visible !== false) walk(child);
+	};
+	for (const root of roots) if (root.visible !== false) walk(root);
+	return out;
+}
+function computeGroupBlockRects(roots, cw, ch) {
+	const rects = /* @__PURE__ */ new Map();
+	computeTreeLayout(roots, cw, ch, rects);
+	return rects;
+}
 var PerformanceTracker = class {
 	frameTimesMs = [];
 	frameTimesIndex = 0;
@@ -1236,6 +1498,7 @@ function shaderRendererGPU() {
 	let rootId = null;
 	const parentToChildren = /* @__PURE__ */ new Map();
 	let pendingRegistrationQueue = [];
+	let pendingNodeUpdates = [];
 	const pipelineCache = createPipelineCache({
 		maxSize: 4,
 		dispose: (bc) => disposeComposition(bc)
@@ -1426,6 +1689,110 @@ function shaderRendererGPU() {
 			writeSyntheticScalar(node, "_childBounds_halfHeight", b.halfHeight);
 		}
 	};
+	let layoutDirty = false;
+	const markLayoutDirty = () => {
+		layoutDirty = true;
+		requestRender();
+	};
+	const anyLayoutGroups = () => {
+		for (const node of nodes.values()) {
+			const m = node.metadata.flow?.mode;
+			if (m === "column" || m === "row") return true;
+		}
+		return false;
+	};
+	const buildLayoutView = (node) => {
+		const snap = {};
+		for (const [k, u] of Object.entries(node.uniforms)) snap[k] = u._rawDimensional !== void 0 ? u._rawDimensional : u.value;
+		const posProp = node.boundingBoxDeclaration?.propBindings?.x?.prop ?? node.boundingBoxDeclaration?.propBindings?.y?.prop;
+		const posValue = posProp ? node.uniforms[posProp]?.value : void 0;
+		const positionDriven = !!(posProp && (posValue?.type === "mouse-position" || node.metadata.maps?.[posProp]));
+		return {
+			id: node.id,
+			componentName: node.componentName,
+			visible: node.metadata.visible !== false,
+			absolute: node.metadata.absolute === true,
+			requiresChild: node.requiresChild,
+			layout: node.metadata.flow,
+			decl: node.boundingBoxDeclaration,
+			props: snap,
+			boundingBox: node.metadata.boundingBox,
+			positionDriven,
+			children: findChildNodes(node.id).sort((a, b) => a.metadata.renderOrder - b.metadata.renderOrder).map(buildLayoutView)
+		};
+	};
+	const runLayoutPass = () => {
+		if (!anyLayoutGroups()) {
+			layoutDirty = false;
+			return;
+		}
+		const cw = pxResWidth();
+		const ch = pxResHeight();
+		if (cw <= 1 || ch <= 1) return;
+		layoutDirty = false;
+		const roots = [];
+		for (const node of nodes.values()) if (node.parentId === null) roots.push(buildLayoutView(node));
+		const writes = computeTreeLayout(roots, cw, ch);
+		for (const w of writes) {
+			const node = nodes.get(w.id);
+			if (!node) continue;
+			if (w.kind === "position") {
+				const u = node.uniforms[w.prop];
+				if (!u) continue;
+				const prev = u.value;
+				const next = prev && typeof prev === "object" ? {
+					...prev,
+					x: w.value.x,
+					y: w.value.y
+				} : w.value;
+				u.value = next;
+				writePropHandle(node, w.prop, next);
+			} else {
+				const wasActive = bboxActive(node);
+				node.metadata.boundingBox = {
+					x: {
+						value: w.xPx,
+						unit: "px"
+					},
+					y: {
+						value: w.yPx,
+						unit: "px"
+					},
+					width: {
+						value: w.widthPx,
+						unit: "px"
+					},
+					height: {
+						value: w.heightPx,
+						unit: "px"
+					},
+					origin: "top-left",
+					rotation: node.metadata.boundingBox?.rotation ?? 0,
+					...node.metadata.boundingBox?.cornerRadius ? { cornerRadius: node.metadata.boundingBox.cornerRadius } : {},
+					...node.metadata.boundingBox?.lockAspect !== void 0 ? { lockAspect: node.metadata.boundingBox.lockAspect } : {}
+				};
+				if (!wasActive && bboxActive(node)) markStructuralDirty();
+				else {
+					const bb = bboxFieldValues(node);
+					if (bb) for (const [k, v] of Object.entries(bb)) writeSyntheticScalar(node, `_bbox_${k}`, v);
+				}
+			}
+		}
+	};
+	const runLayoutPassIfDirty = () => {
+		if (layoutDirty) runLayoutPass();
+	};
+	let unsubscribeNaturalSize = null;
+	const onFontsLoadedLayout = () => {
+		if (anyLayoutGroups()) markLayoutDirty();
+	};
+	const attachLayoutListeners = () => {
+		if (!unsubscribeNaturalSize) unsubscribeNaturalSize = onNaturalSizeChange(() => {
+			if (anyLayoutGroups()) markLayoutDirty();
+		});
+		if (typeof document !== "undefined" && document.fonts?.addEventListener) document.fonts.addEventListener("loadingdone", onFontsLoadedLayout);
+	};
+	attachLayoutListeners();
 	const transformActive = (node) => needsTransformation(node.metadata.transform);
 	const ensureMapValues = (node, prop, driver) => {
 		const mv = node.mapValues[prop] ?? {
@@ -1884,6 +2251,7 @@ function shaderRendererGPU() {
 	};
 	const markStructuralDirty = () => {
 		structuralDirty = true;
+		if (anyLayoutGroups()) layoutDirty = true;
 		requestRender();
 	};
 	const requestRender = () => {
@@ -1902,6 +2270,7 @@ function shaderRendererGPU() {
 			const queueIndex = pendingRegistrationQueue.findIndex((item) => item.id === id);
 			if (queueIndex !== -1) {
 				pendingRegistrationQueue.splice(queueIndex, 1);
+				pendingNodeUpdates = pendingNodeUpdates.filter((u) => u.id !== id);
 				return;
 			}
 			removeNode(id);
@@ -1921,8 +2290,10 @@ function shaderRendererGPU() {
 				uniforms,
 				domCanvas
 			};
-			if (existing !== -1) pendingRegistrationQueue[existing] = entry;
-			else pendingRegistrationQueue.push(entry);
+			if (existing !== -1) {
+				pendingRegistrationQueue[existing] = entry;
+				pendingNodeUpdates = pendingNodeUpdates.filter((u) => u.id !== id);
+			} else pendingRegistrationQueue.push(entry);
 			return;
 		}
 		let defaultRenderOrder = 0;
@@ -1946,7 +2317,9 @@ function shaderRendererGPU() {
 			maps: metadata?.maps,
 			renderOrder: metadata?.renderOrder !== void 0 ? metadata.renderOrder : defaultRenderOrder,
 			transform: metadata?.transform,
-			boundingBox: metadata?.boundingBox
+			boundingBox: metadata?.boundingBox,
+			flow: metadata?.flow,
+			absolute: metadata?.absolute
 		};
 		const decl = componentDefinition.boundingBoxDeclaration;
 		const extraDimProps = componentDefinition.props ? buildExtraSizeProps(componentDefinition.props) : void 0;
@@ -1981,8 +2354,8 @@ function shaderRendererGPU() {
 				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);
+					if (u._rawDimensional === void 0) u._rawDimensional = u.value;
+					u.value = resolveDimensionalProp(decl, name, u._rawDimensional, origin, pxResWidth(), pxResHeight(), extraDimProps, he);
 				}
 			}
 		}
@@ -1994,10 +2367,22 @@ function shaderRendererGPU() {
 		parentToChildren.set(parentId, childrenSet);
 		updateMouseListenerRegistration();
 		markStructuralDirty();
+		if (anyLayoutGroups()) markLayoutDirty();
+	};
+	const deferUntilRegistered = (update) => {
+		if (pendingRegistrationQueue.some((q) => q.id === update.id)) pendingNodeUpdates.push(update);
 	};
 	const updateUniformValue = (nodeId, uniformName, value) => {
 		const node = nodes.get(nodeId);
-		if (!node) return;
+		if (!node) {
+			deferUntilRegistered({
+				id: nodeId,
+				kind: "uniform",
+				name: uniformName,
+				value
+			});
+			return;
+		}
 		const u = node.uniforms[uniformName];
 		if (!u) return;
 		const decl = node.boundingBoxDeclaration;
@@ -2021,6 +2406,7 @@ function shaderRendererGPU() {
 			}
 		}
 		if (uniformName === "shape") updateMouseListenerRegistration();
+		if (anyLayoutGroups()) markLayoutDirty();
 		if (u.compileTime) {
 			markStructuralDirty();
 			return;
@@ -2037,7 +2423,14 @@ function shaderRendererGPU() {
 	};
 	const updateNodeMetadata = (nodeId, metadata) => {
 		const node = nodes.get(nodeId);
-		if (!node) return;
+		if (!node) {
+			deferUntilRegistered({
+				id: nodeId,
+				kind: "metadata",
+				metadata
+			});
+			return;
+		}
 		let needsRecompose = false;
 		if (metadata.blendMode !== void 0 && node.metadata.blendMode !== metadata.blendMode) {
 			node.metadata.blendMode = metadata.blendMode;
@@ -2147,6 +2540,27 @@ function shaderRendererGPU() {
 				needsRecompose = true;
 			}
 		}
+		if ("flow" in metadata && JSON.stringify(node.metadata.flow) !== JSON.stringify(metadata.flow)) {
+			const wasActive = node.metadata.flow?.mode === "column" || node.metadata.flow?.mode === "row";
+			node.metadata.flow = metadata.flow ?? void 0;
+			const nowActive = node.metadata.flow?.mode === "column" || node.metadata.flow?.mode === "row";
+			if (wasActive && !nowActive) {
+				const restore = (id) => {
+					for (const child of findChildNodes(id)) {
+						reresolveDimensionalUniforms(child);
+						restore(child.id);
+					}
+				};
+				restore(nodeId);
+			}
+			markLayoutDirty();
+		}
+		if ("absolute" in metadata && node.metadata.absolute !== metadata.absolute) {
+			node.metadata.absolute = metadata.absolute;
+			if (metadata.absolute) reresolveDimensionalUniforms(node);
+			markLayoutDirty();
+		}
+		if (anyLayoutGroups()) markLayoutDirty();
 		if (needsRecompose) markStructuralDirty();
 		else requestRender();
 	};
@@ -2163,6 +2577,7 @@ function shaderRendererGPU() {
 		nodes.delete(id);
 		updateMouseListenerRegistration();
 		markStructuralDirty();
+		if (anyLayoutGroups()) markLayoutDirty();
 	};
 	const updateMouseDrivers = () => {
 		const deltaTime = frameParams.deltaTime;
@@ -2330,6 +2745,7 @@ function shaderRendererGPU() {
 			}
 			reresolveDimensionalUniforms(node);
 		}
+		runLayoutPass();
 		for (const c of liveCompositions) {
 			writeSystemUniforms(c.store);
 			c.store.flush();
@@ -2437,6 +2853,7 @@ function shaderRendererGPU() {
 					updateMouseDrivers();
 					updateAnimatedTime();
 					updateChildBounds();
+					runLayoutPassIfDirty();
 				},
 				ensureComposition: () => {
 					if (structuralDirty || desiredHash === null) {
@@ -2622,6 +3039,10 @@ function shaderRendererGPU() {
 		const queue = [...pendingRegistrationQueue];
 		pendingRegistrationQueue = [];
 		for (const q of queue) registerNode(q.id, q.definition.fragment, q.parentId, q.metadata, q.uniforms, q.definition, q.domCanvas);
+		const updates = pendingNodeUpdates;
+		pendingNodeUpdates = [];
+		for (const u of updates) if (u.kind === "uniform") updateUniformValue(u.id, u.name, u.value);
+		else updateNodeMetadata(u.id, u.metadata);
 	};
 	const fail = (reason, error) => {
 		if (failureReason) return;
@@ -2718,6 +3139,7 @@ function shaderRendererGPU() {
 		forceFullFrameRate = forceFullFps;
 		rendererColorSpace = colorSpace;
 		rendererToneMapping = toneMapping;
+		attachLayoutListeners();
 		isInitializing = true;
 		initializationAbortController = new AbortController();
 		const abort = initializationAbortController;
@@ -2835,6 +3257,9 @@ function shaderRendererGPU() {
 		}
 		stopAnimation();
 		detachUncapturedErrorHandler();
+		unsubscribeNaturalSize?.();
+		unsubscribeNaturalSize = null;
+		if (typeof document !== "undefined" && document.fonts?.removeEventListener) document.fonts.removeEventListener("loadingdone", onFontsLoadedLayout);
 		try {
 			rootCtx?.release?.();
 		} catch {}
@@ -2851,6 +3276,7 @@ function shaderRendererGPU() {
 		rootId = null;
 		parentToChildren.clear();
 		pendingRegistrationQueue = [];
+		pendingNodeUpdates = [];
 		isRendererReady = false;
 		pendingResize = null;
 		isResizeScheduled = false;
@@ -3247,4 +3673,4 @@ const boxLocalToScreenUV = (bx, by, g) => {
 		y: sqy + g.centerY
 	};
 };
-export { DEFAULT_BOUNDING_BOX, GpuUnavailableError, MAX_COLOR_STOPS, SHAPE3D_DEFAULTS, SHAPE3D_TYPES, SVG3D_DEFAULTS, SVG3D_TYPES, boxLocalToScreenUV, createGpuUniformsMap, createRendererFromJSON, debugError, debugWarn, destroyDefaultGpuDevice, getWebGPUSupport, is3dShapeType, isDimensionalValue, isGpuUnavailableError, isShadersDebug, isSvg3dShapeType, isVolumetricShapeType, isWebGPUSupported, resolveBoundingBox, resolveMaskDependencies, resolveStops, rootPassthrough, screenUVToBoxLocal, setShadersDebug, shaderRendererGPU, shape3dBoundingRadius, sortStops };
+export { DEFAULT_BOUNDING_BOX, GpuUnavailableError, MAX_COLOR_STOPS, SHAPE3D_DEFAULTS, SHAPE3D_TYPES, SVG3D_DEFAULTS, SVG3D_TYPES, anchorOffsetForBlockTopLeft, boxLocalToScreenUV, computeBoundsShift, computeGroupBlockRects, computeLayout, computeTreeLayout, createGpuUniformsMap, createRendererFromJSON, debugError, debugWarn, destroyDefaultGpuDevice, getNaturalSize, getWebGPUSupport, is3dShapeType, isDimensionalValue, isGpuUnavailableError, isShadersDebug, isSvg3dShapeType, isVolumetricShapeType, isWebGPUSupported, layoutBlockSize, measureChild, measureNode, measureText, measureTextBlock, onNaturalSizeChange, registerNaturalSize, resolveBoundingBox, resolveLayoutConfig, resolveMaskDependencies, resolveStops, rootPassthrough, screenUVToBoxLocal, setShadersDebug, shaderRendererGPU, shape3dBoundingRadius, sortStops, wrapLines };