@oscarpalmer/oui 0.20.0 → 0.22.0

package/dist/js/{attributable.d.mts → internal/attributable.d.mts}

@@ -1,4 +1,4 @@
-//#region src/js/attributable.d.ts
+//#region src/js/internal/attributable.d.ts
 declare function attributable(attribute: string, add: (element: HTMLElement) => void, remove: (element: HTMLElement) => void): void;
 //#endregion
 export { attributable };

package/dist/js/{attributable.mjs → internal/attributable.mjs}

@@ -1,4 +1,4 @@
-//#region src/js/attributable.ts
+//#region src/js/internal/attributable.ts
 function attributable(attribute, add, remove) {
 	new MutationObserver((entries) => {
 		const { length } = entries;

package/dist/js/internal/draggable.d.mts

@@ -0,0 +1,2 @@
+import { a as DraggableState, i as DraggableBound, n as DragMovePosition, o as addDraggable, r as Draggable, s as removeDraggable } from "../movable-BKFgoaOl.mjs";
+export { DragMovePosition, Draggable, DraggableBound, DraggableState, addDraggable, removeDraggable };

package/dist/js/internal/draggable.mjs

@@ -0,0 +1,215 @@
+import { clamp } from "@oscarpalmer/atoms/number";
+import { getPosition, on } from "@oscarpalmer/toretto/event";
+import { findAncestor } from "@oscarpalmer/toretto/find";
+import { toggleStyles } from "@oscarpalmer/toretto/style";
+import supportsTouch from "@oscarpalmer/toretto/touch";
+//#region src/js/internal/draggable.ts
+var Draggable = class {
+	prefix;
+	element;
+	options;
+	container;
+	hasHandles;
+	horizontal = true;
+	vertical = true;
+	constructor(prefix, element, options) {
+		this.prefix = prefix;
+		this.element = element;
+		this.options = options;
+		setContainer(this, options);
+		setDirection(this, options);
+	}
+	destroy() {
+		unsetContainer(this, this.options);
+		this.container = void 0;
+		this.element = void 0;
+		this.options = void 0;
+	}
+};
+function addDraggable(element) {
+	let instances = state.instances.get(element);
+	if (instances == null) {
+		instances = {};
+		state.instances.set(element, instances);
+	}
+	instances[this.property] ??= new this.constructor(element);
+}
+function getHandle(event, isMovable) {
+	return findAncestor(event, isMovable ? SELECTOR_MOVABLE_HANDLE : SELECTOR_SORTABLE_HANDLE);
+}
+function getNextPosition(draggable, position) {
+	let x = state.original?.x ?? 0;
+	let y = state.original?.y ?? 0;
+	if (draggable.horizontal) {
+		x = position.x - (state.offset?.x ?? 0);
+		if (state.container != null && state.element != null) x = clamp(x, state.container.left, state.container.right - state.element.rectangle.width);
+	}
+	if (draggable.vertical) {
+		y = position.y - (state.offset?.y ?? 0);
+		if (state.container != null && state.element != null) y = clamp(y, state.container.top, state.container.bottom - state.element.rectangle.height);
+	}
+	return {
+		x,
+		y
+	};
+}
+function onKeydown(event) {
+	if (current == null || event.key !== KEY_ESCAPE) return;
+	const { origin } = current;
+	current.options.drag.onCancel?.(state, current);
+	current.element.dispatchEvent(new CustomEvent(`${current.prefix}:cancel`, { detail: { element: origin } }));
+	reset();
+}
+function onPointerdown(event) {
+	if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey || (supportsTouch.value ? event.type === "mousedown" : event.type === "touchstart" || event.button !== 0)) return;
+	const container = findAncestor(event, SELECTOR);
+	const instances = state.instances.get(container);
+	if (instances == null) return;
+	const isMovable = container.hasAttribute(ATTRIBUTE_MOVABLE);
+	const instance = isMovable ? instances.movable : instances.sortable;
+	if (instance == null) return;
+	if (supportsTouch.value) event.preventDefault();
+	let element = container;
+	if (!isMovable) {
+		element = findAncestor(event, SELECTOR_SORTABLE_ITEM);
+		if (element == null || element.parentElement !== container) return;
+	}
+	let handle = element;
+	instance.hasHandles ??= element.querySelector(SELECTOR_SORTABLE_HANDLE) != null;
+	if (instance.hasHandles) handle = getHandle(event, isMovable);
+	if (handle == null) return;
+	const { dragged } = instance;
+	const rectangle = dragged.getBoundingClientRect();
+	const position = getPosition(event) ?? {
+		x: 0,
+		y: 0
+	};
+	current = instance;
+	state.container = instance.container?.getBoundingClientRect();
+	state.element = {
+		rectangle,
+		node: dragged
+	};
+	state.offset = instance.options.position.getOffset(state, instance, element, position);
+	state.original = instance.options.position.getOriginal(state, instance, position);
+	const begin = new CustomEvent(`${instance.prefix}:begin`, {
+		detail: {
+			element,
+			position: { ...state.original }
+		},
+		cancelable: true
+	});
+	instance.element.dispatchEvent(begin);
+	setTimeout(() => {
+		if (begin.defaultPrevented) {
+			current?.options.drag.onCancel(state, instance);
+			reset();
+			return;
+		}
+		const next = getNextPosition(instance, position);
+		dragged.style.position = "fixed";
+		dragged.style.inset = `${next.y}px auto auto ${next.x}px`;
+		instance.options.drag.onBegin(event, state, instance, element, handle, next);
+		styleToggler.set();
+	});
+}
+function onPointermove(event) {
+	if (current == null) return;
+	const position = getPosition(event);
+	if (position == null) return;
+	const next = getNextPosition(current, position);
+	if (state.element != null) state.element.node.style.inset = `${next.y}px auto auto ${next.x}px`;
+	const detail = current.options.drag.onMove(event, state, current, {
+		calculated: next,
+		original: position
+	});
+	current.element.dispatchEvent(new CustomEvent(`${current.prefix}:move`, { detail }));
+}
+function onPointerup(event) {
+	current?.options.drag.onEnd?.(event, state, current, reset);
+}
+function removeDraggable(element) {
+	const { property } = this;
+	const instances = state.instances.get(element);
+	if (instances == null || instances[property] == null) return;
+	instances[property]?.destroy();
+	instances[property] = void 0;
+	if (instances[properties[property]] == null) state.instances.delete(element);
+}
+function reset() {
+	current = void 0;
+	state.container = void 0;
+	state.element = void 0;
+	state.offset = void 0;
+	state.original = void 0;
+	styleToggler.remove();
+}
+function setContainer(draggable, options) {
+	const selector = draggable.element.getAttribute(options.container.attribute);
+	if (typeof selector !== "string") return;
+	draggable.container = globals.has(selector) ? draggable.element.ownerDocument.body : document.querySelector(selector) ?? void 0;
+	if (draggable.container == null) return;
+	const set = options.container.map.get(draggable.container);
+	if (set == null) options.container.map.set(draggable.container, new Set([draggable]));
+	else set.add(draggable);
+	options.container.onInitialize?.(draggable);
+}
+function setDirection(draggable, options) {
+	const direction = draggable.element.getAttribute(options.direction.attribute);
+	if (horizontals.has(direction)) draggable.vertical = false;
+	else if (verticals.has(direction)) draggable.horizontal = false;
+	options.direction.onAfter?.(draggable);
+}
+function unsetContainer(draggable, options) {
+	const { container } = draggable;
+	if (container == null) return;
+	const set = options.container.map.get(container);
+	let empty = false;
+	if (set != null) {
+		set.delete(draggable);
+		if (set.size === 0) {
+			empty = true;
+			options.container.map.delete(container);
+		}
+	}
+	options.container.onDestroy?.(draggable, container, empty);
+}
+const ATTRIBUTE_MOVABLE = "oui-movable";
+const ATTRIBUTE_SORTABLE = "oui-sortable";
+const KEY_ESCAPE = "Escape";
+const SELECTOR = `[${ATTRIBUTE_MOVABLE}], [${ATTRIBUTE_SORTABLE}]`;
+const SELECTOR_MOVABLE_HANDLE = `[${ATTRIBUTE_MOVABLE}-handle]`;
+const SELECTOR_SORTABLE_HANDLE = `[${ATTRIBUTE_SORTABLE}-handle]`;
+const SELECTOR_SORTABLE_ITEM = `[${ATTRIBUTE_SORTABLE}] > *`;
+const globals = new Set([
+	"body",
+	"document",
+	"window"
+]);
+const horizontals = new Set(["horizontal", "x"]);
+const properties = {
+	movable: "sortable",
+	sortable: "movable"
+};
+const state = {
+	container: void 0,
+	element: void 0,
+	instances: /* @__PURE__ */ new WeakMap(),
+	offset: void 0,
+	original: void 0
+};
+const styleToggler = toggleStyles(document.body, {
+	touchAction: "none",
+	userSelect: "none",
+	webkitUserSelect: "none"
+});
+const verticals = new Set(["vertical", "y"]);
+let current;
+on(document, "keydown", onKeydown);
+on(document, "mousedown", onPointerdown);
+on(document, "pointermove", onPointermove);
+on(document, "pointerup", onPointerup);
+on(document, "touchcancel", onPointerup, { passive: false });
+on(document, "touchstart", onPointerdown, { passive: false });
+//#endregion
+export { Draggable, addDraggable, removeDraggable };

package/dist/js/{floatable.d.mts → internal/floatable.d.mts}

@@ -1,4 +1,4 @@
-//#region src/js/floatable.d.ts
+//#region src/js/internal/floatable.d.ts
 declare class Floatable {
   readonly options: Options;
   active: boolean;
@@ -17,10 +17,10 @@ type Options = {
   defaultPosition: Position;
   interactive: boolean;
   positionAttribute: string;
-  preferAbove: boolean;
+  reusable: boolean;
   onAfter?: (active: boolean) => void;
 };
-type Position = 'above' | 'above-end' | 'above-start' | 'below' | 'below-end' | 'below-start' | 'end' | 'end-bottom' | 'end-top' | 'horizontal' | 'horizontal-bottom' | 'horizontal-top' | 'start' | 'start-bottom' | 'start-top' | 'vertical' | 'vertical-end' | 'vertical-start';
+type Position = 'above' | 'above-end' | 'above-start' | 'below' | 'below-end' | 'below-start' | 'end' | 'end-bottom' | 'end-top' | 'start' | 'start-bottom' | 'start-top';
 declare function deactivate(floatable: Floatable): void;
 //#endregion
 export { Floatable, deactivate };

package/dist/js/internal/floatable.mjs

@@ -0,0 +1,187 @@
+import { on } from "@oscarpalmer/toretto/event";
+import { findAncestor } from "@oscarpalmer/toretto/find";
+//#region src/js/internal/floatable.ts
+var Floatable = class {
+	options;
+	active = false;
+	disabled = false;
+	frame;
+	ignoreFocus = false;
+	constructor(options) {
+		this.options = options;
+		initialize(this);
+	}
+	destroy() {
+		stop(this);
+		const state = getState();
+		state?.active.delete(this);
+		state?.mapped.delete(this.options.anchor);
+		state?.mapped.delete(this.options.content);
+		this.options.anchor = void 0;
+		this.options.content = void 0;
+	}
+	disable() {
+		if (this.disabled) return;
+		this.disabled = true;
+		stop(this);
+		getState()?.active.delete(this);
+	}
+	enable() {
+		if (!this.disabled) return;
+		this.disabled = false;
+		initialize(this);
+	}
+	toggle(active, ignoreFocus) {
+		if (this.disabled || this.active === active) return;
+		const state = getState();
+		if (state == null) return;
+		this.ignoreFocus = !active && (ignoreFocus ?? false);
+		stop(this);
+		if (active) state.active.add(this);
+		else state.active.delete(this);
+		if (this.options.interactive) if (active) state.order.push(this);
+		else {
+			const index = state.order.indexOf(this);
+			if (index > -1) state.order.splice(index, 1);
+		}
+		if (active) activate(this);
+		else deactivate(this);
+	}
+};
+function activate(floatable) {
+	floatable.active = true;
+	document.body.append(floatable.options.content);
+	floatable.options.content.hidden = false;
+	setPosition(floatable);
+}
+function closeAbove(element) {
+	const state = getState();
+	if (state == null) return;
+	const index = state.order.findIndex((floatable) => floatable.options.anchor === element || floatable.options.content === element);
+	if (index === -1 || index === state.order.length - 1) return;
+	while (index < state.order.length - 1) state.order.pop()?.toggle(false, true);
+}
+function closeAll() {
+	const state = getState();
+	const floatables = [...state?.active ?? []];
+	state?.active.clear();
+	for (const floatable of floatables) floatable.toggle(false, true);
+}
+function closeNonInteractive(state) {
+	for (const floatable of state.active) if (!floatable.options.interactive) floatable.toggle(false);
+}
+function deactivate(floatable) {
+	floatable.active = false;
+	if (!floatable.options.reusable) {
+		floatable.options.content.hidden = true;
+		floatable.options.anchor.insertAdjacentElement(INSERT_AFTEREND, floatable.options.content);
+	}
+	floatable.options.onAfter?.(false);
+}
+function getAnchorName() {
+	index += 1;
+	return `--oui-floatable-anchor-${index}`;
+}
+function getState() {
+	return window._oscarpalmer_oui_floatable;
+}
+function initialize(floatable) {
+	const { anchor, content, interactive } = floatable.options;
+	if (interactive) {
+		anchor.setAttribute(ATTRIBUTE_ANCHOR, "");
+		content.setAttribute(ATTRIBUTE_CONTENT, "");
+	}
+	const anchorName = getAnchorName();
+	anchor.style.anchorName = anchorName;
+	content.style.position = "absolute";
+	content.style.positionAnchor = anchorName;
+	content.style.positionTry = "normal flip-start";
+	const state = getState();
+	state?.mapped.set(anchor, floatable);
+	state?.mapped.set(content, floatable);
+}
+function isDisabled(element) {
+	return element.disabled || element.readOnly || element.getAttribute("aria-disabled") === "true";
+}
+function onClick(event) {
+	const related = findAncestor(event, SELECTOR_ALL);
+	if (!(related instanceof HTMLElement)) closeAll();
+	else if (related.hasAttribute(ATTRIBUTE_CONTENT)) closeAbove(related);
+	else if (!isDisabled(related)) toggle(related);
+}
+function onKeyDown(event) {
+	if (event.key !== "Escape") return;
+	const state = getState();
+	if (state == null || state.active.size === 0) return;
+	closeNonInteractive(state);
+	const related = findAncestor(event, SELECTOR_CONTENT);
+	if (!(related instanceof HTMLElement)) return;
+	closeAbove(related);
+	const floatable = state.mapped.get(related);
+	if (floatable != null) floatable.toggle(false);
+}
+function setPosition(floatable) {
+	let position = floatable.options.anchor.getAttribute(floatable.options.positionAttribute) ?? floatable.options.defaultPosition;
+	if (AREAS[position] == null) position = floatable.options.defaultPosition;
+	const area = AREAS[position];
+	floatable.options.content.style.positionArea = area;
+	floatable.options.content.setAttribute(ATTRIBUTE_POSITION, POSITIONS[area]);
+	floatable.options.onAfter?.(true);
+}
+function stop(floatable) {
+	if (floatable.frame != null) cancelAnimationFrame(floatable.frame);
+	floatable.frame = void 0;
+}
+function toggle(anchor) {
+	const floatable = getState()?.mapped.get(anchor);
+	if (floatable == null) {
+		closeAll();
+		return;
+	}
+	const active = Boolean(floatable.active);
+	const content = findAncestor(floatable.options.anchor, SELECTOR_CONTENT);
+	if (content == null) closeAll();
+	else closeAbove(content);
+	floatable.toggle(!active);
+}
+const AREAS = {
+	above: "block-start",
+	"above-end": "start span-start",
+	"above-start": "start span-end",
+	below: "block-end",
+	"below-end": "end span-start",
+	"below-start": "end span-end",
+	end: "center end",
+	"end-bottom": "span-start end",
+	"end-top": "span-end end",
+	start: "center start",
+	"start-bottom": "span-start start",
+	"start-top": "span-end start"
+};
+const ATTRIBUTE_ANCHOR = "oui-floatable-anchor";
+const ATTRIBUTE_CONTENT = "oui-floatable-content";
+const ATTRIBUTE_POSITION = "oui-position";
+const INSERT_AFTEREND = "afterend";
+const POSITIONS = Object.fromEntries(Object.entries(AREAS).map(([position, area]) => [area, position]));
+const SELECTOR_ALL = `[${ATTRIBUTE_ANCHOR}], [${ATTRIBUTE_CONTENT}]`;
+const SELECTOR_CONTENT = `[${ATTRIBUTE_CONTENT}]`;
+let index = 0;
+if (window._oscarpalmer_oui_floatable == null) {
+	Object.defineProperty(window, "_oscarpalmer_oui_floatable", {
+		enumerable: false,
+		value: {
+			active: /* @__PURE__ */ new Set(),
+			mapped: /* @__PURE__ */ new Map(),
+			order: []
+		},
+		writable: false
+	});
+	on(document, "keydown", (event) => {
+		onKeyDown(event);
+	});
+	on(document, "click", (event) => {
+		onClick(event);
+	});
+}
+//#endregion
+export { Floatable, deactivate };

package/dist/js/movable-BKFgoaOl.d.mts

@@ -0,0 +1,101 @@
+import { EventPosition, PlainObject } from "@oscarpalmer/atoms/models";
+
+//#region src/js/sortable.d.ts
+declare class Sortable extends Draggable {
+  connections: string | null;
+  origin: HTMLElement | undefined;
+  get dragged(): HTMLElement;
+  constructor(element: HTMLElement);
+}
+//#endregion
+//#region src/js/internal/draggable.d.ts
+declare abstract class Draggable {
+  prefix: string;
+  element: HTMLElement;
+  options: DraggableOptions;
+  container: HTMLElement | undefined;
+  hasHandles: boolean | undefined;
+  horizontal: boolean;
+  vertical: boolean;
+  abstract readonly dragged: HTMLElement;
+  abstract origin: HTMLElement | undefined;
+  constructor(prefix: string, element: HTMLElement, options: DraggableOptions);
+  destroy(): void;
+}
+type DragBegin = (event: MouseEvent | TouchEvent, state: DraggableState, draggable: Draggable, element: HTMLElement, handle: HTMLElement, position: EventPosition) => void;
+type DragCancel = (state: DraggableState, draggable: Draggable) => void;
+type DragEnd = (event: MouseEvent | TouchEvent, state: DraggableState, draggable: Draggable, reset: () => void) => void;
+type DragMove = (event: MouseEvent | TouchEvent, state: DraggableState, draggable: Draggable, position: DragMovePosition) => PlainObject | undefined;
+type DragMovePosition = {
+  calculated: EventPosition;
+  original: EventPosition;
+};
+type DraggableBound<Property extends keyof DraggableInstances = keyof DraggableInstances, Instance extends DraggableInstances[Property] = DraggableInstances[Property]> = {
+  constructor: new (element: HTMLElement) => Instance;
+  property: Property;
+};
+type DraggableInstances = {
+  movable?: Movable;
+  sortable?: Sortable;
+};
+type DraggableOptions = {
+  container: DraggableOptionsContainer;
+  direction: DraggableOptionsDirection;
+  drag: DraggableOptionsDrag;
+  position: DraggableOptionsPosition;
+};
+type DraggableOptionsContainer = {
+  attribute: string;
+  map: Map<HTMLElement, Set<Draggable>>;
+  onDestroy?: DraggableOptionsContainerOnDestroy;
+  onInitialize?: DraggableOptionsContainerOnInitialize;
+};
+type DraggableOptionsContainerOnDestroy = (draggable: Draggable, container: HTMLElement, empty: boolean) => void;
+type DraggableOptionsContainerOnInitialize = (draggable: Draggable) => void;
+type DraggableOptionsDirection = {
+  attribute: string;
+  onAfter?: DraggableOptionsDirectionOnAfter;
+};
+type DraggableOptionsDirectionOnAfter = (draggable: Draggable) => void;
+type DraggableOptionsDrag = {
+  onBegin: DragBegin;
+  onCancel: DragCancel;
+  onEnd: DragEnd;
+  onMove: DragMove;
+};
+type DraggableOptionsPosition = {
+  getOffset: DraggableOptionsPositionGetOffset;
+  getOriginal: DraggableOptionsPositionGetOriginal;
+};
+type DraggableOptionsPositionGetOffset = (state: DraggableState, draggable: Draggable, element: HTMLElement, position: EventPosition) => EventPosition;
+type DraggableOptionsPositionGetOriginal = (state: DraggableState, draggable: Draggable, position: EventPosition) => EventPosition;
+type DraggableState = {
+  container: DOMRect | undefined;
+  element: DraggableStateElement | undefined;
+  instances: WeakMap<HTMLElement, DraggableInstances>;
+  offset: EventPosition | undefined;
+  original: EventPosition | undefined;
+};
+type DraggableStateElement = {
+  node: HTMLElement;
+  rectangle: DOMRect;
+};
+declare function addDraggable<Property extends keyof DraggableInstances, Instance extends DraggableInstances[Property]>(this: DraggableBound<Property, Instance>, element: HTMLElement): void;
+declare function removeDraggable<Property extends keyof DraggableInstances, Instance extends DraggableInstances[Property]>(this: {
+  constructor: new (element: HTMLElement) => Instance;
+  property: Property;
+}, element: HTMLElement): void;
+//#endregion
+//#region src/js/movable.d.ts
+declare class Movable extends Draggable {
+  inset: string;
+  moved: boolean;
+  offset: Partial<EventPosition> | undefined;
+  position: string;
+  get dragged(): HTMLElement;
+  get origin(): HTMLElement | undefined;
+  constructor(element: HTMLElement);
+  destroy(): void;
+}
+//#endregion
+export { DraggableState as a, Sortable as c, DraggableBound as i, DragMovePosition as n, addDraggable as o, Draggable as r, removeDraggable as s, Movable as t };

package/dist/js/movable.d.mts

@@ -0,0 +1,2 @@
+import { t as Movable } from "./movable-BKFgoaOl.mjs";
+export { Movable };

package/dist/js/movable.mjs

@@ -0,0 +1,152 @@
+import { attributable } from "./internal/attributable.mjs";
+import { Draggable, addDraggable, removeDraggable } from "./internal/draggable.mjs";
+import { getPosition, on } from "@oscarpalmer/toretto/event";
+//#region src/js/movable.ts
+var Movable = class extends Draggable {
+	inset;
+	moved = false;
+	offset;
+	position;
+	get dragged() {
+		return this.element;
+	}
+	get origin() {
+		return this.element;
+	}
+	constructor(element) {
+		super("move", element, {
+			container: {
+				attribute: ATTRIBUTE_CONTAINER,
+				map: CONTAINERS,
+				onDestroy: destroyContainer,
+				onInitialize: initializeContainer
+			},
+			direction: {
+				attribute: ATTRIBUTE_DIRECTION,
+				onAfter: afterDirection
+			},
+			drag: {
+				onBegin,
+				onCancel,
+				onEnd,
+				onMove
+			},
+			position: {
+				getOffset: getOffsetPosition,
+				getOriginal: getOriginalPosition
+			}
+		});
+		this.hasHandles = element.querySelector(SELECTOR_HANDLE) != null;
+		this.inset = element.style.inset;
+		this.position = element.style.position;
+	}
+	destroy() {
+		super.destroy();
+		MOVED.delete(this);
+		this.element.style.inset = this.inset;
+		this.element.style.position = this.position;
+	}
+};
+function afterDirection(draggable) {
+	const container = draggable.container?.getBoundingClientRect();
+	if (container != null) setOffset(draggable, container);
+}
+function destroyContainer(_, container, empty) {
+	if (empty) resizer.unobserve(container);
+}
+function getOffsetPosition(state, _, __, position) {
+	return {
+		x: position.x - (state.element?.rectangle.left ?? 0),
+		y: position.y - (state.element?.rectangle.top ?? 0)
+	};
+}
+function getOriginalPosition(state) {
+	return {
+		x: state.element?.rectangle.left ?? 0,
+		y: state.element?.rectangle.top ?? 0
+	};
+}
+function initializeContainer(draggable) {
+	resizer.observe(draggable.container);
+}
+function onBegin() {}
+function onCancel(state, draggable) {
+	const { element, inset, moved, position } = draggable;
+	const { x, y } = state.original ?? {
+		x: 0,
+		y: 0
+	};
+	if (moved) element.style.inset = `${y}px auto auto ${x}px`;
+	else {
+		element.style.position = position;
+		element.style.inset = inset;
+	}
+}
+function onEnd(event, state, draggable, reset) {
+	const movable = draggable;
+	if (!movable.moved) {
+		movable.moved = true;
+		if (movable.container != null) MOVED.add(movable);
+	}
+	const container = movable.container?.getBoundingClientRect();
+	if (container != null) setOffset(movable, container);
+	const end = new CustomEvent(EVENT_END, {
+		detail: {
+			from: { ...state.original },
+			to: getPosition(event)
+		},
+		cancelable: true
+	});
+	movable.element.dispatchEvent(end);
+	setTimeout(() => {
+		if (end.defaultPrevented) onCancel(state, draggable);
+		reset();
+	});
+}
+function onMove(_, state, __, position) {
+	return {
+		from: { ...state.original },
+		to: { ...position.calculated }
+	};
+}
+function onResize(entries) {
+	const { length } = entries;
+	for (let index = 0; index < length; index += 1) {
+		const entry = entries[index];
+		const set = CONTAINERS.get(entry.target);
+		if (set == null) continue;
+		for (const movable of set) reposition(movable);
+	}
+}
+function onScroll() {
+	for (const moved of MOVED) reposition(moved);
+}
+function reposition(movable) {
+	if (!movable.moved || movable.container == null) return;
+	const container = movable.container.getBoundingClientRect();
+	const x = container.left + (movable.offset?.x ?? 0);
+	const y = container.top + (movable.offset?.y ?? 0);
+	movable.element.style.inset = `${y}px auto auto ${x}px`;
+}
+function setOffset(movable, container) {
+	movable.offset = {};
+	const element = movable.element.getBoundingClientRect();
+	movable.offset.y = element.top - container.top;
+	movable.offset.x = element.left - container.left;
+}
+const ATTRIBUTE = "oui-movable";
+const ATTRIBUTE_CONTAINER = `${ATTRIBUTE}-container`;
+const ATTRIBUTE_DIRECTION = `${ATTRIBUTE}-direction`;
+const CONTAINERS = /* @__PURE__ */ new Map();
+const EVENT_END = "move:end";
+const MOVED = /* @__PURE__ */ new Set();
+const SELECTOR_HANDLE = `[${ATTRIBUTE}-handle]`;
+const bound = {
+	constructor: Movable,
+	property: "movable"
+};
+const resizer = new ResizeObserver(onResize);
+attributable(ATTRIBUTE, addDraggable.bind(bound), removeDraggable.bind(bound));
+on(document, "scroll", onScroll);
+//#endregion
+export { Movable };