regular-layout 0.2.1 → 0.2.2

package/dist/layout/generate_grid.d.ts

@@ -17,8 +17,8 @@ import type { Layout } from "./types.ts";
  *   type: "split-panel",
  *   orientation: "horizontal",
  *   children: [
- *     { type: "child-panel", child: "sidebar" },
- *     { type: "child-panel", child: "main" }
+ *     { type: "child-panel", tabs: "sidebar" },
+ *     { type: "child-panel", tabs: "main" }
  *   ],
  *   sizes: [0.25, 0.75]
  * };

package/dist/layout/generate_overlay.d.ts

@@ -1,2 +1,2 @@
 import type { LayoutPath } from "./types";
-export declare function updateOverlaySheet(slot: string, box: DOMRect, style: CSSStyleDeclaration, drag_target: LayoutPath<undefined> | null, physics?: import("./constants").Physics): string;
+export declare function updateOverlaySheet(slot: string, box: DOMRect, style: CSSStyleDeclaration, drag_target: LayoutPath | null, physics?: import("./constants").Physics): string;

package/dist/layout/redistribute_panel_sizes.d.ts

@@ -16,4 +16,4 @@ import type { Layout } from "./types.ts";
  * @returns A new layout tree with updated sizes (original is not mutated).
  * ```
  */
-export declare function redistribute_panel_sizes(panel: Layout, path: number[], delta: number, physics?: import("./constants.ts").Physics): Layout;
+export declare function redistribute_panel_sizes(panel: Layout, path: number[], delta: number | undefined, physics?: import("./constants.ts").Physics): Layout;

package/dist/layout/types.d.ts

@@ -42,7 +42,7 @@ export interface SplitLayout {
  */
 export interface TabLayout {
     type: "child-panel";
-    child: string[];
+    tabs: string[];
     selected?: number;
 }
 /**
@@ -57,12 +57,8 @@ export interface LayoutDivider {
 }
 /**
  * Represents a panel location result from hit detection.
- *
- * Contains both the panel identifier and its grid position in relative units.
- * The generic parameter `T` allows DOM-only properties (e.g. `DOMRect`) to be
- * shared in this cross-platform module.
  */
-export interface LayoutPath<T = undefined> {
+export interface LayoutPath {
     type: "layout-path";
     slot: string;
     path: number[];
@@ -73,7 +69,7 @@ export interface LayoutPath<T = undefined> {
     row_offset: number;
     orientation: Orientation;
     is_edge: boolean;
-    layout: T;
+    layout: Layout;
 }
 /**
  * An empty `Layout` with no panels.

package/dist/regular-layout-frame.d.ts

@@ -28,15 +28,22 @@ export declare class RegularLayoutFrame extends HTMLElement {
     private _container_sheet;
     private _layout;
     private _header;
-    private _drag_state;
-    private _drag_moved;
+    private _drag;
     private _tab_to_index_map;
-    constructor();
+    /**
+     * Initializes this elements. Override this method and
+     * `disconnectedCallback` to modify how this subclass renders the Shadow
+     * DOM and registers events.
+     */
     connectedCallback(): void;
+    /**
+     * Destroys this element.
+     */
     disconnectedCallback(): void;
     private onPointerDown;
     private onPointerMove;
     private onPointerUp;
+    private onPointerCancel;
     private onPointerLost;
     private drawTabs;
 }

package/dist/regular-layout.d.ts

@@ -1,5 +1,14 @@
 import type { LayoutPath, Layout, TabLayout, OverlayMode, Orientation } from "./layout/types.ts";
 import { type PhysicsUpdate, type Physics } from "./layout/constants.ts";
+/**
+ * An interface which models the fields of `PointerEvent` that
+ * `<regular-layour>` actually uses, making it easier to sub out with an
+ * JavaScript object lieral when you don't have a `PointerEvent` handy.
+ */
+export interface PointerEventCoordinates {
+    clientX: number;
+    clientY: number;
+}
 /**
  * A Web Component that provides a resizable panel layout system.
  * Panels are arranged using CSS Grid and can be resized by dragging dividers.
@@ -32,6 +41,22 @@ import { type PhysicsUpdate, type Physics } from "./layout/constants.ts";
  * layout.restore(state);
  * ```
  *
