@tremolo-ui/react 0.6.0 → 0.7.0

package/dist/index.cjs

@@ -92,6 +92,203 @@ const AnimationCanvas = /* @__PURE__ */ (0, react.forwardRef)(function Animation
 	});
 });
 //#endregion
+//#region src/hooks/_internal/useCallbackRef.ts
+/**
+* Internal
+* @private
+*/
+function useCallbackRef(callback, deps = []) {
+	const callbackRef = (0, react.useRef)(() => {
+		throw new Error("Cannot call an event handler while rendering.");
+	});
+	(0, react.useInsertionEffect)(() => {
+		callbackRef.current = callback;
+	});
+	return (0, react.useCallback)((...args) => callbackRef.current?.(...args), deps);
+}
+//#endregion
+//#region src/hooks/useDropZone.ts
+/**
+* Take files dropped onto an element.
+*
+* Any element can become a drop target this way — a waveform display, a track
+* lane, a canvas — without wrapping it in anything.
+*
+* @returns a ref callback for the element, and whether a drag is over it
+*/
+function useDropZone({ accept, multiple, disabled, onDrop, onReject } = {}) {
+	const dropHandler = useCallbackRef(onDrop);
+	const rejectHandler = useCallbackRef(onReject);
+	const [state, setState] = (0, react.useState)({
+		over: false,
+		invalid: false
+	});
+	const [node, setNode] = (0, react.useState)(null);
+	const instanceRef = (0, react.useRef)(null);
+	const latest = (0, react.useRef)({
+		accept,
+		multiple,
+		disabled
+	});
+	(0, react.useEffect)(() => {
+		if (!node) return;
+		const instance = (0, _tremolo_ui_dom.createDropZone)(node, {
+			...latest.current,
+			onDrop: (files, event) => dropHandler(files, event),
+			onReject: (files, event) => rejectHandler(files, event),
+			onStateChange: (next) => setState(next)
+		});
+		instanceRef.current = instance;
+		return () => {
+			instanceRef.current = null;
+			instance.destroy();
+			setState({
+				over: false,
+				invalid: false
+			});
+		};
+	}, [
+		node,
+		dropHandler,
+		rejectHandler
+	]);
+	(0, react.useEffect)(() => {
+		latest.current = {
+			accept,
+			multiple,
+			disabled
+		};
+		instanceRef.current?.update({
+			accept,
+			multiple,
+			disabled
+		});
+	});
+	return {
+		refCallback: setNode,
+		over: state.over,
+		invalid: state.invalid
+	};
+}
+/**
+* An area that takes files dropped onto it.
+*/
+const DropZone = { Root: /* @__PURE__ */ (0, react.forwardRef)(({ accept, multiple = false, disabled = false, onDrop, onReject, children, ...props }, ref) => {
+	const { refCallback, over, invalid } = useDropZone({
+		accept,
+		multiple,
+		disabled,
+		onDrop,
+		onReject
+	});
+	const composedRef = require_compose_refs.useComposedRefs(ref, refCallback);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref: composedRef,
+		"data-dragover": over ? "" : void 0,
+		"data-invalid": invalid ? "" : void 0,
+		"data-disabled": disabled ? "" : void 0,
+		...props,
+		children
+	});
+}) };
+//#endregion
+//#region src/components/_util/visually-hidden.ts
+/**
+* Take an element out of sight while leaving it in the accessibility tree and
+* in the tab order.
+*
+* `display: none` and `visibility: hidden` would remove it from both, and the
+* native control underneath a headless component is what carries the ARIA and
+* the keyboard behaviour. `pointer-events: none` is safe because nothing is
+* ever clicked here directly: a `<label>` forwards its click, and a drag is
+* handled by the part that is visible.
+*/
+const visuallyHiddenStyle = {
+	position: "absolute",
+	width: 1,
+	height: 1,
+	padding: 0,
+	margin: -1,
+	overflow: "hidden",
+	clip: "rect(0, 0, 0, 0)",
+	clipPath: "inset(50%)",
+	whiteSpace: "nowrap",
+	border: 0,
+	pointerEvents: "none"
+};
+//#endregion
+//#region src/components/FileInput/context.tsx
+const FileInputContext = /* @__PURE__ */ (0, react.createContext)(null);
+const FileInputProvider = FileInputContext.Provider;
+function useFileInputContext(selector) {
+	const context = (0, react.useContext)(FileInputContext);
+	if (!context) throw new Error("Missing FileInputContext.Provider in the tree");
+	return selector ? selector(context) : context;
+}
+//#endregion
+//#region src/components/FileInput/Trigger.tsx
+/**
+* Opens the file picker, and names the input for a screen reader.
+*
+* A `<label>` rather than a `<button>`: the browser forwards the click to the
+* input on its own, the input stays the one thing in the tab order, and its
+* accessible name comes from this text without an `aria-label` to keep in
+* step. A disabled input ignores the click, so nothing has to be intercepted.
+*/
+const Trigger = /* @__PURE__ */ (0, react.forwardRef)(({ children, ...props }, ref) => {
+	const { inputId, disabled } = useFileInputContext();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+		ref,
+		htmlFor: inputId,
+		"data-disabled": disabled ? "" : void 0,
+		...props,
+		children
+	});
+});
+/**
+* Picks files, and hands them over as `File`s.
+*/
+const FileInput = {
+	Root: /* @__PURE__ */ (0, react.forwardRef)(({ accept, multiple = false, disabled = false, onChange, onReject, children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, ...props }, ref) => {
+		const inputId = (0, react.useId)();
+		const context = (0, react.useMemo)(() => ({
+			inputId,
+			disabled
+		}), [inputId, disabled]);
+		function handleChange(event) {
+			const picked = Array.from(event.target.files ?? []);
+			event.target.value = "";
+			const accepted = [];
+			const rejected = [];
+			for (const file of picked) if ((0, _tremolo_ui_dom.matchesAccept)(file, accept)) accepted.push(file);
+			else rejected.push(file);
+			if (rejected.length > 0) onReject?.(rejected);
+			if (accepted.length > 0) onChange?.(accepted);
+		}
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FileInputProvider, {
+			value: context,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				ref,
+				"data-disabled": disabled ? "" : void 0,
+				...props,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+					id: inputId,
+					type: "file",
+					accept,
+					multiple,
+					disabled,
+					style: visuallyHiddenStyle,
+					"aria-label": ariaLabel,
+					"aria-labelledby": ariaLabelledby,
+					"aria-describedby": ariaDescribedby,
+					onChange: handleChange
+				}), children]
+			})
+		});
+	}),
+	Trigger
+};
+//#endregion
 //#region src/hooks/_internal/useCheckSteps.ts
 /** Positions probed across the travel. The ends are left out so that the
 * clamp at `min` and `max` cannot be mistaken for a press that does nothing. */
