regular-layout 0.2.2 → 0.3.0

package/dist/layout/calculate_edge.d.ts

@@ -2,7 +2,7 @@ import { type Physics } from "./constants";
 import type { Layout, LayoutPath } from "./types";
 /**
  * Calculates an insertion point (which may involve splitting a single
- * `"child-panel"` into a new `"split-panel"`), based on the  cursor position.
+ * `"tab-layout"` into a new `"split-layout"`), based on the  cursor position.
  * *
  * @param col - The cursor column.
  * @param row - The cursor row.
@@ -10,7 +10,7 @@ import type { Layout, LayoutPath } from "./types";
  * @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"`,
+ * @returns A new `LayoutPath` reflecting the updated (maybe) `"split-layout"`,
  * which is enough to draw the overlay.
  */
 export declare function calculate_edge(col: number, row: number, panel: Layout, slot: string, drop_target: LayoutPath, box?: DOMRect, physics?: Physics): LayoutPath;

package/dist/layout/calculate_path.d.ts

@@ -0,0 +1,12 @@
+import type { Layout } from "./types.ts";
+/**
+ * Calculates the index path for a panel with the given name.
+ *
+ * Traverses the layout tree to find the named panel and returns the
+ * index path describing its position in the tree.
+ *
+ * @param name - The name of the panel to find.
+ * @param layout - The layout tree to search.
+ * @returns The panel's index path if found, `null` otherwise.
+ */
+export declare function calculate_path(name: string, layout: Layout): number[] | null;

package/dist/layout/generate_grid.d.ts

@@ -14,11 +14,11 @@ import type { Layout } from "./types.ts";
  * @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]
  * };

package/dist/layout/insert_child.d.ts

@@ -1,4 +1,4 @@
-import type { Layout } from "./types.ts";
+import type { Layout, LayoutPathTraversal } from "./types.ts";
 /**
  * Inserts a new child panel into the layout tree at a specified location.
  * Creates a split panel if necessary and redistributes sizes equally among all
@@ -13,4 +13,4 @@ import type { Layout } from "./types.ts";
  * @param is_edge - If true, create the split at the parent level.
  * @returns A new layout tree with the child inserted (original is not mutated).
  */
-export declare function insert_child(panel: Layout, child: string, path: number[], orientation?: "horizontal" | "vertical"): Layout;
+export declare function insert_child(panel: Layout, child: string, path: LayoutPathTraversal, orientation?: "horizontal" | "vertical"): Layout;

package/dist/layout/redistribute_panel_sizes.d.ts

