regular-layout 0.5.0 → 0.6.0

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

@@ -35,11 +35,11 @@
 export declare class RegularLayoutFrame extends HTMLElement {
     private _shadowRoot;
     private _container_sheet;
-    private _title_sheet;
+    private _tab_sheet;
     private _layout;
     private _header;
+    private _default_tab;
     private _drag;
-    private _tab_to_index_map;
     /**
      * Initializes this elements. Override this method and
      * `disconnectedCallback` to modify how this subclass renders the Shadow
@@ -57,14 +57,16 @@ export declare class RegularLayoutFrame extends HTMLElement {
     private onPointerLost;
     private drawTabs;
     /**
-     * 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.
+     * Regenerates this frame's tab stylesheet: the shared titlebar grid template
+     * (so every frame in the stack aligns), the column this frame's tab occupies,
+     * and the tab label. The label renders 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.
+     * @param slot - This frame's panel name.
+     * @param index - This frame's column (zero-based) within the stack.
+     * @param count - The number of tabs in the stack.
      */
-    private drawTitles;
+    private drawTab;
 }

package/package.json

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

package/src/layout/generate_grid.ts

@@ -18,6 +18,7 @@ interface GridCell {
 	colEnd: number;
 	rowStart: number;
 	rowEnd: number;
+	zIndex?: number;
 }
 
 function dedupe_sort(physics: Physics, result: number[], pos: number) {
@@ -102,15 +103,26 @@ function build_cells(
 ): GridCell[] {
 	if (panel.type === "tab-layout") {
 		const selected = panel.selected ?? 0;
-		return [
-			{
-				child: panel.tabs[selected],
-				colStart: find_track_index(physics, colPositions, colStart),
-				colEnd: find_track_index(physics, colPositions, colEnd),
-				rowStart: find_track_index(physics, rowPositions, rowStart),
-				rowEnd: find_track_index(physics, rowPositions, rowEnd),
-			},
-		];
+		const col_start = find_track_index(physics, colPositions, colStart);
+		const col_end = find_track_index(physics, colPositions, colEnd);
+		const row_start = find_track_index(physics, rowPositions, rowStart);
+		const row_end = find_track_index(physics, rowPositions, rowEnd);
+
+		// Stacked tabs all occupy the same cell, overlapping. Only the selected
+		// frame is lifted (`z-index:1`) so its content sits on top; the rest
+		// self-hide their content and just contribute their tab. Keeping the
+		// max frame `z-index` at 1 lets the drag overlay sit above any stack
+		// with a small constant (2). A single-tab stack
+		// emits one placement with no `z-index`, so non-stacked output is
+		// unchanged.
+		return panel.tabs.map((child, i) => ({
+			child,
+			colStart: col_start,
+			colEnd: col_end,
+			rowStart: row_start,
+			rowEnd: row_end,
+			zIndex: panel.tabs.length > 1 && i === selected ? 1 : undefined,
+		}));
 	}
 
 	const { children, sizes, orientation } = panel;
@@ -162,8 +174,11 @@ const child_template = (
 	slot: string,
 	rowPart: string,
 	colPart: string,
+	zIndex?: number,
 ) =>
-	`:host ::slotted([${physics.CHILD_ATTRIBUTE_NAME}="${slot}"]){display:flex;grid-column:${colPart};grid-row:${rowPart}}`;
+	`:host ::slotted([${physics.CHILD_ATTRIBUTE_NAME}="${slot}"]){display:flex;grid-column:${colPart};grid-row:${rowPart}${
+		zIndex === undefined ? "" : `;z-index:${zIndex}`
+	}}`;
 
 /**
  * Generates CSS Grid styles to render a layout tree.
@@ -202,9 +217,18 @@ export function create_css_grid_layout(
 ): string {
 	if (layout.type === "tab-layout") {
 		const selected = layout.selected ?? 0;
+		const stacked = layout.tabs.length > 1;
 		return [
 			host_template("100%", "100%"),
-			child_template(physics, layout.tabs[selected], "1", "1"),
+			...layout.tabs.map((tab, i) =>
+				child_template(
+					physics,
+					tab,
+					"1",
+					"1",
+					stacked && i === selected ? 1 : undefined,
+				),
+			),
 		].join("\n");
 	}
 
@@ -253,11 +277,13 @@ export function create_css_grid_layout(
 	for (const cell of cells) {
 		const colPart = formatGridLine(cell.colStart, cell.colEnd);
 		const rowPart = formatGridLine(cell.rowStart, cell.rowEnd);
-		css.push(child_template(physics, cell.child, rowPart, colPart));
+		css.push(
+			child_template(physics, cell.child, rowPart, colPart, cell.zIndex),
+		);
 		if (cell.child === overlay?.[1]) {
 			css.push(child_template(physics, overlay[0], rowPart, colPart));
 			css.push(
-				`:host ::slotted([${physics.CHILD_ATTRIBUTE_NAME}=${overlay[0]}]){z-index:1}`,
+				`:host ::slotted([${physics.CHILD_ATTRIBUTE_NAME}=${overlay[0]}]){z-index:2}`,
 			);
 		}
 	}

package/src/layout/generate_overlay.ts

@@ -69,6 +69,6 @@ export function updateOverlaySheet(
 		margin,
 	);
 
-	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;`;
+	const css = `display:flex;position:absolute!important;z-index:2;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/regular-layout-frame.ts

@@ -15,17 +15,19 @@ import type { RegularLayout } from "./regular-layout.ts";
 import type { RegularLayoutTab } from "./regular-layout-tab.ts";
 
 const CSS = `
-:host{box-sizing:border-box;flex-direction:column}
-:host::part(titlebar){display:flex;height:24px;user-select:none;overflow:hidden}
-:host::part(container){flex:1 1 auto}
-:host::part(title){flex:1 1 auto;pointer-events:none}
-:host::part(close){align-self:stretch}
-:host::slotted{flex:1 1 auto;}
-:host regular-layout-tab{width:0px;}
+:host{box-sizing:border-box;flex-direction:column;pointer-events:none}
+[part~="titlebar"]{height:24px;user-select:none;overflow:hidden}
+[part~="container"]{flex:1 1 auto;pointer-events:auto}
+[part~="title"]{flex:1 1 auto;pointer-events:none}
+[part~="close"]{align-self:stretch}
+:host([inactive]) [part~="container"]{display:none}
+.tabs{display:grid;width:100%;height:100%}
+.tabs slot[name="tab"]{display:grid;grid-row:1;pointer-events:auto}
+.tabs regular-layout-tab{display:flex;overflow:hidden}
 `;
 
 const HTML_TEMPLATE = `
-	<div part="titlebar"></div>
+	<div part="titlebar"><div class="tabs"><slot name="tab"><regular-layout-tab></regular-layout-tab></slot></div></div>
 	<div part="container"><slot></slot></div>
 `;
 
@@ -82,11 +84,11 @@ const title_variable = (slot: string): string =>
 export class RegularLayoutFrame extends HTMLElement {
 	private _shadowRoot!: ShadowRoot;
 	private _container_sheet!: CSSStyleSheet;
-	private _title_sheet!: CSSStyleSheet;
+	private _tab_sheet!: CSSStyleSheet;
 	private _layout!: RegularLayout;
 	private _header!: HTMLElement;
+	private _default_tab!: RegularLayoutTab;
 	private _drag: DragState | null = null;
-	private _tab_to_index_map: WeakMap<RegularLayoutTab, number> = new WeakMap();
 
 	/**
 	 * Initializes this elements. Override this method and
@@ -96,15 +98,20 @@ export class RegularLayoutFrame extends HTMLElement {
 	connectedCallback() {
 		this._container_sheet ??= new CSSStyleSheet();
 		this._container_sheet.replaceSync(CSS);
-		this._title_sheet ??= new CSSStyleSheet();
+		this._tab_sheet ??= new CSSStyleSheet();
 		this._shadowRoot ??= this.attachShadow({ mode: "open" });
 		this._shadowRoot.adoptedStyleSheets = [
 			this._container_sheet,
-			this._title_sheet,
+			this._tab_sheet,
 		];
 		this._shadowRoot.innerHTML = HTML_TEMPLATE;
 		this._layout = this.parentElement as RegularLayout;
 		this._header = this._shadowRoot.children[0] as HTMLElement;
+		// The built-in tab is the `slot="tab"` fallback; a consumer-supplied
+		// `slot="tab"` child replaces it.
+		this._default_tab = this._header.querySelector(
+			"regular-layout-tab",
+		) as RegularLayoutTab;
 		this._header.addEventListener("pointerdown", this.onPointerDown);
 		this.addEventListener("pointermove", this.onPointerMove);
 		this.addEventListener("pointerup", this.onPointerUp);
@@ -140,9 +147,17 @@ export class RegularLayoutFrame extends HTMLElement {
 
 		const elem = event.target as RegularLayoutTab;
 		if (elem.part.contains("tab")) {
+			const slot = this.getAttribute(
+				this._layout.savePhysics().CHILD_ATTRIBUTE_NAME,
+			);
+
 			const path = this._layout.calculateIntersect(event);
-			if (path) {
-				this._drag = { path };
+			if (path && slot) {
+				// Drag *this frame's* panel, not whichever panel is front-most at
+				// the pointer (which is what `calculateIntersect` resolves to in a
+				// stack). The overlapping stack shares geometry, so only the slot
+				// needs overriding.
+				this._drag = { path: { ...path, slot } };
 				this.setPointerCapture(event.pointerId);
 				event.preventDefault();
 			} else {
@@ -190,54 +205,41 @@ export class RegularLayoutFrame extends HTMLElement {
 			return;
 		}
 
-		const new_panel = event.detail;
-		let new_tab_panel = this._layout.getPanel(slot, new_panel);
-		if (!new_tab_panel) {
-			new_tab_panel = {
-				type: "tab-layout",
-				tabs: [slot],
-				selected: 0,
-			};
-		}
-
-		for (let i = 0; i < new_tab_panel.tabs.length; i++) {
-			if (i >= this._header.children.length) {
-				const new_tab = document.createElement("regular-layout-tab");
-				new_tab.populate(this._layout, new_tab_panel, i);
-				this._header.appendChild(new_tab);
-				this._tab_to_index_map.set(new_tab, i);
-			} else {
-				const tab = this._header.children[i] as RegularLayoutTab;
-				tab.populate(this._layout, new_tab_panel, i);
-			}
-		}
-
-		const last_index = new_tab_panel.tabs.length;
-		for (let j = this._header.children.length - 1; j >= last_index; j--) {
-			this._header.removeChild(this._header.children[j]);
+		let tab_panel = this._layout.getPanel(slot, event.detail);
+		if (!tab_panel) {
+			tab_panel = { type: "tab-layout", tabs: [slot], selected: 0 };
 		}
 
-		this.drawTitles(attr, new_tab_panel.tabs);
+		// Each frame renders only its *own* tab. Frames in a stack overlap (see
+		// `create_css_grid_layout`); the tabs tile because every frame derives
+		// the same column template and places its tab in its own column. Only
+		// the selected frame shows its content; the rest keep just their tab.
+		const index = tab_panel.tabs.indexOf(slot);
+		const selected = (tab_panel.selected ?? 0) === index;
+		this.toggleAttribute("inactive", !selected);
+		this._default_tab.populate(this._layout, tab_panel, index);
+		this.drawTab(slot, index, tab_panel.tabs.length);
 	};
 
 	/**
-	 * 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.
+	 * Regenerates this frame's tab stylesheet: the shared titlebar grid template
+	 * (so every frame in the stack aligns), the column this frame's tab occupies,
+	 * and the tab label. The label renders 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.
+	 * @param slot - This frame's panel name.
+	 * @param index - This frame's column (zero-based) within the stack.
+	 * @param count - The number of tabs in the stack.
 	 */
-	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);
+	private drawTab = (slot: string, index: number, count: number) => {
+		this._tab_sheet.replaceSync(
+			[
+				`.tabs{grid-template-columns:repeat(${count},var(--rl-tab-width,1fr))}`,
+				`.tabs slot[name="tab"]{grid-column:${index + 1}}`,
+				`[part~="title"]::before{content:var(${title_variable(slot)}, ${css_string(slot)})}`,
+			].join("\n"),
+		);
 	};
 }

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,