regular-layout 0.3.0 → 0.5.0

package/src/layout/generate_grid.ts

@@ -9,8 +9,8 @@
 // ┃  *  [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). *  ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-import { DEFAULT_PHYSICS, type Physics } from "./constants.ts";
-import type { Layout } from "./types.ts";
+import { DEFAULT_PHYSICS, type Physics } from "../core/constants.ts";
+import type { Layout } from "../core/types.ts";
 
 interface GridCell {
 	child: string;
@@ -264,3 +264,21 @@ export function create_css_grid_layout(
 
 	return css.join("\n");
 }
+
+/**
+ * Generates CSS Grid styles that render a single panel maximized to fill the
+ * entire layout, hiding all other slotted children.
+ *
+ * @param name - The name of the panel to maximize.
+ * @param physics - Instance constants (defaults to {@link DEFAULT_PHYSICS}).
+ * @returns CSS string showing only `name`, full-size.
+ */
+export function create_css_maximize_layout(
+	name: string,
+	physics: Physics = DEFAULT_PHYSICS,
+): string {
+	return [
+		host_template("100%", "100%"),
+		child_template(physics, name, "1", "1"),
+	].join("\n");
+}

package/src/layout/generate_overlay.ts

@@ -9,8 +9,46 @@
 // ┃  *  [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). *  ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-import { DEFAULT_PHYSICS } from "./constants";
-import type { LayoutPath } from "./types";
+import { DEFAULT_PHYSICS } from "../core/constants";
+import type { LayoutPath, ViewWindow } from "../core/types";
+
+/**
+ * Converts a {@link ViewWindow} to element-relative pixel coordinates,
+ * accounting for padding and optionally CSS `gap` and child `margin`.
+ *
+ * @param window - The view window in normalized 0–1 coordinates.
+ * @param box - The element's bounding client rect.
+ * @param style - The element's computed style (for padding).
+ * @param margin - Optional child element's computed style (for margin inset).
+ * @returns Pixel coordinates relative to the element's border-box origin.
+ */
+export function viewWindowToLocalRect(
+	window: ViewWindow,
+	box: DOMRect,
+	style: CSSStyleDeclaration,
+	margin?: CSSStyleDeclaration,
+): { x: number; y: number; width: number; height: number } {
+	const paddingLeft = parseFloat(style.paddingLeft);
+	const paddingTop = parseFloat(style.paddingTop);
+	const contentWidth = box.width - paddingLeft - parseFloat(style.paddingRight);
+	const contentHeight =
+		box.height - paddingTop - parseFloat(style.paddingBottom);
+
+	const x = paddingLeft + window.col_start * contentWidth;
+	const y = paddingTop + window.row_start * contentHeight;
+	let width = (window.col_end - window.col_start) * contentWidth;
+	let height = (window.row_end - window.row_start) * contentHeight;
+	if (margin) {
+		const marginTop = parseFloat(margin.marginTop);
+		const marginRight = parseFloat(margin.marginRight);
+		const marginBottom = parseFloat(margin.marginBottom);
+		const marginLeft = parseFloat(margin.marginLeft);
+		width -= marginLeft + marginRight;
+		height -= marginTop + marginBottom;
+	}
+
+	return { x, y, width, height };
+}
 
 export function updateOverlaySheet(
 	slot: string,
@@ -18,25 +56,19 @@ export function updateOverlaySheet(
 	style: CSSStyleDeclaration,
 	drag_target: LayoutPath | null,
 	physics = DEFAULT_PHYSICS,
+	margin?: CSSStyleDeclaration,
 ) {
 	if (!drag_target) {
 		return `:host ::slotted([${physics.CHILD_ATTRIBUTE_NAME}="${slot}"]){display:none;}`;
 	}
 
-	const {
-		view_window: { row_start, row_end, col_start, col_end },
-	} = drag_target;
-
-	const box_height =
-		box.height - parseFloat(style.paddingTop) - parseFloat(style.paddingBottom);
-
-	const box_width =
-		box.width - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight);
+	const local = viewWindowToLocalRect(
+		drag_target.view_window,
+		box,
+		style,
+		margin,
+	);
 
-	const top = row_start * box_height + parseFloat(style.paddingTop);
-	const left = col_start * box_width + parseFloat(style.paddingLeft);
-	const height = (row_end - row_start) * box_height;
-	const width = (col_end - col_start) * box_width;
-	const css = `display:flex;position:absolute!important;z-index:1;top:${top}px;left:${left}px;height:${height}px;width:${width}px;`;
+	const css = `display:flex;position:absolute!important;z-index:1;top:${local.y}px;left:${local.x}px;height:${local.height}px;width:${local.width}px;`;
 	return `::slotted([${physics.CHILD_ATTRIBUTE_NAME}="${slot}"]){${css}}`;
 }

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, LayoutPathTraversal } from "./types.ts";
+import type { Layout, LayoutPathTraversal } from "../core/types.ts";
 
 /**
  * Inserts a new child panel into the layout tree at a specified location.

package/src/layout/redistribute_panel_sizes.ts

@@ -9,8 +9,8 @@
 // ┃  *  [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). *  ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-import { DEFAULT_PHYSICS } from "./constants.ts";
-import type { Layout, LayoutPathTraversal } from "./types.ts";
+import { DEFAULT_PHYSICS } from "../core/constants.ts";
+import type { Layout, LayoutPathTraversal } from "../core/types.ts";
 
 /**
  * Adjusts panel sizes during a drag operation on a divider.

package/src/layout/remove_child.ts

@@ -9,8 +9,8 @@
 // ┃  *  [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). *  ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-import type { Layout, TabLayout } from "./types.ts";
-import { EMPTY_PANEL } from "./types.ts";
+import type { Layout, TabLayout } from "../core/types.ts";
+import { EMPTY_PANEL } from "../core/types.ts";
 
 /**
  * Removes a child panel from the layout tree by its name.

package/src/model/overlay_controller.ts

@@ -0,0 +1,161 @@
+// ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
+// ░░░░░░░░▄▀░█▀▄░█▀▀░█▀▀░█░█░█░░░█▀█░█▀▄░░░░░█░░░█▀█░█░█░█▀█░█░█░▀█▀░▀▄░░░░░░░░
+// ░░░░░░░▀▄░░█▀▄░█▀▀░█░█░█░█░█░░░█▀█░█▀▄░▀▀▀░█░░░█▀█░░█░░█░█░█░█░░█░░░▄▀░░░░░░░
+// ░░░░░░░░░▀░▀░▀░▀▀▀░▀▀▀░▀▀▀░▀▀▀░▀░▀░▀░▀░░░░░▀▀▀░▀░▀░░▀░░▀▀▀░▀▀▀░░▀░░▀░░░░░░░░░
+// ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃  *  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, LayoutPath, OverlayMode } from "../core/types.ts";
+import type { Physics } from "../core/constants.ts";
+import type { PresizeQueue } from "./presize_queue.ts";
+import { calculate_intersection } from "../layout/calculate_intersect.ts";
+import { calculate_edge } from "../layout/calculate_edge.ts";
+import { create_css_grid_layout } from "../layout/generate_grid.ts";
+import { updateOverlaySheet } from "../layout/generate_overlay.ts";
+import { remove_child } from "../layout/remove_child.ts";
+import { insert_child } from "../layout/insert_child.ts";
+
+export interface OverlayHost {
+	readonly panel: Layout;
+	readonly physics: Physics;
+	readonly stylesheet: CSSStyleSheet;
+	readonly presizeQueue: PresizeQueue;
+	relativeCoordinates(
+		event: { clientX: number; clientY: number },
+		recalculate: boolean,
+	): [number, number, DOMRect, CSSStyleDeclaration];
+	restore(layout: Layout, isFlattened?: boolean): Promise<void>;
+	querySelector(selectors: string): Element | null;
+	dispatchEvent(event: Event): boolean;
+}
+
+/**
+ * Manages overlay state during drag-and-drop panel rearrangement.
+ *
+ * Handles rendering a preview of where a dragged panel would land,
+ * and committing or cancelling the placement when the drag ends.
+ */
+export class OverlayController {
+	constructor(private _host: OverlayHost) {}
+
+	async set(
+		event: { clientX: number; clientY: number },
+		{ slot }: LayoutPath,
+		className: string = this._host.physics.OVERLAY_CLASSNAME,
+		mode: OverlayMode = this._host.physics.OVERLAY_DEFAULT,
+	): Promise<void> {
+		const host = this._host;
+		const panel = remove_child(host.panel, slot);
+		const query = `:scope > [${host.physics.CHILD_ATTRIBUTE_NAME}="${slot}"]`;
+		let drag_element = host.querySelector(query);
+		if (drag_element) {
+			drag_element.classList.add(className);
+		}
+
+		const [col, row, box, style] = host.relativeCoordinates(event, true);
+		let drop_target = calculate_intersection(col, row, panel);
+		if (drop_target) {
+			drop_target = calculate_edge(
+				col,
+				row,
+				panel,
+				slot,
+				drop_target,
+				box,
+				host.physics,
+			);
+		}
+
+		await host.presizeQueue.run(panel, () => {
+			if (mode === "grid" && drop_target) {
+				const path: [string, string] = [slot, drop_target?.slot];
+				const css = create_css_grid_layout(panel, path, host.physics);
+				host.stylesheet.replaceSync(css);
+			} else if (mode === "absolute") {
+				const grid_css = create_css_grid_layout(panel, undefined, host.physics);
+
+				while (drag_element?.tagName === "SLOT" && drag_element) {
+					drag_element = (
+						drag_element as HTMLSlotElement
+					).assignedElements()[0];
+				}
+
+				const margin = drag_element
+					? getComputedStyle(drag_element)
+					: undefined;
+
+				const overlay_css = updateOverlaySheet(
+					slot,
+					box,
+					style,
+					drop_target,
+					host.physics,
+					margin,
+				);
+
+				host.stylesheet.replaceSync([grid_css, overlay_css].join("\n"));
+			}
+		});
+
+		const event_name = `${host.physics.CUSTOM_EVENT_NAME_PREFIX}-before-update`;
+		const custom_event = new CustomEvent<Layout>(event_name, {
+			detail: panel,
+		});
+		host.dispatchEvent(custom_event);
+	}
+
+	async clear(
+		event: { clientX: number; clientY: number } | null,
+		{ slot, layout }: LayoutPath,
+		className: string = this._host.physics.OVERLAY_CLASSNAME,
+	): Promise<void> {
+		const host = this._host;
+		const panel = remove_child(host.panel, slot);
+		const query = `:scope > [${host.physics.CHILD_ATTRIBUTE_NAME}="${slot}"]`;
+		const drag_element = host.querySelector(query);
+
+		if (event === null) {
+			await host.restore(layout);
+			return;
+		}
+
+		const [col, row, box] = host.relativeCoordinates(event, false);
+		let drop_target = calculate_intersection(col, row, panel);
+		if (drop_target) {
+			drop_target = calculate_edge(
+				col,
+				row,
+				panel,
+				slot,
+				drop_target,
+				box,
+				host.physics,
+			);
+		}
+
+		if (drop_target) {
+			const orientation = drop_target?.is_edge
+				? drop_target.orientation
+				: undefined;
+
+			const new_layout = insert_child(
+				panel,
+				slot,
+				drop_target.path,
+				orientation,
+			);
+
+			await host.restore(new_layout);
+		} else {
+			await host.restore(layout);
+		}
+
+		if (drag_element) {
+			drag_element.classList.remove(className);
+		}
+	}
+}

