diff --git a/CMakeLists.txt b/CMakeLists.txt
new file mode 100644
index 0000000..42360bd
--- /dev/null
+++ b/CMakeLists.txt
@@ -0,0 +1,12 @@
+cmake_minimum_required(VERSION 3.24)
+
+add_library(signalsmith-basics INTERFACE)
+target_include_directories(signalsmith-basics INTERFACE
+	${CMAKE_CURRENT_SOURCE_DIR}/include
+	${CMAKE_CURRENT_SOURCE_DIR}/modules
+)
+
+add_subdirectory(${CMAKE_CURRENT_SOURCE_DIR}/modules/linear)
+target_link_libraries(signalsmith-basics INTERFACE
+	signalsmith-linear
+)
diff --git a/analyser.h b/analyser.h
index aedb097..47e7cee 100644
--- a/analyser.h
+++ b/analyser.h
@@ -4,6 +4,12 @@ Released under the Boost Software License (see LICENSE.txt) */
 
 #include "stfx/stfx-library.h"
 
+#include "dsp/curves.h"
+#include "linear/stft.h"
+#include "linear/linear.h"
+
+#include <vector>
+
 namespace signalsmith { namespace basics {
 
 template<class BaseEffect>
@@ -15,22 +21,45 @@ using AnalyserDouble = stfx::LibraryEffect<double, AnalyserSTFX>;
 template<class BaseEffect>
 struct AnalyserSTFX : public BaseEffect {
 	using typename BaseEffect::Sample;
+	using Complex = std::complex<Sample>;
 	using typename BaseEffect::ParamRange;
 	using typename BaseEffect::ParamStepped;
+	
+	static constexpr Sample stftBlockMs = 30, stftIntervalMs = 5;
+	
+	ParamRange barkResolution = 10;
 
 	template<class Storage>
 	void state(Storage &storage) {
 		storage.info("[Basics] Analyser", "A Bark-scale spectrum analyser");
 		storage.version(0);
+		
+		storage.range("barkResolution", barkResolution)
+			.info("res.", "in Bark scale")
+			.range(1, 10, 25)
+			.unit("", 0);
+		
+		if (storage.extra()) {
+			storage("spectrum", spectrum);
+		}
 	}
 
 	template<class Config>
 	void configureSTFX(Config &config) {
-		config.outputChannels = config.inputChannels;
+		sampleRate = config.sampleRate;
+		channels = config.outputChannels = config.inputChannels;
 		config.auxInputs = config.auxOutputs = {};
+
+		stft.configure(channels, 0, stftBlockMs*0.001*sampleRate, stftIntervalMs*0.001*sampleRate);
+		subRate = sampleRate/stft.defaultInterval();
+		bands = spectrum.resize(channels, barkResolution, sampleRate);
+		updateBands();
+		tmp.resize(stft.defaultInterval());
 	}
 	
-	void reset() {}
+	void reset() {
+		spectrum.reset();
+	}
 	
 	template<class Io, class Config, class Block>
 	void processSTFX(Io &io, Config &config, Block &block) {
@@ -42,7 +71,167 @@ struct AnalyserSTFX : public BaseEffect {
 			}
 		}
 		
+		bool processedSpectrum = false;
+		size_t index = 0;
+		while (index < block.length) {
+			size_t remaining = stft.defaultInterval() - stft.samplesSinceAnalysis();
+			size_t consume = std::min<size_t>(remaining, block.length - index);
+			// copy input
+			for (size_t c = 0; c < config.inputChannels; ++c) {
+				auto &input = io.input[c];
+				for (size_t i = 0; i < consume; ++i) {
+					tmp[i] = input[index + i];
+				}
+				stft.writeInput(c, consume, tmp.data());
+			}
+			stft.moveInput(consume);
+			if (remaining == consume) {
+				stft.analyse();
+				stftStep();
+				processedSpectrum = true;
+			}
+			index += consume;
+		}
+		
+		if (processedSpectrum && block.wantsMeters()) {
+			for (size_t c = 0; c < channels; ++c) {
+				size_t offset = c*bands;
+				auto state2 = linear.wrap(state2Real.data() + offset, state2Imag.data() + offset, bands);
+				linear.wrap(spectrum.energy[c]) = state2.norm();
+			}
+		}
 	}
+	
+	template<class Storage>
+	void meterState(Storage &storage) {
+		storage("spectrum", spectrum);
+	}
+	
+private:
+	signalsmith::linear::DynamicSTFT<Sample> stft;
+	signalsmith::linear::Linear linear;
+	std::vector<Sample> tmp;
+	double prevBarkResolution = -1;
+
+	Sample sampleRate, subRate;
+	size_t channels = 0;
+	size_t bands = 0;
+	std::vector<Sample> inputBin;
+	std::vector<Sample> bandInputReal, bandInputImag;
+	std::vector<Sample> state1Real, state1Imag;
+	std::vector<Sample> state2Real, state2Imag;
+	std::vector<Sample> twistReal, twistImag, inputGain;
+	
+	void updateBands() {
+		linear.reserve<Sample>(bands);
+		
+		bandInputReal.resize(bands*channels);
+		bandInputImag.resize(bands*channels);
+		state1Real.resize(bands*channels);
+		state1Imag.resize(bands*channels);
+		linear.wrap(state1Real) = 0;
+		linear.wrap(state1Imag) = 0;
+		state2Real.resize(bands*channels);
+		state2Imag.resize(bands*channels);
+		linear.wrap(state2Real) = 0;
+		linear.wrap(state2Imag) = 0;
+
+		inputBin.resize(0);
+		twistReal.resize(0);
+		twistImag.resize(0);
+
+		for (size_t b = 0; b < bands; ++b) {
+			Sample hz = spectrum.hz[b];
+			Sample bwHz = spectrum.bwHz[b];
+			
+			inputBin.push_back(stft.freqToBin(hz/sampleRate));
+			Sample freq = Sample(2*M_PI/subRate)*hz;
+			Sample bw = Sample(2*M_PI/subRate)*bwHz;
+			Complex twist = std::exp(Complex{-bw, freq});
+			twistReal.push_back(twist.real());
+			twistImag.push_back(twist.imag());
+		}
+		inputGain.resize(bands);
+		linear.wrap(inputGain) = 1 - linear.wrap(twistReal, twistImag).abs();
+	}
+	
+	void stftStep() {
+		if (barkResolution != prevBarkResolution) {
+			prevBarkResolution = barkResolution;
+			bands = spectrum.resize(channels, barkResolution, sampleRate);
+			updateBands();
+		}
+
+		// Load inputs from the spectrum
+		Sample scalingFactor = Sample(1)/stft.defaultInterval();
+		for (size_t c = 0; c < channels; ++c) {
+			auto *spectrum = stft.spectrum(c);
+			auto *inputR = bandInputReal.data() + bands*c;
+			auto *inputI = bandInputImag.data() + bands*c;
+			for (size_t b = 0; b < bands; ++b) {
+				Sample index = std::min<Sample>(inputBin[b], stft.bands() - Sample(1.001));
+				size_t indexLow = std::floor(index);
+				Sample indexFrac = index - std::floor(index);
+				Complex v = spectrum[indexLow] + (spectrum[indexLow + 1] - spectrum[indexLow])*indexFrac;
+				v *= scalingFactor;
+				inputR[b] = v.real();
+				inputI[b] = v.imag();
+			}
+		}
+
+		auto twist = linear.wrap(twistReal, twistImag);
+		auto gain = linear.wrap(inputGain);
+		for (size_t c = 0; c < channels; ++c) {
+			size_t offset = c*bands;
+			auto state1 = linear.wrap(state1Real.data() + offset, state1Imag.data() + offset, bands);
+			auto state2 = linear.wrap(state2Real.data() + offset, state2Imag.data() + offset, bands);
+			auto input = linear.wrap(bandInputReal.data() + offset, bandInputImag.data() + offset, bands);
+			state1 = state1*twist + input*gain;
+			state2 = state2*twist + state1*gain;
+		}
+	}
+
+	struct Spectrum {
+		bool bandsChanged = false;
+		std::vector<Sample> hz, bwHz;
+		std::vector<std::vector<Sample>> energy;
+		
+		size_t resize(size_t channels, Sample barkResolution, Sample sampleRate) {
+			bandsChanged = true;
+			hz.resize(0);
+			bwHz.resize(0);
+
+			auto barkScale = signalsmith::curves::Reciprocal<Sample>::barkScale();
+			Sample barkStep = 1/barkResolution, barkEnd = barkScale.inverse(sampleRate/2);
+			for (Sample bark = barkScale.inverse(0); bark < barkEnd; bark += barkStep) {
+				hz.push_back(barkScale(bark));
+				bwHz.push_back(barkScale.dx(bark)*barkStep);
+			}
+			hz.push_back(sampleRate/2);
+			bwHz.push_back(barkScale.dx(barkEnd)*barkStep);
+			
+			energy.resize(channels);
+			for (auto &e : energy) e.resize(hz.size());
+
+			return hz.size();
+		}
+		
+		void reset() {
+			for (auto &e : energy) {
+				for (auto &v : e) v = 0;
+			}
+		}
+		
+		template<class Storage>
+		void state(Storage &storage) {
+			if (bandsChanged) {
+				bandsChanged = false;
+				storage.extra("$type", "Spectrum");
+				storage("hz", hz);
+			}
+			storage("energy", energy);
+		}
+	} spectrum;
 };
 
 }} // namespace
diff --git a/clap/CMakeLists.txt b/clap/CMakeLists.txt
index b64f579..b7b73fe 100644
--- a/clap/CMakeLists.txt
+++ b/clap/CMakeLists.txt
@@ -1,6 +1,7 @@
 cmake_minimum_required(VERSION 3.28)
 
 set(CMAKE_CXX_VISIBILITY_PRESET hidden)
+set(CMAKE_C_VISIBILITY_PRESET hidden)
 set(CMAKE_VISIBILITY_INLINES_HIDDEN ON)
 
 project(plugins VERSION 1.0.0)
diff --git a/clap/Makefile b/clap/Makefile
index 2df44f6..7259d1a 100644
--- a/clap/Makefile
+++ b/clap/Makefile
@@ -48,4 +48,5 @@ format:
 dev: release-$(PLUGIN)_clap
 	/Applications/REAPER.app/Contents/MacOS/REAPER REAPER/$(PLUGIN)/$(PLUGIN).RPP
 
