@hrnec06/react_utils 1.4.2 → 1.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hrnec06/react_utils",
-  "version": "1.4.2",
+  "version": "1.5.0",
   "description": "A debugger component for react.",
   "exports": {
     ".": "./src/index.ts"
@@ -26,12 +26,13 @@
     "typescript": "^5.8.3"
   },
   "dependencies": {
-    "@hrnec06/util": "^1.4.21",
+    "@hrnec06/util": "^1.6.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.525.0",
     "react": "^19.1.0",
     "react-dom": "^19.2.3",
-    "uuid": "^13.0.0"
+    "uuid": "^13.0.0",
+    "zod": "^4.2.1"
   },
   "scripts": {
     "dev": "tsup src/index.tsx --format cjs,esm --dts --watch"

package/src/components/Debugger/Debugger.tsx

@@ -19,7 +19,7 @@ interface DebugProps {
 	autoHeight?: boolean,
 	openRoot?: boolean
 }
-export default function Debug({
+function Debug({
 	value,
 	openPaths,
 	excludePaths,
@@ -312,4 +312,7 @@ export default function Debug({
 		),
 		document.body
 	);
-}
+}
+
+export * as terminal from "./DebuggerTerminal";
+export { Debug };

package/src/components/Debugger/DebuggerSymbols.tsx

@@ -1,5 +1,5 @@
 import clsx from "clsx";
-import { ChevronDown } from "lucide-react";
+import { ChevronDown, Terminal } from "lucide-react";
 
 export function Char_Colon() {
 	return (
@@ -60,4 +60,9 @@ export function Chevron_Toggle({
 			}
 		</button>
 	);
+}
+
+export function Terminal_Icon()
+{
+	return ( <Terminal /> );
 }

package/src/components/Debugger/DebuggerTerminal.tsx

@@ -0,0 +1,336 @@
+import React, { createContext, useContext, useEffect, useMemo, useState } from "react";
+import { assert, Optional, ReactUtils } from "@hrnec06/util";
+import useUpdateEffect from "../../hooks/useUpdateEffect";
+import useNamespacedId from "../../hooks/useNamespacedId";
+import z from "zod";
+
+const TERMINAL_NAMESPACE = "terminal";
+
+enum LogRole {
+	Input,
+	History
+}
+
+enum LogType {
+	Info,
+	Warning,
+	Error,
+}
+
+interface LogItem {
+	value: unknown,
+	role: LogRole,
+	type: LogType
+}
+
+interface TerminalContext {
+	terminal: Terminal,
+	parent?: TerminalContext
+}
+const TerminalContext = createContext<Optional<TerminalContext>>(undefined);
+
+type OnInputCallback = (command: string, args: string[], terminal: Terminal) => boolean;
+
+class Terminal
+{
+	public readonly id: string;
+	public readonly name: string;
+	private readonly onInput?: OnInputCallback;
+	
+	private history: ReactUtils.State<LogItem[]>;
+	private inputHistory: ReactUtils.State<string[]>;
+
+	public parentTerminal?: Terminal;
+
+	constructor(
+		id: string,
+		name: string,
+		history: ReactUtils.State<LogItem[]>,
+		inputHistory: ReactUtils.State<string[]>,
+		onInput?: OnInputCallback,
+	)
+	{
+		this.id = id;
+		this.name = name;
+		this.history = history;
+		this.inputHistory = inputHistory;
+		this.onInput = onInput;
+	}
+
+	protected addLog(value: unknown, type: LogType, role: LogRole)
+	{
+		const newEntry = {
+			value: value,
+			role: role,
+			type: type
+		};
+
+		this.history[1](prev => [...prev, newEntry]);
+	}
+
+	public _mount(history: ReactUtils.State<LogItem[]>)
+	{
+		this.history = history;
+	}
+
+	public getLsKey(): string
+	{
+		return "terminal." + this.id;
+	}
+
+	public clear(): Terminal
+	{
+		this.history[1]([]);
+
+		return this;
+	}
+
+	public log(value: unknown, type: LogType = LogType.Info): Terminal
+	{
+		this.addLog(value, type, LogRole.History);
+
+		return this;
+	}
+
+	public getLog(): LogItem[]
+	{
+		return this.history[0];
+	}
+
+	public getInputHistory(): string[]
+	{
+		return this.inputHistory[0];
+	}
+
+	public hasInput(): boolean
+	{
+		return this.onInput !== undefined;
+	}
+
+	public input(value: string): boolean
+	{
+		if (!this.onInput)
+			return false;
+
+		this.inputHistory[1](prev => [
+			...prev.filter((item) => item !== value),
+			value
+		]);
+
+		this.addLog(value, LogType.Info, LogRole.Input);
+
+		try
+		{
+			const args = value.split(" ");
+			const command = args.shift();
+			assert(typeof command === "string");
+	
+			this.handleCommand(command, args);
+
+			return true;
+		}
+		catch (error)
+		{
+			if (typeof error === "string")
+			{
+				this.log(error, LogType.Error);
+			}
+			else if (error instanceof Error)
+			{
+				this.log(error.message, LogType.Error);
+			}
+			else
+			{
+				this.log("Unknown error.", LogType.Error);
+			}
+
+			return false;
+		}
+	}
+
+	private handleCommand(command: string, args: string[])
+	{
+		switch (command)
+		{
+			case 'clear':
+			{
+				this.clear();
+				this.log("Console was cleared!");
+
+				return true;
+			}
+
+			case 'json':
+			{
+				const rest = args.join('');
+
+				try
+				{
+					const parsed = JSON.parse(rest);
+
+					this.log(parsed);
+				}
+				catch (error)
+				{
+					assert(error instanceof SyntaxError);
+
+					throw `Invalid JSON: ${error.message}`;
+				}
+
+				return true;
+			}
+
+			default:
+			{
+				if (this.onInput && this.onInput(command, args, this))
+				{
+					return true;
+				}
+
+				throw `Invalid command: ${command}`;
+			}
+		}
+	}
+}
+
+interface TerminalContextProviderProps extends React.PropsWithChildren {
+	terminal: Terminal
+}
+function TerminalContextProvider({
+	terminal,
+	children
+}: TerminalContextProviderProps)
+{
+	const parent = findTerminalContext();
+
+	return (
+		<TerminalContext.Provider
+			value={{
+				terminal: terminal,
+				parent: parent
+			}}
+		>
+			{children}
+		</TerminalContext.Provider>
+	)
+}
+
+/**
+ * Returns the default history for a terminal
+ */
+function getDefaultHistory(terminal: Terminal)
+{
+	try
+	{
+		const savedValue = localStorage.getItem(terminal.getLsKey());
+
+		const savedValueJSON = JSON.parse(savedValue ?? "[]");
+
+		const schema = z.array(z.object({
+			value: z.any(),
+			role: z.enum(LogRole),
+			type: z.enum(LogType)
+		}));
+
+		const parsed = schema.parse(savedValueJSON);
+
+		return parsed;
+	}
+	catch (error)
+	{
+		localStorage.removeItem(terminal.getLsKey());
+		console.error("Terminal data parse failed: ", error);
+
+		return [];
+	}
+}
+
+/**
+ * Recursively browses the contexts to find a matching terminal
+ */
+function matchTerminal(name: string, ctx: TerminalContext): Optional<TerminalContext>
+{
+	if (name === ctx.terminal.name)
+		return ctx;
+
+	if (ctx.parent)
+		return matchTerminal(name, ctx.parent);
+		
+	return undefined;
+}
+
+/**
+ * Attempts to find a TerminalContext matching the query
+ */
+function findTerminalContext(name?: string): Optional<TerminalContext>
+{
+	const ctx = useContext(TerminalContext);
+
+	if (ctx && name)
+	{
+		return matchTerminal(name, ctx);
+	}
+
+	return ctx;
+}
+
+/**
+ * Get terminal context
+ */
+function useTerminalContext(name: string, shouldThrow: true): Terminal;
+function useTerminalContext(name?: string, shouldThrow?: false): Optional<Terminal>
+function useTerminalContext(name?: string, shouldThrow: boolean = false): Optional<Terminal>
+{
+	const ctx = findTerminalContext(name);
+
+	if (shouldThrow === true && ctx === undefined)
+	{
+		if (name)
+			throw new Error(`Terminal with the name "${name}" was not found.`);
+		else
+			throw new Error(`useTerminalContext may be used only within TerminalContext.Provider!`);
+	}
+
+	return ctx?.terminal;
+}
+
+/**
+ * Initializes a terminal
+ */
+function useTerminal(
+	name: string,
+	onInput?: OnInputCallback,
+): Terminal
+{
+	const id = useNamespacedId(TERMINAL_NAMESPACE);
+
+	const history = useState<LogItem[]>([]);
+	const inputHistory = useState<string[]>([]);
+
+	const terminal = useMemo(() => {
+		return new Terminal(id, name, history, inputHistory, onInput);
+	}, [name, history, onInput]);
+
+	useEffect(() => {
+		const def = getDefaultHistory(terminal);
+
+		history[1](def);
+	}, []);
+
+	useUpdateEffect(() => {
+		localStorage.setItem(terminal.getLsKey(), JSON.stringify(history[0]));
+	}, [history]);
+
+	return terminal;
+}
+
+export {
+	LogRole,
+	LogType,
+	Terminal,
+	TerminalContextProvider,
+	useTerminal,
+	useTerminalContext,
+	
+	type LogItem,
+};

package/src/components/Debugger/parser/DebugParser.tsx

@@ -1,5 +1,7 @@
 import useDebugger from "../DebuggerContext";
 import { matchPath } from "../DebuggerLogic";
+import { Terminal } from "../DebuggerTerminal";
+import DebugTerminal from "./DebugTerminal";
 import ValueArray from "./ValueArray";
 import ValueBoolean from "./ValueBoolean";
 import ValueFunction from "./ValueFunction";
@@ -35,6 +37,9 @@ export default function ParseValue({
 
 			const shouldBeExpanded = (isRootObject && debug.options.openRoot) || (matchPath(path, debug.paths.open) && !matchPath(path, debug.paths.exclude));
 
+			if (value instanceof Terminal)
+				return <DebugTerminal terminal={value} path={path} defaultExpanded={shouldBeExpanded} />
+
 			if (Array.isArray(value)) {
 				return <ValueArray value={value} path={path} defaultExpanded={shouldBeExpanded} />
 			}

package/src/components/Debugger/parser/DebugParserSimple.tsx

@@ -1,3 +1,5 @@
+import { TerminalIcon } from "lucide-react";
+import { Terminal } from "../DebuggerTerminal";
 import ValueBoolean from "./ValueBoolean";
 import ValueFunction from "./ValueFunction";
 import ValueKeyword from "./ValueKeyword";
@@ -42,6 +44,16 @@ export default function ParseValueSimple({
 			if (value === null)
 				return <ValueKeyword value="null" />
 
+			if (value instanceof Terminal)
+				return (
+					<div className="inline-flex gap-1 align-bottom text-white">
+						<div className="size-5">
+							<TerminalIcon />
+						</div>
+						<span>{value.name}</span>
+					</div>)
+				;
+
 			const className = Object.getPrototypeOf(value) !== Object.prototype ? value.constructor.name : null;
 
 			if (className === null || className.length > MAX_LENGTH)

package/src/components/Debugger/parser/DebugTerminal.tsx

@@ -0,0 +1,341 @@
+import { createContext, useContext, useLayoutEffect, useRef, useState } from "react";
+import { LogItem, LogRole, LogType, Terminal } from "../DebuggerTerminal"
+import clsx from "clsx";
+import { KeyboardButton, matchBool, matchKeyEvent, matchMouseEvent, MouseButton, Optional } from "@hrnec06/util";
+import ParseValue from "./DebugParser";
+import { ChevronRight, CircleAlert, SendIcon, TerminalIcon, Trash, TriangleAlert } from "lucide-react";
+import ResizeableBox from "../../ResizeableBox/ResizeableBox";
+import { Chevron_Toggle } from "../DebuggerSymbols";
+
+interface LocalTerminalContext {
+	terminal: Terminal,
+	path: string[]
+}
+const LocalTerminalContext = createContext<Optional<LocalTerminalContext>>(undefined);
+
+function useLocalTerminalContext()
+{
+	const ctx = useContext(LocalTerminalContext);
+
+	if (!ctx)
+		throw new Error("useLocalTerminalContext may be used only within LocalTerminalContext.Provider!");
+
+	return ctx;
+}
+
+interface DebugTerminalProps {
+	terminal: Terminal,
+	path: string[],
+	defaultExpanded?: boolean
+}
+export default function DebugTerminal({ terminal, path, defaultExpanded }: DebugTerminalProps)
+{
+	const [showing, setShowing] = useState(!!defaultExpanded);
+
+	const handleToggle = (value: boolean) => {
+		setShowing(value);
+	}
+
+	return (
+		<LocalTerminalContext.Provider
+			value={{
+				terminal: terminal,
+				path: path
+			}}
+		>
+			<span className="text-white inline-flex items-center align-bottom">
+				<div className="mr-1">
+					<TerminalIcon className="size-5" />
+				</div>
+
+				<span>
+					{terminal.name}
+				</span>
+
+				<Chevron_Toggle
+					expanded={showing}
+					onToggle={handleToggle}
+				/>
+			</span>
+
+			<TerminalMain show={showing} />
+		</LocalTerminalContext.Provider>
+	)
+}
+
+interface TerminalMainProps {
+	show: boolean
+}
+function TerminalMain({ show }: TerminalMainProps)
+{
+	const [terminalHeight, setTerminalHeight] = useState(300);
+
+	const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
+		e.stopPropagation();
+	}
+
+	if (!show)
+		return undefined;
+
+	return (
+		<div
+			className="block"
+			style={{
+				height: terminalHeight
+			}}
+		>
+			<ResizeableBox
+				$allowedSides={["bottom"]}
+				$onResize={(size) => {
+					setTerminalHeight(size[1]);
+				}}
+				$size={[0, terminalHeight]}
+			>
+				<div
+					className={clsx(
+						"flex flex-col h-full",
+						"border-b border-dashed border-b-zinc-700 pb-3"
+					)}
+
+					onMouseDown={handleMouseDown}
+				>
+					<TerminalLog />
+
+					<TerminalInput />
+				</div>
+			</ResizeableBox>
+		</div>
+	);
+}
+
+function TerminalLog()
+{
+	const { terminal } = useLocalTerminalContext();
+
+	const divRef = useRef<HTMLDivElement>(null);
+
+	useLayoutEffect(() => {
+		if (!divRef.current) return;
+
+		divRef.current.scrollTop = divRef.current.scrollHeight;
+	}, [divRef, terminal.getLog()]);
+
+	const handleWheel = (e: React.WheelEvent<HTMLDivElement>) => {
+		e.stopPropagation();
+	}
+
+	return (
+		<div
+			className={clsx(
+				"grid flex-1 overflow-auto relative",
+				"bg-zinc-900 mt-2 p-2 rounded-md"
+			)}
+
+			onWheel={handleWheel}
+		>
+			{!!terminal.getLog().length && (<TerminalClearButton />)}
+
+			<div
+				ref={divRef}
+
+				className="flex flex-col max-h-full overflow-y-auto mt-auto relative"
+			>
+				{terminal.getLog().map((item, ix) => (
+					<TerminalItem
+						key={ix}
+						item={item}
+						index={ix}
+					/>
+				))}
+			</div>
+		</div>
+	);
+}
+
+interface TerminalItemProps {
+	item: LogItem,
+	index: number
+}
+function TerminalItem({ item, index }: TerminalItemProps)
+{
+	const { path } = useLocalTerminalContext();
+
+	return (
+		<div
+			className={clsx(
+				"grid grid-cols-[18px_24px_1fr]",
+				matchBool({
+					"text-red-400": item.type === LogType.Error,
+					"text-yellow-400": item.type === LogType.Warning,
+				}) ?? "text-white"
+			)}
+		>
+			<div />
+
+			<div className="flex pt-0.5">
+				{(() => {
+					switch (true)
+					{
+						case item.role === LogRole.Input: 	return (<ChevronRight className="size-4" />);
+						case item.type === LogType.Error: 	return (<TriangleAlert className="size-4" />);
+						case item.type === LogType.Warning: return (<CircleAlert className="size-4" />)
+					}
+					return null;
+				})()}
+			</div>
+			<div>
+				{
+					typeof item.value === "string"
+						? (
+							<span
+								className={clsx(
+								
+								)}
+							>
+								{item.value}
+							</span>
+						)
+						: (
+							<ParseValue value={item.value} path={[...path, `${index}`]} />
+						)
+				}
+			</div>
+		</div>
+	);
+}
+
+function TerminalClearButton()
+{
+	const { terminal } = useLocalTerminalContext();
+
+	const handleClick = () => {
+		terminal.clear();
+	}
+
+	return (
+		<button
+			onClick={handleClick}
+			className={clsx(
+				"absolute right-8 top-2",
+				"text-zinc-500 hover:text-zinc-200 cursor-pointer"
+			)}
+		>
+			<Trash className="size-5" />
+		</button>
+	)
+}
+
+function TerminalInput()
+{
+	const { terminal } = useLocalTerminalContext();
+
+	const [input, setInput] = useState("");
+	const [historyOffset, setHistoryOffset] = useState(0);
+
+	const inputRef = useRef<HTMLInputElement>(null);
+
+	if (!terminal.hasInput())
+		return undefined;
+
+	const send = () => {
+		const value = input.trim();
+
+		if (!value)
+			return;
+
+		setInput("");
+		setHistoryOffset(0);
+
+		const result = terminal.input(value);
+
+		console.log(result);
+	}
+
+	const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+		setInput(e.target.value);
+	}
+
+	const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+		e.stopPropagation();
+
+		if (matchKeyEvent(e.nativeEvent, KeyboardButton.Enter))
+		{
+			send();
+		}
+		else if (matchKeyEvent(e.nativeEvent, KeyboardButton.ArrowUp))
+		{
+			e.preventDefault();
+
+			const history = terminal.getInputHistory();
+			const item = history[history.length - 1 - historyOffset];
+
+			if (item !== undefined)
+			{
+				setHistoryOffset(prev => prev + 1);
+				setInput(item);
+			}
+		}
+		else if (matchKeyEvent(e.nativeEvent, KeyboardButton.ArrowDown))
+		{
+			e.preventDefault();
+
+			const history = terminal.getInputHistory();
+			const item = history[history.length + 1 - historyOffset];
+
+			if (item !== undefined)
+			{
+				setHistoryOffset(prev => prev - 1);
+				setInput(item);
+			}
+			else
+			{
+				setInput("");
+				setHistoryOffset(0);
+			}
+		}
+	}
+
+	const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+		if (!matchMouseEvent(e.nativeEvent, MouseButton.Left)) return;
+
+		e.stopPropagation();
+
+		send();
+	}
+
+	return (
+		<div
+			className={clsx(
+				"flex shrink-0 overflow-hidden",
+				"bg-zinc-700 rounded-md text-white mt-2",
+				"focus-within:ring-2 ring-sky-500 transition-all"
+			)}
+		>
+			<div className="flex items-center justify-center px-2">
+				<TerminalIcon className="size-5 text-zinc-500" />
+			</div>
+
+			<input
+				ref={inputRef}
+
+				type="text"
+				className={clsx(
+					"flex-1",
+					"outline-none"
+				)}
+
+				onChange={handleChange}
+				onKeyDown={handleKeyDown}
+
+				value={input}
+			/>
+
+			<button
+				className="p-2 cursor-pointer hover:bg-zinc-600 transition-colors rounded-md"
+				onClick={handleClick}
+			>
+				<SendIcon className="size-5" />
+			</button>
+		</div>
+	)
+}

package/src/components/Dialog/Dialog.tsx

@@ -0,0 +1,50 @@
+import { KeyboardButton } from "@hrnec06/util";
+import useKeyListener from "../../hooks/useKeyListener";
+import useTransition from "../../hooks/useTransition";
+import DialogBackdrop from "./DialogBackdrop";
+import DialogCloseButton from "./DialogCloseButton";
+import { DialogContext } from "./DialogContext";
+import DialogPanel from "./DialogPanel";
+import { useEffect } from "react";
+
+interface DialogProps extends React.PropsWithChildren {
+	open?: boolean,
+	duration?: number,
+	onClose?: () => void
+}
+function Dialog({
+	open = false,
+	duration = 300,
+	onClose,
+	children,
+}: DialogProps)
+{
+	const pressingEsc = useKeyListener(KeyboardButton.Escape);
+
+	useEffect(() => {
+		if (!open || !pressingEsc) return;
+
+		onClose?.();
+	}, [pressingEsc]);
+
+	return (
+		<DialogContext.Provider
+			value={{
+				open: open,
+				onClose: onClose,
+
+				options: {
+					animationDuration: duration
+				},
+			}}
+		>
+			{children}
+		</DialogContext.Provider>
+	);
+}
+
+Dialog.Backdrop = DialogBackdrop;
+Dialog.CloseButton = DialogCloseButton;
+Dialog.Panel = DialogPanel;
+
+export default Dialog;

package/src/components/Dialog/DialogBackdrop.tsx

@@ -0,0 +1,45 @@
+import clsx from "clsx";
+import useDialog from "./DialogContext";
+import useTransition, { transitionDataAttributes } from "../../hooks/useTransition";
+import { useRef } from "react";
+
+interface DialogBackdropProps extends Omit<React.HTMLProps<HTMLDivElement>, 'children'>
+{
+	$transition?: boolean	
+}
+export default function DialogBackdrop({
+	$transition = false,
+
+	...props
+}: DialogBackdropProps)
+{
+	const dialog = useDialog();
+
+	const divRef = useRef<HTMLDivElement>(null);
+
+	const [visible, transitionData] = useTransition($transition, divRef.current, dialog.open);
+	
+	if (!visible)
+		return undefined;
+
+	const handleClick = () => {
+		console.log("close");
+
+		dialog.onClose?.();
+	}
+
+	return (
+		<div
+			{...props}
+			{...transitionDataAttributes(transitionData)}
+
+			ref={divRef}
+			
+			onClick={handleClick}
+
+			className={clsx(
+				props.className,
+			)}
+		/>
+	)
+}

package/src/components/Dialog/DialogCloseButton.tsx

@@ -0,0 +1,25 @@
+import useDialog from "./DialogContext";
+
+interface DialogCloseButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
+
+}
+export default function DialogCloseButton({
+	...props
+}: DialogCloseButtonProps)
+{
+	const dialog = useDialog();
+
+	const handleClick = () => {
+		dialog.onClose?.();
+	}
+
+	return (
+		<button
+			{...props}
+
+			onClick={handleClick}
+		>
+			{props.children}
+		</button>
+	)
+}

package/src/components/Dialog/DialogContext.ts

@@ -0,0 +1,21 @@
+import { Optional } from "@hrnec06/util";
+import { createContext, useContext } from "react";
+
+interface DialogContext {
+	open: boolean,
+	options: {
+		animationDuration: number,
+	},
+	onClose?: () => void
+}
+export const DialogContext = createContext<Optional<DialogContext>>(undefined);
+
+export default function useDialog()
+{
+	const ctx = useContext(DialogContext);
+
+	if (!ctx)
+		throw new Error("useDialog may be used only within DialogContext.Provider!");
+
+	return ctx;
+}

package/src/components/Dialog/DialogPanel.tsx

@@ -0,0 +1,35 @@
+import clsx from "clsx";
+import useDialog from "./DialogContext";
+import useTransition, { transitionDataAttributes } from "../../hooks/useTransition";
+import { useRef } from "react";
+
+interface DialogPanelProps extends React.HTMLProps<HTMLDivElement> {
+	$transition?: boolean
+}
+export default function DialogPanel({
+	$transition = false,
+	...props
+}: DialogPanelProps)
+{
+	const dialog = useDialog();
+
+	const divRef = useRef<HTMLDivElement>(null);
+
+	const [visible, transitionData] = useTransition($transition, divRef.current, dialog.open);
+
+	if (!visible)
+		return undefined;
+
+	return (
+		<div
+			{...props}
+			{...transitionDataAttributes(transitionData)}
+			
+			ref={divRef}
+
+			className={props.className}
+		>
+			{props.children}
+		</div>
+	)
+}

package/src/hooks/useDisposables.ts

@@ -0,0 +1,13 @@
+import { useEffect, useState } from 'react'
+import { disposables } from '@hrnec06/util';
+
+/**
+ * @credit https://github.com/tailwindlabs/headlessui/blob/main/packages/%40headlessui-react/src/hooks/use-disposables.ts
+ */
+export default function useDisposables() {
+  const [_disposables] = useState(disposables);
+
+  useEffect(() => () => _disposables.dispose(), [_disposables]);
+
+  return _disposables;
+}

package/src/hooks/useFlags.ts

@@ -0,0 +1,32 @@
+import { Flags, ReactUtils } from "@hrnec06/util";
+import { useCallback, useMemo, useState } from "react";
+
+export class FlagsManager extends Flags
+{
+  constructor(
+    private setState: ReactUtils.SetState<number>,
+    initialFlags?: number,
+  )
+  {
+    super(initialFlags);
+  }
+
+  public setFlags(flags: number): Flags {
+    this.flags = flags;
+    
+    this.setState(flags);
+
+    return this;
+  }
+}
+
+function useFlags(initialFlags: number = 0): FlagsManager
+{
+  const [_, setFlags] = useState(initialFlags);
+
+  const manager = useMemo(() => new FlagsManager(setFlags), []);
+
+  return manager;
+}
+
+export default useFlags;

package/src/hooks/useNamespacedId.ts

@@ -0,0 +1,19 @@
+import { useState } from "react";
+
+const namespaces: Record<string, number> = {};
+
+function getId(namespace: string): string
+{
+	const nextID = (namespaces[namespace] ?? 0) + 1;
+
+	namespaces[namespace] = nextID;
+
+	return `nid_${namespace}_${nextID}`;
+}
+
+export default function useNamespacedId(namespace: string): string
+{
+	const [id] = useState(() => getId(namespace));
+
+	return id;
+}

package/src/hooks/useTransition.ts

@@ -0,0 +1,261 @@
+import { disposables, mapRecord, Nullable } from "@hrnec06/util";
+import { useLayoutEffect, useRef, useState } from "react";
+import useFlags from "./useFlags";
+import useDisposables from "./useDisposables";
+
+enum TransitionState {
+  None = 0,
+
+  Closed = 1 << 0,
+
+  Enter = 1 << 1,
+  Leave = 1 << 2,
+}
+
+export interface TransitionStates {
+	enter?: boolean,
+	leave?: boolean,
+	closed?: boolean,
+	transition?: boolean
+}
+
+export function transitionDataAttributes(data: TransitionStates)
+{
+	return mapRecord(data, (key, value) => [
+		`data-${key}`,
+		value === true ? "true" : undefined
+	]);
+}
+
+export default function useTransition(
+	enabled: boolean,
+	element: Nullable<HTMLElement>,
+	show: boolean
+): [visible: boolean, data: TransitionStates]
+{
+	const [visible, setVisible] = useState(show);
+
+	const flags = useFlags(
+		(enabled && visible) ? TransitionState.Enter | TransitionState.Closed : TransitionState.None
+	);
+
+	const inFlight = useRef(false);
+	const cancelledRef = useRef(false);
+
+	const d = useDisposables();
+
+	useLayoutEffect(() => {
+		if (!enabled) return;
+
+		if (show)
+		{
+			setVisible(true);
+		}
+
+		if (!element)
+		{
+			if (show)
+			{
+				flags.addFlag(TransitionState.Enter | TransitionState.Closed);
+			}
+
+			return;
+		}
+
+		return transition(
+			element,
+			{
+				inFlight: inFlight,
+				prepare: () => {
+					if (cancelledRef.current)
+					{
+						cancelledRef.current = false;
+					}
+					else
+					{
+						cancelledRef.current = inFlight.current;
+					}
+
+					inFlight.current = true;
+
+					if (cancelledRef.current) return;
+
+					if (show)
+					{
+						flags.addFlag(TransitionState.Enter | TransitionState.Closed);
+						flags.removeFlag(TransitionState.Leave);
+					}
+					else
+					{
+						flags.addFlag(TransitionState.Leave);
+						flags.removeFlag(TransitionState.Enter);
+					}
+				},
+				run: () => {
+					if (cancelledRef.current)
+					{
+						if (show)
+						{
+							flags.addFlag(TransitionState.Leave);
+							flags.removeFlag(TransitionState.Enter | TransitionState.Closed);
+						}
+						else
+						{
+							flags.addFlag(TransitionState.Enter | TransitionState.Closed);
+							flags.removeFlag(TransitionState.Leave);
+						}
+					}
+					else
+					{
+						if (show)
+						{
+							flags.removeFlag(TransitionState.Closed);
+						}
+						else
+						{
+							flags.addFlag(TransitionState.Closed);
+						}
+					}
+				},
+				done: () => {
+					if (cancelledRef.current)
+					{
+						if (hasPendingTransitions(element))
+						{
+							return;
+						}
+					}
+
+					inFlight.current = false;
+
+					flags.removeFlag(TransitionState.Enter | TransitionState.Leave | TransitionState.Closed);
+
+					if (!show)
+					{
+						setVisible(false);
+					}
+				}
+			}
+		);
+	}, [enabled, show, element, d]);
+
+	if (!enabled)
+	{
+		return [
+			show,
+			{
+				closed: 		undefined,
+				enter: 		undefined,
+				leave: 		undefined,
+				transition: undefined
+			}
+		] as const;
+	}
+
+	return [
+		visible,
+		{
+			closed: 		flags.hasFlag(TransitionState.Closed),
+			enter: 		flags.hasFlag(TransitionState.Enter),
+			leave: 		flags.hasFlag(TransitionState.Leave),
+			transition: flags.hasFlag(TransitionState.Enter) || flags.hasFlag(TransitionState.Leave)
+		}
+	] as const;
+}
+
+function transition(
+	node: HTMLElement,
+	{
+		prepare,
+		run,
+		done,
+		inFlight
+	}: {
+		prepare: () => void,
+		run: () => void,
+		done: () => void,
+		inFlight: React.RefObject<boolean>
+	}
+)
+{
+	const d = disposables();
+
+	prepareTransition(node, {
+		prepare,
+		inFlight
+	});
+
+	d.nextFrame(() => {
+		run();
+
+		d.requestAnimationFrame(() => {
+			d.add(waitForTransition(node, done));
+		});
+	});
+
+	return d.dispose;
+}
+
+function waitForTransition(node: Nullable<HTMLElement>, done: () => void)
+{
+	const d = disposables();
+
+	if (!node) return d.dispose;
+
+	let cancelled = false;
+	d.add(() => {
+		cancelled = true;
+	});
+
+	const transitions = node.getAnimations?.().filter((animation) => animation instanceof CSSTransition) ?? [];
+
+	if (transitions.length === 0)
+	{
+		done();
+
+		return d.dispose;
+	}
+
+	Promise.allSettled(transitions.map((transition) => transition.finished))
+	.then(() => {
+   	if (!cancelled)
+		{
+      	done();
+    	}
+	});
+
+	return d.dispose;
+}
+
+function prepareTransition(
+	node: HTMLElement,
+	{ inFlight, prepare }: { inFlight?: React.RefObject<boolean>, prepare: () => void }
+)
+{
+	if (inFlight?.current)
+	{
+		prepare();
+		return;
+	}
+
+	const previous = node.style.transition;
+
+	node.style.transition = "none";
+
+	prepare();
+
+	// Trigger a reflow, flushing the CSS changes
+	node.offsetHeight;
+
+	// Reset the transition to what it was before
+	node.style.transition = previous;
+}
+
+function hasPendingTransitions(node: HTMLElement): boolean
+{
+  const animations = node.getAnimations?.() ?? []
+
+  return animations.some((animation) => {
+    return animation instanceof CSSTransition && animation.playState !== 'finished'
+  })
+}

package/src/index.ts

@@ -6,17 +6,20 @@ import useWindowSize from "./hooks/useWindowSize";
 import useEfficientRef from "./hooks/useEfficientRef";
 import useEfficientState from "./hooks/useEfficientState";
 import useUUID from "./hooks/useUUID";
+import useFlags from "./hooks/useFlags";
 
 import useSignal, { Signal } from "./hooks/useSignal";
-
 import useLazySignal, { LazySignal } from "./hooks/useLazySignal";
 
-import Debugger from './components/Debugger/Debugger';
+import * as Debugger from './components/Debugger/Debugger';
+
 import ResizeableBox from "./components/ResizeableBox/ResizeableBox";
+import Dialog from "./components/Dialog/Dialog";
 
 import * as util from './lib/utils';
 
 export {
+	// Hooks
 	useKeyListener,
 	useListener,
 	useUpdatedRef,
@@ -25,15 +28,19 @@ export {
 	useEfficientRef,
 	useEfficientState,
 	useUUID,
+	useFlags,
 
+	// Signals
 	useSignal,
 	Signal,
-
 	useLazySignal,
 	LazySignal,
 	
+	// Components
 	Debugger,
 	ResizeableBox,
+	Dialog,
 
-	util
+	// Utilities
+	util,
 };