@tremolo-ui/vue 0.8.0 → 0.9.0

package/dist/index.js

@@ -1,7 +1,7 @@
 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 { DEFAULT_DRAG_SENSITIVITY, DEFAULT_KEYBOARD_OPTIONS, DEFAULT_WHEEL_OPTIONS, KNOB_VIEWBOX_SIZE, createAnimationCanvas, createChangeGesture, createDrag, createDragValue, createDropZone, createLongPress, createMIDIAccess, createMIDIInput, createMIDIMessage, createPianoInput, createPointsEditor, createWheel, elementMapping, knobAngles, knobArcPath, knobArcRadius, notePosition, relativeMapping, valuePercent } from "@tremolo-ui/dom";
+import { POINTS_EDITOR_DEFAULT_KEYBOARD, POINTS_EDITOR_DEFAULT_WHEEL, POINT_AXIS, applyDelta, arrowKeyDirection, arrowKeyMove, blackKeyWidth, caretAtDecimalOffset, caretDecimalOffset, checkSteps, clampPoint, commitNumberInputText, createStepperDrag, cssLength, fitWhiteKeyWidth, getNoteRangeArray, nudgeNumberInput, numberInputBounds, numberInputRanges, numberSpan, parseNumberText, partitionByAccept, pianoWidth, replaceOptions, selectModifier, sliderMarks, toXY, visuallyHiddenStyle, wheelDirection, wheelMove } from "@tremolo-ui/dom/internal";
 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",
