regular-layout 0.2.2 → 0.4.0

package/src/layout/calculate_presize_paths.ts

@@ -0,0 +1,93 @@
+// ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
+// ░░░░░░░░▄▀░█▀▄░█▀▀░█▀▀░█░█░█░░░█▀█░█▀▄░░░░░█░░░█▀█░█░█░█▀█░█░█░▀█▀░▀▄░░░░░░░░
+// ░░░░░░░▀▄░░█▀▄░█▀▀░█░█░█░█░█░░░█▀█░█▀▄░▀▀▀░█░░░█▀█░░█░░█░█░█░█░░█░░░▄▀░░░░░░░
+// ░░░░░░░░░▀░▀░▀░▀▀▀░▀▀▀░▀▀▀░▀▀▀░▀░▀░▀░▀░░░░░▀▀▀░▀░▀░░▀░░▀▀▀░▀▀▀░░▀░░▀░░░░░░░░░
+// ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃  *  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,
+	LayoutPath,
+	Orientation,
+	ViewWindow,
+} from "../core/types.ts";
+
+/**
+ * Walks a layout tree and returns a {@link LayoutPath} for every visible
+ * panel, keyed by panel name. Each path's `column`/`row` are set to the
+ * center of the panel's view window, with offsets of 0.5.
+ *
+ * @param layout - The layout tree to walk.
+ * @returns A record mapping panel names to their layout paths.
+ */
+export function calculate_presize_paths(
+	layout: Layout,
+): Record<string, LayoutPath> {
+	const result: Record<string, LayoutPath> = {};
+	walk_layout(layout, result, [], null, {
+		row_start: 0,
+		row_end: 1,
+		col_start: 0,
+		col_end: 1,
+	});
+
+	return result;
+}
+
+function walk_layout(
+	layout: Layout,
+	result: Record<string, LayoutPath>,
+	path: number[],
+	parentOrientation: Orientation | null,
+	viewWindow: ViewWindow,
+): void {
+	if (layout.type === "tab-layout") {
+		const selected = layout.selected ?? 0;
+		const slot = layout.tabs[selected];
+		const col = (viewWindow.col_start + viewWindow.col_end) / 2;
+		const row = (viewWindow.row_start + viewWindow.row_end) / 2;
+		result[slot] = {
+			type: "layout-path",
+			layout,
+			slot,
+			path,
+			view_window: viewWindow,
+			is_edge: false,
+			column: col,
+			row: row,
+			column_offset: 0.5,
+			row_offset: 0.5,
+			orientation: parentOrientation || "horizontal",
+		};
+
+		return;
+	}
+
+	const isVertical = layout.orientation === "vertical";
+	const startKey = isVertical ? "row_start" : "col_start";
+	const endKey = isVertical ? "row_end" : "col_end";
+	let currentPos = viewWindow[startKey];
+	const totalSize = viewWindow[endKey] - viewWindow[startKey];
+	for (let i = 0; i < layout.children.length; i++) {
+		const nextPos = currentPos + totalSize * layout.sizes[i];
+		const childWindow: ViewWindow = {
+			...viewWindow,
+			[startKey]: currentPos,
+			[endKey]: nextPos,
+		};
+
+		walk_layout(
+			layout.children[i],
+			result,
+			[...path, i],
+			layout.orientation,
+			childWindow,
+		);
+
+		currentPos = nextPos;
+	}
+}

package/src/layout/flatten.ts

@@ -9,7 +9,7 @@
 // ┃  *  [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). *  ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-import type { Layout } from "./types.ts";
