ngwr 15.0.1 → 15.2.0

package/fesm2022/ngwr-window.mjs

@@ -1,15 +1,16 @@
 import * as i0 from "@angular/core";
-import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, EnvironmentInjector, InjectionToken, Injector, PLATFORM_ID, Service, ViewContainerRef, ViewEncapsulation, afterNextRender, computed, effect, inject, input, model, output, runInInjectionContext, signal, viewChild, viewChildren } from "@angular/core";
-import { coerceBooleanProperty, coerceNumberProperty } from "@angular/cdk/coercion";
-import { isPlatformBrowser } from "@angular/common";
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, EnvironmentInjector, InjectionToken, Injector, PLATFORM_ID, Service, TemplateRef, ViewContainerRef, ViewEncapsulation, afterNextRender, afterRenderEffect, computed, effect, inject, input, output, runInInjectionContext, signal, untracked, viewChild, viewChildren } from "@angular/core";
+import { coerceNumberProperty } from "@angular/cdk/coercion";
+import { NgComponentOutlet, NgTemplateOutlet, isPlatformBrowser } from "@angular/common";
 import { useI18nFormatter, useI18nText } from "ngwr/i18n";
-import { clamp, randomId, toClassList } from "ngwr/utils";
+import { clamp, randomId, toClassList, wrFeature } from "ngwr/utils";
 import { Directionality } from "@angular/cdk/bidi";
 import { ComponentPortal } from "@angular/cdk/portal";
 import { WR_OVERLAY, wrFollowDirection } from "ngwr/overlay";
 import { FocusTrapFactory } from "@angular/cdk/a11y";
 import { ReplaySubject, Subject } from "rxjs";
 import { WrStorage } from "ngwr/storage";
+import { WrDropdown, WrDropdownItem, WrDropdownMenu } from "ngwr/dropdown";
 /**
 * @license
 *
@@ -18,6 +19,7 @@ import { WrStorage } from "ngwr/storage";
 */
 const WR_WINDOW_REF = new InjectionToken("WR_WINDOW_REF");
 const WR_WINDOW_DATA = new InjectionToken("WR_WINDOW_DATA");
+const WR_WINDOW_DEFAULTS = new InjectionToken("WR_WINDOW_DEFAULTS");
 function storageKey(cfg) {
 	return `wr:window:${cfg.prefix ? `${cfg.prefix}:` : ""}${cfg.key}`;
 }
@@ -40,215 +42,92 @@ function detectOs() {
 	return "windows";
 }
 const DETECTED_OS = detectOs();
