regular-layout 0.1.0 → 0.2.0

package/dist/{common → layout}/calculate_edge.d.ts

@@ -1,4 +1,4 @@
-import type { Layout, LayoutPath } from "./layout_config";
+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.
@@ -12,4 +12,4 @@ import type { Layout, LayoutPath } from "./layout_config";
  * @returns A new `LayoutPath` reflecting the updated (maybe) `"split-panel"`,
  * which is enough to draw the overlay.
  */
-export declare function calculate_edge(col: number, row: number, panel: Layout, slot: string, drop_target: LayoutPath): LayoutPath;
+export declare function calculate_edge(col: number, row: number, panel: Layout, slot: string, drop_target: LayoutPath, box?: DOMRect): LayoutPath;

package/dist/{common → layout}/calculate_intersect.d.ts

@@ -1,18 +1,16 @@
-import type { LayoutPath, LayoutDivider, Layout } from "./layout_config.ts";
+import type { LayoutPath, LayoutDivider, Layout } from "./types.ts";
 /**
  * Determines which panel or divider is located at a given position in the
  * layout.
  *
- * @param row - Vertical position as a fraction (0-1) of the container
- * height
- * @param column - Horizontal position as a fraction (0-1) of the
- * container width
+ * @param column - Horizontal position as a fraction (0-1) of the container width
+ * @param row - Vertical position as a fraction (0-1) of the container height
  * @param layout - The layout tree to search
  * @param check_dividers - Whether `LayoutDivider` intersection should be
- * checked, which oyu may not want for e.g. `drop` actions.
+ * checked, which you may not want for e.g. `drop` actions.
  * @returns The panel path if over a panel, a divider if over a resizable
  * boundary, or null if outside all panels
  */
-export declare function calculate_intersection(column: number, row: number, layout: Layout, check_dividers: false): LayoutPath;
-export declare function calculate_intersection(column: number, row: number, layout: Layout, check_dividers: true): LayoutPath | null | LayoutDivider;
-export declare function calculate_intersection(column: number, row: number, layout: Layout, check_dividers?: boolean): LayoutPath | null | LayoutDivider;
+export declare function calculate_intersection(column: number, row: number, layout: Layout, check_dividers?: null): LayoutPath | null;
+export declare function calculate_intersection(column: number, row: number, layout: Layout, check_dividers?: DOMRect): LayoutPath | null | LayoutDivider;
+export declare function calculate_intersection(column: number, row: number, layout: Layout, check_dividers?: DOMRect | null): LayoutPath | null | LayoutDivider;

package/dist/{common → layout}/constants.d.ts

@@ -1,4 +1,9 @@
-import type { OverlayMode } from "./layout_config";
+import type { OverlayMode } from "./types";
+/**
+ * The prefix to use for `CustomEvent`s generated by `regular-layout`, e.g.
+ * `"regular-layout-before-update"`.
+ */
+export declare const CUSTOM_EVENT_NAME_PREFIX = "regular-layout";
 /**
  * The minimum number of pixels the mouse must move to be considered a drag.
  */
@@ -16,6 +21,11 @@ export declare const MINIMUM_REDISTRIBUTION_SIZE_THRESHOLD = 0.15;
  * Threshold from panel edge that is considered a split vs drop action.
  */
 export declare const SPLIT_EDGE_TOLERANCE = 0.25;
+/**
+ * Threshold from _container_ edge that is considered a split action on the root
+ * node.
+ */
+export declare const SPLIT_ROOT_EDGE_TOLERANCE = 0.01;
 /**
  * Tolerance threshold for considering two grid track positions as identical.
  *
@@ -27,3 +37,7 @@ export declare const GRID_TRACK_COLLAPSE_TOLERANCE = 0.001;
  * The overlay default behavior.
  */
 export declare const OVERLAY_DEFAULT: OverlayMode;
+/**
+ * Width of split panel dividers in pixels (for hit-test purposes).
+ */
+export declare const GRID_DIVIDER_SIZE = 6;