+ * @remarks
+ *
+ * Why does this implementation use a `<slot>` at all? We must use
+ * `<slot>` and the Shadow DOM to scope the grid CSS rules to each
+ * instance of `<regular-layout>` (without e.g. giving them unique
+ * `"id"` and injecting into `document,head`), and we can only select
+ * `::slotted` light DOM children from `adoptedStyleSheets` on the
+ * `ShadowRoot`.
+ *
+ * Why does this implementation use a single `<slot>` and the child
+ * `"name"` attribute, as opposed to a named `<slot name="my_slot">`
+ * and the built-in `"slot"` child attribute? Children with a `"slot"`
+ * attribute don't fallback to the un-named `<slot>`, so using the
+ * latter implementation would require synchronizing the light DOM
+ * and shadow DOM slots/slotted children continuously.
+ *
  */
 export declare class RegularLayout extends HTMLElement {
     private _shadowRoot;
@@ -48,17 +73,17 @@ export declare class RegularLayout extends HTMLElement {
     /**
      * Determines which panel is at a given screen coordinate.
      *
-     * @param column - X coordinate in screen pixels.
-     * @param row - Y coordinate in screen pixels.
+     * @param coordinates - `PointerEvent`, `MouseEvent`, or just X and Y
+     *     coordinates in screen pixels.
      * @returns Panel information if a panel is at that position, null otherwise.
      */
-    calculateIntersect: (x: number, y: number, check_dividers?: boolean) => LayoutPath<Layout> | null;
+    calculateIntersect: (coordinates: PointerEventCoordinates) => LayoutPath | null;
     /**
      * Sets the visual overlay state during drag-and-drop operations.
      * Displays a preview of where a panel would be placed at the given coordinates.
      *
-     * @param x - X coordinate in screen pixels.
-     * @param y - Y coordinate in screen pixels.
+     * @param event - `PointerEvent`, `MouseEvent`, or just X and Y
+     *     coordinates in screen pixels.
      * @param dragTarget - A `LayoutPath` (presumably from `calculateIntersect`)
      *     which points to the drag element in the current layout.
      * @param className - The CSS class name to use for the overlay panel
@@ -67,12 +92,12 @@ export declare class RegularLayout extends HTMLElement {
      *     the target, "absolute" positions the panel absolutely. Defaults to
      *     "absolute".
      */
-    setOverlayState: (x: number, y: number, { slot }: LayoutPath<unknown>, className?: string, mode?: OverlayMode) => void;
+    setOverlayState: (event: PointerEventCoordinates, { slot }: LayoutPath, className?: string, mode?: OverlayMode) => void;
     /**
      * Clears the overlay state and commits the panel placement.
      *
-     * @param x - X coordinate in screen pixels.
-     * @param y - Y coordinate in screen pixels.
+     * @param event - `PointerEvent`, `MouseEvent`, or just X and Y
+     *     coordinates in screen pixels.
      * @param dragTarget - A `LayoutPath` (presumably from `calculateIntersect`)
      *     which points to the drag element in the current layout.
      * @param className - The CSS class name to use for the overlay panel
@@ -80,7 +105,7 @@ export declare class RegularLayout extends HTMLElement {
      * @param mode - Overlay rendering mode that was used, must match the mode
      *     passed to `setOverlayState`. Defaults to "absolute".
      */
-    clearOverlayState: (x: number, y: number, drag_target: LayoutPath<Layout>, className?: string) => void;
+    clearOverlayState: (event: PointerEventCoordinates | null, { slot, layout }: LayoutPath, className?: string) => void;
     /**
      * Inserts a new panel into the layout at a specified path.
      *
@@ -155,14 +180,26 @@ export declare class RegularLayout extends HTMLElement {
      * Transforms absolute pixel positions into normalized coordinates (0-1 range)
      * relative to the layout's bounding box.
      *
-     * @param clientX - X coordinate in screen pixels (client space).
-     * @param clientY - Y coordinate in screen pixels (client space).
+     * @param coordinates - `PointerEvent`, `MouseEvent`, or just X and Y
+     *     coordinates in screen pixels.
      * @returns A tuple containing:
      *   - col: Normalized X coordinate (0 = left edge, 1 = right edge)
      *   - row: Normalized Y coordinate (0 = top edge, 1 = bottom edge)
      *   - box: The layout element's bounding rectangle
      */
-    relativeCoordinates: (clientX: number, clientY: number, recalculate_bounds?: boolean) => [number, number, DOMRect, CSSStyleDeclaration];
+    relativeCoordinates: (event: PointerEventCoordinates, recalculate_bounds?: boolean) => [number, number, DOMRect, CSSStyleDeclaration];
+    /**
+     * Calculates the Euclidean distance in pixels between the current pointer
+     * coordinates and a drag target's position within the layout.
+     *
+     * @param coordinates - The current pointer event coordinates.
+     * @param drag_target - The layout path representing the drag target
+     * 	   position.
+     * @returns The distance in pixels between the coordinates and the drag
+     *     target.
+     */
+    diffCoordinates: (event: PointerEventCoordinates, drag_target: LayoutPath) => number;
+    private onDblClick;
     private onPointerDown;
     private onPointerMove;
     private onPointerUp;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "regular-layout",
-	"version": "0.2.1",
+	"version": "0.2.2",
 	"description": "A regular CSS `grid` container",
 	"keywords": [],
 	"license": "Apache-2.0",
@@ -10,6 +10,7 @@
 	},
 	"browser": "dist/index.js",
 	"main": "dist/index.js",
+	"types": "dist/index.d.ts",
 	"type": "module",
 	"files": [
 		"dist/**/*",
@@ -20,7 +21,8 @@
 		"build": "tsx build.ts",
 		"build:watch": "tsx build.ts --watch",
 		"clean": "rm -rf dist",
-		"test": "playwright test",
+		"test": "playwright test tests/integration tests/unit",
+		"test:perf": "playwright test --workers=1 ./benchmarks",
 		"example": "tsx serve.ts",
 		"deploy": "tsx deploy.ts",
 		"lint": "biome lint src tests",

package/src/layout/calculate_edge.ts

@@ -87,7 +87,9 @@ export function calculate_edge(
 			(box?.height || 1) *
 			(drop_target.view_window.row_end - drop_target.view_window.row_start);
 
-		const use_column = col_distance * col_scale > row_distance * row_scale;
+		const use_column =
+			col_scale / 2 - col_distance * col_scale <
+			row_scale / 2 - row_distance * row_scale;
 
 		return insert_axis(
 			panel,

package/src/layout/calculate_intersect.ts

@@ -80,8 +80,8 @@ function calculate_intersection_recursive(
 		const row_height = view_window.row_end - view_window.row_start;
 		return {
 			type: "layout-path",
-			layout: undefined,
-			slot: panel.child[selected],
+			layout: panel,
+			slot: panel.tabs[selected],
 			path,
 			view_window,
 			is_edge: false,

package/src/layout/generate_grid.ts

@@ -104,7 +104,7 @@ function build_cells(
 		const selected = panel.selected ?? 0;
 		return [
 			{
-				child: panel.child[selected],
+				child: panel.tabs[selected],
 				colStart: find_track_index(physics, colPositions, colStart),
 				colEnd: find_track_index(physics, colPositions, colEnd),
 				rowStart: find_track_index(physics, rowPositions, rowStart),
@@ -182,8 +182,8 @@ const child_template = (
  *   type: "split-panel",
  *   orientation: "horizontal",
  *   children: [
- *     { type: "child-panel", child: "sidebar" },
- *     { type: "child-panel", child: "main" }
+ *     { type: "child-panel", tabs: "sidebar" },
+ *     { type: "child-panel", tabs: "main" }
  *   ],
  *   sizes: [0.25, 0.75]
  * };
@@ -204,7 +204,7 @@ export function create_css_grid_layout(
 		const selected = layout.selected ?? 0;
 		return [
 			host_template("100%", "100%"),
-			child_template(physics, layout.child[selected], "1", "1"),
+			child_template(physics, layout.tabs[selected], "1", "1"),
 		].join("\n");
 	}
 

package/src/layout/generate_overlay.ts

@@ -16,7 +16,7 @@ export function updateOverlaySheet(
 	slot: string,
 	box: DOMRect,
 	style: CSSStyleDeclaration,
-	drag_target: LayoutPath<undefined> | null,
+	drag_target: LayoutPath | null,
 	physics = DEFAULT_PHYSICS,
 ) {
 	if (!drag_target) {

package/src/layout/insert_child.ts

@@ -33,7 +33,7 @@ export function insert_child(
 ): Layout {
 	const createChildPanel = (childId: string): Layout => ({
 		type: "child-panel",
-		child: [childId],
+		tabs: [childId],
 	});
 
 	if (path.length === 0) {
@@ -42,7 +42,7 @@ export function insert_child(
 			// Add to existing child-panel as a tab
 			return {
 				type: "child-panel",
-				child: [child, ...panel.child],
+				tabs: [child, ...panel.tabs],
 			};
 		} else if (orientation) {
 			// When inserting at edge of root, wrap the entire panel in a new split
@@ -105,13 +105,13 @@ export function insert_child(
 			restPath.length === 0 &&
 			orientation === undefined &&
 			index >= 0 &&
-			index <= panel.child.length
+			index <= panel.tabs.length
 		) {
-			const newChild = [...panel.child];
+			const newChild = [...panel.tabs];
 			newChild.splice(index, 0, child);
 			return {
 				...panel,
-				child: newChild,
+				tabs: newChild,
 			};
 		}
 

package/src/layout/redistribute_panel_sizes.ts

@@ -32,7 +32,7 @@ import type { Layout } from "./types.ts";
 export function redistribute_panel_sizes(
 	panel: Layout,
 	path: number[],
-	delta: number,
+	delta: number | undefined,
 	physics = DEFAULT_PHYSICS,
 ): Layout {
 	// Clone the entire panel structure
@@ -41,7 +41,7 @@ export function redistribute_panel_sizes(
 	// Find the orientation of the insertion panel,
 	// and scale the delta on the respective axis if aligned.
 	let current: Layout = result;
-	const deltas = { horizontal: delta, vertical: delta };
+	const deltas = { horizontal: delta || 0, vertical: delta || 0 };
 	for (let i = 0; i < path.length - 1; i++) {
 		if (current.type === "split-panel") {
 			deltas[current.orientation] /= current.sizes[path[i]];
@@ -51,17 +51,21 @@ export function redistribute_panel_sizes(
 
 	// Apply the redistribution at the final path index
 	if (current.type === "split-panel") {
-		const delta = deltas[current.orientation];
-		const index = path[path.length - 1];
+		if (delta === undefined) {
+			current.sizes = current.sizes.map((_) => 1 / current.sizes.length);
+		} else {
+			const delta = deltas[current.orientation];
+			const index = path[path.length - 1];
 
-		// It would be fun to remove this condition.
-		if (index < current.sizes.length - 1) {
-			current.sizes = add_and_redistribute(
-				physics,
-				current.sizes,
-				index,
-				delta,
-			);
+			// It would be fun to remove this condition.
+			if (index < current.sizes.length - 1) {
+				current.sizes = add_and_redistribute(
+					physics,
+					current.sizes,
+					index,
+					delta,
+				);
+			}
 		}
 	}
 

package/src/layout/remove_child.ts

@@ -26,14 +26,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.child.includes(child)) {
-			const newChild = panel.child.filter((c) => c !== child);
+		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",
-				child: newChild,
+				tabs: newChild,
 			};
 		}
 
@@ -46,7 +46,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") {
-			return p.child.includes(child);
+			return p.tabs.includes(child);
 		}
 
 		return false;
@@ -54,7 +54,7 @@ export function remove_child(panel: Layout, child: string): Layout {
 
 	if (index !== -1) {
 		const tab_layout = result.children[index] as TabLayout;
-		if (tab_layout.child.length === 1) {
+		if (tab_layout.tabs.length === 1) {
 			// Found the child at this level - remove it
 			const newChildren = result.children.filter((_, i) => i !== index);
 			const newSizes = remove_and_redistribute(result.sizes, index);
@@ -67,10 +67,10 @@ export function remove_child(panel: Layout, child: string): Layout {
 			result.children = newChildren;
 			result.sizes = newSizes;
 		} else {
-			tab_layout.child.splice(tab_layout.child.indexOf(child), 1);
+			tab_layout.tabs.splice(tab_layout.tabs.indexOf(child), 1);
 			if (
 				tab_layout.selected &&
-				tab_layout.selected >= tab_layout.child.length
+				tab_layout.selected >= tab_layout.tabs.length
 			) {
 				tab_layout.selected--;
 			}

package/src/layout/types.ts

@@ -34,7 +34,6 @@ export interface ViewWindow {
 	col_end: number;
 }
 
-
 /**
  * A split panel that divides space among multiple child layouts
  * .
@@ -59,7 +58,7 @@ export interface SplitLayout {
  */
 export interface TabLayout {
 	type: "child-panel";
-	child: string[];
+	tabs: string[];
 	selected?: number;
 }
 
@@ -76,12 +75,8 @@ export interface LayoutDivider {
 
 /**
  * Represents a panel location result from hit detection.
- *
- * Contains both the panel identifier and its grid position in relative units.
- * The generic parameter `T` allows DOM-only properties (e.g. `DOMRect`) to be
- * shared in this cross-platform module.
  */
-export interface LayoutPath<T = undefined> {
+export interface LayoutPath {
 	type: "layout-path";
 	slot: string;
 	path: number[];
@@ -92,7 +87,7 @@ export interface LayoutPath<T = undefined> {
 	row_offset: number;
 	orientation: Orientation;
 	is_edge: boolean;
-	layout: T;
+	layout: Layout;
 }
 
 /**

package/src/regular-layout-frame.ts

@@ -9,7 +9,7 @@
 // ┃  *  [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). *  ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-import type { Layout, LayoutPath } from "./layout/types.ts";
+import type { LayoutPath } from "./layout/types.ts";
 import type { RegularLayoutEvent } from "./extensions.ts";
 import type { RegularLayout } from "./regular-layout.ts";
 import type { RegularLayoutTab } from "./regular-layout-tab.ts";
@@ -29,6 +29,8 @@ const HTML_TEMPLATE = `
 	<slot part="container"></slot>
 `;
 
+type DragState = { moved?: boolean; path: LayoutPath };
+
 /**
  * A custom element that represents a draggable panel within a
  * `<regular-layout>`.
@@ -55,29 +57,31 @@ const HTML_TEMPLATE = `
  * ```
  */
 export class RegularLayoutFrame extends HTMLElement {
-	private _shadowRoot: ShadowRoot;
-	private _container_sheet: CSSStyleSheet;
+	private _shadowRoot!: ShadowRoot;
+	private _container_sheet!: CSSStyleSheet;
 	private _layout!: RegularLayout;
 	private _header!: HTMLElement;
-	private _drag_state: LayoutPath<Layout> | null = null;
-	private _drag_moved: boolean = false;
+	private _drag: DragState | null = null;
 	private _tab_to_index_map: WeakMap<RegularLayoutTab, number> = new WeakMap();
-	constructor() {
-		super();
-		this._container_sheet = new CSSStyleSheet();
-		this._container_sheet.replaceSync(CSS);
-		this._shadowRoot = this.attachShadow({ mode: "open" });
-		this._shadowRoot.adoptedStyleSheets = [this._container_sheet];
-	}
 
+	/**
+	 * Initializes this elements. Override this method and
+	 * `disconnectedCallback` to modify how this subclass renders the Shadow
+	 * DOM and registers events.
+	 */
 	connectedCallback() {
+		this._container_sheet ??= new CSSStyleSheet();
+		this._container_sheet.replaceSync(CSS);
+		this._shadowRoot ??= this.attachShadow({ mode: "open" });
+		this._shadowRoot.adoptedStyleSheets = [this._container_sheet];
 		this._shadowRoot.innerHTML = HTML_TEMPLATE;
 		this._layout = this.parentElement as RegularLayout;
 		this._header = this._shadowRoot.children[0] as HTMLElement;
 		this._header.addEventListener("pointerdown", this.onPointerDown);
-		this._header.addEventListener("pointermove", this.onPointerMove);
-		this._header.addEventListener("pointerup", this.onPointerUp);
-		this._header.addEventListener("lostpointercapture", this.onPointerLost);
+		this.addEventListener("pointermove", this.onPointerMove);
+		this.addEventListener("pointerup", this.onPointerUp);
+		this.addEventListener("pointercancel", this.onPointerCancel);
+		this.addEventListener("lostpointercapture", this.onPointerLost);
 		this._layout.addEventListener("regular-layout-update", this.drawTabs);
 		this._layout.addEventListener(
 			"regular-layout-before-update",
@@ -85,11 +89,15 @@ export class RegularLayoutFrame extends HTMLElement {
 		);
 	}
 
+	/**
+	 * Destroys this element.
+	 */
 	disconnectedCallback() {
 		this._header.removeEventListener("pointerdown", this.onPointerDown);
-		this._header.removeEventListener("pointermove", this.onPointerMove);
-		this._header.removeEventListener("pointerup", this.onPointerUp);
-		this._header.removeEventListener("lostpointercapture", this.onPointerLost);
+		this.removeEventListener("pointermove", this.onPointerMove);
+		this.removeEventListener("pointerup", this.onPointerUp);
+		this.removeEventListener("pointercancel", this.onPointerUp);
+		this.removeEventListener("lostpointercapture", this.onPointerLost);
 		this._layout.removeEventListener("regular-layout-update", this.drawTabs);
 		this._layout.removeEventListener(
 			"regular-layout-before-update",
@@ -100,75 +108,52 @@ export class RegularLayoutFrame extends HTMLElement {
 	private onPointerDown = (event: PointerEvent): void => {
 		const elem = event.target as RegularLayoutTab;
 		if (elem.part.contains("tab")) {
-			this._drag_state = this._layout.calculateIntersect(
-				event.clientX,
-				event.clientY,
-			);
-
-			if (this._drag_state) {
-				this._header.setPointerCapture(event.pointerId);
+			const path = this._layout.calculateIntersect(event);
+			if (path) {
+				this._drag = { path };
+				this.setPointerCapture(event.pointerId);
 				event.preventDefault();
+			} else {
+				this._drag = null;
 			}
 		}
 	};
 
 	private onPointerMove = (event: PointerEvent): void => {
-		if (this._drag_state) {
+		if (this._drag) {
 			const physics = this._layout.savePhysics();
-
-			// Only initiate a drag if the cursor has moved sufficiently.
-			if (!this._drag_moved) {
-				const [current_col, current_row, box] =
-					this._layout.relativeCoordinates(event.clientX, event.clientY);
-
-				const dx = (current_col - this._drag_state.column) * box.width;
-				const dy = (current_row - this._drag_state.row) * box.height;
-				if (Math.sqrt(dx * dx + dy * dy) <= physics.MIN_DRAG_DISTANCE) {
+			if (!this._drag.moved) {
+				const diff = this._layout.diffCoordinates(event, this._drag.path);
+				if (diff <= physics.MIN_DRAG_DISTANCE) {
 					return;
 				}
 			}
 
-			this._drag_moved = true;
-			this._layout.setOverlayState(
-				event.clientX,
-				event.clientY,
-				this._drag_state,
-				physics.OVERLAY_CLASSNAME,
-			);
+			this._drag.moved = true;
+			this._layout.setOverlayState(event, this._drag.path);
 		}
 	};
 
 	private onPointerUp = (event: PointerEvent): void => {
-		if (this._drag_state && this._drag_moved) {
-			this._layout.clearOverlayState(
-				event.clientX,
-				event.clientY,
-				this._drag_state,
-			);
+		if (this._drag?.moved) {
+			this._layout.clearOverlayState(event, this._drag.path);
 		}
-
-		// TODO This may be handled by `onPointerLost`, not sure if this is
-		// browser-specific behavior ...
-		this._header.releasePointerCapture(event.pointerId);
-		this._drag_state = null;
-		this._drag_moved = false;
 	};
 
-	private onPointerLost = (event: PointerEvent): void => {
-		if (this._drag_state) {
-			this._layout.clearOverlayState(-1, -1, this._drag_state);
+	private onPointerCancel = (_: PointerEvent): void => {
+		if (this._drag?.moved) {
+			this._layout.clearOverlayState(null, this._drag.path);
 		}
+	};
 
-		this._header.releasePointerCapture(event.pointerId);
-		this._drag_state = null;
-		this._drag_moved = false;
+	private onPointerLost = (event: PointerEvent): void => {
+		this.releasePointerCapture(event.pointerId);
+		this._drag = null;
 	};
 
 	private drawTabs = (event: RegularLayoutEvent) => {
-		const slot = this.getAttribute(
-			this._layout.savePhysics().CHILD_ATTRIBUTE_NAME,
-		);
-
+		const attr = this._layout.savePhysics().CHILD_ATTRIBUTE_NAME;
+		const slot = this.getAttribute(attr);
 		if (!slot) {
 			return;
 		}
@@ -178,12 +163,12 @@ export class RegularLayoutFrame extends HTMLElement {
 		if (!new_tab_panel) {
 			new_tab_panel = {
 				type: "child-panel",
-				child: [slot],
+				tabs: [slot],
 				selected: 0,
 			};
 		}
 
-		for (let i = 0; i < new_tab_panel.child.length; i++) {
+		for (let i = 0; i < new_tab_panel.tabs.length; i++) {
 			if (i >= this._header.children.length) {
 				const new_tab = document.createElement("regular-layout-tab");
 				new_tab.populate(this._layout, new_tab_panel, i);
@@ -195,7 +180,7 @@ export class RegularLayoutFrame extends HTMLElement {
 			}
 		}
 
-		const last_index = new_tab_panel.child.length;
+		const last_index = new_tab_panel.tabs.length;
 		for (let j = this._header.children.length - 1; j >= last_index; j--) {
 			this._header.removeChild(this._header.children[j]);
 		}