package/src/model/presize_queue.ts

@@ -0,0 +1,79 @@
+// ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
+// ░░░░░░░░▄▀░█▀▄░█▀▀░█▀▀░█░█░█░░░█▀█░█▀▄░░░░░█░░░█▀█░█░█░█▀█░█░█░▀█▀░▀▄░░░░░░░░
+// ░░░░░░░▀▄░░█▀▄░█▀▀░█░█░█░█░█░░░█▀█░█▀▄░▀▀▀░█░░░█▀█░░█░░█░█░█░█░░█░░░▄▀░░░░░░░
+// ░░░░░░░░░▀░▀░▀░▀▀▀░▀▀▀░▀▀▀░▀▀▀░▀░▀░▀░▀░░░░░▀▀▀░▀░▀░░▀░░▀▀▀░▀▀▀░░▀░░▀░░░░░░░░░
+// ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃  *  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, PresizeDetail } from "../core/types.ts";
+import { calculate_presize_paths } from "../layout/calculate_presize_paths.ts";
+
+/**
+ * Manages cancelable pre-resize gating for layout updates.
+ *
+ * Before each layout change, a cancelable `resize-before` event is dispatched
+ * on the target. If the event is cancelled via `preventDefault()`, the update
+ * is suspended until {@link resume} is called. Concurrent updates are queued
+ * and processed sequentially.
+ */
+export class PresizeQueue {
+	#resizing = false;
+	#queued: { layout: Layout; fn: () => void } | null = null;
+	#pending: (() => void) | null = null;
+
+	constructor(
+		private _target: EventTarget,
+		private _eventName: string,
+	) {}
+
+	async run(layout: Layout, fn: () => void): Promise<void> {
+		if (this.#resizing) {
+			this.#queued = { layout, fn };
+			return;
+		}
+
+		this.#resizing = true;
+		try {
+			await this.#dispatchAndMaybeWait(layout, fn);
+			while (this.#queued) {
+				const { layout: nextLayout, fn: nextFn } = this.#queued;
+				this.#queued = null;
+				await this.#dispatchAndMaybeWait(nextLayout, nextFn);
+			}
+		} finally {
+			this.#resizing = false;
+		}
+	}
+
+	resume(): void {
+		if (this.#pending) {
+			const resolve = this.#pending;
+			this.#pending = null;
+			resolve();
+		}
+	}
+
+	async #dispatchAndMaybeWait(layout: Layout, fn: () => void): Promise<void> {
+		const detail: PresizeDetail = {
+			calculatePresizePaths: () => calculate_presize_paths(layout),
+		};
+
+		const event = new CustomEvent(this._eventName, {
+			cancelable: true,
+			detail,
+		});
+
+		const proceed = this._target.dispatchEvent(event);
+		if (!proceed) {
+			await new Promise<void>((resolve) => {
+				this.#pending = resolve;
+			});
+		}
+
+		fn();
+	}
+}