@@ -157,8 +354,8 @@ function probe(options, range, format) {
 	};
 	for (const { modifiers } of entries(options)) for (const position of PROBES) {
 		const value = scale.denormalize(position, min, max);
-		const up = (0, _tremolo_ui_functions.applyDelta)(value, 1, options, range, modifiers);
-		const down = (0, _tremolo_ui_functions.applyDelta)(value, -1, options, range, modifiers);
+		const up = (0, _tremolo_ui_dom.applyDelta)(value, 1, options, range, modifiers);
+		const down = (0, _tremolo_ui_dom.applyDelta)(value, -1, options, range, modifiers);
 		if (up !== value || down !== value) outcome.moved = true;
 		if (!format) continue;
 		const shown = format(value);
@@ -209,21 +406,6 @@ function useCheckSteps({ component, axis, range, keyboard, wheel, format }) {
 	]);
 }
 //#endregion
-//#region src/hooks/_internal/useCallbackRef.ts
-/**
-* Internal
-* @private
-*/
-function useCallbackRef(callback, deps = []) {
-	const callbackRef = (0, react.useRef)(() => {
-		throw new Error("Cannot call an event handler while rendering.");
-	});
-	(0, react.useInsertionEffect)(() => {
-		callbackRef.current = callback;
-	});
-	return (0, react.useCallback)((...args) => callbackRef.current?.(...args), deps);
-}
-//#endregion
 //#region src/hooks/useDragValue.ts
 /**
 * Drive a value with a pointer drag.
@@ -330,7 +512,7 @@ function useWheel(onWheel, { requireFocus = false, target } = {}) {
 * `useCheckSteps` warns about.
 *
 * A modifier entry is not snapped to `step`, which is what lets the finer
-* amount move at all — see `applyDelta` in `@tremolo-ui/functions`.
+* amount move at all — see `applyDelta` in `@tremolo-ui/dom`.
 */
 const DEFAULT_KEYBOARD_OPTIONS = {
 	default: ["raw", 1],
@@ -592,7 +774,7 @@ const Knob = {
 				"ArrowDown"
 			].includes(key)) {
 				event.preventDefault();
-				onChange((0, _tremolo_ui_functions.applyDelta)(value, key === "ArrowRight" || key === "ArrowUp" ? 1 : -1, keyboard, range, event));
+				onChange((0, _tremolo_ui_dom.applyDelta)(value, key === "ArrowRight" || key === "ArrowUp" ? 1 : -1, keyboard, range, event));
 			}
 		}, [
 			keyboard,
@@ -607,7 +789,7 @@ const Knob = {
 				reverse: true
 			}], [range]),
 			getValue: () => [value, value],
