regular-layout 0.2.2 → 0.4.0

package/src/model/presize_queue.ts

@@ -0,0 +1,79 @@
+// ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
+// ░░░░░░░░▄▀░█▀▄░█▀▀░█▀▀░█░█░█░░░█▀█░█▀▄░░░░░█░░░█▀█░█░█░█▀█░█░█░▀█▀░▀▄░░░░░░░░
+// ░░░░░░░▀▄░░█▀▄░█▀▀░█░█░█░█░█░░░█▀█░█▀▄░▀▀▀░█░░░█▀█░░█░░█░█░█░█░░█░░░▄▀░░░░░░░
+// ░░░░░░░░░▀░▀░▀░▀▀▀░▀▀▀░▀▀▀░▀▀▀░▀░▀░▀░▀░░░░░▀▀▀░▀░▀░░▀░░▀▀▀░▀▀▀░░▀░░▀░░░░░░░░░
+// ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃  *  Copyright (c) 2026, the Regular Layout Authors. This file is part  *  ┃
+// ┃  *  of the Regular Layout library, distributed under the terms of the  *  ┃
+// ┃  *  [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). *  ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+import type { Layout, PresizeDetail } from "../core/types.ts";
+import { calculate_presize_paths } from "../layout/calculate_presize_paths.ts";
+
+/**
+ * Manages cancelable pre-resize gating for layout updates.
+ *
+ * Before each layout change, a cancelable `resize-before` event is dispatched
+ * on the target. If the event is cancelled via `preventDefault()`, the update
+ * is suspended until {@link resume} is called. Concurrent updates are queued
+ * and processed sequentially.
+ */
+export class PresizeQueue {
+	#resizing = false;
+	#queued: { layout: Layout; fn: () => void } | null = null;
+	#pending: (() => void) | null = null;
+
+	constructor(
+		private _target: EventTarget,
+		private _eventName: string,
+	) {}
+
+	async run(layout: Layout, fn: () => void): Promise<void> {
+		if (this.#resizing) {
+			this.#queued = { layout, fn };
+			return;
+		}
+
+		this.#resizing = true;
+		try {
+			await this.#dispatchAndMaybeWait(layout, fn);
+			while (this.#queued) {
+				const { layout: nextLayout, fn: nextFn } = this.#queued;
+				this.#queued = null;
+				await this.#dispatchAndMaybeWait(nextLayout, nextFn);
+			}
+		} finally {
+			this.#resizing = false;
+		}
+	}
+
+	resume(): void {
+		if (this.#pending) {
+			const resolve = this.#pending;
+			this.#pending = null;
+			resolve();
+		}
+	}
+
+	async #dispatchAndMaybeWait(layout: Layout, fn: () => void): Promise<void> {
+		const detail: PresizeDetail = {
+			calculatePresizePaths: () => calculate_presize_paths(layout),
+		};
+
+		const event = new CustomEvent(this._eventName, {
+			cancelable: true,
+			detail,
+		});
+
+		const proceed = this._target.dispatchEvent(event);
+		if (!proceed) {
+			await new Promise<void>((resolve) => {
+				this.#pending = resolve;
+			});
+		}
+
+		fn();
+	}
+}

package/src/regular-layout-frame.ts

@@ -9,7 +9,7 @@
 // ┃  *  [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). *  ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-import type { LayoutPath } from "./layout/types.ts";
+import type { LayoutPath } from "./core/types.ts";
 import type { RegularLayoutEvent } from "./extensions.ts";
 import type { RegularLayout } from "./regular-layout.ts";
 import type { RegularLayoutTab } from "./regular-layout-tab.ts";
@@ -26,7 +26,7 @@ const CSS = `
 
 const HTML_TEMPLATE = `
 	<div part="titlebar"></div>