package/src/regular-layout-frame.ts

@@ -9,7 +9,7 @@
 // ┃  *  [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). *  ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-import type { LayoutPath } from "./layout/types.ts";
+import type { LayoutPath } from "./core/types.ts";
 import type { RegularLayoutEvent } from "./extensions.ts";
 import type { RegularLayout } from "./regular-layout.ts";
 import type { RegularLayoutTab } from "./regular-layout-tab.ts";
@@ -26,11 +26,25 @@ const CSS = `
 
 const HTML_TEMPLATE = `
 	<div part="titlebar"></div>
-	<slot part="container"></slot>
+	<div part="container"><slot></slot></div>
 `;
 
 type DragState = { moved?: boolean; path: LayoutPath };
 
+/**
+ * Escapes a string for safe use as a CSS `<string>` token (the `content`
+ * fallback), handling backslashes, double-quotes, and newlines.
+ */
+const css_string = (value: string): string =>
+	`"${value.replace(/[\\"\n]/g, (c) => (c === "\n" ? "\\A " : `\\${c}`))}"`;
+
+/**
+ * The per-slot CSS custom property a consumer sets to override a tab's label,
+ * e.g. `regular-layout { --regular-layout-my-panel--title: "My Panel"; }`.
+ */
+const title_variable = (slot: string): string =>
+	`--regular-layout-${globalThis.CSS.escape(slot)}--title`;
+
 /**
  * A custom element that represents a draggable panel within a
  * `<regular-layout>`.
@@ -47,8 +61,17 @@ type DragState = { moved?: boolean; path: LayoutPath };
  * [named `slot`s](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots)
  * for wholesale replacement of the underlying Shadow DOM.
  *
+ * The `name` attribute identifies the panel within the layout. The tab label
+ * defaults to `name`, but can be overridden with pure CSS by setting the
+ * `--regular-layout-<name>--title` custom property to a CSS string - the label
+ * is rendered via the tab title's `::before` `content`, so the override
+ * applies reactively with no JavaScript.
+ *
  * @example
  * ```html
+ * <style>
+ *     regular-layout { --regular-layout-panel-1--title: "Panel 1"; }
+ * </style>
  * <regular-layout>
  *     <regular-layout-frame name="panel-1">
  *         <!-- Panel content here -->
@@ -59,6 +82,7 @@ type DragState = { moved?: boolean; path: LayoutPath };
 export class RegularLayoutFrame extends HTMLElement {
 	private _shadowRoot!: ShadowRoot;
 	private _container_sheet!: CSSStyleSheet;
+	private _title_sheet!: CSSStyleSheet;
 	private _layout!: RegularLayout;
 	private _header!: HTMLElement;
 	private _drag: DragState | null = null;
@@ -72,8 +96,12 @@ export class RegularLayoutFrame extends HTMLElement {
 	connectedCallback() {
 		this._container_sheet ??= new CSSStyleSheet();
 		this._container_sheet.replaceSync(CSS);
+		this._title_sheet ??= new CSSStyleSheet();
 		this._shadowRoot ??= this.attachShadow({ mode: "open" });
-		this._shadowRoot.adoptedStyleSheets = [this._container_sheet];
+		this._shadowRoot.adoptedStyleSheets = [
+			this._container_sheet,
+			this._title_sheet,
+		];
 		this._shadowRoot.innerHTML = HTML_TEMPLATE;
 		this._layout = this.parentElement as RegularLayout;
 		this._header = this._shadowRoot.children[0] as HTMLElement;
@@ -106,6 +134,10 @@ export class RegularLayoutFrame extends HTMLElement {
 	}
 
 	private onPointerDown = (event: PointerEvent): void => {
+		if (event.button !== 0) {
+			return;
+		}
+
 		const elem = event.target as RegularLayoutTab;
 		if (elem.part.contains("tab")) {
 			const path = this._layout.calculateIntersect(event);
@@ -184,5 +216,28 @@ export class RegularLayoutFrame extends HTMLElement {
 		for (let j = this._header.children.length - 1; j >= last_index; j--) {
 			this._header.removeChild(this._header.children[j]);
 		}
+
+		this.drawTitles(attr, new_tab_panel.tabs);
+	};
+
+	/**
+	 * Regenerates this frame's title stylesheet, mapping each tab (by its slot
+	 * `name`) to its label. The label is rendered via the title's `::before`
+	 * `content`, reading the slot's `--regular-layout-<slot>--title` override
+	 * variable with the slot name as the fallback - so a consumer can relabel a
+	 * tab purely in CSS and the change applies reactively.
+	 *
+	 * @param attr - The child name attribute (`CHILD_ATTRIBUTE_NAME`).
+	 * @param tabs - The slot names rendered in this frame's titlebar.
+	 */
+	private drawTitles = (attr: string, tabs: string[]) => {
+		const css = tabs
+			.map(
+				(slot) =>
+					`regular-layout-tab[${attr}="${slot}"] [part~="title"]::before{content:var(${title_variable(slot)}, ${css_string(slot)})}`,
+			)
+			.join("\n");
+
+		this._title_sheet.replaceSync(css);
 	};
 }