package/dist/{common → layout}/flatten.d.ts

@@ -1,4 +1,4 @@
-import type { Layout } from "./layout_config.ts";
+import type { Layout } from "./types.ts";
 /**
  * Flattens the layout tree by merging parent and child split panels that have
  * the same orientation and type.

package/dist/{common → layout}/generate_grid.d.ts

@@ -1,4 +1,4 @@
-import type { Layout } from "./layout_config.ts";
+import type { Layout } from "./types.ts";
 /**
  * Generates CSS Grid styles to render a layout tree.
  * Creates grid-template-rows, grid-template-columns, and positioning rules for
@@ -25,8 +25,8 @@ import type { Layout } from "./layout_config.ts";
  * const css = create_css_grid_layout(layout);
  * // Returns CSS like:
  * // :host { display: grid; grid-template-columns: 25% 75%; ... }
- * // :host ::slotted([slot=sidebar]) { grid-column: 1; grid-row: 1; }
- * // :host ::slotted([slot=main]) { grid-column: 2; grid-row: 1; }
+ * // :host ::slotted([name=sidebar]) { grid-column: 1; grid-row: 1; }
+ * // :host ::slotted([name=main]) { grid-column: 2; grid-row: 1; }
  * ```
  */
 export declare function create_css_grid_layout(layout: Layout, round?: boolean, overlay?: [string, string]): string;

package/dist/layout/generate_overlay.d.ts

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

package/dist/{common → layout}/insert_child.d.ts

@@ -1,4 +1,4 @@
-import type { Layout } from "./layout_config.ts";
+import type { Layout } 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
@@ -10,6 +10,7 @@ import type { Layout } from "./layout_config.ts";
  * at root level.
  * @param orientation - Orientation for newly created split panels. Defaults to
  * "horizontal".
+ * @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", is_edge?: boolean): Layout;
+export declare function insert_child(panel: Layout, child: string, path: number[], orientation?: "horizontal" | "vertical"): Layout;

package/dist/{common → layout}/redistribute_panel_sizes.d.ts