-	<slot part="container"></slot>
+	<div part="container"><slot></slot></div>
 `;
 
 type DragState = { moved?: boolean; path: LayoutPath };
@@ -162,7 +162,7 @@ export class RegularLayoutFrame extends HTMLElement {
 		let new_tab_panel = this._layout.getPanel(slot, new_panel);
 		if (!new_tab_panel) {
 			new_tab_panel = {
-				type: "child-panel",
+				type: "tab-layout",
 				tabs: [slot],
 				selected: 0,
 			};

package/src/regular-layout-tab.ts

@@ -9,7 +9,7 @@
 // ┃  *  [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). *  ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-import type { TabLayout } from "./layout/types.ts";
+import type { TabLayout } from "./core/types.ts";
 import type { RegularLayout } from "./regular-layout.ts";
 
 /**

package/src/regular-layout.ts

@@ -16,7 +16,7 @@
  * @packageDocumentation
  */
 
-import { EMPTY_PANEL } from "./layout/types.ts";
+import { EMPTY_PANEL } from "./core/types.ts";
 import { create_css_grid_layout } from "./layout/generate_grid.ts";
 import type {
 	LayoutPath,
@@ -25,19 +25,28 @@ import type {
 	TabLayout,
 	OverlayMode,
 	Orientation,
-} from "./layout/types.ts";
+	LayoutPathTraversal,
+	ViewWindow,
+} from "./core/types.ts";
+
 import { calculate_intersection } from "./layout/calculate_intersect.ts";
 import { remove_child } from "./layout/remove_child.ts";
 import { insert_child } from "./layout/insert_child.ts";
 import { redistribute_panel_sizes } from "./layout/redistribute_panel_sizes.ts";
-import { updateOverlaySheet } from "./layout/generate_overlay.ts";
-import { calculate_edge } from "./layout/calculate_edge.ts";
+import { viewWindowToLocalRect } from "./layout/generate_overlay.ts";
 import { flatten } from "./layout/flatten.ts";
+import { calculate_path } from "./layout/calculate_path.ts";
+import { PresizeQueue } from "./model/presize_queue.ts";
+import {
+	OverlayController,
+	type OverlayHost,
+} from "./model/overlay_controller.ts";
+
 import {
 	DEFAULT_PHYSICS,
 	type PhysicsUpdate,
 	type Physics,
-} from "./layout/constants.ts";
+} from "./core/constants.ts";
 
 /**
  * An interface which models the fields of `PointerEvent` that
@@ -107,6 +116,8 @@ export class RegularLayout extends HTMLElement {
 	private _cursor_override: boolean;
 	private _dimensions?: { box: DOMRect; style: CSSStyleDeclaration };
 	private _physics: Physics;
+	private _presizeQueue: PresizeQueue;
+	private _overlayController: OverlayController;
 
 	constructor() {
 		super();
@@ -117,6 +128,9 @@ export class RegularLayout extends HTMLElement {
 		this._stylesheet = new CSSStyleSheet();
 		this._cursor_stylesheet = new CSSStyleSheet();
 		this._cursor_override = false;
+		const event_name = `${this._physics.CUSTOM_EVENT_NAME_PREFIX}-before-resize`;
+		this._presizeQueue = new PresizeQueue(this, event_name);
+		this._overlayController = new OverlayController(this.create_overlay_host());
 		this._shadowRoot.adoptedStyleSheets = [
 			this._stylesheet,
 			this._cursor_stylesheet,
@@ -151,6 +165,16 @@ export class RegularLayout extends HTMLElement {
 		return calculate_intersection(col, row, this._panel);
 	};
 
+	/**
+	 * Calculates the index path for a panel with the given name.
+	 *
+	 * @param name - The name of the panel to find.
+	 * @returns The panel's index path if found, `null` otherwise.
+	 */
+	calculatePath = (name: string): number[] | null => {
+		return calculate_path(name, this._panel);
+	};
+
 	/**
 	 * Sets the visual overlay state during drag-and-drop operations.
 	 * Displays a preview of where a panel would be placed at the given coordinates.
@@ -165,54 +189,13 @@ export class RegularLayout extends HTMLElement {
 	 *     the target, "absolute" positions the panel absolutely. Defaults to
 	 *     "absolute".
 	 */
-	setOverlayState = (
+	setOverlayState = async (
 		event: PointerEventCoordinates,
-		{ slot }: LayoutPath,
-		className: string = this._physics.OVERLAY_CLASSNAME,
-		mode: OverlayMode = this._physics.OVERLAY_DEFAULT,
+		target: LayoutPath,
+		className?: string,
+		mode?: OverlayMode,
 	) => {
-		const panel = remove_child(this._panel, slot);
-		const query = `:scope > [${this._physics.CHILD_ATTRIBUTE_NAME}="${slot}"]`;
-		const drag_element = this.querySelector(query);
-		if (drag_element) {
-			drag_element.classList.add(className);
-		}
-
-		// TODO: Don't recalculate box (but this currently protects against resize).
-		const [col, row, box, style] = this.relativeCoordinates(event, true);
-		let drop_target = calculate_intersection(col, row, panel);
-		if (drop_target) {
-			drop_target = calculate_edge(
-				col,
-				row,
-				panel,
-				slot,
-				drop_target,
-				box,
-				this._physics,
-			);
-		}
-
-		if (mode === "grid" && drop_target) {
-			const path: [string, string] = [slot, drop_target?.slot];
-			const css = create_css_grid_layout(panel, path, this._physics);
-			this._stylesheet.replaceSync(css);
-		} else if (mode === "absolute") {
-			const grid_css = create_css_grid_layout(panel, undefined, this._physics);
-			const overlay_css = updateOverlaySheet(
-				slot,
-				box,
-				style,
-				drop_target,
-				this._physics,
-			);
-
-			this._stylesheet.replaceSync([grid_css, overlay_css].join("\n"));
-		}
-
-		const event_name = `${this._physics.CUSTOM_EVENT_NAME_PREFIX}-before-update`;
-		const custom_event = new CustomEvent<Layout>(event_name, { detail: panel });
-		this.dispatchEvent(custom_event);
+		await this._overlayController.set(event, target, className, mode);
 	};
 
 	/**
@@ -227,54 +210,12 @@ export class RegularLayout extends HTMLElement {
 	 * @param mode - Overlay rendering mode that was used, must match the mode
 	 *     passed to `setOverlayState`. Defaults to "absolute".
 	 */
-	clearOverlayState = (
+	clearOverlayState = async (
 		event: PointerEventCoordinates | null,
-		{ slot, layout }: LayoutPath,
-		className: string = this._physics.OVERLAY_CLASSNAME,
+		target: LayoutPath,
+		className?: string,
 	) => {
-		let panel = this._panel;
-		panel = remove_child(panel, slot);
-		const query = `:scope > [${this._physics.CHILD_ATTRIBUTE_NAME}="${slot}"]`;
-		const drag_element = this.querySelector(query);
-		if (drag_element) {
-			drag_element.classList.remove(className);
-		}
-
-		if (event === null) {
-			this.restore(layout);
-			return;
-		}
-
-		const [col, row, box] = this.relativeCoordinates(event, false);
-		let drop_target = calculate_intersection(col, row, panel);
-		if (drop_target) {
-			drop_target = calculate_edge(
-				col,
-				row,
-				panel,
-				slot,
-				drop_target,
-				box,
-				this._physics,
-			);
-		}
-
-		if (drop_target) {
-			const orientation = drop_target?.is_edge
-				? drop_target.orientation
-				: undefined;
-
-			const new_layout = insert_child(
-				panel,
-				slot,
-				drop_target.path,
-				orientation,
-			);
-
-			this.restore(new_layout);
-		} else {
-			this.restore(layout);
-		}
+		await this._overlayController.clear(event, target, className);
 	};
 
 	/**
@@ -288,9 +229,9 @@ export class RegularLayout extends HTMLElement {
 	 *     the new `SplitPanel` _if_ there is an option of orientation (e.g. if
 	 *     the layout had no pre-existing `SplitPanel`)
 	 */
-	insertPanel = (
+	insertPanel = async (
 		name: string,
-		path: number[] = [],
+		path: LayoutPathTraversal = [],
 		split?: boolean | Orientation,
 	) => {
 		let orientation: Orientation | undefined;
@@ -300,7 +241,7 @@ export class RegularLayout extends HTMLElement {
 			orientation = split;
 		}
 
-		this.restore(insert_child(this._panel, name, path, orientation));
+		await this.restore(insert_child(this._panel, name, path, orientation));
 	};
 
 	/**
@@ -308,8 +249,8 @@ export class RegularLayout extends HTMLElement {
 	 *
 	 * @param name - Name of the panel to remove
 	 */
-	removePanel = (name: string) => {
-		this.restore(remove_child(this._panel, name));
+	removePanel = async (name: string) => {
+		await this.restore(remove_child(this._panel, name));
 	};
 
 	/**
@@ -320,7 +261,7 @@ export class RegularLayout extends HTMLElement {
 	 * @returns The TabLayout containing the panel if found, null otherwise.
 	 */
 	getPanel = (name: string, layout: Layout = this._panel): TabLayout | null => {
-		if (layout.type === "child-panel") {
+		if (layout.type === "tab-layout") {
 			if (layout.tabs.includes(name)) {
 				return layout;
 			}
@@ -341,29 +282,61 @@ export class RegularLayout extends HTMLElement {
 	/**
 	 * Clears the entire layout, unslotting all panels.
 	 */
-	clear = () => {
-		this.restore(EMPTY_PANEL);
+	clear = async () => {
+		await this.restore(EMPTY_PANEL);
+	};
+
+	/**
+	 * Restores the layout from a saved state synchronously, without
+	 * dispatching the `regular-layout-before-resize` event.
+	 *
+	 * @param layout - The layout tree to restore
+	 */
+	restoreSync = (layout: Layout, _is_flattened: boolean = false) => {
+		this._panel = !_is_flattened ? flatten(layout) : layout;
+		const css = create_css_grid_layout(this._panel, undefined, this._physics);
+		this._stylesheet.replaceSync(css);
+		const event_name = `${this._physics.CUSTOM_EVENT_NAME_PREFIX}-update`;
+		const event = new CustomEvent<Layout>(event_name, { detail: this._panel });
+		this.dispatchEvent(event);
 	};
 
 	/**
 	 * Restores the layout from a saved state.
 	 *
+	 * Before applying, dispatches a cancelable `regular-layout-before-resize`
+	 * event. If the event is cancelled via `preventDefault()`, the layout
+	 * update is suspended until {@link resumeResize} is called.
+	 *
 	 * @param layout - The layout tree to restore
 	 *
 	 * @example
 	 * ```typescript
 	 * const layout = document.querySelector('regular-layout');
 	 * const savedState = JSON.parse(localStorage.getItem('layout'));