-wclap: emscripten-$(PLUGIN)_wclap
\ No newline at end of file
+wclap: emscripten-$(PLUGIN)_wclap
+	./wclap-tar.sh out/Release/$(PLUGIN).wclap out/
\ No newline at end of file
diff --git a/clap/wclap-tar.sh b/clap/wclap-tar.sh
new file mode 100755
index 0000000..09ecf3a
--- /dev/null
+++ b/clap/wclap-tar.sh
@@ -0,0 +1,14 @@
+#!/usr/bin/env sh
+
+name="$(basename $1)"
+
+outDir="${2:-..}"
+pushd "${outDir}"
+outDir=`pwd`
+popd
+
+echo $name
+
+cd $1
+rm -f "${outDir}/${name}.tar.gz"
+tar --exclude=".*" -vczf "${outDir}/${name}.tar.gz" *
diff --git a/modules/linear b/modules/linear
index 157b448..4c89993 160000
--- a/modules/linear
+++ b/modules/linear
@@ -1 +1 @@
-Subproject commit 157b448e390663e78d845ca9f8dad65140f686ad
+Subproject commit 4c8999385c725e619723346bf8f415010fed9c4c
diff --git a/stfx/stfx-library.h b/stfx/stfx-library.h
index a87a797..4932ce6 100644
--- a/stfx/stfx-library.h
+++ b/stfx/stfx-library.h
@@ -164,7 +164,9 @@ namespace stfx {
 			// per-block automation gradient rate
 			double blockFade;
 			// we might need some additional setup on the fiand/or after a directly
-			bool firstBlockAfterReset = false;
+			bool firstBlockAfterReset;
+			bool metersRequested;
+			bool &metersChecked;
 
 			template<class Param>
 			bool paramsChanging(Param &param) const {
@@ -178,7 +180,7 @@ namespace stfx {
 			// Block length in samples
 			int length;
 			
-			Block(int length, double fadeStart, double fadeStep, bool firstBlockAfterReset=false) : fadeStart(fadeStart), fadeStep(fadeStep), blockFade(1.0/length), firstBlockAfterReset(firstBlockAfterReset), length(length) {}
+			Block(int length, double fadeStart, double fadeStep, bool firstBlockAfterReset, bool wantsMeters, bool &metersChecked) : fadeStart(fadeStart), fadeStep(fadeStep), blockFade(1.0/length), firstBlockAfterReset(firstBlockAfterReset), metersRequested(wantsMeters), metersChecked(metersChecked), length(length) {}
 			// Not copyable, because that's probably a mistake
 			Block(const Block &) = delete;
 			Block & operator =(const Block&) = delete;
@@ -278,8 +280,9 @@ namespace stfx {
 				callback(0, length);
 			}
 			
-			constexpr bool wantsMeters() const {
-				return false;
+			bool wantsMeters() const {
+				metersChecked = true;
+				return metersRequested;
 			}
 		};
 		
@@ -358,6 +361,22 @@ namespace stfx {
 		
 		template<class Presets>
 		void presets(Presets &) {}
+
+		// passes ownership of any meter values back to the audio thread
+		void wantsMeters(bool meters=true) {
+			metersReady.clear();
+			if (meters) {
+				metersRequested.test_and_set();
+			} else {
+				metersRequested.clear();
+			}
+		}
+		// whether the meter values can be read
+		bool hasMeters() const {
+			return metersReady.test();
+		}
+	protected:
+		std::atomic_flag metersRequested = ATOMIC_FLAG_INIT, metersReady = ATOMIC_FLAG_INIT;
 	};
 
 	/// Creates an effect class from an effect template, with optional extra config.
@@ -493,7 +512,7 @@ namespace stfx {
 			process(buffers, buffers, blockLength);
 		}
 
-		/// Wraps the common `process(float** inputs, float** outputs, int length)` call into the `.process(io, config, block)`.
+		/// Wraps the common `process(float** inputs, float** outputs, int length)` call into the `.processSTFX(io, config, block)`.
 		/// It actually accepts any objects which support `inputs[channel][index]`, so you could write adapters for interleaved buffers etc.
 		template<class Inputs, class Outputs>
 		void process(Inputs &&inputs, Outputs &&outputs, int blockLength) {
@@ -522,7 +541,8 @@ namespace stfx {
 				Outputs output;
 			};
 			Io io{inputs, outputs};
-			Block block(blockLength, fadeRatio, fadeRatioStep, justHadReset);
+			bool metersChecked = false;
+			Block block(blockLength, fadeRatio, fadeRatioStep, justHadReset, this->metersRequested.test(), metersChecked);
 			
 			((EffectClass *)this)->processSTFX(io, (const Config &)config, (const Block &)block);
 
@@ -535,6 +555,12 @@ namespace stfx {
 			justHadReset = false;
 			for (auto param : params.rangeParams) param->_libEndBlock();
 			for (auto param : params.stepParams) param->_libEndBlock();
+			
+			// Meters are filled - pass ownership of meter values to the main thread
+			if (this->metersRequested.test() && metersChecked) {
+				this->metersRequested.clear();
+				this->metersReady.test_and_set();
+			}
 		}
 	};
 
diff --git a/stfx/storage/storage.h b/stfx/storage/storage.h
index f809bc2..8adc62a 100644
--- a/stfx/storage/storage.h
+++ b/stfx/storage/storage.h
@@ -204,7 +204,7 @@ private:
 	}
 	
 	template<class Item>
-	void readValue(std::vector<Item> &array) {
+	void readVector(std::vector<Item> &array) {
 		if (!cbor.isArray()) return;
 		size_t length = 0;
 		cbor = cbor.forEach([&](Cbor item, size_t index){
@@ -217,13 +217,18 @@ private:
 		array.resize(length);
 	}
 
+	template<class Item>
+	void readValue(std::vector<Item> &array) {
+		readVector(array);
+	}
+
 #define STORAGE_TYPED_ARRAY(T) \
 	void readValue(std::vector<T> &array) { \
 		if (cbor.isTypedArray()) { \
 			array.resize(cbor.typedArrayLength()); \
 			cbor.readTypedArray(array); \
 		} else { \
-			readValue<std::vector<T>>(array); \
+			readVector<T>(array); \
 		} \
 	}
 	STORAGE_TYPED_ARRAY(uint8_t)
diff --git a/stfx/ui/html/generic.html b/stfx/ui/html/generic.html
index 8d8ccff..0d448d9 100644
--- a/stfx/ui/html/generic.html
+++ b/stfx/ui/html/generic.html
@@ -7,15 +7,15 @@
 				box-sizing: border-box;
 			}
 			body {
-				display: grid;
-				grid-template-areas: "header" "params";
-				grid-template-rows: min-content 1fr;
+				display: flex;
+				flex-direction: column;
 				
 				margin: 0;
 				padding: 0;
 				width: 100vw;
 				max-width: 100vw;
 				height: 100vh;
+				min-height: 100vh;
 				max-height: 100vh;
 				overflow: hidden;
 				
@@ -46,7 +46,7 @@
 				transform: scale(0.95, 1);
 			}
 			#params {
-				grid-area: params;
+				flex-grow: 1;
 				display: flex;
 				align-content: space-around;
 				justify-content: space-evenly;
@@ -96,6 +96,27 @@
 			.param-range-name {
 				grid-area: name;
 			}
+			
+			#plots {
+				display: flex;
+				flex-grow: 10;
+				
+			}
+			.plot {
+				display: block;
+				width: 100%;
+				flex-grow: 100;
+
+				position: relative;
+				background: linear-gradient(#222, #000 2rem);
+			}
+			.plot canvas {
+				position: absolute;
+				left: 0;
+				top: 0;
+				width: 100%;
+				height: 100%;
+			}
 		</style>
 	</head>
 	<body>
@@ -128,55 +149,188 @@
 					</div>
 				</label>
 			</template>
+			<script>
+				function drawDial(data, canvas) {
+					let scale = window.devicePixelRatio;
+					let pixels = canvas.offsetWidth*scale;
+					if (canvas.width != pixels) canvas.width = pixels;
+					if (canvas.height != pixels) canvas.height = pixels;
+					
+					let context = canvas.getContext('2d');
+					context.resetTransform();
+					context.clearRect(0, 0, pixels, pixels);
+					
+					context.scale(pixels/2, pixels/2);
+					context.translate(1, 1);
+					
+					context.beginPath();
+					context.ellipse(0, 0, 0.8, 0.8, 0, 0, Math.PI*2);
+					context.fillStyle = '#FFF';
+					context.fill();
+
+					context.lineWidth = 0.2;
+					context.lineCap = 'round';
+					context.beginPath();
+					context.ellipse(0, 0, 0.9, 0.9, 0, Math.PI*-1.25, Math.PI*0.25);
+					context.strokeStyle = '#0001';
+					context.stroke();
+
+					let rangeUnit = data.rangeUnit;
+					if (data.gesture) rangeUnit = data._gestureUnit;
+
+					context.beginPath();
+					context.ellipse(0, 0, 0.9, 0.9, 0, Math.PI*-1.25, Math.PI*(-1.249 + rangeUnit*1.499));
+					context.strokeStyle = '#000';
+					context.stroke();
+				}
+			</script>
 		</section>
+		<template @foreach>
+			<div class="plot" @if="${d => d.$type == 'Spectrum'}">
+				<canvas class="plot-grid" $update="${drawSpectrum}" $resize="${drawSpectrum}"></canvas>
+				<canvas class="plot-data" $update="${drawSpectrum}" $resize="${drawSpectrum}"></canvas>
+				<canvas class="plot-labels" $update="${drawSpectrum}" $resize="${drawSpectrum}"></canvas>
+			</div>
+		</template>
 		<script>
-			function drawDial(data, canvas) {
-				let scale = window.devicePixelRatio;
-				let pixels = canvas.offsetWidth*scale;
-				if (canvas.width != pixels) canvas.width = pixels;
-				if (canvas.height != pixels) canvas.height = pixels;
+			let plotColours = ['#8CF', '#FC8', '#8D8', '#F9B'];
+			function freqScale(width, lowHz, highHz) {
+				// let a = -289.614, b = 1176.76, c = 15.3385, d = -0.552833; // Bark
+				let low = lowHz/(1500 + lowHz);
+				let high = highHz/(1500 + highHz);
 				
+				let scale = width/(high - low);
+				return hz => {
+					let v = hz/(1500 + hz);
+					return scale*(v - low);
+				};
+			}
+			function drawSpectrum(data, canvas) {
 				let context = canvas.getContext('2d');
-				context.resetTransform();
-				context.clearRect(0, 0, pixels, pixels);
+				let width = canvas.offsetWidth, height = canvas.offsetHeight;
+				{
+					let pixelWidth = Math.round(width*window.devicePixelRatio);
+					let pixelHeight = Math.round(height*devicePixelRatio);
+					if (canvas.width != pixelWidth) canvas.width = pixelWidth;
+					if (canvas.height != pixelHeight) canvas.height = pixelHeight;
+					
+					context.resetTransform();
+					context.clearRect(0, 0, pixelWidth, pixelHeight);
+					context.scale(window.devicePixelRatio, window.devicePixelRatio);
+				}
 				
-				context.scale(pixels/2, pixels/2);
-				context.translate(1, 1);
+				let baseHz = 100, maxHz = data.hz[data.hz.length - 1];
+				let xScale = freqScale(width, data.hz[0], maxHz);
+				let yScale = e => height*Math.log10(e + 1e-30)*10/-105;
+				yScale = e => {
+					e = Math.pow(e, 0.12);
+					e = e*0.6/(1 - 0.6 - e + 2*e*0.6);
+					return height*(1 - e);
+				};
 				
-				context.beginPath();
-				context.ellipse(0, 0, 0.8, 0.8, 0, 0, Math.PI*2);
-				context.fillStyle = '#FFF';
-				context.fill();
-
-				context.lineWidth = 0.2;
-				context.lineCap = 'round';
-				context.beginPath();
-				context.ellipse(0, 0, 0.9, 0.9, 0, Math.PI*-1.25, Math.PI*0.25);
-				context.strokeStyle = '#0001';
-				context.stroke();
-
-				let rangeUnit = data.rangeUnit;
-				if (data.gesture) rangeUnit = data._gestureUnit;
-
-				context.beginPath();
-				context.ellipse(0, 0, 0.9, 0.9, 0, Math.PI*-1.25, Math.PI*(-1.249 + rangeUnit*1.499));
-				context.strokeStyle = '#000';
-				context.stroke();
+				if (canvas.classList.contains('plot-grid')) {
+					context.beginPath();
+					context.lineWidth = 1;
+					context.strokeStyle = '#555';
+					for (let baseHz = 100; baseHz < maxHz; baseHz *= 10) {
+						for (let i = 1; i < 10; ++i) {
+							let hz = baseHz*i;
+							let x = xScale(hz);
+							context.moveTo(x, 0);
+							context.lineTo(x, height);
+						}
+					}
+					for (let db = 0; db >= -240; db -= 12) {
+						let e = Math.pow(10, db/10);
+						let y = yScale(e);
+						context.moveTo(0, y);
+						context.lineTo(width, y);
+					}
+					context.stroke();
+				} else if (canvas.classList.contains('plot-data')) {
+					context.lineWidth = 1.5;
+					context.lineCap = 'round';
+					context.lineJoin = 'round';
+					
+					let xMapped = Matsui.getRaw(data.hz).map(xScale);
+					data.energy.forEach((line, index) => {
+						context.strokeStyle = plotColours[index%plotColours.length];
+						context.globalAlpha = 6/(6 + index);
+						context.beginPath();
+						for (let i = 0; i < xMapped.length; ++i) {
+							let e = line[i];
+							let y = yScale(e);
+							context.lineTo(xMapped[i], y);
+						}
+						context.stroke();
+						if (1) {
+							context.fillStyle = plotColours[index%plotColours.length];
+							context.lineTo(width, height);
+							context.lineTo(0, height);
+							context.globalAlpha = 2/(10 + index);
+							context.fill();
+						}
+					});
+				} else {
+					context.globalAlpha = 1;
+					context.lineWidth = 2;
+					context.strokeStyle = '#0006';
+					context.fillStyle = '#DDD';
+					for (let baseHz = 100; baseHz < maxHz; baseHz *= 10) {
+						let text = (baseHz < 1000) ? baseHz + "Hz" : baseHz/1000 + "kHz";
+						context.strokeText(text, xScale(baseHz) + 2, height - 2);
+						context.fillText(text, xScale(baseHz) + 2, height - 2);
+					}
+					for (let db = 0; db > -105; db -= (db <= -48 ? 24 : 12)) {
+						let e = Math.pow(10, db/10);
+						let y = yScale(e);
+						context.strokeText(db + "dB", 2, y + 4 + 4*(db == 0));
+						context.fillText(db + "dB", 2, y + 4 + 4*(db == 0));
+					}
+				}
 			}
 		</script>
 		
 		<script src="cbor.min.js"></script>
 		<script src="matsui-bundle.min.js"></script>
 		<script>
+			Matsui.global.attributes.resize = (element, fn) => {
+				element.classList.add('_matsuiResize');
+				element._matsuiResize = fn;
+			};
+			addEventListener('resize', e => {
+				document.querySelectorAll('._matsuiResize').forEach(e => {
+					let fn = e._matsuiResize;
+					if (fn) fn(e, e.offsetWidth, e.offsetHeight);
+				});
+			});
+
 			let state = Matsui.replace(document.body, {name: "..."});
 			state.trackMerges(merge => {
 				window.parent.postMessage(CBOR.encode(merge), '*');
 			});
 			addEventListener('message', e => {
-				state.merge(CBOR.decode(e.data));
+				let merge = CBOR.decode(e.data);
+				window.merge = merge;//console.log(merge);
+				state.merge(merge);
 			});
 			
 			window.parent.postMessage(CBOR.encode("ready"), '*');
+			
+			// Monitor framerate and send every 200ms
+			let frameMs = 100, prevFrame = Date.now(), prevSent = 100;
+			requestAnimationFrame(function nextFrame() {
+				let now = Date.now(), delta = now - prevFrame;
+				frameMs += (delta - frameMs)*frameMs/1000;
+				prevFrame = now;
+				
+				prevSent += delta;
+				if (prevSent > 200) {
+					window.parent.postMessage(CBOR.encode(["meters", frameMs/1000, 0.3]));
+					prevSent = 0;
+				}
+				requestAnimationFrame(nextFrame);
+			});
 		</script>
 	</body>
 </html>
diff --git a/stfx/ui/html/matsui-bundle.min.js b/stfx/ui/html/matsui-bundle.min.js
index 634fe9a..99017d6 100644
--- a/stfx/ui/html/matsui-bundle.min.js
+++ b/stfx/ui/html/matsui-bundle.min.js
@@ -1,2 +1,2 @@
-(e=>{"undefined"==typeof self&&"object"==typeof module?module.exports=e():self.Matsui=e("function"==typeof Matsui?Matsui:self.Matsui)})(e=>{Object.hasOwn||(Object.hasOwn=(e,t)=>Object.prototype.hasOwnProperty.call(e,t));let t=[],d=e=>e&&"object"==typeof e,h=()=>document.createTextNode("");function n(e,t){for(;e.nextSibling&&e.nextSibling!=t;)e.nextSibling.remove()}function a(){let e=document.createDocumentFragment(),t=h(),r=h();return e.append(t,r),{t:e,o:(...e)=>{n(t,r),t.after(...e)}}}let c=Symbol();function f(t){if(d(t)){let e=t[c];for(;e&&e!=t;)e=(t=e)[c]}return t}let o=Symbol(),i=Symbol(),p=Symbol("no change"),s=Symbol("replace"),y={apply(r,n,o){return d(n)?d(r)?Array.isArray(n)?n:(n[s]&&(o?r[s]=!0:delete n[s]),Object.keys(n).forEach(e=>{var t=n[e];Object.hasOwn(r,e)?null!=t||o?r[e]=y.apply(r[e],t,o):delete r[e]:null==t&&!o||(r[e]=t)}),r):(o&&(n[s]=!0),n):n},make(n,o,e){if(!e||n!==o){if(!d(o))return o;if(!d(n))return o[s]=!0,o;if(Array.isArray(o))return o;let r={};return Object.keys(o).forEach(e=>{var t;Object.hasOwn(n,e)?void 0!==(t=y.make(n[e],o[e],!0))&&(r[e]=t):r[e]=o[e]}),Object.keys(n).forEach(e=>{Object.hasOwn(o,e)||(r[e]=null)}),e&&0==Object.keys(r).length?void 0:r}},tracked(e,t,r){if(!d(e))return e;let n=t,o=!1,i=p,l=null,a=()=>{var e;clearTimeout(l),i!==p&&(e=i,i=p,n(e))},u=(e,o)=>new Proxy(e,{get(e,t){var r=e[t];return t===c?e:d(r)?u(r,e=>o({[t]:e})):r},set(e,t,r,n){if(null==r)return delete n[t];if((r=f(r))===e[t])return!0;if(n=y.make(e[t],r),d(n))n[s]=!0;else if(r===e[t])return!0;return!!Reflect.set(e,t,r)&&(o({[t]:n}),!0)},deleteProperty(e,t){return!(t in e)||delete e[t]&&(o({[t]:null}),!0)}});return u(e,t=e=>{if(i!==p)i=y.apply(i,e,!0);else if(i=e,r)requestAnimationFrame(a),clearTimeout(l),l=setTimeout(a,0);else if(!o)for(;i!==p;)o=!0,a(),o=!1})},addHidden(e,n){return d(e)?new Proxy(e,{get(e,t){var r;return t===o?n:t===i||t===c?e:(e=e[t],r=d(n)&&t in n,y.addHidden(e,r?n[t]:p))},has(e,t){return t===o||t in e}}):e},getHidden(e,t){var r;return d(e)&&void 0!==(r=f(e[o]))?r===p?t:r:e},withoutHidden(e){return d(e)&&e[i]||e}},l=Symbol(),u=Symbol(),m=Symbol("accessed"),v=Symbol("list-keys"),w={tracked(e,n){if(!d(e))return n[m]=m,e;let o=Array.isArray(e);return new Proxy(e,{get(e,t){var r=e[t];return t===c||t===u?e:t===l?(n[m]=m,e):o&&"length"===t?(n[v]=v,r):("function"!=typeof r||r.prototype||(n[m]=m),t in n||(n[t]={}),w.tracked(r,n[t]))},ownKeys(e){return n[v]=v,Reflect.ownKeys(e)}})},pierce(e,t){return e&&e[t?u:l]||e},accessed:m},g=Symbol(),b=(i,r)=>{for(let e=0;e<i.length;++e)i[e][g]&&(i.splice(e,1,...i[e][g]),--e);if(r){let t=b(i);i=[e=>t(r(e))]}Object.freeze(i);let t=!0,l=[],n=null,e=o=>{o=w.pierce(o);let r=y.withoutHidden(o),e=f(r);if(t||n!==e)n=d(e)?e:null,t=!1,i.forEach((e,t)=>{t=l[t]={},e(w.tracked(r,t))});else{let n=y.getHidden(o,p);i.forEach((e,t)=>{var r;!function e(t,r){if(r!==p){if(t[m])return 1;if(!d(r)||Array.isArray(r)||r[s])return 1;if(t[v]){for(var n in r)if(e(t[n]||{},r[n]))return 1}else for(var o in r)if(t[o]&&e(t[o],r[o]))return 1}}(l[t],n)||(r=l[t]={},e(w.tracked(o,r,t)))})}};return e[g]=i,e},E=/\$\{/g;function j(n,o){let i=0;for(var l,a=[];l=E.exec(n);){a.push(n.slice(i,l.index));let e=l.index+2,t=e+1,r;for(;t<n.length;){if("}"==n[t]){var u=n.slice(e,t);try{r=null,new Function("return "+u);break}catch(e){r=e}}++t}if(r)return console.error(r),a.push(`{${r.message}}`),a.join("");a.push(o(n.slice(e,t))),E.lastIndex=i=t+1}return a.push(n.slice(i)),a.join("")}function O(e){let o=e.split(L);for(let n=1;n<o.length;n+=2){let e=o[n],t=e.slice(1,-1);if("{"==e[0])if("="==t)o[n]=()=>e=>e;else{let r=t.split(".");1==r.length?(r=r[0],o[n]=()=>e=>e?.[r]):o[n]=()=>t=>(r.forEach(e=>{t&&"object"==typeof t&&(t=t[e])}),t)}else o[n]=e=>e[t]}return t=>{let e=o.map(e=>"function"==typeof e?e(t):e).filter(e=>""!=e);return 1==e.length?e[0]:e.some(e=>"function"==typeof e)?t=>e.map(e=>"function"==typeof e?e(t):e).join(""):e.join("")}}function S(e){if(/^template$/i.test(e.tagName))return 1;for(var t of e.attributes||[])if("@"==t.name[0])return 1}function _(e){return/^script$/i.test(e.tagName)}function A(e){return e.slice(1).toLowerCase().replace(/-+(.)/g,(e,t)=>t.toUpperCase())}let L=/(\{[a-z0-9_=\.-]+\}|\uF74A[0-9]+\uF74B)/giu,$=/((\$[a-z0-9_-]+)*)(\{([a-z0-9_=\.-]+)\}|\uF74A([0-9]+)\uF74B)/giu,T=Symbol();function k(e){let f=e.content||e,s=[],d={},p=!1,m=(Array.from(f.childNodes).forEach(t=>{if("TEMPLATE"==t.tagName){var r=t.getAttribute("name");if(r){p=!0;let e=e=>null;t.hasAttribute("$filter")&&(e=O(t.getAttribute("$filter"))),d[r]={i:k(t),l:t.getAttribute("@scoped"),u:t[T],p:e},t.remove()}}}),function r(t,a){if(3==t.nodeType){var u=a,o=t.nodeValue;let e,n=0;for(;e=$.exec(o);){let i=o.slice(n,e.index),l=(n=$.lastIndex,e[1].split("$").slice(1)),t=e[4],r=e[5],a=null;if(t){let e="="==t?[]:t.split(".");a=t=>(e.forEach(e=>{t&&"object"==typeof t&&(t=t[e])}),t)}s.push((n,e)=>{let o=a||e[r];if("function"==typeof o)if("template"===l[0])(n=n.extend()).add("template",o),o=e=>e;else if("scoped"===l[0]){n=n.extend();let t=o;n.add("scoped",x(e=>t(e,n))),o=e=>e}return{m:u,v:(e,t,r)=>{i&&e.before(i),r=((n,e,o)=>{let i=e.map(e=>{var t=n.named[e];if(t)return t;let r="Template not found: "+e;return console.error(r),e=>({node:document.createTextNode(r),updates:[]})});return function t(r){if(r>=e.length)return o;let n=i[r];return e=>n(t(r+1))}(0)(n.dynamic)})(n,l,r),e.before(r.node),"function"==typeof o?t.push(b(r.updates,o)):r.updates.forEach(e=>e(o))}}})}if(0<n){let t=o.slice(n),r=t?e=>e.nodeValue=t:e=>e.remove();s.push(e=>({m:u,v:r}))}}else if(1===t.nodeType){if(S(t)&&a.length){if("TEMPLATE"==t.tagName&&t.hasAttribute("name"))throw Error('<template name=""> can only be immediate child');let i=t[T],l=k(t);return s.push((r,n)=>{let o;if(t.getAttribute("@scoped"))o=x(e=>{var t={};return n[i](t,e),l(r,t)});else{let e={};i?n[i](e):e=n,o=l(r,e)}return{m:a,v:(e,t,r)=>{r=o(r),e.replaceWith(r.node),t.push(b(r.updates))}}}),t.replaceWith(h())}if(_(t))return;for(var e of Array.from(t.attributes))((e,r,n)=>{if("$"==r.name[0]){e.removeAttribute(r.name);let p="-"==r.name[1],m=p?r.name.slice(2):A(r.name),t=O(r.value);s.push((f,e)=>{let s=t(e),d="function"==typeof s;return{m:n,v:(r,e,t)=>{let n=null,o,i=d?(...e)=>s(n,...e):s,l;var a,u,c;l=p?e=>{var t=d?i(r):s;null==t?r.removeAttribute(m):r.setAttribute(m,t)}:m in f.attributes?f.attributes[m](r,i,()=>n):(o=d?i:()=>s,a=r,u=m,c=o,"on"+u in a?void a.addEventListener(u,e=>c(e,a)):u in a?e=>{var t=c(a);try{a[u]=t}catch(e){null==t?a.removeAttribute(u):a.setAttribute(u,t)}}:e=>{var t=c(a);null==t&&a.hasAttribute(u)?a.removeAttribute(u):a.getAttribute(u)!=t&&a.setAttribute(u,t)}),e.push(e=>{n=e,l&&l(e),n=y.withoutHidden(w.pierce(e,!0))})}}})}})(t,e,a)}(t.childNodes||[]).forEach((e,t)=>{r(e,a.concat(t))})}(f,[]),{}),v=!1;for(var t of e.attributes||[]){var r;"@"==t.name[0]&&(v=!0,"scoped"!=(r=A(t.name)))&&(m[r]=O(t.value))}return(o,i)=>{var e,t=o;if(p||v)for(var l in o=o.extend(),d){let r=d[l],n=r.u;if(r.l){var a=x(e=>{var t={};return i[n](t,e),r.i(o,t)});o.add(l,a)}else{let e={};n?i[n](e):e=i;var a=r.p(e),u=r.i(o,e);o.add(l,u,a)}}let c=s.map(e=>e(o,i)),r=r=>{let n=f,o=(f=f.cloneNode(!0),[]),i=c.map(e=>{let t=n;return e.m.forEach(e=>t=t.childNodes[e]),t});return c.forEach((e,t)=>{e.v(i[t],o,r)}),{node:n,updates:o}};for(e in m){var n=o.transforms[e];if(!n)throw Error("Unknown transform: "+e);r=n(r,m[e](i),t,o)}return r}}let M=Symbol(),P=new WeakMap,N=/\uF74A!?[0-9]+\uF74B/gu,I=/^\uF74A![0-9]+\uF74B$/gu,F=new class R{attributes={};transforms={};named={};constructor(e){this.#h=e,this.attributes=Object.create(e?e.attributes:null),this.transforms=Object.create(e?e.transforms:null),this.named=Object.create(e?e.named:null),this.dynamic=r=>{let n=a(),o,i,l={};return{node:n.t,updates:[e=>{if(o&&l.filter(e))return i(e);var t=(o=this.getForData(e,l))(r||this.dynamic);i=b(t.updates),n.o(t.node),i(e)}]}}}#h;#g=[];extend(){return new R(this)}add(e,t,r){if("function"!=typeof(t="function"!=typeof t?t&&t.dynamic:t))throw Error("Template not a function");return e&&(this.named[e]=t),r&&this.#g.unshift({p:r,v:t}),this}addElement(e,t,r){return this.add(e,this.fromElement(t),r)}addAll(e){return(e="string"==typeof(e=e||"template")?document.querySelectorAll(e):e).forEach(e=>{let t=e.id||e.getAttribute("name"),r=null;e.hasAttribute("$filter")&&(r=O(e.getAttribute("$filter"))(null)),"TEMPLATE"===e.tagName&&t&&this.addElement(t,e,r)}),this}addTag(r,n){return(e,...t)=>{e=this.fromTag(e,...t),this.add(r,e,n)}}addScoped(e,t,r){this.add(e,x(t),r)}getForData(t,r){for(let e=0;e<this.#g.length;++e){var n=this.#g[e];if(n.p(t))return r&&(r.filter=n.p),n.v}if(this.#h)return this.#h.getForData(t,r);throw Error("No template for data")}fromElement(l){if("string"==typeof l){var e=document.querySelector(l);if(!e)throw Error("Invalid element:"+l);l=e}if(!l[M]){let u=0,c=e=>"\uf74a"+(e?"!":"")+ ++u+"\uf74b",f="__matsui_template",s={},d=[],e,t,r=l.content||l,n=(function t(r,e){function n(e){var t=c();return s[t]=f+`[${u}]=(${e});`,t}if(3===r.nodeType){var o=u,i=j(r.nodeValue,n);u>o&&(r.nodeValue=i)}else if(1===r.nodeType)if(_(r))11==r.getRootNode().nodeType&&(o=c(!0),s[o]=r.textContent,r.textContent=o,d.push(r));else if(i=e=>{for(var t of r.attributes)"$"!=t.name[0]&&"@"!=t.name[0]||(t.value=j(t.value,n))},S(r)&&!e){var o=c(!0),e=++u+"",l=c(!0),a=(r[T]=e,r.before(document.createTextNode(o)),(a=r.getAttribute("@scoped"))?`(${f},${a})`:f);s[o]=f+`[${e}]=${a}=>{`,i(),t(r.content||r,!0),r.after(document.createTextNode(l)),s[l]="};"}else{i();let e=r.firstChild;for(;e;)t(e),e=e.nextSibling}else{let e=r.firstChild;for(;e;)t(e),e=e.nextSibling}}(r,!0),l.getAttribute("@scoped")),o=e=>e,i=(Object.keys(s).length&&(e=n?f+","+n:f,t="/*"+l.outerHTML.replace(/\*\//g,"* /").replace(N,e=>`*/${s[e]}/*`)+"*/",o=new Function(e,t)),d.forEach(e=>e.remove()),function t(r){var e=_(r)?r.textContent:r.nodeValue;if(I.test(e))r.remove();else{let e=r.firstChild;for(;e;){var n=e.nextSibling;t(e),e=n}/^template$/i.test(r.tagName)&&t(r.content)}}(r),k(l));l[M]=r=>{var e;return n?x(e=>{var t={};return o(t,e),i(r,t)}):(e={},o(e),i(r,e))}}return l[M](this)}fromTag(t,...r){let e=P.get(t);if(!e){var n=[t[0]];for(let e=0;e<r.length;++e)n.push("\uf74a"+e+"\uf74b"),n.push(t[e+1]);var o=document.createElement("template");o.innerHTML=n.join(""),e=k(o),P.set(t,e)}var i={};for(let e=0;e<r.length;++e)i[e]=r[e];return e(this,i)}},U=(F.add("json",e=>{let t=h();return{node:t,updates:[e=>{t.nodeValue=JSON.stringify(e)}]}},e=>!0),F.add("text",e=>{let t=h();return{node:t,updates:[e=>{t.nodeValue=null==e?"":e}]}},e=>!d(e)),F.add("list",l=>{let e=document.createDocumentFragment(),a=[h()];e.appendChild(a[0]);let u,c,f=()=>{var e=a[a.length-2],t=a.pop();n(e,t),t.remove()},s=()=>{for(;1<a.length;)f();u=null,c=null};return{node:e,updates:[r=>{r=w.pierce(r);let n=y.getHidden(r,p);if(n!==p)if(d(r)){if(Array.isArray(r))u&&!c||(s(),u=[]);else{var t=Object.keys(r);if(r=t.map(e=>r[e]),u&&c){let e=0;for(;e<c.length&&t[e]==c[e];)++e;for(;u.length>e;)f(),u.pop()}else s(),u=[];c=t}for(;u.length>r.length;)f(),u.pop();for(u.forEach((e,t)=>{(c?c[t]:t)in n&&e(r[t])});u.length<r.length;){var e=u.length,o=l(l),i=void 0,i=(i=h(),a[a.length-1].after(i),a.push(i),i.before(o.node),b(o.updates));u.push(i),i(r[e])}}else s()}]}}),F.transforms.data=(t,r,e)=>{if("function"!=typeof(r=""==r?e=>e:r))throw Error("needs a data-function argument");return e=>((e=t(e)).updates=[b(e.updates,r)],e)},F.transforms.foreach=(r,e,t)=>{let n=t.named.list;return F.transforms.data(t=>n(e=>r(t)),e,t)},Symbol());function x(o){return t=>{let r,n=a();return{node:n.t,updates:[e=>{e=y.withoutHidden(w.pierce(e,!0)),e=o(e)(t),n.o(e.node),r=b(e.updates)},e=>r(e)]}}}function r(n,t){let o,i=[],l=(t,r)=>{i.forEach(e=>{r&&!e.j||e.v(t)})},a=(this.trackMerges=(e,t)=>(i.push({v:e,j:!!t}),this),this.addUpdates=(e,t)=>{let r=b([].concat(e));this.trackMerges(e=>{e=y.addHidden(o,e),r(e)},t),r(o)},e=>{n=e,o=y.tracked(n,l,!t)}),u=(a(n),Object.defineProperty(this,"data",{get(){return o},set(e){var t=y.make(n,e);d(t)&&(t[s]=!0),a(e),l(t,!0),d(t)&&delete t[s]}}),this.merge=(e,t)=>{var r=y.apply(n,e);r!==n&&a(r),l(e,!t)},(e,t,r,n)=>{if(!(e="string"==typeof e?document.querySelector(e):e))throw Error("invalid host");"string"==typeof t&&(t=(t=document.querySelector(t))&&F.fromElement(t)),r||"function"==typeof t||(r=t,t=null),r=r||F,t=(t=t||r.fromElement(e))(r.dynamic),this.addUpdates(t.updates,!0),r=t.node,n?e!==r&&e.replaceWith(r):e.append(r)});this.addTo=(e,t,r)=>(u(e,t,r,!1),this),this.replace=(e,t,r)=>(u(e,t,r,!0),this)}F.transforms.if=(i,l,e)=>(e[U]=l,r=>{let n=a(),o=null;return{node:n.t,updates:[e=>{var t;l(e)?(o||(t=i(r),n.o(t.node),o=b(t.updates)))(e):o&&(n.o(),o=null)}]}}),F.transforms.else=(e,t,r)=>{let n=r[U];if(n)return e=F.transforms.if(e,e=>!n(e),r),delete r[U],e;throw Error("@else must follow @if")},t=new r(t,!0);let D={merge:y,access:w,combineUpdates:b,getRaw:f,global:F,scoped:x,errors:t,Wrapped:r,wrap(e,t){return new r(e,t)},addTo(e,t,r){return D.wrap(t).addTo(e,r)},replace(e,t,r){return D.wrap(t).replace(e,r)}};return e&&setTimeout(e.bind(self,Matsui=D),0),D}),Matsui.interaction=(e=>{e.class=(r,n)=>{let o="";return e=>{var t=n();t!=o&&((o+"").split(/\s+/g).forEach(e=>{e&&r.classList.remove(e)}),(t+"").split(/\s+/g).forEach(e=>{e&&r.classList.add(e)}),o=t)}};var t=document.createElement("style");function u(e,t){return(t.ctrlKey||t.shiftKey)&&(e*=.1),t.metaKey||t.altKey?0<e?1/0:e<0?-1/0:0:e}function c(e){return!e.ctrlKey&&0==e.button}function f(t,r,n){t.hasAttribute("tabindex")||t.setAttribute("tabindex",0),t.addEventListener("keydown",e=>{r[e.key]&&(t.focus(),e.preventDefault(),e.stopPropagation(),r[e.key](e))}),n&&t.addEventListener("keyup",e=>{n[e.key]&&(e.preventDefault(),e.stopPropagation(),n[e.key](e))})}t.textContent=".interaction-implicit-focus :focus {outline: none;}",document.head.appendChild(t),window.addEventListener("pointerdown",e=>{document.body.classList.add("interaction-implicit-focus")},{capture:!0}),window.addEventListener("keydown",e=>{"Tab"==e.code&&document.body.classList.remove("interaction-implicit-focus")},{capture:!0}),window.addEventListener("keydown",e=>{"Escape"==e.code&&(document.body.classList.contains("interaction-implicit-focus")?e.target.blur():document.body.classList.add("interaction-implicit-focus"))}),e.value=(r,n,o)=>{let i="INPUT"==r.tagName&&"checkbox"==r.type,l="INPUT"==r.tagName&&("range"==r.type||"number"==r.type);if("string"!=typeof n)return e=>{r.value=n()};{let e=(n=n.split(".")).pop();function t(){let t=o();n.forEach(e=>t=t?.[e]),t&&(t[e]=i?r.checked:l?parseFloat(r.value):r.value)}return r.addEventListener("input",t),r.addEventListener("change",t),t=>{n.forEach(e=>t=t?.[e]),t&&(r.value=t[e],i)&&(r.checked=t[e])}}};let s=e.moveKeys=(t,r)=>{f(t,{ArrowDown:e=>r(0,u(1,e),t),ArrowUp:e=>r(0,u(-1,e),t),ArrowLeft:e=>r(u(-1,e),0,t),ArrowRight:e=>r(u(1,e),0,t),PageDown:e=>r(0,1/0,t),PageUp:e=>r(0,-1/0,t),Home:e=>r(-1/0,0,t),End:e=>r(1/0,0,t)})};return e.pointerLock=(e,t)=>{e._interactionPointerLock="function"==typeof t?t():""==t||t},e.move=(n,o)=>{n.classList.add("interaction-has-move"),n.style.touchAction="none",n.style.cursor=n.style.cursor||"grab";let t="grab",i,l;function r(e){e.preventDefault(),e.stopPropagation();let t=e.pageX-i,r=e.pageY-l;document.pointerLockElement==n&&(t=e.movementX,r=e.movementY),i=e.pageX,l=e.pageY,o(u(t,e),u(r,e),n)}let a=0;function e(e){n.classList.remove("interaction-move"),e.preventDefault(),e.stopPropagation(),document.pointerLockElement==n&&document.exitPointerLock(),e.pointerId&&n.releasePointerCapture(e.pointerId),--a<=0&&(a=0,n.removeEventListener("pointermove",r)),n.style.pointer=t}n.addEventListener("pointerdown",e=>{n.classList.add("interaction-move"),c(e)&&(e.preventDefault(),e.stopPropagation(),n.focus(),i=e.pageX,l=e.pageY,n.setPointerCapture(e.pointerId),n._interactionPointerLock&&n.requestPointerLock(),1==++a&&n.addEventListener("pointermove",r),t=n.style.pointer)}),n.addEventListener("pointerup",e),n.addEventListener("pointercancel",e),n.addEventListener("blur",e),s(n,(e,t,r)=>o(15*e,15*t,r))},e.scroll=(t,r)=>{t.classList.add("interaction-has-scroll"),t.addEventListener("wheel",e=>{e.preventDefault(),e.stopPropagation(),focus(),r(u(e.deltaX,e),u(e.deltaY,e),t)},{capture:!0})},e.press=(n,o)=>{n.classList.add("interaction-has-press");let i=0,l=0,a=!1,t=e=>{var t=Date.now(),r=t-l;l=t,300<r&&(i=0),n.classList.add("interaction-press"),a||o(++i,e,n),a=!0,e.pointerId&&n.setPointerCapture(e.pointerId)},e=e=>{e.preventDefault(),e.stopPropagation(),n.classList.remove("interaction-press"),a=!1,e.pointerId&&n.releasePointerCapture(e.pointerId)};f(n,{Enter:t," ":t},{Enter:e," ":e}),n.addEventListener("blur",e),n.addEventListener("pointerdown",e=>{c(e)&&(e.preventDefault(),e.stopPropagation(),n.focus(),t(e))}),n.addEventListener("pointerup",e),n.addEventListener("pointercancel",e)},e.unpress=(t,r)=>{t.classList.add("interaction-has-unpress");let n=null,o=e=>{n=Date.now(),e.preventDefault(),e.stopPropagation(),e.pointerId&&t.setPointerCapture(e.pointerId)},e=e=>{e.preventDefault(),e.stopPropagation(),null!=n&&r(e,.001*(Date.now()-n),t),n=null,e.pointerId&&t.releasePointerCapture(e.pointerId)};f(t,{Enter:o},{Enter:e}),t.addEventListener("blur",e),t.addEventListener("pointerdown",e=>{c(e)&&(t.focus(),o(e))}),t.addEventListener("pointerup",e)},e.click=(n,o)=>{let i=0,l=0;n.addEventListener("click",e=>{var t=Date.now(),r=t-l;l=t,300<r&&(i=0),o(++i,e,n)})},e.delete=(t,r)=>{t.addEventListener("keydown",e=>{"Delete"!=e.code&&"Backspace"!=e.code||(e.preventDefault(),e.stopPropagation(),r(e,t))})},e.done=(t,r)=>{let n="TEXTAREA"===t.tagName;n||t.hasAttribute("enterkeyhint")||t.setAttribute("enterkeyhint","done"),t.addEventListener("keydown",e=>{"Enter"!=e.key||n&&!e.metaKey&&!e.shiftKey||(e.preventDefault(),e.stopPropagation(),r(t.value,t))})},e.clipboard=(r,n)=>(r.classList.add("interaction-has-clipboard"),e.press(r,e=>{var t=n?"function"==typeof n?n(r):n:r.textContent;navigator.clipboard.writeText(t),r.classList.remove("interaction-clipboard"),r.classList.add("interaction-clipboard"),setTimeout(()=>{r.classList.remove("interaction-clipboard")},1e3)})),e.dropFileIf=(e,t)=>{e._interactionDropIfHandler=t},e.dropFile=(r,n)=>{r.classList.add("interaction-has-drop"),""==n&&(n=e=>{let t=r.parentNode;for(;t;){if(t._interactionDropHandler)return void t._interactionDropHandler(e);t=t.parentNode}}),r._interactionDropHandler=n;let o=r._interactionDropIfHandler||(e=>!0);function i(e){let t=[];return e.dataTransfer.items?[...e.dataTransfer.items].forEach(e=>{"file"===e.kind&&t.push(e.getAsFile())}):t=[...e.dataTransfer.files],t.length&&t}let l=null;r.addEventListener("dragenter",e=>{l=e.target;var t=i(e);t&&o(t,e)&&(r.classList.add("interaction-drop"),e.preventDefault(),e.stopPropagation())}),r.addEventListener("dragleave",e=>{e.target===l&&r.classList.remove("interaction-drop")}),r.addEventListener("dragover",e=>{e.preventDefault();var t=i(e);t&&o(t,e)||r.classList.remove("interaction-drop")}),r.addEventListener("drop",e=>{var t=i(e);r.classList.remove("interaction-drop"),document.querySelectorAll(".interaction-drop").forEach(e=>{e.classList.remove("interaction-drop")}),t&&o(t,e)&&(e.preventDefault(),e.stopPropagation(),n(t))}),"INPUT"==r.tagName&&"file"==r.type&&r.addEventListener("change",e=>{e.preventDefault();var t=[].slice.call(r.files,0);t.length&&t&&o(t,e)&&n(t)})},e.dialogWhen=(r,n)=>{if("DIALOG"!==r.tagName)throw Error("only use $dialog-when on <dialog>");function e(){r._interactionHasDialogClose||console.error("<dialog> closed with no $dialog-close to align the state")}return r.addEventListener("close",e),r.addEventListener("cancel",e),r.addEventListener("click",e=>{var t=(t=r.getBoundingClientRect()).top<=event.clientY&&event.clientY<=t.bottom&&t.left<=event.clientX&&event.clientX<=t.right;e.target!==r||t||r.close()},{capture:!0}),e=>{var t="function"==typeof n?n(r):n;t&&!r.open?r.showModal():!t&&r.open&&r.close()}},e.dialogClose=(t,r)=>{t._interactionHasDialogClose=!0,t.addEventListener("close",e=>r(t)),t.addEventListener("cancel",e=>r(t))},{keys:f}})(Matsui.global.attributes),Matsui.makeHash=(e,t)=>{var r=location.href.replace(/^[^#]*#?/,""),n=(e="string"!=typeof e?r.replace(/\?.*/,""):e)+((n=t&&"object"==typeof t?Object.keys(t).filter(e=>null!=t[e]).map(e=>""===t[e]?encodeURIComponent(e):[e,t[e]].map(encodeURIComponent).join("=")).join("&").replace(/%20/g,"+"):"")&&"?")+n;return{hash:n,push:n!=r&&r.replace(/\?.*/,"")!=e}},Matsui.merge.apply(Matsui.Wrapped.prototype,{syncHash(l){let a=this;function t(e){let t=location.href.replace(/^[^#]*#?/,""),r=t.replace(/\?.*/,""),n=t.substr(r.length+1),o={};n.replace(/\+/g,"%20").split("&").forEach(e=>{e&&(e=e.split("=").map(t=>{try{return decodeURIComponent(t)}catch(e){return t}}),o[e.shift()]=e.join("="))});var i=l(a.data);i.path!==r&&(i.path=r),i.query!==o&&(i.query=o),Matsui.merge.apply(i.state,Matsui.merge.make(i.state,e))}addEventListener("hashchange",e=>t(null)),addEventListener("popstate",e=>t(window.history.state)),t(window.history.state),a.addUpdates(e=>{var e=l(e),t=Matsui.makeHash(e.path,e.query),e=(e=Matsui.getRaw(Matsui.access.pierce(e.state)))&&JSON.parse(JSON.stringify(e));t.push?window.history.pushState(e,"","#"+t.hash):window.history.replaceState(e,"","#"+t.hash)})},syncLocalStorage(o){let i=this;function l(t){var e=o(i.data);if(null===t)for(var r in e)l(r);else{var n=localStorage.getItem(t);if(n)try{e[t]=JSON.parse(n)}catch(e){console.error("localStorage."+t,e)}}}addEventListener("storage",e=>l(e.key)),l(null),i.addUpdates(e=>{var t,r=o(e);for(t in r){var n=r[t];null==n?localStorage.removeItem(t):localStorage.setItem(t,JSON.stringify(n))}})}}),Matsui.version="latest";
-//# sourceMappingURL=matsui-bundle.min.js.map
\ No newline at end of file
+(e=>{"undefined"==typeof self&&"object"==typeof module?module.exports=e():self.Matsui=e("function"==typeof Matsui?Matsui:self.Matsui)})(e=>{Object.hasOwn||(Object.hasOwn=(e,t)=>Object.prototype.hasOwnProperty.call(e,t));let t=[],d=e=>e&&"object"==typeof e,h=()=>document.createTextNode("");function n(e,t){for(;e.nextSibling&&e.nextSibling!=t;)e.nextSibling.remove()}function a(){let e=document.createDocumentFragment(),t=h(),r=h();return e.append(t,r),{t:e,o:(...e)=>{n(t,r),t.after(...e)}}}let c=Symbol();function f(t){if(d(t)){let e=t[c];for(;e&&e!=t;)e=(t=e)[c]}return t}let o=Symbol(),i=Symbol(),p=Symbol("no change"),s=Symbol("replace"),y={apply(r,n,o){return d(n)?d(r)?(Array.isArray(n)||ArrayBuffer.isView(n)||n instanceof ArrayBuffer)?n:(n[s]&&(o?r[s]=!0:delete n[s]),Object.keys(n).forEach(e=>{var t=n[e];Object.hasOwn(r,e)?null!=t||o?r[e]=y.apply(r[e],t,o):delete r[e]:null==t&&!o||(r[e]=t)}),r):(o&&(n[s]=!0),n):n},make(n,o,e){if(!e||n!==o){if(!d(o))return o;if(!d(n))return o[s]=!0,o;if(Array.isArray(o))return o;let r={};return Object.keys(o).forEach(e=>{var t;Object.hasOwn(n,e)?void 0!==(t=y.make(n[e],o[e],!0))&&(r[e]=t):r[e]=o[e]}),Object.keys(n).forEach(e=>{Object.hasOwn(o,e)||(r[e]=null)}),e&&0==Object.keys(r).length?void 0:r}},tracked(e,t,r){if(!d(e))return e;let n=t,o=!1,i=p,l=null,a=()=>{var e;clearTimeout(l),i!==p&&(e=i,i=p,n(e))},u=(e,o)=>new Proxy(e,{get(e,t){var r=e[t];return t===c?e:d(r)?u(r,e=>o({[t]:e})):r},set(e,t,r,n){if(null==r)return delete n[t];if((r=f(r))===e[t])return!0;if(n=y.make(e[t],r),d(n))n[s]=!0;else if(r===e[t])return!0;return!!Reflect.set(e,t,r)&&(o({[t]:n}),!0)},deleteProperty(e,t){return!(t in e)||delete e[t]&&(o({[t]:null}),!0)}});return u(e,t=e=>{if(i!==p)i=y.apply(i,e,!0);else if(i=e,r)requestAnimationFrame(a),clearTimeout(l),l=setTimeout(a,0);else if(!o)for(;i!==p;)o=!0,a(),o=!1})},addHidden(e,n){return d(e)?new Proxy(e,{get(e,t){var r;return t===o?n:t===i||t===c?e:(e=e[t],r=d(n)&&t in n,y.addHidden(e,r?n[t]:p))},has(e,t){return t===o||t in e}}):e},getHidden(e,t){var r;return d(e)&&void 0!==(r=f(e[o]))?r===p?t:r:e},withoutHidden(e){return d(e)&&e[i]||e}},l=Symbol(),u=Symbol(),m=Symbol("accessed"),v=Symbol("list-keys"),w={tracked(e,n){if(!d(e))return n[m]=m,e;let o=Array.isArray(e);return new Proxy(e,{get(e,t){var r=e[t];return t===c||t===u?e:t===l?(n[m]=m,e):o&&"length"===t?(n[v]=v,r):("function"!=typeof r||r.prototype||(n[m]=m),t in n||(n[t]={}),w.tracked(r,n[t]))},ownKeys(e){return n[v]=v,Reflect.ownKeys(e)}})},pierce(e,t){return e&&e[t?u:l]||e},accessed:m},g=Symbol(),b=(i,r)=>{for(let e=0;e<i.length;++e)i[e][g]&&(i.splice(e,1,...i[e][g]),--e);if(r){let t=b(i);i=[e=>t(r(e))]}Object.freeze(i);let t=!0,l=[],n=null,e=o=>{o=w.pierce(o);let r=y.withoutHidden(o),e=f(r);if(t||n!==e)n=d(e)?e:null,t=!1,i.forEach((e,t)=>{t=l[t]={},e(w.tracked(r,t))});else{let n=y.getHidden(o,p);i.forEach((e,t)=>{var r;!function e(t,r){if(r!==p){if(t[m])return 1;if(!d(r)||Array.isArray(r)||r[s])return 1;if(t[v]){for(var n in r)if(e(t[n]||{},r[n]))return 1}else for(var o in r)if(t[o]&&e(t[o],r[o]))return 1}}(l[t],n)||(r=l[t]={},e(w.tracked(o,r,t)))})}};return e[g]=i,e},E=/\$\{/g;function j(n,o){let i=0;for(var l,a=[];l=E.exec(n);){a.push(n.slice(i,l.index));let e=l.index+2,t=e+1,r;for(;t<n.length;){if("}"==n[t]){var u=n.slice(e,t);try{r=null,new Function("return "+u);break}catch(e){r=e}}++t}if(r)return console.error(r),a.push(`{${r.message}}`),a.join("");a.push(o(n.slice(e,t))),E.lastIndex=i=t+1}return a.push(n.slice(i)),a.join("")}function O(e){let o=e.split(L);for(let n=1;n<o.length;n+=2){let e=o[n],t=e.slice(1,-1);if("{"==e[0])if("="==t)o[n]=()=>e=>e;else{let r=t.split(".");1==r.length?(r=r[0],o[n]=()=>e=>e?.[r]):o[n]=()=>t=>(r.forEach(e=>{t&&"object"==typeof t&&(t=t[e])}),t)}else o[n]=e=>e[t]}return t=>{let e=o.map(e=>"function"==typeof e?e(t):e).filter(e=>""!=e);return 1==e.length?e[0]:e.some(e=>"function"==typeof e)?t=>e.map(e=>"function"==typeof e?e(t):e).join(""):e.join("")}}function S(e){if(/^template$/i.test(e.tagName))return 1;for(var t of e.attributes||[])if("@"==t.name[0])return 1}function _(e){return/^script$/i.test(e.tagName)}function A(e){return e.slice(1).toLowerCase().replace(/-+(.)/g,(e,t)=>t.toUpperCase())}let L=/(\{[a-z0-9_=\.-]+\}|\uF74A[0-9]+\uF74B)/giu,$=/((\$[a-z0-9_-]+)*)(\{([a-z0-9_=\.-]+)\}|\uF74A([0-9]+)\uF74B)/giu,T=Symbol();function k(e){let f=e.content||e,s=[],d={},p=!1,m=(Array.from(f.childNodes).forEach(t=>{if("TEMPLATE"==t.tagName){var r=t.getAttribute("name");if(r){p=!0;let e=e=>null;t.hasAttribute("$filter")&&(e=O(t.getAttribute("$filter"))),d[r]={i:k(t),l:t.getAttribute("@scoped"),u:t[T],p:e},t.remove()}}}),function r(t,a){if(3==t.nodeType){var u=a,o=t.nodeValue;let e,n=0;for(;e=$.exec(o);){let i=o.slice(n,e.index),l=(n=$.lastIndex,e[1].split("$").slice(1)),t=e[4],r=e[5],a=null;if(t){let e="="==t?[]:t.split(".");a=t=>(e.forEach(e=>{t&&"object"==typeof t&&(t=t[e])}),t)}s.push((n,e)=>{let o=a||e[r];if("function"==typeof o)if("template"===l[0])(n=n.extend()).add("template",o),o=e=>e;else if("scoped"===l[0]){n=n.extend();let t=o;n.add("scoped",x(e=>t(e,n))),o=e=>e}return{m:u,v:(e,t,r)=>{i&&e.before(i),r=((n,e,o)=>{let i=e.map(e=>{var t=n.named[e];if(t)return t;let r="Template not found: "+e;return console.error(r),e=>({node:document.createTextNode(r),updates:[]})});return function t(r){if(r>=e.length)return o;let n=i[r];return e=>n(t(r+1))}(0)(n.dynamic)})(n,l,r),e.before(r.node),"function"==typeof o?t.push(b(r.updates,o)):r.updates.forEach(e=>e(o))}}})}if(0<n){let t=o.slice(n),r=t?e=>e.nodeValue=t:e=>e.remove();s.push(e=>({m:u,v:r}))}}else if(1===t.nodeType){if(S(t)&&a.length){if("TEMPLATE"==t.tagName&&t.hasAttribute("name"))throw Error('<template name=""> can only be immediate child');let i=t[T],l=k(t);return s.push((r,n)=>{let o;if(t.getAttribute("@scoped"))o=x(e=>{var t={};return n[i](t,e),l(r,t)});else{let e={};i?n[i](e):e=n,o=l(r,e)}return{m:a,v:(e,t,r)=>{r=o(r),e.replaceWith(r.node),t.push(b(r.updates))}}}),t.replaceWith(h())}if(_(t))return;for(var e of Array.from(t.attributes))((e,r,n)=>{if("$"==r.name[0]){e.removeAttribute(r.name);let p="-"==r.name[1],m=p?r.name.slice(2):A(r.name),t=O(r.value);s.push((f,e)=>{let s=t(e),d="function"==typeof s;return{m:n,v:(r,e,t)=>{let n=null,o,i=d?(...e)=>s(n,...e):s,l;var a,u,c;l=p?e=>{var t=d?i(r):s;null==t?r.removeAttribute(m):r.setAttribute(m,t)}:m in f.attributes?f.attributes[m](r,i,()=>n):(o=d?i:()=>s,a=r,u=m,c=o,"on"+u in a?void a.addEventListener(u,e=>c(e,a)):u in a?e=>{var t=c(a);try{a[u]=t}catch(e){null==t?a.removeAttribute(u):a.setAttribute(u,t)}}:e=>{var t=c(a);null==t&&a.hasAttribute(u)?a.removeAttribute(u):a.getAttribute(u)!=t&&a.setAttribute(u,t)}),e.push(e=>{n=e,l&&l(e),n=y.withoutHidden(w.pierce(e,!0))})}}})}})(t,e,a)}(t.childNodes||[]).forEach((e,t)=>{r(e,a.concat(t))})}(f,[]),{}),v=!1;for(var t of e.attributes||[]){var r;"@"==t.name[0]&&(v=!0,"scoped"!=(r=A(t.name)))&&(m[r]=O(t.value))}return(o,i)=>{var e,t=o;if(p||v)for(var l in o=o.extend(),d){let r=d[l],n=r.u;if(r.l){var a=x(e=>{var t={};return i[n](t,e),r.i(o,t)});o.add(l,a)}else{let e={};n?i[n](e):e=i;var a=r.p(e),u=r.i(o,e);o.add(l,u,a)}}let c=s.map(e=>e(o,i)),r=r=>{let n=f,o=(f=f.cloneNode(!0),[]),i=c.map(e=>{let t=n;return e.m.forEach(e=>t=t.childNodes[e]),t});return c.forEach((e,t)=>{e.v(i[t],o,r)}),{node:n,updates:o}};for(e in m){var n=o.transforms[e];if(!n)throw Error("Unknown transform: "+e);r=n(r,m[e](i),t,o)}return r}}let M=Symbol(),P=new WeakMap,N=/\uF74A!?[0-9]+\uF74B/gu,I=/^\uF74A![0-9]+\uF74B$/gu,F=new class R{attributes={};transforms={};named={};constructor(e){this.#h=e,this.attributes=Object.create(e?e.attributes:null),this.transforms=Object.create(e?e.transforms:null),this.named=Object.create(e?e.named:null),this.dynamic=r=>{let n=a(),o,i,l={};return{node:n.t,updates:[e=>{if(o&&l.filter(e))return i(e);var t=(o=this.getForData(e,l))(r||this.dynamic);i=b(t.updates),n.o(t.node),i(e)}]}}}#h;#g=[];extend(){return new R(this)}add(e,t,r){if("function"!=typeof(t="function"!=typeof t?t&&t.dynamic:t))throw Error("Template not a function");return e&&(this.named[e]=t),r&&this.#g.unshift({p:r,v:t}),this}addElement(e,t,r){return this.add(e,this.fromElement(t),r)}addAll(e){return(e="string"==typeof(e=e||"template")?document.querySelectorAll(e):e).forEach(e=>{let t=e.id||e.getAttribute("name"),r=null;e.hasAttribute("$filter")&&(r=O(e.getAttribute("$filter"))(null)),"TEMPLATE"===e.tagName&&t&&this.addElement(t,e,r)}),this}addTag(r,n){return(e,...t)=>{e=this.fromTag(e,...t),this.add(r,e,n)}}addScoped(e,t,r){this.add(e,x(t),r)}getForData(t,r){for(let e=0;e<this.#g.length;++e){var n=this.#g[e];if(n.p(t))return r&&(r.filter=n.p),n.v}if(this.#h)return this.#h.getForData(t,r);throw Error("No template for data")}fromElement(l){if("string"==typeof l){var e=document.querySelector(l);if(!e)throw Error("Invalid element:"+l);l=e}if(!l[M]){let u=0,c=e=>"\uf74a"+(e?"!":"")+ ++u+"\uf74b",f="__matsui_template",s={},d=[],e,t,r=l.content||l,n=(function t(r,e){function n(e){var t=c();return s[t]=f+`[${u}]=(${e});`,t}if(3===r.nodeType){var o=u,i=j(r.nodeValue,n);u>o&&(r.nodeValue=i)}else if(1===r.nodeType)if(_(r))11==r.getRootNode().nodeType&&(o=c(!0),s[o]=r.textContent,r.textContent=o,d.push(r));else if(i=e=>{for(var t of r.attributes)"$"!=t.name[0]&&"@"!=t.name[0]||(t.value=j(t.value,n))},S(r)&&!e){var o=c(!0),e=++u+"",l=c(!0),a=(r[T]=e,r.before(document.createTextNode(o)),(a=r.getAttribute("@scoped"))?`(${f},${a})`:f);s[o]=f+`[${e}]=${a}=>{`,i(),t(r.content||r,!0),r.after(document.createTextNode(l)),s[l]="};"}else{i();let e=r.firstChild;for(;e;)t(e),e=e.nextSibling}else{let e=r.firstChild;for(;e;)t(e),e=e.nextSibling}}(r,!0),l.getAttribute("@scoped")),o=e=>e,i=(Object.keys(s).length&&(e=n?f+","+n:f,t="/*"+l.outerHTML.replace(/\*\//g,"* /").replace(N,e=>`*/${s[e]}/*`)+"*/",o=new Function(e,t)),d.forEach(e=>e.remove()),function t(r){var e=_(r)?r.textContent:r.nodeValue;if(I.test(e))r.remove();else{let e=r.firstChild;for(;e;){var n=e.nextSibling;t(e),e=n}/^template$/i.test(r.tagName)&&t(r.content)}}(r),k(l));l[M]=r=>{var e;return n?x(e=>{var t={};return o(t,e),i(r,t)}):(e={},o(e),i(r,e))}}return l[M](this)}fromTag(t,...r){let e=P.get(t);if(!e){var n=[t[0]];for(let e=0;e<r.length;++e)n.push("\uf74a"+e+"\uf74b"),n.push(t[e+1]);var o=document.createElement("template");o.innerHTML=n.join(""),e=k(o),P.set(t,e)}var i={};for(let e=0;e<r.length;++e)i[e]=r[e];return e(this,i)}},U=(F.add("json",e=>{let t=h();return{node:t,updates:[e=>{t.nodeValue=JSON.stringify(e)}]}},e=>!0),F.add("text",e=>{let t=h();return{node:t,updates:[e=>{t.nodeValue=null==e?"":e}]}},e=>!d(e)),F.add("list",l=>{let e=document.createDocumentFragment(),a=[h()];e.appendChild(a[0]);let u,c,f=()=>{var e=a[a.length-2],t=a.pop();n(e,t),t.remove()},s=()=>{for(;1<a.length;)f();u=null,c=null};return{node:e,updates:[r=>{r=w.pierce(r);let n=y.getHidden(r,p);if(n!==p)if(d(r)){if(Array.isArray(r))u&&!c||(s(),u=[]);else{var t=Object.keys(r);if(r=t.map(e=>r[e]),u&&c){let e=0;for(;e<c.length&&t[e]==c[e];)++e;for(;u.length>e;)f(),u.pop()}else s(),u=[];c=t}for(;u.length>r.length;)f(),u.pop();for(u.forEach((e,t)=>{(c?c[t]:t)in n&&e(r[t])});u.length<r.length;){var e=u.length,o=l(l),i=void 0,i=(i=h(),a[a.length-1].after(i),a.push(i),i.before(o.node),b(o.updates));u.push(i),i(r[e])}}else s()}]}}),F.transforms.data=(t,r,e)=>{if("function"!=typeof(r=""==r?e=>e:r))throw Error("needs a data-function argument");return e=>((e=t(e)).updates=[b(e.updates,r)],e)},F.transforms.foreach=(r,e,t)=>{let n=t.named.list;return F.transforms.data(t=>n(e=>r(t)),e,t)},Symbol());function x(o){return t=>{let r,n=a();return{node:n.t,updates:[e=>{e=y.withoutHidden(w.pierce(e,!0)),e=o(e)(t),n.o(e.node),r=b(e.updates)},e=>r(e)]}}}function r(n,t){let o,i=[],l=(t,r)=>{i.forEach(e=>{r&&!e.j||e.v(t)})},a=(this.trackMerges=(e,t)=>(i.push({v:e,j:!!t}),this),this.addUpdates=(e,t)=>{let r=b([].concat(e));this.trackMerges(e=>{e=y.addHidden(o,e),r(e)},t),r(o)},e=>{n=e,o=y.tracked(n,l,!t)}),u=(a(n),Object.defineProperty(this,"data",{get(){return o},set(e){var t=y.make(n,e);d(t)&&(t[s]=!0),a(e),l(t,!0),d(t)&&delete t[s]}}),this.merge=(e,t)=>{var r=y.apply(n,e);r!==n&&a(r),l(e,!t)},(e,t,r,n)=>{if(!(e="string"==typeof e?document.querySelector(e):e))throw Error("invalid host");"string"==typeof t&&(t=(t=document.querySelector(t))&&F.fromElement(t)),r||"function"==typeof t||(r=t,t=null),r=r||F,t=(t=t||r.fromElement(e))(r.dynamic),this.addUpdates(t.updates,!0),r=t.node,n?e!==r&&e.replaceWith(r):e.append(r)});this.addTo=(e,t,r)=>(u(e,t,r,!1),this),this.replace=(e,t,r)=>(u(e,t,r,!0),this)}F.transforms.if=(i,l,e)=>(e[U]=l,r=>{let n=a(),o=null;return{node:n.t,updates:[e=>{var t;l(e)?(o||(t=i(r),n.o(t.node),o=b(t.updates)))(e):o&&(n.o(),o=null)}]}}),F.transforms.else=(e,t,r)=>{let n=r[U];if(n)return e=F.transforms.if(e,e=>!n(e),r),delete r[U],e;throw Error("@else must follow @if")},t=new r(t,!0);let D={merge:y,access:w,combineUpdates:b,getRaw:f,global:F,scoped:x,errors:t,Wrapped:r,wrap(e,t){return new r(e,t)},addTo(e,t,r){return D.wrap(t).addTo(e,r)},replace(e,t,r){return D.wrap(t).replace(e,r)}};return e&&setTimeout(e.bind(self,Matsui=D),0),D}),Matsui.interaction=(e=>{e.class=(r,n)=>{let o="";return e=>{var t=n();t!=o&&((o+"").split(/\s+/g).forEach(e=>{e&&r.classList.remove(e)}),(t+"").split(/\s+/g).forEach(e=>{e&&r.classList.add(e)}),o=t)}};var t=document.createElement("style");function u(e,t){return(t.ctrlKey||t.shiftKey)&&(e*=.1),t.metaKey||t.altKey?0<e?1/0:e<0?-1/0:0:e}function c(e){return!e.ctrlKey&&0==e.button}function f(t,r,n){t.hasAttribute("tabindex")||t.setAttribute("tabindex",0),t.addEventListener("keydown",e=>{r[e.key]&&(t.focus(),e.preventDefault(),e.stopPropagation(),r[e.key](e))}),n&&t.addEventListener("keyup",e=>{n[e.key]&&(e.preventDefault(),e.stopPropagation(),n[e.key](e))})}t.textContent=".interaction-implicit-focus :focus {outline: none;}",document.head.appendChild(t),window.addEventListener("pointerdown",e=>{document.body.classList.add("interaction-implicit-focus")},{capture:!0}),window.addEventListener("keydown",e=>{"Tab"==e.code&&document.body.classList.remove("interaction-implicit-focus")},{capture:!0}),window.addEventListener("keydown",e=>{"Escape"==e.code&&(document.body.classList.contains("interaction-implicit-focus")?e.target.blur():document.body.classList.add("interaction-implicit-focus"))}),e.value=(r,n,o)=>{let i="INPUT"==r.tagName&&"checkbox"==r.type,l="INPUT"==r.tagName&&("range"==r.type||"number"==r.type);if("string"!=typeof n)return e=>{r.value=n()};{let e=(n=n.split(".")).pop();function t(){let t=o();n.forEach(e=>t=t?.[e]),t&&(t[e]=i?r.checked:l?parseFloat(r.value):r.value)}return r.addEventListener("input",t),r.addEventListener("change",t),t=>{n.forEach(e=>t=t?.[e]),t&&(r.value=t[e],i)&&(r.checked=t[e])}}};let s=e.moveKeys=(t,r)=>{f(t,{ArrowDown:e=>r(0,u(1,e),t),ArrowUp:e=>r(0,u(-1,e),t),ArrowLeft:e=>r(u(-1,e),0,t),ArrowRight:e=>r(u(1,e),0,t),PageDown:e=>r(0,1/0,t),PageUp:e=>r(0,-1/0,t),Home:e=>r(-1/0,0,t),End:e=>r(1/0,0,t)})};return e.pointerLock=(e,t)=>{e._interactionPointerLock="function"==typeof t?t():""==t||t},e.move=(n,o)=>{n.classList.add("interaction-has-move"),n.style.touchAction="none",n.style.cursor=n.style.cursor||"grab";let t="grab",i,l;function r(e){e.preventDefault(),e.stopPropagation();let t=e.pageX-i,r=e.pageY-l;document.pointerLockElement==n&&(t=e.movementX,r=e.movementY),i=e.pageX,l=e.pageY,o(u(t,e),u(r,e),n)}let a=0;function e(e){n.classList.remove("interaction-move"),e.preventDefault(),e.stopPropagation(),document.pointerLockElement==n&&document.exitPointerLock(),e.pointerId&&n.releasePointerCapture(e.pointerId),--a<=0&&(a=0,n.removeEventListener("pointermove",r)),n.style.pointer=t}n.addEventListener("pointerdown",e=>{n.classList.add("interaction-move"),c(e)&&(e.preventDefault(),e.stopPropagation(),n.focus(),i=e.pageX,l=e.pageY,n.setPointerCapture(e.pointerId),n._interactionPointerLock&&n.requestPointerLock(),1==++a&&n.addEventListener("pointermove",r),t=n.style.pointer)}),n.addEventListener("pointerup",e),n.addEventListener("pointercancel",e),n.addEventListener("blur",e),s(n,(e,t,r)=>o(15*e,15*t,r))},e.scroll=(t,r)=>{t.classList.add("interaction-has-scroll"),t.addEventListener("wheel",e=>{e.preventDefault(),e.stopPropagation(),focus(),r(u(e.deltaX,e),u(e.deltaY,e),t)},{capture:!0})},e.press=(n,o)=>{n.classList.add("interaction-has-press");let i=0,l=0,a=!1,t=e=>{var t=Date.now(),r=t-l;l=t,300<r&&(i=0),n.classList.add("interaction-press"),a||o(++i,e,n),a=!0,e.pointerId&&n.setPointerCapture(e.pointerId)},e=e=>{e.preventDefault(),e.stopPropagation(),n.classList.remove("interaction-press"),a=!1,e.pointerId&&n.releasePointerCapture(e.pointerId)};f(n,{Enter:t," ":t},{Enter:e," ":e}),n.addEventListener("blur",e),n.addEventListener("pointerdown",e=>{c(e)&&(e.preventDefault(),e.stopPropagation(),n.focus(),t(e))}),n.addEventListener("pointerup",e),n.addEventListener("pointercancel",e)},e.unpress=(t,r)=>{t.classList.add("interaction-has-unpress");let n=null,o=e=>{n=Date.now(),e.preventDefault(),e.stopPropagation(),e.pointerId&&t.setPointerCapture(e.pointerId)},e=e=>{e.preventDefault(),e.stopPropagation(),null!=n&&r(e,.001*(Date.now()-n),t),n=null,e.pointerId&&t.releasePointerCapture(e.pointerId)};f(t,{Enter:o},{Enter:e}),t.addEventListener("blur",e),t.addEventListener("pointerdown",e=>{c(e)&&(t.focus(),o(e))}),t.addEventListener("pointerup",e)},e.click=(n,o)=>{let i=0,l=0;n.addEventListener("click",e=>{var t=Date.now(),r=t-l;l=t,300<r&&(i=0),o(++i,e,n)})},e.delete=(t,r)=>{t.addEventListener("keydown",e=>{"Delete"!=e.code&&"Backspace"!=e.code||(e.preventDefault(),e.stopPropagation(),r(e,t))})},e.done=(t,r)=>{let n="TEXTAREA"===t.tagName;n||t.hasAttribute("enterkeyhint")||t.setAttribute("enterkeyhint","done"),t.addEventListener("keydown",e=>{"Enter"!=e.key||n&&!e.metaKey&&!e.shiftKey||(e.preventDefault(),e.stopPropagation(),r(t.value,t))})},e.clipboard=(r,n)=>(r.classList.add("interaction-has-clipboard"),e.press(r,e=>{var t=n?"function"==typeof n?n(r):n:r.textContent;navigator.clipboard.writeText(t),r.classList.remove("interaction-clipboard"),r.classList.add("interaction-clipboard"),setTimeout(()=>{r.classList.remove("interaction-clipboard")},1e3)})),e.dropFileIf=(e,t)=>{e._interactionDropIfHandler=t},e.dropFile=(r,n)=>{r.classList.add("interaction-has-drop"),""==n&&(n=e=>{let t=r.parentNode;for(;t;){if(t._interactionDropHandler)return void t._interactionDropHandler(e);t=t.parentNode}}),r._interactionDropHandler=n;let o=r._interactionDropIfHandler||(e=>!0);function i(e){let t=[];return e.dataTransfer.items?[...e.dataTransfer.items].forEach(e=>{"file"===e.kind&&t.push(e.getAsFile())}):t=[...e.dataTransfer.files],t.length&&t}let l=null;r.addEventListener("dragenter",e=>{l=e.target;var t=i(e);t&&o(t,e)&&(r.classList.add("interaction-drop"),e.preventDefault(),e.stopPropagation())}),r.addEventListener("dragleave",e=>{e.target===l&&r.classList.remove("interaction-drop")}),r.addEventListener("dragover",e=>{e.preventDefault();var t=i(e);t&&o(t,e)||r.classList.remove("interaction-drop")}),r.addEventListener("drop",e=>{var t=i(e);r.classList.remove("interaction-drop"),document.querySelectorAll(".interaction-drop").forEach(e=>{e.classList.remove("interaction-drop")}),t&&o(t,e)&&(e.preventDefault(),e.stopPropagation(),n(t))}),"INPUT"==r.tagName&&"file"==r.type&&r.addEventListener("change",e=>{e.preventDefault();var t=[].slice.call(r.files,0);t.length&&t&&o(t,e)&&n(t)})},e.dialogWhen=(r,n)=>{if("DIALOG"!==r.tagName)throw Error("only use $dialog-when on <dialog>");function e(){r._interactionHasDialogClose||console.error("<dialog> closed with no $dialog-close to align the state")}return r.addEventListener("close",e),r.addEventListener("cancel",e),r.addEventListener("click",e=>{var t=(t=r.getBoundingClientRect()).top<=event.clientY&&event.clientY<=t.bottom&&t.left<=event.clientX&&event.clientX<=t.right;e.target!==r||t||r.close()},{capture:!0}),e=>{var t="function"==typeof n?n(r):n;t&&!r.open?r.showModal():!t&&r.open&&r.close()}},e.dialogClose=(t,r)=>{t._interactionHasDialogClose=!0,t.addEventListener("close",e=>r(t)),t.addEventListener("cancel",e=>r(t))},{keys:f}})(Matsui.global.attributes),Matsui.makeHash=(e,t)=>{var r=location.href.replace(/^[^#]*#?/,""),n=(e="string"!=typeof e?r.replace(/\?.*/,""):e)+((n=t&&"object"==typeof t?Object.keys(t).filter(e=>null!=t[e]).map(e=>""===t[e]?encodeURIComponent(e):[e,t[e]].map(encodeURIComponent).join("=")).join("&").replace(/%20/g,"+"):"")&&"?")+n;return{hash:n,push:n!=r&&r.replace(/\?.*/,"")!=e}},Matsui.merge.apply(Matsui.Wrapped.prototype,{syncHash(l){let a=this;function t(e){let t=location.href.replace(/^[^#]*#?/,""),r=t.replace(/\?.*/,""),n=t.substr(r.length+1),o={};n.replace(/\+/g,"%20").split("&").forEach(e=>{e&&(e=e.split("=").map(t=>{try{return decodeURIComponent(t)}catch(e){return t}}),o[e.shift()]=e.join("="))});var i=l(a.data);i.path!==r&&(i.path=r),i.query!==o&&(i.query=o),Matsui.merge.apply(i.state,Matsui.merge.make(i.state,e))}addEventListener("hashchange",e=>t(null)),addEventListener("popstate",e=>t(window.history.state)),t(window.history.state),a.addUpdates(e=>{var e=l(e),t=Matsui.makeHash(e.path,e.query),e=(e=Matsui.getRaw(Matsui.access.pierce(e.state)))&&JSON.parse(JSON.stringify(e));t.push?window.history.pushState(e,"","#"+t.hash):window.history.replaceState(e,"","#"+t.hash)})},syncLocalStorage(o){let i=this;function l(t){var e=o(i.data);if(null===t)for(var r in e)l(r);else{var n=localStorage.getItem(t);if(n)try{e[t]=JSON.parse(n)}catch(e){console.error("localStorage."+t,e)}}}addEventListener("storage",e=>l(e.key)),l(null),i.addUpdates(e=>{var t,r=o(e);for(t in r){var n=r[t];null==n?localStorage.removeItem(t):localStorage.setItem(t,JSON.stringify(n))}})}}),Matsui.version="latest";
+//# sourceMappingURL=matsui-bundle.min.js.map
diff --git a/stfx/ui/web-ui.h b/stfx/ui/web-ui.h
index e72b68b..19a8a2e 100644
--- a/stfx/ui/web-ui.h
+++ b/stfx/ui/web-ui.h
@@ -80,29 +80,20 @@ This produces a template with inheritance like:
 The WebBase template replaces the ParamRange/ParamStepped classes, so that the UI can be updated when they change.  The outer WebSTFX class adds methods for forwarding messages between the effect and its webview.
 */
 
-template<template<class, class...> class EffectSTFX>
+template<template<class, class...> class EffectSTFX, class SubClass>
 struct WebUIHelper {
-	
-	template<class Effect, class SubClass>
+
+	template<class Effect>
 	class WebBase : public Effect {
 		using SuperRange = typename Effect::ParamRange;
 		using SuperStepped = typename Effect::ParamStepped;
 		
 	protected:
-		struct WebParamScanner {
+		struct WebParamScanner : public storage::STFXStorageScanner<WebParamScanner>{
 			SubClass *effect;
 			std::vector<std::string> scope;
 			
 			WebParamScanner(SubClass *effect) : effect(effect) {}
-		
-			// Do nothing for most types
-			template<class V>
-			void operator()(const char *key, V &v) {
-				scope.emplace_back(key);
-				// TODO: detect objects with .state() somehow
-				v.state(*this);
-				scope.pop_back();
-			}
 			
 			// Extra methods we add for STFX storage
 			void info(const char *, const char *) {}
@@ -279,140 +270,184 @@ struct WebUIHelper {
 				}
 			}
 		};
+		
+		template<class Storage>
+		void meterState(Storage &storage) {}
 	};
 	
 	template<class Effect, class... ExtraArgs>
-	struct WebSTFX : public EffectSTFX<WebBase<Effect, WebSTFX<Effect, ExtraArgs...>>, ExtraArgs...> {
-		/* TODO: without the ExtraArgs, it would be a bit neater:
-			EffectSTFX<WebBase<Effect, WebSTFX<Effect>>>
-		*/
-		using Super = EffectSTFX<WebBase<Effect, WebSTFX<Effect, ExtraArgs...>>, ExtraArgs...>;
-
-		template<class... Args>
-		WebSTFX(Args... args) : Super(args...) {
-			typename Super::WebParamScanner scanner{this};
-			this->state(scanner);
-		};
-		
-		// These are called when the parameter is changed from the web UI
-		std::function<void(ParamContext, double)> paramListenerRange;
-		std::function<void(ParamContext, bool)> paramListenerGesture;
-		std::function<void(ParamContext, int)> paramListenerStepped;
-		
-		// This state includes all the parameters
-		void saveState(std::vector<unsigned char> &bytes) {
-			stfx::storage::STFXStorageWriter<> storage(bytes);
-			this->state(storage);
-		}
-		void loadState(const std::vector<unsigned char> &bytes) {
-			stfx::storage::STFXStorageReader<> storage(bytes);
-			this->state(storage);
-			requestEntireState();
-		}
-
-		struct WebMessage {
-			std::vector<unsigned char> bytes;
-			
-			WebMessage() {
-				bytes.reserve(256);
-			}
-			
-			void sent() {
-				readyToSend.clear();
-			}
-
-		private:
-			friend class WebSTFX;
-			friend struct Super::ParamRange;
-			friend struct Super::ParamStepped;
-			std::atomic_flag readyToSend = ATOMIC_FLAG_INIT;
-
-			void markReady() {
-				readyToSend.test_and_set();
-			}
-		};
-
-		bool hasPendingWebMessage() const {
-			auto &message = queue[readIndex];
-			return message.readyToSend.test();
-		}
-
-		// Poll on the main thread (and directly after any `.webReceive()`), calling `.sent()` after you've sent it, repeat until you get `nullptr`
-		WebMessage * getPendingWebMessage() {
-			auto &message = queue[readIndex];
-			if (!message.readyToSend.test()) return nullptr;
-			if (++readIndex == queue.size()) readIndex = 0;
-
-			if (resetQueue.test()) {
-				// Clear ("send") every message aside from this one
-				for (auto &m : queue) {
-					if (&m == &message) continue;
-					m.sent();
-				}
-				// Ready to start sending messages again, starting from the next index
-				writeIndex.store(readIndex);
-				resetQueue.clear();
-				// any messages (state updates) sent after this won't assume a *newer* state than what we serialise below
-
-				// Replace this one's message with the complete plugin state
-				WebStateWriter storage(message.bytes);
-				this->state(storage);
-			}
-			return &message;
-		}
-
-		// Call when the webview posts any message back
-		void webReceive(const void *message, size_t size) {
-			auto *bytes = (const unsigned char *)message;
-			signalsmith::cbor::TaggedCborWalker cbor(bytes, bytes + size);
-			
-			if (cbor.isUtf8()) {
-				if (cbor.utf8View() == "ready") {
-					requestEntireState();
-					return;
-				}
-			} else if (cbor.isMap()) {
-				// Apply it as a merge
-				WebStateReader reader(cbor);
-				this->state(reader);
-			}
-		}
-
-	private:
-		friend struct Super::ParamRange;
-		friend struct Super::ParamStepped;
-		
-		std::vector<WebMessage> queue = std::vector<WebMessage>(64); // power of 2 so that overflow doesn't mess with the modulo
-		size_t readIndex = 0;
-		std::atomic_flag resetQueue = ATOMIC_FLAG_INIT;
-
-		// Atomic because multiple threads might write
-		std::atomic<size_t> writeIndex = 0;
-		WebMessage * getEmptyMessage() {
-			if (resetQueue.test()) return nullptr;
-			auto reservedIndex = writeIndex.fetch_add(1);
-			auto &message = queue[reservedIndex%queue.size()];
-			if (message.readyToSend.test()) {
-				std::cerr << "Web message queue full - sending entire state instead\n";
-				// When our queue is full, we drop the entire thing and re-send the entire state
-				resetQueue.test_and_set();
-				return nullptr;
-			}
-			message.bytes.resize(0);
-			return &message;
-		}
-
-		void requestEntireState() {
-			if (auto *m = getEmptyMessage()) {
-				resetQueue.test_and_set();
-				m->markReady();
-			} // if this fails, then the queue is full and we're doing a reset anyway
-		}
+	struct WebSTFX : public EffectSTFX<WebBase<Effect>, ExtraArgs...> {
+		using Super = EffectSTFX<WebBase<Effect>, ExtraArgs...>;
 	};
 };
 
 // Use this instead of a plain LibraryEffect
 template<typename Sample, template<class, class...> class EffectSTFX, class... ExtraArgs>
-using WebUILibraryEffect = LibraryEffect<Sample, WebUIHelper<EffectSTFX>::template WebSTFX, ExtraArgs...>;
+struct WebUILibraryEffect : public LibraryEffect<Sample, WebUIHelper<EffectSTFX, WebUILibraryEffect<Sample, EffectSTFX, ExtraArgs...>>::template WebSTFX, ExtraArgs...> {
+	using Super = LibraryEffect<Sample, WebUIHelper<EffectSTFX, WebUILibraryEffect<Sample, EffectSTFX, ExtraArgs...>>::template WebSTFX, ExtraArgs...>;
+
+	template<class... Args>
+	WebUILibraryEffect(Args... args) : Super(args...) {
+		typename Super::WebParamScanner scanner{this};
+		this->state(scanner);
+	};
+
+	// These are called when the parameter is changed from the web UI
+	std::function<void(ParamContext, double)> paramListenerRange;
+	std::function<void(ParamContext, bool)> paramListenerGesture;
+	std::function<void(ParamContext, int)> paramListenerStepped;
+	
+	// This state includes all the parameters
+	void saveState(std::vector<unsigned char> &bytes) {
+		stfx::storage::STFXStorageWriter<> storage(bytes);
+		this->state(storage);
+	}
+	void loadState(const std::vector<unsigned char> &bytes) {
+		stfx::storage::STFXStorageReader<> storage(bytes);
+		this->state(storage);
+		requestEntireState();
+	}
+
+	struct WebMessage {
+		std::vector<unsigned char> bytes;
+		
+		WebMessage() {
+			bytes.reserve(256);
+		}
+		
+		void sent() {
+			readyToSend.clear();
+		}
+
+	private:
+		friend class WebUILibraryEffect;
+		friend struct Super::ParamRange;
+		friend struct Super::ParamStepped;
+		std::atomic_flag readyToSend = ATOMIC_FLAG_INIT;
+
+		void markReady() {
+			readyToSend.test_and_set();
+		}
+	};
+
+	bool hasPendingWebMessage() const {
+		auto &message = queue[readIndex];
+		return message.readyToSend.test();
+	}
+
+	// Poll on the main thread (and directly after any `.webReceive()`), calling `.sent()` after you've sent it, repeat until you get `nullptr`
+	WebMessage * getPendingWebMessage() {
+		auto &message = queue[readIndex];
+		if (!message.readyToSend.test()) return nullptr;
+		if (++readIndex == queue.size()) readIndex = 0;
+
+		if (resetQueue.test()) {
+			// Clear ("send") every message aside from this one
+			for (auto &m : queue) {
+				if (&m == &message) continue;
+				m.sent();
+			}
+			// Ready to start sending messages again, starting from the next index
+			writeIndex.store(readIndex);
+			resetQueue.clear();
+			// any messages (state updates) sent after this won't assume a *newer* state than what we serialise below
+
+			// Replace this one's message with the complete plugin state
+			WebStateWriter storage(message.bytes);
+			this->state(storage);
+		}
+		return &message;
+	}
+
+	// Call when the webview posts any message back
+	void webReceive(const void *message, size_t size) {
+		auto *bytes = (const unsigned char *)message;
+		signalsmith::cbor::TaggedCborWalker cbor(bytes, bytes + size);
+		
+		if (cbor.isUtf8()) {
+			if (cbor.utf8View() == "ready") {
+				requestEntireState();
+				return;
+			}
+		} else if (cbor.isArray()) {
+			size_t length = cbor.length();
+			cbor = cbor.enter();
+			if (cbor.utf8View() == "meters" && length == 3) {
+				double interval = ++cbor;
+				double duration = ++cbor;
+				metersInterval.store(interval*this->config.sampleRate);
+				metersDuration.store(duration*this->config.sampleRate);
+			}
+		} else if (cbor.isMap()) {
+			// Apply it as a merge
+			WebStateReader reader(cbor);
+			this->state(reader);
+		}
+	}
+
+	// Replace `.process()` to add meter messages if they exist
+	template<class Buffers>
+	void process(Buffers &&buffers, int blockLength) {
+		process(buffers, buffers, blockLength);
+	}
+
+	template<class Inputs, class Outputs>
+	void process(Inputs &&inputs, Outputs &&outputs, int blockLength) {
+		Super::process(inputs, outputs, blockLength);
+
+		if (this->hasMeters()) {
+			auto *m = getEmptyMessage();
+			if (m) {
+				signalsmith::cbor::CborWriter cbor{m->bytes};
+				WebStateWriter storage{cbor};
+				this->meterState(storage);
+				m->markReady();
+			}
+			this->wantsMeters(false);
+		}
+
+		if (metersDuration.load() > 0) {
+			metersDuration -= blockLength;
+			samplesSinceMeters += blockLength;
+			if (samplesSinceMeters > metersInterval.load()) {
+				this->wantsMeters();
+				samplesSinceMeters = 0;
+			}
+		}
+	}
+	
+private:
+	friend struct Super::ParamRange;
+	friend struct Super::ParamStepped;
+	
+	std::atomic<int> metersInterval = 0, metersDuration = 0;
+	int samplesSinceMeters = 0; // only used from `.process()`
+	
+	std::vector<WebMessage> queue = std::vector<WebMessage>(64); // power of 2 so that overflow doesn't mess with the modulo
+	size_t readIndex = 0;
+	std::atomic_flag resetQueue = ATOMIC_FLAG_INIT;
+
+	// Atomic because multiple threads might write
+	std::atomic<size_t> writeIndex = 0;
+	WebMessage * getEmptyMessage() {
+		if (resetQueue.test()) return nullptr;
+		auto reservedIndex = writeIndex.fetch_add(1);
+		auto &message = queue[reservedIndex%queue.size()];
+		if (message.readyToSend.test()) {
+			std::cerr << "Web message queue full - sending entire state instead\n";
+			// When our queue is full, we drop the entire thing and re-send the entire state
+			resetQueue.test_and_set();
+			return nullptr;
+		}
+		message.bytes.resize(0);
+		return &message;
+	}
+
+	void requestEntireState() {
+		if (auto *m = getEmptyMessage()) {
+			resetQueue.test_and_set();
+			m->markReady();
+		} // if this fails, then the queue is full and we're doing a reset anyway
+	}};
 
 }} // namespace