@@ -1,4 +1,4 @@
-import type { Layout } from "./layout_config.ts";
+import type { Layout } from "./types.ts";
 /**
  * Adjusts panel sizes during a drag operation on a divider.
  *

package/dist/{common → layout}/remove_child.d.ts

@@ -1,4 +1,4 @@
-import type { Layout } from "./layout_config.ts";
+import type { Layout } from "./types.ts";
 /**
  * Removes a child panel from the layout tree by its name.
  *

package/dist/{common/layout_config.d.ts → layout/types.d.ts}

@@ -25,6 +25,11 @@ export interface ViewWindow {
  * Child panels are arranged either horizontally (side by side) or vertically
  * (stacked), via the `orientation` property `"horizzontal"` and `"vertical"`
  * (respectively).
+ *
+ * While the type structure of `SplitLayout` allows nesting levels with the same
+ * `orientation`, calling `RegularLayout.restore` with such a `Layout` will be
+ * flattened to the equivalent layout with every child guaranteed to have the
+ * opposite `orientation` as its parent.
  */
 export interface SplitLayout {
     type: "split-panel";
@@ -60,7 +65,6 @@ export interface LayoutDivider {
 export interface LayoutPath<T = undefined> {
     type: "layout-path";
     slot: string;
-    panel: TabLayout;
     path: number[];
     view_window: ViewWindow;
     column: number;
@@ -69,16 +73,8 @@ export interface LayoutPath<T = undefined> {
     row_offset: number;
     orientation: Orientation;
     is_edge: boolean;
-    box: T;
+    layout: T;
 }
-/**
- * Recursively iterates over all child panel names in the layout tree, yielding
- * panel names in depth-first order.
- *
- * @param panel - The layout tree to iterate over
- * @returns Generator yielding child panel names
- */
-export declare function iter_panel_children(panel: Layout): Generator<string>;
 /**
  * An empty `Layout` with no panels.
  */

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

@@ -17,7 +17,7 @@
  * @example
  * ```html
  * <regular-layout>
- *     <regular-layout-frame slot="panel-1">
+ *     <regular-layout-frame name="panel-1">
  *         <!-- Panel content here -->
  *     </regular-layout-frame>
  * </regular-layout>
@@ -31,7 +31,6 @@ export declare class RegularLayoutFrame extends HTMLElement {
     private _drag_state;
     private _drag_moved;
     private _tab_to_index_map;
-    private _tab_panel_state;
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
@@ -40,6 +39,4 @@ export declare class RegularLayoutFrame extends HTMLElement {
     private onPointerUp;
     private onPointerLost;
     private drawTabs;
-    private createTab;
-    private onTabClick;
 }

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

@@ -0,0 +1,26 @@
+import type { TabLayout } from "./layout/types.ts";
+import type { RegularLayout } from "./regular-layout.ts";
+/**
+ * A custom HTML element representing an individual tab in a tab panel.
+ *
+ * This element manages the visual representation and interactions for a single tab,
+ * including selection state, close functionality, and content display.
+ */
+export declare class RegularLayoutTab extends HTMLElement {
+    private _layout?;
+    private _tab_panel?;
+    private _index?;
+    /**
+     * Populates or updates the tab with layout information.
+     *
+     * This method initializes the tab's content and event listeners on first call,
+     * and efficiently updates only the changed properties on subsequent calls.
+     *
+     * @param layout - The parent RegularLayout instance managing this tab.
+     * @param tab_panel - The tab panel layout containing this tab.
+     * @param index - The index of this tab within the tab panel.
+     */
+    populate: (layout: RegularLayout, tab_panel: TabLayout, index: number) => void;
+    private onTabClose;
+    private onTabClick;
+}

package/dist/regular-layout.d.ts

@@ -1,4 +1,4 @@
-import type { LayoutPath, Layout, TabLayout, OverlayMode } from "./common/layout_config.ts";
+import type { LayoutPath, Layout, TabLayout, OverlayMode, Orientation } from "./layout/types.ts";
 /**
  * A Web Component that provides a resizable panel layout system.
  * Panels are arranged using CSS Grid and can be resized by dragging dividers.
@@ -8,8 +8,8 @@ import type { LayoutPath, Layout, TabLayout, OverlayMode } from "./common/layout
  * @example
  * ```html
  * <regular-layout>
- *   <div slot="sidebar">Sidebar content</div>
- *   <div slot="main">Main content</div>
+ *   <div name="sidebar">Sidebar content</div>
+ *   <div name="main">Main content</div>
  * </regular-layout>
  * ```
  *
@@ -36,12 +36,21 @@ export declare class RegularLayout extends HTMLElement {
     private _shadowRoot;
     private _panel;
     private _stylesheet;
-    private _dragPath?;
-    private _slots;
-    private _unslotted_slot;
+    private _cursor_stylesheet;
+    private _drag_target?;
+    private _cursor_override;
+    private _dimensions?;
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
+    /**
+     * Determines which panel is at a given screen coordinate.
+     *
+     * @param column - X coordinate in screen pixels.
+     * @param row - Y coordinate 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;
     /**
      * Sets the visual overlay state during drag-and-drop operations.
      * Displays a preview of where a panel would be placed at the given coordinates.
@@ -69,14 +78,19 @@ 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<unknown>, className?: string, mode?: OverlayMode) => void;
+    clearOverlayState: (x: number, y: number, drag_target: LayoutPath<Layout>, className?: string) => void;
     /**
      * Inserts a new panel into the layout at a specified path.
      *
      * @param name - Unique identifier for the new panel.
      * @param path - Index path defining where to insert.
+     * @param split - Force a split in the layout at the end of `path`
+     *     regardless if there is a leaf at this position or not. Optionally,
+     *.    `split` may be your preferred `Orientation`, which will be used by
+     *     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[]) => void;
+    insertPanel: (name: string, path?: number[], split?: boolean | Orientation) => void;
     /**
      * Removes a panel from the layout by name.
      *
@@ -91,14 +105,6 @@ export declare class RegularLayout extends HTMLElement {
      * @returns The TabLayout containing the panel if found, null otherwise.
      */
     getPanel: (name: string, layout?: Layout) => TabLayout | null;
-    /**
-     * Determines which panel is at a given screen coordinate.
-     *
-     * @param column - X coordinate in screen pixels.
-     * @param row - Y coordinate in screen pixels.
-     * @returns Panel information if a panel is at that position, null otherwise.
-     */
-    calculateIntersect: (x: number, y: number, check_dividers?: boolean) => LayoutPath<DOMRect> | null;
     /**
      * Clears the entire layout, unslotting all panels.
      */
@@ -142,8 +148,7 @@ export declare class RegularLayout extends HTMLElement {
      *   - row: Normalized Y coordinate (0 = top edge, 1 = bottom edge)
      *   - box: The layout element's bounding rectangle
      */
-    relativeCoordinates: (clientX: number, clientY: number) => [number, number, DOMRect];
-    private updateSlots;
+    relativeCoordinates: (clientX: number, clientY: number, recalculate_bounds?: boolean) => [number, number, DOMRect, CSSStyleDeclaration];
     private onPointerDown;
     private onPointerMove;
     private onPointerUp;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "regular-layout",
-	"version": "0.1.0",
+	"version": "0.2.0",
 	"description": "A regular CSS `grid` container",
 	"keywords": [],
 	"license": "Apache-2.0",
@@ -9,18 +9,20 @@
 		"url": "https://github.com/texodus/regular-layout"
 	},
 	"browser": "dist/index.js",
+	"main": "dist/index.js",
 	"type": "module",
 	"files": [
 		"dist/**/*",
-		"src/**/*"
+		"src/**/*",
+		"themes/**/*"
 	],
 	"scripts": {
-		"build": "node build.mjs",
-		"build:watch": "node build.mjs --watch",
+		"build": "tsx build.ts",
+		"build:watch": "tsx build.ts --watch",
 		"clean": "rm -rf dist",
 		"test": "playwright test",
-		"example": "npx http-server . -p 8000",
-		"deploy": "node deploy.mjs",
+		"example": "tsx serve.ts",
+		"deploy": "tsx deploy.ts",
 		"lint": "biome lint src tests",
 		"format": "biome format --write src tests",
 		"check": "biome check --write src tests"
@@ -30,7 +32,7 @@
 		"@playwright/test": "^1.57.0",
 		"@types/node": "^22.10.5",
 		"esbuild": "^0.27.2",
-		"http-server": "^14.1.1",
+		"tsx": "^4.21.0",
 		"typescript": "^5.9.3"
 	}
 }

package/src/extensions.ts

@@ -11,10 +11,12 @@
 
 import { RegularLayout } from "./regular-layout.ts";
 import { RegularLayoutFrame } from "./regular-layout-frame.ts";
-import type { Layout } from "./common/layout_config.ts";
+import type { Layout } from "./layout/types.ts";
+import { RegularLayoutTab } from "./regular-layout-tab.ts";
 
 customElements.define("regular-layout", RegularLayout);
 customElements.define("regular-layout-frame", RegularLayoutFrame);
+customElements.define("regular-layout-tab", RegularLayoutTab);
 
 declare global {
 	interface Document {
@@ -28,9 +30,15 @@ declare global {
 			options?: ElementCreationOptions,
 		): RegularLayoutFrame;
 
+		createElement(
+			tagName: "regular-layout-tab",
+			options?: ElementCreationOptions,
+		): RegularLayoutTab;
+
 		querySelector<E extends Element = Element>(selectors: string): E | null;
 		querySelector(selectors: "regular-layout"): RegularLayout | null;
 		querySelector(selectors: "regular-layout-frame"): RegularLayoutFrame | null;
+		querySelector(selectors: "regular-layout-tab"): RegularLayoutTab | null;
 	}
 
 	interface CustomElementRegistry {
@@ -63,6 +71,4 @@ declare global {
 	}
 }
 
-export interface RegularLayoutEvent extends CustomEvent {
-	detail: Layout;
-}
+export type RegularLayoutEvent = CustomEvent<Layout>;

package/src/index.ts

@@ -19,8 +19,8 @@
  *
  * ```html
  * <regular-layout>
- *   <regular-layout-frame slot="sidebar">Sidebar content</regular-layout-frame>
- *   <regular-layout-frame slot="main">Main content</regular-layout-frame>
+ *   <regular-layout-frame name="sidebar">Sidebar content</regular-layout-frame>
+ *   <regular-layout-frame name="main">Main content</regular-layout-frame>
  * </regular-layout>
  * ```
  *
@@ -59,11 +59,7 @@
  * @packageDocumentation
  */
 
-export type {
-	LayoutPath,
-	Layout,
-	LayoutDivider,
-} from "./common/layout_config.ts";
+export type * from "./layout/types.ts";
 
 export { RegularLayout } from "./regular-layout.ts";
 export { RegularLayoutFrame } from "./regular-layout-frame.ts";

package/src/layout/calculate_edge.ts

@@ -0,0 +1,209 @@
+// ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
+// ░░░░░░░░▄▀░█▀▄░█▀▀░█▀▀░█░█░█░░░█▀█░█▀▄░░░░░█░░░█▀█░█░█░█▀█░█░█░▀█▀░▀▄░░░░░░░░
+// ░░░░░░░▀▄░░█▀▄░█▀▀░█░█░█░█░█░░░█▀█░█▀▄░▀▀▀░█░░░█▀█░░█░░█░█░█░█░░█░░░▄▀░░░░░░░
+// ░░░░░░░░░▀░▀░▀░▀▀▀░▀▀▀░▀▀▀░▀▀▀░▀░▀░▀░▀░░░░░▀▀▀░▀░▀░░▀░░▀▀▀░▀▀▀░░▀░░▀░░░░░░░░░
+// ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃  *  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 { SPLIT_EDGE_TOLERANCE, SPLIT_ROOT_EDGE_TOLERANCE } from "./constants";
+import { insert_child } from "./insert_child";
+import type { Layout, LayoutPath, 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.
+ * *
+ * @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_edge(
+	col: number,
+	row: number,
+	panel: Layout,
+	slot: string,
+	drop_target: LayoutPath,
+	box?: DOMRect,
+): LayoutPath {
+	// Check root edges first
+	if (col < SPLIT_ROOT_EDGE_TOLERANCE) {
+		return insert_root_edge(panel, slot, drop_target, [0], true, "horizontal");
+	}
+
+	if (col > 1 - SPLIT_ROOT_EDGE_TOLERANCE) {
+		return insert_root_edge(
+			panel,
+			slot,
+			drop_target,
+			drop_target.path.length > 0 ? drop_target.path : [],
+			false,
+			"horizontal",
+		);
+	}
+
+	if (row < SPLIT_ROOT_EDGE_TOLERANCE) {
+		return insert_root_edge(panel, slot, drop_target, [0], true, "vertical");
+	}
+
+	if (row > 1 - SPLIT_ROOT_EDGE_TOLERANCE) {
+		return insert_root_edge(panel, slot, drop_target, [], false, "vertical");
+	}
+
+	// Check panel edges
+	const is_column_edge =
+		drop_target.column_offset < SPLIT_EDGE_TOLERANCE ||
+		drop_target.column_offset > 1 - SPLIT_EDGE_TOLERANCE;
+
+	const is_row_edge =
+		drop_target.row_offset < SPLIT_EDGE_TOLERANCE ||
+		drop_target.row_offset > 1 - SPLIT_EDGE_TOLERANCE;
+
+	// If both edges triggered, choose closer axis
+	if (is_column_edge && is_row_edge) {
+		const col_distance = Math.abs(drop_target.column_offset - 0.5);
+		const row_distance = Math.abs(drop_target.row_offset - 0.5);
+		const col_scale =
+			(box?.width || 1) *
+			(drop_target.view_window.col_end - drop_target.view_window.col_start);
+
+		const row_scale =
+			(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;
+
+		return insert_axis(
+			panel,
+			slot,
+			drop_target,
+			use_column
+				? drop_target.column_offset < SPLIT_EDGE_TOLERANCE
+				: drop_target.row_offset < SPLIT_EDGE_TOLERANCE,
+			use_column ? "horizontal" : "vertical",
+		);
+	}
+
+	if (is_column_edge) {
+		return insert_axis(
+			panel,
+			slot,
+			drop_target,
+			drop_target.column_offset < SPLIT_EDGE_TOLERANCE,
+			"horizontal",
+		);
+	}
+
+	if (is_row_edge) {
+		return insert_axis(
+			panel,
+			slot,
+			drop_target,
+			drop_target.row_offset < SPLIT_EDGE_TOLERANCE,
+			"vertical",
+		);
+	}
+
+	// Not at an edge - insert as a tab
+	return {
+		...drop_target,
+		path: [...drop_target.path, 0],
+	};
+}
+
+function insert_root_edge(
+	panel: Layout,
+	slot: string,
+	drop_target: LayoutPath,
+	path: number[],
+	is_before: boolean,
+	orientation: Orientation,
+): LayoutPath {
+	return insert_axis(
+		panel,
+		slot,
+		{ ...drop_target, path, orientation },
+		is_before,
+		orientation,
+	);
+}
+
+function insert_axis(
+	panel: Layout,
+	slot: string,
+	drop_target: LayoutPath,
+	is_before: boolean,
+	axis_orientation: Orientation,
+): LayoutPath {
+	let result_path: number[];
+
+	if (drop_target.orientation === axis_orientation) {
+		// Same orientation - insert into existing split
+		if (drop_target.path.length === 0) {
+			result_path = [is_before ? 0 : 1];
+		} else {
+			const last_index = drop_target.path[drop_target.path.length - 1];
+			result_path = [
+				...drop_target.path.slice(0, -1),
+				is_before ? last_index : last_index + 1,
+			];
+		}
+	} else {
+		// Different orientation - split the child panel
+		result_path = [...drop_target.path, is_before ? 0 : 1];
+	}
+
+	const new_panel = insert_child(panel, slot, result_path, axis_orientation);
+	const view_window = calculate_view_window(new_panel, result_path);
+	return {
+		...drop_target,
+		path: result_path,
+		slot: drop_target.slot,
+		is_edge: true,
+		orientation: axis_orientation,
+		view_window,
+	};
+}
+
+function calculate_view_window(panel: Layout, path: number[]): ViewWindow {
+	let view_window: ViewWindow = {
+		row_start: 0,
+		row_end: 1,
+		col_start: 0,
+		col_end: 1,
+	};
+
+	let current_panel = panel;
+	for (const step of path) {
+		if (current_panel.type === "child-panel") {
+			break;
+		}
+
+		const index = Math.min(step, current_panel.children.length - 1);
+		const is_vertical = current_panel.orientation === "vertical";
+		const start_key = is_vertical ? "row_start" : "col_start";
+		const end_key = is_vertical ? "row_end" : "col_end";
+		const total_size = view_window[end_key] - view_window[start_key];
+		const offset = current_panel.sizes
+			.slice(0, index)
+			.reduce((sum, size) => sum + size * total_size, view_window[start_key]);
+
+		view_window = {
+			...view_window,
+			[start_key]: offset,
+			[end_key]: offset + total_size * current_panel.sizes[index],
+		};
+
+		current_panel = current_panel.children[index];
+	}
+
+	return view_window;
+}