-	 * layout.restore(savedState);
+	 * await layout.restore(savedState);
 	 * ```
 	 */
-	restore = (layout: Layout, _is_flattened: boolean = false) => {
-		this._panel = !_is_flattened ? flatten(layout) : layout;
-		const css = create_css_grid_layout(this._panel, undefined, this._physics);
-		this._stylesheet.replaceSync(css);
-		const event_name = `${this._physics.CUSTOM_EVENT_NAME_PREFIX}-update`;
-		const event = new CustomEvent<Layout>(event_name, { detail: this._panel });
-		this.dispatchEvent(event);
+	restore = async (layout: Layout, _is_flattened: boolean = false) => {
+		const panel = !_is_flattened ? flatten(layout) : layout;
+		await this._presizeQueue.run(panel, () => {
+			this._panel = panel;
+			const css = create_css_grid_layout(this._panel, undefined, this._physics);
+			this._stylesheet.replaceSync(css);
+			const event_name = `${this._physics.CUSTOM_EVENT_NAME_PREFIX}-update`;
+			const event = new CustomEvent<Layout>(event_name, {
+				detail: this._panel,
+			});
+			this.dispatchEvent(event);
+		});
+	};
+
+	/**
+	 * Resumes a layout update that was suspended by cancelling the
+	 * `regular-layout-before-resize` event.
+	 */
+	resumeResize = () => {
+		this._presizeQueue.resume();
 	};
 
 	/**
@@ -429,21 +402,53 @@ export class RegularLayout extends HTMLElement {
 
 		const box = this._dimensions.box;
 		const style = this._dimensions.style;
-		const col =
-			(event.clientX - box.left - parseFloat(style.paddingLeft)) /
-			(box.width -
-				parseFloat(style.paddingLeft) -
-				parseFloat(style.paddingRight));
-
-		const row =
-			(event.clientY - box.top - parseFloat(style.paddingTop)) /
-			(box.height -
-				parseFloat(style.paddingTop) -
-				parseFloat(style.paddingBottom));
-
+		const paddingLeft = parseFloat(style.paddingLeft);
+		const paddingTop = parseFloat(style.paddingTop);
+		const contentWidth =
+			box.width - paddingLeft - parseFloat(style.paddingRight);
+
+		const contentHeight =
+			box.height - paddingTop - parseFloat(style.paddingBottom);
+
+		const localX = event.clientX - box.left - paddingLeft;
+		const localY = event.clientY - box.top - paddingTop;
+		const col = Math.max(0, Math.min(1, localX / contentWidth));
+		const row = Math.max(0, Math.min(1, localY / contentHeight));
 		return [col, row, box, style];
 	};
 
+	/**
+	 * Converts a {@link ViewWindow} (normalized 0–1 coordinates) to a
+	 * `DOMRect` in screen pixels, accounting for padding and optionally
+	 * CSS `gap` and child `margin`.
+	 *
+	 * @param window - The view window to convert.
+	 * @returns A `DOMRect` representing the window in screen coordinates.
+	 */
+	realCoordinates = (window: ViewWindow, child?: HTMLElement): DOMRect => {
+		if (!this._dimensions) {
+			this._dimensions = {
+				box: this.getBoundingClientRect(),
+				style: getComputedStyle(this),
+			};
+		}
+
+		const box = this._dimensions.box;
+		const style = this._dimensions.style;
+		let childStyle: CSSStyleDeclaration | undefined;
+		if (child) {
+			childStyle = getComputedStyle(child);
+		}
+
+		const local = viewWindowToLocalRect(window, box, style, childStyle);
+		return new DOMRect(
+			box.left + local.x,
+			box.top + local.y,
+			local.width,
+			local.height,
+		);
+	};
+
 	/**
 	 * Calculates the Euclidean distance in pixels between the current pointer
 	 * coordinates and a drag target's position within the layout.
@@ -464,7 +469,47 @@ export class RegularLayout extends HTMLElement {
 		return Math.sqrt(dx ** 2 + dy ** 2);
 	};
 
-	private onDblClick = (event: MouseEvent) => {
+	//  ▇█████████████████■■■■ȺȺȺȺȺ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ȺȺȺȺȺ■■■■■█████████████████
+	//  ███████▛▀▀█▃▄▄▅▆▆▆▇▇▇██████████████████████████████▇▇▇▆▆▆▅▅▄▃█▀▀▜███████
+	//  ████▛▚▅▇███▍ ▗▄▃¯"▜██▘   ▜██▍  ▀█▋ ▐█▀▔▂▄▃ ▔▜█  ▗▃▃▃▄▊  ▄▄▃ ▔▜██▇▅▃▀████
+	//  ███▋╺██████▍ ▐██▋  █▘ ◨Ƚ "██▍ ▙▁ ▀ ▐▋  █▛▀▀▀▜█  ´▂▂Ŋ█▊  °"▔ ▃██████▍▐███
+	//  ████▄▝▜████▍ ▝▀▀ ▂▟▘ ▄▄▄▄ "█▍ ██▄  ▐█▃ ▝▀▀  ▐█  ▝▀▀▀▀▊  ██▖ ▝████▛▀▄████
+	//  ██████▇▆▄▃█▀▀Ⱥ▼■███▇▇████▇▇█▇▇████▇████▇▇▇████▇▇▇▇▇▇▇█▇■◘▀▀▀▀▂▃▄▅▇██████
+	//  ███████████████▇▇▆▆▆▅▅▅▅▅▅▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▅▅▅▅▅▅▆▆▆▇▇███████████████
+	//
+	//
+	//   ┏▅▅▖ ▗▅▅▶  ▅▅▅▅▅▅▅ ▗▅▅▅▅▅▅▖ ▅▅▅▅▅▄▄▂       ▃▅▆▆▆▄▁  ┏▅▅▖  ▅▅▖▅▅▅▅▅▅▅▅▅
+	//   ┣██▌▗██▛   ██▊▔▔▔▔ ▐██▋▔▔▔` ███▍"▜██▙     ▟██▘▔███▖ ▐██▌  ██▌^▔▔███^▔^
+	//   ┣██▙██▋    ██▊▂▂▂  ▐██▋▂▂▂  ███▍ ▐██▋    ▐███  ▐██▋ ▐██▌  ██▌   ███▎
+	//   ┣██████▌   ███▀▀▀  ▐███▀▀▘  ██████▛▀     ▐███  ▐██▋ ▐██▌  ██▌   ███▎
+	//   ┣██▛ ▜██▖  ██▊     ▐██▋     ███▍         ▝███  ▟██▌ ▐██▌  ██▌   ███▎
+	//   ┣██▌  ███  ███▆▆▆▆▎▐███▆▆▆▅ ███▍          ▀██▙▅██▛  ▝███▅▆██▘   ███▎
+	//   ▔▔▔`  ´▔▔` ▔▔▔▔▔▔▔ ´▔▔▔▔▔▔▔ ▔▔▔             ▔""▔¯     ▔""^▔     ▔▔▔
+
+	private create_overlay_host(): OverlayHost {
+		const self = this;
+		return {
+			get panel() {
+				return self._panel;
+			},
+			get physics() {
+				return self._physics;
+			},
+			get stylesheet() {
+				return self._stylesheet;
+			},
+			get presizeQueue() {
+				return self._presizeQueue;
+			},
+			relativeCoordinates: (event, recalculate) =>
+				self.relativeCoordinates(event, recalculate),
+			restore: (layout, isFlattened) => self.restore(layout, isFlattened),
+			querySelector: (selectors) => self.querySelector(selectors),
+			dispatchEvent: (event) => self.dispatchEvent(event),
+		};
+	}
+
+	private onDblClick = async (event: MouseEvent) => {
 		const [col, row, rect] = this.relativeCoordinates(event, false);
 		const divider = calculate_intersection(col, row, this._panel, {
 			rect,
@@ -478,7 +523,7 @@ export class RegularLayout extends HTMLElement {
 				undefined,
 			);
 
-			this.restore(panel, true);
+			await this.restore(panel, true);
 		}
 	};
 
@@ -495,15 +540,17 @@ export class RegularLayout extends HTMLElement {
 		}
 	};
 