-			sensitivity: (state) => (0, _tremolo_ui_functions.selectModifier)(dragSensitivity, state.event).value,
+			sensitivity: (state) => (0, _tremolo_ui_dom.selectModifier)(dragSensitivity, state.event).value,
 			threshold: 1,
 			cursor: inactive ? void 0 : externalStyles.cursor,
 			pointerLock: inactive ? false : pointerLock,
@@ -621,7 +803,7 @@ const Knob = {
 			if (!wheel || inactive) return;
 			event.preventDefault();
 			if (!onChange || event.deltaY === 0) return;
-			onChange((0, _tremolo_ui_functions.applyDelta)(value, -Math.sign(event.deltaY), wheel, range, event));
+			onChange((0, _tremolo_ui_dom.applyDelta)(value, -Math.sign(event.deltaY), wheel, range, event));
 		}, WHEEL_OPTIONS$2);
 		const rootRefCallback = require_compose_refs.useComposedRefs(elmRef, dragRefCallback, wheelRefCallback);
 		const context = (0, react.useMemo)(() => {
@@ -1016,7 +1198,7 @@ const Stepper = /* @__PURE__ */ (0, react.forwardRef)(function Stepper({ classNa
 	* out of the pipeline for a modifier entry — naming one is a request to move
 	* off the grid.
 	*/
-	const dragOptions = (0, react.useMemo)(() => (0, _tremolo_ui_functions.mapModifier)(dragSensitivity, (factor) => ["raw", step * factor]), [dragSensitivity, step]);
+	const dragOptions = (0, react.useMemo)(() => (0, _tremolo_ui_dom.mapModifier)(dragSensitivity, (factor) => ["raw", step * factor]), [dragSensitivity, step]);
 	/**
 	* Set once the drag has actually moved the value, so that the press-and-hold
 	* repeat of a stepper stands down and leaves the value to the drag. A ref,
@@ -1043,7 +1225,7 @@ const Stepper = /* @__PURE__ */ (0, react.forwardRef)(function Stepper({ classNa
 		onDragStart: (state) => {
 			originRef.current = null;
 			draggingRef.current = false;
-			factorRef.current = (0, _tremolo_ui_functions.selectModifier)(dragSensitivity, state.event).value;
+			factorRef.current = (0, _tremolo_ui_dom.selectModifier)(dragSensitivity, state.event).value;
 		},
 		onDrag: (_x, y, _dx, _dy, state) => {
 			if (inactive || drag === null) return;
@@ -1055,7 +1237,7 @@ const Stepper = /* @__PURE__ */ (0, react.forwardRef)(function Stepper({ classNa
 				previousYRef.current = y;
 				return;
 			}
-			const factor = (0, _tremolo_ui_functions.selectModifier)(dragSensitivity, state.event).value;
+			const factor = (0, _tremolo_ui_dom.selectModifier)(dragSensitivity, state.event).value;
 			if (factor !== factorRef.current) {
 				originRef.current = {
 					y: previousYRef.current,
@@ -1067,7 +1249,7 @@ const Stepper = /* @__PURE__ */ (0, react.forwardRef)(function Stepper({ classNa
 			const steps = Math.round(-(y - originRef.current.y) / drag);
 			if (steps === 0) return;
 			draggingRef.current = true;
-			changeValue((0, _tremolo_ui_functions.applyDelta)(originRef.current.value, steps, dragOptions, rawRange, state.event));
+			changeValue((0, _tremolo_ui_dom.applyDelta)(originRef.current.value, steps, dragOptions, rawRange, state.event));
 		},
 		onDragEnd: () => {
 			draggingRef.current = false;
@@ -1197,8 +1379,8 @@ const NumberInput = {
 			changeValue
 		]);
 		const nudge = (0, react.useCallback)((direction, option, modifiers) => {
-			const [mode] = (0, _tremolo_ui_functions.selectInputEvent)(option, modifiers).option;
-			changeValue((0, _tremolo_ui_functions.applyDelta)(value, direction, option, mode === "raw" ? rawRange : range, modifiers));
+			const [mode] = (0, _tremolo_ui_dom.selectModifier)(option, modifiers).value;
+			changeValue((0, _tremolo_ui_dom.applyDelta)(value, direction, option, mode === "raw" ? rawRange : range, modifiers));
 		}, [
 			changeValue,
 			value,
@@ -1368,7 +1550,7 @@ const Piano = { Root: /* @__PURE__ */ (0, react.forwardRef)(function Root({ note
 	const [activeNotes, setActiveNotes] = (0, react.useState)([]);
 	/** Set while `resizable` is on, measured from the parent. */
 	const [resizedKeyWidth, setResizedKeyWidth] = (0, react.useState)(whiteKeyWidth);
-	const notes = (0, react.useMemo)(() => (0, _tremolo_ui_functions.getNoteRangeArray)(noteRange), [noteRange]);
+	const notes = (0, react.useMemo)(() => (0, _tremolo_ui_dom.getNoteRangeArray)(noteRange), [noteRange]);
 	const whiteKeyCount = (0, react.useMemo)(() => notes.filter(_tremolo_ui_functions.isWhiteKey).length, [notes]);
 	const layout = (0, react.useMemo)(() => ({
 		noteRange,
@@ -1513,7 +1695,7 @@ const Piano = { Root: /* @__PURE__ */ (0, react.forwardRef)(function Root({ note
 		role: "group",
 		tabIndex: 0,
 		style: {
-			width: resizable ? "100%" : (0, _tremolo_ui_functions.pianoWidth)(layout),
+			width: resizable ? "100%" : (0, _tremolo_ui_dom.pianoWidth)(layout),
 			"--height": cssLength(height),
 			position: "relative",
 			...style
@@ -1540,8 +1722,8 @@ const Piano = { Root: /* @__PURE__ */ (0, react.forwardRef)(function Root({ note
 					position: "absolute",
 					zIndex: keyType === "white" ? 1 : 2,
 					...keyStyle,
-					left: (0, _tremolo_ui_functions.notePosition)(note, layout),
-					width: keyType === "white" ? layout.whiteKeyWidth : (0, _tremolo_ui_functions.blackKeyWidth)(layout),
+					left: (0, _tremolo_ui_dom.notePosition)(note, layout),
+					width: keyType === "white" ? layout.whiteKeyWidth : (0, _tremolo_ui_dom.blackKeyWidth)(layout),
 					height: keyType === "white" ? "100%" : `${blackKeyHeightRatio * 100}%`
 				},
 				children: content !== "" && content !== null && content !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -1581,24 +1763,11 @@ function usePointsEditorContext(selector) {
 }
 //#endregion
 //#region src/components/_util/VisuallyHiddenRangeInput.tsx
-const hiddenStyle = {
-	position: "absolute",
-	width: 1,
-	height: 1,
-	padding: 0,
-	margin: -1,
-	overflow: "hidden",
-	clip: "rect(0, 0, 0, 0)",
-	clipPath: "inset(50%)",
-	whiteSpace: "nowrap",
-	border: 0,
-	pointerEvents: "none"
-};
 const VisuallyHiddenRangeInput = /* @__PURE__ */ (0, react.forwardRef)((props, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 	...props,
 	ref,
 	type: "range",
-	style: hiddenStyle
+	style: visuallyHiddenStyle
 }));
 //#endregion
 //#region src/components/PointsEditor/Point.tsx
@@ -1664,7 +1833,7 @@ function Point({ value, children, id: idProp, min, max, size, width, height, col
 	const { refCallback: dragRefCallback, dragging } = useDragValue({
 		axis: AXIS,
 		baseElementRef: containerRef,
-		sensitivity: (state) => (0, _tremolo_ui_functions.selectModifier)(dragSensitivity, state.event).value,
+		sensitivity: (state) => (0, _tremolo_ui_dom.selectModifier)(dragSensitivity, state.event).value,
 		cursor: inactive ? void 0 : externalStyles.cursor,
 		shouldStart: () => !disabled,
 		onChange: ([x, y]) => {
@@ -1692,7 +1861,7 @@ function Point({ value, children, id: idProp, min, max, size, width, height, col
 		}
 	});
 	const nudge = (0, react.useCallback)((axis, direction, option, modifiers) => {
-		const next = (0, _tremolo_ui_functions.applyDelta)(value[axis], direction, option, AXIS, modifiers);
+		const next = (0, _tremolo_ui_dom.applyDelta)(value[axis], direction, option, AXIS, modifiers);
 		nudgeSelection(id, {
 			x: axis === "x" ? next - value.x : 0,
 			y: axis === "y" ? next - value.y : 0
@@ -1981,7 +2150,7 @@ const PointsEditor = {
 				const { element, wheel, readonly, onChange, value } = entry.current;
 				if (!element?.contains(active)) continue;
 				if (!wheel || readonly || !onChange) return false;
-				const next = (0, _tremolo_ui_functions.applyDelta)(value[axis], direction, wheel, AXIS, modifiers);
+				const next = (0, _tremolo_ui_dom.applyDelta)(value[axis], direction, wheel, AXIS, modifiers);
 				nudgeSelection(id, {
 					x: axis === "x" ? next - value.x : 0,
 					y: axis === "y" ? next - value.y : 0
@@ -2106,7 +2275,7 @@ function MarksOption({ value, mark = true, label, thickness, length, gap, labelW
 	const reverse = useSliderContext((s) => s.reverse);
 	const calcPercent = (0, react.useCallback)((value) => {
 		const percent = scale.normalize(value, min, max) * 100;
-		return (0, _tremolo_ui_functions.toFixed)((0, _tremolo_ui_functions.xor)(vertical, reverse) ? 100 - percent : percent);
+		return (0, _tremolo_ui_functions.toFixed)(vertical !== reverse ? 100 - percent : percent);
 	}, [
 		vertical,
 		reverse,
@@ -2142,6 +2311,27 @@ function MarksOption({ value, mark = true, label, thickness, length, gap, labelW
 	});
 }
 //#endregion
+//#region src/components/_util/decimal-digits.ts
+/**
+* How many digits a number carries after the decimal point.
+*
+* `Slider.Marks` builds its labels by multiplying an interval, which leaves
+* binary debris in the last digits (`0.1 * 3` is `0.30000000000000004`). The
+* count is what tells `toFixed` how far to round that back.
+*
+* The exponent form has to be handled separately: `String(1e-7)` is `'1e-7'`,
+* which has no decimal point at all, so reading the text after the point
+* reports no digits and the interval rounds away to whole numbers.
+*/
+function decimalDigits(x) {
+	if (!Number.isFinite(x)) return 0;
+	const text = String(x);
+	const e = text.indexOf("e");
+	if (e === -1) return text.split(".")[1]?.length ?? 0;
+	const fraction = text.slice(0, e).split(".")[1]?.length ?? 0;
+	return Math.max(0, fraction - Number(text.slice(e + 1)));
+}
+//#endregion
 //#region src/components/Slider/type.ts
 function generateOptionsList(options, min, max, step) {
 	const { per, mark = true, label = true } = typeof options === "object" ? options : { per: options };
@@ -2149,7 +2339,7 @@ function generateOptionsList(options, min, max, step) {
 	const interval = per === "step" ? step : per;
 	const count = Math.floor(max / interval) - Math.ceil(min / interval) + 1;
 	for (let i = 0; i < count; i++) {
-		const value = (0, _tremolo_ui_functions.toFixed)(interval * (Math.ceil(min / interval) + i), (0, _tremolo_ui_functions.decimalPart)(interval)?.length);
+		const value = (0, _tremolo_ui_functions.toFixed)(interval * (Math.ceil(min / interval) + i), decimalDigits(interval));
 		optionsList.push({
 			value,
 			mark,
@@ -2167,7 +2357,7 @@ function Marks({ gap, options, children, className, style, ...props }) {
 	const vertical = useSliderContext((s) => s.vertical);
 	const reverse = useSliderContext((s) => s.reverse);
 	const optionsList = options ? generateOptionsList(options, min, max, step) : [];
-	if ((0, _tremolo_ui_functions.xor)(vertical, reverse)) optionsList.reverse();
+	if (vertical !== reverse) optionsList.reverse();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className,
 		"data-orientation": vertical ? "vertical" : "horizontal",
@@ -2252,7 +2442,7 @@ const Track = /* @__PURE__ */ (0, react.forwardRef)(function Track({ length, thi
 		className,
 		"data-disabled": disabled ? "" : void 0,
 		"data-orientation": vertical ? "vertical" : "horizontal",
-		"data-flipped": (0, _tremolo_ui_functions.xor)(vertical, reverse) ? "" : void 0,
+		"data-flipped": vertical !== reverse ? "" : void 0,
 		style: {
 			"--active": active,
 			"--inactive": inactive,
@@ -2291,7 +2481,7 @@ const Slider = {
 		const inactive = disabled || readonly;
 		const p = (0, _tremolo_ui_functions.toFixed)(scale.normalize(value, min, max) * 100);
 		const rev = (0, _tremolo_ui_functions.toFixed)(100 - p);
-		const displayReversed = (0, react.useMemo)(() => (0, _tremolo_ui_functions.xor)(vertical, reverse), [vertical, reverse]);
+		const displayReversed = vertical !== reverse;
 		const percent = displayReversed ? rev : p;
 		const axis = (0, react.useMemo)(() => ({
 			min,
@@ -2324,7 +2514,7 @@ const Slider = {
 			if (!keyboard || !onChange || inactive) return;
 			let direction = key === "ArrowRight" || key === "ArrowUp" ? 1 : -1;
 			if (reverse) direction *= -1;
-			onChange((0, _tremolo_ui_functions.applyDelta)(value, direction, keyboard, axis, event));
+			onChange((0, _tremolo_ui_dom.applyDelta)(value, direction, keyboard, axis, event));
 		}, [
 			keyboard,
 			onChange,
@@ -2339,7 +2529,7 @@ const Slider = {
 			baseElementRef: trackRef,
 			cursor: inactive ? void 0 : externalStyles.cursor,
 			shouldStart: () => !inactive,
-			sensitivity: (state) => (0, _tremolo_ui_functions.selectModifier)(dragSensitivity, state.event).value,
+			sensitivity: (state) => (0, _tremolo_ui_dom.selectModifier)(dragSensitivity, state.event).value,
 			updateOnPointerDown: true,
 			onChange: (v) => {
 				if (inactive) return;
@@ -2365,7 +2555,7 @@ const Slider = {
 				direction = event.deltaY > 0 ? -1 : 1;
 			}
 			if (reverse) direction *= -1;
-			onChange((0, _tremolo_ui_functions.applyDelta)(value, direction, wheel, axis, event));
+			onChange((0, _tremolo_ui_dom.applyDelta)(value, direction, wheel, axis, event));
 		}, WHEEL_OPTIONS$1);
 		const rootRefCallback = require_compose_refs.useComposedRefs(dragRefCallback, wheelRefCallback);
 		const context = (0, react.useMemo)(() => ({
@@ -2597,7 +2787,7 @@ const XYPad = {
 		});
 		const withAxis = (0, react.useCallback)((axis, next) => axis === 0 ? [next, value[1]] : [value[0], next], [value]);
 		/** @param i 0 = x, 1 = y */
-		const nudge = (0, react.useCallback)((i, direction, option, modifiers) => withAxis(i, (0, _tremolo_ui_functions.applyDelta)(value[i], direction, option, axis[i], modifiers)), [
+		const nudge = (0, react.useCallback)((i, direction, option, modifiers) => withAxis(i, (0, _tremolo_ui_dom.applyDelta)(value[i], direction, option, axis[i], modifiers)), [
 			value,
 			axis,
 			withAxis
@@ -2627,7 +2817,7 @@ const XYPad = {
 		const { refCallback: dragRefCallback } = useDragValue({
 			axis,
 			baseElementRef: areaRef,
-			sensitivity: (state) => (0, _tremolo_ui_functions.selectModifier)(dragSensitivity, state.event).value,
+			sensitivity: (state) => (0, _tremolo_ui_dom.selectModifier)(dragSensitivity, state.event).value,
 			updateOnPointerDown: true,
 			cursor: inactive ? void 0 : externalStyles.cursor,
 			shouldStart: () => !inactive,
@@ -2880,6 +3070,8 @@ exports.AnimationCanvas = AnimationCanvas;
 exports.DEFAULT_DRAG_SENSITIVITY = DEFAULT_DRAG_SENSITIVITY;
 exports.DEFAULT_KEYBOARD_OPTIONS = DEFAULT_KEYBOARD_OPTIONS;
 exports.DEFAULT_WHEEL_OPTIONS = DEFAULT_WHEEL_OPTIONS;
+exports.DropZone = DropZone;
+exports.FileInput = FileInput;
 exports.Knob = Knob;
 Object.defineProperty(exports, "NOT_SUPPORTED", {
 	enumerable: true,
@@ -2910,7 +3102,9 @@ exports.clampPoint = clampPoint;
 exports.useAnimationFrame = useAnimationFrame;
 exports.useDrag = useDrag;
 exports.useDragValue = useDragValue;
+exports.useDropZone = useDropZone;
 exports.useEventListener = useEventListener;
+exports.useFileInputContext = useFileInputContext;
 exports.useInterval = useInterval;
 exports.useKnobContext = useKnobContext;
 exports.useLongPress = useLongPress;