@@ -12,7 +12,7 @@ const AnimationCanvas = /* @__PURE__ */ defineComponent({
 			type: Function,
 			required: true
 		},
-		/** Sets the canvas up before the first frame and after a resize. */
+		/** Sets the canvas up, once, before the first frame. */
 		init: Function,
 		/** Draw on every animation frame. @default true */
 		animate: {
@@ -135,8 +135,6 @@ function useDropZone(target, options = {}) {
 	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",
@@ -186,8 +184,6 @@ const FileInputKey = Symbol("FileInput");
 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.
@@ -291,7 +287,37 @@ function useDragValue(target, options) {
 * `@tremolo-ui/dom`.
 */
 function useWheel(target, onWheel, options = {}) {
-	useInstance(target, options, (element, opts) => createWheel(element, (event) => onWheel(event), opts), (instance, next) => instance.update(next));
+	useInstance(target, options, (element, opts) => createWheel(element, {
+		...opts,
+		onWheel: (event) => onWheel(event)
+	}), (instance, next) => instance.update(next));
+}
+//#endregion
+//#region src/components/_util/change-gesture.ts
+/**
+* The core's change gesture, reporting the control's value: the start gets
+* the value before the change, the end the last one the control emitted.
+* `modelValue` lags behind until the parent renders, and a drag ends in the
+* same event as its last change, so the component reports each value it
+* emits through `changed`.
+*/
+function useChangeGesture(options) {
+	let last = options.value();
+	const gesture = createChangeGesture({
+		onStart: (source) => {
+			last = options.value();
+			options.onStart(last, source);
+		},
+		onEnd: (source) => options.onEnd(last, source)
+	});
+	watchEffect(() => gesture.update({ endDelay: options.endDelay() }));
+	watch(options.inactive, (inactive) => {
+		if (inactive) gesture.end();
+	});
+	onScopeDispose(() => gesture.end());
+	return Object.assign(gesture, { changed: (value) => {
+		last = value;
+	} });
 }
 //#endregion
 //#region src/components/_util/useCheckSteps.ts
@@ -309,8 +335,6 @@ function useCheckSteps(options) {
 		});
 	} 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`.
@@ -343,14 +367,23 @@ const Knob = /* @__PURE__ */ defineComponent({
 			type: Object,
 			default: () => linearScale
 		},
-		/** The value a double click restores. @default min */
-		defaultValue: Number,
+		/**
+		* The value a double click restores. `null` turns the double click off.
+		* @default startValue
+		*/
+		resetValue: {
+			type: Number,
+			default: void 0
+		},
 		/** 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,
+		/** The cursor to show while dragging. @default 'grabbing' */
+		dragCursor: {
+			type: String,
+			default: "grabbing"
+		},
 		/** How much one notch of the wheel moves the value. `null` turns it off. */
 		wheel: {
 			type: [Array, Object],
@@ -368,22 +401,35 @@ const Knob = /* @__PURE__ */ defineComponent({
 		},
 		/** 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 long after the last wheel notch or arrow key a change counts as over,
+		* in milliseconds, for `change-end`.
+		* @default 500
+		*/
+		changeEndDelay: {
+			type: Number,
+			default: 500
+		},
 		/** 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" },
+	emits: {
+		"update:modelValue": (value) => typeof value === "number",
+		/**
+		* A change of the value started, with the value before it and what it is
+		* made with.
+		*/
+		changeStart: (value, _source) => typeof value === "number",
+		/** The change ended, with the value it ended on. */
+		changeEnd: (value, _source) => typeof value === "number"
+	},
 	setup(props, { slots, emit, expose }) {
 		const root = ref(null);
 		const dragging = ref(false);
@@ -434,7 +480,17 @@ const Knob = /* @__PURE__ */ defineComponent({
 				return angles.value;
 			}
 		});
-		const change = (next) => emit("update:modelValue", next);
+		const gesture = useChangeGesture({
+			value: () => props.modelValue,
+			inactive: () => inactive.value,
+			endDelay: () => props.changeEndDelay,
+			onStart: (value, source) => emit("changeStart", value, source),
+			onEnd: (value, source) => emit("changeEnd", value, source)
+		});
+		const change = (next) => {
+			gesture.changed(next);
+			emit("update:modelValue", next);
+		};
 		useDragValue(root, () => ({
 			axis: [range.value, {
 				...range.value,
@@ -446,7 +502,7 @@ const Knob = /* @__PURE__ */ defineComponent({
 			}),
 			getValue: () => [props.modelValue, props.modelValue],
 			threshold: 1,
-			cursor: inactive.value ? void 0 : props.externalStyles?.cursor ?? "grabbing",
+			cursor: inactive.value ? void 0 : props.dragCursor,
 			pointerLock: inactive.value ? false : props.pointerLock,
 			shouldStart: () => !inactive.value,
 			onChange: (v) => {
@@ -454,9 +510,11 @@ const Knob = /* @__PURE__ */ defineComponent({
 			},
 			onDragStart: () => {
 				dragging.value = true;
+				if (!inactive.value) gesture.hold("pointer");
 			},
 			onDragEnd: () => {
 				dragging.value = false;
+				gesture.end();
 			}
 		}));
 		useWheel(root, (event) => {
@@ -464,6 +522,7 @@ const Knob = /* @__PURE__ */ defineComponent({
 			const direction = wheelDirection(event);
 			if (direction === null) return;
 			event.preventDefault();
+			gesture.pulse("wheel");
 			change(applyDelta(props.modelValue, direction, props.wheel, range.value, event));
 		}, { requireFocus: true });
 		expose({
@@ -492,10 +551,11 @@ const Knob = /* @__PURE__ */ defineComponent({
 				const direction = arrowKeyDirection(event.key);
 				if (direction === null) return;
 				event.preventDefault();
+				gesture.pulse("keyboard");
 				change(applyDelta(props.modelValue, direction, props.keyboard, range.value, event));
 			},
 			onDblclick: () => {
-				if (!inactive.value && props.enableDoubleClickDefault) change(props.defaultValue ?? props.min);
+				if (!inactive.value && props.resetValue !== null) gesture.instant("doubleClick", () => change(props.resetValue ?? props.startValue ?? props.min));
 			}
 		}, slots.default?.());
 	}
@@ -599,34 +659,32 @@ const KnobSVGRoot = /* @__PURE__ */ defineComponent({
 		}, 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: {
+		color: {
 			type: String,
 			default: "currentColor"
 		},
 		/** Colour of the line that points at the value. @default 'currentColor' */
-		thumbLine: {
+		lineColor: {
 			type: String,
 			default: "currentColor"
 		},
 		/** Diameter of the circle, as a percentage of the knob. @default 84 */
-		thumbSize: {
+		size: {
 			type: Number,
 			default: 84
 		},
 		/** Thickness of the line, as a percentage of the knob. @default 6 */
-		thumbLineWeight: {
+		lineWeight: {
 			type: Number,
 			default: 6
 		},
 		/** How far down the line reaches, as a percentage. @default 35 */
-		thumbLineLength: {
+		lineLength: {
 			type: Number,
 			default: 35
 		},
@@ -639,16 +697,16 @@ const KnobThumb = /* @__PURE__ */ defineComponent({
 		return () => h("svg", null, [h("circle", {
 			cx: "50%",
 			cy: "50%",
-			r: `${props.thumbSize / 2}%`,
-			fill: props.thumb
+			r: `${props.size / 2}%`,
+			fill: props.color
 		}), h("line", {
-			class: props.classes?.thumbLine,
+			class: props.classes?.line,
 			x1: "50%",
-			y1: `${(KNOB_VIEWBOX_SIZE - clamp(props.thumbSize, 0, 100)) / 2}%`,
+			y1: `${(KNOB_VIEWBOX_SIZE - clamp(props.size, 0, 100)) / 2}%`,
 			x2: "50%",
-			y2: `${props.thumbLineLength}%`,
-			stroke: props.thumbLine,
-			"stroke-width": `${props.thumbLineWeight}%`,
+			y2: `${props.lineLength}%`,
+			stroke: props.lineColor,
+			"stroke-width": `${props.lineWeight}%`,
 			style: {
 				transform: `rotate(${knob.angles.r1 + knob.angles.p * knob.angleRange}deg)`,
 				transformOrigin: "50% 50%"
@@ -663,6 +721,7 @@ const NumberInputKey = Symbol("NumberInput");
 function useNumberInputContext() {
 	return injectContext(NumberInputKey, "NumberInput");
 }
+const NumberInputGestureKey = Symbol("NumberInputGesture");
 /** @internal Whether the drag on `NumberInputStepper` has moved the value. */
 const StepperKey = Symbol("NumberInputStepper");
 //#endregion
@@ -682,8 +741,6 @@ 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",
@@ -732,6 +789,11 @@ const NumberInput = /* @__PURE__ */ defineComponent({
 		},
 		/** Hide the cursor while dragging the stepper. */
 		pointerLock: Boolean,
+		/** The cursor to show while dragging the stepper. @default 'ns-resize' */
+		dragCursor: {
+			type: String,
+			default: "ns-resize"
+		},
 		/** Select the text when the field takes focus. @default 'none' */
 		selectOnFocus: {
 			type: String,
@@ -749,9 +811,28 @@ const NumberInput = /* @__PURE__ */ defineComponent({
 		/** Make the input unchangeable and remove it from the tab order. */
 		disabled: Boolean,
 		/** Make the value unchangeable while leaving the field focusable. */
-		readonly: Boolean
+		readonly: Boolean,
+		/**
+		* How long after the last wheel notch, arrow key or typed character a change
+		* counts as over, in milliseconds, for `change-end`.
+		* @default 500
+		*/
+		changeEndDelay: {
+			type: Number,
+			default: 500
+		}
+	},
+	emits: {
+		"update:modelValue": (value) => typeof value === "number",
+		/**
+		* A change of the value started — a press on a stepper, the first wheel
+		* notch, arrow key or typed character — with the value before it and what
+		* it is made with.
+		*/
+		changeStart: (value, _source) => typeof value === "number",
+		/** The change ended, with the value it ended on. */
+		changeEnd: (value, _source) => typeof value === "number"
 	},
-	emits: { "update:modelValue": (value) => typeof value === "number" },
 	setup(props, { slots, emit, expose }) {
 		const root = ref(null);
 		/**
@@ -786,11 +867,40 @@ const NumberInput = /* @__PURE__ */ defineComponent({
 			wheel: props.wheel,
 			format: props.format
 		}));
+		const gesture = useChangeGesture({
+			value: () => props.modelValue,
+			inactive: () => inactive.value,
+			endDelay: () => props.changeEndDelay,
+			onStart: (value, source) => emit("changeStart", value, source),
+			onEnd: (value, source) => emit("changeEnd", value, source)
+		});
 		function changeValue(next) {
 			if (inactive.value) return;
 			draft.value = null;
-			if (next !== props.modelValue) emit("update:modelValue", next);
+			if (next === props.modelValue) return;
+			gesture.changed(next);
+			emit("update:modelValue", next);
 		}
+		let pressed = false;
+		provide(NumberInputGestureKey, {
+			press: () => {
+				if (inactive.value) return;
+				gesture.hold("pointer");
+				if (pressed) return;
+				pressed = true;
+				const release = () => {
+					pressed = false;
+					gesture.end();
+					window.removeEventListener("pointerup", release);
+					window.removeEventListener("pointercancel", release);
+				};
+				window.addEventListener("pointerup", release);
+				window.addEventListener("pointercancel", release);
+			},
+			key: () => {
+				if (!inactive.value) gesture.pulse("keyboard");
+			}
+		});
 		provide(NumberInputKey, {
 			get value() {
 				return props.modelValue;
@@ -822,6 +932,9 @@ const NumberInput = /* @__PURE__ */ defineComponent({
 			get pointerLock() {
 				return props.pointerLock;
 			},
+			get dragCursor() {
+				return props.dragCursor;
+			},
 			get selectOnFocus() {
 				return props.selectOnFocus;
 			},
@@ -856,7 +969,12 @@ const NumberInput = /* @__PURE__ */ defineComponent({
 				if (inactive.value) return;
 				draft.value = next;
 				const parsed = props.parse(next);
-				if (Number.isFinite(parsed)) emit("update:modelValue", parsed);
+				if (!Number.isFinite(parsed)) return;
+				if (parsed !== props.modelValue) {
+					gesture.pulse("keyboard");
+					gesture.changed(parsed);
+				}
+				emit("update:modelValue", parsed);
 			},
 			commitDraft: () => {
 				if (draft.value === null || inactive.value) return;
@@ -865,8 +983,13 @@ const NumberInput = /* @__PURE__ */ defineComponent({
 					max: props.max,
 					clampValue: props.clampValue
 				});
-				if (committed === null) draft.value = null;
-				else changeValue(committed);
+				if (committed === null) {
+					draft.value = null;
+					return;
+				}
+				if (committed !== props.modelValue) gesture.pulse("keyboard");
+				changeValue(committed);
+				gesture.end();
 			},
 			changeValue,
 			nudge: (direction, option, modifiers) => changeValue(nudgeNumberInput(props.modelValue, direction, option, ranges.value, modifiers)),
@@ -878,6 +1001,7 @@ const NumberInput = /* @__PURE__ */ defineComponent({
 			const direction = wheelDirection(event);
 			if (!props.wheel || inactive.value || direction === null) return;
 			event.preventDefault();
+			gesture.pulse("wheel");
 			changeValue(nudgeNumberInput(props.modelValue, direction, props.wheel, ranges.value, event));
 		}, { requireFocus: true });
 		expose({
@@ -916,9 +1040,11 @@ function stepperButton(name, direction) {
 		setup(_, { slots }) {
 			const field = useNumberInputContext();
 			const stepper = inject(StepperKey, null);
+			const gesture = inject(NumberInputGestureKey, null);
 			const blocked = computed(() => field.disabled || (direction > 0 ? field.atMax : field.atMin));
 			const press = useLongPress({ onPress: () => {
 				if (field.disabled || field.readonly) return;
+				gesture?.press();
 				if (stepper?.moved()) return;
 				field.nudge(direction, ["raw", field.step]);
 			} });
@@ -959,6 +1085,7 @@ const NumberInputField = /* @__PURE__ */ defineComponent({
 	name: "NumberInputField",
 	setup(_, { expose }) {
 		const field = useNumberInputContext();
+		const gesture = inject(NumberInputGestureKey, null);
 		const input = ref(null);
 		const focused = ref(false);
 		watchEffect(() => field.setInput(input.value));
@@ -979,6 +1106,7 @@ const NumberInputField = /* @__PURE__ */ defineComponent({
 			const element = event.currentTarget;
 			const from = element.value;
 			const offset = field.keepCaretOnStep && element.selectionStart !== null ? caretDecimalOffset(from, element.selectionStart) : null;
+			gesture?.key();
 			field.nudge(direction, field.keyboard, event);
 			if (offset === null) return;
 			await nextTick();
@@ -1044,6 +1172,7 @@ const NumberInputStepper = /* @__PURE__ */ defineComponent({
 	name: "NumberInputStepper",
 	setup(_, { slots }) {
 		const field = useNumberInputContext();
+		const gesture = inject(NumberInputGestureKey, null);
 		const el = ref(null);
 		let instance = null;
 		const enabled = computed(() => field.drag !== null && !field.disabled && !field.readonly);
@@ -1051,7 +1180,8 @@ const NumberInputStepper = /* @__PURE__ */ defineComponent({
 			range: field.rawRange,
 			pixels: field.drag ?? 1,
 			sensitivity: field.dragSensitivity,
-			pointerLock: field.pointerLock
+			pointerLock: field.pointerLock,
+			cursor: field.dragCursor
 		});
 		watch([el, enabled], ([element, on], _, onCleanup) => {
 			if (!element || !on) return;
@@ -1071,11 +1201,14 @@ const NumberInputStepper = /* @__PURE__ */ defineComponent({
 		});
 		watch(options, (next) => instance?.update(next));
 		provide(StepperKey, { moved: () => instance?.moved() ?? false });
-		return () => h("div", { ref: el }, slots.default?.());
+		return () => h("div", {
+			ref: el,
+			onPointerdown: () => {
+				if (enabled.value) gesture?.press();
+			}
+		}, 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.
@@ -1285,8 +1418,11 @@ const PointsEditor = /* @__PURE__ */ defineComponent({
 		disabled: Boolean,
 		/** Make the points unmovable. */
 		readonly: Boolean,
-		/** The cursor to show while dragging a point. @default { cursor: 'grabbing' } */
-		externalStyles: Object,
+		/** The cursor to show while dragging a point. @default 'grabbing' */
+		dragCursor: {
+			type: String,
+			default: "grabbing"
+		},
 		/** How much one wheel notch moves the focused point. */
 		wheel: {
 			type: [Array, Object],
@@ -1346,8 +1482,8 @@ const PointsEditor = /* @__PURE__ */ defineComponent({
 			get dragSensitivity() {
 				return props.dragSensitivity;
 			},
-			get cursor() {
-				return props.externalStyles?.cursor ?? "grabbing";
+			get dragCursor() {
+				return props.dragCursor;
 			},
 			get selectable() {
 				return props.selectable;
@@ -1484,6 +1620,15 @@ const PointsEditorPoint = /* @__PURE__ */ defineComponent({
 			type: Boolean,
 			default: void 0
 		},
+		/**
+		* How long after the last wheel notch or arrow key a change counts as over,
+		* in milliseconds, for `change-end`.
+		* @default 500
+		*/
+		changeEndDelay: {
+			type: Number,
+			default: 500
+		},
 		/** Overrides the `wheel` of `PointsEditor`; `null` turns it off. */
 		wheel: {
 			type: [Array, Object],
@@ -1501,8 +1646,15 @@ const PointsEditorPoint = /* @__PURE__ */ defineComponent({
 	},
 	emits: {
 		"update:modelValue": (value) => typeof value === "object",
-		dragStart: (value) => typeof value === "object",
-		dragEnd: (value) => typeof value === "object"
+		/**
+		* A change of this point started — a drag on it, the first wheel notch or
+		* arrow key while it has the focus — with where it is and what the change
+		* is made with. The points that move along with a selection report
+		* through `update:modelValue` only.
+		*/
+		changeStart: (value, _source) => typeof value === "object",
+		/** The change ended, with where the point is. */
+		changeEnd: (value, _source) => typeof value === "object"
 	},
 	setup(props, { slots, attrs, emit }) {
 		const points = usePointsEditorContext();
@@ -1515,6 +1667,13 @@ const PointsEditorPoint = /* @__PURE__ */ defineComponent({
 		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 gesture = useChangeGesture({
+			value: () => current.value,
+			inactive: () => inactive.value,
+			endDelay: () => props.changeEndDelay,
+			onStart: (value, source) => emit("changeStart", value, source),
+			onEnd: (value, source) => emit("changeEnd", value, source)
+		});
 		const el = ref(null);
 		const x = ref(null);
 		const dragging = ref(false);
@@ -1523,9 +1682,13 @@ const PointsEditorPoint = /* @__PURE__ */ defineComponent({
 			min: props.min,
 			max: props.max,
 			readonly: inactive.value,
-			onChange: (next) => emit("update:modelValue", next),
+			onChange: (next) => {
+				gesture.changed(next);
+				emit("update:modelValue", next);
+			},
 			element: el.value,
-			wheel: wheel.value
+			wheel: wheel.value,
+			beforeWheel: () => gesture.pulse("wheel")
 		});
 		watch(id, (key, _, onCleanup) => onCleanup(points.editor.registerPoint(key, read)), { immediate: true });
 		/** Where the pointer was when the drag started. */
@@ -1535,7 +1698,7 @@ const PointsEditorPoint = /* @__PURE__ */ defineComponent({
 			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,
+				cursor: inactive.value ? void 0 : points.dragCursor,
 				shouldStart: () => !disabled.value,
 				onChange: ([px, py]) => {
 					if (origin) points.editor.movePointDrag({
@@ -1551,15 +1714,15 @@ const PointsEditorPoint = /* @__PURE__ */ defineComponent({
 					};
 					dragging.value = true;
 					x.value?.focus();
-					if (!inactive.value) emit("dragStart", current.value);
+					if (!inactive.value) gesture.hold("pointer");
 				},
 				onDragEnd: () => {
 					origin = null;
 					dragging.value = false;
-					if (!inactive.value) emit("dragEnd", current.value);
+					gesture.end();
 				}
 			});
-			const stop = watch(() => inactive.value ? void 0 : points.cursor, (cursor) => drag.update({ cursor }));
+			const stop = watch(() => inactive.value ? void 0 : points.dragCursor, (cursor) => drag.update({ cursor }));
 			onCleanup(() => {
 				stop();
 				drag.destroy();
@@ -1624,6 +1787,7 @@ const PointsEditorPoint = /* @__PURE__ */ defineComponent({
 						if (!move) return;
 						event.preventDefault();
 						if (inactive.value || !keyboard.value) return;
+						gesture.pulse("keyboard");
 						points.editor.nudgePoint(id.value, move.axis === 0 ? "x" : "y", move.direction, keyboard.value, event);
 					}
 				}, {
@@ -1671,8 +1835,6 @@ const SliderKey = Symbol("Slider");
 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",
@@ -1702,33 +1864,55 @@ const Slider = /* @__PURE__ */ defineComponent({
 			type: Object,
 			default: () => linearScale
 		},
-		/** Run the slider vertically, with the value growing upwards. */
-		vertical: Boolean,
+		/**
+		* Which way the slider runs. A vertical slider grows upwards.
+		* @default 'horizontal'
+		*/
+		orientation: {
+			type: String,
+			default: "horizontal"
+		},
 		/** Grow the value the other way. */
 		reverse: Boolean,
-		/** The cursor to show while dragging. @default { cursor: 'pointer' } */
-		externalStyles: Object,
+		/** The cursor to show while dragging. @default 'pointer' */
+		dragCursor: {
+			type: String,
+			default: "pointer"
+		},
 		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
+		readonly: Boolean,
+		/**
+		* How long after the last wheel notch or arrow key a change counts as over,
+		* in milliseconds, for `change-end`.
+		* @default 500
+		*/
+		changeEndDelay: {
+			type: Number,
+			default: 500
+		}
 	},
 	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"
+		/**
+		* A change of the value started, with the value before it and what it is
+		* made with.
+		*/
+		changeStart: (value, _source) => typeof value === "number",
+		/** The change ended, with the value it ended on. */
+		changeEnd: (value, _source) => 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 vertical = computed(() => props.orientation === "vertical");
+		const displayReversed = computed(() => vertical.value !== props.reverse);
 		const percent = computed(() => valuePercent(props.modelValue, {
 			min: props.min,
 			max: props.max,
@@ -1747,7 +1931,17 @@ const Slider = /* @__PURE__ */ defineComponent({
 			keyboard: props.keyboard,
 			wheel: props.wheel
 		}));
-		const change = (next) => emit("update:modelValue", next);
+		const gesture = useChangeGesture({
+			value: () => props.modelValue,
+			inactive: () => inactive.value,
+			endDelay: () => props.changeEndDelay,
+			onStart: (value, source) => emit("changeStart", value, source),
+			onEnd: (value, source) => emit("changeEnd", value, source)
+		});
+		const change = (next) => {
+			gesture.changed(next);
+			emit("update:modelValue", next);
+		};
 		provide(SliderKey, {
 			get value() {
 				return props.modelValue;
@@ -1764,8 +1958,8 @@ const Slider = /* @__PURE__ */ defineComponent({
 			get scale() {
 				return props.scale;
 			},
-			get vertical() {
-				return props.vertical;
+			get orientation() {
+				return props.orientation;
 			},
 			get reverse() {
 				return props.reverse;
@@ -1787,30 +1981,29 @@ const Slider = /* @__PURE__ */ defineComponent({
 				thumb = input;
 			}
 		});
-		const valueOf = (v) => v[props.vertical ? 1 : 0];
+		const valueOf = (v) => v[vertical.value ? 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",
+			cursor: inactive.value ? void 0 : props.dragCursor,
 			shouldStart: () => !inactive.value,
 			updateOnPointerDown: true,
 			onChange: (v) => {
 				if (!inactive.value) change(valueOf(v));
 			},
-			onDragStart: (v) => {
+			onDragStart: () => {
 				if (inactive.value) return;
+				gesture.hold("pointer");
 				thumb?.focus();
-				emit("dragStart", valueOf(v));
 			},
-			onDragEnd: (v) => {
-				if (!inactive.value) emit("dragEnd", valueOf(v));
-			}
+			onDragEnd: () => gesture.end()
 		}));
 		useWheel(root, (event) => {
 			if (!props.wheel || inactive.value) return;
-			const direction = wheelDirection(event, { horizontal: !props.vertical });
+			const direction = wheelDirection(event, { horizontal: !vertical.value });
 			if (direction === null) return;
 			event.preventDefault();
+			gesture.pulse("wheel");
 			change(applyDelta(props.modelValue, props.reverse ? -direction : direction, props.wheel, axis.value, event));
 		}, { requireFocus: true });
 		expose({
@@ -1825,7 +2018,7 @@ const Slider = /* @__PURE__ */ defineComponent({
 			ref: root,
 			role: "group",
 			tabindex: -1,
-			"data-orientation": props.vertical ? "vertical" : "horizontal",
+			"data-orientation": props.orientation,
 			"data-disabled": props.disabled ? "" : void 0,
 			"data-readonly": props.readonly ? "" : void 0,
 			onKeydown: (event) => {
@@ -1833,6 +2026,7 @@ const Slider = /* @__PURE__ */ defineComponent({
 				if (direction === null) return;
 				event.preventDefault();
 				if (!props.keyboard || inactive.value) return;
+				gesture.pulse("keyboard");
 				change(applyDelta(props.modelValue, props.reverse ? -direction : direction, props.keyboard, axis.value, event));
 			},
 			onFocus: () => {
@@ -1842,8 +2036,6 @@ const Slider = /* @__PURE__ */ defineComponent({
 		}, slots.default?.());
 	}
 });
-//#endregion
-//#region src/components/Slider/SliderMarksOption.ts
 /** One mark along the slider, and its label. */
 const SliderMarksOption = /* @__PURE__ */ defineComponent({
 	name: "SliderMarksOption",
@@ -1888,9 +2080,9 @@ const SliderMarksOption = /* @__PURE__ */ defineComponent({
 			min: slider.min,
 			max: slider.max,
 			scale: slider.scale
-		}, slider.vertical !== slider.reverse));
+		}, slider.orientation === "vertical" !== slider.reverse));
 		return () => {
-			const orientation = slider.vertical ? "vertical" : "horizontal";
+			const orientation = slider.orientation;
 			return h("div", {
 				"data-orientation": orientation,
 				style: {
@@ -1898,10 +2090,10 @@ const SliderMarksOption = /* @__PURE__ */ defineComponent({
 					"--length": cssLength(props.length),
 					"--gap": cssLength(props.gap),
 					position: "absolute",
-					translate: slider.vertical ? "var(--translate, 0 -50%)" : "var(--translate, -50% 0)",
+					translate: slider.orientation === "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
+					left: slider.orientation === "vertical" ? void 0 : `${percent.value}%`,
+					top: slider.orientation === "vertical" ? `${percent.value}%` : void 0
 				}
 			}, [props.mark ? h("div", {
 				class: props.classes?.mark,
@@ -1914,8 +2106,6 @@ const SliderMarksOption = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-//#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",
@@ -1939,10 +2129,10 @@ const SliderMarks = /* @__PURE__ */ defineComponent({
 		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 slider.orientation === "vertical" !== slider.reverse ? list.reverse() : list;
 		});
 		return () => h("div", {
-			"data-orientation": slider.vertical ? "vertical" : "horizontal",
+			"data-orientation": slider.orientation,
 			style: {
 				"--gap": cssLength(props.gap),
 				position: "relative"
@@ -1955,8 +2145,6 @@ const SliderMarks = /* @__PURE__ */ defineComponent({
 		})) : 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.
@@ -1994,8 +2182,8 @@ color: String },
 					},
 					style,
 					{
-						top: slider.vertical ? `${slider.percent}%` : "50%",
-						left: slider.vertical ? "50%" : `${slider.percent}%`
+						top: slider.orientation === "vertical" ? `${slider.percent}%` : "50%",
+						left: slider.orientation === "vertical" ? "50%" : `${slider.percent}%`
 					}
 				]
 			}, [visuallyHiddenRangeInput({
@@ -2006,7 +2194,7 @@ color: String },
 				step: slider.step,
 				disabled: slider.disabled,
 				"aria-readonly": slider.readonly,
-				"aria-orientation": slider.vertical ? "vertical" : "horizontal",
+				"aria-orientation": slider.orientation,
 				"aria-label": ariaLabel,
 				"aria-labelledby": ariaLabelledby,
 				"aria-describedby": ariaDescribedby,
@@ -2023,8 +2211,6 @@ color: String },
 		};
 	}
 });
-//#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",
@@ -2033,10 +2219,10 @@ const SliderTrack = /* @__PURE__ */ defineComponent({
 		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
+		/** Colour of the part from `min` to the value. Sets `--active-color`. */
+		activeColor: String,
+		/** Colour of the rest of the track. Sets `--inactive-color`. */
+		inactiveColor: String
 	},
 	setup(props, { slots }) {
 		const slider = useSliderContext();
@@ -2047,11 +2233,11 @@ const SliderTrack = /* @__PURE__ */ defineComponent({
 		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,
+			"data-orientation": slider.orientation,
+			"data-flipped": slider.orientation === "vertical" !== slider.reverse ? "" : void 0,
 			style: {
-				"--active": props.active,
-				"--inactive": props.inactive,
+				"--active-color": props.activeColor,
+				"--inactive-color": props.inactiveColor,
 				"--length": cssLength(props.length),
 				"--thickness": cssLength(props.thickness),
 				"--percent": `${slider.percent}%`,
@@ -2067,8 +2253,6 @@ const XYPadKey = Symbol("XYPad");
 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`.
@@ -2106,20 +2290,37 @@ const XYPad = /* @__PURE__ */ defineComponent({
 			type: [Boolean, Array],
 			default: false
 		},
-		/** The cursor to show while dragging. @default { cursor: 'pointer' } */
-		externalStyles: Object,
+		/** The cursor to show while dragging. @default 'pointer' */
+		dragCursor: {
+			type: String,
+			default: "pointer"
+		},
 		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
+		readonly: Boolean,
+		/**
+		* How long after the last wheel notch or arrow key a change counts as over,
+		* in milliseconds, for `change-end`.
+		* @default 500
+		*/
+		changeEndDelay: {
+			type: Number,
+			default: 500
+		}
 	},
 	emits: {
 		"update:modelValue": (value) => Array.isArray(value),
-		dragStart: (value) => Array.isArray(value),
-		dragEnd: (value) => Array.isArray(value)
+		/**
+		* A change of the value started, with the value before it and what it is
+		* made with.
+		*/
+		changeStart: (value, _source) => Array.isArray(value),
+		/** The change ended, with the value it ended on. */
+		changeEnd: (value, _source) => Array.isArray(value)
 	},
 	setup(props, { slots, emit, expose }) {
 		const root = ref(null);
@@ -2150,7 +2351,17 @@ const XYPad = /* @__PURE__ */ defineComponent({
 			keyboard: props.keyboard,
 			wheel: props.wheel
 		}));
-		const change = (next) => emit("update:modelValue", next);
+		const gesture = useChangeGesture({
+			value: () => props.modelValue,
+			inactive: () => inactive.value,
+			endDelay: () => props.changeEndDelay,
+			onStart: (value, source) => emit("changeStart", value, source),
+			onEnd: (value, source) => emit("changeEnd", value, source)
+		});
+		const change = (next) => {
+			gesture.changed(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;
@@ -2197,25 +2408,24 @@ const XYPad = /* @__PURE__ */ defineComponent({
 			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",
+			cursor: inactive.value ? void 0 : props.dragCursor,
 			shouldStart: () => !inactive.value,
 			onChange: (v) => {
 				if (!inactive.value) change(v);
 			},
-			onDragStart: (v) => {
+			onDragStart: () => {
 				if (inactive.value) return;
+				gesture.hold("pointer");
 				thumb?.focus();
-				emit("dragStart", v);
 			},
-			onDragEnd: (v) => {
-				if (!inactive.value) emit("dragEnd", v);
-			}
+			onDragEnd: () => gesture.end()
 		}));
 		useWheel(root, (event) => {
 			if (!props.wheel || inactive.value) return;
 			const move = wheelMove(event);
 			if (!move) return;
 			event.preventDefault();
+			gesture.pulse("wheel");
 			nudge(move, props.wheel, event);
 		}, { requireFocus: true });
 		expose({
@@ -2234,7 +2444,10 @@ const XYPad = /* @__PURE__ */ defineComponent({
 				const move = arrowKeyMove(event.key);
 				if (!move) return;
 				event.preventDefault();
-				if (props.keyboard && !inactive.value) nudge(move, props.keyboard, event);
+				if (props.keyboard && !inactive.value) {
+					gesture.pulse("keyboard");
+					nudge(move, props.keyboard, event);
+				}
 			},
 			onFocus: () => {
 				if (!props.disabled) thumb?.focus();
@@ -2260,8 +2473,6 @@ const XYPadArea = /* @__PURE__ */ defineComponent({
 		}, 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",