-	private onPointerMove = (event: PointerEvent) => {
+	private onPointerMove = async (event: PointerEvent) => {
 		if (this._drag_target) {
 			const [col, row] = this.relativeCoordinates(event, false);
 			const [{ path, type }, old_col, old_row] = this._drag_target;
 			const offset = type === "horizontal" ? old_col - col : old_row - row;
 			const panel = redistribute_panel_sizes(this._panel, path, offset);
-			this._stylesheet.replaceSync(
-				create_css_grid_layout(panel, undefined, this._physics),
-			);
+			await this._presizeQueue.run(panel, () => {
+				this._stylesheet.replaceSync(
+					create_css_grid_layout(panel, undefined, this._physics),
+				);
+			});
 		}
 
 		if (this._physics.GRID_DIVIDER_CHECK_TARGET && event.target !== this) {
@@ -533,14 +580,14 @@ export class RegularLayout extends HTMLElement {
 		}
 	};
 
-	private onPointerUp = (event: PointerEvent) => {
+	private onPointerUp = async (event: PointerEvent) => {
 		if (this._drag_target) {
 			this.releasePointerCapture(event.pointerId);
 			const [col, row] = this.relativeCoordinates(event, false);
 			const [{ path, type }, old_col, old_row] = this._drag_target;
 			const offset = type === "horizontal" ? old_col - col : old_row - row;
 			const panel = redistribute_panel_sizes(this._panel, path, offset);
-			this.restore(panel, true);
+			await this.restore(panel, true);
 			this._drag_target = undefined;
 		}
 	};

package/themes/borland.css

@@ -0,0 +1,103 @@
+/* ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
+ * ░░░░░░░░▄▀░█▀▄░█▀▀░█▀▀░█░█░█░░░█▀█░█▀▄░░░░░█░░░█▀█░█░█░█▀█░█░█░▀█▀░▀▄░░░░░░░░
+ * ░░░░░░░▀▄░░█▀▄░█▀▀░█░█░█░█░█░░░█▀█░█▀▄░▀▀▀░█░░░█▀█░░█░░█░█░█░█░░█░░░▄▀░░░░░░░
+ * ░░░░░░░░░▀░▀░▀░▀▀▀░▀▀▀░▀▀▀░▀▀▀░▀░▀░▀░▀░░░░░▀▀▀░▀░▀░░▀░░▀▀▀░▀▀▀░░▀░░▀░░░░░░░░░
+ * ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
+ * ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+ * ┃  *  Copyright (c) 2026, the Regular Layout Authors. This file is part  *  ┃
+ * ┃  *  of the Regular Layout library, distributed under the terms of the  *  ┃
+ * ┃  *  [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). *  ┃
+ * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+ */
+
+regular-layout.borland {
+	background-color: #0000aa;
+	font-family:
+		"ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas",
+		"Liberation Mono", monospace;
+	padding: 16px;
+}
+
+/* Frame */
+regular-layout.borland regular-layout-frame {
+	position: relative;
+	box-sizing: border-box;
+	margin: 4px;
+	background: #0000aa;
+	border: 1px solid #00aaaa;
+	box-shadow: 1px 1px 0 #000000;
+}
+
+regular-layout.borland regular-layout-frame::part(container) {
+	padding: 4px 6px;
+	color: #ffff55;
+}
+
+regular-layout.borland regular-layout-frame::part(close) {
+	background: #00aa00;
+	height: 16px;
+	align-self: center;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 0 3px;
+}
+
+regular-layout.borland regular-layout-frame::part(close):hover {
+	background: #00ff00;
+}
+
+regular-layout.borland regular-layout-frame::part(close):before {
+	content: "[×]";
+	font-size: 10px;
+	font-weight: bold;
+	color: #000000;
+}
+
+regular-layout.borland regular-layout-frame::part(titlebar) {
+	display: flex;
+	align-items: stretch;
+	padding-right: 0;
+	height: 22px;
+	background: #0000aa;
+}
+
+regular-layout.borland regular-layout-frame::part(tab) {
+	display: flex;
+	flex: 1 1 150px;
+	align-items: center;
+	padding: 0 3px 0 8px;
+	cursor: pointer;
+	text-overflow: ellipsis;
+	background: #0000aa;
+	color: #aaaaaa;
+	font-size: 11px;
+	font-weight: bold;
+	border-right: 1px solid #00aaaa;
+}
+
+regular-layout.borland regular-layout-frame::part(active-tab) {
+	background: #00aaaa;
+	color: #000000;
+}
+
+regular-layout.borland:has(.overlay) > * {
+	opacity: 0.6;
+}
+
+regular-layout.borland:has(.overlay) > .overlay {
+	opacity: 1;
+}
+
+/* Frame in Overlay Mode */
+regular-layout.borland regular-layout-frame.overlay {
+	background: rgba(0, 170, 170, 0.9);
+	border: 1px solid #ffff55;
+	box-shadow: none;
+	margin: 0;
+	transition:
+		top 0.05s linear,
+		height 0.05s linear,
+		width 0.05s linear,
+		left 0.05s linear;
+}