@salmexio/ui 0.3.1 → 1.0.0

package/dist/windowing/WindowManager/WindowManager.svelte

@@ -1,410 +0,0 @@
-<!--
-  @component WindowManager
-
-  Win2K x Basquiat -- Desktop-style container that manages Window components.
-  Provides a bounded area for windows to live in, with a taskbar at the bottom
-  showing all open windows (including minimized). Click-to-focus z-index stacking.
-  Keyboard: F6 cycles windows, Alt+Arrow Up maximizes, Alt+Arrow Down minimizes.
-
-  @example
-  <WindowManager height="500px">
-    <Window id="notes" title="Notes"><p>Content</p></Window>
-    <Window id="settings" title="Settings"><p>Content</p></Window>
-  </WindowManager>
--->
-<script lang="ts">
-import type { Snippet } from 'svelte';
-import { setContext } from 'svelte';
-import { cn } from '../../utils/cn.js';
-import { generateId, Keys } from '../../utils/keyboard.js';
-import { createWindowManager } from '../windowStore.svelte.js';
-
-type TaskbarPosition = 'bottom' | 'top';
-
-interface Props {
-	/** Height of the window manager area. */
-	height?: string;
-	/** Show the taskbar. */
-	showTaskbar?: boolean;
-	/** Taskbar position. */
-	taskbarPosition?: TaskbarPosition;
-	/** Show a desktop background pattern. */
-	showDesktopPattern?: boolean;
-	/** Desktop label in corner. */
-	desktopLabel?: string;
-	/** Window children (Window components). */
-	children?: Snippet;
-	/** Additional CSS class. */
-	class?: string;
-	/** Test ID for automated testing. */
-	testId?: string;
-}
-
-let {
-	height = '500px',
-	showTaskbar = true,
-	taskbarPosition = 'bottom',
-	showDesktopPattern = true,
-	desktopLabel = '',
-	children,
-	class: className = '',
-	testId
-}: Props = $props();
-
-const managerId = generateId('wm');
-const manager = createWindowManager();
-
-// Provide manager to child Window components
-setContext('salmex-window-manager', manager);
-
-let containerEl = $state<HTMLDivElement | null>(null);
-
-function handleKeyDown(e: KeyboardEvent) {
-	// F6 / Shift+F6: cycle between windows
-	if (e.key === 'F6') {
-		e.preventDefault();
-		if (e.shiftKey) {
-			manager.focusPrevious();
-		} else {
-			manager.focusNext();
-		}
-		// Focus the window element
-		const focused = manager.getFocusedWindow();
-		if (focused && containerEl) {
-			const el = containerEl.querySelector<HTMLElement>(`[data-window-id="${focused.id}"]`);
-			el?.focus();
-		}
-	}
-
-	const focusedWin = manager.getFocusedWindow();
-	if (!focusedWin) return;
-
-	// Alt+ArrowDown: minimize
-	if (e.altKey && e.key === Keys.ArrowDown) {
-		e.preventDefault();
-		manager.minimize(focusedWin.id);
-	}
-
-	// Alt+ArrowUp: maximize / restore
-	if (e.altKey && e.key === Keys.ArrowUp) {
-		e.preventDefault();
-		if (focusedWin.maximized) {
-			manager.restore(focusedWin.id);
-		} else if (containerEl) {
-			const rect = containerEl.getBoundingClientRect();
-			const taskbarH = showTaskbar ? 36 : 0;
-			manager.maximize(focusedWin.id, rect.width, rect.height - taskbarH);
-		}
-	}
-}
-
-function handleTaskbarClick(windowId: string) {
-	manager.toggleMinimize(windowId);
-	// Focus the window element if restored
-	const win = manager.getWindow(windowId);
-	if (win && !win.minimized && containerEl) {
-		setTimeout(() => {
-			const el = containerEl?.querySelector<HTMLElement>(`[data-window-id="${windowId}"]`);
-			el?.focus();
-		}, 0);
-	}
-}
-</script>
-
-<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-<div
-	bind:this={containerEl}
-	id={managerId}
-	class={cn(
-		'salmex-wm',
-		showDesktopPattern && 'salmex-wm-pattern',
-		taskbarPosition === 'top' && 'salmex-wm-taskbar-top',
-		className
-	)}
-	style="height: {height};"
-	role="region"
-	aria-label="Window manager"
-	data-testid={testId}
-	onkeydown={handleKeyDown}
->
-	<!-- Window area -->
-	<div class="salmex-wm-desktop">
-		{#if desktopLabel}
-			<span class="salmex-wm-desktop-label" aria-hidden="true">{desktopLabel}</span>
-		{/if}
-		{#if children}
-			{@render children()}
-		{/if}
-	</div>
-
-	<!-- Taskbar -->
-	{#if showTaskbar}
-		<div class="salmex-wm-taskbar" role="toolbar" aria-label="Window taskbar">
-			<div class="salmex-wm-taskbar-start">
-				<span class="salmex-wm-start-label" aria-hidden="true">Salmex</span>
-			</div>
-			<div class="salmex-wm-taskbar-items">
-				{#each manager.windows as win (win.id)}
-					<button
-						type="button"
-						class={cn(
-							'salmex-wm-taskbar-btn',
-							win.focused && !win.minimized && 'salmex-wm-taskbar-btn-active',
-							win.minimized && 'salmex-wm-taskbar-btn-minimized'
-						)}
-						onclick={() => handleTaskbarClick(win.id)}
-						aria-pressed={win.focused && !win.minimized}
-						title={win.title}
-					>
-						<span class="salmex-wm-taskbar-btn-text">{win.title}</span>
-					</button>
-				{/each}
-			</div>
-			<div class="salmex-wm-taskbar-tray" aria-hidden="true">
-				<span class="salmex-wm-clock">{new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</span>
-			</div>
-		</div>
-	{/if}
-</div>
-
-<style>
-	/* ========================================
-	   WINDOW MANAGER CONTAINER
-	   ======================================== */
-
-	.salmex-wm {
-		position: relative;
-		display: flex;
-		flex-direction: column;
-		border: 3px solid rgb(var(--salmex-button-dark-edge));
-		overflow: hidden;
-		background: rgb(var(--salmex-bg-tertiary));
-		box-shadow: var(--salmex-shadow-lg);
-	}
-
-	.salmex-wm-taskbar-top {
-		flex-direction: column-reverse;
-	}
-
-	/* Desktop background pattern -- Win2K teal with Basquiat texture */
-	.salmex-wm-pattern {
-		background:
-			/* Subtle cross-hatch */
-			repeating-linear-gradient(
-				45deg,
-				transparent,
-				transparent 8px,
-				rgb(0 0 0 / 0.03) 8px,
-				rgb(0 0 0 / 0.03) 9px
-			),
-			repeating-linear-gradient(
-				-45deg,
-				transparent,
-				transparent 8px,
-				rgb(0 0 0 / 0.03) 8px,
-				rgb(0 0 0 / 0.03) 9px
-			),
-			/* Win2K teal base with Basquiat flair */
-			linear-gradient(
-				135deg,
-				rgb(58 110 165),
-				rgb(40 90 140)
-			);
-	}
-
-	:global([data-theme='dark']) .salmex-wm-pattern {
-		background:
-			repeating-linear-gradient(
-				45deg,
-				transparent,
-				transparent 8px,
-				rgb(255 255 255 / 0.02) 8px,
-				rgb(255 255 255 / 0.02) 9px
-			),
-			repeating-linear-gradient(
-				-45deg,
-				transparent,
-				transparent 8px,
-				rgb(255 255 255 / 0.02) 8px,
-				rgb(255 255 255 / 0.02) 9px
-			),
-			linear-gradient(
-				135deg,
-				rgb(15 15 20),
-				rgb(20 18 28)
-			);
-	}
-
-	/* ========================================
-	   DESKTOP AREA
-	   ======================================== */
-
-	.salmex-wm-desktop {
-		position: relative;
-		flex: 1;
-		overflow: hidden;
-	}
-
-	.salmex-wm-desktop-label {
-		position: absolute;
-		bottom: var(--salmex-space-3);
-		right: var(--salmex-space-4);
-		font-family: var(--salmex-font-handwrite);
-		font-size: var(--salmex-font-size-lg);
-		color: rgb(255 255 255 / 0.25);
-		pointer-events: none;
-		user-select: none;
-	}
-
-	:global([data-theme='dark']) .salmex-wm-desktop-label {
-		color: rgb(255 255 255 / 0.1);
-	}
-
-	/* ========================================
-	   TASKBAR
-	   ======================================== */
-
-	.salmex-wm-taskbar {
-		display: flex;
-		align-items: center;
-		gap: 2px;
-		padding: 2px var(--salmex-space-1);
-		background: rgb(var(--salmex-window-surface));
-		border-top: 2px solid rgb(var(--salmex-button-highlight));
-		min-height: 36px;
-		flex-shrink: 0;
-		/* 3D raised taskbar */
-		box-shadow:
-			inset 0 1px 0 rgb(var(--salmex-button-highlight)),
-			inset 0 -1px 0 rgb(var(--salmex-button-shadow));
-	}
-
-	.salmex-wm-taskbar-top .salmex-wm-taskbar {
-		border-top: none;
-		border-bottom: 2px solid rgb(var(--salmex-button-shadow));
-	}
-
-	/* Start button */
-	.salmex-wm-taskbar-start {
-		display: flex;
-		align-items: center;
-		padding: 0 var(--salmex-space-2);
-		border-right: 1px solid rgb(var(--salmex-button-shadow));
-		margin-right: var(--salmex-space-1);
-	}
-
-	.salmex-wm-start-label {
-		font-family: var(--salmex-font-display);
-		font-size: var(--salmex-font-size-xs);
-		font-weight: 900;
-		text-transform: uppercase;
-		letter-spacing: 0.5px;
-		color: rgb(var(--salmex-text-primary));
-	}
-
-	/* Taskbar items area */
-	.salmex-wm-taskbar-items {
-		display: flex;
-		flex: 1;
-		gap: 2px;
-		overflow-x: auto;
-		min-width: 0;
-	}
-
-	/* Taskbar button */
-	.salmex-wm-taskbar-btn {
-		display: flex;
-		align-items: center;
-		gap: var(--salmex-space-1);
-		padding: 2px var(--salmex-space-3);
-		min-width: 0;
-		max-width: 160px;
-		background: rgb(var(--salmex-button-face));
-		border: 2px solid rgb(var(--salmex-button-dark-edge));
-		cursor: pointer;
-		font-family: var(--salmex-font-system);
-		font-size: var(--salmex-font-size-xs);
-		font-weight: 600;
-		color: rgb(var(--salmex-text-primary));
-		text-align: left;
-		/* Raised 3D */
-		box-shadow:
-			inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
-			inset -1px -1px 0 rgb(var(--salmex-button-shadow));
-		transition: all var(--salmex-transition-fast);
-		white-space: nowrap;
-		overflow: hidden;
-		height: 26px;
-	}
-
-	.salmex-wm-taskbar-btn:hover {
-		background: rgb(var(--salmex-button-light));
-	}
-
-	/* Active (focused) — pressed in */
-	.salmex-wm-taskbar-btn-active {
-		box-shadow:
-			inset -1px -1px 0 rgb(var(--salmex-button-highlight)),
-			inset 1px 1px 0 rgb(var(--salmex-button-shadow));
-		background: rgb(var(--salmex-bg-primary));
-		font-weight: 900;
-	}
-
-	/* Minimized — subtle difference */
-	.salmex-wm-taskbar-btn-minimized {
-		opacity: 0.75;
-	}
-
-	.salmex-wm-taskbar-btn:focus-visible {
-		outline: none;
-		box-shadow:
-			inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
-			inset -1px -1px 0 rgb(var(--salmex-button-shadow)),
-			0 0 0 2px rgb(var(--salmex-midnight-black)),
-			0 0 0 5px rgb(var(--salmex-crown-yellow));
-	}
-
-	:global([data-theme='dark']) .salmex-wm-taskbar-btn:focus-visible {
-		box-shadow:
-			inset 1px 1px 0 rgb(var(--salmex-button-highlight)),
-			inset -1px -1px 0 rgb(var(--salmex-button-shadow)),
-			0 0 0 3px rgb(var(--salmex-crown-yellow));
-	}
-
-	.salmex-wm-taskbar-btn-text {
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-
-	/* System tray */
-	.salmex-wm-taskbar-tray {
-		display: flex;
-		align-items: center;
-		gap: var(--salmex-space-2);
-		padding: 0 var(--salmex-space-2);
-		margin-left: auto;
-		border-left: 1px solid rgb(var(--salmex-button-shadow));
-		/* Sunken inset */
-		box-shadow:
-			inset 1px 1px 0 rgb(var(--salmex-button-shadow)),
-			inset -1px -1px 0 rgb(var(--salmex-button-highlight));
-		height: 22px;
-	}
-
-	.salmex-wm-clock {
-		font-family: var(--salmex-font-mono);
-		font-size: var(--salmex-font-size-xs);
-		color: rgb(var(--salmex-text-primary));
-		white-space: nowrap;
-	}
-
-	/* ========================================
-	   REDUCED MOTION
-	   ======================================== */
-
-	@media (prefers-reduced-motion: reduce) {
-		.salmex-wm-taskbar-btn {
-			transition: none;
-		}
-	}
-</style>

package/dist/windowing/WindowManager/WindowManager.svelte.d.ts

@@ -1,38 +0,0 @@
-import type { Snippet } from 'svelte';
-type TaskbarPosition = 'bottom' | 'top';
-interface Props {
-    /** Height of the window manager area. */
-    height?: string;
-    /** Show the taskbar. */
-    showTaskbar?: boolean;
-    /** Taskbar position. */
-    taskbarPosition?: TaskbarPosition;
-    /** Show a desktop background pattern. */
-    showDesktopPattern?: boolean;
-    /** Desktop label in corner. */
-    desktopLabel?: string;
-    /** Window children (Window components). */
-    children?: Snippet;
-    /** Additional CSS class. */
-    class?: string;
-    /** Test ID for automated testing. */
-    testId?: string;
-}
-/**
- * WindowManager
- *
- * Win2K x Basquiat -- Desktop-style container that manages Window components.
- * Provides a bounded area for windows to live in, with a taskbar at the bottom
- * showing all open windows (including minimized). Click-to-focus z-index stacking.
- * Keyboard: F6 cycles windows, Alt+Arrow Up maximizes, Alt+Arrow Down minimizes.
- *
- * @example
- * <WindowManager height="500px">
- *   <Window id="notes" title="Notes"><p>Content</p></Window>
- *   <Window id="settings" title="Settings"><p>Content</p></Window>
- * </WindowManager>
- */
-declare const WindowManager: import("svelte").Component<Props, {}, "">;
-type WindowManager = ReturnType<typeof WindowManager>;
-export default WindowManager;
-//# sourceMappingURL=WindowManager.svelte.d.ts.map

package/dist/windowing/WindowManager/WindowManager.svelte.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"WindowManager.svelte.d.ts","sourceRoot":"","sources":["../../../src/windowing/WindowManager/WindowManager.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAOtC,KAAK,eAAe,GAAG,QAAQ,GAAG,KAAK,CAAC;AAExC,UAAU,KAAK;IACd,yCAAyC;IACzC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,wBAAwB;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,wBAAwB;IACxB,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,yCAAyC;IACzC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,+BAA+B;IAC/B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qCAAqC;IACrC,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AA+HD;;;;;;;;;;;;;GAaG;AACH,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/windowing/WindowManager/index.d.ts

@@ -1,2 +0,0 @@
-export { default as WindowManager } from './WindowManager.svelte';
-//# sourceMappingURL=index.d.ts.map

package/dist/windowing/WindowManager/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/windowing/WindowManager/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/windowing/WindowManager/index.js

@@ -1 +0,0 @@
-export { default as WindowManager } from './WindowManager.svelte';

package/dist/windowing/index.d.ts

@@ -1,5 +0,0 @@
-export { Window } from './Window/index.js';
-export { WindowManager } from './WindowManager/index.js';
-export { createWindowManager } from './windowStore.svelte.js';
-export type { WindowState, WindowManagerState } from './windowStore.svelte.js';
-//# sourceMappingURL=index.d.ts.map

package/dist/windowing/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/windowing/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC9D,YAAY,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC"}

package/dist/windowing/index.js

@@ -1,3 +0,0 @@
-export { Window } from './Window/index.js';
-export { WindowManager } from './WindowManager/index.js';
-export { createWindowManager } from './windowStore.svelte.js';

package/dist/windowing/windowStore.svelte.d.ts

@@ -1,49 +0,0 @@
-/**
- * Window Manager state — Svelte 5 runes-based reactive store.
- * Manages window lifecycle: open, focus, minimize, maximize, restore, close.
- * Counter-based z-index stacking; taskbar-aware focus cycling.
- */
-export interface WindowState {
-    id: string;
-    title: string;
-    minimized: boolean;
-    maximized: boolean;
-    focused: boolean;
-    zIndex: number;
-    /** Position before maximize (for restore) */
-    savedGeometry: {
-        x: number;
-        y: number;
-        width: number;
-        height: number;
-    } | null;
-    /** Current position */
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-}
-export interface WindowManagerState {
-    readonly windows: WindowState[];
-    register(id: string, title: string, opts?: {
-        x?: number;
-        y?: number;
-        width?: number;
-        height?: number;
-    }): void;
-    unregister(id: string): void;
-    focus(id: string): void;
-    minimize(id: string): void;
-    maximize(id: string, containerWidth: number, containerHeight: number): void;
-    restore(id: string): void;
-    close(id: string): void;
-    toggleMinimize(id: string): void;
-    move(id: string, x: number, y: number): void;
-    resize(id: string, width: number, height: number): void;
-    focusNext(): void;
-    focusPrevious(): void;
-    getWindow(id: string): WindowState | undefined;
-    getFocusedWindow(): WindowState | undefined;
-}
-export declare function createWindowManager(): WindowManagerState;
-//# sourceMappingURL=windowStore.svelte.d.ts.map

package/dist/windowing/windowStore.svelte.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"windowStore.svelte.d.ts","sourceRoot":"","sources":["../../src/windowing/windowStore.svelte.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,MAAM,WAAW,WAAW;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,6CAA6C;IAC7C,aAAa,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IAC9E,uBAAuB;IACvB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,kBAAkB;IAClC,QAAQ,CAAC,OAAO,EAAE,WAAW,EAAE,CAAC;IAChC,QAAQ,CACP,EAAE,EAAE,MAAM,EACV,KAAK,EAAE,MAAM,EACb,IAAI,CAAC,EAAE;QAAE,CAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,GAChE,IAAI,CAAC;IACR,UAAU,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,KAAK,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,QAAQ,CAAC,EAAE,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,EAAE,eAAe,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5E,OAAO,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,KAAK,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,cAAc,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7C,MAAM,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACxD,SAAS,IAAI,IAAI,CAAC;IAClB,aAAa,IAAI,IAAI,CAAC;IACtB,SAAS,CAAC,EAAE,EAAE,MAAM,GAAG,WAAW,GAAG,SAAS,CAAC;IAC/C,gBAAgB,IAAI,WAAW,GAAG,SAAS,CAAC;CAC5C;AAED,wBAAgB,mBAAmB,IAAI,kBAAkB,CAqKxD"}

package/dist/windowing/windowStore.svelte.js

@@ -1,170 +0,0 @@
-/**
- * Window Manager state — Svelte 5 runes-based reactive store.
- * Manages window lifecycle: open, focus, minimize, maximize, restore, close.
- * Counter-based z-index stacking; taskbar-aware focus cycling.
- */
-export function createWindowManager() {
-    const windows = $state([]);
-    let nextZ = $state(100);
-    function getIdx(id) {
-        return windows.findIndex((w) => w.id === id);
-    }
-    function setAllUnfocused() {
-        for (const w of windows) {
-            w.focused = false;
-        }
-    }
-    function focusNextVisible(excludeId) {
-        const visible = windows.filter((w) => !w.minimized && w.id !== excludeId);
-        if (visible.length === 0)
-            return;
-        const top = visible.reduce((a, b) => (a.zIndex > b.zIndex ? a : b));
-        setAllUnfocused();
-        top.focused = true;
-    }
-    return {
-        get windows() {
-            return windows;
-        },
-        register(id, title, opts) {
-            if (getIdx(id) >= 0)
-                return;
-            nextZ++;
-            setAllUnfocused();
-            windows.push({
-                id,
-                title,
-                minimized: false,
-                maximized: false,
-                focused: true,
-                zIndex: nextZ,
-                savedGeometry: null,
-                x: opts?.x ?? 0,
-                y: opts?.y ?? 0,
-                width: opts?.width ?? 400,
-                height: opts?.height ?? 300
-            });
-        },
-        unregister(id) {
-            const idx = getIdx(id);
-            if (idx < 0)
-                return;
-            windows.splice(idx, 1);
-            focusNextVisible();
-        },
-        focus(id) {
-            const win = windows[getIdx(id)];
-            if (!win || win.focused)
-                return;
-            nextZ++;
-            setAllUnfocused();
-            win.focused = true;
-            win.zIndex = nextZ;
-        },
-        minimize(id) {
-            const win = windows[getIdx(id)];
-            if (!win || win.minimized)
-                return;
-            win.minimized = true;
-            win.focused = false;
-            focusNextVisible(id);
-        },
-        maximize(id, containerWidth, containerHeight) {
-            const win = windows[getIdx(id)];
-            if (!win || win.maximized)
-                return;
-            win.savedGeometry = { x: win.x, y: win.y, width: win.width, height: win.height };
-            win.x = 0;
-            win.y = 0;
-            win.width = containerWidth;
-            win.height = containerHeight;
-            win.maximized = true;
-            nextZ++;
-            setAllUnfocused();
-            win.focused = true;
-            win.zIndex = nextZ;
-        },
-        restore(id) {
-            const win = windows[getIdx(id)];
-            if (!win)
-                return;
-            if (win.minimized) {
-                win.minimized = false;
-                nextZ++;
-                setAllUnfocused();
-                win.focused = true;
-                win.zIndex = nextZ;
-                return;
-            }
-            if (win.maximized && win.savedGeometry) {
-                win.x = win.savedGeometry.x;
-                win.y = win.savedGeometry.y;
-                win.width = win.savedGeometry.width;
-                win.height = win.savedGeometry.height;
-                win.savedGeometry = null;
-                win.maximized = false;
-            }
-        },
-        close(id) {
-            const idx = getIdx(id);
-            if (idx < 0)
-                return;
-            windows.splice(idx, 1);
-            focusNextVisible();
-        },
-        toggleMinimize(id) {
-            const win = windows[getIdx(id)];
-            if (!win)
-                return;
-            if (win.minimized) {
-                this.restore(id);
-            }
-            else if (win.focused) {
-                this.minimize(id);
-            }
-            else {
-                this.focus(id);
-            }
-        },
-        move(id, x, y) {
-            const win = windows[getIdx(id)];
-            if (!win || win.maximized)
-                return;
-            win.x = x;
-            win.y = y;
-        },
-        resize(id, width, height) {
-            const win = windows[getIdx(id)];
-            if (!win || win.maximized)
-                return;
-            win.width = width;
-            win.height = height;
-        },
-        focusNext() {
-            const visible = windows.filter((w) => !w.minimized);
-            if (visible.length <= 1)
-                return;
-            const sorted = [...visible].sort((a, b) => a.zIndex - b.zIndex);
-            const focusedIdx = sorted.findIndex((w) => w.focused);
-            const next = sorted[(focusedIdx + 1) % sorted.length];
-            if (next)
-                this.focus(next.id);
-        },
-        focusPrevious() {
-            const visible = windows.filter((w) => !w.minimized);
-            if (visible.length <= 1)
-                return;
-            const sorted = [...visible].sort((a, b) => a.zIndex - b.zIndex);
-            const focusedIdx = sorted.findIndex((w) => w.focused);
-            const prev = sorted[(focusedIdx - 1 + sorted.length) % sorted.length];
-            if (prev)
-                this.focus(prev.id);
-        },
-        getWindow(id) {
-            return windows[getIdx(id)];
-        },
-        getFocusedWindow() {
-            return windows.find((w) => w.focused);
-        }
-    };
-}