regular-layout 0.5.0 → 0.6.1

package/src/regular-layout.ts

@@ -130,6 +130,7 @@ export class RegularLayout extends HTMLElement {
 	private _presizeQueue: PresizeQueue;
 	private _overlayController: OverlayController;
 	private _maximized?: string;
+	private _resize_observer?: ResizeObserver;
 
 	constructor() {
 		super();
@@ -141,7 +142,13 @@ export class RegularLayout extends HTMLElement {
 		this._cursor_stylesheet = new CSSStyleSheet();
 		this._cursor_override = false;
 		const event_name = `${this._physics.CUSTOM_EVENT_NAME_PREFIX}-before-resize`;
-		this._presizeQueue = new PresizeQueue(this, event_name);
+		// Refresh the bounds cache once per layout transition, so consumers
+		// reading coordinates from a `before-resize` handler always see the
+		// element's current position - a `ResizeObserver` alone can't catch
+		// position-only moves of the host.
+		this._presizeQueue = new PresizeQueue(this, event_name, () => {
+			this._dimensions = undefined;
+		});
 		this._overlayController = new OverlayController(this.create_overlay_host());
 		this._shadowRoot.adoptedStyleSheets = [
 			this._stylesheet,
@@ -150,6 +157,11 @@ export class RegularLayout extends HTMLElement {
 	}
 
 	connectedCallback() {
+		this._resize_observer ??= new ResizeObserver(() => {
+			this._dimensions = undefined;
+		});
+
+		this._resize_observer.observe(this);
 		this.addEventListener("dblclick", this.onDblClick);
 		this.addEventListener("pointerdown", this.onPointerDown);
 		this.addEventListener("pointerup", this.onPointerUp);
@@ -157,6 +169,7 @@ export class RegularLayout extends HTMLElement {
 	}
 
 	disconnectedCallback() {
+		this._resize_observer?.disconnect();
 		this.removeEventListener("dblclick", this.onDblClick);
 		this.removeEventListener("pointerdown", this.onPointerDown);
 		this.removeEventListener("pointerup", this.onPointerUp);
@@ -334,34 +347,54 @@ export class RegularLayout extends HTMLElement {
 	 * {@link save}, and any subsequent {@link restore} resets the layout to the
 	 * minimized (normal, multi-panel) view.
 	 *
+	 * Before applying, dispatches a cancelable `regular-layout-before-resize`
+	 * event (as {@link restore} does) whose paths describe the post-maximize
+	 * geometry - a single full-window entry for `name`. If the event is
+	 * cancelled via `preventDefault()`, the update is suspended until
+	 * {@link resumeResize} is called.
+	 *
 	 * Has no effect if `name` is not present in the current layout.
 	 *
 	 * @param name - The name of the panel to maximize.
 	 */
-	maximize = (name: string) => {
+	maximize = async (name: string) => {
 		if (!this.getPanel(name)) {
 			return;
 		}
 
-		this._maximized = name;
-		this._stylesheet.replaceSync(
-			create_css_maximize_layout(name, this._physics),
-		);
+		// The post-maximize geometry as a `Layout`: `name` alone, full-window.
+		// Panels hidden by the maximize are absent from the presize paths,
+		// consistent with `calculate_presize_paths`' visible-panels-only
+		// semantics.
+		const layout: Layout = { type: "tab-layout", tabs: [name], selected: 0 };
+		await this._presizeQueue.run(layout, () => {
+			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.
+	 *
+	 * Before applying, dispatches a cancelable `regular-layout-before-resize`
+	 * event (as {@link restore} does) with paths for the restored multi-panel
+	 * geometry. If the event is cancelled via `preventDefault()`, the update
+	 * is suspended until {@link resumeResize} is called.
 	 */
-	minimize = () => {
+	minimize = async () => {
 		if (this._maximized === undefined) {
 			return;
 		}
 
-		this._maximized = undefined;
-		this._stylesheet.replaceSync(
-			create_css_grid_layout(this._panel, undefined, this._physics),
-		);
+		await this._presizeQueue.run(this._panel, () => {
+			this._maximized = undefined;
+			this._stylesheet.replaceSync(
+				create_css_grid_layout(this._panel, undefined, this._physics),
+			);
+		});
 	};
 
 	/**
@@ -371,6 +404,7 @@ export class RegularLayout extends HTMLElement {
 	 * @param layout - The layout tree to restore
 	 */
 	restoreSync = (layout: Layout, _is_flattened: boolean = false) => {
+		this._dimensions = undefined;
 		this._maximized = undefined;
 		this._panel = !_is_flattened ? flatten(layout) : layout;
 		const css = create_css_grid_layout(this._panel, undefined, this._physics);

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;
 }