@hrnec06/react_utils 1.2.6 → 1.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hrnec06/react_utils",
-  "version": "1.2.6",
+  "version": "1.3.2",
   "description": "A debugger component for react.",
   "exports": {
     ".": "./src/index.tsx"
@@ -30,7 +30,8 @@
     "clsx": "^2.1.1",
     "lucide-react": "^0.525.0",
     "react": "^19.1.0",
-    "react-dom": "^19.2.3"
+    "react-dom": "^19.2.3",
+    "uuid": "^13.0.0"
   },
   "scripts": {
     "dev": "tsup src/index.tsx --format cjs,esm --dts --watch"

package/src/{debugger → components/Debugger}/Debugger.tsx

@@ -3,12 +3,12 @@ import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from 'react-dom';
 import {DebuggerContext} from "./DebuggerContext";
 import clsx from "clsx";
-import ResizeBorder from "./DebuggerWindowResize";
 import ScrollBar from "./DebuggerScrollBar";
-import useKeyListener from "../hooks/useKeyListener";
-import useUpdateEffect from "../hooks/useUpdateEffect";
-import useUpdatedRef from "../hooks/useUpdatedRef";
 import ParseValue from "./parser/DebugParser";
+import useKeyListener from "../../hooks/useKeyListener";
+import useUpdateEffect from "../../hooks/useUpdateEffect";
+import useUpdatedRef from "../../hooks/useUpdatedRef";
+import ResizeableBox from "../ResizeableBox/ResizeableBox";
 
 interface DebugProps {
 	value: unknown,
@@ -227,6 +227,11 @@ export default function Debug({
 		setScrollProgress(p => minmax(p + addProgress, 0, 1));
 	}
 
+	const handleResize = (size: Vector2, offset: Vector2) => {
+		setWindowSize(size);
+		setPosition(offset);
+	}
+
 	return createPortal(
 		(
 			<DebuggerContext.Provider
@@ -273,29 +278,34 @@ export default function Debug({
 							height: windowSize[1],
 						}}
 					>
-						<ResizeBorder />
+						<ResizeableBox
+							$size={windowSize}
+							$offset={finalPosition}
 
-						<div
-							onWheel={handleWheel}
-							className="bg-[#1f1f1f] shadow-lg rounded-md border border-[#4b4b4b] w-full h-full overflow-hidden flex"
+							$onResize={handleResize}
 						>
 							<div
-								ref={containerRef}
-								onMouseDown={handleMouseDown}
-								className=" cursor-grab w-full"
-								style={{
-									transform: `translateY(${-(scrollProgress * scrollHeight)}px)`
-								}}
+								onWheel={handleWheel}
+								className="bg-[#1f1f1f] shadow-lg rounded-md border border-[#4b4b4b] w-full h-full overflow-hidden flex"
 							>
-								<div className="p-3 pl-5">
-									<ParseValue value={value} />
+								<div
+									ref={containerRef}
+									onMouseDown={handleMouseDown}
+									className=" cursor-grab w-full"
+									style={{
+										transform: `translateY(${-(scrollProgress * scrollHeight)}px)`
+									}}
+								>
+									<div className="p-3 pl-5">
+										<ParseValue value={value} />
+									</div>
 								</div>
+								<ScrollBar
+									containerHeight={containerHeight}
+									scrollHeight={scrollHeight}
+								/>
 							</div>
-							<ScrollBar
-								containerHeight={containerHeight}
-								scrollHeight={scrollHeight}
-							/>
-						</div>
+						</ResizeableBox>
 					</div>
 				</div>
 			</DebuggerContext.Provider>

package/src/{debugger → components/Debugger}/DebuggerScrollBar.tsx

@@ -1,7 +1,7 @@
-import { minmax, Nullable, Vector2 } from "@hrnec06/util";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { minmax, Nullable } from "@hrnec06/util";
+import { useEffect, useRef, useState } from "react";
 import useDebugger from "./DebuggerContext";
-import useListener from "../hooks/useListener";
+import useListener from "../../hooks/useListener";
 
 interface ScrollBarProps {
 	containerHeight: number,

package/src/components/ResizeableBox/DragAreas.tsx

@@ -0,0 +1,182 @@
+import { matchBool, matchMouseEvent, MouseButton, Vector2 } from "@hrnec06/util";
+import clsx from "clsx";
+import useResizeableBox from "./ResizeableBoxContext";
+import RB from "./ResizeableBox.types";
+
+export default function DragAreas()
+{
+	return (
+		<>
+			<DragArea
+				spanHorizontal
+				top
+
+				applyReposition={'y'}
+				onMove={([, y]) => [0, -y]}
+			/>
+
+			<DragArea
+				spanVertical
+				right
+				
+				onMove={([x]) => [x, 0]}
+			/>
+
+			<DragArea
+				spanHorizontal
+				bottom
+
+				onMove={([, y]) => [0, y]}
+			/>
+
+			<DragArea
+				spanVertical
+				left
+
+				applyReposition={'x'}
+				onMove={([x]) => [-x, 0]}
+			/>
+
+			{/* Corners */}
+
+			<DragArea
+				isCorner
+				left
+				top
+
+				applyReposition={true}
+				onMove={([x, y]) => [-x, -y]}
+			/>
+
+			<DragArea
+				isCorner
+				right
+				top
+
+				applyReposition={'y'}
+				onMove={([x, y]) => [x, -y]}
+			/>
+
+			<DragArea
+				isCorner
+				left
+				bottom
+
+				applyReposition={'x'}
+				onMove={([x, y]) => [-x, y]}
+			/>
+
+			<DragArea
+				isCorner
+				right
+				bottom
+
+				onMove={([x, y]) => [x, y]}
+			/>
+		</>
+	);
+}
+
+interface DragAreaProps {
+	isCorner?: boolean,
+
+	spanVertical?: boolean,
+	spanHorizontal?: boolean,
+
+	onMove: (offset: Vector2) => Vector2,
+	applyReposition?: RB.RepositionMode,
+
+	top?: boolean,
+	right?: boolean,
+	bottom?: boolean,
+	left?: boolean
+}
+function DragArea({
+	isCorner,
+
+	spanVertical,
+	spanHorizontal,
+
+	onMove,
+	applyReposition = false,
+
+	...enabledSides
+}: DragAreaProps)
+{
+	const box = useResizeableBox();
+
+	const isAllowed = (side: RB.DragSide) => box.options.allowedSides.includes(side);
+
+	if (isCorner && !box.options.allowCorners)
+		return undefined;
+
+	if (
+		(enabledSides.top && !isAllowed('top')) ||
+		(enabledSides.right && !isAllowed('right')) ||
+		(enabledSides.bottom && !isAllowed('bottom')) ||
+		(enabledSides.left && !isAllowed('left'))
+	)
+		return undefined;
+
+	if (isCorner && Array.isArray(box.options.allowCorners))
+	{
+		if (!box.options.allowCorners.some((combo) => enabledSides[combo[0]] && enabledSides[combo[1]]))
+			return undefined;
+	}
+
+	const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
+		if (box.drag.value !== null || !matchMouseEvent(e.nativeEvent, MouseButton.Left))
+			return;
+
+		e.preventDefault();
+		e.stopPropagation();
+
+		box.drag.value = {
+			originalSize: box.size,
+			originalOffset: box.offset,
+			dragOrigin: [e.clientX, e.clientY],
+			mouseMove: onMove,
+			applyReposition: applyReposition,
+		};
+	}
+
+	return (
+		<div
+			onMouseDown={handleMouseDown}
+
+			className={clsx(
+				"absolute z-20",
+				"select-none",
+
+				spanVertical ? 'h-full' : clsx(
+					box.options.dragAreaSize === 'small' 	&& 'h-2',
+					box.options.dragAreaSize === 'medium'	&& 'h-4',
+					box.options.dragAreaSize === 'big'		&& 'h-6'
+				),
+
+				spanHorizontal ? 'w-full' : clsx(
+					box.options.dragAreaSize === 'small' 	&& 'w-2',
+					box.options.dragAreaSize === 'medium'	&& 'w-4',
+					box.options.dragAreaSize === 'big'		&& 'w-6'
+				),
+
+				enabledSides.top 		&& clsx('bottom-full', box.options.insetAreas && 'translate-y-1/2'),
+				enabledSides.right 	&& clsx('left-full', box.options.insetAreas && '-translate-x-1/2'),
+				enabledSides.bottom	&& clsx('top-full', box.options.insetAreas && '-translate-y-1/2'),
+				enabledSides.left		&& clsx('right-full', box.options.insetAreas && 'translate-x-1/2'),
+
+				matchBool({
+					"cursor-nw-resize": enabledSides.top && enabledSides.left,
+					"cursor-ne-resize": enabledSides.top && enabledSides.right,
+					"cursor-se-resize": enabledSides.bottom && enabledSides.right,
+					"cursor-sw-resize": enabledSides.bottom && enabledSides.left,
+
+					"cursor-n-resize": enabledSides.top,
+					"cursor-e-resize": enabledSides.right,
+					"cursor-s-resize": enabledSides.bottom,
+					"cursor-w-resize": enabledSides.left
+				}),
+			)}
+		/>
+	);
+}

package/src/components/ResizeableBox/ResizeableBox.tsx

@@ -0,0 +1,156 @@
+import { addVector2, cloneVector2, matchMouseEvent, MouseButton, Nullable, Optional, Vector2 } from "@hrnec06/util";
+import clsx from "clsx";
+import { useEffect } from "react";
+import DragAreas from "./DragAreas";
+import useSignal from "../../hooks/useSignal";
+import useUpdatedRef from "../../hooks/useUpdatedRef";
+import useListener from "../../hooks/useListener";
+import { ResizeableBoxContext } from "./ResizeableBoxContext";
+import RB from "./ResizeableBox.types";
+
+// Type definitions
+
+// Component
+
+interface ResizeableBoxProps extends React.HTMLProps<HTMLDivElement>
+{
+	/**
+	 * Current size of the box. Affects onResize callback.
+	 */
+	$size?: Vector2,
+	/**
+	 * Current offset of the box. Affects onResize callback.
+	 */
+	$offset?: Vector2,
+
+	/**
+	 * Size of the areas
+	 */
+	$dragAreaSize?: RB.DragAreaSize,
+	/**
+	 * Allowed sides
+	 */
+	$allowedSides?: RB.DragSide[],
+	/**
+	 * Allow corner resizers?
+	 * A corner will be visible only if the 2 neighbouring sides are visible
+	 */
+	$allowCorners?: boolean | Vector2<RB.DragSide>[],
+	/**
+	 * The drag areas will be inset inside the box by 50%
+	 */
+	$insetAreas?: boolean,
+
+	/**
+	 * If $size or $offset is specified, onResize provides the new size or offset with changes already applied.
+	 */
+	$onResize?: RB.ResizeEvent,
+	/**
+	 * Emits when resizing starts
+	 */
+	$onStart?: RB.StartEvent,
+	/**
+	 * Emits when resizing ends
+	 */
+	$onEnd?: RB.EndEvent,
+}
+export default function ResizeableBox({
+	$size,
+	$offset,
+
+	$dragAreaSize = "medium",
+	$allowedSides = ['top', 'right', 'bottom', 'left'],
+	$allowCorners = true,
+	$insetAreas = true,
+
+	$onResize,
+	$onStart,
+	$onEnd,
+
+	...props
+}: ResizeableBoxProps)
+{
+	const drag = useSignal<Nullable<RB.DragState>>(null);
+
+	const onResizeRef = useUpdatedRef($onResize);
+
+	useEffect(() => {
+		if (drag.value === null)
+			$onEnd && $onEnd();
+		else
+			$onStart && $onStart();
+	}, [drag.value]);
+
+	useListener(document, 'mouseup', (e) => {
+		if (drag.value === null || !matchMouseEvent(e, MouseButton.Left))
+			return;
+
+		e.preventDefault();
+		e.stopPropagation();
+
+		drag.value = null;
+	}, [drag.value === null]);
+
+	useListener(document, 'mousemove', (e) => {
+		if (drag.value === null || !onResizeRef.current)
+			return;
+
+		e.preventDefault();
+		e.stopPropagation();
+
+		const offset: Vector2 = [
+			e.clientX - drag.value.dragOrigin[0],
+			e.clientY - drag.value.dragOrigin[1],
+		];
+
+		const sizeOffset = drag.value.mouseMove(offset);
+		const positionOffset: Vector2 = [0, 0];
+		
+		if (drag.value.applyReposition !== false)
+		{
+			const offset: Vector2 = cloneVector2(sizeOffset);
+
+			positionOffset[0] = (drag.value.applyReposition === true || drag.value.applyReposition === 'x') ? -offset[0] : 0;
+			positionOffset[1] = (drag.value.applyReposition === true || drag.value.applyReposition === 'y') ? -offset[1] : 0;
+		}
+
+		if (drag.value.originalSize)
+			addVector2(sizeOffset, drag.value.originalSize);
+
+		if (drag.value.originalOffset)
+			addVector2(positionOffset, drag.value.originalOffset);
+
+		onResizeRef.current(sizeOffset, positionOffset);
+	}, [drag.value === null]);
+
+	return (
+		<ResizeableBoxContext.Provider
+			value={{
+				size: $size,
+				offset: $offset,
+
+				options: {
+					dragAreaSize: $dragAreaSize,
+					allowedSides: $allowedSides,
+					allowCorners: $allowCorners,
+					insetAreas: $insetAreas,
+				},
+
+				drag: drag
+			}}
+		>
+			<div
+				{...props}
+
+				className={clsx(
+					props.className,
+					"relative w-full h-full"
+				)}
+			>
+				<DragAreas />
+
+				{props.children}
+			</div>
+		</ResizeableBoxContext.Provider>
+	)
+}

package/src/components/ResizeableBox/ResizeableBox.types.ts

@@ -0,0 +1,23 @@
+import { Vector2 } from "@hrnec06/util";
+
+namespace RB {
+	export type DragAreaSize = 'small' | 'medium' | 'big';
+	export type DragSide = 'top' | 'right' | 'bottom' | 'left';
+	export type ResizeEvent = (size: Vector2, offset: Vector2) => void;
+	export type StartEvent = () => void;
+	export type EndEvent = () => void;
+
+	export type RepositionMode = boolean | 'x' | 'y';
+	export type MouseMoveHandler = (offset: Vector2) => Vector2;
+
+	export interface DragState {
+		originalSize?: Vector2,
+		originalOffset?: Vector2,
+
+		dragOrigin: Vector2,
+		applyReposition: RB.RepositionMode,
+		mouseMove: MouseMoveHandler
+	}
+}
+
+export default RB;

package/src/components/ResizeableBox/ResizeableBoxContext.ts

@@ -0,0 +1,30 @@
+import { Nullable, Optional, Vector2 } from "@hrnec06/util";
+import { createContext, useContext } from "react";
+import { Signal } from "../../hooks/useSignal";
+import RB from "./ResizeableBox.types";
+
+// Context
+interface ResizeableBoxContext {
+	size?: Vector2,
+	offset?: Vector2,
+
+	options: {
+		insetAreas: boolean,
+		dragAreaSize: RB.DragAreaSize,
+		allowedSides: RB.DragSide[],
+		allowCorners: boolean | Vector2<RB.DragSide>[],
+	},
+
+	drag: Signal<Nullable<RB.DragState>>,
+}
+export const ResizeableBoxContext = createContext<Optional<ResizeableBoxContext>>(undefined);
+
+export default function useResizeableBox()
+{
+	const ctx = useContext(ResizeableBoxContext);
+
+	if (!ctx)
+		throw new Error("useResizeableBox may be used only within ResizeableBoxContext.Provider!");
+
+	return ctx;
+}

package/src/hooks/useEfficientState.ts

@@ -0,0 +1,9 @@
+import { ReactUtils } from "@hrnec06/util";
+import { useMemo, useState } from "react";
+
+export default function useEfficientState<T>(callback: () => T): [T, ReactUtils.SetState<T>]
+{
+	const defaultValue = useMemo(() => callback(), []);
+
+	return useState<T>(defaultValue);
+}

package/src/hooks/useLazySignal.ts

@@ -0,0 +1,64 @@
+import { ReactUtils } from "@hrnec06/util";
+import { Signal } from "./useSignal";
+import { useState } from "react";
+
+const LazyNoValue = Symbol("LazyNoValue");
+
+type LazyValue<T> = T | typeof LazyNoValue;
+
+export default function useLazySignal<T>(callback: () => T): LazySignal<T>
+{
+	const [_value, _setValue] = useState<LazyValue<T>>(LazyNoValue);
+	
+	const signal = new LazySignal(_value, _setValue, callback);
+
+	return signal;
+}
+
+export class LazySignal<T> extends Signal<LazyValue<T>>
+{
+	public static LazyNoValue: typeof LazyNoValue = LazyNoValue;
+
+	constructor(
+		_value: LazyValue<T>,
+		setState: ReactUtils.SetState<T | typeof LazyNoValue>,
+		private lazyCallback: () => T
+	)
+	{
+		super(_value, setState);
+	}
+
+	public set value(value: T | ((prev: LazyValue<T>) => T))
+	{
+		this.setState(value);
+	}
+
+	public get value(): T
+	{
+		if (this._value === LazyNoValue)
+		{
+			const result = this.loadValue();
+
+			return result;
+		}
+
+		return this._value;
+	}
+
+	public loadValue(): T
+	{
+		if (this.hasValue())
+			return this._value as T;
+
+		const result = this.lazyCallback();
+
+		this.setState(result);
+
+		return result;
+	}
+
+	public hasValue(): boolean
+	{
+		return this._value !== LazyNoValue;
+	}
+}

package/src/hooks/useListener.ts

@@ -1,6 +1,6 @@
 import { DependencyList, useEffect } from "react"
 
-export default function useListener<E extends keyof GlobalEventHandlersEventMap>(element: Node, event: E, listener: (event: GlobalEventHandlersEventMap[E]) => void, deps?: DependencyList) {
+export default function useListener<E extends keyof GlobalEventHandlersEventMap>(element: EventTarget, event: E, listener: (event: GlobalEventHandlersEventMap[E]) => void, deps?: DependencyList) {
 	useEffect(() => {
 		element.addEventListener(event, listener as EventListenerOrEventListenerObject);
 

package/src/hooks/useSignal.ts

@@ -13,8 +13,8 @@ export default function useSignal<T>(value: T): Signal<T>
 export class Signal<T>
 {
 	constructor(
-		private _value: T,
-		private setState: ReactUtils.SetState<T>
+		protected _value: T,
+		protected setState: ReactUtils.SetState<T>
 	)
 	{
 	}

package/src/hooks/useUUID.ts

@@ -0,0 +1,6 @@
+import { useMemo } from "react";
+import { v4 as uuidv4} from 'uuid';
+
+export default function useUUID() {
+	return useMemo(() => uuidv4(), []);
+}

package/src/hooks/useWindowSize.ts

@@ -1,21 +1,18 @@
 import { Vector2 } from "@hrnec06/util";
 import { useEffect, useState } from "react";
+import useListener from "./useListener";
+import useLazySignal, { LazySignal } from "./useLazySignal";
 
-export default function useWindowSize(): Vector2 {
-	const [dimensions, setDimensions] = useState<Vector2>([1920, 1080]);
+export default function useWindowSize(): LazySignal<Vector2>
+{
+	const dimensions = useLazySignal<Vector2>(() => [ window.innerWidth, window.innerHeight ]);
 
 	useEffect(() => {
-		setDimensions([window.innerWidth, window.innerHeight]);
-
-		const listener = () => {
-			setDimensions([window.innerWidth, window.innerHeight]);
-		}
-
-		window.addEventListener('resize', listener);
+		dimensions.value = [window.innerWidth, window.innerHeight];
+	}, []);
 
-		return () => {
-			window.removeEventListener('resize', listener);
-		}
+	useListener(window, 'resize', () => {
+		dimensions.value = [window.innerWidth, window.innerHeight];
 	}, []);
 
 	return dimensions;

package/src/index.tsx

@@ -4,9 +4,10 @@ import useUpdatedRef from "./hooks/useUpdatedRef";
 import useUpdateEffect from "./hooks/useUpdateEffect";
 import useWindowSize from "./hooks/useWindowSize";
 import useSignal from "./hooks/useSignal";
+import useLazySignal from "./hooks/useLazySignal";
 
-import Debugger from './debugger/Debugger';
-import ResizeableBox from "./ui/ResizeableBox";
+import Debugger from './components/Debugger/Debugger';
+import ResizeableBox from "./components/ResizeableBox/ResizeableBox";
 
 export {
 	useKeyListener,
@@ -15,6 +16,8 @@ export {
 	useUpdateEffect,
 	useWindowSize,
 	useSignal,
+	useLazySignal,
+	
 	Debugger,
-	ResizeableBox
+	ResizeableBox,
 };

package/src/debugger/DebuggerWindowResize.tsx

@@ -1,136 +0,0 @@
-import { cloneVector2, Nullable, removeVector2, Vector2 } from "@hrnec06/util";
-import { useEffect, useState } from "react";
-import useDebugger from "./DebuggerContext";
-import clsx from "clsx";
-
-export default function ResizeBorder() {
-	return (
-		<>
-			<ResizeBar
-				className="-top-1.5 h-3 w-full cursor-ns-resize"
-				applyReposition
-				onMove={([, y]) => [0, y]}
-			/>
-			<ResizeBar
-				className="-right-1.5 h-full w-3 cursor-ew-resize"
-				onMove={([x]) => [-x, 0]}
-			/>
-			<ResizeBar
-				className="-bottom-1.5 h-3 w-full cursor-ns-resize"
-				onMove={([, y]) => [0, -y]}
-			/>
-			<ResizeBar
-				className="-left-1.5 h-full w-3 cursor-ew-resize"
-				applyReposition
-				onMove={([x,]) => [x, 0]}
-			/>
-
-			<ResizeBar
-				className="-top-1.5 -left-1.5 size-3 cursor-nwse-resize"
-				applyReposition
-				onMove={([x, y]) => [x, y]}
-			/>
-			<ResizeBar
-				className="-top-1.5 -right-1.5 size-3 cursor-nesw-resize"
-				applyReposition={'y'}
-				onMove={([x, y]) => [-x, y]}
-			/>
-			<ResizeBar
-				className="-bottom-1.5 -right-1.5 size-3 cursor-nwse-resize"
-				onMove={([x, y]) => [-x, -y]}
-			/>
-			<ResizeBar
-				className="-bottom-1.5 -left-1.5 size-3 cursor-nesw-resize"
-				applyReposition={'x'}
-				onMove={([x, y]) => [x, -y]}
-			/>
-		</>
-	)
-}
-
-interface ResizeBarProps {
-	className: string,
-	applyReposition?: boolean | 'x' | 'y',
-
-	onMove: (offset: Vector2, originalSize: Vector2, originalPosition: Vector2) => Vector2
-}
-function ResizeBar({
-	className,
-	applyReposition = false,
-
-	onMove
-}: ResizeBarProps) {
-	const debug = useDebugger();
-
-	const [drag, setDrag] = useState<Nullable<{
-		dragOrigin: Vector2,
-		originalSize: Vector2,
-		originalPosition: Vector2
-	}>>(null);
-
-	useEffect(() => {
-		const mouseUp = () => {
-			if (!drag) return;
-
-			setDrag(null);
-		}
-
-		const mouseMove = (e: MouseEvent) => {
-			if (!drag) return;
-
-			const offset: Vector2 = [
-				e.clientX - drag.dragOrigin[0],
-				e.clientY - drag.dragOrigin[1],
-			];
-
-			const newSize = onMove(
-				offset,
-				drag.originalSize,
-				drag.originalPosition
-			);
-
-			newSize[0] = drag.originalSize[0] - newSize[0];
-			newSize[1] = drag.originalSize[1] - newSize[1];
-
-			if (applyReposition !== false) {
-				const repositionOffset = cloneVector2(newSize);
-				removeVector2(repositionOffset, drag.originalSize);
-
-				debug.placement.reposition([
-					drag.originalPosition[0] - ((applyReposition === true || applyReposition === 'x') ? repositionOffset[0] : 0),
-					drag.originalPosition[1] - ((applyReposition === true || applyReposition === 'y') ? repositionOffset[1] : 0)
-				]);
-			}
-
-			debug.window.resize(newSize);
-		}
-
-		document.addEventListener('mouseup', mouseUp);
-		document.addEventListener('mousemove', mouseMove);
-
-		return () => {
-			document.removeEventListener('mouseup', mouseUp);
-			document.removeEventListener('mousemove', mouseMove);
-		}
-	}, [drag]);
-
-	const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
-		e.preventDefault();
-
-		setDrag({
-			dragOrigin: [e.clientX, e.clientY],
-			originalSize: debug.window.size,
-			originalPosition: debug.placement.position
-		});
-	}
-
-	return (
-		<div
-			onMouseDown={handleMouseDown}
-			className={clsx(
-				'absolute',
-				className,
-			)}
-		/>
-	);
-}

package/src/ui/ResizeableBox.tsx

@@ -1,342 +0,0 @@
-import { addVector2, cloneVector2, match, matchBool, matchMouseEvent, MouseButton, Nullable, Optional, Vector2 } from "@hrnec06/util";
-import clsx from "clsx";
-import { createContext, useContext, useEffect, useState } from "react";
-import useSignal, { Signal } from "../hooks/useSignal";
-import useListener from "../hooks/useListener";
-import { useUpdatedRef } from "..";
-
-// Type definitions
-type DragAreaSize = 'small' | 'medium' | 'big';
-type DragSide = 'top' | 'right' | 'bottom' | 'left';
-type ResizeEvent = (size: Vector2, offset: Vector2) => void;
-type StartEvent = () => void;
-type EndEvent = () => void;
-
-type RepositionMode = boolean | 'x' | 'y';
-type MouseMoveHandler = (offset: Vector2) => Vector2
-
-interface DragState {
-	originalSize?: Vector2,
-	originalOffset?: Vector2,
-
-	dragOrigin: Vector2,
-	applyReposition: RepositionMode,
-	mouseMove: MouseMoveHandler
-}
-
-// Context
-interface ResizeableBoxContext {
-	size?: Vector2,
-	offset?: Vector2,
-
-	options: {
-		insetAreas: boolean,
-		dragAreaSize: DragAreaSize,
-		allowedSides: DragSide[],
-		allowCorners: boolean | Vector2<DragSide>[],
-	},
-
-	drag: Signal<Nullable<DragState>>,
-}
-const ResizeableBoxContext = createContext<Optional<ResizeableBoxContext>>(undefined);
-
-function useResizeableBox()
-{
-	const ctx = useContext(ResizeableBoxContext);
-
-	if (!ctx)
-		throw new Error("useResizeableBox may be used only within ResizeableBoxContext.Provider!");
-
-	return ctx;
-}
-
-// Component
-
-interface ResizeableBoxProps extends React.HTMLProps<HTMLDivElement>
-{
-	$size?: Vector2,
-	$offset?: Vector2,
-
-	$dragAreaSize?: DragAreaSize,
-	$allowedSides?: DragSide[],
-	$allowCorners?: boolean | Vector2<DragSide>[],
-	$insetAreas?: boolean,
-
-	$onResize?: ResizeEvent,
-	$onStart?: StartEvent,
-	$onEnd?: EndEvent,
-}
-export default function ResizeableBox({
-	$size,
-	$offset,
-
-	$dragAreaSize = "medium",
-	$allowedSides = ['top', 'right', 'bottom', 'left'],
-	$allowCorners = true,
-	$insetAreas = true,
-
-	$onResize,
-	$onStart,
-	$onEnd,
-
-	...props
-}: ResizeableBoxProps)
-{
-	const drag = useSignal<Nullable<DragState>>(null);
-
-	const onResizeRef = useUpdatedRef($onResize);
-
-	useEffect(() => {
-		if (drag.value === null)
-			$onEnd && $onEnd();
-		else
-			$onStart && $onStart();
-	}, [drag.value]);
-
-	useListener(document, 'mouseup', (e) => {
-		if (drag.value === null || !matchMouseEvent(e, MouseButton.Left))
-			return;
-
-		drag.value = null;
-	}, [drag.value === null]);
-
-	useListener(document, 'mousemove', (e) => {
-		if (drag.value === null || !onResizeRef.current)
-			return;
-
-		const offset: Vector2 = [
-			e.clientX - drag.value.dragOrigin[0],
-			e.clientY - drag.value.dragOrigin[1],
-		];
-
-		const sizeOffset = drag.value.mouseMove(offset);
-		const positionOffset: Vector2 = [0, 0];
-		
-		if (drag.value.applyReposition !== false)
-		{
-			const offset: Vector2 = cloneVector2(sizeOffset);
-
-			positionOffset[0] = (drag.value.applyReposition === true || drag.value.applyReposition === 'x') ? -offset[0] : 0;
-			positionOffset[1] = (drag.value.applyReposition === true || drag.value.applyReposition === 'y') ? -offset[1] : 0;
-		}
-
-		if (drag.value.originalSize)
-			addVector2(sizeOffset, drag.value.originalSize);
-
-		if (drag.value.originalOffset)
-			addVector2(positionOffset, drag.value.originalOffset);
-
-		onResizeRef.current(sizeOffset, positionOffset);
-	}, [drag.value === null]);
-
-	return (
-		<ResizeableBoxContext.Provider
-			value={{
-				size: $size,
-				offset: $offset,
-
-				options: {
-					dragAreaSize: $dragAreaSize,
-					allowedSides: $allowedSides,
-					allowCorners: $allowCorners,
-					insetAreas: $insetAreas,
-				},
-
-				drag: drag
-			}}
-		>
-			<div
-				{...props}
-
-				className={clsx(
-					props.className,
-					"relative w-full h-full"
-				)}
-			>
-				<DragAreas />
-
-				{props.children}
-			</div>
-		</ResizeableBoxContext.Provider>
-	)
-}
-
-interface DragAreasProps {
-
-}
-function DragAreas({
-
-}: DragAreasProps)
-{
-	return (
-		<>
-			<DragArea
-				spanHorizontal
-				top
-
-				applyReposition={'y'}
-				onMove={([, y]) => [0, -y]}
-			/>
-
-			<DragArea
-				spanVertical
-				right
-				
-				onMove={([x]) => [x, 0]}
-			/>
-
-			<DragArea
-				spanHorizontal
-				bottom
-
-				onMove={([, y]) => [0, y]}
-			/>
-
-			<DragArea
-				spanVertical
-				left
-
-				applyReposition={'x'}
-				onMove={([x]) => [-x, 0]}
-			/>
-
-			{/* Corners */}
-
-			<DragArea
-				isCorner
-				left
-				top
-
-				applyReposition={true}
-				onMove={([x, y]) => [-x, -y]}
-			/>
-
-			<DragArea
-				isCorner
-				right
-				top
-
-				applyReposition={'y'}
-				onMove={([x, y]) => [x, -y]}
-			/>
-
-			<DragArea
-				isCorner
-				left
-				bottom
-
-				applyReposition={'x'}
-				onMove={([x, y]) => [-x, y]}
-			/>
-
-			<DragArea
-				isCorner
-				right
-				bottom
-
-				onMove={([x, y]) => [x, y]}
-			/>
-		</>
-	);
-}
-
-interface DragAreaProps {
-	isCorner?: boolean,
-
-	spanVertical?: boolean,
-	spanHorizontal?: boolean,
-
-	onMove: (offset: Vector2) => Vector2,
-	applyReposition?: RepositionMode,
-
-	top?: boolean,
-	right?: boolean,
-	bottom?: boolean,
-	left?: boolean
-}
-function DragArea({
-	isCorner,
-
-	spanVertical,
-	spanHorizontal,
-
-	onMove,
-	applyReposition = false,
-
-	...enabledSides
-}: DragAreaProps)
-{
-	const box = useResizeableBox();
-
-	const isAllowed = (side: DragSide) => box.options.allowedSides.includes(side);
-
-	if (isCorner && !box.options.allowCorners)
-		return undefined;
-
-	if (
-		(enabledSides.top && !isAllowed('top')) ||
-		(enabledSides.right && !isAllowed('right')) ||
-		(enabledSides.bottom && !isAllowed('bottom')) ||
-		(enabledSides.left && !isAllowed('left'))
-	)
-		return undefined;
-
-	if (isCorner && Array.isArray(box.options.allowCorners))
-	{
-		if (!box.options.allowCorners.some((combo) => enabledSides[combo[0]] && enabledSides[combo[1]]))
-			return undefined;
-	}
-
-	const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
-		if (box.drag.value !== null || !matchMouseEvent(e.nativeEvent, MouseButton.Left))
-			return;
-
-		box.drag.value = {
-			originalSize: box.size,
-			originalOffset: box.offset,
-			dragOrigin: [e.clientX, e.clientY],
-			mouseMove: onMove,
-			applyReposition: applyReposition,
-		};
-	}
-
-	return (
-		<div
-			onMouseDown={handleMouseDown}
-
-			className={clsx(
-				"absolute",
-				"select-none",
-
-				spanVertical ? 'h-full' : clsx(
-					box.options.dragAreaSize === 'small' 	&& 'h-2',
-					box.options.dragAreaSize === 'medium'	&& 'h-4',
-					box.options.dragAreaSize === 'big'		&& 'h-6'
-				),
-
-				spanHorizontal ? 'w-full' : clsx(
-					box.options.dragAreaSize === 'small' 	&& 'w-2',
-					box.options.dragAreaSize === 'medium'	&& 'w-4',
-					box.options.dragAreaSize === 'big'		&& 'w-6'
-				),
-
-				enabledSides.top 		&& clsx('bottom-full', box.options.insetAreas && 'translate-y-1/2'),
-				enabledSides.right 	&& clsx('left-full', box.options.insetAreas && '-translate-x-1/2'),
-				enabledSides.bottom	&& clsx('top-full', box.options.insetAreas && '-translate-y-1/2'),
-				enabledSides.left		&& clsx('right-full', box.options.insetAreas && 'translate-x-1/2'),
-
-				matchBool({
-					"cursor-nw-resize": enabledSides.top && enabledSides.left,
-					"cursor-ne-resize": enabledSides.top && enabledSides.right,
-					"cursor-se-resize": enabledSides.bottom && enabledSides.right,
-					"cursor-sw-resize": enabledSides.bottom && enabledSides.left,
-
-					"cursor-n-resize": enabledSides.top,
-					"cursor-e-resize": enabledSides.right,
-					"cursor-s-resize": enabledSides.bottom,
-					"cursor-w-resize": enabledSides.left
-				}),
-			)}
-		/>
-	);
-}