-function optionalBoolean(value) {
-	return value === null || value === void 0 ? null : coerceBooleanProperty(value);
+const SNAP_HOT_ZONE = 12;
+const DRAG_THRESHOLD = 4;
+const INTERACTIVE = "button, input, select, textarea, a[href], label, [contenteditable]:not([contenteditable=\"false\"]), [role=\"button\"], [role=\"link\"], [role=\"checkbox\"], [role=\"switch\"], [role=\"radio\"], [role=\"slider\"], [role=\"spinbutton\"], [role=\"textbox\"], [role=\"combobox\"], [role=\"tab\"], [role=\"menuitem\"], [role=\"option\"]";
+function asTemplate(content) {
+	return content instanceof TemplateRef ? content : null;
 }
-const SIZE_PRESETS = {
-	sm: {
-		width: 320,
-		height: 200
-	},
-	md: {
-		width: 480,
-		height: 320
-	},
-	lg: {
-		width: 720,
-		height: 480
-	}
-};
-const MIN_ON_VIEWPORT = 24;
-function viewportWidth() {
-	return typeof window === "undefined" ? 1024 : window.innerWidth;
-}
-function viewportHeight() {
-	return typeof window === "undefined" ? 768 : window.innerHeight;
+function asComponent(content) {
+	return content && !(content instanceof TemplateRef) ? content : null;
 }
 var WrWindow = class WrWindow {
-	open = model(true, ...ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []);
-	state = model("normal", ...ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []);
-	title = input("", ...ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []);
+	model = input.required(...ngDevMode ? [{ debugName: "model" }] : /* istanbul ignore next */ []);
+	windowRef = input(null, ...ngDevMode ? [{ debugName: "windowRef" }] : /* istanbul ignore next */ []);
+	injector = input(void 0, ...ngDevMode ? [{ debugName: "injector" }] : /* istanbul ignore next */ []);
+	titleExtra = input(null, ...ngDevMode ? [{ debugName: "titleExtra" }] : /* istanbul ignore next */ []);
+	statusBar = input(null, ...ngDevMode ? [{ debugName: "statusBar" }] : /* istanbul ignore next */ []);
+	closed = output();
 	titleId = randomId("wr-window-title");
 	closeLabel = useI18nText(NO_OVERRIDE$1, "window.close", "Close");
 	minimizeLabel = useI18nText(NO_OVERRIDE$1, "window.minimize", "Minimize");
 	maximizeLabel = useI18nText(NO_OVERRIDE$1, "window.maximize", "Maximize");
 	restoreLabel = useI18nText(NO_OVERRIDE$1, "window.restore", "Restore");
 	restoreDownLabel = useI18nText(NO_OVERRIDE$1, "window.restoreDown", "Restore down");
-	minimizeActionLabel = computed(() => this.state() === "minimized" ? this.restoreLabel() : this.minimizeLabel(), ...ngDevMode ? [{ debugName: "minimizeActionLabel" }] : /* istanbul ignore next */ []);
-	maximizeActionLabel = computed(() => this.state() === "maximized" ? this.restoreDownLabel() : this.maximizeLabel(), ...ngDevMode ? [{ debugName: "maximizeActionLabel" }] : /* istanbul ignore next */ []);
-	initialX = input(null, {
-		...ngDevMode ? { debugName: "initialX" } : /* istanbul ignore next */ {},
-		transform: (v) => v == null ? null : coerceNumberProperty(v, 0)
-	});
-	initialY = input(null, {
-		...ngDevMode ? { debugName: "initialY" } : /* istanbul ignore next */ {},
-		transform: (v) => v == null ? null : coerceNumberProperty(v, 0)
-	});
-	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
-	initialWidth = input(null, {
-		...ngDevMode ? { debugName: "initialWidth" } : /* istanbul ignore next */ {},
-		transform: (v) => v == null ? null : coerceNumberProperty(v, 480)
-	});
-	initialHeight = input(null, {
-		...ngDevMode ? { debugName: "initialHeight" } : /* istanbul ignore next */ {},
-		transform: (v) => v == null ? null : coerceNumberProperty(v, 320)
-	});
-	os = input("auto", ...ngDevMode ? [{ debugName: "os" }] : /* istanbul ignore next */ []);
-	resolvedOs = computed(() => {
-		const o = this.os();
-		return o === "auto" ? DETECTED_OS : o;
-	}, ...ngDevMode ? [{ debugName: "resolvedOs" }] : /* istanbul ignore next */ []);
-	minimizeVisible = computed(() => this.showMinimize() ?? this.resolvedOs() !== "linux", ...ngDevMode ? [{ debugName: "minimizeVisible" }] : /* istanbul ignore next */ []);
-	maximizeVisible = computed(() => this.showMaximize() ?? this.resolvedOs() !== "linux", ...ngDevMode ? [{ debugName: "maximizeVisible" }] : /* istanbul ignore next */ []);
-	chromeSize = input("md", ...ngDevMode ? [{ debugName: "chromeSize" }] : /* istanbul ignore next */ []);
-	animations = input(true, {
-		...ngDevMode ? { debugName: "animations" } : /* istanbul ignore next */ {},
-		transform: coerceBooleanProperty
-	});
-	minWidth = input(220, {
-		...ngDevMode ? { debugName: "minWidth" } : /* istanbul ignore next */ {},
-		transform: (v) => coerceNumberProperty(v, 220)
-	});
-	minHeight = input(140, {
-		...ngDevMode ? { debugName: "minHeight" } : /* istanbul ignore next */ {},
-		transform: (v) => coerceNumberProperty(v, 140)
-	});
-	maxWidth = input(Number.POSITIVE_INFINITY, {
-		...ngDevMode ? { debugName: "maxWidth" } : /* istanbul ignore next */ {},
-		transform: (v) => v == null ? Number.POSITIVE_INFINITY : coerceNumberProperty(v, Infinity)
-	});
-	maxHeight = input(Number.POSITIVE_INFINITY, {
-		...ngDevMode ? { debugName: "maxHeight" } : /* istanbul ignore next */ {},
-		transform: (v) => v == null ? Number.POSITIVE_INFINITY : coerceNumberProperty(v, Infinity)
-	});
-	movable = input(true, {
-		...ngDevMode ? { debugName: "movable" } : /* istanbul ignore next */ {},
-		transform: coerceBooleanProperty
-	});
-	resizable = input(true, {
-		...ngDevMode ? { debugName: "resizable" } : /* istanbul ignore next */ {},
-		transform: coerceBooleanProperty
-	});
-	keepInViewport = input(true, {
-		...ngDevMode ? { debugName: "keepInViewport" } : /* istanbul ignore next */ {},
-		transform: coerceBooleanProperty
-	});
-	snap = input("none", ...ngDevMode ? [{ debugName: "snap" }] : /* istanbul ignore next */ []);
-	dragHandle = input(null, ...ngDevMode ? [{ debugName: "dragHandle" }] : /* istanbul ignore next */ []);
-	showMinimize = input(null, {
-		...ngDevMode ? { debugName: "showMinimize" } : /* istanbul ignore next */ {},
-		transform: optionalBoolean
-	});
-	showMaximize = input(null, {
-		...ngDevMode ? { debugName: "showMaximize" } : /* istanbul ignore next */ {},
-		transform: optionalBoolean
-	});
-	showClose = input(true, {
-		...ngDevMode ? { debugName: "showClose" } : /* istanbul ignore next */ {},
-		transform: coerceBooleanProperty
-	});
-	closed = output();
-	moved = output();
-	resized = output();
-	minimizedWithFocus = output();
+	untitled = useI18nText(NO_OVERRIDE$1, "window.untitled", "Untitled");
+	moveModeText = useI18nText(NO_OVERRIDE$1, "window.moveMode", "Moving the window. Use the arrow keys, Enter to finish, Escape to cancel.");
+	resizeModeText = useI18nText(NO_OVERRIDE$1, "window.resizeMode", "Resizing the window. Use the arrow keys, Enter to finish, Escape to cancel.");
+	movedText = useI18nFormatter("window.moved", "Window moved to {{x}}, {{y}}");
+	resizedText = useI18nFormatter("window.resized", "Window resized to {{width}} by {{height}}");
 	manager = inject(WrWindowManager);
-	destroyRef = inject(DestroyRef);
 	elRef = inject(ElementRef);
 	focusTraps = inject(FocusTrapFactory);
-	viewport = signal({
-		width: viewportWidth(),
-		height: viewportHeight()
-	}, ...ngDevMode ? [{ debugName: "viewport" }] : /* istanbul ignore next */ []);
-	x_ = signal(0, ...ngDevMode ? [{ debugName: "x_" }] : /* istanbul ignore next */ []);
-	y_ = signal(0, ...ngDevMode ? [{ debugName: "y_" }] : /* istanbul ignore next */ []);
-	width_ = signal(0, ...ngDevMode ? [{ debugName: "width_" }] : /* istanbul ignore next */ []);
-	height_ = signal(0, ...ngDevMode ? [{ debugName: "height_" }] : /* istanbul ignore next */ []);
-	restoreGeometry = null;
-	z = signal(this.manager.bringToFront(), ...ngDevMode ? [{ debugName: "z" }] : /* istanbul ignore next */ []);
+	dir = inject(Directionality, { optional: true });
+	endMove = null;
+	constructor() {
+		inject(DestroyRef).onDestroy(() => this.endMove?.());
+	}
+	announcement = signal("", ...ngDevMode ? [{ debugName: "announcement" }] : /* istanbul ignore next */ []);
+	lastFocused = null;
+	state = computed(() => this.model().state(), ...ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []);
+	rect = computed(() => this.model().rect(), ...ngDevMode ? [{ debugName: "rect" }] : /* istanbul ignore next */ []);
+	options = computed(() => this.model().options(), ...ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []);
+	displayTitle = computed(() => this.model().title() || this.untitled(), ...ngDevMode ? [{ debugName: "displayTitle" }] : /* istanbul ignore next */ []);
+	resolvedOs = computed(() => {
+		const os = this.options().os;
+		return os === "auto" ? DETECTED_OS : os;
+	}, ...ngDevMode ? [{ debugName: "resolvedOs" }] : /* istanbul ignore next */ []);
+	minimizeVisible = computed(() => this.options().showMinimize ?? this.resolvedOs() !== "linux", ...ngDevMode ? [{ debugName: "minimizeVisible" }] : /* istanbul ignore next */ []);
+	maximizeVisible = computed(() => this.options().showMaximize ?? this.resolvedOs() !== "linux", ...ngDevMode ? [{ debugName: "maximizeVisible" }] : /* istanbul ignore next */ []);
+	showClose = computed(() => this.options().showClose, ...ngDevMode ? [{ debugName: "showClose" }] : /* istanbul ignore next */ []);
+	actionCount = computed(() => Number(this.minimizeVisible()) + Number(this.maximizeVisible()) + Number(this.showClose()), ...ngDevMode ? [{ debugName: "actionCount" }] : /* istanbul ignore next */ []);
+	minimizeActionLabel = computed(() => this.state() === "minimized" ? this.restoreLabel() : this.minimizeLabel(), ...ngDevMode ? [{ debugName: "minimizeActionLabel" }] : /* istanbul ignore next */ []);
+	maximizeActionLabel = computed(() => this.state() === "maximized" ? this.restoreDownLabel() : this.maximizeLabel(), ...ngDevMode ? [{ debugName: "maximizeActionLabel" }] : /* istanbul ignore next */ []);
+	resizeHandles = computed(() => this.options().resizable && this.state() === "normal", ...ngDevMode ? [{ debugName: "resizeHandles" }] : /* istanbul ignore next */ []);
 	classes = computed(() => {
+		const model = this.model();
 		const parts = [
 			"wr-window",
 			`wr-window--${this.state()}`,
 			`wr-window--os-${this.resolvedOs()}`,
-			`wr-window--chrome-${this.chromeSize()}`
+			`wr-window--chrome-${this.options().chromeSize}`,
+			model.isActive() ? "wr-window--active" : "wr-window--inactive"
 		];
-		if (!this.open()) parts.push("wr-window--closed");
-		if (this.resizable() && this.state() === "normal") parts.push("wr-window--resizable");
-		if (!this.animations()) parts.push("wr-window--no-anim");
+		if (this.resizeHandles()) parts.push("wr-window--resizable");
+		if (!this.options().animations) parts.push("wr-window--no-anim");
+		const mode = model.keyboardMode();
+		if (mode) parts.push(mode === "move" ? "wr-window--keyboard-moving" : "wr-window--keyboard-resizing");
 		return parts.join(" ");
 	}, ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
-	x = computed(() => this.state() === "maximized" ? 0 : this.x_(), ...ngDevMode ? [{ debugName: "x" }] : /* istanbul ignore next */ []);
-	y = computed(() => this.state() === "maximized" ? 0 : this.y_(), ...ngDevMode ? [{ debugName: "y" }] : /* istanbul ignore next */ []);
-	width = computed(() => this.state() === "maximized" ? this.viewport().width : this.width_(), ...ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []);
-	height = computed(() => this.state() === "maximized" ? this.viewport().height : this.state() === "minimized" ? this.minimizedHeight() : this.height_(), ...ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []);
-	minimizedHeight = signal(40, ...ngDevMode ? [{ debugName: "minimizedHeight" }] : /* istanbul ignore next */ []);
-	snapTarget = signal(null, ...ngDevMode ? [{ debugName: "snapTarget" }] : /* istanbul ignore next */ []);
-	constructor() {
-		afterNextRender(() => {
-			const measure = () => this.viewport.set({
-				width: viewportWidth(),
-				height: viewportHeight()
-			});
-			measure();
-			window.addEventListener("resize", measure);
-			this.destroyRef.onDestroy(() => window.removeEventListener("resize", measure));
-			this.seedInitialGeometry();
-		});
-		effect(() => {
-			if (this.state() !== "normal") return;
-			this.clampToViewport();
-		});
+	titleExtraTemplate = computed(() => asTemplate(this.titleExtra()), ...ngDevMode ? [{ debugName: "titleExtraTemplate" }] : /* istanbul ignore next */ []);
+	titleExtraComponent = computed(() => asComponent(this.titleExtra()), ...ngDevMode ? [{ debugName: "titleExtraComponent" }] : /* istanbul ignore next */ []);
+	statusBarTemplate = computed(() => asTemplate(this.statusBar()), ...ngDevMode ? [{ debugName: "statusBarTemplate" }] : /* istanbul ignore next */ []);
+	statusBarComponent = computed(() => asComponent(this.statusBar()), ...ngDevMode ? [{ debugName: "statusBarComponent" }] : /* istanbul ignore next */ []);
+	slotContext = computed(() => {
+		const ref = this.windowRef();
+		return ref ? { $implicit: ref } : null;
+	}, ...ngDevMode ? [{ debugName: "slotContext" }] : /* istanbul ignore next */ []);
+	ngOnInit() {
+		this.model().element = this.elRef.nativeElement;
 	}
 	close() {
 		this.closed.emit();
 	}
 	minimize() {
-		const minimizing = this.state() !== "minimized";
-		const hadFocus = minimizing && this.hasFocus();
-		this.state.set(minimizing ? "minimized" : "normal");
-		if (hadFocus) this.minimizedWithFocus.emit();
+		this.model().minimize();
 	}
 	maximize() {
-		if (this.state() === "maximized") this.restore();
-		else {
-			this.restoreGeometry = {
-				x: this.x_(),
-				y: this.y_(),
-				width: this.width_(),
-				height: this.height_()
-			};
-			this.state.set("maximized");
-		}
-	}
-	restore() {
-		if (this.state() === "maximized" && this.restoreGeometry) {
-			this.x_.set(this.restoreGeometry.x);
-			this.y_.set(this.restoreGeometry.y);
-			this.width_.set(this.restoreGeometry.width);
-			this.height_.set(this.restoreGeometry.height);
-			this.restoreGeometry = null;
-		}
-		this.state.set("normal");
-	}
-	moveTo(x, y) {
-		this.x_.set(x);
-		this.y_.set(y);
-		this.clampToViewport();
-	}
-	resizeTo(width, height) {
-		this.width_.set(clamp(width, this.minWidth(), this.maxWidth()));
-		this.height_.set(clamp(height, this.minHeight(), this.maxHeight()));
-		this.clampToViewport();
-	}
-	center() {
-		const w = this.width_();
-		const h = this.height_();
-		const { width: vw, height: vh } = this.viewport();
-		this.x_.set(Math.max(0, (vw - w) / 2));
-		this.y_.set(Math.max(0, (vh - h) / 2));
-	}
-	focus() {
-		this.z.set(this.manager.bringToFront());
+		this.model().maximize();
 	}
 	focusInitial() {
 		const host = this.elRef.nativeElement;
@@ -262,58 +141,155 @@ var WrWindow = class WrWindow {
 		}
 		host.focus({ preventScroll: true });
 	}
-	hasFocus() {
+	focusLast() {
 		const host = this.elRef.nativeElement;
-		return host.contains(host.ownerDocument.activeElement);
+		if (!host.isConnected || this.state() === "minimized") return;
+		const last = this.lastFocused;
+		if (last?.isConnected && host.contains(last)) {
+			last.focus({ preventScroll: true });
+			if (host.ownerDocument.activeElement === last) return;
+		}
+		this.focusInitial();
+	}
+	onFocusIn(event) {
+		const target = event.target;
+		if (!(target instanceof HTMLElement) || target === this.elRef.nativeElement) return;
+		if (target.closest(".wr-window__chrome-action")) return;
+		this.lastFocused = target;
 	}
-	focusWindow() {
-		this.focus();
+	onFocusOut(event) {
+		const next = event.relatedTarget;
+		if (this.model().keyboardMode() && !(next instanceof Node && this.elRef.nativeElement.contains(next))) this.commitKeyboard();
+	}
+	onPointerDown(event) {
+		const model = this.model();
+		if (model.keyboardMode()) this.commitKeyboard();
+		const target = event.target instanceof Element ? event.target : null;
+		const grab = event.button === 0 && !!target && this.isGrabArea(target);
+		if (model.state() === "minimized") return;
+		const ref = this.windowRef();
+		if (ref) this.manager._activate(ref, { focus: grab });
+		if (grab) this.startMove(event);
+	}
+	isGrabArea(target) {
+		const host = this.elRef.nativeElement;
+		if (target.closest(".wr-window__chrome-action, .wr-window__handle")) return false;
+		const control = target.closest(INTERACTIVE);
+		if (control && host.contains(control)) return false;
+		const handle = this.options().dragHandle;
+		if (handle) {
+			const match = target.closest(handle);
+			return !!match && host.contains(match);
+		}
+		return !!target.closest(".wr-window__chrome");
+	}
+	isDblClickArea(target) {
+		const host = this.elRef.nativeElement;
+		if (target.closest(".wr-window__chrome-action, .wr-window__handle")) return false;
+		const control = target.closest(INTERACTIVE);
+		if (control && host.contains(control)) return false;
+		const chrome = target.closest(".wr-window__chrome");
+		return !!chrome && host.contains(chrome) || this.isGrabArea(target);
 	}
 	startMove(event) {
-		if (!this.movable() || this.state() !== "normal") return;
-		const targetEl = event.target;
-		if (targetEl.closest(".wr-window__chrome-action")) return;
-		const handle = this.dragHandle();
-		if (handle && !targetEl.closest(handle)) return;
+		const model = this.model();
+		const o = model.options();
+		const state = model.state();
+		if (!o.movable || state === "minimized") return;
+		if (state === "maximized" && !o.restoreOnDrag) return;
 		event.preventDefault();
-		const target = event.currentTarget;
-		target.setPointerCapture(event.pointerId);
-		const startX = this.x_();
-		const startY = this.y_();
+		this.endMove?.();
+		const host = this.elRef.nativeElement;
+		const doc = host.ownerDocument;
+		const pressed = event.target instanceof Element ? event.target : host;
+		const pointerId = event.pointerId;
 		const originX = event.clientX;
 		const originY = event.clientY;
+		const start = model.rect();
+		let detached = state === "normal" && !model.snap();
+		if (!detached && !o.restoreOnDrag) {
+			model.unsnapInPlace();
+			detached = true;
+		}
+		let startX = model.x();
+		let startY = model.y();
+		let dragging = false;
 		const move = (e) => {
-			this.x_.set(startX + (e.clientX - originX));
-			this.y_.set(startY + (e.clientY - originY));
-			this.clampToViewport();
-			this.snapTarget.set(this.detectSnapTarget(e.clientX, e.clientY));
+			if (e.pointerId !== pointerId) return;
+			const dx = e.clientX - originX;
+			const dy = e.clientY - originY;
+			if (!dragging && Math.hypot(dx, dy) >= DRAG_THRESHOLD) {
+				dragging = true;
+				try {
+					pressed.setPointerCapture?.(pointerId);
+				} catch {}
+			}
+			if (!detached) {
+				if (!dragging) return;
+				const fraction = start.width > 0 ? (originX - start.left) / start.width : .5;
+				model.restore();
+				startX = originX - fraction * model.width();
+				startY = start.top;
+				detached = true;
+			}
+			model.setRaw({
+				x: startX + dx,
+				y: startY + dy
+			});
+			model.clamp();
+			model.dragTarget.set(this.detectSnapTarget(e.clientX, e.clientY));
 		};
-		const cleanup = (e) => {
-			target.releasePointerCapture(e.pointerId);
-			target.removeEventListener("pointermove", move);
-			target.removeEventListener("pointerup", cleanup);
-			target.removeEventListener("pointercancel", cleanup);
-			const snap = this.snapTarget();
-			this.snapTarget.set(null);
-			if (snap) this.applySnap(snap);
-			this.moved.emit({
-				x: this.x_(),
-				y: this.y_()
+		const stop = () => {
+			doc.removeEventListener("pointermove", move);
+			doc.removeEventListener("pointerup", end);
+			doc.removeEventListener("pointercancel", end);
+			if (dragging && pressed.hasPointerCapture?.(pointerId)) pressed.releasePointerCapture?.(pointerId);
+			model.dragTarget.set(null);
+			this.endMove = null;
+		};
+		const end = (e) => {
+			if (e.pointerId !== pointerId) return;
+			const snap = model.dragTarget();
+			stop();
+			if (dragging) this.swallowClick(doc, pressed);
+			if (!detached) return;
+			if (snap) {
+				model.snapTo(snap);
+				if (snap !== "top") model.resized.next({
+					width: model.rect().width,
+					height: model.rect().height
+				});
+			}
+			const r = model.rect();
+			if (snap || r.left !== start.left || r.top !== start.top) model.moved.next({
+				x: r.left,
+				y: r.top
 			});
 		};
-		target.addEventListener("pointermove", move);
-		target.addEventListener("pointerup", cleanup);
-		target.addEventListener("pointercancel", cleanup);
+		doc.addEventListener("pointermove", move);
+		doc.addEventListener("pointerup", end);
+		doc.addEventListener("pointercancel", end);
+		this.endMove = stop;
+	}
+	swallowClick(doc, pressed) {
+		const swallow = (e) => {
+			if (e.target !== pressed) return;
+			doc.removeEventListener("click", swallow, true);
+			e.stopPropagation();
+			e.preventDefault();
+		};
+		doc.addEventListener("click", swallow, true);
+		setTimeout(() => doc.removeEventListener("click", swallow, true));
 	}
 	detectSnapTarget(clientX, clientY) {
-		const mode = this.snap();
+		const model = this.model();
+		const mode = model.options().snap;
 		if (mode === "none") return null;
-		const HOT = 12;
-		const { width: vw, height: vh } = this.viewport();
-		const nearLeft = clientX <= HOT;
-		const nearRight = clientX >= vw - HOT;
-		const nearTop = clientY <= HOT;
-		const nearBottom = clientY >= vh - HOT;
+		const wa = model.workArea();
+		const nearLeft = clientX <= wa.left + SNAP_HOT_ZONE;
+		const nearRight = clientX >= wa.left + wa.width - SNAP_HOT_ZONE;
+		const nearTop = clientY <= wa.top + SNAP_HOT_ZONE;
+		const nearBottom = clientY >= wa.top + wa.height - SNAP_HOT_ZONE;
 		if (mode === "all") {
 			if (nearTop && nearLeft) return "top-left";
 			if (nearTop && nearRight) return "top-right";
@@ -325,74 +301,43 @@ var WrWindow = class WrWindow {
 		if (nearRight) return "right";
 		return null;
 	}
-	applySnap(target) {
-		const { width: vw, height: vh } = this.viewport();
-		const halfW = Math.floor(vw / 2);
-		const halfH = Math.floor(vh / 2);
-		switch (target) {
-			case "top":
-				this.restoreGeometry = {
-					x: this.x_(),
-					y: this.y_(),
-					width: this.width_(),
-					height: this.height_()
-				};
-				this.state.set("maximized");
-				return;
-			case "left":
-				this.x_.set(0);
-				this.y_.set(0);
-				this.width_.set(halfW);
-				this.height_.set(vh);
-				break;
-			case "right":
-				this.x_.set(halfW);
-				this.y_.set(0);
-				this.width_.set(vw - halfW);
-				this.height_.set(vh);
-				break;
-			case "top-left":
-				this.x_.set(0);
-				this.y_.set(0);
-				this.width_.set(halfW);
-				this.height_.set(halfH);
-				break;
-			case "top-right":
-				this.x_.set(halfW);
-				this.y_.set(0);
-				this.width_.set(vw - halfW);
-				this.height_.set(halfH);
-				break;
-			case "bottom-left":
-				this.x_.set(0);
-				this.y_.set(halfH);
-				this.width_.set(halfW);
-				this.height_.set(vh - halfH);
-				break;
-			case "bottom-right":
-				this.x_.set(halfW);
-				this.y_.set(halfH);
-				this.width_.set(vw - halfW);
-				this.height_.set(vh - halfH);
+	onChromeDblClick(event) {
+		this.toggleFromDblClick(event.target);
+	}
+	onBodyDblClick(event) {
+		const target = event.target;
+		if (target instanceof Element && target.closest(".wr-window__chrome")) return;
+		this.toggleFromDblClick(target);
+	}
+	toggleFromDblClick(target) {
+		if (!(target instanceof Element) || !this.isDblClickArea(target)) return;
+		const model = this.model();
+		if (model.state() === "minimized") return;
+		if (model.state() === "normal" && model.snap()) {
+			model.restore();
+			return;
 		}
-		this.resized.emit({
-			width: this.width_(),
-			height: this.height_()
-		});
+		if (model.options().showMaximize !== false) model.maximize();
 	}
 	startResize(event, edges) {
-		if (!this.resizable() || this.state() !== "normal") return;
+		const model = this.model();
+		if (!model.options().resizable || model.state() !== "normal") return;
 		event.preventDefault();
 		event.stopPropagation();
+		if (model.keyboardMode()) this.commitKeyboard();
+		const ref = this.windowRef();
+		if (ref) this.manager._activate(ref, { focus: true });
+		model.unsnapInPlace();
 		const target = event.currentTarget;
-		target.setPointerCapture(event.pointerId);
-		const startX = this.x_();
-		const startY = this.y_();
-		const startW = this.width_();
-		const startH = this.height_();
+		target.setPointerCapture?.(event.pointerId);
+		const startX = model.x();
+		const startY = model.y();
+		const startW = model.width();
+		const startH = model.height();
 		const originX = event.clientX;
 		const originY = event.clientY;
 		const move = (e) => {
+			const o = model.options();
 			const dx = e.clientX - originX;
 			const dy = e.clientY - originY;
 			let nextX = startX;
@@ -409,24 +354,26 @@ var WrWindow = class WrWindow {
 				nextH = startH - dy;
 				nextY = startY + dy;
 			}
-			const clampedW = clamp(nextW, this.minWidth(), this.maxWidth());
-			const clampedH = clamp(nextH, this.minHeight(), this.maxHeight());
+			const clampedW = Math.min(o.maxWidth, Math.max(o.minWidth, nextW));
+			const clampedH = Math.min(o.maxHeight, Math.max(o.minHeight, nextH));
 			if (edges.l) nextX += nextW - clampedW;
 			if (edges.t) nextY += nextH - clampedH;
-			this.x_.set(nextX);
-			this.y_.set(nextY);
-			this.width_.set(clampedW);
-			this.height_.set(clampedH);
-			this.clampToViewport();
+			model.setRaw({
+				x: nextX,
+				y: nextY,
+				width: clampedW,
+				height: clampedH
+			});
+			model.clamp();
 		};
 		const cleanup = (e) => {
-			target.releasePointerCapture(e.pointerId);
+			target.releasePointerCapture?.(e.pointerId);
 			target.removeEventListener("pointermove", move);
 			target.removeEventListener("pointerup", cleanup);
 			target.removeEventListener("pointercancel", cleanup);
-			this.resized.emit({
-				width: this.width_(),
-				height: this.height_()
+			model.resized.next({
+				width: model.width(),
+				height: model.height()
 			});
 		};
 		target.addEventListener("pointermove", move);
@@ -453,44 +400,73 @@ var WrWindow = class WrWindow {
 		l: true
 	});
 	resizeL = (e) => this.startResize(e, { l: true });
-	seedInitialGeometry() {
-		const sizePreset = this.size();
-		const preset = sizePreset ? SIZE_PRESETS[sizePreset] : SIZE_PRESETS.md;
-		const explicitW = this.initialWidth();
-		const explicitH = this.initialHeight();
-		const keep = this.keepInViewport();
-		const { width: vw, height: vh } = this.viewport();
-		const fit = (size, room) => keep ? Math.min(size, room) : size;
-		const w = clamp(fit(explicitW ?? preset.width, vw), this.minWidth(), this.maxWidth());
-		const h = clamp(fit(explicitH ?? preset.height, vh), this.minHeight(), this.maxHeight());
-		this.width_.set(w);
-		this.height_.set(h);
-		const xIn = this.initialX();
-		const yIn = this.initialY();
-		let x;
-		let y;
-		if (xIn != null && yIn != null) {
-			x = xIn;
-			y = yIn;
-		} else {
-			const cascade = this.manager.nextStartOffset();
-			x = xIn ?? cascade.x;
-			y = yIn ?? cascade.y;
+	onKeydown(event) {
+		if (this.model().keyboardMode()) {
+			this.onModeKey(event);
+			return;
+		}
+		if (event.defaultPrevented || !event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return;
+		if (event.key !== "F7" && event.key !== "F8") return;
+		if (this.startKeyboard(event.key === "F7" ? "move" : "resize")) event.preventDefault();
+	}
+	startKeyboard(mode) {
+		const model = this.model();
+		const ref = this.windowRef();
+		if (ref) this.manager._activate(ref, { focus: false });
+		if (!model.startKeyboard(mode)) return false;
+		this.elRef.nativeElement.focus({ preventScroll: true });
+		this.announce(mode === "move" ? this.moveModeText() : this.resizeModeText());
+		return true;
+	}
+	onModeKey(event) {
+		const model = this.model();
+		const step = event.shiftKey ? 1 : model.options().keyboardStep;
+		const delta = {
+			ArrowLeft: [-step, 0],
+			ArrowRight: [step, 0],
+			ArrowUp: [0, -step],
+			ArrowDown: [0, step]
+		}[event.key];
+		if (delta) {
+			event.preventDefault();
+			if (model.keyboardMode() === "move") model.nudge(delta[0], delta[1]);
+			else {
+				const rtl = this.dir?.value === "rtl";
+				model.grow(rtl ? -delta[0] : delta[0], delta[1], rtl);
+			}
+			return;
 		}
-		this.x_.set(keep && xIn == null ? clamp(x, 0, Math.max(0, vw - w)) : x);
-		this.y_.set(keep && yIn == null ? clamp(y, 0, Math.max(0, vh - h)) : y);
-		this.clampToViewport();
+		if (event.key === "Enter") {
+			event.preventDefault();
+			this.commitKeyboard();
+			this.focusLast();
+		} else if (event.key === "Escape") {
+			event.preventDefault();
+			const mode = model.cancelKeyboard();
+			if (mode) this.announceGeometry(mode);
+			this.focusLast();
+		} else if (event.key === "Tab") this.commitKeyboard();
 	}
-	clampToViewport() {
-		if (!this.keepInViewport()) return;
-		const { width: vw, height: vh } = this.viewport();
-		const w = this.width_();
-		this.x_.set(clamp(this.x_(), MIN_ON_VIEWPORT - w, vw - MIN_ON_VIEWPORT));
-		this.y_.set(clamp(this.y_(), 0, vh - MIN_ON_VIEWPORT));
+	commitKeyboard() {
+		const mode = this.model().commitKeyboard();
+		if (mode) this.announceGeometry(mode);
+	}
+	announceGeometry(mode) {
+		const r = this.model().rect();
+		this.announce(mode === "move" ? this.movedText({
+			x: r.left,
+			y: r.top
+		}) : this.resizedText({
+			width: r.width,
+			height: r.height
+		}));
+	}
+	announce(text) {
+		this.announcement.set(text);
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.3",
+		version: "22.2.4",
 		ngImport: i0,
 		type: WrWindow,
 		deps: [],
@@ -498,207 +474,101 @@ var WrWindow = class WrWindow {
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "17.0.0",
-		version: "22.2.3",
+		version: "22.2.4",
 		type: WrWindow,
 		isStandalone: true,
 		selector: "wr-window",
 		inputs: {
-			open: {
-				classPropertyName: "open",
-				publicName: "open",
+			model: {
+				classPropertyName: "model",
+				publicName: "model",
 				isSignal: true,
-				isRequired: false,
+				isRequired: true,
 				transformFunction: null
 			},
-			state: {
-				classPropertyName: "state",
-				publicName: "state",
+			windowRef: {
+				classPropertyName: "windowRef",
+				publicName: "windowRef",
 				isSignal: true,
 				isRequired: false,
 				transformFunction: null
 			},
-			title: {
-				classPropertyName: "title",
-				publicName: "title",
+			injector: {
+				classPropertyName: "injector",
+				publicName: "injector",
 				isSignal: true,
 				isRequired: false,
 				transformFunction: null
 			},
-			initialX: {
-				classPropertyName: "initialX",
-				publicName: "initialX",
+			titleExtra: {
+				classPropertyName: "titleExtra",
+				publicName: "titleExtra",
 				isSignal: true,
 				isRequired: false,
 				transformFunction: null
 			},
-			initialY: {
-				classPropertyName: "initialY",
-				publicName: "initialY",
-				isSignal: true,
-				isRequired: false,
-				transformFunction: null
-			},
-			size: {
-				classPropertyName: "size",
-				publicName: "size",
-				isSignal: true,
-				isRequired: false,
-				transformFunction: null
-			},
-			initialWidth: {
-				classPropertyName: "initialWidth",
-				publicName: "initialWidth",
-				isSignal: true,
-				isRequired: false,
-				transformFunction: null
-			},
-			initialHeight: {
-				classPropertyName: "initialHeight",
-				publicName: "initialHeight",
-				isSignal: true,
-				isRequired: false,
-				transformFunction: null
-			},
-			os: {
-				classPropertyName: "os",
-				publicName: "os",
-				isSignal: true,
-				isRequired: false,
-				transformFunction: null
-			},
-			chromeSize: {
-				classPropertyName: "chromeSize",
-				publicName: "chromeSize",
-				isSignal: true,
-				isRequired: false,
-				transformFunction: null
-			},
-			animations: {
-				classPropertyName: "animations",
-				publicName: "animations",
-				isSignal: true,
-				isRequired: false,
-				transformFunction: null
-			},
-			minWidth: {
-				classPropertyName: "minWidth",
-				publicName: "minWidth",
-				isSignal: true,
-				isRequired: false,
-				transformFunction: null
-			},
-			minHeight: {
-				classPropertyName: "minHeight",
-				publicName: "minHeight",
-				isSignal: true,
-				isRequired: false,
-				transformFunction: null
-			},
-			maxWidth: {
-				classPropertyName: "maxWidth",
-				publicName: "maxWidth",
-				isSignal: true,
-				isRequired: false,
-				transformFunction: null
-			},
-			maxHeight: {
-				classPropertyName: "maxHeight",
-				publicName: "maxHeight",
-				isSignal: true,
-				isRequired: false,
-				transformFunction: null
-			},
-			movable: {
-				classPropertyName: "movable",
-				publicName: "movable",
-				isSignal: true,
-				isRequired: false,
-				transformFunction: null
-			},
-			resizable: {
-				classPropertyName: "resizable",
-				publicName: "resizable",
-				isSignal: true,
-				isRequired: false,
-				transformFunction: null
-			},
-			keepInViewport: {
-				classPropertyName: "keepInViewport",
-				publicName: "keepInViewport",
-				isSignal: true,
-				isRequired: false,
-				transformFunction: null
-			},
-			snap: {
-				classPropertyName: "snap",
-				publicName: "snap",
-				isSignal: true,
-				isRequired: false,
-				transformFunction: null
-			},
-			dragHandle: {
-				classPropertyName: "dragHandle",
-				publicName: "dragHandle",
-				isSignal: true,
-				isRequired: false,
-				transformFunction: null
-			},
-			showMinimize: {
-				classPropertyName: "showMinimize",
-				publicName: "showMinimize",
-				isSignal: true,
-				isRequired: false,
-				transformFunction: null
-			},
-			showMaximize: {
-				classPropertyName: "showMaximize",
-				publicName: "showMaximize",
-				isSignal: true,
-				isRequired: false,
-				transformFunction: null
-			},
-			showClose: {
-				classPropertyName: "showClose",
-				publicName: "showClose",
+			statusBar: {
+				classPropertyName: "statusBar",
+				publicName: "statusBar",
 				isSignal: true,
 				isRequired: false,
 				transformFunction: null
 			}
 		},
-		outputs: {
-			open: "openChange",
-			state: "stateChange",
-			closed: "closed",
-			moved: "moved",
-			resized: "resized",
-			minimizedWithFocus: "minimizedWithFocus"
-		},
+		outputs: { closed: "closed" },
 		host: {
 			attributes: {
 				"role": "dialog",
 				"tabindex": "-1"
 			},
-			listeners: { "pointerdown": "focusWindow()" },
+			listeners: {
+				"pointerdown": "onPointerDown($event)",
+				"dblclick": "onBodyDblClick($event)",
+				"keydown": "onKeydown($event)",
+				"focusin": "onFocusIn($event)",
+				"focusout": "onFocusOut($event)"
+			},
 			properties: {
-				"attr.title": "null",
 				"class": "classes()",
-				"style.left.px": "x()",
-				"style.top.px": "y()",
-				"style.width.px": "width()",
-				"style.height.px": "height()",
-				"style.z-index": "z()",
-				"attr.aria-hidden": "!open()",
+				"style.left.px": "rect().left",
+				"style.top.px": "rect().top",
+				"style.width.px": "rect().width",
+				"style.height.px": "rect().height",
+				"style.z-index": "model().z()",
 				"attr.aria-labelledby": "titleId"
 			}
 		},
 		ngImport: i0,
-		template: "<!--\n  The double-click gate is `!== false`, NOT `maximizeVisible()`, and the\n  difference is a window nobody can get out of. The Linux preset hides the\n  maximize BUTTON; the gesture is how GNOME maximizes, and it worked on every\n  chrome before this input went tri-state. Gating it on button visibility would\n  have killed it there — and `maximized` is reachable on Linux with no button at\n  all (a snap to the top edge, `ref.maximize()`, a restored layout), after which\n  every exit disappears at once: no restore-down button, no minimize button,\n  `startMove` refuses while the state is not `normal`, the resize handles are not\n  rendered, and the only key the window listens for is Escape, which closes it.\n  An explicit `showMaximize: false` still turns the gesture off everywhere.\n-->\n<div class=\"wr-window__chrome\" (pointerdown)=\"startMove($event)\" (dblclick)=\"showMaximize() !== false && maximize()\">\n  <div class=\"wr-window__title\" [attr.id]=\"titleId\">{{ title() }}</div>\n  <div class=\"wr-window__title-extra\">\n    <ng-content select=\"[wrWindowTitleExtra]\" />\n  </div>\n\n  <div class=\"wr-window__chrome-actions\">\n    @if (resolvedOs() === 'macos') {\n      <!-- macOS-style traffic-light cluster: close → minimize → maximize.\n           Glyphs (×, −, +) appear on cluster hover. -->\n      @if (showClose()) {\n        <button\n          type=\"button\"\n          class=\"wr-window__chrome-action wr-window__chrome-action--close\"\n          [attr.aria-label]=\"closeLabel()\"\n          (click)=\"close()\"\n        >\n          <svg class=\"wr-window__chrome-action-glyph\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n            <path\n              d=\"M2.2 2.2 L7.8 7.8 M7.8 2.2 L2.2 7.8\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.4\"\n              stroke-linecap=\"round\"\n            />\n          </svg>\n        </button>\n      }\n      @if (minimizeVisible()) {\n        <button\n          type=\"button\"\n          class=\"wr-window__chrome-action wr-window__chrome-action--minimize\"\n          [attr.aria-label]=\"minimizeActionLabel()\"\n          (click)=\"minimize()\"\n        >\n          <svg class=\"wr-window__chrome-action-glyph\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n            <line x1=\"2\" y1=\"5\" x2=\"8\" y2=\"5\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n          </svg>\n        </button>\n      }\n      @if (maximizeVisible()) {\n        <button\n          type=\"button\"\n          class=\"wr-window__chrome-action wr-window__chrome-action--maximize\"\n          [attr.aria-label]=\"maximizeActionLabel()\"\n          (click)=\"maximize()\"\n        >\n          <svg class=\"wr-window__chrome-action-glyph\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n            @if (state() === 'maximized') {\n              <path\n                d=\"M3 1 L1 1 L1 3 M7 1 L9 1 L9 3 M1 7 L1 9 L3 9 M9 7 L9 9 L7 9\"\n                stroke=\"currentColor\"\n                stroke-width=\"1.4\"\n                stroke-linecap=\"round\"\n                fill=\"none\"\n              />\n            } @else {\n              <path d=\"M2 5 L8 5 M5 2 L5 8\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n            }\n          </svg>\n        </button>\n      }\n    } @else {\n      <!-- Windows / Linux glyph buttons. Linux hides minimize and maximize by\n           DEFAULT, not by rule: `minimizeVisible()` resolves the input first, so\n           `[showMinimize]=\"true\"` puts the button back — which is the only way a\n           user on Linux can reach `<wr-window-taskbar>` at all. -->\n      @if (minimizeVisible()) {\n        <button\n          type=\"button\"\n          class=\"wr-window__chrome-action wr-window__chrome-action--minimize\"\n          [attr.aria-label]=\"minimizeActionLabel()\"\n          (click)=\"minimize()\"\n        >\n          <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n            <line x1=\"1\" y1=\"8\" x2=\"9\" y2=\"8\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" />\n          </svg>\n        </button>\n      }\n\n      @if (maximizeVisible()) {\n        <button\n          type=\"button\"\n          class=\"wr-window__chrome-action wr-window__chrome-action--maximize\"\n          [attr.aria-label]=\"maximizeActionLabel()\"\n          (click)=\"maximize()\"\n        >\n          @if (state() === 'maximized') {\n            <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n              <rect x=\"1.5\" y=\"2.5\" width=\"6\" height=\"6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n              <rect x=\"3\" y=\"1\" width=\"6\" height=\"6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n            </svg>\n          } @else {\n            <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n              <rect x=\"1\" y=\"1\" width=\"8\" height=\"8\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n            </svg>\n          }\n        </button>\n      }\n\n      @if (showClose()) {\n        <button\n          type=\"button\"\n          class=\"wr-window__chrome-action wr-window__chrome-action--close\"\n          [attr.aria-label]=\"closeLabel()\"\n          (click)=\"close()\"\n        >\n          <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n            <path d=\"M1 1 L9 9 M9 1 L1 9\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" />\n          </svg>\n        </button>\n      }\n    }\n  </div>\n</div>\n\n<div class=\"wr-window__body\">\n  <ng-content />\n</div>\n\n<div class=\"wr-window__status-bar\">\n  <ng-content select=\"[wrWindowStatusBar]\" />\n</div>\n\n@if (resizable() && state() === 'normal') {\n  <span class=\"wr-window__handle wr-window__handle--t\" (pointerdown)=\"resizeT($event)\"></span>\n  <span class=\"wr-window__handle wr-window__handle--r\" (pointerdown)=\"resizeR($event)\"></span>\n  <span class=\"wr-window__handle wr-window__handle--b\" (pointerdown)=\"resizeB($event)\"></span>\n  <span class=\"wr-window__handle wr-window__handle--l\" (pointerdown)=\"resizeL($event)\"></span>\n  <span class=\"wr-window__handle wr-window__handle--tl\" (pointerdown)=\"resizeTL($event)\"></span>\n  <span class=\"wr-window__handle wr-window__handle--tr\" (pointerdown)=\"resizeTR($event)\"></span>\n  <span class=\"wr-window__handle wr-window__handle--bl\" (pointerdown)=\"resizeBL($event)\"></span>\n  <span class=\"wr-window__handle wr-window__handle--br\" (pointerdown)=\"resizeBR($event)\"></span>\n}\n",
+		template: "<!--\n  No pointerdown here: the host takes every press, so a `dragHandle` in the body\n  can start a move as well as the title bar, and a press anywhere activates the\n  window. The double-click is bound here and on the host; see `onChromeDblClick`.\n  The action count is for the macOS chrome, which pads its title as wide as the\n  cluster so the title centres on the whole bar.\n-->\n<div\n  class=\"wr-window__chrome\"\n  [style.--wr-window-chrome-action-count]=\"actionCount()\"\n  (dblclick)=\"onChromeDblClick($event)\"\n>\n  <div class=\"wr-window__title\" [attr.id]=\"titleId\">{{ displayTitle() }}</div>\n  <div class=\"wr-window__title-extra\">\n    @if (titleExtraTemplate(); as template) {\n      <ng-container *ngTemplateOutlet=\"template; context: slotContext(); injector: injector()\" />\n    } @else if (titleExtraComponent(); as component) {\n      <ng-container *ngComponentOutlet=\"component; injector: injector()\" />\n    }\n  </div>\n\n  <div class=\"wr-window__chrome-actions\">\n    @if (resolvedOs() === 'macos') {\n      <!--\n        macOS traffic lights: close, minimize, zoom, in that order from the frame\n        edge. The button is the hit target and the coloured dot is its\n        `::before`, so the box can be big enough to press while the dot stays\n        the platform's size. The glyphs sit on an 8px grid and appear only while\n        the cluster is hovered or holds keyboard focus, as they do on macOS.\n        Zoom draws the full-screen arrows of Big Sur and later: pointing out to\n        maximize, pointing in to restore. Every straight edge of both sits on a\n        whole pixel, so the filled triangles stay hard at 1x.\n      -->\n      @if (showClose()) {\n        <button\n          type=\"button\"\n          class=\"wr-window__chrome-action wr-window__chrome-action--close\"\n          [attr.aria-label]=\"closeLabel()\"\n          (click)=\"close()\"\n        >\n          <svg class=\"wr-window__chrome-action-glyph\" width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" aria-hidden=\"true\">\n            <path d=\"M1.5 1.5l5 5m0-5l-5 5\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" />\n          </svg>\n        </button>\n      }\n      @if (minimizeVisible()) {\n        <button\n          type=\"button\"\n          class=\"wr-window__chrome-action wr-window__chrome-action--minimize\"\n          [attr.aria-label]=\"minimizeActionLabel()\"\n          (click)=\"minimize()\"\n        >\n          <svg class=\"wr-window__chrome-action-glyph\" width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" aria-hidden=\"true\">\n            <path d=\"M1.5 3.5h5\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" />\n          </svg>\n        </button>\n      }\n      @if (maximizeVisible()) {\n        <button\n          type=\"button\"\n          class=\"wr-window__chrome-action wr-window__chrome-action--maximize\"\n          [attr.aria-label]=\"maximizeActionLabel()\"\n          (click)=\"maximize()\"\n        >\n          <svg class=\"wr-window__chrome-action-glyph\" width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" aria-hidden=\"true\">\n            @if (state() === 'maximized') {\n              <path d=\"M3 3V.5L.5 3zM5 5v2.5L7.5 5z\" fill=\"currentColor\" />\n            } @else {\n              <path d=\"M1 1h4L1 5zm6 6H3l4-4z\" fill=\"currentColor\" />\n            }\n          </svg>\n        </button>\n      }\n    } @else if (resolvedOs() === 'linux') {\n      <!--\n        GNOME (libadwaita) window controls: round buttons with Adwaita's 16px\n        symbolic glyphs, 2px strokes on whole pixels. Restore is the SMALLER\n        square, the way Adwaita draws it, not a second overlapping one. Close-only\n        is the DEFAULT here, not a rule: `minimizeVisible()` resolves the input\n        first, so `[showMinimize]=\"true\"` puts the button back, which is the only\n        way a user on Linux can reach `<wr-window-taskbar>` at all.\n      -->\n      @if (minimizeVisible()) {\n        <button\n          type=\"button\"\n          class=\"wr-window__chrome-action wr-window__chrome-action--minimize\"\n          [attr.aria-label]=\"minimizeActionLabel()\"\n          (click)=\"minimize()\"\n        >\n          <svg class=\"wr-window__chrome-action-glyph\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n            <path d=\"M4 11h8\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" />\n          </svg>\n        </button>\n      }\n      @if (maximizeVisible()) {\n        <button\n          type=\"button\"\n          class=\"wr-window__chrome-action wr-window__chrome-action--maximize\"\n          [attr.aria-label]=\"maximizeActionLabel()\"\n          (click)=\"maximize()\"\n        >\n          <svg class=\"wr-window__chrome-action-glyph\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n            @if (state() === 'maximized') {\n              <rect x=\"6\" y=\"6\" width=\"4\" height=\"4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" />\n            } @else {\n              <rect x=\"5\" y=\"5\" width=\"6\" height=\"6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" />\n            }\n          </svg>\n        </button>\n      }\n      @if (showClose()) {\n        <button\n          type=\"button\"\n          class=\"wr-window__chrome-action wr-window__chrome-action--close\"\n          [attr.aria-label]=\"closeLabel()\"\n          (click)=\"close()\"\n        >\n          <svg class=\"wr-window__chrome-action-glyph\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n            <path d=\"M5 5l6 6m0-6l-6 6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n          </svg>\n        </button>\n      }\n    } @else {\n      <!--\n        Windows 11 caption buttons: 10px glyphs in the full-height, 46px-wide\n        buttons, drawn the way Segoe Fluent Icons draws them. 1px strokes on half\n        pixels, so they land on whole device pixels at 1x and 2x, and the corners\n        of maximize and restore are rounded by 1px.\n      -->\n      @if (minimizeVisible()) {\n        <button\n          type=\"button\"\n          class=\"wr-window__chrome-action wr-window__chrome-action--minimize\"\n          [attr.aria-label]=\"minimizeActionLabel()\"\n          (click)=\"minimize()\"\n        >\n          <svg class=\"wr-window__chrome-action-glyph\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n            <path d=\"M0 4.5h10\" fill=\"none\" stroke=\"currentColor\" />\n          </svg>\n        </button>\n      }\n      @if (maximizeVisible()) {\n        <button\n          type=\"button\"\n          class=\"wr-window__chrome-action wr-window__chrome-action--maximize\"\n          [attr.aria-label]=\"maximizeActionLabel()\"\n          (click)=\"maximize()\"\n        >\n          <svg class=\"wr-window__chrome-action-glyph\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n            @if (state() === 'maximized') {\n              <g fill=\"none\" stroke=\"currentColor\">\n                <rect x=\".5\" y=\"2.5\" width=\"7\" height=\"7\" rx=\"1\" />\n                <path d=\"M2.5 2.5v-1a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1h-1\" />\n              </g>\n            } @else {\n              <rect x=\".5\" y=\".5\" width=\"9\" height=\"9\" rx=\"1\" fill=\"none\" stroke=\"currentColor\" />\n            }\n          </svg>\n        </button>\n      }\n      @if (showClose()) {\n        <button\n          type=\"button\"\n          class=\"wr-window__chrome-action wr-window__chrome-action--close\"\n          [attr.aria-label]=\"closeLabel()\"\n          (click)=\"close()\"\n        >\n          <svg class=\"wr-window__chrome-action-glyph\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n            <path d=\"M.5.5l9 9m0-9l-9 9\" fill=\"none\" stroke=\"currentColor\" />\n          </svg>\n        </button>\n      }\n    }\n  </div>\n</div>\n\n<div class=\"wr-window__body\">\n  <ng-content />\n</div>\n\n<div class=\"wr-window__status-bar\">\n  @if (statusBarTemplate(); as template) {\n    <ng-container *ngTemplateOutlet=\"template; context: slotContext(); injector: injector()\" />\n  } @else if (statusBarComponent(); as component) {\n    <ng-container *ngComponentOutlet=\"component; injector: injector()\" />\n  }\n</div>\n\n<!--\n  Keyboard move and resize say what they did here: the mode on entry, the\n  landing on Enter or Escape. Not each step — that would flood the region.\n-->\n<p class=\"wr-window__sr-only\" role=\"status\">{{ announcement() }}</p>\n\n@if (resizeHandles()) {\n  <span class=\"wr-window__handle wr-window__handle--t\" (pointerdown)=\"resizeT($event)\"></span>\n  <span class=\"wr-window__handle wr-window__handle--r\" (pointerdown)=\"resizeR($event)\"></span>\n  <span class=\"wr-window__handle wr-window__handle--b\" (pointerdown)=\"resizeB($event)\"></span>\n  <span class=\"wr-window__handle wr-window__handle--l\" (pointerdown)=\"resizeL($event)\"></span>\n  <span class=\"wr-window__handle wr-window__handle--tl\" (pointerdown)=\"resizeTL($event)\"></span>\n  <span class=\"wr-window__handle wr-window__handle--tr\" (pointerdown)=\"resizeTR($event)\"></span>\n  <span class=\"wr-window__handle wr-window__handle--bl\" (pointerdown)=\"resizeBL($event)\"></span>\n  <span class=\"wr-window__handle wr-window__handle--br\" (pointerdown)=\"resizeBR($event)\"></span>\n}\n",
+		dependencies: [{
+			kind: "directive",
+			type: NgTemplateOutlet,
+			selector: "[ngTemplateOutlet]",
+			inputs: [
+				"ngTemplateOutletContext",
+				"ngTemplateOutlet",
+				"ngTemplateOutletInjector"
+			]
+		}, {
+			kind: "directive",
+			type: NgComponentOutlet,
+			selector: "[ngComponentOutlet]",
+			inputs: [
+				"ngComponentOutlet",
+				"ngComponentOutletInputs",
+				"ngComponentOutletInjector",
+				"ngComponentOutletEnvironmentInjector",
+				"ngComponentOutletContent",
+				"ngComponentOutletNgModule"
+			],
+			exportAs: ["ngComponentOutlet"]
+		}],
 		encapsulation: i0.ViewEncapsulation.None
 	});
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.3",
+	version: "22.2.4",
 	ngImport: i0,
 	type: WrWindow,
 	decorators: [{
@@ -706,230 +576,71 @@ i0.ɵɵngDeclareClassMetadata({
 		args: [{
 			selector: "wr-window",
 			encapsulation: ViewEncapsulation.None,
+			imports: [NgTemplateOutlet, NgComponentOutlet],
 			host: {
-				"[attr.title]": "null",
 				role: "dialog",
 				tabindex: "-1",
 				"[class]": "classes()",
-				"[style.left.px]": "x()",
-				"[style.top.px]": "y()",
-				"[style.width.px]": "width()",
-				"[style.height.px]": "height()",
-				"[style.z-index]": "z()",
-				"[attr.aria-hidden]": "!open()",
-				"[attr.aria-labelledby]": "titleId",
-				"(pointerdown)": "focusWindow()"
-			},
-			template: "<!--\n  The double-click gate is `!== false`, NOT `maximizeVisible()`, and the\n  difference is a window nobody can get out of. The Linux preset hides the\n  maximize BUTTON; the gesture is how GNOME maximizes, and it worked on every\n  chrome before this input went tri-state. Gating it on button visibility would\n  have killed it there — and `maximized` is reachable on Linux with no button at\n  all (a snap to the top edge, `ref.maximize()`, a restored layout), after which\n  every exit disappears at once: no restore-down button, no minimize button,\n  `startMove` refuses while the state is not `normal`, the resize handles are not\n  rendered, and the only key the window listens for is Escape, which closes it.\n  An explicit `showMaximize: false` still turns the gesture off everywhere.\n-->\n<div class=\"wr-window__chrome\" (pointerdown)=\"startMove($event)\" (dblclick)=\"showMaximize() !== false && maximize()\">\n  <div class=\"wr-window__title\" [attr.id]=\"titleId\">{{ title() }}</div>\n  <div class=\"wr-window__title-extra\">\n    <ng-content select=\"[wrWindowTitleExtra]\" />\n  </div>\n\n  <div class=\"wr-window__chrome-actions\">\n    @if (resolvedOs() === 'macos') {\n      <!-- macOS-style traffic-light cluster: close → minimize → maximize.\n           Glyphs (×, −, +) appear on cluster hover. -->\n      @if (showClose()) {\n        <button\n          type=\"button\"\n          class=\"wr-window__chrome-action wr-window__chrome-action--close\"\n          [attr.aria-label]=\"closeLabel()\"\n          (click)=\"close()\"\n        >\n          <svg class=\"wr-window__chrome-action-glyph\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n            <path\n              d=\"M2.2 2.2 L7.8 7.8 M7.8 2.2 L2.2 7.8\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.4\"\n              stroke-linecap=\"round\"\n            />\n          </svg>\n        </button>\n      }\n      @if (minimizeVisible()) {\n        <button\n          type=\"button\"\n          class=\"wr-window__chrome-action wr-window__chrome-action--minimize\"\n          [attr.aria-label]=\"minimizeActionLabel()\"\n          (click)=\"minimize()\"\n        >\n          <svg class=\"wr-window__chrome-action-glyph\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n            <line x1=\"2\" y1=\"5\" x2=\"8\" y2=\"5\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n          </svg>\n        </button>\n      }\n      @if (maximizeVisible()) {\n        <button\n          type=\"button\"\n          class=\"wr-window__chrome-action wr-window__chrome-action--maximize\"\n          [attr.aria-label]=\"maximizeActionLabel()\"\n          (click)=\"maximize()\"\n        >\n          <svg class=\"wr-window__chrome-action-glyph\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n            @if (state() === 'maximized') {\n              <path\n                d=\"M3 1 L1 1 L1 3 M7 1 L9 1 L9 3 M1 7 L1 9 L3 9 M9 7 L9 9 L7 9\"\n                stroke=\"currentColor\"\n                stroke-width=\"1.4\"\n                stroke-linecap=\"round\"\n                fill=\"none\"\n              />\n            } @else {\n              <path d=\"M2 5 L8 5 M5 2 L5 8\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n            }\n          </svg>\n        </button>\n      }\n    } @else {\n      <!-- Windows / Linux glyph buttons. Linux hides minimize and maximize by\n           DEFAULT, not by rule: `minimizeVisible()` resolves the input first, so\n           `[showMinimize]=\"true\"` puts the button back — which is the only way a\n           user on Linux can reach `<wr-window-taskbar>` at all. -->\n      @if (minimizeVisible()) {\n        <button\n          type=\"button\"\n          class=\"wr-window__chrome-action wr-window__chrome-action--minimize\"\n          [attr.aria-label]=\"minimizeActionLabel()\"\n          (click)=\"minimize()\"\n        >\n          <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n            <line x1=\"1\" y1=\"8\" x2=\"9\" y2=\"8\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" />\n          </svg>\n        </button>\n      }\n\n      @if (maximizeVisible()) {\n        <button\n          type=\"button\"\n          class=\"wr-window__chrome-action wr-window__chrome-action--maximize\"\n          [attr.aria-label]=\"maximizeActionLabel()\"\n          (click)=\"maximize()\"\n        >\n          @if (state() === 'maximized') {\n            <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n              <rect x=\"1.5\" y=\"2.5\" width=\"6\" height=\"6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n              <rect x=\"3\" y=\"1\" width=\"6\" height=\"6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n            </svg>\n          } @else {\n            <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n              <rect x=\"1\" y=\"1\" width=\"8\" height=\"8\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n            </svg>\n          }\n        </button>\n      }\n\n      @if (showClose()) {\n        <button\n          type=\"button\"\n          class=\"wr-window__chrome-action wr-window__chrome-action--close\"\n          [attr.aria-label]=\"closeLabel()\"\n          (click)=\"close()\"\n        >\n          <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n            <path d=\"M1 1 L9 9 M9 1 L1 9\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" />\n          </svg>\n        </button>\n      }\n    }\n  </div>\n</div>\n\n<div class=\"wr-window__body\">\n  <ng-content />\n</div>\n\n<div class=\"wr-window__status-bar\">\n  <ng-content select=\"[wrWindowStatusBar]\" />\n</div>\n\n@if (resizable() && state() === 'normal') {\n  <span class=\"wr-window__handle wr-window__handle--t\" (pointerdown)=\"resizeT($event)\"></span>\n  <span class=\"wr-window__handle wr-window__handle--r\" (pointerdown)=\"resizeR($event)\"></span>\n  <span class=\"wr-window__handle wr-window__handle--b\" (pointerdown)=\"resizeB($event)\"></span>\n  <span class=\"wr-window__handle wr-window__handle--l\" (pointerdown)=\"resizeL($event)\"></span>\n  <span class=\"wr-window__handle wr-window__handle--tl\" (pointerdown)=\"resizeTL($event)\"></span>\n  <span class=\"wr-window__handle wr-window__handle--tr\" (pointerdown)=\"resizeTR($event)\"></span>\n  <span class=\"wr-window__handle wr-window__handle--bl\" (pointerdown)=\"resizeBL($event)\"></span>\n  <span class=\"wr-window__handle wr-window__handle--br\" (pointerdown)=\"resizeBR($event)\"></span>\n}\n"
-		}]
-	}],
-	ctorParameters: () => [],
-	propDecorators: {
-		open: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "open",
-				required: false
-			}]
-		}, {
-			type: i0.Output,
-			args: ["openChange"]
-		}],
-		state: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "state",
-				required: false
-			}]
-		}, {
-			type: i0.Output,
-			args: ["stateChange"]
-		}],
-		title: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "title",
-				required: false
-			}]
-		}],
-		initialX: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "initialX",
-				required: false
-			}]
-		}],
-		initialY: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "initialY",
-				required: false
-			}]
-		}],
-		size: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "size",
-				required: false
-			}]
-		}],
-		initialWidth: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "initialWidth",
-				required: false
-			}]
-		}],
-		initialHeight: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "initialHeight",
-				required: false
-			}]
-		}],
-		os: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "os",
-				required: false
-			}]
-		}],
-		chromeSize: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "chromeSize",
-				required: false
-			}]
-		}],
-		animations: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "animations",
-				required: false
-			}]
-		}],
-		minWidth: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "minWidth",
-				required: false
-			}]
-		}],
-		minHeight: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "minHeight",
-				required: false
-			}]
-		}],
-		maxWidth: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "maxWidth",
-				required: false
-			}]
-		}],
-		maxHeight: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "maxHeight",
-				required: false
-			}]
-		}],
-		movable: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "movable",
-				required: false
-			}]
-		}],
-		resizable: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "resizable",
-				required: false
-			}]
-		}],
-		keepInViewport: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "keepInViewport",
-				required: false
-			}]
-		}],
-		snap: [{
+				"[style.left.px]": "rect().left",
+				"[style.top.px]": "rect().top",
+				"[style.width.px]": "rect().width",
+				"[style.height.px]": "rect().height",
+				"[style.z-index]": "model().z()",
+				"[attr.aria-labelledby]": "titleId",
+				"(pointerdown)": "onPointerDown($event)",
+				"(dblclick)": "onBodyDblClick($event)",
+				"(keydown)": "onKeydown($event)",
+				"(focusin)": "onFocusIn($event)",
+				"(focusout)": "onFocusOut($event)"
+			},
+			template: "<!--\n  No pointerdown here: the host takes every press, so a `dragHandle` in the body\n  can start a move as well as the title bar, and a press anywhere activates the\n  window. The double-click is bound here and on the host; see `onChromeDblClick`.\n  The action count is for the macOS chrome, which pads its title as wide as the\n  cluster so the title centres on the whole bar.\n-->\n<div\n  class=\"wr-window__chrome\"\n  [style.--wr-window-chrome-action-count]=\"actionCount()\"\n  (dblclick)=\"onChromeDblClick($event)\"\n>\n  <div class=\"wr-window__title\" [attr.id]=\"titleId\">{{ displayTitle() }}</div>\n  <div class=\"wr-window__title-extra\">\n    @if (titleExtraTemplate(); as template) {\n      <ng-container *ngTemplateOutlet=\"template; context: slotContext(); injector: injector()\" />\n    } @else if (titleExtraComponent(); as component) {\n      <ng-container *ngComponentOutlet=\"component; injector: injector()\" />\n    }\n  </div>\n\n  <div class=\"wr-window__chrome-actions\">\n    @if (resolvedOs() === 'macos') {\n      <!--\n        macOS traffic lights: close, minimize, zoom, in that order from the frame\n        edge. The button is the hit target and the coloured dot is its\n        `::before`, so the box can be big enough to press while the dot stays\n        the platform's size. The glyphs sit on an 8px grid and appear only while\n        the cluster is hovered or holds keyboard focus, as they do on macOS.\n        Zoom draws the full-screen arrows of Big Sur and later: pointing out to\n        maximize, pointing in to restore. Every straight edge of both sits on a\n        whole pixel, so the filled triangles stay hard at 1x.\n      -->\n      @if (showClose()) {\n        <button\n          type=\"button\"\n          class=\"wr-window__chrome-action wr-window__chrome-action--close\"\n          [attr.aria-label]=\"closeLabel()\"\n          (click)=\"close()\"\n        >\n          <svg class=\"wr-window__chrome-action-glyph\" width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" aria-hidden=\"true\">\n            <path d=\"M1.5 1.5l5 5m0-5l-5 5\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" />\n          </svg>\n        </button>\n      }\n      @if (minimizeVisible()) {\n        <button\n          type=\"button\"\n          class=\"wr-window__chrome-action wr-window__chrome-action--minimize\"\n          [attr.aria-label]=\"minimizeActionLabel()\"\n          (click)=\"minimize()\"\n        >\n          <svg class=\"wr-window__chrome-action-glyph\" width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" aria-hidden=\"true\">\n            <path d=\"M1.5 3.5h5\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" />\n          </svg>\n        </button>\n      }\n      @if (maximizeVisible()) {\n        <button\n          type=\"button\"\n          class=\"wr-window__chrome-action wr-window__chrome-action--maximize\"\n          [attr.aria-label]=\"maximizeActionLabel()\"\n          (click)=\"maximize()\"\n        >\n          <svg class=\"wr-window__chrome-action-glyph\" width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" aria-hidden=\"true\">\n            @if (state() === 'maximized') {\n              <path d=\"M3 3V.5L.5 3zM5 5v2.5L7.5 5z\" fill=\"currentColor\" />\n            } @else {\n              <path d=\"M1 1h4L1 5zm6 6H3l4-4z\" fill=\"currentColor\" />\n            }\n          </svg>\n        </button>\n      }\n    } @else if (resolvedOs() === 'linux') {\n      <!--\n        GNOME (libadwaita) window controls: round buttons with Adwaita's 16px\n        symbolic glyphs, 2px strokes on whole pixels. Restore is the SMALLER\n        square, the way Adwaita draws it, not a second overlapping one. Close-only\n        is the DEFAULT here, not a rule: `minimizeVisible()` resolves the input\n        first, so `[showMinimize]=\"true\"` puts the button back, which is the only\n        way a user on Linux can reach `<wr-window-taskbar>` at all.\n      -->\n      @if (minimizeVisible()) {\n        <button\n          type=\"button\"\n          class=\"wr-window__chrome-action wr-window__chrome-action--minimize\"\n          [attr.aria-label]=\"minimizeActionLabel()\"\n          (click)=\"minimize()\"\n        >\n          <svg class=\"wr-window__chrome-action-glyph\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n            <path d=\"M4 11h8\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" />\n          </svg>\n        </button>\n      }\n      @if (maximizeVisible()) {\n        <button\n          type=\"button\"\n          class=\"wr-window__chrome-action wr-window__chrome-action--maximize\"\n          [attr.aria-label]=\"maximizeActionLabel()\"\n          (click)=\"maximize()\"\n        >\n          <svg class=\"wr-window__chrome-action-glyph\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n            @if (state() === 'maximized') {\n              <rect x=\"6\" y=\"6\" width=\"4\" height=\"4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" />\n            } @else {\n              <rect x=\"5\" y=\"5\" width=\"6\" height=\"6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" />\n            }\n          </svg>\n        </button>\n      }\n      @if (showClose()) {\n        <button\n          type=\"button\"\n          class=\"wr-window__chrome-action wr-window__chrome-action--close\"\n          [attr.aria-label]=\"closeLabel()\"\n          (click)=\"close()\"\n        >\n          <svg class=\"wr-window__chrome-action-glyph\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n            <path d=\"M5 5l6 6m0-6l-6 6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n          </svg>\n        </button>\n      }\n    } @else {\n      <!--\n        Windows 11 caption buttons: 10px glyphs in the full-height, 46px-wide\n        buttons, drawn the way Segoe Fluent Icons draws them. 1px strokes on half\n        pixels, so they land on whole device pixels at 1x and 2x, and the corners\n        of maximize and restore are rounded by 1px.\n      -->\n      @if (minimizeVisible()) {\n        <button\n          type=\"button\"\n          class=\"wr-window__chrome-action wr-window__chrome-action--minimize\"\n          [attr.aria-label]=\"minimizeActionLabel()\"\n          (click)=\"minimize()\"\n        >\n          <svg class=\"wr-window__chrome-action-glyph\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n            <path d=\"M0 4.5h10\" fill=\"none\" stroke=\"currentColor\" />\n          </svg>\n        </button>\n      }\n      @if (maximizeVisible()) {\n        <button\n          type=\"button\"\n          class=\"wr-window__chrome-action wr-window__chrome-action--maximize\"\n          [attr.aria-label]=\"maximizeActionLabel()\"\n          (click)=\"maximize()\"\n        >\n          <svg class=\"wr-window__chrome-action-glyph\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n            @if (state() === 'maximized') {\n              <g fill=\"none\" stroke=\"currentColor\">\n                <rect x=\".5\" y=\"2.5\" width=\"7\" height=\"7\" rx=\"1\" />\n                <path d=\"M2.5 2.5v-1a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1h-1\" />\n              </g>\n            } @else {\n              <rect x=\".5\" y=\".5\" width=\"9\" height=\"9\" rx=\"1\" fill=\"none\" stroke=\"currentColor\" />\n            }\n          </svg>\n        </button>\n      }\n      @if (showClose()) {\n        <button\n          type=\"button\"\n          class=\"wr-window__chrome-action wr-window__chrome-action--close\"\n          [attr.aria-label]=\"closeLabel()\"\n          (click)=\"close()\"\n        >\n          <svg class=\"wr-window__chrome-action-glyph\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n            <path d=\"M.5.5l9 9m0-9l-9 9\" fill=\"none\" stroke=\"currentColor\" />\n          </svg>\n        </button>\n      }\n    }\n  </div>\n</div>\n\n<div class=\"wr-window__body\">\n  <ng-content />\n</div>\n\n<div class=\"wr-window__status-bar\">\n  @if (statusBarTemplate(); as template) {\n    <ng-container *ngTemplateOutlet=\"template; context: slotContext(); injector: injector()\" />\n  } @else if (statusBarComponent(); as component) {\n    <ng-container *ngComponentOutlet=\"component; injector: injector()\" />\n  }\n</div>\n\n<!--\n  Keyboard move and resize say what they did here: the mode on entry, the\n  landing on Enter or Escape. Not each step — that would flood the region.\n-->\n<p class=\"wr-window__sr-only\" role=\"status\">{{ announcement() }}</p>\n\n@if (resizeHandles()) {\n  <span class=\"wr-window__handle wr-window__handle--t\" (pointerdown)=\"resizeT($event)\"></span>\n  <span class=\"wr-window__handle wr-window__handle--r\" (pointerdown)=\"resizeR($event)\"></span>\n  <span class=\"wr-window__handle wr-window__handle--b\" (pointerdown)=\"resizeB($event)\"></span>\n  <span class=\"wr-window__handle wr-window__handle--l\" (pointerdown)=\"resizeL($event)\"></span>\n  <span class=\"wr-window__handle wr-window__handle--tl\" (pointerdown)=\"resizeTL($event)\"></span>\n  <span class=\"wr-window__handle wr-window__handle--tr\" (pointerdown)=\"resizeTR($event)\"></span>\n  <span class=\"wr-window__handle wr-window__handle--bl\" (pointerdown)=\"resizeBL($event)\"></span>\n  <span class=\"wr-window__handle wr-window__handle--br\" (pointerdown)=\"resizeBR($event)\"></span>\n}\n"
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		model: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "snap",
-				required: false
+				alias: "model",
+				required: true
 			}]
 		}],
