regular-layout 0.4.0 → 0.6.0

package/src/regular-layout.ts

@@ -17,7 +17,10 @@
  */
 
 import { EMPTY_PANEL } from "./core/types.ts";
-import { create_css_grid_layout } from "./layout/generate_grid.ts";
+import {
+	create_css_grid_layout,
+	create_css_maximize_layout,
+} from "./layout/generate_grid.ts";
 import type {
 	LayoutPath,
 	Layout,
@@ -106,6 +109,14 @@ export interface PointerEventCoordinates {
  * latter implementation would require synchronizing the light DOM
  * and shadow DOM slots/slotted children continuously.
  *
+ * Note that `::slotted()` only matches *directly* slotted nodes - it
+ * does not pierce a slotted `<slot>`. A consumer that wants to forward
+ * its own light-DOM content through `<regular-layout>` therefore cannot
+ * place a bare `<slot name="X">` as a layout child and expect it to be
+ * grid-positioned; instead, wrap the forwarding slot in a concrete
+ * `<regular-layout-frame name="X">` (which *is* directly slotted and so
+ * matched by the generated `::slotted([name="X"])` rules).
+ *
  */
 export class RegularLayout extends HTMLElement {
 	private _shadowRoot: ShadowRoot;
@@ -118,6 +129,7 @@ export class RegularLayout extends HTMLElement {
 	private _physics: Physics;
 	private _presizeQueue: PresizeQueue;
 	private _overlayController: OverlayController;
+	private _maximized?: string;
 
 	constructor() {
 		super();
@@ -253,6 +265,36 @@ export class RegularLayout extends HTMLElement {
 		await this.restore(remove_child(this._panel, name));
 	};
 
+	/**
+	 * Selects a panel by `name`, making it the front-most tab within its
+	 * containing stack, then dispatches a `<prefix>-select` event with
+	 * `detail: { name }`.
+	 *
+	 * The event fires whenever a tab is selected - including re-selecting the
+	 * already-active tab, or selecting the sole tab of a single-element stack -
+	 * so consumers can always map a tab interaction to an "active panel". When
+	 * the selection actually changes, a `<prefix>-update` event is dispatched
+	 * first (via {@link restore}).
+	 *
+	 * @param name - The name of the panel to select.
+	 */
+	select = async (name: string) => {
+		const layout = this.save();
+		const tab_panel = this.getPanel(name, layout);
+		if (!tab_panel) {
+			return;
+		}
+
+		const index = tab_panel.tabs.indexOf(name);
+		if (index !== -1 && tab_panel.selected !== index) {
+			tab_panel.selected = index;
+			await this.restore(layout);
+		}
+
+		const event_name = `${this._physics.CUSTOM_EVENT_NAME_PREFIX}-select`;
+		this.dispatchEvent(new CustomEvent(event_name, { detail: { name } }));
+	};
+
 	/**
 	 * Retrieves a panel by name from the layout tree.
 	 *
@@ -286,6 +328,42 @@ export class RegularLayout extends HTMLElement {
 		await this.restore(EMPTY_PANEL);
 	};
 
+	/**
+	 * Maximizes a panel by `name`, rendering it full-size and hiding every
+	 * other panel. This is transient display state - it is **not** persisted by
+	 * {@link save}, and any subsequent {@link restore} resets the layout to the
+	 * minimized (normal, multi-panel) view.
+	 *
+	 * Has no effect if `name` is not present in the current layout.
+	 *
+	 * @param name - The name of the panel to maximize.
+	 */
+	maximize = (name: string) => {
+		if (!this.getPanel(name)) {
+			return;
+		}
+
+		this._maximized = name;
+		this._stylesheet.replaceSync(
+			create_css_maximize_layout(name, this._physics),
+		);
+	};
+
+	/**
+	 * Restores the normal multi-panel view after a {@link maximize}, without
+	 * altering the layout tree. No-op if no panel is currently maximized.
+	 */
+	minimize = () => {
+		if (this._maximized === undefined) {
+			return;
+		}
+
+		this._maximized = undefined;
+		this._stylesheet.replaceSync(
+			create_css_grid_layout(this._panel, undefined, this._physics),
+		);
+	};
+
 	/**
 	 * Restores the layout from a saved state synchronously, without
 	 * dispatching the `regular-layout-before-resize` event.
@@ -293,6 +371,7 @@ export class RegularLayout extends HTMLElement {
 	 * @param layout - The layout tree to restore
 	 */
 	restoreSync = (layout: Layout, _is_flattened: boolean = false) => {
+		this._maximized = undefined;
 		this._panel = !_is_flattened ? flatten(layout) : layout;
 		const css = create_css_grid_layout(this._panel, undefined, this._physics);
 		this._stylesheet.replaceSync(css);
@@ -320,6 +399,7 @@ export class RegularLayout extends HTMLElement {
 	restore = async (layout: Layout, _is_flattened: boolean = false) => {
 		const panel = !_is_flattened ? flatten(layout) : layout;
 		await this._presizeQueue.run(panel, () => {
+			this._maximized = undefined;
 			this._panel = panel;
 			const css = create_css_grid_layout(this._panel, undefined, this._physics);
 			this._stylesheet.replaceSync(css);
@@ -327,6 +407,7 @@ export class RegularLayout extends HTMLElement {
 			const event = new CustomEvent<Layout>(event_name, {
 				detail: this._panel,
 			});
+
 			this.dispatchEvent(event);
 		});
 	};
@@ -528,6 +609,10 @@ export class RegularLayout extends HTMLElement {
 	};
 
 	private onPointerDown = (event: PointerEvent) => {
+		if (event.button !== 0) {
+			return;
+		}
+
 		if (!this._physics.GRID_DIVIDER_CHECK_TARGET || event.target === this) {
 			const [col, row, rect] = this.relativeCoordinates(event);
 			const size = this._physics.GRID_DIVIDER_SIZE;

package/themes/borland.css

@@ -23,12 +23,15 @@ regular-layout.borland regular-layout-frame {
 	position: relative;
 	box-sizing: border-box;
 	margin: 4px;
-	background: #0000aa;
-	border: 1px solid #00aaaa;
-	box-shadow: 1px 1px 0 #000000;
 }
 
+/* Panel chrome lives on the content (only the selected frame shows it), so the
+   overlapping frame box stays transparent and every stacked tab is visible. */
 regular-layout.borland regular-layout-frame::part(container) {
+	background: #0000aa;
+	border: 1px solid #00aaaa;
+	box-shadow: 1px 1px 0 #000000;
+	box-sizing: border-box;
 	padding: 4px 6px;
 	color: #ffff55;
 }
@@ -59,7 +62,6 @@ regular-layout.borland regular-layout-frame::part(titlebar) {
 	align-items: stretch;
 	padding-right: 0;
 	height: 22px;
-	background: #0000aa;
 }
 
 regular-layout.borland regular-layout-frame::part(tab) {

package/themes/chicago.css

@@ -23,13 +23,16 @@ regular-layout.chicago regular-layout-frame {
 	position: relative;
 	box-sizing: border-box;
 	margin: 12px;
+}
+
+/* Panel chrome lives on the content (only the selected frame shows it), so the
+   overlapping frame box stays transparent and every stacked tab is visible. */
+regular-layout.chicago regular-layout-frame::part(container) {
 	background: #c0c0c0;
 	border-width: 2px;
 	border-color: #ffffff #808080 #808080 #ffffff;
 	border-style: solid;
-}
-
-regular-layout.chicago regular-layout-frame::part(container) {
+	box-sizing: border-box;
 	padding: 6px;
 }
 
@@ -58,8 +61,8 @@ regular-layout.chicago regular-layout-frame::part(titlebar) {
 }
 
 regular-layout.chicago regular-layout-frame::part(tab) {
+	box-sizing: border-box;
 	display: flex;
-	flex: 1 1 150px;
 	align-items: center;
 	padding: 0 3px 0 8px;
 	cursor: pointer;
@@ -69,6 +72,11 @@ regular-layout.chicago regular-layout-frame::part(tab) {
 	font-family: "Tahoma", "Arial", sans-serif;
 	font-weight: bold;
 	font-size: 11px;
+	/* Raised bevel - the frame box no longer carries the border in the
+	   overlap model, so each tab frames itself. */
+	border-width: 2px;
+	border-color: #ffffff #808080 #808080 #ffffff;
+	border-style: solid;
 }
 
 regular-layout.chicago regular-layout-frame::part(active-tab) {

package/themes/fluxbox.css

@@ -21,13 +21,16 @@ regular-layout.fluxbox regular-layout-frame {
 	position: relative;
 	box-sizing: border-box;
 	margin: 8px;
-	background: #ffffff;
-	border: 1px solid #9dacbe;
-	box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15);
 }
 
+/* Panel chrome lives on the content (only the selected frame shows it), so the
+   overlapping frame box stays transparent and every stacked tab is visible. */
 regular-layout.fluxbox regular-layout-frame::part(container) {
+	box-sizing: border-box;
 	padding: 6px;
+	background: #ffffff;
+	border: 1px solid #9dacbe;
+	box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15);
 }
 
 regular-layout.fluxbox regular-layout-frame::part(close) {

package/themes/gibson.css

@@ -20,12 +20,9 @@ regular-layout.gibson {
 
 /* Frame */
 regular-layout.gibson regular-layout-frame {
-	--titlebar-height: 28px;
 	position: relative;
 	box-sizing: border-box;
 	margin: 8px;
-	background: rgba(10, 10, 26, 0.85);
-	backdrop-filter: blur(4px);
 	color: white;
 	text-shadow:
 		0 0 5px #fff,
@@ -33,8 +30,13 @@ regular-layout.gibson regular-layout-frame {
 		0 0 20px #fff;
 }
 
+/* Panel chrome lives on the content (only the selected frame shows it), so the
+   overlapping frame box stays transparent and every stacked tab is visible. */
 regular-layout.gibson regular-layout-frame::part(container) {
 	padding: 6px;
+	background: rgba(10, 10, 26, 0.85);
+	backdrop-filter: blur(4px);
+	box-sizing: border-box;
 }
 
 regular-layout.gibson regular-layout-frame::part(active-close) {
@@ -70,19 +72,11 @@ regular-layout.gibson regular-layout-frame::part(close) {
 }
 
 regular-layout.gibson regular-layout-frame::part(titlebar) {
-	display: flex;
-	justify-content: flex-end;
-	align-items: stretch;
-	padding-left: 12px;
 	height: 32px;
-
-	/* border-bottom: 1px solid rgba(0, 255, 255, 0.3); */
 }
 
 regular-layout.gibson regular-layout-frame::part(tab) {
 	display: flex;
-	flex: 1 1 150px;
-	max-width: 200px;
 	align-items: center;
 	padding: 0 5px 0 12px;
 	cursor: pointer;
@@ -131,6 +125,7 @@ regular-layout.gibson regular-layout-frame.overlay {
 		inset 0 0 20px rgba(255, 0, 255, 0.2);
 	margin: 0;
 	transition:
+		margin 0.075s ease-out,
 		top 0.075s ease-out,
 		height 0.075s ease-out,
 		width 0.075s ease-out,
@@ -138,18 +133,9 @@ regular-layout.gibson regular-layout-frame.overlay {
 }
 
 regular-layout.gibson regular-layout-frame::part(container) {
-	display: none;
 	border: 1px solid #00ffff;
-	border-radius: 12px 0 12px 0;
-}
-
-regular-layout.gibson regular-layout-frame::part(titlebar) {
-	display: none;
-}
-
-regular-layout.gibson regular-layout-frame:not(.overlay)::part(container),
-regular-layout.gibson regular-layout-frame:not(.overlay)::part(titlebar) {
-	display: flex;
+	/* Square top so the tab strip sits flush; keep the asymmetric bottom. */
+	border-radius: 0 0 12px 0;
 }
 
 /* Cyberpunk color variations */

package/themes/hotdog.css

@@ -21,13 +21,16 @@ regular-layout.hotdog {
 /* Frame */
 regular-layout.hotdog regular-layout-frame {
 	margin: 12px;
+}
+
+/* Panel chrome lives on the content (only the selected frame shows it), so the
+   overlapping frame box stays transparent and every stacked tab is visible. */
+regular-layout.hotdog regular-layout-frame::part(container) {
 	background: #ffff00;
 	border-width: 2px;
 	border-color: #ff6b6b #8b0000 #8b0000 #ff6b6b;
 	border-style: solid;
-}
-
-regular-layout.hotdog regular-layout-frame::part(container) {
+	box-sizing: border-box;
 	padding: 6px;
 }
 
@@ -57,8 +60,8 @@ regular-layout.hotdog regular-layout-frame::part(titlebar) {
 }
 
 regular-layout.hotdog regular-layout-frame::part(tab) {
+	box-sizing: border-box;
 	display: flex;
-	flex: 1 1 150px;
 	align-items: center;
 	padding: 0 3px 0 8px;
 	cursor: pointer;
@@ -68,6 +71,11 @@ regular-layout.hotdog regular-layout-frame::part(tab) {
 	font-family: "Tahoma", "Arial", sans-serif;
 	font-weight: bold;
 	font-size: 11px;
+	/* Raised bevel - the frame box no longer carries the border in the
+	   overlap model, so each tab frames itself. */
+	border-width: 2px;
+	border-color: #ff6b6b #8b0000 #8b0000 #ff6b6b;
+	border-style: solid;
 }
 
 regular-layout.hotdog regular-layout-frame::part(active-tab) {
@@ -87,6 +95,7 @@ regular-layout.hotdog:has(.overlay) > .overlay {
 regular-layout.hotdog regular-layout-frame.overlay {
 	margin: 0;
 	transition:
+		margin 0.1 ease-in-out,
 		top 0.1s ease-in-out,
 		height 0.1s ease-in-out,
 		width 0.1s ease-in-out,

package/themes/lorax.css

@@ -10,50 +10,62 @@
  * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
  */
 
+/*
+ * In the own-tab model, the frames of a stack overlap in one cell: each frame
+ * renders only its own tab (the engine tiles them into the shared titlebar) and
+ * only the selected frame shows its content. So this theme styles appearance,
+ * not layout - panel chrome lives on `::part(container)` (shown only for the
+ * selected frame) rather than the overlapping frame box, and the titlebar strip
+ * is transparent so every stacked frame's tab shows through.
+ */
+
 regular-layout.lorax {
 	font-family:
 		"ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas",
 		"Liberation Mono", monospace;
 }
 
-/* Frame */
 regular-layout.lorax regular-layout-frame {
-	margin: 3px;
-	margin-top: 27px;
-	border-radius: 0 6px 6px 6px;
-	border: 1px solid #666;
-	box-shadow: 0px 6px 6px -4px rgba(150, 150, 180);
+	--rl-tab-width: 200px;
 }
 
+/* Panel content chrome (only the selected frame's container is rendered). */
 regular-layout.lorax regular-layout-frame::part(container) {
+	box-sizing: border-box;
+	margin: 0 3px 3px 3px;
 	padding: 6px;
+	/* Square top so the tab strip sits flush; rounded bottom. */
+	border-radius: 0 6px 6px 6px;
+	border: 1px solid #666;
+	box-shadow: 0px 6px 6px -4px rgba(150, 150, 180);
 }
 
+/* Transparent strip; the engine tiles the per-frame tabs across it. */
 regular-layout.lorax regular-layout-frame::part(titlebar) {
-	display: flex;
-	align-items: stretch;
-	margin-left: -1px;
-	margin-right: -1px;
-	margin-bottom: 0px;
-	margin-top: -24px;
-	padding-right: 6px;
+	margin: 3px 6px 0 3px;
+	align-items: end;
 }
 
 regular-layout.lorax regular-layout-frame::part(tab) {
-	display: flex;
-	flex: 1 1 150px;
+	box-sizing: border-box;
 	align-items: center;
-	text-align: center;
+	justify-content: center;
 	font-size: 10px;
 	padding: 0 6px;
+	margin-right: 2px;
 	cursor: pointer;
-	max-width: 150px;
-	text-overflow: ellipsis;
 	border: 1px solid #666;
+	border-bottom: none;
 	border-radius: 6px 6px 0 0;
 	opacity: 0.5;
 }
 
+regular-layout.lorax regular-layout-frame::part(title) {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
 regular-layout.lorax regular-layout-frame::part(active-tab) {
 	opacity: 1;
 }
@@ -71,67 +83,52 @@ regular-layout.lorax regular-layout-frame::part(close):hover {
 	background-color: rgba(255, 0, 0, 0.2);
 }
 
-/* Frame in Overlay Mode */
 regular-layout.lorax regular-layout-frame.overlay {
-	background-color: rgba(0, 0, 0, 0.2);
-	border: 1px dashed rgb(0, 0, 0);
-	border-radius: 6px;
-	margin: 3px;
-	box-shadow: none;
 	transition:
+		maring 0.1s ease-in-out,
 		top 0.1s ease-in-out,
 		height 0.1s ease-in-out,
 		width 0.1s ease-in-out,
 		left 0.1s ease-in-out;
 }
 
-regular-layout.lorax regular-layout-frame::part(container),
-regular-layout.lorax regular-layout-frame::part(titlebar) {
-	display: none;
-}
-
-regular-layout.lorax regular-layout-frame:not(.overlay)::part(container),
-regular-layout.lorax regular-layout-frame:not(.overlay)::part(titlebar) {
-	display: flex;
-}
-
-/* Colors */
-regular-layout.lorax :nth-child(8n + 1),
+/* Colors (per panel position) - the content area and its tab share a hue. */
+regular-layout.lorax :nth-child(8n + 1)::part(container),
 regular-layout.lorax :nth-child(8n + 1)::part(tab) {
 	background-color: #ffadadff;
 }
 
-regular-layout.lorax :nth-child(8n + 2),
+regular-layout.lorax :nth-child(8n + 2)::part(container),
 regular-layout.lorax :nth-child(8n + 2)::part(tab) {
 	background-color: #ffd6a5ff;
 }
 
-regular-layout.lorax :nth-child(8n + 3),
+regular-layout.lorax :nth-child(8n + 3)::part(container),
 regular-layout.lorax :nth-child(8n + 3)::part(tab) {
 	background-color: #fdffb6ff;
 }
 
-regular-layout.lorax :nth-child(8n + 4),
+regular-layout.lorax :nth-child(8n + 4)::part(container),
 regular-layout.lorax :nth-child(8n + 4)::part(tab) {
 	background-color: #caffbfff;
 }
 
-regular-layout.lorax :nth-child(8n + 5),
+regular-layout.lorax :nth-child(8n + 5)::part(container),
 regular-layout.lorax :nth-child(8n + 5)::part(tab) {
 	background-color: #9bf6ffff;
 }
 
-regular-layout.lorax :nth-child(8n + 6),
+regular-layout.lorax :nth-child(8n + 6)::part(container),
 regular-layout.lorax :nth-child(8n + 6)::part(tab) {
 	background-color: #a0c4ffff;
 }
 
-regular-layout.lorax :nth-child(8n + 7),
+regular-layout.lorax :nth-child(8n + 7)::part(container),
 regular-layout.lorax :nth-child(8n + 7)::part(tab) {
 	background-color: #bdb2ffff;
 }
 
-regular-layout.lorax :nth-child(8n + 8),
+regular-layout.lorax :nth-child(8n + 8)::part(container),
 regular-layout.lorax :nth-child(8n + 8)::part(tab) {
 	background-color: #ffc6ffff;
 }