regular-layout 0.2.0 → 0.2.2

package/dist/layout/calculate_edge.d.ts

@@ -1,3 +1,4 @@
+import { type Physics } from "./constants";
 import type { Layout, LayoutPath } from "./types";
 /**
  * Calculates an insertion point (which may involve splitting a single
@@ -12,4 +13,4 @@ import type { Layout, LayoutPath } from "./types";
  * @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, box?: DOMRect): LayoutPath;
+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_intersect.d.ts

@@ -12,5 +12,11 @@ import type { LayoutPath, LayoutDivider, Layout } from "./types.ts";
  * boundary, or null if outside all panels
  */
 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;
+export declare function calculate_intersection(column: number, row: number, layout: Layout, check_dividers?: {
+    rect: DOMRect;
+    size: number;
+}): LayoutPath | null | LayoutDivider;
+export declare function calculate_intersection(column: number, row: number, layout: Layout, check_dividers?: {
+    rect: DOMRect;
+    size: number;
+} | null): LayoutPath | null | LayoutDivider;

package/dist/layout/constants.d.ts

@@ -1,43 +1,81 @@
 import type { OverlayMode } from "./types";
 /**
- * The prefix to use for `CustomEvent`s generated by `regular-layout`, e.g.
- * `"regular-layout-before-update"`.
+ * Instance-specific constants which define the behavior and rendering details
+ * of a `<regular-layout>`.
  */
-export declare const CUSTOM_EVENT_NAME_PREFIX = "regular-layout";
+export interface Physics {
+    /**
+     * The prefix to use for `CustomEvent`s generated by `regular-layout`, e.g.
+     * `"regular-layout-before-update"`.
+     */
+    CUSTOM_EVENT_NAME_PREFIX: string;
+    /**
+     * The attribute name to use for matching child `Element`s to grid
+     * positions.
+     */
+    CHILD_ATTRIBUTE_NAME: string;
+    /**
+     * The minimum number of pixels the mouse must move to be considered a drag.
+     */
+    MIN_DRAG_DISTANCE: number;
+    /**
+     * Should floating point pixel calculations be rounded. Useful for testing.
+     */
+    SHOULD_ROUND: boolean;
+    /**
+     * Class name to use for child elements in overlay position (dragging).
+     */
+    OVERLAY_CLASSNAME: string;
+    /**
+     * The percentage of the maximum resize distance that will be clamped.
+     */
+    MINIMUM_REDISTRIBUTION_SIZE_THRESHOLD: number;
+    /**
+     * Threshold from panel edge that is considered a split vs drop action.
+     */
+    SPLIT_EDGE_TOLERANCE: number;
+    /**
+     * Threshold from _container_ edge that is considered a split action on the root
+     * node.
+     */
+    SPLIT_ROOT_EDGE_TOLERANCE: number;
+    /**
+     * Tolerance threshold for considering two grid track positions as identical.
+     *
+     * When collecting and deduplicating track positions, any positions closer than
+     * this value are treated as the same position to avoid redundant grid tracks.
+     */
+    GRID_TRACK_COLLAPSE_TOLERANCE: number;
+    /**
+     * The overlay default behavior.
+     */
+    OVERLAY_DEFAULT: OverlayMode;
+    /**
+     * Width of split panel dividers in pixels (for hit-test purposes).
+     */
+    GRID_DIVIDER_SIZE: number;
+    /**
+     * Whether the grid should trigger column resize if the grid itself is not
+     * the `event.target`.
+     */
+    GRID_DIVIDER_CHECK_TARGET: boolean;
+}
 /**
- * The minimum number of pixels the mouse must move to be considered a drag.
+ * Like `GlobalPhysics`, but suitable for partial definition for incremental
+ * updates.
  */