+import type { Layout } from "../core/types.ts";
 
 /**
  * Flattens the layout tree by merging parent and child split panels that have
@@ -23,7 +23,7 @@ import type { Layout } from "./types.ts";
  * @returns A new flattened layout tree (original is not mutated).
  */
 export function flatten(layout: Layout): Layout {
-	if (layout.type === "child-panel") {
+	if (layout.type === "tab-layout") {
 		layout.selected = layout.selected || 0;
 		return layout;
 	}
@@ -36,7 +36,7 @@ export function flatten(layout: Layout): Layout {
 		const flattenedChild = flatten(child);
 
 		if (
-			flattenedChild.type === "split-panel" &&
+			flattenedChild.type === "split-layout" &&
 			flattenedChild.orientation === layout.orientation
 		) {
 			for (let j = 0; j < flattenedChild.children.length; j++) {
@@ -54,7 +54,7 @@ export function flatten(layout: Layout): Layout {
 	}
 
 	return {
-		type: "split-panel",
+		type: "split-layout",
 		orientation: layout.orientation,
 		children: flattenedChildren,
 		sizes: flattenedSizes,

package/src/layout/generate_grid.ts

@@ -9,8 +9,8 @@
 // ┃  *  [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). *  ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-import { DEFAULT_PHYSICS, type Physics } from "./constants.ts";
-import type { Layout } from "./types.ts";
+import { DEFAULT_PHYSICS, type Physics } from "../core/constants.ts";
+import type { Layout } from "../core/types.ts";
 
 interface GridCell {
 	child: string;
@@ -44,7 +44,7 @@ function collect_track_positions(
 	end: number,
 	physics: Physics,
 ): number[] {
-	if (panel.type === "child-panel") {
+	if (panel.type === "tab-layout") {
 		return [start, end];
 	}
 
@@ -100,7 +100,7 @@ function build_cells(
 	rowEnd: number,
 	physics: Physics,
 ): GridCell[] {
-	if (panel.type === "child-panel") {
+	if (panel.type === "tab-layout") {
 		const selected = panel.selected ?? 0;
 		return [
 			{
@@ -179,11 +179,11 @@ const child_template = (
  * @example
  * ```typescript
  * const layout = {
- *   type: "split-panel",
+ *   type: "split-layout",
  *   orientation: "horizontal",
  *   children: [
- *     { type: "child-panel", tabs: "sidebar" },
- *     { type: "child-panel", tabs: "main" }
+ *     { type: "tab-layout", tabs: "sidebar" },
+ *     { type: "tab-layout", tabs: "main" }
  *   ],
  *   sizes: [0.25, 0.75]
  * };
@@ -200,7 +200,7 @@ export function create_css_grid_layout(
 	overlay?: [string, string],
 	physics: Physics = DEFAULT_PHYSICS,
 ): string {
-	if (layout.type === "child-panel") {
+	if (layout.type === "tab-layout") {
 		const selected = layout.selected ?? 0;
 		return [
 			host_template("100%", "100%"),

package/src/layout/generate_overlay.ts

@@ -9,8 +9,46 @@
 // ┃  *  [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). *  ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-import { DEFAULT_PHYSICS } from "./constants";
-import type { LayoutPath } from "./types";
+import { DEFAULT_PHYSICS } from "../core/constants";
+import type { LayoutPath, ViewWindow } from "../core/types";
+
+/**
+ * Converts a {@link ViewWindow} to element-relative pixel coordinates,
+ * accounting for padding and optionally CSS `gap` and child `margin`.
+ *
+ * @param window - The view window in normalized 0–1 coordinates.
+ * @param box - The element's bounding client rect.
+ * @param style - The element's computed style (for padding).
+ * @param margin - Optional child element's computed style (for margin inset).
+ * @returns Pixel coordinates relative to the element's border-box origin.
+ */
+export function viewWindowToLocalRect(
+	window: ViewWindow,
+	box: DOMRect,
+	style: CSSStyleDeclaration,
+	margin?: CSSStyleDeclaration,
+): { x: number; y: number; width: number; height: number } {
+	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 x = paddingLeft + window.col_start * contentWidth;
+	const y = paddingTop + window.row_start * contentHeight;
+	let width = (window.col_end - window.col_start) * contentWidth;
+	let height = (window.row_end - window.row_start) * contentHeight;
+	if (margin) {
+		const marginTop = parseFloat(margin.marginTop);
+		const marginRight = parseFloat(margin.marginRight);
+		const marginBottom = parseFloat(margin.marginBottom);
+		const marginLeft = parseFloat(margin.marginLeft);
+		width -= marginLeft + marginRight;
+		height -= marginTop + marginBottom;
+	}
+
+	return { x, y, width, height };
+}
 
 export function updateOverlaySheet(
 	slot: string,
@@ -18,25 +56,19 @@ export function updateOverlaySheet(
 	style: CSSStyleDeclaration,
 	drag_target: LayoutPath | null,
 	physics = DEFAULT_PHYSICS,
+	margin?: CSSStyleDeclaration,
 ) {
 	if (!drag_target) {
 		return `:host ::slotted([${physics.CHILD_ATTRIBUTE_NAME}="${slot}"]){display:none;}`;
 	}
 
-	const {
-		view_window: { row_start, row_end, col_start, col_end },
-	} = drag_target;
-
-	const box_height =
-		box.height - parseFloat(style.paddingTop) - parseFloat(style.paddingBottom);
-
-	const box_width =
-		box.width - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight);
+	const local = viewWindowToLocalRect(
+		drag_target.view_window,
+		box,
+		style,
+		margin,
+	);
 
-	const top = row_start * box_height + parseFloat(style.paddingTop);
-	const left = col_start * box_width + parseFloat(style.paddingLeft);
-	const height = (row_end - row_start) * box_height;
-	const width = (col_end - col_start) * box_width;
-	const css = `display:flex;position:absolute!important;z-index:1;top:${top}px;left:${left}px;height:${height}px;width:${width}px;`;
+	const css = `display:flex;position:absolute!important;z-index:1;top:${local.y}px;left:${local.x}px;height:${local.height}px;width:${local.width}px;`;
 	return `::slotted([${physics.CHILD_ATTRIBUTE_NAME}="${slot}"]){${css}}`;
 }

package/src/layout/insert_child.ts

@@ -9,7 +9,7 @@
 // ┃  *  [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). *  ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-import type { Layout } from "./types.ts";
+import type { Layout, LayoutPathTraversal } from "../core/types.ts";
 
 /**
  * Inserts a new child panel into the layout tree at a specified location.
@@ -28,32 +28,32 @@ import type { Layout } from "./types.ts";
 export function insert_child(
 	panel: Layout,
 	child: string,
-	path: number[],
+	path: LayoutPathTraversal,
 	orientation?: "horizontal" | "vertical",
 ): Layout {
 	const createChildPanel = (childId: string): Layout => ({
-		type: "child-panel",
+		type: "tab-layout",
 		tabs: [childId],
 	});
 
 	if (path.length === 0) {
 		// Insert at root level
-		if (panel.type === "child-panel") {
-			// Add to existing child-panel as a tab
+		if (panel.type === "tab-layout") {
+			// Add to existing tab-layout as a tab
 			return {
-				type: "child-panel",
+				type: "tab-layout",
 				tabs: [child, ...panel.tabs],
 			};
 		} else if (orientation) {
 			// When inserting at edge of root, wrap the entire panel in a new split
 			return {
-				type: "split-panel",
+				type: "split-layout",
 				orientation: orientation,
 				children: [createChildPanel(child), panel],
 				sizes: [0.5, 0.5],
 			};
 		} else {
-			// Append to existing split-panel
+			// Append to existing split-layout
 			const newChildren = [...panel.children, createChildPanel(child)];
 			const newSizes = [...panel.sizes, 1 / (newChildren.length - 1)];
 			return {
@@ -69,8 +69,8 @@ export function insert_child(
 
 	// Special case: when orientation is provided and restPath is empty, handle edge insertion
 	if (orientation && restPath.length === 0) {
-		// If panel is a split-panel with the same orientation, insert into its children
-		if (panel.type === "split-panel" && panel.orientation === orientation) {
+		// If panel is a split-layout with the same orientation, insert into its children
+		if (panel.type === "split-layout" && panel.orientation === orientation) {
 			const newChildren = [...panel.children];
 			newChildren.splice(index, 0, createChildPanel(child));
 			const newSizes = [...panel.sizes];
@@ -89,14 +89,14 @@ export function insert_child(
 				: [panel, createChildPanel(child)];
 
 		return {
-			type: "split-panel",
+			type: "split-layout",
 			orientation: orientation,
 			children,
 			sizes: [0.5, 0.5],
 		};
 	}
 
-	if (panel.type === "child-panel") {
+	if (panel.type === "tab-layout") {
 		// Stack into child array only when ALL of these conditions are met:
 		// 1. Path has exactly one element (restPath is empty)
 		// 2. Orientation was NOT explicitly provided (orientation is undefined)
@@ -117,7 +117,7 @@ export function insert_child(
 
 		// Otherwise, wrap in a split panel and recurse
 		const newPanel: Layout = {
-			type: "split-panel",
+			type: "split-layout",
 			orientation: orientation || "horizontal",
 			children: [panel],
 			sizes: [1],
@@ -130,7 +130,7 @@ export function insert_child(
 		if (orientation && panel.children[index]) {
 			// When inserting at an edge, create a split panel with the new child and existing child
 			const newSplitPanel: Layout = {
-				type: "split-panel",
+				type: "split-layout",
 				orientation: orientation,
 				children: [createChildPanel(child), panel.children[index]],
 				sizes: [0.5, 0.5],
@@ -159,9 +159,9 @@ export function insert_child(
 
 	const targetChild = panel.children[index];
 
-	// Determine the orientation to pass down when navigating into a child-panel
+	// Determine the orientation to pass down when navigating into a tab-layout
 	const childOrientation =
-		targetChild.type === "child-panel" &&
+		targetChild.type === "tab-layout" &&
 		restPath.length > 0 &&
 		orientation !== undefined
 			? panel.orientation === "horizontal"

package/src/layout/redistribute_panel_sizes.ts

@@ -9,8 +9,8 @@
 // ┃  *  [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). *  ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-import { DEFAULT_PHYSICS } from "./constants.ts";
-import type { Layout } from "./types.ts";
+import { DEFAULT_PHYSICS } from "../core/constants.ts";
+import type { Layout, LayoutPathTraversal } from "../core/types.ts";
 
 /**
  * Adjusts panel sizes during a drag operation on a divider.
@@ -31,7 +31,7 @@ import type { Layout } from "./types.ts";
  */
 export function redistribute_panel_sizes(
 	panel: Layout,
-	path: number[],
+	path: LayoutPathTraversal,
 	delta: number | undefined,
 	physics = DEFAULT_PHYSICS,
 ): Layout {
@@ -43,14 +43,14 @@ export function redistribute_panel_sizes(
 	let current: Layout = result;
 	const deltas = { horizontal: delta || 0, vertical: delta || 0 };
 	for (let i = 0; i < path.length - 1; i++) {
-		if (current.type === "split-panel") {
+		if (current.type === "split-layout") {
 			deltas[current.orientation] /= current.sizes[path[i]];
 			current = current.children[path[i]];
 		}
 	}
 
 	// Apply the redistribution at the final path index
-	if (current.type === "split-panel") {
+	if (current.type === "split-layout") {
 		if (delta === undefined) {
 			current.sizes = current.sizes.map((_) => 1 / current.sizes.length);
 		} else {

package/src/layout/remove_child.ts

@@ -9,8 +9,8 @@
 // ┃  *  [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). *  ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-import type { Layout, TabLayout } from "./types.ts";
-import { EMPTY_PANEL } from "./types.ts";
+import type { Layout, TabLayout } from "../core/types.ts";
+import { EMPTY_PANEL } from "../core/types.ts";
 
 /**
  * Removes a child panel from the layout tree by its name.
@@ -25,14 +25,14 @@ import { EMPTY_PANEL } from "./types.ts";
  */
 export function remove_child(panel: Layout, child: string): Layout {
 	// If this is a child panel, handle tab removal
-	if (panel.type === "child-panel") {
+	if (panel.type === "tab-layout") {
 		if (panel.tabs.includes(child)) {
 			const newChild = panel.tabs.filter((c) => c !== child);
 			if (newChild.length === 0) {
 				return structuredClone(EMPTY_PANEL);
 			}
 			return {
-				type: "child-panel",
+				type: "tab-layout",
 				tabs: newChild,
 			};
 		}
@@ -45,7 +45,7 @@ export function remove_child(panel: Layout, child: string): Layout {
 
 	// Try to remove the child from this split panel's children
 	const index = result.children.findIndex((p) => {
-		if (p.type === "child-panel") {
+		if (p.type === "tab-layout") {
 			return p.tabs.includes(child);
 		}
 
@@ -82,7 +82,7 @@ export function remove_child(panel: Layout, child: string): Layout {
 	// Child not found at this level - recursively search children
 	let modified = false;
 	const newChildren = result.children.map((p) => {
-		if (p.type === "split-panel") {
+		if (p.type === "split-layout") {
 			const updated = remove_child(p, child);
 			if (updated !== p) {
 				modified = true;

package/src/model/overlay_controller.ts

@@ -0,0 +1,162 @@
+// ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
+// ░░░░░░░░▄▀░█▀▄░█▀▀░█▀▀░█░█░█░░░█▀█░█▀▄░░░░░█░░░█▀█░█░█░█▀█░█░█░▀█▀░▀▄░░░░░░░░
+// ░░░░░░░▀▄░░█▀▄░█▀▀░█░█░█░█░█░░░█▀█░█▀▄░▀▀▀░█░░░█▀█░░█░░█░█░█░█░░█░░░▄▀░░░░░░░
+// ░░░░░░░░░▀░▀░▀░▀▀▀░▀▀▀░▀▀▀░▀▀▀░▀░▀░▀░▀░░░░░▀▀▀░▀░▀░░▀░░▀▀▀░▀▀▀░░▀░░▀░░░░░░░░░
+// ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃  *  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, LayoutPath, OverlayMode } from "../core/types.ts";
+import type { Physics } from "../core/constants.ts";
+import type { PresizeQueue } from "./presize_queue.ts";
+import { calculate_intersection } from "../layout/calculate_intersect.ts";
+import { calculate_edge } from "../layout/calculate_edge.ts";
+import { create_css_grid_layout } from "../layout/generate_grid.ts";
+import { updateOverlaySheet } from "../layout/generate_overlay.ts";
+import { remove_child } from "../layout/remove_child.ts";
+import { insert_child } from "../layout/insert_child.ts";
+
+export interface OverlayHost {
+	readonly panel: Layout;
+	readonly physics: Physics;
+	readonly stylesheet: CSSStyleSheet;
+	readonly presizeQueue: PresizeQueue;
+	relativeCoordinates(
+		event: { clientX: number; clientY: number },
+		recalculate: boolean,
+	): [number, number, DOMRect, CSSStyleDeclaration];
+	restore(layout: Layout, isFlattened?: boolean): Promise<void>;
+	querySelector(selectors: string): Element | null;
+	dispatchEvent(event: Event): boolean;
+}
+
+/**
+ * Manages overlay state during drag-and-drop panel rearrangement.
+ *
+ * Handles rendering a preview of where a dragged panel would land,
+ * and committing or cancelling the placement when the drag ends.
+ */
+export class OverlayController {
+	constructor(private _host: OverlayHost) {}
+
+	async set(
+		event: { clientX: number; clientY: number },
+		{ slot }: LayoutPath,
+		className: string = this._host.physics.OVERLAY_CLASSNAME,
+		mode: OverlayMode = this._host.physics.OVERLAY_DEFAULT,
+	): Promise<void> {
+		const host = this._host;
+		const panel = remove_child(host.panel, slot);
+		const query = `:scope > [${host.physics.CHILD_ATTRIBUTE_NAME}="${slot}"]`;
+		let drag_element = host.querySelector(query);
+		if (drag_element) {
+			drag_element.classList.add(className);
+		}
+
+		const [col, row, box, style] = host.relativeCoordinates(event, true);
+		let drop_target = calculate_intersection(col, row, panel);
+		console.log(row, col, drop_target);
+		if (drop_target) {
+			drop_target = calculate_edge(
+				col,
+				row,
+				panel,
+				slot,
+				drop_target,
+				box,
+				host.physics,
+			);
+		}
+
+		await host.presizeQueue.run(panel, () => {
+			if (mode === "grid" && drop_target) {
+				const path: [string, string] = [slot, drop_target?.slot];
+				const css = create_css_grid_layout(panel, path, host.physics);
+				host.stylesheet.replaceSync(css);
+			} else if (mode === "absolute") {
+				const grid_css = create_css_grid_layout(panel, undefined, host.physics);
+
+				while (drag_element?.tagName === "SLOT" && drag_element) {
+					drag_element = (
+						drag_element as HTMLSlotElement
+					).assignedElements()[0];
+				}
+
+				const margin = drag_element
+					? getComputedStyle(drag_element)
+					: undefined;
+
+				const overlay_css = updateOverlaySheet(
+					slot,
+					box,
+					style,
+					drop_target,
+					host.physics,
+					margin,
+				);
+
+				host.stylesheet.replaceSync([grid_css, overlay_css].join("\n"));
+			}
+		});
+
+		const event_name = `${host.physics.CUSTOM_EVENT_NAME_PREFIX}-before-update`;
+		const custom_event = new CustomEvent<Layout>(event_name, {
+			detail: panel,
+		});
+		host.dispatchEvent(custom_event);
+	}
+
+	async clear(
+		event: { clientX: number; clientY: number } | null,
+		{ slot, layout }: LayoutPath,
+		className: string = this._host.physics.OVERLAY_CLASSNAME,
+	): Promise<void> {
+		const host = this._host;
+		const panel = remove_child(host.panel, slot);
+		const query = `:scope > [${host.physics.CHILD_ATTRIBUTE_NAME}="${slot}"]`;
+		const drag_element = host.querySelector(query);
+
+		if (event === null) {
+			await host.restore(layout);
+			return;
+		}
+
+		const [col, row, box] = host.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,
+				host.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,
+			);
+
+			await host.restore(new_layout);
+		} else {
+			await host.restore(layout);
+		}
+
+		if (drag_element) {
+			drag_element.classList.remove(className);
+		}
+	}
+}