@@ -1,4 +1,4 @@
-import type { Layout } from "./types.ts";
+import type { Layout, LayoutPathTraversal } from "./types.ts";
 /**
  * Adjusts panel sizes during a drag operation on a divider.
  *
@@ -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 | undefined, physics?: import("./constants.ts").Physics): Layout;
+export declare function redistribute_panel_sizes(panel: Layout, path: LayoutPathTraversal, delta: number | undefined, physics?: import("./constants.ts").Physics): Layout;

package/dist/layout/types.d.ts

@@ -32,7 +32,7 @@ export interface ViewWindow {
  * opposite `orientation` as its parent.
  */
 export interface SplitLayout {
-    type: "split-panel";
+    type: "split-layout";
     children: Layout[];
     sizes: number[];
     orientation: Orientation;
@@ -41,17 +41,21 @@ export interface SplitLayout {
  * A leaf panel node that contains a single named child element.
  */
 export interface TabLayout {
-    type: "child-panel";
+    type: "tab-layout";
     tabs: string[];
     selected?: number;
 }
+/**
+ * Represents a panel location relative to a `Layout` struct.
+ */
+export type LayoutPathTraversal = number[];
 /**
  * Represents a draggable divider between two panels in the layout.
  *
  * Used for hit detection.
  */
 export interface LayoutDivider {
-    path: number[];
+    path: LayoutPathTraversal;
     view_window: ViewWindow;
     type: Orientation;
 }
@@ -61,7 +65,7 @@ export interface LayoutDivider {
 export interface LayoutPath {
     type: "layout-path";
     slot: string;
-    path: number[];
+    path: LayoutPathTraversal;
     view_window: ViewWindow;
     column: number;
     row: number;

package/dist/regular-layout.d.ts

@@ -1,4 +1,4 @@
-import type { LayoutPath, Layout, TabLayout, OverlayMode, Orientation } from "./layout/types.ts";
+import type { LayoutPath, Layout, TabLayout, OverlayMode, Orientation, LayoutPathTraversal } from "./layout/types.ts";
 import { type PhysicsUpdate, type Physics } from "./layout/constants.ts";
 /**
  * An interface which models the fields of `PointerEvent` that
@@ -78,6 +78,13 @@ export declare class RegularLayout extends HTMLElement {
      * @returns Panel information if a panel is at that position, null otherwise.
      */
     calculateIntersect: (coordinates: PointerEventCoordinates) => LayoutPath | null;
+    /**
+     * 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;
     /**
      * Sets the visual overlay state during drag-and-drop operations.
      * Displays a preview of where a panel would be placed at the given coordinates.
@@ -117,7 +124,7 @@ export declare 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: (name: string, path?: number[], split?: boolean | Orientation) => void;
+    insertPanel: (name: string, path?: LayoutPathTraversal, split?: boolean | Orientation) => void;
     /**
      * Removes a panel from the layout by name.
      *

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "regular-layout",
-	"version": "0.2.2",
+	"version": "0.3.0",
 	"description": "A regular CSS `grid` container",
 	"keywords": [],
 	"license": "Apache-2.0",

package/src/layout/calculate_edge.ts

@@ -11,11 +11,17 @@
 
 import { DEFAULT_PHYSICS, type Physics } from "./constants";
 import { insert_child } from "./insert_child";
-import type { Layout, LayoutPath, Orientation, ViewWindow } from "./types";
+import type {
+	Layout,
+	LayoutPath,
+	LayoutPathTraversal,
+	Orientation,
+	ViewWindow,
+} from "./types";
 
 /**
  * Calculates an insertion point (which may involve splitting a single
- * `"child-panel"` into a new `"split-panel"`), based on the  cursor position.
+ * `"tab-layout"` into a new `"split-layout"`), based on the  cursor position.
  * *
  * @param col - The cursor column.
  * @param row - The cursor row.
@@ -23,7 +29,7 @@ import type { Layout, LayoutPath, Orientation, ViewWindow } from "./types";
  * @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"`,
+ * @returns A new `LayoutPath` reflecting the updated (maybe) `"split-layout"`,
  * which is enough to draw the overlay.
  */
 export function calculate_edge(
@@ -133,7 +139,7 @@ function insert_root_edge(
 	panel: Layout,
 	slot: string,
 	drop_target: LayoutPath,
-	path: number[],
+	path: LayoutPathTraversal,
 	is_before: boolean,
 	orientation: Orientation,
 ): LayoutPath {
@@ -153,7 +159,7 @@ function insert_axis(
 	is_before: boolean,
 	axis_orientation: Orientation,
 ): LayoutPath {
-	let result_path: number[];
+	let result_path: LayoutPathTraversal;
 
 	if (drop_target.orientation === axis_orientation) {
 		// Same orientation - insert into existing split
@@ -183,7 +189,10 @@ function insert_axis(
 	};
 }
 
-function calculate_view_window(panel: Layout, path: number[]): ViewWindow {
+function calculate_view_window(
+	panel: Layout,
+	path: LayoutPathTraversal,
+): ViewWindow {
 	let view_window: ViewWindow = {
 		row_start: 0,
 		row_end: 1,
@@ -193,7 +202,7 @@ function calculate_view_window(panel: Layout, path: number[]): ViewWindow {
 
 	let current_panel = panel;
 	for (const step of path) {
-		if (current_panel.type === "child-panel") {
+		if (current_panel.type === "tab-layout") {
 			break;
 		}
 

package/src/layout/calculate_intersect.ts

@@ -9,7 +9,13 @@
 // ┃  *  [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). *  ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-import type { LayoutPath, LayoutDivider, Layout, ViewWindow } from "./types.ts";
+import type {
+	LayoutPath,
+	LayoutDivider,
+	Layout,
+	ViewWindow,
+	LayoutPathTraversal,
+} from "./types.ts";
 
 const VIEW_WINDOW = {
 	row_start: 0,
@@ -67,14 +73,14 @@ function calculate_intersection_recursive(
 	check_dividers: { rect: DOMRect; size: number } | null,
 	parent_orientation: "horizontal" | "vertical" | null = null,
 	view_window: ViewWindow = structuredClone(VIEW_WINDOW),
-	path: number[] = [],
+	path: LayoutPathTraversal = [],
 ): 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") {
+	if (panel.type === "tab-layout") {
 		const selected = panel.selected ?? 0;
 		const col_width = view_window.col_end - view_window.col_start;
 		const row_height = view_window.row_end - view_window.row_start;

package/src/layout/calculate_path.ts

@@ -0,0 +1,53 @@
+// ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
+// ░░░░░░░░▄▀░█▀▄░█▀▀░█▀▀░█░█░█░░░█▀█░█▀▄░░░░░█░░░█▀█░█░█░█▀█░█░█░▀█▀░▀▄░░░░░░░░
+// ░░░░░░░▀▄░░█▀▄░█▀▀░█░█░█░█░█░░░█▀█░█▀▄░▀▀▀░█░░░█▀█░░█░░█░█░█░█░░█░░░▄▀░░░░░░░
+// ░░░░░░░░░▀░▀░▀░▀▀▀░▀▀▀░▀▀▀░▀▀▀░▀░▀░▀░▀░░░░░▀▀▀░▀░▀░░▀░░▀▀▀░▀▀▀░░▀░░▀░░░░░░░░░
+// ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃  *  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, LayoutPathTraversal } from "./types.ts";
+
+/**
+ * Calculates the index path for a panel with the given name.
+ *
+ * Traverses the layout tree to find the named panel and returns the
+ * index path describing its position in the tree.
+ *
+ * @param name - The name of the panel to find.
+ * @param layout - The layout tree to search.
+ * @returns The panel's index path if found, `null` otherwise.
+ */
+export function calculate_path(name: string, layout: Layout): number[] | null {
+	return calculate_path_recursive(name, layout, []);
+}
+
+function calculate_path_recursive(
+	name: string,
+	panel: Layout,
+	path: LayoutPathTraversal,
+): number[] | null {
+	if (panel.type === "tab-layout") {
+		if (!panel.tabs.includes(name)) {
+			return null;
+		}
+
+		return path;
+	}
+
+	for (let i = 0; i < panel.children.length; i++) {
+		const result = calculate_path_recursive(name, panel.children[i], [
+			...path,
+			i,
+		]);
+
+		if (result) {
+			return result;
+		}
+	}
+
+	return null;
+}

package/src/layout/flatten.ts

@@ -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

@@ -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/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 "./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

@@ -10,7 +10,7 @@
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
 import { DEFAULT_PHYSICS } from "./constants.ts";
-import type { Layout } from "./types.ts";
+import type { Layout, LayoutPathTraversal } from "./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

@@ -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/layout/types.ts

@@ -47,7 +47,7 @@ export interface ViewWindow {
  * opposite `orientation` as its parent.
  */
 export interface SplitLayout {
-	type: "split-panel";
+	type: "split-layout";
 	children: Layout[];
 	sizes: number[];
 	orientation: Orientation;
@@ -57,18 +57,23 @@ export interface SplitLayout {
  * A leaf panel node that contains a single named child element.
  */
 export interface TabLayout {
-	type: "child-panel";
+	type: "tab-layout";
 	tabs: string[];
 	selected?: number;
 }
 
+/**
+ * Represents a panel location relative to a `Layout` struct.
+ */
+export type LayoutPathTraversal = number[];
+
 /**
  * Represents a draggable divider between two panels in the layout.
  *
  * Used for hit detection.
  */
 export interface LayoutDivider {
-	path: number[];
+	path: LayoutPathTraversal;
 	view_window: ViewWindow;
 	type: Orientation;
 }
@@ -79,7 +84,7 @@ export interface LayoutDivider {
 export interface LayoutPath {
 	type: "layout-path";
 	slot: string;
-	path: number[];
+	path: LayoutPathTraversal;
 	view_window: ViewWindow;
 	column: number;
 	row: number;
@@ -94,7 +99,7 @@ export interface LayoutPath {
  * An empty `Layout` with no panels.
  */
 export const EMPTY_PANEL: Layout = {
-	type: "split-panel",
+	type: "split-layout",
 	orientation: "horizontal",
 	sizes: [],
 	children: [],

package/src/regular-layout-frame.ts

@@ -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.ts

@@ -25,6 +25,7 @@ import type {
 	TabLayout,
 	OverlayMode,
 	Orientation,
+	LayoutPathTraversal,
 } from "./layout/types.ts";
 import { calculate_intersection } from "./layout/calculate_intersect.ts";
 import { remove_child } from "./layout/remove_child.ts";
@@ -33,6 +34,7 @@ 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 { flatten } from "./layout/flatten.ts";
+import { calculate_path } from "./layout/calculate_path.ts";
 import {
 	DEFAULT_PHYSICS,
 	type PhysicsUpdate,
@@ -151,6 +153,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.
@@ -290,7 +302,7 @@ export class RegularLayout extends HTMLElement {
 	 */
 	insertPanel = (
 		name: string,
-		path: number[] = [],
+		path: LayoutPathTraversal = [],
 		split?: boolean | Orientation,
 	) => {
 		let orientation: Orientation | undefined;
@@ -320,7 +332,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;
 			}