package/src/regular-layout-tab.ts

@@ -9,7 +9,7 @@
 // ┃  *  [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). *  ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-import type { TabLayout } from "./layout/types.ts";
+import type { TabLayout } from "./core/types.ts";
 import type { RegularLayout } from "./regular-layout.ts";
 
 /**
@@ -34,6 +34,14 @@ export class RegularLayoutTab extends HTMLElement {
 	 * @param index - The index of this tab within the tab panel.
 	 */
 	populate = (layout: RegularLayout, tab_panel: TabLayout, index: number) => {
+		// Stamp the slot onto the tab so its title can be styled by name (see
+		// `RegularLayoutFrame#drawTitles`). Tag-qualified selectors keep this
+		// distinct from the panel `name` on `<regular-layout-frame>`.
+		this.setAttribute(
+			layout.savePhysics().CHILD_ATTRIBUTE_NAME,
+			tab_panel.tabs[index],
+		);
+
 		if (this._tab_panel) {
 			const tab_changed =
 				(index === tab_panel.selected) !==
@@ -44,9 +52,6 @@ export class RegularLayoutTab extends HTMLElement {
 
 			if (index_changed) {
 				const selected = tab_panel.selected === index;
-				const slot = tab_panel.tabs[index];
-				this.children[0].textContent = slot;
-
 				if (selected) {
 					this.children[1].part.add("active-close");
 					this.part.add("active-tab");
@@ -56,7 +61,6 @@ export class RegularLayoutTab extends HTMLElement {
 				}
 			}
 		} else {
-			const slot = tab_panel.tabs[index];
 			const selected = tab_panel.selected === index;
 			const parts = selected ? "active-close close" : "close";
 			this.innerHTML = `<div part="title"></div><button part="${parts}"></button>`;
@@ -67,7 +71,6 @@ export class RegularLayoutTab extends HTMLElement {
 			}
 
 			this.addEventListener("pointerdown", this.onTabClick);
-			this.children[0].textContent = slot;
 			this.children[1].addEventListener("pointerdown", this.onTabClose);
 		}
 
@@ -76,28 +79,23 @@ export class RegularLayoutTab extends HTMLElement {
 		this._index = index;
 	};
 
-	private onTabClose = (_: Event) => {
+	private onTabClose = (event: Event) => {
+		if (event instanceof PointerEvent && event?.button !== 0) {
+			return;
+		}
+
 		if (this._tab_panel !== undefined && this._index !== undefined) {
 			this._layout?.removePanel(this._tab_panel.tabs[this._index]);
 		}
 	};
 
-	private onTabClick = (_: PointerEvent) => {
-		if (
-			this._tab_panel !== undefined &&
-			this._index !== undefined &&
-			this._index !== this._tab_panel.selected
-		) {
-			const new_layout = this._layout?.save();
-			const new_tab_panel = this._layout?.getPanel(
-				this._tab_panel.tabs[this._index],
-				new_layout,
-			);
+	private onTabClick = (event: PointerEvent) => {
+		if (event.button !== 0) {
+			return;
+		}
 
-			if (new_tab_panel && new_layout) {
-				new_tab_panel.selected = this._index;
-				this._layout?.restore(new_layout);
-			}
+		if (this._tab_panel !== undefined && this._index !== undefined) {
+			this._layout?.select(this._tab_panel.tabs[this._index]);
 		}
 	};
 }