-		dragHandle: [{
+		windowRef: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "dragHandle",
+				alias: "windowRef",
 				required: false
 			}]
 		}],
-		showMinimize: [{
+		injector: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "showMinimize",
+				alias: "injector",
 				required: false
 			}]
 		}],
-		showMaximize: [{
+		titleExtra: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "showMaximize",
+				alias: "titleExtra",
 				required: false
 			}]
 		}],
-		showClose: [{
+		statusBar: [{
 			type: i0.Input,
 			args: [{
 				isSignal: true,
-				alias: "showClose",
+				alias: "statusBar",
 				required: false
 			}]
 		}],
 		closed: [{
 			type: i0.Output,
 			args: ["closed"]
-		}],
-		moved: [{
-			type: i0.Output,
-			args: ["moved"]
-		}],
-		resized: [{
-			type: i0.Output,
-			args: ["resized"]
-		}],
-		minimizedWithFocus: [{
-			type: i0.Output,
-			args: ["minimizedWithFocus"]
 		}]
 	}
 });
@@ -952,6 +663,11 @@ var WrWindowContainer = class WrWindowContainer {
 	wrWindow = viewChild.required(WrWindow, ...ngDevMode ? [{ debugName: "wrWindow" }] : /* istanbul ignore next */ []);
 	constructor() {
 		afterNextRender(() => this.attach());
+		effect(() => {
+			const model = this.ref._model;
+			model.workArea();
+			untracked(() => model.clamp());
+		});
 		this.destroyRef.onDestroy(() => {
 			if (this.persistTimer !== null) clearTimeout(this.persistTimer);
 		});
@@ -960,86 +676,64 @@ var WrWindowContainer = class WrWindowContainer {
 		const componentRef = this.contentVcr().createComponent(this.componentType, { injector: this.childInjector });
 		this.ref.componentRef = componentRef;
 		const w = this.wrWindow();
-		this.ref._doMinimize = () => w.minimize();
-		this.ref._doMaximize = () => w.maximize();
-		this.ref._doRestore = () => w.restore();
-		this.ref._doFocus = () => w.focus();
-		this.ref._doMoveTo = (x, y) => w.moveTo(x, y);
-		this.ref._doResizeTo = (width, height) => w.resizeTo(width, height);
-		this.ref._doCenter = () => w.center();
-		this.ref._doSetTitle = (title) => this.ref._title.set(title);
-		this.ref._doFocusInitial = () => afterNextRender(() => w.focusInitial(), { injector: this.hostInjector });
-		this.destroyRef.onDestroy(() => this.ref._doFocusInitial = null);
-		runInInjectionContext(this.hostInjector, () => {
-			effect(() => this.ref._state.set(w.state()));
-			effect(() => this.ref._x.set(w.x()));
-			effect(() => this.ref._y.set(w.y()));
-			effect(() => this.ref._width.set(w.width()));
-			effect(() => this.ref._height.set(w.height()));
-			effect(() => this.ref._rawX.set(w.x_()));
-			effect(() => this.ref._rawY.set(w.y_()));
-			effect(() => this.ref._rawWidth.set(w.width_()));
-			effect(() => this.ref._rawHeight.set(w.height_()));
-			effect(() => this.ref._z.set(w.z()));
-			effect(() => {
-				const host = this.ref._overlayRef?.hostElement;
-				if (host) host.style.zIndex = String(w.z());
-			});
+		const model = this.ref._model;
+		this.ref._focusWindow = (mode) => afterNextRender(() => {
+			if (mode === "initial") {
+				w.focusInitial();
+				return;
+			}
+			if (this.manager.active() === this.ref) w.focusLast();
+		}, { injector: this.hostInjector });
+		this.ref._startKeyboard = (mode) => {
+			if (model.state() !== "minimized") {
+				w.startKeyboard(mode);
+				return;
+			}
+			model.unminimize();
+			afterNextRender(() => w.startKeyboard(mode), { injector: this.hostInjector });
+		};
+		model.onMinimizedWithFocus = () => this.onMinimizedWithFocus();
+		this.destroyRef.onDestroy(() => {
+			this.ref._focusWindow = null;
+			this.ref._startKeyboard = null;
+			model.onMinimizedWithFocus = null;
 		});
-		this.ref._title.set(this.config.title ?? "");
-		if (this.config.storage) {
-			this.hydrateFromStorage(w);
-			this.installAutosave(w);
-		}
-		const pending = this.ref.pendingStateOnMount;
+		if (this.config.storage) this.installAutosave();
+		if (this.autoFocus && model.state() !== "minimized") this.ref._focusWindow("initial");
+		const pending = this.ref._pendingKeyboard;
 		if (pending) {
-			this.ref.pendingStateOnMount = null;
-			if (pending === "minimized") this.ref.minimize();
-			else if (pending === "maximized") this.ref.maximize();
+			this.ref._pendingKeyboard = null;
+			this.ref._startKeyboard(pending);
 		}
-		if (this.autoFocus && w.state() !== "minimized") this.ref._doFocusInitial();
 	}
 	onMinimizedWithFocus() {
 		afterNextRender(() => this.manager._focusAfterMinimize(this.ref), { injector: this.hostInjector });
 	}
-	hydrateFromStorage(w) {
-		const cfg = this.config.storage;
-		if (!cfg) return;
-		const saved = this.storage.get(storageKey(cfg));
-		if (!saved) return;
-		const persist = cfg.persist ?? "all";
-		if (persist !== "size") {
-			if (typeof saved.x === "number") w.x_.set(saved.x);
-			if (typeof saved.y === "number") w.y_.set(saved.y);
-		}
-		if (persist !== "position") {
-			if (typeof saved.width === "number") w.width_.set(saved.width);
-			if (typeof saved.height === "number") w.height_.set(saved.height);
-		}
-	}
-	installAutosave(w) {
+	installAutosave() {
 		const cfg = this.config.storage;
 		if (!cfg) return;
 		const persist = cfg.persist ?? "all";
 		const key = storageKey(cfg);
+		const model = this.ref._model;
 		runInInjectionContext(this.hostInjector, () => {
 			effect(() => {
-				const x = w.x_();
-				const y = w.y_();
-				const width = w.width_();
-				const height = w.height_();
+				const x = model.x();
+				const y = model.y();
+				const width = model.width();
+				const height = model.height();
 				if (this.persistTimer !== null) clearTimeout(this.persistTimer);
 				this.persistTimer = setTimeout(() => {
 					this.persistTimer = null;
-					const payload = {};
-					if (persist !== "size") {
-						payload.x = x;
-						payload.y = y;
-					}
-					if (persist !== "position") {
-						payload.width = width;
-						payload.height = height;
-					}
+					const payload = {
+						...persist !== "size" ? {
+							x,
+							y
+						} : {},
+						...persist !== "position" ? {
+							width,
+							height
+						} : {}
+					};
 					this.storage.set(key, payload);
 				}, PERSIST_DEBOUNCE_MS);
 			});
@@ -1047,7 +741,7 @@ var WrWindowContainer = class WrWindowContainer {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.3",
+		version: "22.2.4",
 		ngImport: i0,
 		type: WrWindowContainer,
 		deps: [],
@@ -1055,7 +749,7 @@ var WrWindowContainer = class WrWindowContainer {
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "17.0.0",
-		version: "22.2.3",
+		version: "22.2.4",
 		type: WrWindowContainer,
 		isStandalone: true,
 		selector: "wr-window-container",
@@ -1074,44 +768,19 @@ var WrWindowContainer = class WrWindowContainer {
 			isSignal: true
 		}],
 		ngImport: i0,
-		template: "<wr-window\n  [open]=\"true\"\n  [title]=\"ref.title()\"\n  [os]=\"config.os ?? 'auto'\"\n  [size]=\"config.size ?? 'md'\"\n  [chromeSize]=\"config.chromeSize ?? 'md'\"\n  [animations]=\"config.animations ?? true\"\n  [initialX]=\"config.x ?? null\"\n  [initialY]=\"config.y ?? null\"\n  [initialWidth]=\"config.width ?? null\"\n  [initialHeight]=\"config.height ?? null\"\n  [minWidth]=\"config.minWidth ?? 220\"\n  [minHeight]=\"config.minHeight ?? 140\"\n  [maxWidth]=\"config.maxWidth ?? 1000000\"\n  [maxHeight]=\"config.maxHeight ?? 1000000\"\n  [movable]=\"config.movable ?? true\"\n  [resizable]=\"config.resizable ?? true\"\n  [keepInViewport]=\"config.keepInViewport ?? true\"\n  [snap]=\"config.snap ?? 'none'\"\n  [dragHandle]=\"config.dragHandle ?? null\"\n  [showMinimize]=\"config.showMinimize ?? null\"\n  [showMaximize]=\"config.showMaximize ?? null\"\n  [showClose]=\"config.showClose ?? true\"\n  (closed)=\"ref.close()\"\n  (minimizedWithFocus)=\"onMinimizedWithFocus()\"\n  #window\n>\n  <ng-container #content />\n</wr-window>\n\n@if (window.snapTarget(); as target) {\n  <div class=\"wr-window__snap-hint\" [attr.data-target]=\"target\" aria-hidden=\"true\"></div>\n}\n",
+		template: "<wr-window\n  [model]=\"ref._model\"\n  [windowRef]=\"ref\"\n  [injector]=\"childInjector\"\n  [titleExtra]=\"config.titleExtra ?? null\"\n  [statusBar]=\"config.statusBar ?? null\"\n  (closed)=\"ref.close()\"\n  #window\n>\n  <ng-container #content />\n</wr-window>\n\n<!--\n  The snap hint lives here, not inside `<wr-window>`: `.wr-window` clips, and a\n  fixed child is clipped with it while the open animation's transform is on.\n  It takes the exact box the drop will give the window, from the same model\n  arithmetic, so the hint and the landing cannot disagree — they did when the\n  hint was a CSS 50% of the layout viewport and the snap was half of\n  `innerWidth`, 7.5px apart with a classic scrollbar showing.\n-->\n@if (ref._model.previewRect(); as box) {\n  <div\n    class=\"wr-window__snap-hint\"\n    [attr.data-target]=\"ref._model.dragTarget()\"\n    [style.left.px]=\"box.left\"\n    [style.top.px]=\"box.top\"\n    [style.width.px]=\"box.width\"\n    [style.height.px]=\"box.height\"\n    [style.z-index]=\"ref._model.z() + 1\"\n    aria-hidden=\"true\"\n  ></div>\n}\n",
 		dependencies: [{
 			kind: "component",
 			type: WrWindow,
 			selector: "wr-window",
 			inputs: [
-				"open",
-				"state",
-				"title",
-				"initialX",
-				"initialY",
-				"size",
-				"initialWidth",
-				"initialHeight",
-				"os",
-				"chromeSize",
-				"animations",
-				"minWidth",
-				"minHeight",
-				"maxWidth",
-				"maxHeight",
-				"movable",
-				"resizable",
-				"keepInViewport",
-				"snap",
-				"dragHandle",
-				"showMinimize",
-				"showMaximize",
-				"showClose"
+				"model",
+				"windowRef",
+				"injector",
+				"titleExtra",
+				"statusBar"
 			],
-			outputs: [
-				"openChange",
-				"stateChange",
-				"closed",
-				"moved",
-				"resized",
-				"minimizedWithFocus"
-			]
+			outputs: ["closed"]
 		}],
 		changeDetection: i0.ChangeDetectionStrategy.OnPush,
 		encapsulation: i0.ViewEncapsulation.None
@@ -1119,7 +788,7 @@ var WrWindowContainer = class WrWindowContainer {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.3",
+	version: "22.2.4",
 	ngImport: i0,
 	type: WrWindowContainer,
 	decorators: [{
@@ -1129,7 +798,7 @@ i0.ɵɵngDeclareClassMetadata({
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			encapsulation: ViewEncapsulation.None,
 			imports: [WrWindow],
-			template: "<wr-window\n  [open]=\"true\"\n  [title]=\"ref.title()\"\n  [os]=\"config.os ?? 'auto'\"\n  [size]=\"config.size ?? 'md'\"\n  [chromeSize]=\"config.chromeSize ?? 'md'\"\n  [animations]=\"config.animations ?? true\"\n  [initialX]=\"config.x ?? null\"\n  [initialY]=\"config.y ?? null\"\n  [initialWidth]=\"config.width ?? null\"\n  [initialHeight]=\"config.height ?? null\"\n  [minWidth]=\"config.minWidth ?? 220\"\n  [minHeight]=\"config.minHeight ?? 140\"\n  [maxWidth]=\"config.maxWidth ?? 1000000\"\n  [maxHeight]=\"config.maxHeight ?? 1000000\"\n  [movable]=\"config.movable ?? true\"\n  [resizable]=\"config.resizable ?? true\"\n  [keepInViewport]=\"config.keepInViewport ?? true\"\n  [snap]=\"config.snap ?? 'none'\"\n  [dragHandle]=\"config.dragHandle ?? null\"\n  [showMinimize]=\"config.showMinimize ?? null\"\n  [showMaximize]=\"config.showMaximize ?? null\"\n  [showClose]=\"config.showClose ?? true\"\n  (closed)=\"ref.close()\"\n  (minimizedWithFocus)=\"onMinimizedWithFocus()\"\n  #window\n>\n  <ng-container #content />\n</wr-window>\n\n@if (window.snapTarget(); as target) {\n  <div class=\"wr-window__snap-hint\" [attr.data-target]=\"target\" aria-hidden=\"true\"></div>\n}\n"
+			template: "<wr-window\n  [model]=\"ref._model\"\n  [windowRef]=\"ref\"\n  [injector]=\"childInjector\"\n  [titleExtra]=\"config.titleExtra ?? null\"\n  [statusBar]=\"config.statusBar ?? null\"\n  (closed)=\"ref.close()\"\n  #window\n>\n  <ng-container #content />\n</wr-window>\n\n<!--\n  The snap hint lives here, not inside `<wr-window>`: `.wr-window` clips, and a\n  fixed child is clipped with it while the open animation's transform is on.\n  It takes the exact box the drop will give the window, from the same model\n  arithmetic, so the hint and the landing cannot disagree — they did when the\n  hint was a CSS 50% of the layout viewport and the snap was half of\n  `innerWidth`, 7.5px apart with a classic scrollbar showing.\n-->\n@if (ref._model.previewRect(); as box) {\n  <div\n    class=\"wr-window__snap-hint\"\n    [attr.data-target]=\"ref._model.dragTarget()\"\n    [style.left.px]=\"box.left\"\n    [style.top.px]=\"box.top\"\n    [style.width.px]=\"box.width\"\n    [style.height.px]=\"box.height\"\n    [style.z-index]=\"ref._model.z() + 1\"\n    aria-hidden=\"true\"\n  ></div>\n}\n"
 		}]
 	}],
 	ctorParameters: () => [],
@@ -1153,47 +822,444 @@ i0.ɵɵngDeclareClassMetadata({
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
 */
+const MINIMIZED_HEIGHT = 40;
+function num(value, fallback) {
+	return typeof value === "number" && !Number.isNaN(value) ? value : fallback;
+}
+const SIZE_PRESETS = {
+	sm: {
+		width: 320,
+		height: 200
+	},
+	md: {
+		width: 480,
+		height: 320
+	},
+	lg: {
+		width: 720,
+		height: 480
+	}
+};
+function resolveOptions(config) {
+	return {
+		os: config.os ?? "auto",
+		chromeSize: config.chromeSize ?? "md",
+		animations: config.animations ?? true,
+		minWidth: num(config.minWidth, 220),
+		minHeight: num(config.minHeight, 140),
+		maxWidth: num(config.maxWidth, Number.POSITIVE_INFINITY),
+		maxHeight: num(config.maxHeight, Number.POSITIVE_INFINITY),
+		movable: config.movable ?? true,
+		resizable: config.resizable ?? true,
+		keepInViewport: config.keepInViewport ?? true,
+		snap: config.snap ?? "none",
+		restoreOnDrag: config.restoreOnDrag ?? true,
+		dragHandle: config.dragHandle ?? null,
+		showMinimize: config.showMinimize ?? null,
+		showMaximize: config.showMaximize ?? null,
+		showClose: config.showClose ?? true,
+		closeOnEscape: config.closeOnEscape ?? true,
+		keyboard: config.keyboard ?? true,
+		keyboardStep: Math.max(1, num(config.keyboardStep, 10))
+	};
+}
+function readViewport() {
+	if (typeof window === "undefined" || typeof document === "undefined") return {
+		width: 1024,
+		height: 768
+	};
+	const root = document.documentElement;
+	return {
+		width: root.clientWidth || window.innerWidth,
+		height: root.clientHeight || window.innerHeight
+	};
+}
+function cascadeOffset(index) {
+	const step = 50 + index % 10 * 30;
+	return {
+		x: step + Math.floor(index / 10) % 5 * 15,
+		y: step
+	};
+}
+function seedGeometry(seed) {
+	const { options: o, workArea: wa } = seed;
+	const preset = SIZE_PRESETS[seed.size ?? "md"];
+	const keep = o.keepInViewport;
+	const fit = (size, room) => keep ? Math.min(size, room) : size;
+	const width = Math.round(clamp(fit(seed.width ?? preset.width, wa.width), o.minWidth, o.maxWidth));
+	const height = Math.round(clamp(fit(seed.height ?? preset.height, wa.height), o.minHeight, o.maxHeight));
+	let x = seed.x;
+	let y = seed.y;
+	let cascaded = false;
+	if (x == null || y == null) {
+		const offset = seed.cascade();
+		cascaded = true;
+		x ??= seed.rtl ? wa.left + wa.width - width - offset.x : wa.left + offset.x;
+		y ??= wa.top + offset.y;
+	}
+	const into = cascaded || !!seed.restored;
+	if (keep && (into || seed.x == null)) x = clamp(x, wa.left, Math.max(wa.left, wa.left + wa.width - width));
+	if (keep && (into || seed.y == null)) y = clamp(y, wa.top, Math.max(wa.top, wa.top + wa.height - height));
+	return {
+		x: Math.round(x),
+		y: Math.round(y),
+		width,
+		height
+	};
+}
+var WrWindowModel = class {
+	options;
+	title;
+	state;
+	snap;
+	x;
+	y;
+	width;
+	height;
+	z;
+	isActive = signal(false, ...ngDevMode ? [{ debugName: "isActive" }] : /* istanbul ignore next */ []);
+	keyboardMode = signal(null, ...ngDevMode ? [{ debugName: "keyboardMode" }] : /* istanbul ignore next */ []);
+	dragTarget = signal(null, ...ngDevMode ? [{ debugName: "dragTarget" }] : /* istanbul ignore next */ []);
+	workArea;
+	moved = new Subject();
+	resized = new Subject();
+	stateChanges = new Subject();
+	element = null;
+	onMinimizedWithFocus = null;
+	restoreTo = "normal";
+	keyboardStart = null;
+	keyboardOrigin = null;
+	rect = computed(() => {
+		const state = this.state();
+		if (state === "maximized") return this.maximizedRect();
+		const raw = {
+			left: this.x(),
+			top: this.y(),
+			width: this.width(),
+			height: this.height()
+		};
+		if (state === "minimized") return {
+			...raw,
+			height: MINIMIZED_HEIGHT
+		};
+		const snap = this.snap();
+		return snap ? this.snapRect(snap) : raw;
+	}, ...ngDevMode ? [{ debugName: "rect" }] : /* istanbul ignore next */ []);
+	previewRect = computed(() => {
+		const target = this.dragTarget();
+		return target ? this.targetRect(target) : null;
+	}, ...ngDevMode ? [{ debugName: "previewRect" }] : /* istanbul ignore next */ []);
+	constructor(init) {
+		this.options = signal(init.options, ...ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []);
+		this.title = signal(init.title ?? "", ...ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []);
+		this.state = signal(init.state ?? "normal", ...ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []);
+		this.snap = signal(init.snap && init.snap !== "top" ? init.snap : null, ...ngDevMode ? [{ debugName: "snap" }] : /* istanbul ignore next */ []);
+		const g = init.geometry ?? {
+			x: 0,
+			y: 0,
+			width: SIZE_PRESETS.md.width,
+			height: SIZE_PRESETS.md.height
+		};
+		this.x = signal(g.x, ...ngDevMode ? [{ debugName: "x" }] : /* istanbul ignore next */ []);
+		this.y = signal(g.y, ...ngDevMode ? [{ debugName: "y" }] : /* istanbul ignore next */ []);
+		this.width = signal(g.width, ...ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []);
+		this.height = signal(g.height, ...ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []);
+		this.z = signal(init.z ?? 0, ...ngDevMode ? [{ debugName: "z" }] : /* istanbul ignore next */ []);
+		this.workArea = init.workArea;
+		this.clamp();
+	}
+	setState(next) {
+		const current = this.state();
+		if (current === next) return;
+		if (next === "minimized") this.restoreTo = current === "maximized" ? "maximized" : "normal";
+		this.state.set(next);
+		this.stateChanges.next(next);
+	}
+	minimize() {
+		if (this.state() === "minimized") {
+			this.unminimize();
+			return;
+		}
+		const hadFocus = this.hasFocus();
+		this.setState("minimized");
+		if (hadFocus) this.onMinimizedWithFocus?.();
+	}
+	unminimize() {
+		if (this.state() === "minimized") this.setState(this.restoreTo);
+	}
+	maximize() {
+		this.setState(this.state() === "maximized" ? "normal" : "maximized");
+	}
+	restore() {
+		this.snap.set(null);
+		this.setState("normal");
+	}
+	snapTo(target) {
+		if (target === "top") {
+			this.setState("maximized");
+			return;
+		}
+		this.snap.set(target);
+		this.setState("normal");
+	}
+	setRaw(g) {
+		if (g.x !== void 0) this.x.set(Math.round(g.x));
+		if (g.y !== void 0) this.y.set(Math.round(g.y));
+		if (g.width !== void 0) this.width.set(Math.round(g.width));
+		if (g.height !== void 0) this.height.set(Math.round(g.height));
+	}
+	unsnapInPlace() {
+		if (!this.snap()) return;
+		if (this.state() === "normal") {
+			const r = this.rect();
+			this.setRaw({
+				x: r.left,
+				y: r.top,
+				width: r.width,
+				height: r.height
+			});
+		}
+		this.snap.set(null);
+	}
+	moveTo(x, y) {
+		this.unsnapInPlace();
+		this.setRaw({
+			x,
+			y
+		});
+		this.clamp();
+	}
+	resizeTo(width, height) {
+		this.unsnapInPlace();
+		const o = this.options();
+		this.setRaw({
+			width: clamp(width, o.minWidth, o.maxWidth),
+			height: clamp(height, o.minHeight, o.maxHeight)
+		});
+		this.clamp();
+	}
+	center() {
+		this.unsnapInPlace();
+		const wa = this.workArea();
+		this.setRaw({
+			x: wa.left + Math.max(0, (wa.width - this.width()) / 2),
+			y: wa.top + Math.max(0, (wa.height - this.height()) / 2)
+		});
+	}
+	clamp() {
+		if (!this.options().keepInViewport) return;
+		const wa = this.workArea();
+		const w = this.width();
+		this.x.set(Math.round(clamp(this.x(), wa.left + 24 - w, wa.left + wa.width - 24)));
+		this.y.set(Math.round(clamp(this.y(), wa.top, wa.top + wa.height - 24)));
+	}
+	update(patch) {
+		const { title, ...rest } = patch;
+		if (title !== void 0) this.title.set(title);
+		const defined = {};
+		for (const [key, value] of Object.entries(rest)) if (value !== void 0) defined[key] = value;
+		if (Object.keys(defined).length === 0) return;
+		this.options.update((o) => ({
+			...o,
+			...defined
+		}));
+		if ([
+			"minWidth",
+			"minHeight",
+			"maxWidth",
+			"maxHeight"
+		].some((key) => key in defined)) {
+			const o = this.options();
+			this.setRaw({
+				width: clamp(this.width(), o.minWidth, o.maxWidth),
+				height: clamp(this.height(), o.minHeight, o.maxHeight)
+			});
+			this.clamp();
+		}
+	}
+	maximizedRect() {
+		const wa = this.workArea();
+		const o = this.options();
+		const width = Math.min(wa.width, o.maxWidth);
+		const height = Math.min(wa.height, o.maxHeight);
+		return {
+			left: wa.left + Math.round((wa.width - width) / 2),
+			top: wa.top + Math.round((wa.height - height) / 2),
+			width,
+			height
+		};
+	}
+	snapRect(target) {
+		const wa = this.workArea();
+		const o = this.options();
+		const halfW = Math.floor(wa.width / 2);
+		const halfH = Math.floor(wa.height / 2);
+		const right = target === "right" || target === "top-right" || target === "bottom-right";
+		const bottom = target === "bottom-left" || target === "bottom-right";
+		const quarter = target !== "left" && target !== "right";
+		const regionW = right ? wa.width - halfW : halfW;
+		const regionH = quarter ? bottom ? wa.height - halfH : halfH : wa.height;
+		const regionL = wa.left + (right ? halfW : 0);
+		const regionT = wa.top + (bottom ? halfH : 0);
+		const width = clamp(regionW, o.minWidth, o.maxWidth);
+		const height = clamp(regionH, o.minHeight, o.maxHeight);
+		const left = right ? regionL + regionW - width : regionL;
+		const top = bottom ? regionT + regionH - height : regionT;
+		return {
+			left: clamp(left, wa.left, Math.max(wa.left, wa.left + wa.width - width)),
+			top: clamp(top, wa.top, Math.max(wa.top, wa.top + wa.height - height)),
+			width,
+			height
+		};
+	}
+	targetRect(target) {
+		return target === "top" ? this.maximizedRect() : this.snapRect(target);
+	}
+	startKeyboard(mode) {
+		const o = this.options();
+		if (!o.keyboard || this.state() === "minimized") return false;
+		if (mode === "move" ? !o.movable : !o.resizable) return false;
+		this.keyboardOrigin = {
+			geometry: {
+				x: this.x(),
+				y: this.y(),
+				width: this.width(),
+				height: this.height()
+			},
+			state: this.state(),
+			snap: this.snap()
+		};
+		if (this.state() === "maximized") this.setState("normal");
+		this.unsnapInPlace();
+		this.keyboardStart = {
+			x: this.x(),
+			y: this.y(),
+			width: this.width(),
+			height: this.height()
+		};
+		this.keyboardMode.set(mode);
+		return true;
+	}
+	nudge(dx, dy) {
+		this.setRaw({
+			x: this.x() + dx,
+			y: this.y() + dy
+		});
+		this.clamp();
+	}
+	grow(dw, dh, rtl) {
+		const o = this.options();
+		const width = clamp(this.width() + dw, o.minWidth, o.maxWidth);
+		const height = clamp(this.height() + dh, o.minHeight, o.maxHeight);
+		const x = rtl ? this.x() - (width - this.width()) : this.x();
+		this.setRaw({
+			x,
+			width,
+			height
+		});
+		this.clamp();
+	}
+	commitKeyboard() {
+		const mode = this.keyboardMode();
+		if (!mode) return null;
+		this.keyboardMode.set(null);
+		const start = this.keyboardStart;
+		this.keyboardStart = null;
+		this.keyboardOrigin = null;
+		if (mode === "move" && (start?.x !== this.x() || start?.y !== this.y())) this.moved.next({
+			x: this.x(),
+			y: this.y()
+		});
+		if (mode === "resize" && (start?.width !== this.width() || start?.height !== this.height())) this.resized.next({
+			width: this.width(),
+			height: this.height()
+		});
+		return mode;
+	}
+	cancelKeyboard() {
+		const mode = this.keyboardMode();
+		if (!mode) return null;
+		const origin = this.keyboardOrigin;
+		this.keyboardStart = null;
+		this.keyboardOrigin = null;
+		this.keyboardMode.set(null);
+		if (origin) {
+			this.setRaw(origin.geometry);
+			this.snap.set(origin.snap);
+			this.setState(origin.state);
+		}
+		return mode;
+	}
+	hasFocus() {
+		const el = this.element;
+		return !!el && el.contains(el.ownerDocument.activeElement);
+	}
+	complete() {
+		this.moved.complete();
+		this.resized.complete();
+		this.stateChanges.complete();
+	}
+};
+/**
+* @license
+*
+* Use of this source code is governed by an MIT-style license that can be
+* found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+*/
 var WrWindowRef = class {
 	_overlayRef;
 	id;
 	_closed = new ReplaySubject(1);
-	_stateChanged = new Subject();
+	_model;
+	_stateChanged;
 	componentRef = null;
 	taskbarVisible = true;
-	pendingStateOnMount = null;
-	_state = signal("normal", ...ngDevMode ? [{ debugName: "_state" }] : /* istanbul ignore next */ []);
-	_x = signal(0, ...ngDevMode ? [{ debugName: "_x" }] : /* istanbul ignore next */ []);
-	_y = signal(0, ...ngDevMode ? [{ debugName: "_y" }] : /* istanbul ignore next */ []);
-	_width = signal(0, ...ngDevMode ? [{ debugName: "_width" }] : /* istanbul ignore next */ []);
-	_height = signal(0, ...ngDevMode ? [{ debugName: "_height" }] : /* istanbul ignore next */ []);
-	_z = signal(0, ...ngDevMode ? [{ debugName: "_z" }] : /* istanbul ignore next */ []);
-	_rawX = signal(0, ...ngDevMode ? [{ debugName: "_rawX" }] : /* istanbul ignore next */ []);
-	_rawY = signal(0, ...ngDevMode ? [{ debugName: "_rawY" }] : /* istanbul ignore next */ []);
-	_rawWidth = signal(0, ...ngDevMode ? [{ debugName: "_rawWidth" }] : /* istanbul ignore next */ []);
-	_rawHeight = signal(0, ...ngDevMode ? [{ debugName: "_rawHeight" }] : /* istanbul ignore next */ []);
-	_title = signal("", ...ngDevMode ? [{ debugName: "_title" }] : /* istanbul ignore next */ []);
-	state = this._state.asReadonly();
-	x = this._x.asReadonly();
-	y = this._y.asReadonly();
-	width = this._width.asReadonly();
-	height = this._height.asReadonly();
-	z = this._z.asReadonly();
-	title = this._title.asReadonly();
-	_beforeCloseHook = null;
+	_host = null;
 	_doClose = null;
-	_doMinimize = null;
-	_doMaximize = null;
-	_doRestore = null;
-	_doFocus = null;
-	_doMoveTo = null;
-	_doResizeTo = null;
-	_doCenter = null;
-	_doSetTitle = null;
-	_doFocusInitial = null;
+	_focusWindow = null;
+	_startKeyboard = null;
+	_pendingKeyboard = null;
 	_returnFocus = null;
-	constructor(id, _overlayRef) {
+	state;
+	x;
+	y;
+	width;
+	height;
+	z;
+	title;
+	snap;
+	isActive;
+	closed;
+	moved;
+	resized;
+	stateChanges;
+	_beforeCloseHook = null;
+	constructor(id, _overlayRef, model) {
 		this._overlayRef = _overlayRef;
 		this.id = id;
+		const m = model ?? new WrWindowModel({
+			options: resolveOptions({}),
+			workArea: signal({
+				left: 0,
+				top: 0,
+				...readViewport()
+			})
+		});
+		this._model = m;
+		this._stateChanged = m.stateChanges;
+		this.state = m.state.asReadonly();
+		this.x = computed(() => m.rect().left, ...ngDevMode ? [{ debugName: "x" }] : /* istanbul ignore next */ []);
+		this.y = computed(() => m.rect().top, ...ngDevMode ? [{ debugName: "y" }] : /* istanbul ignore next */ []);
+		this.width = computed(() => m.rect().width, ...ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []);
+		this.height = computed(() => m.rect().height, ...ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []);
+		this.z = m.z.asReadonly();
+		this.title = m.title.asReadonly();
+		this.snap = m.snap.asReadonly();
+		this.isActive = m.isActive.asReadonly();
+		this.closed = this._closed.asObservable();
+		this.moved = m.moved.asObservable();
+		this.resized = m.resized.asObservable();
+		this.stateChanges = m.stateChanges.asObservable();
 	}
 	get componentInstance() {
 		if (!this.componentRef) throw new Error("WrWindowRef: component not yet attached");
@@ -1212,28 +1278,48 @@ var WrWindowRef = class {
 		if (proceed) this._doClose?.(result);
 	}
 	minimize() {
-		this._doMinimize?.();
+		this._model.minimize();
 	}
 	maximize() {
-		this._doMaximize?.();
+		this._model.maximize();
 	}
 	restore() {
-		this._doRestore?.();
+		this._model.restore();
 	}
 	focus() {
-		this._doFocus?.();
+		this._host?._raise(this);
+	}
+	activate() {
+		if (this._host) this._host._activate(this);
+		else this._model.unminimize();
 	}
 	moveTo(x, y) {
-		this._doMoveTo?.(x, y);
+		this._model.moveTo(x, y);
 	}
 	resizeTo(width, height) {
-		this._doResizeTo?.(width, height);
+		this._model.resizeTo(width, height);
 	}
 	center() {
-		this._doCenter?.();
+		this._model.center();
+	}
+	snapTo(target) {
+		this._model.snapTo(target);
 	}
 	setTitle(title) {
-		this._doSetTitle?.(title);
+		this._model.title.set(title);
+	}
+	update(patch) {
+		this._model.update(patch);
+	}
+	startMove() {
+		this.startKeyboard("move");
+	}
+	startResize() {
+		this.startKeyboard("resize");
+	}
+	startKeyboard(mode) {
+		if (this._startKeyboard) this._startKeyboard(mode);
+		else this._pendingKeyboard = mode;
 	}
 	beforeClose(hook) {
 		this._beforeCloseHook = hook;
@@ -1246,6 +1332,9 @@ var WrWindowRef = class {
 			});
 		});
 	}
+	awaitClose() {
+		return this.afterClosed();
+	}
 	get overlayRef() {
 		return this._overlayRef;
 	}
@@ -1256,58 +1345,111 @@ var WrWindowRef = class {
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
 */
+const NO_RESERVE$1 = {
+	top: 0,
+	bottom: 0
+};
+function sameRect(a, b) {
+	return a.left === b.left && a.top === b.top && a.width === b.width && a.height === b.height;
+}
 var WrWindowManager = class WrWindowManager {
 	overlay = inject(WR_OVERLAY);
 	parentInjector = inject(EnvironmentInjector);
 	storage = inject(WrStorage);
 	isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
 	dir = inject(Directionality, { optional: true });
+	defaults = inject(WR_WINDOW_DEFAULTS, { optional: true });
+	destroyRef = inject(DestroyRef);
 	baseZ = 1e3;
 	topZ = this.baseZ;
 	openCount = 0;
 	_windows = signal([], ...ngDevMode ? [{ debugName: "_windows" }] : /* istanbul ignore next */ []);
+	_active = signal(null, ...ngDevMode ? [{ debugName: "_active" }] : /* istanbul ignore next */ []);
 	pendingRestores = /* @__PURE__ */ new Map();
-	taskbars = /* @__PURE__ */ new Set();
+	taskbars = signal([], ...ngDevMode ? [{ debugName: "taskbars" }] : /* istanbul ignore next */ []);
+	viewport = signal(readViewport(), {
+		...ngDevMode ? { debugName: "viewport" } : /* istanbul ignore next */ {},
+		equal: (a, b) => a.width === b.width && a.height === b.height
+	});
+	layoutTick = signal(0, ...ngDevMode ? [{ debugName: "layoutTick" }] : /* istanbul ignore next */ []);
+	listening = false;
+	boundsObserver = null;
+	boundElements = /* @__PURE__ */ new Map();
+	bumpLayout = () => this.layoutTick.update((n) => n + 1);
+	reserve = computed(() => {
+		let top = 0;
+		let bottom = 0;
+		for (const taskbar of this.taskbars()) {
+			const r = taskbar.reserve();
+			top = Math.max(top, r.top);
+			bottom = Math.max(bottom, r.bottom);
+		}
+		return top === 0 && bottom === 0 ? NO_RESERVE$1 : {
+			top,
+			bottom
+		};
+	}, ...ngDevMode ? [{ debugName: "reserve" }] : /* istanbul ignore next */ []);
 	windows = this._windows.asReadonly();
+	active = this._active.asReadonly();
 	minimized = computed(() => this._windows().filter((w) => w.taskbarVisible && w.state() === "minimized"), ...ngDevMode ? [{ debugName: "minimized" }] : /* istanbul ignore next */ []);
 	bringToFront() {
 		this.topZ += 1;
 		return this.topZ;
 	}
 	nextStartOffset() {
-		const offset = this.openCount % 10 * 30;
+		const offset = cascadeOffset(this.openCount);
 		this.openCount += 1;
-		return {
-			x: 50 + offset,
-			y: 50 + offset
-		};
+		return offset;
 	}
 	open(component, config = {}) {
 		const opener = this.focusedElement();
 		if (config.id) {
 			const existing = this.findById(config.id);
 			if (existing) {
-				existing.restore();
-				existing.focus();
 				if (config.autoFocus !== false) {
 					if (opener && !existing._overlayRef.overlayElement?.contains(opener)) existing._returnFocus = opener;
-					existing._doFocusInitial?.();
+					this._activate(existing);
+				} else {
+					existing._model.unminimize();
+					this._raise(existing);
 				}
 				return existing;
 			}
 		}
 		const pending = config.id ? this.pendingRestores.get(config.id) : void 0;
-		if (pending) {
-			this.pendingRestores.delete(config.id);
-			config = {
-				...config,
-				x: pending.x,
-				y: pending.y,
-				width: pending.width,
-				height: pending.height,
-				title: pending.title || config.title
-			};
-		}
+		if (pending) this.pendingRestores.delete(config.id);
+		this.listen();
+		const options = resolveOptions(config);
+		const bounds = this.boundsElement(config.bounds ?? this.defaults?.bounds);
+		const workArea = this.workAreaFor(config.bounds ?? this.defaults?.bounds, bounds);
+		const releaseBounds = bounds ? this.observeBounds(bounds) : null;
+		const saved = !pending && config.storage ? this.storage.get(storageKey(config.storage)) : null;
+		const persist = config.storage?.persist ?? "all";
+		const isNum = (v) => typeof v === "number" && !Number.isNaN(v);
+		const savedPos = saved && persist !== "size" && isNum(saved.x) && isNum(saved.y) ? saved : null;
+		const savedSize = saved && persist !== "position" && isNum(saved.width) && isNum(saved.height) ? saved : null;
+		const geometry = untracked(() => seedGeometry({
+			options,
+			workArea: workArea(),
+			size: config.size,
+			x: pending?.x ?? savedPos?.x ?? config.x,
+			y: pending?.y ?? savedPos?.y ?? config.y,
+			width: pending?.width ?? savedSize?.width ?? config.width,
+			height: pending?.height ?? savedSize?.height ?? config.height,
+			restored: !!pending || !!savedPos,
+			cascade: () => this.nextStartOffset(),
+			rtl: this.dir?.value === "rtl"
+		}));
+		const taskbarOptIn = config.taskbar !== false;
+		const model = new WrWindowModel({
+			options,
+			title: [pending?.title, config.title].find((t) => !!t) ?? "",
+			geometry,
+			state: pending?.state,
+			snap: pending?.snap ?? null,
+			z: this.bringToFront(),
+			workArea
+		});
 		let self = null;
 		const overlayRef = this.overlay.create({
 			positionStrategy: this.overlay.position().global(),
@@ -1316,10 +1458,16 @@ var WrWindowManager = class WrWindowManager {
 			eventPredicate: () => self === null || this.ownsKeyboard(self),
 			usePopover: false
 		});
+		overlayRef.hostElement.style.zIndex = String(model.z());
 		wrFollowDirection(overlayRef, this.dir, this.parentInjector);
-		const ref = new WrWindowRef(config.id ?? randomId("wr-window"), overlayRef);
-		self = ref;
-		ref.taskbarVisible = config.taskbar !== false;
+		const ref = new WrWindowRef(config.id ?? randomId("wr-window"), overlayRef, model);
+		const any = ref;
+		self = any;
+		ref._host = this;
+		ref.taskbarVisible = taskbarOptIn;
+		model.stateChanges.subscribe((state) => {
+			if (state === "minimized" && this._active() === any) this.setActive(null);
+		});
 		const childInjector = Injector.create({
 			parent: this.parentInjector,
 			providers: [{
@@ -1338,47 +1486,172 @@ var WrWindowManager = class WrWindowManager {
 		container.childInjector = childInjector;
 		container.autoFocus = config.autoFocus ?? !pending;
 		ref._returnFocus = opener;
-		if (config.closeOnEscape !== false) overlayRef.keydownEvents().subscribe((event) => {
-			if (event.key === "Escape") {
-				event.preventDefault();
-				ref.close();
-			}
+		overlayRef.keydownEvents().subscribe((event) => {
+			if (event.key !== "Escape" || event.defaultPrevented || !model.options().closeOnEscape) return;
+			event.preventDefault();
+			ref.close();
 		});
 		ref._doClose = (result) => {
-			const back = this.holdsFocus(ref) ? ref._returnFocus : null;
+			const back = this.holdsFocus(any) ? ref._returnFocus : null;
 			ref._returnFocus = null;
 			overlayRef.dispose();
+			releaseBounds?.();
 			ref._closed.next(result);
 			ref._closed.complete();
-			this._windows.update((list) => list.filter((r) => r !== ref));
+			model.complete();
+			this._windows.update((list) => list.filter((r) => r !== any));
+			if (this._active() === any) this.setActive(null);
 			if (back?.isConnected) back.focus();
 		};
-		this._windows.update((list) => [...list, ref]);
-		if (pending && pending.state !== "normal") ref.pendingStateOnMount = pending.state;
+		this._windows.update((list) => [...list, any]);
 		return ref;
 	}
+	_activate(ref, options = {}) {
+		if (!this._windows().includes(ref)) return;
+		ref._model.unminimize();
+		this._raise(ref);
+		this.setActive(ref);
+		if (options.focus !== false && !ref._model.hasFocus()) ref._focusWindow?.("last");
+	}
+	_raise(ref) {
+		if (ref.z() >= this.topZ) return;
+		const z = this.bringToFront();
+		ref._model.z.set(z);
+		const host = ref._overlayRef.hostElement;
+		if (host) host.style.zIndex = String(z);
+	}
+	setActive(ref) {
+		const previous = this._active();
+		if (previous === ref) return;
+		previous?._model.isActive.set(false);
+		ref?._model.isActive.set(true);
+		this._active.set(ref);
+	}
+	onFocusIn = (event) => {
+		const target = event.target;
+		if (!(target instanceof Node)) return;
+		const ref = this._windows().find((w) => w._overlayRef.overlayElement?.contains(target));
+		if (ref) {
+			this._raise(ref);
+			this.setActive(ref);
+			return;
+		}
+		if (this.taskbars().some((t) => t.contains(target))) return;
+		if (target instanceof Element && target.closest(".wr-overlay-container, .cdk-overlay-container")) return;
+		this.setActive(null);
+	};
+	listen() {
+		if (this.listening || !this.isBrowser) return;
+		this.listening = true;
+		const measure = () => this.viewport.set(readViewport());
+		measure();
+		window.addEventListener("resize", measure, { passive: true });
+		document.addEventListener("focusin", this.onFocusIn, true);
+		this.destroyRef.onDestroy(() => {
+			window.removeEventListener("resize", measure);
+			document.removeEventListener("focusin", this.onFocusIn, true);
+			document.removeEventListener("scroll", this.bumpLayout, true);
+			this.boundsObserver?.disconnect();
+		});
+	}
+	boundsElement(bounds) {
+		if (!bounds || bounds === "viewport") return null;
+		if (bounds instanceof ElementRef) return bounds.nativeElement;
+		return typeof bounds.getBoundingClientRect === "function" ? bounds : null;
+	}
+	workAreaFor(bounds, element) {
+		const insets = !element && bounds && bounds !== "viewport" ? bounds : null;
+		return computed(() => {
+			const vp = this.viewport();
+			const reserve = this.reserve();
+			let left = 0;
+			let top = 0;
+			let right = vp.width;
+			let bottom = vp.height;
+			if (element && this.isBrowser) {
+				this.layoutTick();
+				const r = element.getBoundingClientRect();
+				left = Math.max(0, r.left);
+				top = Math.max(0, r.top);
+				right = Math.min(vp.width, r.right);
+				bottom = Math.min(vp.height, r.bottom);
+			} else if (insets) {
+				left = insets.left ?? 0;
+				top = insets.top ?? 0;
+				right = vp.width - (insets.right ?? 0);
+				bottom = vp.height - (insets.bottom ?? 0);
+			}
+			top = Math.max(top, reserve.top);
+			bottom = Math.min(bottom, vp.height - reserve.bottom);
+			return {
+				left: Math.round(left),
+				top: Math.round(top),
+				width: Math.max(0, Math.round(right - left)),
+				height: Math.max(0, Math.round(bottom - top))
+			};
+		}, { equal: sameRect });
+	}
+	observeBounds(element) {
+		if (!this.isBrowser) return () => void 0;
+		const count = this.boundElements.get(element) ?? 0;
+		this.boundElements.set(element, count + 1);
+		if (count === 0) {
+			if (typeof ResizeObserver !== "undefined") {
+				this.boundsObserver ??= new ResizeObserver(this.bumpLayout);
+				this.boundsObserver.observe(element);
+			}
+			if (this.boundElements.size === 1) document.addEventListener("scroll", this.bumpLayout, {
+				capture: true,
+				passive: true
+			});
+		}
+		let released = false;
+		return () => {
+			if (released) return;
+			released = true;
+			const left = (this.boundElements.get(element) ?? 1) - 1;
+			if (left > 0) {
+				this.boundElements.set(element, left);
+				return;
+			}
+			this.boundElements.delete(element);
+			this.boundsObserver?.unobserve(element);
+			if (this.boundElements.size === 0) document.removeEventListener("scroll", this.bumpLayout, true);
+		};
+	}
 	ownsKeyboard(ref) {
+		if (!this.isBrowser) return false;
 		const open = this._windows();
-		const active = this.isBrowser ? document.activeElement : null;
+		const active = document.activeElement;
 		const focused = active ? open.find((w) => w._overlayRef.overlayElement?.contains(active)) : void 0;
 		if (focused) return focused === ref;
-		if (active && open.some((w) => this.taskbarTab(w)?.contains(active))) return false;
-		if (ref.state() === "minimized") return false;
-		return open.every((w) => w === ref || w.state() === "minimized" || w.z() <= ref.z());
+		if (active && active !== document.body) return false;
+		const current = this._active();
+		if (current && current.state() !== "minimized") return current === ref;
+		let front = null;
+		for (const w of open) if (w.state() !== "minimized" && (!front || w.z() > front.z())) front = w;
+		return front === ref;
 	}
 	_registerTaskbar(taskbar) {
-		this.taskbars.add(taskbar);
-		return () => this.taskbars.delete(taskbar);
+		this.taskbars.update((list) => [...list, taskbar]);
+		return () => this.taskbars.update((list) => list.filter((t) => t !== taskbar));
 	}
-	_focusAfterMinimize(ref) {
-		const restore = this.taskbarTab(ref)?.querySelector("button");
+	_focusAfterMinimize(ref, attempt = 0) {
+		if (attempt < 3 && this.taskbars().some((taskbar) => taskbar.settling(ref))) {
+			const active = this.focusedElement();
+			if (active && ref._overlayRef.overlayElement?.contains(active)) active.blur();
+			afterNextRender(() => this._focusAfterMinimize(ref, attempt + 1), { injector: this.parentInjector });
+			return;
+		}
+		const tab = this.taskbarTab(ref);
+		const restore = tab?.matches("button") ? tab : tab?.querySelector("button");
 		if (restore) restore.focus();
 		else if (ref._returnFocus?.isConnected) ref._returnFocus.focus();
 		const active = this.focusedElement();
 		if (active && ref._overlayRef.overlayElement?.contains(active)) active.blur();
 	}
 	taskbarTab(ref) {
-		for (const taskbar of this.taskbars) {
+		for (const taskbar of this.taskbars()) {
 			const tab = taskbar.tabFor(ref);
 			if (tab) return tab;
 		}
@@ -1395,6 +1668,80 @@ var WrWindowManager = class WrWindowManager {
 		if (!active) return true;
 		return !!ref._overlayRef.overlayElement?.contains(active) || !!this.taskbarTab(ref)?.contains(active);
 	}
+	onScreen() {
+		return this._windows().filter((w) => w.state() !== "minimized");
+	}
+	cascade() {
+		const rtl = this.dir?.value === "rtl";
+		this.onScreen().sort((a, b) => a.z() - b.z()).forEach((ref, index) => {
+			const m = ref._model;
+			m.restore();
+			const wa = m.workArea();
+			const o = m.options();
+			const fit = (size, room) => o.keepInViewport ? Math.min(size, room) : size;
+			const width = clamp(fit(m.width(), wa.width), o.minWidth, o.maxWidth);
+			const height = clamp(fit(m.height(), wa.height), o.minHeight, o.maxHeight);
+			const offset = cascadeOffset(index);
+			const x = rtl ? wa.left + wa.width - width - offset.x : wa.left + offset.x;
+			const y = wa.top + offset.y;
+			m.setRaw({
+				x: clamp(x, wa.left, Math.max(wa.left, wa.left + wa.width - width)),
+				y: clamp(y, wa.top, Math.max(wa.top, wa.top + wa.height - height)),
+				width,
+				height
+			});
+			this._raise(ref);
+		});
+	}
+	tile(mode = "grid") {
+		const list = this.onScreen();
+		const n = list.length;
+		if (n === 0) return;
+		const rtl = this.dir?.value === "rtl";
+		const cols = mode === "columns" ? n : mode === "rows" ? 1 : Math.ceil(Math.sqrt(n));
+		const rows = Math.ceil(n / cols);
+		list.forEach((ref, index) => {
+			const m = ref._model;
+			m.restore();
+			const wa = m.workArea();
+			const o = m.options();
+			const row = Math.floor(index / cols);
+			const inRow = Math.min(cols, n - row * cols);
+			let col = index % cols;
+			if (rtl) col = inRow - 1 - col;
+			const x0 = wa.left + Math.floor(wa.width * col / inRow);
+			const x1 = wa.left + Math.floor(wa.width * (col + 1) / inRow);
+			const y0 = wa.top + Math.floor(wa.height * row / rows);
+			const y1 = wa.top + Math.floor(wa.height * (row + 1) / rows);
+			m.setRaw({
+				x: x0,
+				y: y0,
+				width: clamp(x1 - x0, o.minWidth, o.maxWidth),
+				height: clamp(y1 - y0, o.minHeight, o.maxHeight)
+			});
+			m.clamp();
+		});
+	}
+	minimizeAll() {
+		for (const ref of this.onScreen()) ref._model.minimize();
+	}
+	restoreAll() {
+		for (const ref of this._windows()) ref._model.unminimize();
+	}
+	activateNext() {
+		this.cycle(1);
+	}
+	activatePrevious() {
+		this.cycle(-1);
+	}
+	cycle(step) {
+		const list = this._windows();
+		if (list.length === 0) return;
+		const current = this._active();
+		const index = current ? list.indexOf(current) : -1;
+		const next = index < 0 ? list[step > 0 ? 0 : list.length - 1] : list[(index + step + list.length) % list.length];
+		this._activate(next);
+	}
 	closeAll() {
 		for (const ref of [...this._windows()]) ref.close();
 	}
@@ -1411,11 +1758,12 @@ var WrWindowManager = class WrWindowManager {
 		const snapshot = this._windows().map((ref) => ({
 			id: ref.id,
 			state: ref.state(),
-			x: ref._rawX(),
-			y: ref._rawY(),
-			width: ref._rawWidth(),
-			height: ref._rawHeight(),
-			title: ref.title()
+			x: ref._model.x(),
+			y: ref._model.y(),
+			width: ref._model.width(),
+			height: ref._model.height(),
+			title: ref.title(),
+			snap: ref._model.snap()
 		}));
 		this.storage.set(this.layoutKey(name), snapshot);
 	}
@@ -1438,19 +1786,20 @@ var WrWindowManager = class WrWindowManager {
 		}
 	}
 	applyRestore(ref, snap) {
-		ref.restore();
-		if (snap.title) ref.setTitle(snap.title);
-		ref.moveTo(snap.x, snap.y);
-		ref.resizeTo(snap.width, snap.height);
-		if (snap.state === "minimized") ref.minimize();
-		else if (snap.state === "maximized") ref.maximize();
+		const m = ref._model;
+		m.restore();
+		if (snap.title) m.title.set(snap.title);
+		m.resizeTo(snap.width, snap.height);
+		m.moveTo(snap.x, snap.y);
+		if (snap.snap && snap.snap !== "top") m.snap.set(snap.snap);
+		if (snap.state !== "normal") m.setState(snap.state);
 	}
 	clearLayout(name) {
 		this.storage.remove(this.layoutKey(name));
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.3",
+		version: "22.2.4",
 		ngImport: i0,
 		type: WrWindowManager,
 		deps: [],
@@ -1458,14 +1807,14 @@ var WrWindowManager = class WrWindowManager {
 	});
 	static ɵprov = i0.ɵɵngDeclareService({
 		minVersion: "22.0.0",
-		version: "22.2.3",
+		version: "22.2.4",
 		ngImport: i0,
 		type: WrWindowManager
 	});
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.3",
+	version: "22.2.4",
 	ngImport: i0,
 	type: WrWindowManager,
 	decorators: [{ type: Service }]
@@ -1477,38 +1826,239 @@ i0.ɵɵngDeclareClassMetadata({
 * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
 */
 const NO_OVERRIDE = signal(null).asReadonly();
+const NO_RESERVE = {
+	top: 0,
+	bottom: 0
+};
+const sameTabs = (a, b) => a.size === b.size && [...a].every(([id, width]) => b.get(id) === width);
+const sameRoom = (a, b) => a === b || !!a && !!b && a.width === b.width && a.gap === b.gap && a.more === b.more && sameTabs(a.tabs, b.tabs);
+const maxTabsAttr = (value) => value === null || value === void 0 || value === "" ? null : Math.max(1, Math.trunc(coerceNumberProperty(value, 1)));
 var WrWindowTaskbar = class WrWindowTaskbar {
-	railLabel = useI18nText(NO_OVERRIDE, "window.taskbar", "Minimized windows");
+	minimizedLabel = useI18nText(NO_OVERRIDE, "window.taskbar", "Minimized windows");
+	allLabel = useI18nText(NO_OVERRIDE, "window.taskbarAll", "Open windows");
 	closeLabel = useI18nText(NO_OVERRIDE, "window.closeWindow", "Close window");
 	untitled = useI18nText(NO_OVERRIDE, "window.untitled", "Untitled");
 	restoreLabel = useI18nFormatter("window.restoreWindow", "Restore {{title}}");
+	moreLabel = useI18nFormatter("window.taskbarMore", "More windows: {{count}}");
 	position = input("bottom", ...ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []);
+	show = input("minimized", ...ngDevMode ? [{ debugName: "show" }] : /* istanbul ignore next */ []);
+	maxTabs = input(null, {
+		...ngDevMode ? { debugName: "maxTabs" } : /* istanbul ignore next */ {},
+		transform: maxTabsAttr
+	});
 	manager = inject(WrWindowManager);
-	items = computed(() => this.manager.minimized(), ...ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []);
+	host = inject(ElementRef).nativeElement;
+	dir = inject(Directionality, { optional: true });
+	railLabel = computed(() => this.show() === "all" ? this.allLabel() : this.minimizedLabel(), ...ngDevMode ? [{ debugName: "railLabel" }] : /* istanbul ignore next */ []);
+	items = computed(() => this.show() === "all" ? this.manager.windows().filter((w) => w.taskbarVisible) : this.manager.minimized(), ...ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []);
+	room = signal(null, {
+		...ngDevMode ? { debugName: "room" } : /* istanbul ignore next */ {},
+		equal: sameRoom
+	});
+	visible = computed(() => {
+		const items = this.items();
+		const max = this.maxTabs() ?? Infinity;
+		const room = this.room();
+		const fits = (shown, more) => {
+			if (room === null) return true;
+			let need = Math.max(0, shown.length - 1) * room.gap + (more ? room.gap + room.more : 0);
+			for (const ref of shown) need += room.tabs.get(ref.id) ?? 0;
+			return need <= room.width + .01;
+		};
+		if (items.length <= max && fits(items, false)) return items;
+		const current = items.find((ref) => this.isCurrent(ref));
+		const first = (count) => {
+			const shown = items.slice(0, count);
+			if (current && !shown.includes(current)) shown[count - 1] = current;
+			return shown;
+		};
+		for (let count = Math.min(max, items.length - 1); count > 1; count--) {
+			const shown = first(count);
+			if (fits(shown, true)) return shown;
+		}
+		return first(1);
+	}, ...ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []);
+	slots = computed(() => new Map(this.visible().map((ref, index) => [ref, index])), ...ngDevMode ? [{ debugName: "slots" }] : /* istanbul ignore next */ []);
+	folded = computed(() => {
+		const visible = this.visible();
+		return this.items().filter((ref) => !visible.includes(ref));
+	}, ...ngDevMode ? [{ debugName: "folded" }] : /* istanbul ignore next */ []);
+	menuPosition = computed(() => this.position() === "top" ? "bottom-end" : "top-end", ...ngDevMode ? [{ debugName: "menuPosition" }] : /* istanbul ignore next */ []);
 	classes = computed(() => `wr-window-taskbar wr-window-taskbar--${this.position()}`, ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
 	tabs = viewChildren("tab", ...ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []);
+	more = viewChild("more", ...ngDevMode ? [{ debugName: "more" }] : /* istanbul ignore next */ []);
+	rovingIndex = signal(0, ...ngDevMode ? [{ debugName: "rovingIndex" }] : /* istanbul ignore next */ []);
+	stop = computed(() => {
+		const buttons = this.visible().length * 2 + (this.folded().length > 0 ? 1 : 0);
+		return Math.max(0, Math.min(this.rovingIndex(), buttons - 1));
+	}, ...ngDevMode ? [{ debugName: "stop" }] : /* istanbul ignore next */ []);
+	reserve = signal(NO_RESERVE, {
+		...ngDevMode ? { debugName: "reserve" } : /* istanbul ignore next */ {},
+		equal: (a, b) => a.top === b.top && a.bottom === b.bottom
+	});
 	constructor() {
-		const unregister = this.manager._registerTaskbar({ tabFor: (ref) => {
-			const index = this.items().indexOf(ref);
-			return index < 0 ? null : this.tabs()[index]?.nativeElement ?? null;
-		} });
-		inject(DestroyRef).onDestroy(unregister);
+		const unregister = this.manager._registerTaskbar({
+			tabFor: (ref) => {
+				if (this.folded().includes(ref)) return this.more()?.nativeElement ?? null;
+				const index = this.items().indexOf(ref);
+				return index >= 0 ? this.tabs()[index]?.nativeElement ?? null : null;
+			},
+			settling: (ref) => {
+				const room = this.room();
+				const index = this.items().indexOf(ref);
+				if (room === null || index < 0) return false;
+				if (!room.tabs.has(ref.id)) return true;
+				if (this.folded().includes(ref)) return !this.more();
+				return !!this.tabs()[index]?.nativeElement.classList.contains("wr-window-taskbar__tab--folded");
+			},
+			contains: (node) => this.host.contains(node),
+			reserve: this.reserve.asReadonly()
+		});
+		const destroyRef = inject(DestroyRef);
+		destroyRef.onDestroy(unregister);
+		let observer = null;
+		let observedRail = null;
+		afterRenderEffect(() => {
+			for (const ref of this.items()) this.tabTitle(ref);
+			this.folded().length;
+			this.position();
+			const rail = this.host.querySelector(".wr-window-taskbar__rail");
+			if (observer && rail !== observedRail) {
+				if (observedRail) observer.unobserve(observedRail);
+				if (rail) observer.observe(rail);
+			}
+			observedRail = rail;
+			this.measure();
+		});
+		afterNextRender(() => {
+			const measure = () => this.measure();
+			observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(measure);
+			observer?.observe(this.host);
+			if (observedRail) observer?.observe(observedRail);
+			window.addEventListener("resize", measure, { passive: true });
+			destroyRef.onDestroy(() => {
+				observer?.disconnect();
+				window.removeEventListener("resize", measure);
+			});
+		});
 	}
 	tabTitle(ref) {
 		return ref.title() || this.untitled();
 	}
-	restore(ref) {
-		ref.restore();
-		ref.focus();
-		ref._doFocusInitial?.();
+	isCurrent(ref) {
+		return ref.isActive() && ref.state() !== "minimized";
+	}
+	tabLabel(ref) {
+		const title = this.tabTitle(ref);
+		return this.show() === "all" && ref.state() !== "minimized" ? title : this.restoreLabel({ title });
+	}
+	tabIndex(button) {
+		return button >= 0 && button === this.stop() ? 0 : -1;
+	}
+	press(ref) {
+		if (this.show() === "all" && this.isCurrent(ref)) {
+			ref.minimize();
+			return;
+		}
+		ref.activate();
+	}
+	pick(ref, menu) {
+		menu.close();
+		this.press(ref);
 	}
 	close(ref, event) {
 		event.stopPropagation();
 		ref.close();
 	}
+	onKeydown(event) {
+		const buttons = this.buttons();
+		if (buttons.length === 0) return;
+		const current = buttons.indexOf(event.target);
+		if (current < 0) return;
+		const rtl = this.dir?.value === "rtl";
+		let next;
+		switch (event.key) {
+			case "ArrowRight":
+				next = current + (rtl ? -1 : 1);
+				break;
+			case "ArrowLeft":
+				next = current + (rtl ? 1 : -1);
+				break;
+			case "Home":
+				next = 0;
+				break;
+			case "End":
+				next = buttons.length - 1;
+				break;
+			default: return;
+		}
+		event.preventDefault();
+		next = (next + buttons.length) % buttons.length;
+		this.rovingIndex.set(next);
+		buttons[next].focus();
+	}
+	onFocusIn(event) {
+		const index = this.buttons().indexOf(event.target);
+		if (index >= 0) this.rovingIndex.set(index);
+	}
+	buttons() {
+		return [...this.host.querySelectorAll(".wr-window-taskbar__tab:not(.wr-window-taskbar__tab--folded) button, .wr-window-taskbar__more")];
+	}
+	measure() {
+		if (typeof window === "undefined") return;
+		this.measureRoom();
+		const rect = this.host.getBoundingClientRect();
+		if (rect.height <= 0) {
+			this.reserve.set(NO_RESERVE);
+			return;
+		}
+		const vh = document.documentElement.clientHeight || window.innerHeight;
+		this.reserve.set(this.position() === "top" ? {
+			top: Math.ceil(rect.bottom),
+			bottom: 0
+		} : {
+			top: 0,
+			bottom: Math.max(0, Math.ceil(vh - rect.top))
+		});
+	}
+	measureRoom() {
+		const rail = this.host.querySelector(".wr-window-taskbar__rail");
+		const items = this.items();
+		const tabs = this.tabs().map((tab) => tab.nativeElement);
+		const width = this.host.clientWidth;
+		if (!rail || tabs.length === 0 || width <= 0) {
+			this.room.set(null);
+			return;
+		}
+		if (tabs.length !== items.length) return;
+		const railStyle = getComputedStyle(rail);
+		const px = (value) => parseFloat(value) || 0;
+		const inner = width - px(railStyle.paddingInlineStart) - px(railStyle.paddingInlineEnd) - px(railStyle.borderInlineStartWidth) - px(railStyle.borderInlineEndWidth);
+		const widths = /* @__PURE__ */ new Map();
+		tabs.forEach((tab, index) => {
+			const width = tab.getBoundingClientRect().width;
+			const cap = getComputedStyle(tab).maxWidth;
+			const fixed = cap.endsWith("px");
+			if (!fixed && cap !== "none" && cap !== "") {
+				widths.set(items[index].id, width);
+				return;
+			}
+			const title = tab.querySelector(".wr-window-taskbar__tab-title");
+			const clipped = title ? title.scrollWidth - title.clientWidth : 0;
+			const natural = width + (clipped > 1 ? clipped : 0);
+			widths.set(items[index].id, fixed ? Math.min(natural, parseFloat(cap)) : natural);
+		});
+		const more = this.more()?.nativeElement.getBoundingClientRect().width ?? tabs[0].getBoundingClientRect().height;
+		this.room.set({
+			width: inner,
+			gap: px(railStyle.columnGap),
+			more,
+			tabs: widths
+		});
+	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.3",
+		version: "22.2.4",
 		ngImport: i0,
 		type: WrWindowTaskbar,
 		deps: [],
@@ -1516,19 +2066,39 @@ var WrWindowTaskbar = class WrWindowTaskbar {
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "17.0.0",
-		version: "22.2.3",
+		version: "22.2.4",
 		type: WrWindowTaskbar,
 		isStandalone: true,
 		selector: "wr-window-taskbar",
-		inputs: { position: {
-			classPropertyName: "position",
-			publicName: "position",
-			isSignal: true,
-			isRequired: false,
-			transformFunction: null
-		} },
+		inputs: {
+			position: {
+				classPropertyName: "position",
+				publicName: "position",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			show: {
+				classPropertyName: "show",
+				publicName: "show",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			maxTabs: {
+				classPropertyName: "maxTabs",
+				publicName: "maxTabs",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
 		host: {
 			attributes: { "role": "toolbar" },
+			listeners: {
+				"keydown": "onKeydown($event)",
+				"focusin": "onFocusIn($event)"
+			},
 			properties: {
 				"class": "classes()",
 				"attr.aria-label": "railLabel()"
@@ -1539,30 +2109,71 @@ var WrWindowTaskbar = class WrWindowTaskbar {
 			predicate: ["tab"],
 			descendants: true,
 			isSignal: true
+		}, {
+			propertyName: "more",
+			first: true,
+			predicate: ["more"],
+			descendants: true,
+			isSignal: true
 		}],
 		ngImport: i0,
-		template: "@if (items().length > 0) {\n  <div class=\"wr-window-taskbar__rail\">\n    @for (ref of items(); track ref.id) {\n      <!--\n        Two SIBLING buttons in a plain container, not a close button nested\n        inside the tab. The close used to be a `role=\"button\"` span with\n        `tabindex=\"0\"` inside the tab's own `<button>` — interactive content\n        inside interactive content, which the HTML parser and `nested-interactive`\n        both object to. Nothing caught it: a taskbar tab exists only while a\n        window is minimized, and the a11y sweep reads prerendered HTML, where the\n        rail is not rendered at all.\n      -->\n      <div #tab class=\"wr-window-taskbar__tab\">\n        <button\n          type=\"button\"\n          class=\"wr-window-taskbar__tab-restore\"\n          [attr.aria-label]=\"restoreLabel({ title: tabTitle(ref) })\"\n          (click)=\"restore(ref)\"\n        >\n          <span class=\"wr-window-taskbar__tab-title\">{{ tabTitle(ref) }}</span>\n        </button>\n        <button\n          type=\"button\"\n          class=\"wr-window-taskbar__tab-close\"\n          [attr.aria-label]=\"closeLabel()\"\n          (click)=\"close(ref, $event)\"\n        >\n          <svg width=\"9\" height=\"9\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n            <path d=\"M1 1 L9 9 M9 1 L1 9\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" />\n          </svg>\n        </button>\n      </div>\n    }\n  </div>\n}\n",
+		template: "@if (items().length > 0) {\n  <div class=\"wr-window-taskbar__rail\">\n    @for (ref of items(); track ref.id) {\n      @let slot = slots().get(ref) ?? -1;\n      <!--\n        Two SIBLING buttons in a plain container, not a close button nested\n        inside the tab. The close used to be a `role=\"button\"` span with\n        `tabindex=\"0\"` inside the tab's own `<button>` — interactive content\n        inside interactive content, which the HTML parser and `nested-interactive`\n        both object to. Nothing caught it: a taskbar tab exists only while a\n        window is minimized, and the a11y sweep reads prerendered HTML, where the\n        rail is not rendered at all.\n      -->\n      <!--\n        A folded window keeps its tab, hidden and out of the row but laid out,\n        so the rail can read the width it would take to draw it again.\n      -->\n      <div\n        #tab\n        class=\"wr-window-taskbar__tab\"\n        [class.wr-window-taskbar__tab--active]=\"isCurrent(ref)\"\n        [class.wr-window-taskbar__tab--minimized]=\"ref.state() === 'minimized'\"\n        [class.wr-window-taskbar__tab--folded]=\"slot < 0\"\n        [attr.inert]=\"slot < 0 ? '' : null\"\n      >\n        <button\n          type=\"button\"\n          class=\"wr-window-taskbar__tab-restore\"\n          [attr.aria-label]=\"tabLabel(ref)\"\n          [attr.aria-pressed]=\"show() === 'all' ? isCurrent(ref) : null\"\n          [attr.tabindex]=\"tabIndex(slot < 0 ? -1 : slot * 2)\"\n          (click)=\"press(ref)\"\n        >\n          <span class=\"wr-window-taskbar__tab-title\">{{ tabTitle(ref) }}</span>\n        </button>\n        <button\n          type=\"button\"\n          class=\"wr-window-taskbar__tab-close\"\n          [attr.aria-label]=\"closeLabel()\"\n          [attr.tabindex]=\"tabIndex(slot < 0 ? -1 : slot * 2 + 1)\"\n          (click)=\"close(ref, $event)\"\n        >\n          <svg width=\"9\" height=\"9\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n            <path d=\"M1 1 L9 9 M9 1 L1 9\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" />\n          </svg>\n        </button>\n      </div>\n    }\n    @if (folded().length > 0) {\n      <button\n        #more\n        #fold=\"wrDropdown\"\n        type=\"button\"\n        class=\"wr-window-taskbar__more\"\n        [wrDropdown]=\"foldMenu\"\n        [position]=\"menuPosition()\"\n        [attr.aria-label]=\"moreLabel({ count: folded().length })\"\n        [attr.tabindex]=\"tabIndex(visible().length * 2)\"\n      >\n        +{{ folded().length }}\n      </button>\n      <wr-dropdown-menu #foldMenu>\n        @for (ref of folded(); track ref.id) {\n          <wr-dropdown-item\n            class=\"wr-window-taskbar__fold-item\"\n            [class.wr-window-taskbar__fold-item--minimized]=\"ref.state() === 'minimized'\"\n            [attr.aria-label]=\"tabLabel(ref)\"\n            (click)=\"pick(ref, fold)\"\n          >\n            {{ tabTitle(ref) }}\n          </wr-dropdown-item>\n        }\n      </wr-dropdown-menu>\n    }\n  </div>\n}\n",
+		dependencies: [
+			{
+				kind: "directive",
+				type: WrDropdown,
+				selector: "[wrDropdown]",
+				inputs: [
+					"wrDropdown",
+					"trigger",
+					"position",
+					"arrow",
+					"panelClass"
+				],
+				outputs: ["opened", "closed"],
+				exportAs: ["wrDropdown"]
+			},
+			{
+				kind: "component",
+				type: WrDropdownMenu,
+				selector: "wr-dropdown-menu",
+				exportAs: ["wrDropdownMenu"]
+			},
+			{
+				kind: "component",
+				type: WrDropdownItem,
+				selector: "wr-dropdown-item",
+				inputs: ["icon", "disabled"]
+			}
+		],
 		changeDetection: i0.ChangeDetectionStrategy.OnPush,
 		encapsulation: i0.ViewEncapsulation.None
 	});
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.3",
+	version: "22.2.4",
 	ngImport: i0,
 	type: WrWindowTaskbar,
 	decorators: [{
 		type: Component,
 		args: [{
 			selector: "wr-window-taskbar",
+			imports: [
+				WrDropdown,
+				WrDropdownMenu,
+				WrDropdownItem
+			],
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			encapsulation: ViewEncapsulation.None,
 			host: {
 				"[class]": "classes()",
 				role: "toolbar",
-				"[attr.aria-label]": "railLabel()"
+				"[attr.aria-label]": "railLabel()",
+				"(keydown)": "onKeydown($event)",
+				"(focusin)": "onFocusIn($event)"
 			},
-			template: "@if (items().length > 0) {\n  <div class=\"wr-window-taskbar__rail\">\n    @for (ref of items(); track ref.id) {\n      <!--\n        Two SIBLING buttons in a plain container, not a close button nested\n        inside the tab. The close used to be a `role=\"button\"` span with\n        `tabindex=\"0\"` inside the tab's own `<button>` — interactive content\n        inside interactive content, which the HTML parser and `nested-interactive`\n        both object to. Nothing caught it: a taskbar tab exists only while a\n        window is minimized, and the a11y sweep reads prerendered HTML, where the\n        rail is not rendered at all.\n      -->\n      <div #tab class=\"wr-window-taskbar__tab\">\n        <button\n          type=\"button\"\n          class=\"wr-window-taskbar__tab-restore\"\n          [attr.aria-label]=\"restoreLabel({ title: tabTitle(ref) })\"\n          (click)=\"restore(ref)\"\n        >\n          <span class=\"wr-window-taskbar__tab-title\">{{ tabTitle(ref) }}</span>\n        </button>\n        <button\n          type=\"button\"\n          class=\"wr-window-taskbar__tab-close\"\n          [attr.aria-label]=\"closeLabel()\"\n          (click)=\"close(ref, $event)\"\n        >\n          <svg width=\"9\" height=\"9\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n            <path d=\"M1 1 L9 9 M9 1 L1 9\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" />\n          </svg>\n        </button>\n      </div>\n    }\n  </div>\n}\n"
+			template: "@if (items().length > 0) {\n  <div class=\"wr-window-taskbar__rail\">\n    @for (ref of items(); track ref.id) {\n      @let slot = slots().get(ref) ?? -1;\n      <!--\n        Two SIBLING buttons in a plain container, not a close button nested\n        inside the tab. The close used to be a `role=\"button\"` span with\n        `tabindex=\"0\"` inside the tab's own `<button>` — interactive content\n        inside interactive content, which the HTML parser and `nested-interactive`\n        both object to. Nothing caught it: a taskbar tab exists only while a\n        window is minimized, and the a11y sweep reads prerendered HTML, where the\n        rail is not rendered at all.\n      -->\n      <!--\n        A folded window keeps its tab, hidden and out of the row but laid out,\n        so the rail can read the width it would take to draw it again.\n      -->\n      <div\n        #tab\n        class=\"wr-window-taskbar__tab\"\n        [class.wr-window-taskbar__tab--active]=\"isCurrent(ref)\"\n        [class.wr-window-taskbar__tab--minimized]=\"ref.state() === 'minimized'\"\n        [class.wr-window-taskbar__tab--folded]=\"slot < 0\"\n        [attr.inert]=\"slot < 0 ? '' : null\"\n      >\n        <button\n          type=\"button\"\n          class=\"wr-window-taskbar__tab-restore\"\n          [attr.aria-label]=\"tabLabel(ref)\"\n          [attr.aria-pressed]=\"show() === 'all' ? isCurrent(ref) : null\"\n          [attr.tabindex]=\"tabIndex(slot < 0 ? -1 : slot * 2)\"\n          (click)=\"press(ref)\"\n        >\n          <span class=\"wr-window-taskbar__tab-title\">{{ tabTitle(ref) }}</span>\n        </button>\n        <button\n          type=\"button\"\n          class=\"wr-window-taskbar__tab-close\"\n          [attr.aria-label]=\"closeLabel()\"\n          [attr.tabindex]=\"tabIndex(slot < 0 ? -1 : slot * 2 + 1)\"\n          (click)=\"close(ref, $event)\"\n        >\n          <svg width=\"9\" height=\"9\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n            <path d=\"M1 1 L9 9 M9 1 L1 9\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" />\n          </svg>\n        </button>\n      </div>\n    }\n    @if (folded().length > 0) {\n      <button\n        #more\n        #fold=\"wrDropdown\"\n        type=\"button\"\n        class=\"wr-window-taskbar__more\"\n        [wrDropdown]=\"foldMenu\"\n        [position]=\"menuPosition()\"\n        [attr.aria-label]=\"moreLabel({ count: folded().length })\"\n        [attr.tabindex]=\"tabIndex(visible().length * 2)\"\n      >\n        +{{ folded().length }}\n      </button>\n      <wr-dropdown-menu #foldMenu>\n        @for (ref of folded(); track ref.id) {\n          <wr-dropdown-item\n            class=\"wr-window-taskbar__fold-item\"\n            [class.wr-window-taskbar__fold-item--minimized]=\"ref.state() === 'minimized'\"\n            [attr.aria-label]=\"tabLabel(ref)\"\n            (click)=\"pick(ref, fold)\"\n          >\n            {{ tabTitle(ref) }}\n          </wr-dropdown-item>\n        }\n      </wr-dropdown-menu>\n    }\n  </div>\n}\n"
 		}]
 	}],
 	ctorParameters: () => [],
@@ -1575,12 +2186,44 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		show: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "show",
+				required: false
+			}]
+		}],
+		maxTabs: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "maxTabs",
+				required: false
+			}]
+		}],
 		tabs: [{
 			type: i0.ViewChildren,
 			args: ["tab", { isSignal: true }]
+		}],
+		more: [{
+			type: i0.ViewChild,
+			args: ["more", { isSignal: true }]
 		}]
 	}
 });
-export { WR_WINDOW_DATA, WR_WINDOW_REF, WrWindowManager, WrWindowRef, WrWindowTaskbar };
+/**
+* @license
+*
+* Use of this source code is governed by an MIT-style license that can be
+* found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+*/
+function withWindows(defaults) {
+	return wrFeature("windows", [{
+		provide: WR_WINDOW_DEFAULTS,
+		useValue: defaults
+	}]);
+}
+export { WR_WINDOW_DATA, WR_WINDOW_REF, WrWindowManager, WrWindowRef, WrWindowTaskbar, withWindows };
 
 //# sourceMappingURL=ngwr-window.mjs.map