@vizejs/ui 0.387.0 → 0.388.0

package/dist/drag-and-drop-BjYgWGcG.mjs

@@ -0,0 +1,918 @@
+import { c as surfaceErrors, i as pointerTypeOf, t as capture } from "./move-internal-BM_7g70h.mjs";
+import { a as isPrimaryPointer, n as disableTextSelection, r as eventElement } from "./press-event-xlWYF9py.mjs";
+import { getCurrentScope, onScopeDispose, shallowReadonly, shallowRef, toValue } from "vue";
+//#region src/families/interaction/drag-and-drop/drag-and-drop-announce.ts
+const visuallyHiddenStyles = [
+	["border", "0"],
+	["clip-path", "inset(50%)"],
+	["height", "1px"],
+	["margin", "-1px"],
+	["overflow", "hidden"],
+	["padding", "0"],
+	["position", "fixed"],
+	["white-space", "nowrap"],
+	["width", "1px"]
+];
+/** Create a lazily mounted `role="status"` live region for drag announcements. */
+function createDragLiveRegion() {
+	let element = null;
+	return Object.freeze({
+		announce(document, message) {
+			if (!element || !element.isConnected || element.ownerDocument !== document) {
+				element?.remove();
+				element = document.createElement("div");
+				element.setAttribute("role", "status");
+				element.setAttribute("aria-live", "assertive");
+				element.setAttribute("aria-atomic", "true");
+				element.setAttribute("data-vize-ui", "drag-and-drop-live");
+				for (const [property, value] of visuallyHiddenStyles) element.style.setProperty(property, value);
+				document.body.append(element);
+			}
+			element.textContent = element.textContent === message ? `${message} ` : message;
+		},
+		dispose() {
+			element?.remove();
+			element = null;
+		}
+	});
+}
+function position(context) {
+	return context.targetIndex !== null && context.targetCount !== null ? `, drop target ${context.targetIndex} of ${context.targetCount}` : "";
+}
+/** Built-in English announcement builders; consumers override to localize. */
+const defaultDragAnnouncements = Object.freeze({
+	grab: (context) => context.pointerType === "keyboard" ? `Picked up ${context.sourceLabel}. Use the arrow keys to choose a drop target, Enter to drop, Escape to cancel.` : `Picked up ${context.sourceLabel}.`,
+	move: (context) => context.targetLabel === null ? null : `Over ${context.targetLabel}${position(context)}.`,
+	drop: (context) => context.targetLabel === null ? `${context.sourceLabel} released without a drop target.` : `Dropped ${context.sourceLabel} on ${context.targetLabel}.`,
+	cancel: (context) => `Drag canceled. ${context.sourceLabel} was not moved.`
+});
+//#endregion
+//#region src/families/interaction/drag-and-drop/drag-and-drop-internal.ts
+const invalidOptionDiagnostic = "VIZE_UI_DRAG_AND_DROP_OPTION";
+const dropEdges = new Set([
+	"bottom",
+	"inside",
+	"left",
+	"right",
+	"top"
+]);
+/** Resolve and validate a reactive boolean option for JavaScript consumers. */
+function readBoolean(value, name, defaultValue = false) {
+	const resolved = toValue(value);
+	if (resolved === void 0) return defaultValue;
+	if (typeof resolved !== "boolean") throw new TypeError(`${invalidOptionDiagnostic}: ${name} must resolve to a boolean`);
+	return resolved;
+}
+/** Resolve a finite non-negative pixel distance with an explicit default. */
+function readDistance(value, name, defaultValue, minimum = 0) {
+	const resolved = toValue(value) ?? defaultValue;
+	if (typeof resolved !== "number" || !Number.isFinite(resolved) || resolved < minimum) throw new TypeError(`${invalidOptionDiagnostic}: ${name} must resolve to a finite number >= ${minimum}`);
+	return resolved;
+}
+/** Resolve an announcement label falling back to the owning key. */
+function readLabel(value, key) {
+	const resolved = toValue(value) ?? key;
+	if (typeof resolved !== "string") throw new TypeError(`${invalidOptionDiagnostic}: label must resolve to a string`);
+	return resolved;
+}
+/** Validate one callback slot eagerly so setup failures never install listeners. */
+function validateCallbacks(options, names) {
+	for (const name of names) {
+		const callback = options[name];
+		if (callback !== void 0 && typeof callback !== "function") throw new TypeError(`${invalidOptionDiagnostic}: ${name} must be a function`);
+	}
+}
+/** Validate a registration key and its uniqueness inside one controller. */
+function validateKey(key, existing) {
+	if (typeof key !== "string" || key.length === 0) throw new TypeError(`${invalidOptionDiagnostic}: key must be a non-empty string`);
+	if (existing.has(key)) throw new TypeError(`${invalidOptionDiagnostic}: duplicate key "${key}"`);
+	return key;
+}
+/** Validate the closed drop-edge union without accepting mistyped JavaScript. */
+function validateEdges(edges) {
+	if (edges === void 0) return ["inside"];
+	if (!Array.isArray(edges) || edges.length === 0 || edges.some((edge) => !dropEdges.has(edge))) throw new TypeError(`${invalidOptionDiagnostic}: edges must be a non-empty array of drop edges`);
+	return [...edges];
+}
+/** Normalize a measured rectangle, rejecting rects that cannot own a drop. */
+function normalizeRect(rect) {
+	if (!rect) return null;
+	const { top, left, right, bottom } = rect;
+	if (![
+		top,
+		left,
+		right,
+		bottom
+	].every(Number.isFinite)) return null;
+	if (right < left || bottom < top) return null;
+	return {
+		top,
+		left,
+		right,
+		bottom
+	};
+}
+/** Measure one element through its override or the live layout. */
+function measureRect(element, getRect) {
+	if (getRect) return normalizeRect(getRect());
+	if (!element || typeof element.getBoundingClientRect !== "function") return null;
+	return normalizeRect(element.getBoundingClientRect());
+}
+/** Whether a client point lies inside an axis-aligned rectangle. */
+function containsPoint(rect, point) {
+	return point.x >= rect.left && point.x <= rect.right && point.y >= rect.top && point.y <= rect.bottom;
+}
+/** Chebyshev distance gate deciding when an armed pointer becomes a session. */
+function exceedsDistance(origin, point, threshold) {
+	return Math.max(Math.abs(point.x - origin.x), Math.abs(point.y - origin.y)) >= threshold;
+}
+/**
+* Resolve the drop edge for a point inside a rectangle.
+*
+* When `"inside"` is allowed together with directional edges, the central half
+* of each constrained axis resolves to `"inside"`; otherwise the nearest
+* allowed edge on the dominant axis wins.
+*/
+function resolveEdge(rect, point, edges) {
+	const allowed = new Set(edges);
+	const width = Math.max(rect.right - rect.left, 1);
+	const height = Math.max(rect.bottom - rect.top, 1);
+	const relativeX = (point.x - rect.left) / width - .5;
+	const relativeY = (point.y - rect.top) / height - .5;
+	const horizontal = allowed.has("left") || allowed.has("right");
+	const vertical = allowed.has("top") || allowed.has("bottom");
+	if (allowed.has("inside")) {
+		if ((!horizontal || Math.abs(relativeX) <= .25) && (!vertical || Math.abs(relativeY) <= .25) || !horizontal && !vertical) return "inside";
+	}
+	const preferHorizontal = horizontal && (!vertical || Math.abs(relativeX) >= Math.abs(relativeY));
+	const axisEdges = preferHorizontal ? ["left", "right"] : ["top", "bottom"];
+	const negative = preferHorizontal ? relativeX < 0 : relativeY < 0;
+	const preferred = negative ? axisEdges[0] : axisEdges[1];
+	const opposite = negative ? axisEdges[1] : axisEdges[0];
+	if (allowed.has(preferred)) return preferred;
+	if (allowed.has(opposite)) return opposite;
+	return edges[0] ?? "inside";
+}
+/** Build indicator geometry: a placeholder rect plus a collapsed edge line. */
+function indicatorFor(targetKey, edge, rect) {
+	let line = null;
+	if (rect && edge !== "inside") if (edge === "top") line = {
+		...rect,
+		bottom: rect.top
+	};
+	else if (edge === "bottom") line = {
+		...rect,
+		top: rect.bottom
+	};
+	else if (edge === "left") line = {
+		...rect,
+		right: rect.left
+	};
+	else line = {
+		...rect,
+		left: rect.right
+	};
+	return Object.freeze({
+		targetKey,
+		edge,
+		rect,
+		line
+	});
+}
+/** Sort elements into document order, treating detached elements as later. */
+function compareDocumentOrder(left, right) {
+	if (left === right) return 0;
+	const position = left.compareDocumentPosition(right);
+	if (position & 4) return -1;
+	if (position & 2) return 1;
+	return 0;
+}
+/**
+* Overlay-safe hit test: measured rectangles are compared directly, so drag
+* previews and overlays can never mask a target. Nested ownership prefers the
+* innermost target by DOM containment, then the smallest area.
+*/
+function hitTest(candidates, point) {
+	const containing = candidates.filter((candidate) => containsPoint(candidate.rect, point));
+	let winner = null;
+	let winnerDepth = -1;
+	let winnerArea = Number.POSITIVE_INFINITY;
+	for (const candidate of containing) {
+		const depth = containing.filter((other) => other !== candidate && other.element !== null && candidate.element !== null && other.element.contains(candidate.element)).length;
+		const area = (candidate.rect.right - candidate.rect.left) * (candidate.rect.bottom - candidate.rect.top);
+		if (depth > winnerDepth || depth === winnerDepth && area < winnerArea) {
+			winner = candidate;
+			winnerDepth = depth;
+			winnerArea = area;
+		}
+	}
+	return winner;
+}
+/** Build a frozen lifecycle snapshot for controller-level callbacks. */
+function createDragEvent(type, pointerType, sourceKey, payload, targetKey, edge, point, originalEvent, isCanceled = false) {
+	return Object.freeze({
+		type,
+		pointerType,
+		sourceKey,
+		payload,
+		targetKey,
+		edge,
+		x: point?.x ?? null,
+		y: point?.y ?? null,
+		originalEvent,
+		isCanceled
+	});
+}
+/** Build a frozen target-scoped snapshot for drop-target callbacks. */
+function createDropTargetEvent(type, targetKey, sourceKey, pointerType, payload, edge, point, originalEvent) {
+	return Object.freeze({
+		type,
+		targetKey,
+		sourceKey,
+		pointerType,
+		payload,
+		edge,
+		x: point?.x ?? null,
+		y: point?.y ?? null,
+		originalEvent
+	});
+}
+//#endregion
+//#region src/families/interaction/drag-and-drop/drag-and-drop-autoscroll.ts
+function isScrollable(element) {
+	return Boolean(element && "scrollTop" in element && typeof element.scrollTop === "number");
+}
+/**
+* Create an edge-proximity auto-scroller for one controller.
+*
+* Each pointer sample applies one immediate scroll step; while a sample stays
+* inside a threshold band, an animation-frame loop keeps scrolling so a held
+* pointer near an edge continues to advance the container.
+*/
+function createDragAutoScroller(options) {
+	if (!options) return Object.freeze({
+		update: () => void 0,
+		stop: () => void 0
+	});
+	let lastPoint = null;
+	let frame = null;
+	const step = () => {
+		const point = lastPoint;
+		const container = toValue(options.container);
+		if (!point || !isScrollable(container)) return false;
+		const rect = measureRect(container, options.getRect);
+		if (!rect) return false;
+		const threshold = readDistance(options.threshold, "autoScroll.threshold", 48, Number.MIN_VALUE);
+		const speed = readDistance(options.speed, "autoScroll.speed", 16, Number.MIN_VALUE);
+		const along = (distance) => distance < threshold ? Math.ceil((threshold - Math.max(distance, 0)) / threshold * speed) : 0;
+		const nearLeft = along(point.x - rect.left);
+		const nearTop = along(point.y - rect.top);
+		const deltaX = nearLeft > 0 ? -nearLeft : along(rect.right - point.x);
+		const deltaY = nearTop > 0 ? -nearTop : along(rect.bottom - point.y);
+		if (deltaX === 0 && deltaY === 0) return false;
+		container.scrollLeft += deltaX;
+		container.scrollTop += deltaY;
+		return true;
+	};
+	const loop = () => {
+		frame = null;
+		if (!step()) return;
+		const raf = globalThis.requestAnimationFrame;
+		if (typeof raf === "function") frame = raf(loop);
+	};
+	return Object.freeze({
+		update(point) {
+			lastPoint = point;
+			const engaged = step();
+			const raf = globalThis.requestAnimationFrame;
+			if (engaged && frame === null && typeof raf === "function") frame = raf(loop);
+		},
+		stop() {
+			lastPoint = null;
+			if (frame !== null && typeof globalThis.cancelAnimationFrame === "function") globalThis.cancelAnimationFrame(frame);
+			frame = null;
+		}
+	});
+}
+//#endregion
+//#region src/families/interaction/drag-and-drop/drag-and-drop-keyboard.ts
+function keyboardStep(core, options, event, action) {
+	const sess = core.getSession();
+	if (!sess) return;
+	if (action === "drop") {
+		core.finishSession(event, false);
+		return;
+	}
+	const errors = [];
+	const ordered = core.orderedTargets(sess.payload);
+	if (ordered.length === 0) core.updateOver(sess, null, null, event, errors);
+	else {
+		const currentIndex = ordered.findIndex((candidate) => candidate.key === sess.targetKey);
+		let nextIndex = 0;
+		if (action === "last") nextIndex = ordered.length - 1;
+		else if (action === "next") nextIndex = (currentIndex + 1) % ordered.length;
+		else if (action === "previous") nextIndex = currentIndex <= 0 ? ordered.length - 1 : currentIndex - 1;
+		const next = ordered[nextIndex];
+		if (next) {
+			const edges = next.record.readEdges();
+			const edge = edges.includes("inside") ? "inside" : edges[0] ?? "inside";
+			core.updateOver(sess, next, edge, event, errors);
+			const move = createDragEvent("dragmove", sess.pointerType, sess.sourceKey, sess.payload, sess.targetKey, sess.edge, null, event);
+			capture(errors, () => options.onDragMove?.(move));
+		}
+	}
+	surfaceErrors(errors, "Drag callbacks failed");
+}
+function keyboardGrab(core, options, event, key) {
+	const record = core.sources.get(key);
+	if (!record || event.altKey || event.ctrlKey || event.metaKey || event.isComposing) return;
+	if (readBoolean(options.isDisabled, "isDisabled") || readBoolean(record.options.isDisabled, "isDisabled") || !readBoolean(record.options.keyboard, "keyboard", true)) return;
+	const host = eventElement(event);
+	if (!host || event.target !== host) return;
+	const payload = toValue(record.options.payload) ?? null;
+	if (core.orderedTargets(payload).length === 0) return;
+	event.preventDefault();
+	event.stopPropagation();
+	const errors = [];
+	const sess = core.beginSession("keyboard", key, event, null, errors);
+	keyboardStep(core, options, event, "first");
+	if (core.getSession() === sess) {
+		const combined = [core.buildMessage("grab", sess), core.buildMessage("move", sess)].filter((part) => part !== null).join(" ");
+		if (combined) capture(errors, () => core.announceMessage(sess, combined));
+	}
+	surfaceErrors(errors, "Drag callbacks failed");
+}
+/** Handle one keydown from a source handle: grab, navigate, drop, or cancel. */
+function handleSourceKeydown(core, options, event, key) {
+	const session = core.getSession();
+	if (session?.pointerType === "keyboard" && session.sourceKey === key) {
+		switch (event.key) {
+			case "ArrowDown":
+			case "ArrowRight":
+				keyboardStep(core, options, event, "next");
+				break;
+			case "ArrowUp":
+			case "ArrowLeft":
+				keyboardStep(core, options, event, "previous");
+				break;
+			case "Home":
+				keyboardStep(core, options, event, "first");
+				break;
+			case "End":
+				keyboardStep(core, options, event, "last");
+				break;
+			case "Enter":
+			case " ":
+				keyboardStep(core, options, event, "drop");
+				break;
+			case "Escape":
+				core.finishSession(event, true);
+				break;
+			case "Tab":
+				core.finishSession(event, true);
+				return;
+			default: return;
+		}
+		event.preventDefault();
+		event.stopPropagation();
+	} else if (!session && !core.getContact() && (event.key === "Enter" || event.key === " ")) keyboardGrab(core, options, event, key);
+}
+//#endregion
+//#region src/families/interaction/drag-and-drop/drag-and-drop-listeners.ts
+function clientPoint(event, contactId) {
+	if ("clientX" in event && "clientY" in event) {
+		const x = Number(event.clientX);
+		const y = Number(event.clientY);
+		if (Number.isFinite(x) && Number.isFinite(y)) return {
+			x,
+			y
+		};
+	}
+	if ("changedTouches" in event) {
+		const touch = Array.from(event.changedTouches).find(({ identifier }) => contactId === null || identifier === contactId);
+		if (touch) return {
+			x: touch.clientX,
+			y: touch.clientY
+		};
+	}
+	return null;
+}
+/** Install and exhaustively clean up the document listeners for one session. */
+function installDragListeners(document, source, context) {
+	const removals = [];
+	const listen = (owner, type, callback, capturePhase = true) => {
+		owner.addEventListener(type, callback, capturePhase);
+		removals.push(() => owner.removeEventListener(type, callback, capturePhase));
+	};
+	const move = (event) => {
+		const point = clientPoint(event, context.getContactId());
+		if (point) context.onPoint(event, point);
+	};
+	const end = (event, canceled) => {
+		if (source === "pointer" && event.pointerId !== context.getContactId()) return;
+		if (source === "mouse" && event.button !== 0) return;
+		if (source === "touch" && !clientPoint(event, context.getContactId())) return;
+		context.onFinish(event, canceled);
+	};
+	const matchesPointer = (event) => source !== "pointer" || event.pointerId === context.getContactId();
+	try {
+		if (source === "pointer") {
+			listen(document, "pointermove", (event) => {
+				if (matchesPointer(event)) move(event);
+			});
+			listen(document, "pointerup", (event) => end(event, false));
+			listen(document, "pointercancel", (event) => end(event, true));
+		} else if (source === "mouse") {
+			listen(document, "mousemove", move);
+			listen(document, "mouseup", (event) => end(event, false));
+		} else {
+			listen(document, "touchmove", move);
+			listen(document, "touchend", (event) => end(event, false));
+			listen(document, "touchcancel", (event) => end(event, true));
+		}
+		listen(document, "keydown", (event) => {
+			if (event.key === "Escape") {
+				event.preventDefault();
+				event.stopPropagation();
+				context.onFinish(event, true);
+			}
+		});
+		listen(document, "dragstart", (event) => context.onFinish(event, true));
+		listen(document, "visibilitychange", () => {
+			if (document.visibilityState === "hidden") context.onFinish(null, true);
+		});
+		if (document.defaultView) listen(document.defaultView, "blur", (event) => context.onFinish(event, true), false);
+	} catch (error) {
+		const errors = [error];
+		for (const remove of removals.reverse()) capture(errors, remove);
+		surfaceErrors(errors, "Drag listener setup failed");
+		throw error;
+	}
+	let released = false;
+	return () => {
+		if (released) return;
+		released = true;
+		const errors = [];
+		for (const remove of removals) capture(errors, remove);
+		surfaceErrors(errors, "Drag listener cleanup failed");
+	};
+}
+//#endregion
+//#region src/families/interaction/drag-and-drop/drag-and-drop-session.ts
+/** Shared mutable session state and settlement logic for one controller. */
+function createSessionCore(options, liveRegion, autoScroller) {
+	const announcements = {
+		...defaultDragAnnouncements,
+		...options.announcements
+	};
+	const sources = /* @__PURE__ */ new Map();
+	const targets = /* @__PURE__ */ new Map();
+	const dragging = shallowRef(false);
+	const activeSourceKey = shallowRef(null);
+	const activeTargetKey = shallowRef(null);
+	const indicator = shallowRef(null);
+	let contact = null;
+	let session = null;
+	const orderedTargets = (payload) => {
+		const list = [];
+		for (const [key, record] of targets) {
+			if (readBoolean(record.options.isDisabled, "isDisabled")) continue;
+			if (record.options.accepts && !record.options.accepts(payload)) continue;
+			const element = toValue(record.options.element) ?? null;
+			list.push({
+				key,
+				record,
+				element,
+				rect: measureRect(element, record.options.getRect)
+			});
+		}
+		return list.sort((left, right) => left.element && right.element ? compareDocumentOrder(left.element, right.element) : 0);
+	};
+	const resolveDocument = (sess) => {
+		const sourceElement = toValue(sources.get(sess.sourceKey)?.options.element);
+		if (sourceElement) return sourceElement.ownerDocument;
+		return typeof document === "undefined" ? null : document;
+	};
+	const buildMessage = (phase, sess) => {
+		const currentKey = sess.targetKey;
+		const target = currentKey === null ? void 0 : targets.get(currentKey);
+		const ordered = orderedTargets(sess.payload);
+		const index = ordered.findIndex((candidate) => candidate.key === currentKey);
+		const context = {
+			pointerType: sess.pointerType,
+			sourceKey: sess.sourceKey,
+			sourceLabel: readLabel(sources.get(sess.sourceKey)?.options.label, sess.sourceKey),
+			payload: sess.payload,
+			targetKey: currentKey,
+			targetLabel: target && currentKey !== null ? readLabel(target.options.label, currentKey) : null,
+			targetIndex: index >= 0 ? index + 1 : null,
+			targetCount: ordered.length > 0 ? ordered.length : null,
+			edge: sess.edge
+		};
+		const builder = announcements[phase];
+		return builder(context) ?? null;
+	};
+	const announceMessage = (sess, message) => {
+		const owner = resolveDocument(sess);
+		if (owner && message) liveRegion.announce(owner, message);
+	};
+	const speak = (phase, sess) => {
+		announceMessage(sess, buildMessage(phase, sess));
+	};
+	const targetEvent = (type, key, sess, edge, event) => createDropTargetEvent(type, key, sess.sourceKey, sess.pointerType, sess.payload, edge, sess.point, event);
+	const updateOver = (sess, hit, edge, event, errors) => {
+		const previousKey = sess.targetKey;
+		if (previousKey !== null && previousKey !== (hit?.key ?? null)) {
+			const previous = targets.get(previousKey);
+			if (previous) {
+				previous.over.value = false;
+				const leave = targetEvent("dropleave", previousKey, sess, null, event);
+				capture(errors, () => previous.options.onLeave?.(leave));
+			}
+		}
+		if (!hit || edge === null) {
+			sess.targetKey = null;
+			sess.edge = null;
+			activeTargetKey.value = null;
+			indicator.value = null;
+			return;
+		}
+		const entered = previousKey !== hit.key;
+		const edgeChanged = !entered && sess.edge !== edge;
+		sess.targetKey = hit.key;
+		sess.edge = edge;
+		activeTargetKey.value = hit.key;
+		indicator.value = indicatorFor(hit.key, edge, hit.rect);
+		if (entered) {
+			hit.record.over.value = true;
+			const enter = targetEvent("dropenter", hit.key, sess, edge, event);
+			capture(errors, () => hit.record.options.onEnter?.(enter));
+			capture(errors, () => speak("move", sess));
+		} else {
+			const move = targetEvent("dropmove", hit.key, sess, edge, event);
+			capture(errors, () => hit.record.options.onMove?.(move));
+			if (edgeChanged) capture(errors, () => speak("move", sess));
+		}
+	};
+	const beginSession = (pointerType, key, event, point, errors) => {
+		const record = sources.get(key);
+		const payload = toValue(record?.options.payload) ?? null;
+		const started = {
+			sourceKey: key,
+			pointerType,
+			payload,
+			targetKey: null,
+			edge: null,
+			point
+		};
+		session = started;
+		dragging.value = true;
+		activeSourceKey.value = key;
+		if (record) record.dragging.value = true;
+		if (pointerType !== "keyboard") capture(errors, () => speak("grab", started));
+		const start = createDragEvent("dragstart", pointerType, key, payload, null, null, point, event);
+		capture(errors, () => options.onDragStart?.(start));
+		return started;
+	};
+	const finishSession = (event, isCanceled, silent = false) => {
+		const currentContact = contact;
+		const currentSession = session;
+		if (!currentContact && !currentSession) return false;
+		contact = null;
+		session = null;
+		const errors = [];
+		if (currentContact) {
+			capture(errors, currentContact.releaseListeners);
+			capture(errors, currentContact.restoreSelection);
+		}
+		autoScroller.stop();
+		if (currentSession) {
+			const record = sources.get(currentSession.sourceKey);
+			const overKey = currentSession.targetKey;
+			const target = overKey === null ? void 0 : targets.get(overKey);
+			if (target) target.over.value = false;
+			dragging.value = false;
+			activeSourceKey.value = null;
+			activeTargetKey.value = null;
+			indicator.value = null;
+			if (record) record.dragging.value = false;
+			if (!silent) {
+				if (isCanceled) {
+					if (target && overKey !== null) {
+						const leave = targetEvent("dropleave", overKey, currentSession, null, event);
+						capture(errors, () => target.options.onLeave?.(leave));
+					}
+					capture(errors, () => speak("cancel", currentSession));
+				} else {
+					if (target && overKey !== null) {
+						const drop = targetEvent("drop", overKey, currentSession, currentSession.edge, event);
+						capture(errors, () => target.options.onDrop?.(drop));
+					}
+					capture(errors, () => speak("drop", currentSession));
+				}
+				const end = createDragEvent("dragend", currentSession.pointerType, currentSession.sourceKey, currentSession.payload, isCanceled ? null : overKey, isCanceled ? null : currentSession.edge, currentSession.point, event, isCanceled);
+				capture(errors, () => options.onDragEnd?.(end));
+			}
+		}
+		surfaceErrors(errors, "Drag settlement failed");
+		return true;
+	};
+	return {
+		sources,
+		targets,
+		dragging,
+		activeSourceKey,
+		activeTargetKey,
+		indicator,
+		getContact: () => contact,
+		setContact: (next) => {
+			contact = next;
+		},
+		getSession: () => session,
+		orderedTargets,
+		buildMessage,
+		announceMessage,
+		updateOver,
+		beginSession,
+		finishSession
+	};
+}
+//#endregion
+//#region src/families/interaction/drag-and-drop/drag-and-drop-transfer.ts
+const invalidTransferDiagnostic = "VIZE_UI_DRAG_AND_DROP_TRANSFER";
+/** Structured data-transfer format written next to the plain-text projection. */
+const DRAG_TRANSFER_TYPE = "application/vnd.vize-ui.drag+json";
+function validatePayload(payload) {
+	if (!payload || typeof payload.kind !== "string" || payload.kind.length === 0 || !("data" in payload)) throw new TypeError(`${invalidTransferDiagnostic}: payload must carry a kind and data`);
+	if (payload.plainText !== void 0 && typeof payload.plainText !== "string") throw new TypeError(`${invalidTransferDiagnostic}: plainText must be a string`);
+}
+/**
+* Serialize one typed payload onto a `DataTransfer`.
+*
+* The structured payload is written under {@link DRAG_TRANSFER_TYPE}; the
+* optional `plainText` projection is mirrored to `text/plain` so external
+* applications receive a meaningful representation.
+*/
+function writeDragTransfer(dataTransfer, payload) {
+	validatePayload(payload);
+	dataTransfer.setData(DRAG_TRANSFER_TYPE, JSON.stringify({
+		kind: payload.kind,
+		data: payload.data
+	}));
+	if (payload.plainText !== void 0) dataTransfer.setData("text/plain", payload.plainText);
+}
+/**
+* Deserialize a typed payload from a `DataTransfer`.
+*
+* @returns The structured payload, or `null` when the transfer does not carry
+* a well-formed {@link DRAG_TRANSFER_TYPE} entry.
+*/
+function readDragTransfer(dataTransfer) {
+	const serialized = dataTransfer.getData(DRAG_TRANSFER_TYPE);
+	if (!serialized) return null;
+	let parsed;
+	try {
+		parsed = JSON.parse(serialized);
+	} catch {
+		return null;
+	}
+	if (!parsed || typeof parsed !== "object") return null;
+	const { kind, data } = parsed;
+	if (typeof kind !== "string" || kind.length === 0 || !("data" in parsed)) return null;
+	const plainText = dataTransfer.getData("text/plain");
+	return Object.freeze(plainText ? {
+		kind,
+		data,
+		plainText
+	} : {
+		kind,
+		data
+	});
+}
+/**
+* Serialize one typed payload onto a clipboard event during `copy` or `cut`.
+*
+* The event's default action is prevented so the written data wins.
+*
+* @returns `true` when the event exposed writable clipboard data.
+*/
+function writeClipboardTransfer(event, payload) {
+	validatePayload(payload);
+	const dataTransfer = event.clipboardData;
+	if (!dataTransfer) return false;
+	event.preventDefault();
+	writeDragTransfer(dataTransfer, payload);
+	return true;
+}
+/**
+* Deserialize a typed payload from a clipboard event during `paste`.
+*
+* @returns The structured payload, or `null` when the clipboard does not carry
+* a well-formed {@link DRAG_TRANSFER_TYPE} entry.
+*/
+function readClipboardTransfer(event) {
+	const dataTransfer = event.clipboardData;
+	return dataTransfer ? readDragTransfer(dataTransfer) : null;
+}
+//#endregion
+//#region src/families/interaction/drag-and-drop/drag-and-drop.ts
+const disposedDiagnostic = "VIZE_UI_DRAG_AND_DROP_DISPOSED";
+const setupDiagnostic = "VIZE_UI_DRAG_AND_DROP_SETUP";
+/** Create an SSR-safe pointer, touch, and keyboard drag-and-drop coordinator. */
+function createDragAndDrop(options = {}) {
+	validateCallbacks(options, [
+		"onDragStart",
+		"onDragMove",
+		"onDragEnd"
+	]);
+	if (typeof options.startDistance !== "function") readDistance(options.startDistance, "startDistance", 4);
+	const liveRegion = createDragLiveRegion();
+	const autoScroller = createDragAutoScroller(options.autoScroll);
+	const core = createSessionCore(options, liveRegion, autoScroller);
+	let disposed = false;
+	let lastTouchTime = Number.NEGATIVE_INFINITY;
+	const pointerPoint = (event, point) => {
+		const contact = core.getContact();
+		if (disposed || !contact) return;
+		if (readBoolean(options.isDisabled, "isDisabled") || readBoolean(core.sources.get(contact.sourceKey)?.options.isDisabled, "isDisabled")) {
+			core.finishSession(event, true);
+			return;
+		}
+		const errors = [];
+		let session = core.getSession();
+		if (!session) {
+			const threshold = readDistance(options.startDistance, "startDistance", 4);
+			if (!exceedsDistance(contact.origin, point, threshold)) return;
+			session = core.beginSession(contact.pointerType, contact.sourceKey, event, point, errors);
+		}
+		event.preventDefault();
+		session.point = point;
+		const hit = hitTest(core.orderedTargets(session.payload).filter((candidate) => candidate.rect !== null), point);
+		core.updateOver(session, hit, hit ? resolveEdge(hit.rect, point, hit.record.readEdges()) : null, event, errors);
+		if (core.getSession() === session) {
+			const move = createDragEvent("dragmove", session.pointerType, session.sourceKey, session.payload, session.targetKey, session.edge, point, event);
+			capture(errors, () => options.onDragMove?.(move));
+		}
+		autoScroller.update(point);
+		surfaceErrors(errors, "Drag callbacks failed");
+	};
+	const armPointer = (event, source, pointerType, contactId, origin, key) => {
+		if (disposed || core.getContact() || core.getSession()) return;
+		if (readBoolean(options.isDisabled, "isDisabled") || readBoolean(core.sources.get(key)?.options.isDisabled, "isDisabled")) return;
+		const host = eventElement(event);
+		if (!host) return;
+		event.preventDefault();
+		event.stopPropagation();
+		let releaseListeners = () => void 0;
+		let restoreSelection = () => void 0;
+		try {
+			releaseListeners = installDragListeners(host.ownerDocument, source, {
+				getContactId: () => core.getContact()?.contactId ?? null,
+				onPoint: pointerPoint,
+				onFinish: (finishEvent, canceled) => core.finishSession(finishEvent, canceled)
+			});
+			restoreSelection = disableTextSelection(host);
+		} catch (error) {
+			const errors = [error];
+			capture(errors, releaseListeners);
+			capture(errors, restoreSelection);
+			surfaceErrors(errors, "Drag start cleanup failed");
+			throw error;
+		}
+		core.setContact({
+			sourceKey: key,
+			source,
+			contactId,
+			origin,
+			pointerType,
+			releaseListeners,
+			restoreSelection
+		});
+	};
+	const buildSourceProps = (key) => Object.freeze({
+		onDragstart(event) {
+			if (core.getContact()?.sourceKey === key || core.getSession()?.sourceKey === key) core.finishSession(event, true);
+		},
+		onFocusout(event) {
+			const session = core.getSession();
+			if (session?.pointerType === "keyboard" && session.sourceKey === key) core.finishSession(event, true);
+		},
+		onKeydown(event) {
+			if (!disposed) handleSourceKeydown(core, options, event, key);
+		},
+		onMousedown(event) {
+			if (event.button !== 0 || event.view && "PointerEvent" in event.view) return;
+			const elapsed = event.timeStamp - lastTouchTime;
+			if (elapsed >= 0 && elapsed < 800) return;
+			armPointer(event, "mouse", "mouse", null, {
+				x: event.clientX,
+				y: event.clientY
+			}, key);
+		},
+		onPointerdown(event) {
+			if (!isPrimaryPointer(event)) return;
+			const origin = {
+				x: event.clientX,
+				y: event.clientY
+			};
+			armPointer(event, "pointer", pointerTypeOf(event), event.pointerId, origin, key);
+		},
+		onTouchstart(event) {
+			lastTouchTime = event.timeStamp;
+			if (event.view && "PointerEvent" in event.view || event.changedTouches.length !== 1) return;
+			const touch = event.changedTouches.item(0);
+			if (touch) {
+				const origin = {
+					x: touch.clientX,
+					y: touch.clientY
+				};
+				armPointer(event, "touch", "touch", touch.identifier, origin, key);
+			}
+		}
+	});
+	return Object.freeze({
+		isDragging: shallowReadonly(core.dragging),
+		sourceKey: shallowReadonly(core.activeSourceKey),
+		targetKey: shallowReadonly(core.activeTargetKey),
+		indicator: shallowReadonly(core.indicator),
+		registerSource(sourceOptions) {
+			if (disposed) throw new Error(`${disposedDiagnostic}: the controller has been disposed`);
+			const key = validateKey(sourceOptions.key, core.sources);
+			const record = {
+				options: sourceOptions,
+				dragging: shallowRef(false)
+			};
+			core.sources.set(key, record);
+			return Object.freeze({
+				key,
+				isDragging: shallowReadonly(record.dragging),
+				sourceProps: buildSourceProps(key),
+				dispose: () => {
+					if (core.sources.get(key) !== record) return;
+					if (core.getContact()?.sourceKey === key || core.getSession()?.sourceKey === key) core.finishSession(null, true);
+					core.sources.delete(key);
+				}
+			});
+		},
+		registerTarget(targetOptions) {
+			if (disposed) throw new Error(`${disposedDiagnostic}: the controller has been disposed`);
+			const key = validateKey(targetOptions.key, core.targets);
+			validateCallbacks(targetOptions, [
+				"accepts",
+				"getRect",
+				"onDrop",
+				"onEnter",
+				"onLeave",
+				"onMove"
+			]);
+			if (Array.isArray(targetOptions.edges)) validateEdges(targetOptions.edges);
+			const record = {
+				options: targetOptions,
+				readEdges: () => validateEdges(toValue(targetOptions.edges)),
+				over: shallowRef(false)
+			};
+			core.targets.set(key, record);
+			return Object.freeze({
+				key,
+				isOver: shallowReadonly(record.over),
+				dispose: () => {
+					if (core.targets.get(key) !== record) return;
+					core.targets.delete(key);
+					const session = core.getSession();
+					if (session?.targetKey === key) {
+						record.over.value = false;
+						session.targetKey = null;
+						session.edge = null;
+						core.activeTargetKey.value = null;
+						core.indicator.value = null;
+					}
+				}
+			});
+		},
+		announce(message) {
+			if (disposed || typeof message !== "string" || message.length === 0) return;
+			if (typeof document !== "undefined") liveRegion.announce(document, message);
+		},
+		cancel: () => {
+			if (disposed) throw new Error(`${disposedDiagnostic}: the controller has been disposed`);
+			return core.finishSession(null, true);
+		},
+		dispose: () => {
+			if (disposed) return;
+			disposed = true;
+			const errors = [];
+			capture(errors, () => core.finishSession(null, true, true));
+			capture(errors, liveRegion.dispose);
+			surfaceErrors(errors, "Drag disposal failed");
+		}
+	});
+}
+/** Create a drag-and-drop coordinator disposed with the current effect scope. */
+function useDragAndDrop(options = {}) {
+	if (!getCurrentScope()) throw new Error(`${setupDiagnostic}: use inside component setup or an active effect scope`);
+	const controller = createDragAndDrop(options);
+	onScopeDispose(controller.dispose);
+	return controller;
+}
+//#endregion
+export { readDragTransfer as a, compareDocumentOrder as c, readBoolean as d, readLabel as f, defaultDragAnnouncements as h, readClipboardTransfer as i, indicatorFor as l, validateKey as m, useDragAndDrop as n, writeClipboardTransfer as o, validateCallbacks as p, DRAG_TRANSFER_TYPE as r, writeDragTransfer as s, createDragAndDrop as t, measureRect as u };