regular-layout 0.0.1 → 0.0.2

package/src/common/calculate_intersect.ts

@@ -72,25 +72,35 @@ function calculate_intersection_recursive(
 	row: number,
 	panel: Layout,
 	check_dividers: boolean,
-	parent_orientation: "horizontal" | "vertical" = "horizontal",
+	parent_orientation: "horizontal" | "vertical" | null = null,
 	view_window: ViewWindow = structuredClone(VIEW_WINDOW),
 	path: number[] = [],
 ): LayoutPath | null | LayoutDivider {
+	if (column < 0 || row < 0 || column > 1 || row > 1) {
+		return null;
+	}
+
 	// Base case: if this is a child panel, return its name
 	if (panel.type === "child-panel") {
+		const selected = panel.selected ?? 0;
+		const column_offset =
+			(column - view_window.col_start) /
+			(view_window.col_end - view_window.col_start);
+		const row_offset =
+			(row - view_window.row_start) /
+			(view_window.row_end - view_window.row_start);
+
 		return {
 			type: "layout-path",
 			box: undefined,
-			slot: panel.child,
+			slot: panel.child[selected],
+			panel: structuredClone(panel),
 			path: path,
 			view_window: view_window,
-			column_offset:
-				(column - view_window.col_start) /
-				(view_window.col_end - view_window.col_start),
-			row_offset:
-				(row - view_window.row_start) /
-				(view_window.row_end - view_window.row_start),
-			orientation: parent_orientation,
+			is_edge: false,
+			column_offset,
+			row_offset,
+			orientation: parent_orientation || "horizontal",
 		};
 	}
 

package/src/common/calculate_split.ts

@@ -1,3 +1,14 @@
+// ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
+// ░░░░░░░░▄▀░█▀▄░█▀▀░█▀▀░█░█░█░░░█▀█░█▀▄░░░░░█░░░█▀█░█░█░█▀█░█░█░▀█▀░▀▄░░░░░░░░
+// ░░░░░░░▀▄░░█▀▄░█▀▀░█░█░█░█░█░░░█▀█░█▀▄░▀▀▀░█░░░█▀█░░█░░█░█░█░█░░█░░░▄▀░░░░░░░
+// ░░░░░░░░░▀░▀░▀░▀▀▀░▀▀▀░▀▀▀░▀▀▀░▀░▀░▀░▀░░░░░▀▀▀░▀░▀░░▀░░▀▀▀░▀▀▀░░▀░░▀░░░░░░░░░
+// ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃  *  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 { calculate_intersection } from "./calculate_intersect";
 import { insert_child } from "./insert_child";
 import {
@@ -6,48 +17,169 @@ import {
 	type LayoutPath,
 } from "./layout_config";
 
+/**
+ * Calculates an insertion point (which may involve splitting a single
+ * `"child-panel"` into a new `"split-panel"`), based on the  cursor position.
+ * *
+ * @param col - The cursor column.
+ * @param row - The cursor row.
+ * @param panel - The `Layout` to insert into.
+ * @param slot - The slot identifier where the insert should occur
+ * @param drop_target - The `LayoutPath` (from `calculateIntersect`) of the
+ * panel to either insert next to, or split by.
+ * @returns A new `LayoutPath` reflecting the updated (maybe) `"split-panel"`,
+ * which is enough to draw the overlay.
+ */
 export function calculate_split(
 	col: number,
 	row: number,
 	panel: Layout,
 	slot: string,
-	config: LayoutPath,
+	drop_target: LayoutPath,
 ): LayoutPath {
 	if (
-		config.column_offset < SPLIT_EDGE_TOLERANCE ||
-		config.column_offset > 1 - SPLIT_EDGE_TOLERANCE
+		drop_target.column_offset < SPLIT_EDGE_TOLERANCE ||
+		drop_target.column_offset > 1 - SPLIT_EDGE_TOLERANCE
 	) {
-		if (config.orientation === "vertical") {
-			const new_panel = insert_child(panel, slot, [
-				...config.path,
-				config.column_offset < SPLIT_EDGE_TOLERANCE ? 0 : 1,
-			]);
-
-			config = calculate_intersection(col, row, new_panel, false);
+		if (drop_target.orientation === "horizontal") {
+			const is_before = drop_target.column_offset < SPLIT_EDGE_TOLERANCE;
+			if (drop_target.path.length === 0) {
+				const insert_index = is_before ? 0 : 1;
+				const new_panel = insert_child(panel, slot, [insert_index]);
+				// When inserting before, point to new panel; when after, keep original
+				if (is_before) {
+					drop_target = calculate_intersection(col, row, new_panel, false);
+				} else {
+					const new_drop_target = calculate_intersection(
+						col,
+						row,
+						new_panel,
+						false,
+					);
+					drop_target = {
+						...new_drop_target,
+						path: [0],
+					};
+				}
+			} else {
+				const path_without_last = drop_target.path.slice(0, -1);
+				const last_index = drop_target.path[drop_target.path.length - 1];
+				const insert_index = is_before ? last_index : last_index + 1;
+				const new_panel = insert_child(panel, slot, [
+					...path_without_last,
+					insert_index,
+				]);
+				// When inserting before, point to new panel; when after, keep original
+				if (is_before) {
+					drop_target = calculate_intersection(col, row, new_panel, false);
+				} else {
+					// Keep the original panel but update view_window from new layout
+					const new_drop_target = calculate_intersection(
+						col,
+						row,
+						new_panel,
+						false,
+					);
+					drop_target = {
+						...new_drop_target,
+						path: [...path_without_last, last_index],
+					};
+				}
+			}
 		} else {
-			const new_panel = insert_child(panel, slot, config.path);
-			config = calculate_intersection(col, row, new_panel, false);
+			const insert_index =
+				drop_target.column_offset < SPLIT_EDGE_TOLERANCE ? 0 : 1;
+			const original_path = drop_target.path;
+			const new_panel = insert_child(
+				panel,
+				slot,
+				[...original_path, insert_index],
+				"horizontal",
+			);
+			drop_target = calculate_intersection(col, row, new_panel, false);
+			// Override to point to the newly inserted panel
+			drop_target = {
+				...drop_target,
+				slot,
+				path: [...original_path, insert_index],
+			};
 		}
-	}
 
-	if (
-		(config.row_offset < SPLIT_EDGE_TOLERANCE &&
-			config.row_offset < config.column_offset) ||
-		(config.row_offset > 1 - SPLIT_EDGE_TOLERANCE &&
-			config.row_offset > config.column_offset)
+		if (drop_target) {
+			drop_target.is_edge = true;
+		}
+	} else if (
+		drop_target.row_offset < SPLIT_EDGE_TOLERANCE ||
+		drop_target.row_offset > 1 - SPLIT_EDGE_TOLERANCE
 	) {
-		if (config.orientation === "horizontal") {
-			const new_panel = insert_child(panel, slot, [
-				...config.path,
-				config.row_offset < SPLIT_EDGE_TOLERANCE ? 0 : 1,
-			]);
-
-			config = calculate_intersection(col, row, new_panel, false);
+		if (drop_target.orientation === "vertical") {
+			const is_before = drop_target.row_offset < SPLIT_EDGE_TOLERANCE;
+			if (drop_target.path.length === 0) {
+				const insert_index = is_before ? 0 : 1;
+				const new_panel = insert_child(panel, slot, [insert_index]);
+				// When inserting before, point to new panel; when after, keep original
+				if (is_before) {
+					drop_target = calculate_intersection(col, row, new_panel, false);
+				} else {
+					const new_drop_target = calculate_intersection(
+						col,
+						row,
+						new_panel,
+						false,
+					);
+					drop_target = {
+						...new_drop_target,
+						path: [0],
+					};
+				}
+			} else {
+				const path_without_last = drop_target.path.slice(0, -1);
+				const last_index = drop_target.path[drop_target.path.length - 1];
+				const insert_index = is_before ? last_index : last_index + 1;
+				const new_panel = insert_child(panel, slot, [
+					...path_without_last,
+					insert_index,
+				]);
+				// When inserting before, point to new panel; when after, keep original
+				if (is_before) {
+					drop_target = calculate_intersection(col, row, new_panel, false);
+				} else {
+					// Keep the original panel but update view_window from new layout
+					const new_drop_target = calculate_intersection(
+						col,
+						row,
+						new_panel,
+						false,
+					);
+					drop_target = {
+						...new_drop_target,
+						path: [...path_without_last, last_index],
+					};
+				}
+			}
 		} else {
-			const new_panel = insert_child(panel, slot, config.path);
-			config = calculate_intersection(col, row, new_panel, false);
+			const insert_index =
+				drop_target.row_offset < SPLIT_EDGE_TOLERANCE ? 0 : 1;
+			const original_path = drop_target.path;
+			const new_panel = insert_child(
+				panel,
+				slot,
+				[...original_path, insert_index],
+				"vertical",
+			);
+			drop_target = calculate_intersection(col, row, new_panel, false);
+			// Override to point to the newly inserted panel
+			drop_target = {
+				...drop_target,
+				slot,
+				path: [...original_path, insert_index],
+			};
+		}
+
+		if (drop_target) {
+			drop_target.is_edge = true;
 		}
 	}
 
-	return config;
+	return drop_target;
 }

package/src/common/flatten.ts

@@ -48,6 +48,10 @@ export function flatten(layout: Layout): Layout {
 		}
 	}
 
+	if (flattenedChildren.length === 1) {
+		return flattenedChildren[0];
+	}
+
 	return {
 		type: "split-panel",
 		orientation: layout.orientation,

package/src/common/generate_grid.ts

@@ -85,7 +85,7 @@ function collectTrackPositions(
 
 function findTrackIndex(positions: number[], value: number): number {
 	for (let i = 0; i < positions.length; i++) {
-		if (Math.abs(positions[i] - value) < 0.0001) {
+		if (Math.abs(positions[i] - value) < GRID_TRACK_COLLAPSE_TOLERANCE) {
 			return i;
 		}
 	}
@@ -103,9 +103,10 @@ function buildCells(
 	rowEnd: number,
 ): GridCell[] {
 	if (panel.type === "child-panel") {
+		const selected = panel.selected ?? 0;
 		return [
 			{
-				child: panel.child,
+				child: panel.child[selected],
 				colStart: findTrackIndex(colPositions, colStart),
 				colEnd: findTrackIndex(colPositions, colEnd),
 				rowStart: findTrackIndex(rowPositions, rowStart),
@@ -203,7 +204,8 @@ export function create_css_grid_layout(
 	}
 
 	if (layout.type === "child-panel") {
-		return `${host_template("100%", "100%")}\n${child_template(layout.child, "1", "1")}`;
+		const selected = layout.selected ?? 0;
+		return `${host_template("100%", "100%")}\n${child_template(layout.child[selected], "1", "1")}`;
 	}
 
 	const colPositions = collectTrackPositions(layout, "horizontal", 0, 1);

package/src/common/insert_child.ts

@@ -29,22 +29,15 @@ export function insert_child(
 	child: string,
 	path: number[],
 	orientation: "horizontal" | "vertical" = "horizontal",
+	is_edge?: boolean,
 ): Layout {
 	if (path.length === 0) {
 		// Insert at root level
 		if (panel.type === "child-panel") {
-			// Convert single child-panel to split-panel with two children
+			// Add to existing child-panel as a tab
 			return {
-				type: "split-panel",
-				orientation,
-				children: [
-					panel,
-					{
-						type: "child-panel",
-						child,
-					},
-				],
-				sizes: [0.5, 0.5],
+				type: "child-panel",
+				child: [child, ...panel.child],
 			};
 		} else {
 			// Append to existing split-panel
@@ -52,7 +45,7 @@ export function insert_child(
 				...panel.children,
 				{
 					type: "child-panel",
-					child,
+					child: [child],
 				} as Layout,
 			];
 
@@ -78,15 +71,20 @@ export function insert_child(
 			sizes: [1],
 		};
 
-		return insert_child(newPanel, child, path, orientation);
+		return insert_child(newPanel, child, path, orientation, is_edge);
 	}
 
 	if (restPath.length === 0 || index === panel.children.length) {
+		if (is_edge && panel.children[index]?.type === "child-panel") {
+			panel.children[index].child.unshift(child);
+			return panel;
+		}
+
 		// Insert at this level at the specified index
 		const newChildren = [...panel.children];
 		newChildren.splice(index, 0, {
 			type: "child-panel",
-			child,
+			child: [child],
 		});
 
 		const numChildren = newChildren.length;
@@ -109,6 +107,7 @@ export function insert_child(
 			child,
 			restPath,
 			oppositeOrientation,
+			is_edge,
 		);
 
 		const newChildren = [...panel.children];
@@ -119,7 +118,14 @@ export function insert_child(
 		};
 	}
 
-	const updatedChild = insert_child(targetChild, child, restPath, orientation);
+	const updatedChild = insert_child(
+		targetChild,
+		child,
+		restPath,
+		orientation,
+		is_edge,
+	);
+
 	const newChildren = [...panel.children];
 	newChildren[index] = updatedChild;
 	return {

package/src/common/layout_config.ts

@@ -18,7 +18,7 @@ export const MINIMUM_REDISTRIBUTION_SIZE_THRESHOLD = 0.15;
 /**
  * Threshold from panel edge that is considered a split vs drop action.
  */
-export const SPLIT_EDGE_TOLERANCE = 0.15;
+export const SPLIT_EDGE_TOLERANCE = 0.25;
 
 /**
  * Tolerance threshold for considering two grid track positions as identical.
@@ -26,7 +26,17 @@ export const SPLIT_EDGE_TOLERANCE = 0.15;
  * When collecting and deduplicating track positions, any positions closer than
  * this value are treated as the same position to avoid redundant grid tracks.
  */
-export const GRID_TRACK_COLLAPSE_TOLERANCE = 0.0001;
+export const GRID_TRACK_COLLAPSE_TOLERANCE = 0.001;
+
+/**
+ * The overlay default behavior.
+ */
+export const OVERLAY_DEFAULT: OverlayMode = "absolute";
+
+/**
+ * The overlay behavior type.
+ */
+export type OverlayMode = "grid" | "absolute" | "interactive";
 
 /**
  * The representation of a CSS grid, in JSON form.
@@ -67,7 +77,8 @@ export interface SplitLayout {
  */
 export interface TabLayout {
 	type: "child-panel";
-	child: string;
+	child: string[];
+	selected?: number;
 }
 
 /**
@@ -91,11 +102,13 @@ export interface LayoutDivider {
 export interface LayoutPath<T = undefined> {
 	type: "layout-path";
 	slot: string;
+	panel: TabLayout;
 	path: number[];
 	view_window: ViewWindow;
 	column_offset: number;
 	row_offset: number;
 	orientation: Orientation;
+	is_edge: boolean;
 	box: T;
 }
 
@@ -112,7 +125,7 @@ export function* iter_panel_children(panel: Layout): Generator<string> {
 			yield* iter_panel_children(child);
 		}
 	} else {
-		yield panel.child;
+		yield* panel.child;
 	}
 }
 

package/src/common/redistribute_panel_sizes.ts

@@ -54,7 +54,11 @@ export function redistribute_panel_sizes(
 	if (current.type === "split-panel") {
 		const delta = deltas[current.orientation];
 		const index = path[path.length - 1];
-		current.sizes = add_and_redistribute(current.sizes, index, delta);
+
+		// It would be fun to remove this condition.
+		if (index < current.sizes.length - 1) {
+			current.sizes = add_and_redistribute(current.sizes, index, delta);
+		}
 	}
 
 	return result;

package/src/common/remove_child.ts

@@ -9,7 +9,7 @@
 // ┃  *  [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). *  ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-import type { Layout } from "./layout_config.ts";
+import type { Layout, TabLayout } from "./layout_config.ts";
 import { EMPTY_PANEL } from "./layout_config.ts";
 
 /**
@@ -24,10 +24,19 @@ import { EMPTY_PANEL } from "./layout_config.ts";
  * Returns `EMPTY_PANEL` if the last panel is removed.
  */
 export function remove_child(panel: Layout, child: string): Layout {
-	// If this is a child panel and it matches, we can't remove ourselves
-	// The caller should handle this case
+	// If this is a child panel, handle tab removal
 	if (panel.type === "child-panel") {
-		return structuredClone(EMPTY_PANEL);
+		if (panel.child.includes(child)) {
+			const newChild = panel.child.filter((c) => c !== child);
+			if (newChild.length === 0) {
+				return structuredClone(EMPTY_PANEL);
+			}
+			return {
+				type: "child-panel",
+				child: newChild,
+			};
+		}
+		return structuredClone(panel);
 	}
 
 	// Clone the panel structure
@@ -36,23 +45,36 @@ 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 === child;
+			return p.child.includes(child);
 		}
+
 		return false;
 	});
 
 	if (index !== -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);
+		const tab_layout = result.children[index] as TabLayout;
+		if (tab_layout.child.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);
+
+			// If only one child remains, collapse the split panel
+			if (newChildren.length === 1) {
+				return newChildren[0];
+			}
 
-		// If only one child remains, collapse the split panel
-		if (newChildren.length === 1) {
-			return newChildren[0];
+			result.children = newChildren;
+			result.sizes = newSizes;
+		} else {
+			tab_layout.child.splice(tab_layout.child.indexOf(child), 1);
+			if (
+				tab_layout.selected &&
+				tab_layout.selected >= tab_layout.child.length
+			) {
+				tab_layout.selected--;
+			}
 		}
 
-		result.children = newChildren;
-		result.sizes = newSizes;
 		return result;
 	}
 
@@ -64,8 +86,10 @@ export function remove_child(panel: Layout, child: string): Layout {
 			if (updated !== p) {
 				modified = true;
 			}
+
 			return updated;
 		}
+
 		return p;
 	});
 

package/src/extensions.ts

@@ -11,10 +11,10 @@
 
 import { RegularLayout } from "./regular-layout.ts";
 import { RegularLayoutFrame } from "./regular-layout-frame.ts";
-
-customElements.define("regular-layout-frame", RegularLayoutFrame);
+import { Layout } from "./common/layout_config.ts";
 
 customElements.define("regular-layout", RegularLayout);
+customElements.define("regular-layout-frame", RegularLayoutFrame);
 
 declare global {
 	interface Document {
@@ -37,4 +37,28 @@ declare global {
 		get(tagName: "regular-layout"): typeof RegularLayout;
 		get(tagName: "regular-layout-frame"): typeof RegularLayoutFrame;
 	}
+
+	interface HTMLElement {
+		addEventListener(
+			name: "regular-layout-update",
+			cb: (e: RegularLayoutEvent) => void,
+			options?: { signal: AbortSignal },
+		): void;
+
+		removeEventListener(name: "regular-layout-update", cb: any): void;
+	}
+}
+
+export interface RegularLayoutEvent extends CustomEvent {
+	detail: Layout;
+}
+
+export interface PerspectiveViewerElementExt {
+	addEventListener(
+		name: "regular-layout-update",
+		cb: (e: RegularLayoutEvent) => void,
+		options?: { signal: AbortSignal },
+	): void;
+
+	removeEventListener(name: "regular-layout-update", cb: any): void;
 }