-export declare const MIN_DRAG_DISTANCE = 10;
-/**
- * Class name to use for child elements in overlay position (dragging).
- */
-export declare const OVERLAY_CLASSNAME = "overlay";
-/**
- * The percentage of the maximum resize distance that will be clamped.
- *
- */
-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.
- *
- * When collecting and deduplicating track positions, any positions closer than
- * this value are treated as the same position to avoid redundant grid tracks.
- */
-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;
+export interface PhysicsUpdate {
+    CUSTOM_EVENT_NAME_PREFIX?: string;
+    CHILD_ATTRIBUTE_NAME?: string;
+    MIN_DRAG_DISTANCE?: number;
+    SHOULD_ROUND?: boolean;
+    OVERLAY_CLASSNAME?: string;
+    MINIMUM_REDISTRIBUTION_SIZE_THRESHOLD?: number;
+    SPLIT_EDGE_TOLERANCE?: number;
+    SPLIT_ROOT_EDGE_TOLERANCE?: number;
+    GRID_TRACK_COLLAPSE_TOLERANCE?: number;
+    OVERLAY_DEFAULT?: OverlayMode;
+    GRID_DIVIDER_SIZE?: number;
+    GRID_DIVIDER_CHECK_TARGET?: boolean;
+}
+export declare const DEFAULT_PHYSICS: Physics;

package/dist/layout/generate_grid.d.ts

@@ -1,3 +1,4 @@
+import { type Physics } from "./constants.ts";
 import type { Layout } from "./types.ts";
 /**
  * Generates CSS Grid styles to render a layout tree.
@@ -16,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]
  * };
@@ -29,4 +30,4 @@ import type { Layout } from "./types.ts";
  * // :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;
+export declare function create_css_grid_layout(layout: Layout, overlay?: [string, string], physics?: Physics): string;

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): 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): 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,4 +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.
@@ -31,6 +41,22 @@ import type { LayoutPath, Layout, TabLayout, OverlayMode, Orientation } from "./
  * 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;
@@ -40,23 +66,24 @@ export declare class RegularLayout extends HTMLElement {
     private _drag_target?;
     private _cursor_override;
     private _dimensions?;
+    private _physics;
     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.
+     * @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
@@ -65,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
@@ -78,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.
      *
@@ -135,20 +162,44 @@ export declare class RegularLayout extends HTMLElement {
      * ```
      */
     save: () => Layout;
