@tremolo-ui/vue 0.7.0

package/dist/index.js

@@ -0,0 +1,2444 @@
+import { computed, defineComponent, h, inject, mergeProps, nextTick, onBeforeUnmount, onMounted, onScopeDispose, provide, ref, shallowRef, toValue, useId, watch, watchEffect } from "vue";
+import { DEFAULT_DRAG_SENSITIVITY, DEFAULT_KEYBOARD_OPTIONS, DEFAULT_WHEEL_OPTIONS, KNOB_VIEWBOX_SIZE, POINTS_EDITOR_DEFAULT_KEYBOARD, POINTS_EDITOR_DEFAULT_WHEEL, POINT_AXIS, applyDelta, arrowKeyDirection, arrowKeyMove, blackKeyWidth, caretAtDecimalOffset, caretDecimalOffset, checkSteps, clampPoint, commitNumberInputText, createAnimationCanvas, createDrag, createDragValue, createDropZone, createLongPress, createMIDIAccess, createMIDIInput, createMIDIMessage, createPianoInput, createPointsEditor, createStepperDrag, createWheel, cssLength, elementMapping, fitWhiteKeyWidth, getNoteRangeArray, knobAngles, knobArcPath, knobArcRadius, notePosition, nudgeNumberInput, numberInputBounds, numberInputRanges, numberSpan, parseNumberText, partitionByAccept, pianoWidth, relativeMapping, replaceOptions, selectModifier, sliderMarks, toXY, valuePercent, visuallyHiddenStyle, wheelDirection, wheelMove } from "@tremolo-ui/dom";
+import { clamp, isWhiteKey, linearScale, noteKey } from "@tremolo-ui/functions";
+//#region src/components/AnimationCanvas/AnimationCanvas.ts
+/** A `<canvas>` drawn by `draw` on every animation frame. */
+const AnimationCanvas = /* @__PURE__ */ defineComponent({
+	name: "AnimationCanvas",
+	inheritAttrs: false,
+	props: {
+		/** Draws a frame. */
+		draw: {
+			type: Function,
+			required: true
+		},
+		/** Sets the canvas up before the first frame and after a resize. */
+		init: Function,
+		/** Draw on every animation frame. @default true */
+		animate: {
+			type: Boolean,
+			default: true
+		},
+		/** Settings for the 2D context. Read once, when the canvas is created. */
+		options: Object,
+		/** Keep the drawing while the canvas is resized. @default true */
+		reduceFlickering: {
+			type: Boolean,
+			default: true
+		},
+		/** Follow the size of the parent element; `width` and `height` are ignored. */
+		resizable: Boolean,
+		/** Width in CSS pixels, while not `resizable`. @default 100 */
+		width: {
+			type: Number,
+			default: 100
+		},
+		/** Height in CSS pixels, while not `resizable`. @default 100 */
+		height: {
+			type: Number,
+			default: 100
+		}
+	},
+	setup(props, { attrs }) {
+		const canvas = ref(null);
+		const instance = shallowRef(null);
+		watch([canvas, () => props.resizable], ([element, resizable], _, onCleanup) => {
+			if (!element) return;
+			const current = createAnimationCanvas(element, {
+				draw: (context, frame) => props.draw(context, frame),
+				init: (context, size) => props.init?.(context, size),
+				animate: props.animate,
+				size: {
+					width: props.width,
+					height: props.height
+				},
+				reduceFlickering: props.reduceFlickering,
+				resizable,
+				contextAttributes: props.options
+			});
+			instance.value = current;
+			onCleanup(() => {
+				if (instance.value === current) instance.value = null;
+				current.destroy();
+			});
+		}, {
+			immediate: true,
+			flush: "post"
+		});
+		watchEffect(() => {
+			props.draw;
+			props.init;
+			instance.value?.update({
+				animate: props.animate,
+				size: {
+					width: props.width,
+					height: props.height
+				},
+				reduceFlickering: props.reduceFlickering
+			});
+		}, { flush: "post" });
+		return () => h("canvas", {
+			onContextmenu: (event) => event.preventDefault(),
+			...attrs,
+			ref: canvas
+		});
+	}
+});
+//#endregion
+//#region src/composables/useInstance.ts
+/**
+* Create an instance for the element `target` holds, and destroy it when the
+* element goes away or changes. Options are pushed to the instance with
+* `update` as they change, so that changing them does not interrupt a drag in
+* progress.
+*
+* Call it during `setup`: the watchers stop with the component.
+*/
+function useInstance(target, options, create, update) {
+	let instance = null;
+	watch(() => toValue(target), (element, _, onCleanup) => {
+		if (!element) return;
+		const current = create(element, toValue(options));
+		instance = current;
+		onCleanup(() => {
+			current.destroy();
+			if (instance === current) instance = null;
+		});
+	}, {
+		immediate: true,
+		flush: "post"
+	});
+	watch(() => ({ ...toValue(options) }), (next, previous) => {
+		if (instance) update(instance, replaceOptions(previous, next));
+	}, { flush: "post" });
+	return { current: () => instance };
+}
+//#endregion
+//#region src/composables/useDropZone.ts
+/**
+* Take files dropped on an element. See `createDropZone` in
+* `@tremolo-ui/dom`. Returns whether files are over it, and whether they
+* would be refused, for styling it while they are.
+*/
+function useDropZone(target, options = {}) {
+	const state = shallowRef({
+		over: false,
+		invalid: false
+	});
+	const withState = () => ({
+		...toValue(options),
+		onStateChange: (next) => {
+			state.value = next;
+			toValue(options).onStateChange?.(next);
+		}
+	});
+	useInstance(target, withState, createDropZone, (instance, next) => instance.update(next));
+	return state;
+}
+//#endregion
+//#region src/components/DropZone/DropZone.ts
+/** A region that takes dropped files. */
+const DropZone = /* @__PURE__ */ defineComponent({
+	name: "DropZone",
+	props: {
+		/** Which files to take, as the `accept` attribute of a file input. */
+		accept: String,
+		/** Take every file dropped, rather than the first. */
+		multiple: Boolean,
+		/** Ignore drops. The zone carries `data-disabled`. */
+		disabled: Boolean
+	},
+	emits: {
+		/** The dropped files that satisfy `accept`. */
+		drop: (files, _event) => Array.isArray(files),
+		/** The dropped files that do not satisfy `accept`, after `drop` for the same drop. */
+		reject: (files, _event) => Array.isArray(files)
+	},
+	setup(props, { slots, emit }) {
+		const el = ref(null);
+		const state = useDropZone(el, () => ({
+			accept: props.accept,
+			multiple: props.multiple,
+			disabled: props.disabled,
+			onDrop: (files, event) => emit("drop", files, event),
+			onReject: (files, event) => emit("reject", files, event)
+		}));
+		return () => h("div", {
+			ref: el,
+			"data-dragover": state.value.over ? "" : void 0,
+			"data-invalid": state.value.invalid ? "" : void 0,
+			"data-disabled": props.disabled ? "" : void 0
+		}, slots.default?.());
+	}
+});
+//#endregion
+//#region src/components/_util/context.ts
+/** Read a component's context, or explain which parent is missing. */
+function injectContext(key, parent) {
+	const context = inject(key, null);
+	if (!context) throw new Error(`Missing ${parent} in the tree`);
+	return context;
+}
+//#endregion
+//#region src/components/FileInput/context.ts
+const FileInputKey = Symbol("FileInput");
+/** The context of the enclosing `FileInput`, for a part of your own. */
+function useFileInputContext() {
+	return injectContext(FileInputKey, "FileInput");
+}
+//#endregion
+//#region src/components/FileInput/FileInput.ts
+/**
+* Picks files. The control is the native file input, out of sight but in the
+* tab order, with `FileInputTrigger` as its label.
+*/
+const FileInput = /* @__PURE__ */ defineComponent({
+	name: "FileInput",
+	inheritAttrs: false,
+	props: {
+		/**
+		* Which files to take: extensions, MIME types and type groups. It is
+		* checked again when the files arrive, since the picker only takes it as
+		* a hint.
+		*/
+		accept: String,
+		/** Let several files be picked at once. */
+		multiple: Boolean,
+		/** Make the input unusable. The parts carry `data-disabled`. */
+		disabled: Boolean
+	},
+	emits: {
+		/** The picked files that satisfy `accept`. */
+		change: (files) => Array.isArray(files),
+		/** The picked files that do not satisfy `accept`, after `change` for the same selection. */
+		reject: (files) => Array.isArray(files)
+	},
+	setup(props, { slots, emit, attrs }) {
+		const inputId = useId();
+		provide(FileInputKey, {
+			inputId,
+			get disabled() {
+				return props.disabled;
+			}
+		});
+		function onChange(event) {
+			const input = event.target;
+			const { accepted, rejected } = partitionByAccept(Array.from(input.files ?? []), props.accept);
+			input.value = "";
+			if (accepted.length > 0) emit("change", accepted);
+			if (rejected.length > 0) emit("reject", rejected);
+		}
+		return () => {
+			const { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, ...rest } = attrs;
+			return h("div", {
+				...rest,
+				"data-disabled": props.disabled ? "" : void 0
+			}, [h("input", {
+				id: inputId,
+				type: "file",
+				accept: props.accept,
+				multiple: props.multiple,
+				disabled: props.disabled,
+				style: visuallyHiddenStyle,
+				"aria-label": ariaLabel,
+				"aria-labelledby": ariaLabelledby,
+				"aria-describedby": ariaDescribedby,
+				onChange
+			}), slots.default?.()]);
+		};
+	}
+});
+//#endregion
+//#region src/components/FileInput/FileInputTrigger.ts
+/**
+* Opens the file picker and names the input. A `<label>` rather than a
+* button: the browser forwards the click, the input stays the one thing in
+* the tab order, and its name comes from this text.
+*/
+const FileInputTrigger = /* @__PURE__ */ defineComponent({
+	name: "FileInputTrigger",
+	setup(_, { slots }) {
+		const fileInput = useFileInputContext();
+		return () => h("label", {
+			for: fileInput.inputId,
+			"data-disabled": fileInput.disabled ? "" : void 0
+		}, slots.default?.());
+	}
+});
+//#endregion
+//#region src/components/Knob/context.ts
+const KnobKey = Symbol("Knob");
+/** The context of the enclosing `Knob`, for a part of your own. */
+function useKnobContext() {
+	return injectContext(KnobKey, "Knob");
+}
+//#endregion
+//#region src/composables/useDragValue.ts
+/**
+* Drive a value with a pointer drag. See `createDragValue` in
+* `@tremolo-ui/dom` for the options; `elementMapping` and `relativeMapping`
+* from there choose how the pointer becomes a value. `mapping` is read when
+* the element is attached.
+*/
+function useDragValue(target, options) {
+	useInstance(target, options, createDragValue, (instance, next) => instance.update(next));
+}
+//#endregion
+//#region src/composables/useWheel.ts
+/**
+* Listen to the wheel on an element, as a non-passive listener so that
+* `preventDefault()` can keep the page from scrolling. See `createWheel` in
+* `@tremolo-ui/dom`.
+*/
+function useWheel(target, onWheel, options = {}) {
+	useInstance(target, options, (element, opts) => createWheel(element, (event) => onWheel(event), opts), (instance, next) => instance.update(next));
+}
+//#endregion
+//#region src/components/_util/useCheckSteps.ts
+/**
+* Warn, in development only, when a key press or a wheel notch cannot produce
+* a change the user can see. The probing is `checkSteps` in the core.
+*
+* Takes a getter, so that the check runs again when the settings change.
+*/
+function useCheckSteps(options) {
+	try {
+		if (process.env.NODE_ENV === "production") return;
+		watchEffect(() => {
+			for (const warning of checkSteps(options())) console.warn(warning);
+		});
+	} catch {}
+}
+//#endregion
+//#region src/components/Knob/Knob.ts
+/**
+* Interactive rotary knob, drawn in SVG by `KnobSVGRoot` and the parts inside
+* it. Bind the value with `v-model`.
+*/
+const Knob = /* @__PURE__ */ defineComponent({
+	name: "Knob",
+	props: {
+		/** The current value. Bind it with `v-model`. */
+		modelValue: {
+			type: Number,
+			required: true
+		},
+		/** The value with the knob turned all the way down. */
+		min: {
+			type: Number,
+			required: true
+		},
+		/** The value with the knob turned all the way up. */
+		max: {
+			type: Number,
+			required: true
+		},
+		/** Granularity of the value. @default 1 */
+		step: {
+			type: Number,
+			default: 1
+		},
+		/** How the value is distributed across the travel. @default linearScale */
+		scale: {
+			type: Object,
+			default: () => linearScale
+		},
+		/** The value a double click restores. @default min */
+		defaultValue: Number,
+		/** Where the active arc starts. @default min */
+		startValue: Number,
+		/** Width and height of the knob. Sets `--knob-size`. */
+		size: [Number, String],
+		/** The cursor to show while dragging. @default { cursor: 'grabbing' } */
+		externalStyles: Object,
+		/** How much one notch of the wheel moves the value. `null` turns it off. */
+		wheel: {
+			type: [Array, Object],
+			default: () => DEFAULT_WHEEL_OPTIONS
+		},
+		/** How much one arrow key press moves the value. `null` turns it off. */
+		keyboard: {
+			type: [Array, Object],
+			default: () => DEFAULT_KEYBOARD_OPTIONS
+		},
+		/** How much a drag moves the value, per modifier key. */
+		dragSensitivity: {
+			type: [Number, Object],
+			default: () => DEFAULT_DRAG_SENSITIVITY
+		},
+		/** Hide the cursor while dragging and read the movement directly. */
+		pointerLock: Boolean,
+		/** Restore `defaultValue` on a double click. @default true */
+		enableDoubleClickDefault: {
+			type: Boolean,
+			default: true
+		},
+		/** Make the knob unchangeable and remove it from the tab order. */
+		disabled: Boolean,
+		/** Make the knob unchangeable while leaving it focusable. */
+		readonly: Boolean,
+		/** How far the knob turns from `min` to `max`, in degrees. @default 270 */
+		angleRange: {
+			type: Number,
+			default: 270
+		}
+	},
+	emits: { "update:modelValue": (value) => typeof value === "number" },
+	setup(props, { slots, emit, expose }) {
+		const root = ref(null);
+		const dragging = ref(false);
+		const inactive = computed(() => props.disabled || props.readonly);
+		const range = computed(() => ({
+			min: props.min,
+			max: props.max,
+			step: props.step,
+			scale: props.scale
+		}));
+		const angles = computed(() => knobAngles({
+			value: props.modelValue,
+			min: props.min,
+			max: props.max,
+			scale: props.scale,
+			startValue: props.startValue ?? props.min,
+			angleRange: props.angleRange
+		}));
+		useCheckSteps(() => ({
+			component: "Knob",
+			range: range.value,
+			keyboard: props.keyboard,
+			wheel: props.wheel
+		}));
+		provide(KnobKey, {
+			get value() {
+				return props.modelValue;
+			},
+			get min() {
+				return props.min;
+			},
+			get max() {
+				return props.max;
+			},
+			get step() {
+				return props.step;
+			},
+			get scale() {
+				return props.scale;
+			},
+			get startValue() {
+				return props.startValue ?? props.min;
+			},
+			get angleRange() {
+				return props.angleRange;
+			},
+			get angles() {
+				return angles.value;
+			}
+		});
+		const change = (next) => emit("update:modelValue", next);
+		useDragValue(root, () => ({
+			axis: [range.value, {
+				...range.value,
+				reverse: true
+			}],
+			mapping: relativeMapping({
+				pixelRange: 100,
+				sensitivity: (state) => selectModifier(props.dragSensitivity, state.event).value
+			}),
+			getValue: () => [props.modelValue, props.modelValue],
+			threshold: 1,
+			cursor: inactive.value ? void 0 : props.externalStyles?.cursor ?? "grabbing",
+			pointerLock: inactive.value ? false : props.pointerLock,
+			shouldStart: () => !inactive.value,
+			onChange: (v) => {
+				if (!inactive.value) change(v[1]);
+			},
+			onDragStart: () => {
+				dragging.value = true;
+			},
+			onDragEnd: () => {
+				dragging.value = false;
+			}
+		}));
+		useWheel(root, (event) => {
+			if (!props.wheel || inactive.value) return;
+			const direction = wheelDirection(event);
+			if (direction === null) return;
+			event.preventDefault();
+			change(applyDelta(props.modelValue, direction, props.wheel, range.value, event));
+		}, { requireFocus: true });
+		expose({
+			/** Move the focus to the knob. */
+			focus: () => {
+				if (!props.disabled) root.value?.focus();
+			},
+			/** Take the focus away from the knob. */
+			blur: () => root.value?.blur()
+		});
+		return () => h("div", {
+			ref: root,
+			role: "slider",
+			tabindex: props.disabled ? -1 : 0,
+			"aria-valuenow": props.modelValue,
+			"aria-valuemin": props.min,
+			"aria-valuemax": props.max,
+			"aria-disabled": props.disabled,
+			"aria-readonly": props.readonly,
+			"data-disabled": props.disabled ? "" : void 0,
+			"data-readonly": props.readonly ? "" : void 0,
+			"data-dragging": dragging.value ? "" : void 0,
+			style: { "--knob-size": cssLength(props.size) },
+			onKeydown: (event) => {
+				if (!props.keyboard || inactive.value) return;
+				const direction = arrowKeyDirection(event.key);
+				if (direction === null) return;
+				event.preventDefault();
+				change(applyDelta(props.modelValue, direction, props.keyboard, range.value, event));
+			},
+			onDblclick: () => {
+				if (!inactive.value && props.enableDoubleClickDefault) change(props.defaultValue ?? props.min);
+			}
+		}, slots.default?.());
+	}
+});
+//#endregion
+//#region src/components/_util/placement.ts
+const PLACEMENT = Symbol("tremolo-ui placement");
+/**
+* Mark the children of this component as being inside `name`, for
+* {@link checkPlacement}. Call it during `setup`.
+*/
+function providePlacement(name) {
+	provide(PLACEMENT, name);
+}
+/**
+* Warn, in development only, when `child` is rendered outside `parent`. A
+* part positioned against its parent still renders anywhere else, so nothing
+* fails when it is misplaced — its position just comes out wrong. The names
+* are the ones written in templates (`'KnobThumb'`), since they are what the
+* warning shows. Call it during `setup`.
+*/
+function checkPlacement(child, parent) {
+	try {
+		if (process.env.NODE_ENV === "production") return;
+		const found = inject(PLACEMENT, null);
+		if (found === parent) return;
+		console.warn(`[tremolo-ui] ${child} has to be rendered inside ${parent}` + (found === null ? "." : `, but it is inside ${found}.`) + " It renders either way, so nothing fails — its position just comes out wrong.");
+	} catch {}
+}
+//#endregion
+//#region src/components/Knob/KnobActiveLine.ts
+/** The arc between `startValue` and the value, as an SVG `<path>`. */
+const KnobActiveLine = /* @__PURE__ */ defineComponent({
+	name: "KnobActiveLine",
+	props: {
+		stroke: {
+			type: String,
+			default: "currentColor"
+		},
+		strokeWidth: {
+			type: [Number, String],
+			default: 6
+		}
+	},
+	setup(props) {
+		checkPlacement("KnobActiveLine", "KnobSVGRoot");
+		const knob = useKnobContext();
+		return () => h("path", {
+			d: knobArcPath(knob.angles.r2, knob.angles.r3, knobArcRadius(props.strokeWidth)),
+			fill: "none",
+			stroke: props.stroke,
+			"stroke-width": props.strokeWidth
+		});
+	}
+});
+//#endregion
+//#region src/components/Knob/KnobInactiveLine.ts
+/**
+* The travel outside the value, as SVG `<path>`s: one on each side of the
+* active arc that has any length.
+*/
+const KnobInactiveLine = /* @__PURE__ */ defineComponent({
+	name: "KnobInactiveLine",
+	inheritAttrs: false,
+	props: {
+		stroke: {
+			type: String,
+			default: "currentColor"
+		},
+		strokeWidth: {
+			type: [Number, String],
+			default: 6
+		}
+	},
+	setup(props, { attrs }) {
+		checkPlacement("KnobInactiveLine", "KnobSVGRoot");
+		const knob = useKnobContext();
+		const path = (from, to) => h("path", {
+			...attrs,
+			d: knobArcPath(from, to, knobArcRadius(props.strokeWidth)),
+			fill: "none",
+			stroke: props.stroke,
+			"stroke-width": props.strokeWidth
+		});
+		return () => [knob.startValue > knob.min ? path(knob.angles.r1, knob.angles.r2) : null, knob.startValue < knob.max ? path(knob.angles.r3, knob.angles.r4) : null];
+	}
+});
+//#endregion
+//#region src/components/Knob/KnobSVGRoot.ts
+/**
+* The `<svg>` the drawing parts go in, in the order you want them painted.
+* It sets the view box they are drawn against.
+*/
+const KnobSVGRoot = /* @__PURE__ */ defineComponent({
+	name: "KnobSVGRoot",
+	setup(_, { slots }) {
+		providePlacement("KnobSVGRoot");
+		return () => h("svg", {
+			viewBox: `0 0 ${KNOB_VIEWBOX_SIZE} ${KNOB_VIEWBOX_SIZE}`,
+			style: { display: "block" }
+		}, slots.default?.());
+	}
+});
+//#endregion
+//#region src/components/Knob/KnobThumb.ts
+/** The circle that turns with the value, and the line on it that points at it. */
+const KnobThumb = /* @__PURE__ */ defineComponent({
+	name: "KnobThumb",
+	props: {
+		/** Fill colour of the circle. @default 'currentColor' */
+		thumb: {
+			type: String,
+			default: "currentColor"
+		},
+		/** Colour of the line that points at the value. @default 'currentColor' */
+		thumbLine: {
+			type: String,
+			default: "currentColor"
+		},
+		/** Diameter of the circle, as a percentage of the knob. @default 84 */
+		thumbSize: {
+			type: Number,
+			default: 84
+		},
+		/** Thickness of the line, as a percentage of the knob. @default 6 */
+		thumbLineWeight: {
+			type: Number,
+			default: 6
+		},
+		/** How far down the line reaches, as a percentage. @default 35 */
+		thumbLineLength: {
+			type: Number,
+			default: 35
+		},
+		/** Classes for the line that points at the value. */
+		classes: Object
+	},
+	setup(props) {
+		checkPlacement("KnobThumb", "KnobSVGRoot");
+		const knob = useKnobContext();
+		return () => h("svg", null, [h("circle", {
+			cx: "50%",
+			cy: "50%",
+			r: `${props.thumbSize / 2}%`,
+			fill: props.thumb
+		}), h("line", {
+			class: props.classes?.thumbLine,
+			x1: "50%",
+			y1: `${(KNOB_VIEWBOX_SIZE - clamp(props.thumbSize, 0, 100)) / 2}%`,
+			x2: "50%",
+			y2: `${props.thumbLineLength}%`,
+			stroke: props.thumbLine,
+			"stroke-width": `${props.thumbLineWeight}%`,
+			style: {
+				transform: `rotate(${knob.angles.r1 + knob.angles.p * knob.angleRange}deg)`,
+				transformOrigin: "50% 50%"
+			}
+		})]);
+	}
+});
+//#endregion
+//#region src/components/NumberInput/context.ts
+const NumberInputKey = Symbol("NumberInput");
+/** The context of the enclosing `NumberInput`, for a part of your own. */
+function useNumberInputContext() {
+	return injectContext(NumberInputKey, "NumberInput");
+}
+/** @internal Whether the drag on `NumberInputStepper` has moved the value. */
+const StepperKey = Symbol("NumberInputStepper");
+//#endregion
+//#region src/components/_util/props.ts
+/** How much one notch of the wheel moves the value. `null` turns it off. */
+const wheelProp = {
+	type: [Array, Object],
+	default: () => DEFAULT_WHEEL_OPTIONS
+};
+/** How much one arrow key press moves the value. `null` turns it off. */
+const keyboardProp = {
+	type: [Array, Object],
+	default: () => DEFAULT_KEYBOARD_OPTIONS
+};
+/** How much a drag moves the value, per modifier key. */
+const dragSensitivityProp = {
+	type: [Number, Object],
+	default: () => DEFAULT_DRAG_SENSITIVITY
+};
+//#endregion
+//#region src/components/NumberInput/NumberInput.ts
+/** Input with some useful functions for entering numbers. Bind it with `v-model`. */
+const NumberInput = /* @__PURE__ */ defineComponent({
+	name: "NumberInput",
+	props: {
+		/** The current value. Bind it with `v-model`. */
+		modelValue: {
+			type: Number,
+			required: true
+		},
+		/** The lowest value. Leave it out for no lower end. */
+		min: Number,
+		/** The highest value. Leave it out for no upper end. */
+		max: Number,
+		/** Granularity of the value. @default 1 */
+		step: {
+			type: Number,
+			default: 1
+		},
+		/** How the value is distributed, for a `normalized` amount. */
+		scale: {
+			type: Object,
+			default: () => linearScale
+		},
+		/** The text shown for a value. @default String */
+		format: {
+			type: Function,
+			default: String
+		},
+		/** Read a value back out of the text. Has to undo `format`. */
+		parse: {
+			type: Function,
+			default: parseNumberText
+		},
+		/** Keep the value within `min` and `max` when committed or stepped. */
+		clampValue: {
+			type: Boolean,
+			default: true
+		},
+		wheel: wheelProp,
+		keyboard: keyboardProp,
+		dragSensitivity: dragSensitivityProp,
+		/** Pixels of vertical drag on the stepper per `step`. `null` turns it off. */
+		drag: {
+			type: Number,
+			default: 1
+		},
+		/** Hide the cursor while dragging the stepper. */
+		pointerLock: Boolean,
+		/** Select the text when the field takes focus. @default 'none' */
+		selectOnFocus: {
+			type: String,
+			default: "none"
+		},
+		/** Show the plain value while the field has focus. */
+		unformatOnFocus: Boolean,
+		/** Put the caret back at the same digit after an arrow key step. */
+		keepCaretOnStep: Boolean,
+		/** Commit and leave the field on Enter. @default true */
+		blurOnEnter: {
+			type: Boolean,
+			default: true
+		},
+		/** Make the input unchangeable and remove it from the tab order. */
+		disabled: Boolean,
+		/** Make the value unchangeable while leaving the field focusable. */
+		readonly: Boolean
+	},
+	emits: { "update:modelValue": (value) => typeof value === "number" },
+	setup(props, { slots, emit, expose }) {
+		const root = ref(null);
+		/**
+		* The text being typed. The only state here: not a copy of the value, but
+		* the half-finished entry that has no value to be derived from yet.
+		*/
+		const draft = ref(null);
+		let input = null;
+		const inactive = computed(() => props.disabled || props.readonly);
+		const ranges = computed(() => numberInputRanges({
+			min: props.min,
+			max: props.max,
+			step: props.step,
+			scale: props.scale,
+			clampValue: props.clampValue
+		}));
+		const bounds = computed(() => numberInputBounds(props.modelValue, {
+			min: props.min,
+			max: props.max,
+			clampValue: props.clampValue
+		}));
+		const text = computed(() => draft.value ?? props.format(props.modelValue));
+		useCheckSteps(() => ({
+			component: "NumberInput",
+			range: props.min !== void 0 && props.max !== void 0 && props.min < props.max ? {
+				min: props.min,
+				max: props.max,
+				step: props.step,
+				scale: props.scale
+			} : null,
+			keyboard: props.keyboard,
+			wheel: props.wheel,
+			format: props.format
+		}));
+		function changeValue(next) {
+			if (inactive.value) return;
+			draft.value = null;
+			if (next !== props.modelValue) emit("update:modelValue", next);
+		}
+		provide(NumberInputKey, {
+			get value() {
+				return props.modelValue;
+			},
+			get min() {
+				return props.min;
+			},
+			get max() {
+				return props.max;
+			},
+			get step() {
+				return props.step;
+			},
+			get disabled() {
+				return props.disabled;
+			},
+			get readonly() {
+				return props.readonly;
+			},
+			get keyboard() {
+				return props.keyboard;
+			},
+			get drag() {
+				return props.drag;
+			},
+			get dragSensitivity() {
+				return props.dragSensitivity;
+			},
+			get pointerLock() {
+				return props.pointerLock;
+			},
+			get selectOnFocus() {
+				return props.selectOnFocus;
+			},
+			get unformatOnFocus() {
+				return props.unformatOnFocus;
+			},
+			get keepCaretOnStep() {
+				return props.keepCaretOnStep;
+			},
+			get blurOnEnter() {
+				return props.blurOnEnter;
+			},
+			get text() {
+				return text.value;
+			},
+			get editing() {
+				return draft.value !== null;
+			},
+			get outOfRange() {
+				return draft.value === null && bounds.value.outOfRange;
+			},
+			get atMin() {
+				return bounds.value.atMin;
+			},
+			get atMax() {
+				return bounds.value.atMax;
+			},
+			get rawRange() {
+				return ranges.value.raw;
+			},
+			setDraft: (next) => {
+				if (inactive.value) return;
+				draft.value = next;
+				const parsed = props.parse(next);
+				if (Number.isFinite(parsed)) emit("update:modelValue", parsed);
+			},
+			commitDraft: () => {
+				if (draft.value === null || inactive.value) return;
+				const committed = commitNumberInputText(draft.value, props.parse, {
+					min: props.min,
+					max: props.max,
+					clampValue: props.clampValue
+				});
+				if (committed === null) draft.value = null;
+				else changeValue(committed);
+			},
+			changeValue,
+			nudge: (direction, option, modifiers) => changeValue(nudgeNumberInput(props.modelValue, direction, option, ranges.value, modifiers)),
+			setInput: (element) => {
+				input = element;
+			}
+		});
+		useWheel(root, (event) => {
+			const direction = wheelDirection(event);
+			if (!props.wheel || inactive.value || direction === null) return;
+			event.preventDefault();
+			changeValue(nudgeNumberInput(props.modelValue, direction, props.wheel, ranges.value, event));
+		}, { requireFocus: true });
+		expose({
+			focus: () => {
+				if (!props.disabled) input?.focus();
+			},
+			blur: () => input?.blur()
+		});
+		return () => h("div", {
+			ref: root,
+			"data-disabled": props.disabled ? "" : void 0,
+			"data-readonly": props.readonly ? "" : void 0
+		}, slots.default?.());
+	}
+});
+//#endregion
+//#region src/composables/useLongPress.ts
+/**
+* Repeat `onPress` while a pointer is held down: once on the press, then
+* every `interval` after `delay`. See `createLongPress` in `@tremolo-ui/dom`.
+*
+* Returns the function that starts a press, for `@pointerdown`.
+*/
+function useLongPress(options) {
+	const instance = createLongPress(toValue(options));
+	watch(() => toValue(options), (next) => instance.update(next));
+	onScopeDispose(() => instance.destroy());
+	return (event) => instance.start(event);
+}
+//#endregion
+//#region src/components/NumberInput/stepper-button.ts
+/** The body of `NumberInputIncrementStepper` and `NumberInputDecrementStepper`. */
+function stepperButton(name, direction) {
+	return defineComponent({
+		name,
+		setup(_, { slots }) {
+			const field = useNumberInputContext();
+			const stepper = inject(StepperKey, null);
+			const blocked = computed(() => field.disabled || (direction > 0 ? field.atMax : field.atMin));
+			const press = useLongPress({ onPress: () => {
+				if (field.disabled || field.readonly) return;
+				if (stepper?.moved()) return;
+				field.nudge(direction, ["raw", field.step]);
+			} });
+			return () => h("div", {
+				role: "button",
+				tabindex: -1,
+				"aria-label": direction > 0 ? "Increment" : "Decrement",
+				"aria-disabled": blocked.value,
+				"data-disabled": blocked.value ? "" : void 0,
+				"data-readonly": field.readonly ? "" : void 0,
+				onPointerdown: (event) => press(event)
+			}, slots.default ? slots.default() : h("svg", {
+				style: {
+					width: "var(--stepper-icon-size)",
+					height: "var(--stepper-icon-size)"
+				},
+				viewBox: "0 0 24 24",
+				fill: "none",
+				stroke: "currentColor",
+				"stroke-width": 2,
+				"stroke-linecap": "round",
+				"stroke-linejoin": "round"
+			}, h("polyline", { points: direction > 0 ? "18 15 12 9 6 15" : "6 9 12 15 18 9" })));
+		}
+	});
+}
+//#endregion
+//#region src/components/NumberInput/NumberInputDecrementStepper.ts
+/** Lowers the value by one `step`, repeating while held. */
+const NumberInputDecrementStepper = /* @__PURE__ */ stepperButton("NumberInputDecrementStepper", -1);
+//#endregion
+//#region src/components/NumberInput/NumberInputField.ts
+/**
+* The text field, and the only place the value can be typed. While the user
+* types, their own text stands rather than `format(value)`.
+*/
+const NumberInputField = /* @__PURE__ */ defineComponent({
+	name: "NumberInputField",
+	setup(_, { expose }) {
+		const field = useNumberInputContext();
+		const input = ref(null);
+		const focused = ref(false);
+		watchEffect(() => field.setInput(input.value));
+		onBeforeUnmount(() => field.setInput(null));
+		const shown = computed(() => field.unformatOnFocus && focused.value && !field.editing ? String(field.value) : field.text);
+		async function select() {
+			if (field.selectOnFocus === "none") return;
+			await nextTick();
+			const element = input.value;
+			if (!element || !focused.value) return;
+			const span = field.selectOnFocus === "all" ? {
+				start: 0,
+				end: element.value.length
+			} : numberSpan(element.value);
+			if (span) element.setSelectionRange(span.start, span.end);
+		}
+		async function step(direction, event) {
+			const element = event.currentTarget;
+			const from = element.value;
+			const offset = field.keepCaretOnStep && element.selectionStart !== null ? caretDecimalOffset(from, element.selectionStart) : null;
+			field.nudge(direction, field.keyboard, event);
+			if (offset === null) return;
+			await nextTick();
+			if (element.value === from) return;
+			const caret = caretAtDecimalOffset(element.value, offset);
+			element.setSelectionRange(caret, caret);
+		}
+		expose({
+			focus: () => input.value?.focus(),
+			blur: () => input.value?.blur()
+		});
+		return () => h("input", {
+			ref: input,
+			type: "text",
+			inputmode: "decimal",
+			role: "spinbutton",
+			value: shown.value,
+			disabled: field.disabled,
+			readonly: field.readonly,
+			"aria-disabled": field.disabled,
+			"aria-readonly": field.readonly,
+			"aria-valuenow": field.value,
+			"aria-valuemin": field.min,
+			"aria-valuemax": field.max,
+			"aria-valuetext": field.text,
+			step: field.step,
+			"data-disabled": field.disabled ? "" : void 0,
+			"data-readonly": field.readonly ? "" : void 0,
+			"data-out-of-range": field.outOfRange ? "" : void 0,
+			onInput: (event) => field.setDraft(event.target.value),
+			onFocus: () => {
+				focused.value = true;
+				select();
+			},
+			onBlur: () => {
+				focused.value = false;
+				field.commitDraft();
+			},
+			onKeydown: (event) => {
+				const key = event.key;
+				if (key === "Enter") {
+					field.commitDraft();
+					if (field.blurOnEnter) event.target.blur();
+				} else if (field.keyboard && !field.disabled && !field.readonly && (key === "ArrowUp" || key === "ArrowDown") && !event.isComposing) {
+					event.preventDefault();
+					step(key === "ArrowUp" ? 1 : -1, event);
+				}
+			}
+		});
+	}
+});
+//#endregion
+//#region src/components/NumberInput/NumberInputIncrementStepper.ts
+/** Raises the value by one `step`, repeating while held. */
+const NumberInputIncrementStepper = /* @__PURE__ */ stepperButton("NumberInputIncrementStepper", 1);
+//#endregion
+//#region src/components/NumberInput/NumberInputStepper.ts
+/**
+* The area the steppers sit in, and a drag handle in its own right: dragging
+* it up and down moves the value one `step` every `drag` pixels.
+*/
+const NumberInputStepper = /* @__PURE__ */ defineComponent({
+	name: "NumberInputStepper",
+	setup(_, { slots }) {
+		const field = useNumberInputContext();
+		const el = ref(null);
+		let instance = null;
+		const enabled = computed(() => field.drag !== null && !field.disabled && !field.readonly);
+		const options = () => ({
+			range: field.rawRange,
+			pixels: field.drag ?? 1,
+			sensitivity: field.dragSensitivity,
+			pointerLock: field.pointerLock
+		});
+		watch([el, enabled], ([element, on], _, onCleanup) => {
+			if (!element || !on) return;
+			const current = createStepperDrag(element, {
+				...options(),
+				getValue: () => field.value,
+				onChange: (next) => field.changeValue(next)
+			});
+			instance = current;
+			onCleanup(() => {
+				current.destroy();
+				if (instance === current) instance = null;
+			});
+		}, {
+			immediate: true,
+			flush: "post"
+		});
+		watch(options, (next) => instance?.update(next));
+		provide(StepperKey, { moved: () => instance?.moved() ?? false });
+		return () => h("div", { ref: el }, slots.default?.());
+	}
+});
+//#endregion
+//#region src/components/Piano/Piano.ts
+/**
+* Customizable piano. The keys are drawn by the component; what goes inside
+* one is the `label` slot, which receives the note and its state.
+*/
+const Piano = /* @__PURE__ */ defineComponent({
+	name: "Piano",
+	props: {
+		/** The notes drawn, from `first` to `last`. */
+		noteRange: {
+			type: Object,
+			required: true
+		},
+		/** Let a pointer slide from one key to the next. @default true */
+		glissando: {
+			type: Boolean,
+			default: true
+		},
+		/** Highest note that can sound. @default 127 */
+		midiMax: {
+			type: Number,
+			default: 127
+		},
+		/** Play notes from the computer keyboard. See `SHORTCUTS` in `@tremolo-ui/dom`. */
+		keyboardShortcuts: Object,
+		/** Where keyboard shortcuts listen. @default 'root' */
+		keyboardShortcutsScope: {
+			type: String,
+			default: "root"
+		},
+		/** Follow the width of the parent element. */
+		resizable: Boolean,
+		/** Width of a white key in pixels. @default 40 */
+		whiteKeyWidth: {
+			type: Number,
+			default: 40
+		},
+		/** Space between two white keys, in pixels. @default 1 */
+		keyGap: {
+			type: Number,
+			default: 1
+		},
+		/** Width of a black key, as a fraction of a white one. @default 0.65 */
+		blackKeyWidthRatio: {
+			type: Number,
+			default: .65
+		},
+		/** Height of a black key, as a fraction of the keyboard. @default 0.6 */
+		blackKeyHeightRatio: {
+			type: Number,
+			default: .6
+		},
+		/** Classes for the label inside each key. */
+		classes: Object,
+		/**
+		* Extra attributes for one key, by note. The geometry of the key is
+		* applied after the returned style and cannot be overridden.
+		*/
+		keyProps: Function
+	},
+	emits: {
+		/** A note started sounding. */
+		playNote: (note, _velocity) => typeof note === "number",
+		/** Everything holding a note let go of it. */
+		stopNote: (note) => typeof note === "number"
+	},
+	slots: Object,
+	setup(props, { slots, emit, expose }) {
+		const root = ref(null);
+		const activeNotes = ref([]);
+		/** Set while `resizable` is on, measured from the parent. */
+		const resizedKeyWidth = ref(null);
+		const notes = computed(() => getNoteRangeArray(props.noteRange));
+		const layout = computed(() => ({
+			noteRange: props.noteRange,
+			whiteKeyWidth: props.resizable ? resizedKeyWidth.value ?? props.whiteKeyWidth : props.whiteKeyWidth,
+			keyGap: props.keyGap,
+			blackKeyWidthRatio: props.blackKeyWidthRatio,
+			blackKeyHeightRatio: props.blackKeyHeightRatio
+		}));
+		const settings = () => ({
+			layout: layout.value,
+			glissando: props.glissando,
+			midiMax: props.midiMax,
+			keyboardShortcuts: props.keyboardShortcuts,
+			keyboardShortcutsScope: props.keyboardShortcutsScope
+		});
+		let instance = null;
+		watch(root, (element, _, onCleanup) => {
+			if (!element) return;
+			const current = createPianoInput(element, {
+				...settings(),
+				onPlayNote: (note, velocity) => emit("playNote", note, velocity),
+				onStopNote: (note) => emit("stopNote", note),
+				onActiveNotesChange: (next) => {
+					activeNotes.value = next;
+				}
+			});
+			instance = current;
+			onCleanup(() => {
+				instance = null;
+				current.destroy();
+			});
+		}, {
+			immediate: true,
+			flush: "post"
+		});
+		watch(settings, (next) => instance?.update(next));
+		watch(() => [
+			root.value,
+			props.resizable,
+			props.noteRange.first,
+			props.noteRange.last,
+			props.keyGap,
+			props.blackKeyWidthRatio
+		], ([element, resizable, first, last, keyGap, blackKeyWidthRatio], _, onCleanup) => {
+			if (!resizable || !element) return;
+			const parent = element.parentElement;
+			if (!parent) throw new Error("doesn't have a parent element.");
+			const observer = new ResizeObserver(() => {
+				resizedKeyWidth.value = fitWhiteKeyWidth(element.clientWidth, {
+					noteRange: {
+						first,
+						last
+					},
+					keyGap,
+					blackKeyWidthRatio
+				});
+			});
+			observer.observe(parent);
+			onCleanup(() => observer.disconnect());
+		}, {
+			immediate: true,
+			flush: "post"
+		});
+		expose({
+			/** Start a note, as a key would. */
+			playNote: (note, velocity) => instance?.noteOn(note, {
+				source: "api",
+				velocity
+			}),
+			/** Release a note started with `playNote`. */
+			stopNote: (note) => instance?.noteOff(note, { source: "api" })
+		});
+		return () => h("div", {
+			ref: root,
+			role: "group",
+			tabindex: 0,
+			"data-resizable": props.resizable ? "" : void 0,
+			style: {
+				position: "relative",
+				width: props.resizable ? "100%" : `${pianoWidth(layout.value)}px`
+			}
+		}, notes.value.map((note, index) => {
+			const state = {
+				index,
+				keyType: isWhiteKey(note) ? "white" : "black",
+				active: activeNotes.value.includes(note),
+				disabled: note > props.midiMax
+			};
+			const { style: keyStyle, ...attributes } = props.keyProps?.(note, state) ?? {};
+			const white = state.keyType === "white";
+			const label = slots.label?.({
+				note,
+				state
+			});
+			return h("div", {
+				key: note,
+				"data-note": note,
+				"data-note-key": noteKey(note),
+				"data-active": state.active ? "" : void 0,
+				"data-disabled": state.disabled ? "" : void 0,
+				...attributes,
+				style: [
+					{
+						position: "absolute",
+						zIndex: white ? 1 : 2
+					},
+					keyStyle,
+					{
+						left: `${notePosition(note, layout.value)}px`,
+						width: `${white ? layout.value.whiteKeyWidth : blackKeyWidth(layout.value)}px`,
+						height: white ? "100%" : `${props.blackKeyHeightRatio * 100}%`
+					}
+				]
+			}, label ? h("div", { class: props.classes?.keyLabelWrapper }, [h("div", { class: props.classes?.keyLabel }, label)]) : void 0);
+		}));
+	}
+});
+//#endregion
+//#region src/components/PointsEditor/context.ts
+const PointsEditorKey = Symbol("PointsEditor");
+/** The context of the enclosing `PointsEditor`, for a part of your own. */
+function usePointsEditorContext() {
+	return injectContext(PointsEditorKey, "PointsEditor");
+}
+//#endregion
+//#region src/components/PointsEditor/PointsEditor.ts
+const EMPTY = [];
+/**
+* Multiple point controller. Bind the selection with `v-model:selection` to
+* hold it yourself; the editor keeps its own otherwise.
+*/
+const PointsEditor = /* @__PURE__ */ defineComponent({
+	name: "PointsEditor",
+	props: {
+		/** Make the points unchangeable and remove them from the tab order. */
+		disabled: Boolean,
+		/** Make the points unmovable. */
+		readonly: Boolean,
+		/** The cursor to show while dragging a point. @default { cursor: 'grabbing' } */
+		externalStyles: Object,
+		/** How much one wheel notch moves the focused point. */
+		wheel: {
+			type: [Array, Object],
+			default: () => POINTS_EDITOR_DEFAULT_WHEEL
+		},
+		/** How much one arrow key press moves a point. */
+		keyboard: {
+			type: [Array, Object],
+			default: () => POINTS_EDITOR_DEFAULT_KEYBOARD
+		},
+		/** How much a drag moves a point, per modifier key. */
+		dragSensitivity: {
+			type: [Number, Object],
+			default: () => DEFAULT_DRAG_SENSITIVITY
+		},
+		/**
+		* Let points be selected, and a selection be moved as one. A selection
+		* updates several points in the same tick.
+		*/
+		selectable: Boolean,
+		/** Ids of the selected points. Bind it with `v-model:selection`. */
+		selection: Array
+	},
+	emits: { "update:selection": (selection) => Array.isArray(selection) },
+	setup(props, { slots, emit }) {
+		const ownSelection = shallowRef(props.selection ?? []);
+		const selectionBox = shallowRef(null);
+		const container = shallowRef(null);
+		const current = computed(() => props.selectable ? props.selection ?? ownSelection.value : EMPTY);
+		const editor = createPointsEditor({
+			onSelectionBoxChange: (rect) => {
+				selectionBox.value = rect;
+			},
+			onSelectionChange: (next) => {
+				ownSelection.value = next;
+				emit("update:selection", next);
+			}
+		});
+		watchEffect(() => editor.update({
+			selectable: props.selectable,
+			selection: current.value
+		}), { flush: "sync" });
+		onScopeDispose(() => editor.destroy());
+		provide(PointsEditorKey, {
+			get disabled() {
+				return props.disabled;
+			},
+			get readonly() {
+				return props.readonly;
+			},
+			get wheel() {
+				return props.wheel;
+			},
+			get keyboard() {
+				return props.keyboard;
+			},
+			get dragSensitivity() {
+				return props.dragSensitivity;
+			},
+			get cursor() {
+				return props.externalStyles?.cursor ?? "grabbing";
+			},
+			get selectable() {
+				return props.selectable;
+			},
+			get selection() {
+				return current.value;
+			},
+			get selectionBox() {
+				return selectionBox.value;
+			},
+			get container() {
+				return container.value;
+			},
+			editor,
+			setContainer: (element) => {
+				container.value = element;
+			}
+		});
+		return () => h("div", {
+			"data-disabled": props.disabled ? "" : void 0,
+			"data-readonly": props.readonly ? "" : void 0,
+			style: { position: "relative" }
+		}, slots.default?.());
+	}
+});
+//#endregion
+//#region src/components/PointsEditor/PointsEditorBackground.ts
+/**
+* Behind the points, filling the editor. The order of the layers holds
+* whichever way they are written, so the z-index is part of the mechanics.
+*/
+const PointsEditorBackground = /* @__PURE__ */ defineComponent({
+	name: "PointsEditorBackground",
+	setup(_, { slots }) {
+		return () => h("div", { style: {
+			position: "absolute",
+			inset: 0,
+			zIndex: 0
+		} }, slots.default?.());
+	}
+});
+//#endregion
+//#region src/components/PointsEditor/PointsEditorContainer.ts
+/** The layer the points are placed in, over the background. */
+const PointsEditorContainer = /* @__PURE__ */ defineComponent({
+	name: "PointsEditorContainer",
+	setup(_, { slots }) {
+		const points = usePointsEditorContext();
+		providePlacement("PointsEditorContainer");
+		const el = ref(null);
+		watchEffect(() => points.setContainer(el.value));
+		const selecting = computed(() => points.selectable && !points.disabled);
+		watch([el, selecting], ([element, on], _, onCleanup) => {
+			if (!element || !on) return;
+			const drag = createDragValue(element, {
+				axis: POINT_AXIS,
+				mapping: elementMapping(() => element),
+				shouldStart: (event) => !points.editor.isPointElement(event.target),
+				onDragStart: ([x, y], state) => points.editor.beginSelectionBox({
+					x,
+					y
+				}, state.event),
+				onChange: ([x, y]) => points.editor.moveSelectionBox({
+					x,
+					y
+				}),
+				onDragEnd: () => points.editor.endSelectionBox()
+			});
+			onCleanup(() => drag.destroy());
+		}, {
+			immediate: true,
+			flush: "post"
+		});
+		useWheel(el, (event) => {
+			const move = wheelMove(event);
+			if (!move) return;
+			const axis = move.axis === 0 ? "x" : "y";
+			if (points.editor.nudgeFocusedPoint(axis, move.direction, event)) event.preventDefault();
+		});
+		return () => h("div", {
+			ref: el,
+			style: {
+				position: "absolute",
+				inset: 0,
+				zIndex: 10
+			}
+		}, slots.default?.());
+	}
+});
+//#endregion
+//#region src/components/_util/visually-hidden-range-input.ts
+/**
+* The control underneath a headless part: out of sight, but in the
+* accessibility tree and the tab order, carrying the ARIA and the keyboard.
+*
+* A plain element rather than a component, so that a `ref` on it reaches the
+* `<input>` itself.
+*/
+function visuallyHiddenRangeInput(props) {
+	return h("input", {
+		...props,
+		type: "range",
+		style: visuallyHiddenStyle
+	});
+}
+//#endregion
+//#region src/components/PointsEditor/PointsEditorPoint.ts
+const perAxis = (setting, axis) => typeof setting === "string" ? setting : setting?.[axis];
+/** One point, bound with `v-model` as `{ x, y }` from 0 to 1. */
+const PointsEditorPoint = /* @__PURE__ */ defineComponent({
+	name: "PointsEditorPoint",
+	inheritAttrs: false,
+	props: {
+		/** Where the point is, with `y` growing downwards. Bind it with `v-model`. */
+		modelValue: {
+			type: Object,
+			required: true
+		},
+		/** How the selection refers to this point. One is generated when left out. */
+		id: String,
+		/** The lowest position the point can take, per axis. */
+		min: Object,
+		/** The highest position the point can take, per axis. */
+		max: Object,
+		/** Sets `--color`, for the theme to colour the point with. */
+		color: String,
+		/** Overrides the `disabled` of `PointsEditor`. */
+		disabled: {
+			type: Boolean,
+			default: void 0
+		},
+		/** Overrides the `readonly` of `PointsEditor`. */
+		readonly: {
+			type: Boolean,
+			default: void 0
+		},
+		/** Overrides the `wheel` of `PointsEditor`; `null` turns it off. */
+		wheel: {
+			type: [Array, Object],
+			default: void 0
+		},
+		/** Overrides the `keyboard` of `PointsEditor`; `null` turns it off. */
+		keyboard: {
+			type: [Array, Object],
+			default: void 0
+		},
+		/** The accessible name of each axis, or one for both. */
+		ariaLabel: [String, Object],
+		/** What the value of each axis means, or one for both. */
+		ariaValuetext: [String, Object]
+	},
+	emits: {
+		"update:modelValue": (value) => typeof value === "object",
+		dragStart: (value) => typeof value === "object",
+		dragEnd: (value) => typeof value === "object"
+	},
+	setup(props, { slots, attrs, emit }) {
+		const points = usePointsEditorContext();
+		checkPlacement("PointsEditorPoint", "PointsEditorContainer");
+		const generatedId = useId();
+		const id = computed(() => props.id ?? generatedId);
+		const disabled = computed(() => props.disabled ?? points.disabled);
+		const readonly = computed(() => props.readonly ?? points.readonly);
+		const inactive = computed(() => disabled.value || readonly.value);
+		const wheel = computed(() => props.wheel === void 0 ? points.wheel : props.wheel);
+		const keyboard = computed(() => props.keyboard === void 0 ? points.keyboard : props.keyboard);
+		const current = computed(() => clampPoint(props.modelValue, props.min, props.max));
+		const el = ref(null);
+		const x = ref(null);
+		const dragging = ref(false);
+		const read = () => ({
+			value: props.modelValue,
+			min: props.min,
+			max: props.max,
+			readonly: inactive.value,
+			onChange: (next) => emit("update:modelValue", next),
+			element: el.value,
+			wheel: wheel.value
+		});
+		watch(id, (key, _, onCleanup) => onCleanup(points.editor.registerPoint(key, read)), { immediate: true });
+		/** Where the pointer was when the drag started. */
+		let origin = null;
+		watch(el, (element, _, onCleanup) => {
+			if (!element) return;
+			const drag = createDragValue(element, {
+				axis: POINT_AXIS,
+				mapping: elementMapping(() => points.container, { sensitivity: (state) => selectModifier(points.dragSensitivity, state.event).value }),
+				cursor: inactive.value ? void 0 : points.cursor,
+				shouldStart: () => !disabled.value,
+				onChange: ([px, py]) => {
+					if (origin) points.editor.movePointDrag({
+						x: px - origin.x,
+						y: py - origin.y
+					});
+				},
+				onDragStart: ([px, py], state) => {
+					points.editor.beginPointDrag(id.value, state.event);
+					origin = {
+						x: px,
+						y: py
+					};
+					dragging.value = true;
+					x.value?.focus();
+					if (!inactive.value) emit("dragStart", current.value);
+				},
+				onDragEnd: () => {
+					origin = null;
+					dragging.value = false;
+					if (!inactive.value) emit("dragEnd", current.value);
+				}
+			});
+			const stop = watch(() => inactive.value ? void 0 : points.cursor, (cursor) => drag.update({ cursor }));
+			onCleanup(() => {
+				stop();
+				drag.destroy();
+			});
+		}, {
+			immediate: true,
+			flush: "post"
+		});
+		function onInput(axis, target) {
+			if (readonly.value) {
+				target.value = String(current.value[axis]);
+				return;
+			}
+			const delta = target.valueAsNumber - props.modelValue[axis];
+			points.editor.nudgeSelection(id.value, {
+				x: axis === "x" ? delta : 0,
+				y: axis === "y" ? delta : 0
+			});
+		}
+		const input = (axis) => visuallyHiddenRangeInput({
+			ref: axis === "x" ? x : void 0,
+			"data-axis": axis,
+			value: current.value[axis],
+			min: props.min?.[axis] ?? 0,
+			max: props.max?.[axis] ?? 1,
+			step: "any",
+			disabled: disabled.value,
+			"aria-readonly": readonly.value,
+			"aria-orientation": axis === "x" ? "horizontal" : "vertical",
+			"aria-label": perAxis(props.ariaLabel, axis) ?? axis,
+			"aria-valuetext": perAxis(props.ariaValuetext, axis),
+			onInput: (event) => onInput(axis, event.target)
+		});
+		return () => {
+			const { style, onFocus, onKeydown, ...rest } = attrs;
+			return h("div", {
+				ref: el,
+				tabindex: -1,
+				"data-disabled": disabled.value ? "" : void 0,
+				"data-readonly": readonly.value ? "" : void 0,
+				"data-dragging": dragging.value ? "" : void 0,
+				"data-selected": points.selection.includes(id.value) ? "" : void 0,
+				...rest,
+				style: [
+					{
+						position: "absolute",
+						translate: "var(--translate, -50% -50%)",
+						"--color": props.color
+					},
+					style,
+					{
+						left: `${props.modelValue.x * 100}%`,
+						top: `${props.modelValue.y * 100}%`
+					}
+				],
+				...mergeProps({
+					onFocus: (event) => {
+						if (!disabled.value && event.target === event.currentTarget) x.value?.focus();
+					},
+					onKeydown: (event) => {
+						const move = arrowKeyMove(event.key);
+						if (!move) return;
+						event.preventDefault();
+						if (inactive.value || !keyboard.value) return;
+						points.editor.nudgePoint(id.value, move.axis === 0 ? "x" : "y", move.direction, keyboard.value, event);
+					}
+				}, {
+					onFocus,
+					onKeydown
+				})
+			}, [
+				input("x"),
+				input("y"),
+				slots.default?.()
+			]);
+		};
+	}
+});
+//#endregion
+//#region src/components/PointsEditor/PointsEditorSelectionBox.ts
+/**
+* The box a drag on empty space draws. Nothing is rendered while no drag is
+* running, and it takes none of the pointer.
+*/
+const PointsEditorSelectionBox = /* @__PURE__ */ defineComponent({
+	name: "PointsEditorSelectionBox",
+	setup(_, { slots }) {
+		const points = usePointsEditorContext();
+		checkPlacement("PointsEditorSelectionBox", "PointsEditorContainer");
+		return () => {
+			const box = points.selectionBox;
+			if (!box) return null;
+			return h("div", { style: {
+				position: "absolute",
+				zIndex: 20,
+				pointerEvents: "none",
+				left: `${box.x * 100}%`,
+				top: `${box.y * 100}%`,
+				width: `${box.width * 100}%`,
+				height: `${box.height * 100}%`
+			} }, slots.default?.());
+		};
+	}
+});
+//#endregion
+//#region src/components/Slider/context.ts
+const SliderKey = Symbol("Slider");
+/** The context of the enclosing `Slider`, for a part of your own. */
+function useSliderContext() {
+	return injectContext(SliderKey, "Slider");
+}
+//#endregion
+//#region src/components/Slider/Slider.ts
+/** Customizable slider. Bind the value with `v-model`. */
+const Slider = /* @__PURE__ */ defineComponent({
+	name: "Slider",
+	props: {
+		/** The current value. Bind it with `v-model`. */
+		modelValue: {
+			type: Number,
+			required: true
+		},
+		/** The value at the start of the travel. */
+		min: {
+			type: Number,
+			required: true
+		},
+		/** The value at the end of the travel. */
+		max: {
+			type: Number,
+			required: true
+		},
+		/** Granularity of the value. @default 1 */
+		step: {
+			type: Number,
+			default: 1
+		},
+		/** How the value is distributed across the travel. @default linearScale */
+		scale: {
+			type: Object,
+			default: () => linearScale
+		},
+		/** Run the slider vertically, with the value growing upwards. */
+		vertical: Boolean,
+		/** Grow the value the other way. */
+		reverse: Boolean,
+		/** The cursor to show while dragging. @default { cursor: 'pointer' } */
+		externalStyles: Object,
+		wheel: wheelProp,
+		keyboard: keyboardProp,
+		dragSensitivity: dragSensitivityProp,
+		/** Make the slider unchangeable and remove it from the tab order. */
+		disabled: Boolean,
+		/** Make the value unchangeable. */
+		readonly: Boolean
+	},
+	emits: {
+		"update:modelValue": (value) => typeof value === "number",
+		/** A drag started, with the value where the track was pressed. */
+		dragStart: (value) => typeof value === "number",
+		/** The drag ended, with the value it ended on. */
+		dragEnd: (value) => typeof value === "number"
+	},
+	setup(props, { slots, emit, expose }) {
+		const root = ref(null);
+		let track = null;
+		let thumb = null;
+		const inactive = computed(() => props.disabled || props.readonly);
+		const displayReversed = computed(() => props.vertical !== props.reverse);
+		const percent = computed(() => valuePercent(props.modelValue, {
+			min: props.min,
+			max: props.max,
+			scale: props.scale
+		}, displayReversed.value));
+		const axis = computed(() => ({
+			min: props.min,
+			max: props.max,
+			step: props.step,
+			scale: props.scale,
+			reverse: displayReversed.value
+		}));
+		useCheckSteps(() => ({
+			component: "Slider",
+			range: axis.value,
+			keyboard: props.keyboard,
+			wheel: props.wheel
+		}));
+		const change = (next) => emit("update:modelValue", next);
+		provide(SliderKey, {
+			get value() {
+				return props.modelValue;
+			},
+			get min() {
+				return props.min;
+			},
+			get max() {
+				return props.max;
+			},
+			get step() {
+				return props.step;
+			},
+			get scale() {
+				return props.scale;
+			},
+			get vertical() {
+				return props.vertical;
+			},
+			get reverse() {
+				return props.reverse;
+			},
+			get disabled() {
+				return props.disabled;
+			},
+			get readonly() {
+				return props.readonly;
+			},
+			get percent() {
+				return percent.value;
+			},
+			change,
+			setTrack: (element) => {
+				track = element;
+			},
+			setThumb: (input) => {
+				thumb = input;
+			}
+		});
+		const valueOf = (v) => v[props.vertical ? 1 : 0];
+		useDragValue(root, () => ({
+			axis: axis.value,
+			mapping: elementMapping(() => track, { sensitivity: (state) => selectModifier(props.dragSensitivity, state.event).value }),
+			cursor: inactive.value ? void 0 : props.externalStyles?.cursor ?? "pointer",
+			shouldStart: () => !inactive.value,
+			updateOnPointerDown: true,
+			onChange: (v) => {
+				if (!inactive.value) change(valueOf(v));
+			},
+			onDragStart: (v) => {
+				if (inactive.value) return;
+				thumb?.focus();
+				emit("dragStart", valueOf(v));
+			},
+			onDragEnd: (v) => {
+				if (!inactive.value) emit("dragEnd", valueOf(v));
+			}
+		}));
+		useWheel(root, (event) => {
+			if (!props.wheel || inactive.value) return;
+			const direction = wheelDirection(event, { horizontal: !props.vertical });
+			if (direction === null) return;
+			event.preventDefault();
+			change(applyDelta(props.modelValue, props.reverse ? -direction : direction, props.wheel, axis.value, event));
+		}, { requireFocus: true });
+		expose({
+			/** Move the focus to the thumb. */
+			focus: () => {
+				if (!props.disabled) thumb?.focus();
+			},
+			/** Take the focus away from the thumb. */
+			blur: () => thumb?.blur()
+		});
+		return () => h("div", {
+			ref: root,
+			role: "group",
+			tabindex: -1,
+			"data-orientation": props.vertical ? "vertical" : "horizontal",
+			"data-disabled": props.disabled ? "" : void 0,
+			"data-readonly": props.readonly ? "" : void 0,
+			onKeydown: (event) => {
+				const direction = arrowKeyDirection(event.key);
+				if (direction === null) return;
+				event.preventDefault();
+				if (!props.keyboard || inactive.value) return;
+				change(applyDelta(props.modelValue, props.reverse ? -direction : direction, props.keyboard, axis.value, event));
+			},
+			onFocus: () => {
+				if (!props.disabled) thumb?.focus();
+			},
+			onBlur: () => thumb?.blur()
+		}, slots.default?.());
+	}
+});
+//#endregion
+//#region src/components/Slider/SliderMarksOption.ts
+/** One mark along the slider, and its label. */
+const SliderMarksOption = /* @__PURE__ */ defineComponent({
+	name: "SliderMarksOption",
+	props: {
+		/** Where the mark sits, on the same scale as the thumb. */
+		value: {
+			type: Number,
+			required: true
+		},
+		/** Draw the mark itself. @default true */
+		mark: {
+			type: Boolean,
+			default: true
+		},
+		/**
+		* Text shown next to the mark. Leave it out to show the value; `null`
+		* leaves the label out.
+		*/
+		label: {
+			type: [
+				Number,
+				String,
+				null
+			],
+			default: void 0
+		},
+		/** Thickness of the mark. Sets `--thickness`. */
+		thickness: [Number, String],
+		/** Length of the mark. Sets `--length`. */
+		length: [Number, String],
+		/** Space between the mark and the label. Sets `--gap`. */
+		gap: [Number, String],
+		/** Classes for the mark and the label inside the option. */
+		classes: Object,
+		/** Styles for the mark and the label inside the option. */
+		styles: Object
+	},
+	setup(props) {
+		const slider = useSliderContext();
+		checkPlacement("SliderMarksOption", "SliderMarks");
+		const percent = computed(() => valuePercent(props.value, {
+			min: slider.min,
+			max: slider.max,
+			scale: slider.scale
+		}, slider.vertical !== slider.reverse));
+		return () => {
+			const orientation = slider.vertical ? "vertical" : "horizontal";
+			return h("div", {
+				"data-orientation": orientation,
+				style: {
+					"--thickness": cssLength(props.thickness),
+					"--length": cssLength(props.length),
+					"--gap": cssLength(props.gap),
+					position: "absolute",
+					translate: slider.vertical ? "var(--translate, 0 -50%)" : "var(--translate, -50% 0)",
+					zIndex: 10,
+					left: slider.vertical ? void 0 : `${percent.value}%`,
+					top: slider.vertical ? `${percent.value}%` : void 0
+				}
+			}, [props.mark ? h("div", {
+				class: props.classes?.mark,
+				style: props.styles?.mark,
+				"data-orientation": orientation
+			}) : null, props.label !== null ? h("div", {
+				class: props.classes?.label,
+				style: props.styles?.label
+			}, String(props.label ?? props.value)) : null]);
+		};
+	}
+});
+//#endregion
+//#region src/components/Slider/SliderMarks.ts
+/** The marks along the slider: written out as options, or built from `options`. */
+const SliderMarks = /* @__PURE__ */ defineComponent({
+	name: "SliderMarks",
+	props: {
+		/** Space between the marks and the track. Sets `--gap`. */
+		gap: [Number, String],
+		/**
+		* Build the marks instead of writing `SliderMarksOption` out: a number
+		* puts one every that many, `'step'` one every `step`. The default slot
+		* is ignored while it is set.
+		*/
+		options: [
+			String,
+			Number,
+			Object
+		]
+	},
+	setup(props, { slots }) {
+		const slider = useSliderContext();
+		providePlacement("SliderMarks");
+		const marks = computed(() => {
+			if (props.options === void 0) return [];
+			const list = sliderMarks(props.options, slider.min, slider.max, slider.step);
+			return slider.vertical !== slider.reverse ? list.reverse() : list;
+		});
+		return () => h("div", {
+			"data-orientation": slider.vertical ? "vertical" : "horizontal",
+			style: {
+				"--gap": cssLength(props.gap),
+				position: "relative"
+			}
+		}, props.options !== void 0 ? marks.value.map(({ value, mark, label }) => h(SliderMarksOption, {
+			key: value,
+			value,
+			mark,
+			label: label ? void 0 : null
+		})) : slots.default?.());
+	}
+});
+//#endregion
+//#region src/components/Slider/SliderThumb.ts
+/**
+* The thumb, placed at the value. The ARIA (`aria-label` and friends) lands
+* on the range input inside it, which is the control and takes the focus.
+*/
+const SliderThumb = /* @__PURE__ */ defineComponent({
+	name: "SliderThumb",
+	inheritAttrs: false,
+	props: { 
+	/** Sets `--color`, for the theme to colour the thumb with. */
+color: String },
+	setup(props, { slots, attrs, expose }) {
+		const slider = useSliderContext();
+		checkPlacement("SliderThumb", "SliderTrack");
+		const input = ref(null);
+		watchEffect(() => slider.setThumb(input.value));
+		onBeforeUnmount(() => slider.setThumb(null));
+		expose({
+			focus: () => {
+				if (!slider.disabled) input.value?.focus();
+			},
+			blur: () => input.value?.blur()
+		});
+		return () => {
+			const { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, "aria-valuetext": ariaValuetext, style, ...rest } = attrs;
+			return h("div", {
+				"data-disabled": slider.disabled ? "" : void 0,
+				"data-readonly": slider.readonly ? "" : void 0,
+				...rest,
+				style: [
+					{
+						position: "absolute",
+						translate: "var(--translate, -50% -50%)",
+						zIndex: 100,
+						"--color": props.color
+					},
+					style,
+					{
+						top: slider.vertical ? `${slider.percent}%` : "50%",
+						left: slider.vertical ? "50%" : `${slider.percent}%`
+					}
+				]
+			}, [visuallyHiddenRangeInput({
+				ref: input,
+				value: slider.value,
+				min: slider.min,
+				max: slider.max,
+				step: slider.step,
+				disabled: slider.disabled,
+				"aria-readonly": slider.readonly,
+				"aria-orientation": slider.vertical ? "vertical" : "horizontal",
+				"aria-label": ariaLabel,
+				"aria-labelledby": ariaLabelledby,
+				"aria-describedby": ariaDescribedby,
+				"aria-valuetext": ariaValuetext,
+				onInput: (event) => {
+					const target = event.target;
+					if (slider.readonly) {
+						target.value = String(slider.value);
+						return;
+					}
+					slider.change(target.valueAsNumber);
+				}
+			}), slots.default?.()]);
+		};
+	}
+});
+//#endregion
+//#region src/components/Slider/SliderTrack.ts
+/** The track the thumb runs along, and what the pointer is measured against. */
+const SliderTrack = /* @__PURE__ */ defineComponent({
+	name: "SliderTrack",
+	props: {
+		/** How long the track is along the axis the slider runs. Sets `--length`. */
+		length: [Number, String],
+		/** How thick the track is across that axis. Sets `--thickness`. */
+		thickness: [Number, String],
+		/** Colour of the part from `min` to the value. Sets `--active`. */
+		active: String,
+		/** Colour of the rest of the track. Sets `--inactive`. */
+		inactive: String
+	},
+	setup(props, { slots }) {
+		const slider = useSliderContext();
+		providePlacement("SliderTrack");
+		const el = ref(null);
+		watchEffect(() => slider.setTrack(el.value));
+		onBeforeUnmount(() => slider.setTrack(null));
+		return () => h("div", {
+			ref: el,
+			"data-disabled": slider.disabled ? "" : void 0,
+			"data-orientation": slider.vertical ? "vertical" : "horizontal",
+			"data-flipped": slider.vertical !== slider.reverse ? "" : void 0,
+			style: {
+				"--active": props.active,
+				"--inactive": props.inactive,
+				"--length": cssLength(props.length),
+				"--thickness": cssLength(props.thickness),
+				"--percent": `${slider.percent}%`,
+				position: "relative"
+			}
+		}, slots.default?.());
+	}
+});
+//#endregion
+//#region src/components/XYPad/context.ts
+const XYPadKey = Symbol("XYPad");
+/** The context of the enclosing `XYPad`, for a part of your own. */
+function useXYPadContext() {
+	return injectContext(XYPadKey, "XYPad");
+}
+//#endregion
+//#region src/components/XYPad/XYPad.ts
+/**
+* Two-dimensional slider. The per-axis settings are `[x, y]` tuples, and a
+* plain value applies to both axes. Bind the value with `v-model`.
+*/
+const XYPad = /* @__PURE__ */ defineComponent({
+	name: "XYPad",
+	props: {
+		/** The current value as `[x, y]`. Bind it with `v-model`. */
+		modelValue: {
+			type: Array,
+			required: true
+		},
+		/** The value at the start of the travel, per axis. */
+		min: {
+			type: [Number, Array],
+			required: true
+		},
+		/** The value at the end of the travel, per axis. */
+		max: {
+			type: [Number, Array],
+			required: true
+		},
+		/** Granularity of the value, per axis. @default 1 */
+		step: {
+			type: [Number, Array],
+			default: 1
+		},
+		/** How the value is distributed, per axis. @default linearScale */
+		scale: {
+			type: [Object, Array],
+			default: () => linearScale
+		},
+		/** Grow the value the other way, per axis. `y` grows downwards unless reversed. */
+		reverse: {
+			type: [Boolean, Array],
+			default: false
+		},
+		/** The cursor to show while dragging. @default { cursor: 'pointer' } */
+		externalStyles: Object,
+		wheel: wheelProp,
+		keyboard: keyboardProp,
+		dragSensitivity: dragSensitivityProp,
+		/** Make the pad unchangeable and remove it from the tab order. */
+		disabled: Boolean,
+		/** Make the value unchangeable. */
+		readonly: Boolean
+	},
+	emits: {
+		"update:modelValue": (value) => Array.isArray(value),
+		dragStart: (value) => Array.isArray(value),
+		dragEnd: (value) => Array.isArray(value)
+	},
+	setup(props, { slots, emit, expose }) {
+		const root = ref(null);
+		let area = null;
+		let thumb = null;
+		const inactive = computed(() => props.disabled || props.readonly);
+		const min = computed(() => toXY(props.min));
+		const max = computed(() => toXY(props.max));
+		const step = computed(() => toXY(props.step));
+		const scale = computed(() => toXY(props.scale));
+		const reverse = computed(() => toXY(props.reverse));
+		const percent = computed(() => [0, 1].map((i) => valuePercent(props.modelValue[i], {
+			min: min.value[i],
+			max: max.value[i],
+			scale: scale.value[i]
+		}, reverse.value[i])));
+		const axis = computed(() => [0, 1].map((i) => ({
+			min: min.value[i],
+			max: max.value[i],
+			step: step.value[i],
+			scale: scale.value[i],
+			reverse: reverse.value[i]
+		})));
+		for (const [i, name] of [[0, "x"], [1, "y"]]) useCheckSteps(() => ({
+			component: "XYPad",
+			axis: name,
+			range: axis.value[i],
+			keyboard: props.keyboard,
+			wheel: props.wheel
+		}));
+		const change = (next) => emit("update:modelValue", next);
+		/** Move one axis by one press of `option`, in screen coordinates. */
+		function nudge({ axis: i, direction }, option, modifiers) {
+			const value = props.modelValue;
+			const next = applyDelta(value[i], reverse.value[i] ? -direction : direction, option, axis.value[i], modifiers);
+			change(i === 0 ? [next, value[1]] : [value[0], next]);
+		}
+		provide(XYPadKey, {
+			get value() {
+				return props.modelValue;
+			},
+			get min() {
+				return min.value;
+			},
+			get max() {
+				return max.value;
+			},
+			get step() {
+				return step.value;
+			},
+			get scale() {
+				return scale.value;
+			},
+			get reverse() {
+				return reverse.value;
+			},
+			get disabled() {
+				return props.disabled;
+			},
+			get readonly() {
+				return props.readonly;
+			},
+			get percent() {
+				return percent.value;
+			},
+			change,
+			setArea: (element) => {
+				area = element;
+			},
+			setThumb: (input) => {
+				thumb = input;
+			}
+		});
+		useDragValue(root, () => ({
+			axis: axis.value,
+			mapping: elementMapping(() => area, { sensitivity: (state) => selectModifier(props.dragSensitivity, state.event).value }),
+			updateOnPointerDown: true,
+			cursor: inactive.value ? void 0 : props.externalStyles?.cursor ?? "pointer",
+			shouldStart: () => !inactive.value,
+			onChange: (v) => {
+				if (!inactive.value) change(v);
+			},
+			onDragStart: (v) => {
+				if (inactive.value) return;
+				thumb?.focus();
+				emit("dragStart", v);
+			},
+			onDragEnd: (v) => {
+				if (!inactive.value) emit("dragEnd", v);
+			}
+		}));
+		useWheel(root, (event) => {
+			if (!props.wheel || inactive.value) return;
+			const move = wheelMove(event);
+			if (!move) return;
+			event.preventDefault();
+			nudge(move, props.wheel, event);
+		}, { requireFocus: true });
+		expose({
+			focus: () => {
+				if (!props.disabled) thumb?.focus();
+			},
+			blur: () => thumb?.blur()
+		});
+		return () => h("div", {
+			ref: root,
+			role: "group",
+			tabindex: -1,
+			"data-disabled": props.disabled ? "" : void 0,
+			"data-readonly": props.readonly ? "" : void 0,
+			onKeydown: (event) => {
+				const move = arrowKeyMove(event.key);
+				if (!move) return;
+				event.preventDefault();
+				if (props.keyboard && !inactive.value) nudge(move, props.keyboard, event);
+			},
+			onFocus: () => {
+				if (!props.disabled) thumb?.focus();
+			},
+			onBlur: () => thumb?.blur()
+		}, slots.default?.());
+	}
+});
+//#endregion
+//#region src/components/XYPad/XYPadArea.ts
+/** The area the thumb moves in, and what the pointer is measured against. */
+const XYPadArea = /* @__PURE__ */ defineComponent({
+	name: "XYPadArea",
+	setup(_, { slots }) {
+		const pad = useXYPadContext();
+		providePlacement("XYPadArea");
+		const el = ref(null);
+		watchEffect(() => pad.setArea(el.value));
+		onBeforeUnmount(() => pad.setArea(null));
+		return () => h("div", {
+			ref: el,
+			style: { position: "relative" }
+		}, slots.default?.());
+	}
+});
+//#endregion
+//#region src/components/XYPad/XYPadThumb.ts
+/** The thumb, placed at the value, with one range input per axis inside. */
+const XYPadThumb = /* @__PURE__ */ defineComponent({
+	name: "XYPadThumb",
+	inheritAttrs: false,
+	props: {
+		/** Sets `--color`, for the theme to colour the thumb with. */
+		color: String,
+		/** The accessible name of each axis, as `[x, y]`. */
+		ariaLabel: [String, Array],
+		/** The ids of what labels each axis, as `[x, y]` or one for both. */
+		ariaLabelledby: [String, Array],
+		/** The ids of what describes each axis, as `[x, y]` or one for both. */
+		ariaDescribedby: [String, Array],
+		/** What the value of each axis means, as `[x, y]` or one for both. */
+		ariaValuetext: [String, Array]
+	},
+	setup(props, { slots, attrs, expose }) {
+		const pad = useXYPadContext();
+		checkPlacement("XYPadThumb", "XYPadArea");
+		const x = ref(null);
+		const y = ref(null);
+		watchEffect(() => pad.setThumb(x.value));
+		onBeforeUnmount(() => pad.setThumb(null));
+		expose({
+			focus: () => {
+				if (!pad.disabled) x.value?.focus();
+			},
+			blur: () => {
+				x.value?.blur();
+				y.value?.blur();
+			}
+		});
+		function input(axis) {
+			const labels = toXY(props.ariaLabel);
+			return visuallyHiddenRangeInput({
+				ref: axis === 0 ? x : y,
+				"data-axis": axis === 0 ? "x" : "y",
+				value: pad.value[axis],
+				min: pad.min[axis],
+				max: pad.max[axis],
+				step: pad.step[axis],
+				disabled: pad.disabled,
+				"aria-readonly": pad.readonly,
+				"aria-orientation": axis === 0 ? "horizontal" : "vertical",
+				"aria-label": labels[axis] ?? (axis === 0 ? "x" : "y"),
+				"aria-labelledby": toXY(props.ariaLabelledby)[axis],
+				"aria-describedby": toXY(props.ariaDescribedby)[axis],
+				"aria-valuetext": toXY(props.ariaValuetext)[axis],
+				onInput: (event) => {
+					const target = event.target;
+					if (pad.readonly) {
+						target.value = String(pad.value[axis]);
+						return;
+					}
+					const next = [...pad.value];
+					next[axis] = target.valueAsNumber;
+					pad.change(next);
+				}
+			});
+		}
+		return () => {
+			const { style, ...rest } = attrs;
+			return h("div", {
+				"data-disabled": pad.disabled ? "" : void 0,
+				"data-readonly": pad.readonly ? "" : void 0,
+				...rest,
+				style: [
+					{
+						position: "absolute",
+						translate: "var(--translate, -50% -50%)",
+						zIndex: 100,
+						"--color": props.color
+					},
+					style,
+					{
+						left: `${pad.percent[0]}%`,
+						top: `${pad.percent[1]}%`
+					}
+				]
+			}, [
+				input(0),
+				input(1),
+				slots.default?.()
+			]);
+		};
+	}
+});
+//#endregion
+//#region src/composables/useDrag.ts
+/**
+* Track a pointer drag on an element. See `createDrag` in `@tremolo-ui/dom`
+* for the options.
+*
+* @example
+* const el = useTemplateRef('el')
+* useDrag(el, { onDrag: (state) => (x.value += state.deltaX) })
+*/
+function useDrag(target, options = {}) {
+	useInstance(target, options, createDrag, (instance, next) => instance.update(next));
+}
+//#endregion
+//#region src/composables/useMIDIAccess.ts
+/**
+* Request MIDI access in the browser. Call it during `setup`.
+*
+* `state` holds the access, the error and the connected inputs, and follows
+* devices as they are plugged in and unplugged.
+*
+* @param requestOnMount ask for access once the component is mounted — never
+* during server rendering, where there is no MIDI to ask for. Leave it off to
+* ask from a click instead, so that opening a page does not bring up a
+* permission prompt. A ref or a getter asks once it turns true.
+*/
+function useMIDIAccess(requestOnMount = true) {
+	const instance = createMIDIAccess();
+	const state = shallowRef(instance.getState());
+	const unsubscribe = instance.subscribe(() => {
+		state.value = instance.getState();
+	});
+	onMounted(() => {
+		watch(() => toValue(requestOnMount), (request) => {
+			if (request) instance.request();
+		}, { immediate: true });
+	});
+	onScopeDispose(() => {
+		unsubscribe();
+		instance.destroy();
+	});
+	return {
+		state: computed(() => state.value),
+		/**
+		* Ask for access. Takes `{ sysex: true }` when the app needs system
+		* exclusive messages, which browsers treat as a separate permission.
+		*/
+		request: (options) => instance.request(options)
+	};
+}
+//#endregion
+//#region src/composables/useMIDIInput.ts
+/**
+* Handle the channel voice messages of every connected input. Call it during
+* `setup`. See `createMIDIInput` in `@tremolo-ui/dom` for the handlers.
+*
+* The listeners follow `midiAccess` as it is granted, and new handlers
+* replace the old ones without re-subscribing.
+*/
+function useMIDIInput(midiAccess, handlers) {
+	let instance = null;
+	watch(() => toValue(midiAccess), (access, _, onCleanup) => {
+		const current = createMIDIInput(access, toValue(handlers));
+		instance = current;
+		onCleanup(() => {
+			current.destroy();
+			if (instance === current) instance = null;
+		});
+	}, { immediate: true });
+	watch(() => toValue(handlers), (next) => instance?.update(next));
+}
+//#endregion
+//#region src/composables/useMIDIMessage.ts
+/**
+* Listen to raw `midimessage` events on every input. Call it during `setup`.
+* For note and controller events, `useMIDIInput` decodes the message for you.
+*/
+function useMIDIMessage(midiAccess, onMIDIMessage) {
+	let instance = null;
+	watch(() => toValue(midiAccess), (access, _, onCleanup) => {
+		const current = createMIDIMessage(access, toValue(onMIDIMessage));
+		instance = current;
+		onCleanup(() => {
+			current.destroy();
+			if (instance === current) instance = null;
+		});
+	}, { immediate: true });
+	watch(() => toValue(onMIDIMessage), (next) => instance?.update(next));
+}
+//#endregion
+export { AnimationCanvas, DropZone, FileInput, FileInputTrigger, Knob, KnobActiveLine, KnobInactiveLine, KnobSVGRoot, KnobThumb, NumberInput, NumberInputDecrementStepper, NumberInputField, NumberInputIncrementStepper, NumberInputStepper, Piano, PointsEditor, PointsEditorBackground, PointsEditorContainer, PointsEditorPoint, PointsEditorSelectionBox, Slider, SliderMarks, SliderMarksOption, SliderThumb, SliderTrack, XYPad, XYPadArea, XYPadThumb, useDrag, useDragValue, useDropZone, useFileInputContext, useKnobContext, useLongPress, useMIDIAccess, useMIDIInput, useMIDIMessage, useNumberInputContext, usePointsEditorContext, useSliderContext, useWheel, useXYPadContext };
+
+//# sourceMappingURL=index.js.map