+    /**
+     * Override this instance's global constants.
+     *
+     * @param physics
+     */
+    restorePhysics(physics: PhysicsUpdate): void;
+    /**
+     * Get this instance's constants.
+     *
+     * @returns The current constants
+     */
+    savePhysics(): Physics;
     /**
      * Converts screen coordinates to relative layout coordinates.
      *
      * 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.0",
+	"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

@@ -9,7 +9,7 @@
 // ┃  *  [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). *  ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-import { SPLIT_EDGE_TOLERANCE, SPLIT_ROOT_EDGE_TOLERANCE } from "./constants";
+import { DEFAULT_PHYSICS, type Physics } from "./constants";
 import { insert_child } from "./insert_child";
 import type { Layout, LayoutPath, Orientation, ViewWindow } from "./types";
 
@@ -33,39 +33,47 @@ export function calculate_edge(
 	slot: string,
 	drop_target: LayoutPath,
 	box?: DOMRect,
+	physics: Physics = DEFAULT_PHYSICS,
 ): LayoutPath {
 	// Check root edges first
-	if (col < SPLIT_ROOT_EDGE_TOLERANCE) {
+	if (col < physics.SPLIT_ROOT_EDGE_TOLERANCE) {
 		return insert_root_edge(panel, slot, drop_target, [0], true, "horizontal");
 	}
 
-	if (col > 1 - SPLIT_ROOT_EDGE_TOLERANCE) {
+	if (col > 1 - physics.SPLIT_ROOT_EDGE_TOLERANCE) {
 		return insert_root_edge(
 			panel,
 			slot,
 			drop_target,
-			drop_target.path.length > 0 ? drop_target.path : [],
+			drop_target.path.length > 0 ? drop_target.path : [1],
 			false,
 			"horizontal",
 		);
 	}
 
-	if (row < SPLIT_ROOT_EDGE_TOLERANCE) {
+	if (row < physics.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");
+	if (row > 1 - physics.SPLIT_ROOT_EDGE_TOLERANCE) {
+		return insert_root_edge(
+			panel,
+			slot,
+			drop_target,
+			drop_target.path.length > 0 ? drop_target.path : [1],
+			false,
+			"vertical",
+		);
 	}
 
 	// Check panel edges
 	const is_column_edge =
-		drop_target.column_offset < SPLIT_EDGE_TOLERANCE ||
-		drop_target.column_offset > 1 - SPLIT_EDGE_TOLERANCE;
+		drop_target.column_offset < physics.SPLIT_EDGE_TOLERANCE ||
+		drop_target.column_offset > 1 - physics.SPLIT_EDGE_TOLERANCE;
 
 	const is_row_edge =
-		drop_target.row_offset < SPLIT_EDGE_TOLERANCE ||
-		drop_target.row_offset > 1 - SPLIT_EDGE_TOLERANCE;
+		drop_target.row_offset < physics.SPLIT_EDGE_TOLERANCE ||
+		drop_target.row_offset > 1 - physics.SPLIT_EDGE_TOLERANCE;
 
 	// If both edges triggered, choose closer axis
 	if (is_column_edge && is_row_edge) {
@@ -79,15 +87,17 @@ 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,
 			slot,
 			drop_target,
 			use_column
-				? drop_target.column_offset < SPLIT_EDGE_TOLERANCE
-				: drop_target.row_offset < SPLIT_EDGE_TOLERANCE,
+				? drop_target.column_offset < physics.SPLIT_EDGE_TOLERANCE
+				: drop_target.row_offset < physics.SPLIT_EDGE_TOLERANCE,
 			use_column ? "horizontal" : "vertical",
 		);
 	}
@@ -97,7 +107,7 @@ export function calculate_edge(
 			panel,
 			slot,
 			drop_target,
-			drop_target.column_offset < SPLIT_EDGE_TOLERANCE,
+			drop_target.column_offset < physics.SPLIT_EDGE_TOLERANCE,
 			"horizontal",
 		);
 	}
@@ -107,7 +117,7 @@ export function calculate_edge(
 			panel,
 			slot,
 			drop_target,
-			drop_target.row_offset < SPLIT_EDGE_TOLERANCE,
+			drop_target.row_offset < physics.SPLIT_EDGE_TOLERANCE,
 			"vertical",
 		);
 	}

package/src/layout/calculate_intersect.ts

@@ -9,7 +9,6 @@
 // ┃  *  [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). *  ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-import { GRID_DIVIDER_SIZE } from "./constants.ts";
 import type { LayoutPath, LayoutDivider, Layout, ViewWindow } from "./types.ts";
 
 const VIEW_WINDOW = {
@@ -42,21 +41,21 @@ export function calculate_intersection(
 	column: number,
 	row: number,
 	layout: Layout,
-	check_dividers?: DOMRect,
+	check_dividers?: { rect: DOMRect; size: number },
 ): LayoutPath | null | LayoutDivider;
 
 export function calculate_intersection(
 	column: number,
 	row: number,
 	layout: Layout,
-	check_dividers?: DOMRect | null,
+	check_dividers?: { rect: DOMRect; size: number } | null,
 ): LayoutPath | null | LayoutDivider;
 
 export function calculate_intersection(
 	column: number,
 	row: number,
 	layout: Layout,
-	check_dividers: DOMRect | null = null,
+	check_dividers: { rect: DOMRect; size: number } | null = null,
 ): LayoutPath | null | LayoutDivider {
 	return calculate_intersection_recursive(column, row, layout, check_dividers);
 }
@@ -65,7 +64,7 @@ function calculate_intersection_recursive(
 	column: number,
 	row: number,
 	panel: Layout,
-	check_dividers: DOMRect | null,
+	check_dividers: { rect: DOMRect; size: number } | null,
 	parent_orientation: "horizontal" | "vertical" | null = null,
 	view_window: ViewWindow = structuredClone(VIEW_WINDOW),
 	path: number[] = [],
@@ -81,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,
@@ -99,7 +98,10 @@ function calculate_intersection_recursive(
 	const position = is_vertical ? row : column;
 	const start_key = is_vertical ? "row_start" : "col_start";
 	const end_key = is_vertical ? "row_end" : "col_end";
-	const rect_dim = is_vertical ? check_dividers?.height : check_dividers?.width;
+	const rect_dim = is_vertical
+		? check_dividers?.rect?.height
+		: check_dividers?.rect?.width;
+
 	let current_pos = view_window[start_key];
 	const total_size = view_window[end_key] - view_window[start_key];
 	for (let i = 0; i < panel.children.length; i++) {
@@ -107,7 +109,7 @@ function calculate_intersection_recursive(
 
 		// Check if position is on a divider
 		if (check_dividers && rect_dim) {
-			const divider_threshold = GRID_DIVIDER_SIZE / rect_dim;
+			const divider_threshold = check_dividers.size / rect_dim;
 			if (Math.abs(position - next_pos) < divider_threshold) {
 				return {
 					path: [...path, i],