From 4eac36792fc94b3587a907f2ca6ab6fdd08c7246 Mon Sep 17 00:00:00 2001
From: Unnati1007 <unnatijadon1007@gmail.com>
Date: Sun, 9 Aug 2026 23:19:22 +0530
Subject: [PATCH 1/2] fix(store): resolve async batch state leak and concurrent
 update rollback (fixes #8866)

---
 packages/store/src/store.test.ts |  36 +++++++
 packages/store/src/store.ts      | 159 ++++++++++++++++++++-----------
 2 files changed, 137 insertions(+), 58 deletions(-)

diff --git a/packages/store/src/store.test.ts b/packages/store/src/store.test.ts
index 9ebe844d0..0c83edc8e 100644
--- a/packages/store/src/store.test.ts
+++ b/packages/store/src/store.test.ts
@@ -548,6 +548,42 @@ describe('batch', () => {
         expect(useStore.getState()).toEqual({ a: 1, b: 2 })
     })
 
+    it('async batch does not leak batch context to concurrent non-batched updates (issue 8866)', async () => {
+        const useStore = createStore(() => ({ x: 0, y: 0 }))
+        const spy = vi.fn()
+        useStore.subscribe(spy)
+
+        let resolveBatch: () => void = () => {}
+        const p = batch(async () => {
+            useStore.setState({ x: 1 })
+            await new Promise<void>((resolve) => {
+                resolveBatch = resolve
+            })
+            useStore.setState({ x: 2 })
+        })
+
+        // While the batch is suspended, perform a non-batched update
+        useStore.setState({ y: 10 })
+
+        // The non-batched update should apply immediately and trigger listeners,
+        // because the async batch should not leak its batching context to concurrent tasks
+        expect(useStore.getState().y).toBe(10)
+        expect(spy).toHaveBeenCalledOnce()
+        expect(spy.mock.calls[0][0]).toEqual({ x: 0, y: 10 }) // x is still 0 (deferred), y is 10 (applied)
+
+        spy.mockClear()
+
+        // Resolve the batch
+        resolveBatch()
+        await p
+        await new Promise(resolve => queueMicrotask(resolve))
+
+        // The batch should now complete and notify
+        expect(useStore.getState()).toEqual({ x: 2, y: 10 })
+        expect(spy).toHaveBeenCalledOnce()
+        expect(spy.mock.calls[0][0]).toEqual({ x: 2, y: 10 })
+    })
+
 describe('middleware', () => {
     it('middleware is called during setState', () => {
         const spy = vi.fn((prev, update, next) => next(update))
diff --git a/packages/store/src/store.ts b/packages/store/src/store.ts
index 7b2250fb4..c7a3d7edd 100644
--- a/packages/store/src/store.ts
+++ b/packages/store/src/store.ts
@@ -24,6 +24,7 @@ import { useState, useEffect, useRef } from '@termuijs/jsx';
 import * as path from 'node:path';
 import * as fs from 'node:fs';
 import * as os from 'node:os';
+import { AsyncLocalStorage } from 'node:async_hooks';
 import type { EqualityFn } from './shallow.js'
 
 
@@ -37,11 +38,14 @@ interface BatchEntry<T> {
     rollback: () => void;
 }
 
-let _batchDepth = 0;
-let _batchEpoch = 0;
-// Map store instance to batch entry. Using any for listener set type because
-// the batch mechanism operates on the raw Set<Listener<T>> without knowing T at this level.
-const _batchStores = new Map<Set<any>, BatchEntry<any>>();
+interface BatchContext {
+    depth: number;
+}
+
+const batchLocalStorage = new AsyncLocalStorage<BatchContext>();
+const globalBatchStores = new Map<Set<any>, BatchEntry<any>>();
+let globalBatchEpoch = 0;
+
 /**
  * Batch multiple state updates into a single render pass.
  *
@@ -63,60 +67,96 @@ const _batchStores = new Map<Set<any>, BatchEntry<any>>();
  * ```
  */
 export function batch<T>(fn: () => T): T {
-    const isOutermost = _batchDepth === 0;
-    _batchDepth++;
-    if (isOutermost) _batchEpoch++;
-    let threw = false;
-    let res: any;
-    try {
-        res = fn();
-    } catch (err) {
-        threw = true;
-        _batchDepth--;
-        if (_batchDepth === 0) {
-            flushBatch(threw);
+    const parentContext = batchLocalStorage.getStore();
+    
+    if (parentContext) {
+        parentContext.depth++;
+        try {
+            const res = fn();
+            // Cast res through unknown to Promise<unknown> to safely check if it is a thenable (Promise) without type errors on generic T
+            if (res && typeof (res as unknown as Promise<unknown>).then === 'function') {
+                // Cast through unknown to Promise<unknown> to chain the then callback before returning
+                return (res as unknown as Promise<unknown>).then(
+                    (val) => {
+                        parentContext.depth--;
+                        if (parentContext.depth === 0) flushBatch(false, true);
+                        return val;
+                    },
+                    (err) => {
+                        parentContext.depth--;
+                        if (parentContext.depth === 0) flushBatch(true, true);
+                        throw err;
+                    }
+                ) as T;
+            } else {
+                parentContext.depth--;
+                if (parentContext.depth === 0) {
+                    flushBatch(false);
+                }
+                return res;
+            }
+        } catch (err) {
+            parentContext.depth--;
+            if (parentContext.depth === 0) {
+                flushBatch(true);
+            }
+            throw err;
         }
-        throw err;
     }
 
-    if (res && typeof res.then === 'function') {
-        return (res as Promise<any>).then(
-            (val) => {
-                _batchDepth--;
-                if (_batchDepth === 0) flushBatch(false, true);
-                return val;
-            },
-            (err) => {
-                _batchDepth--;
-                if (_batchDepth === 0) flushBatch(true, true);
-                throw err;
+    globalBatchEpoch++;
+    const context: BatchContext = {
+        depth: 1
+    };
+
+    return batchLocalStorage.run(context, () => {
+        try {
+            const res = fn();
+            // Cast res through unknown to Promise<unknown> to safely check if it is a thenable (Promise) without type errors on generic T
+            if (res && typeof (res as unknown as Promise<unknown>).then === 'function') {
+                // Cast through unknown to Promise<unknown> to chain the then callback before returning
+                return (res as unknown as Promise<unknown>).then(
+                    (val) => {
+                        context.depth--;
+                        if (context.depth === 0) flushBatch(false, true);
+                        return val;
+                    },
+                    (err) => {
+                        context.depth--;
+                        if (context.depth === 0) flushBatch(true, true);
+                        throw err;
+                    }
+                ) as T;
+            } else {
+                context.depth--;
+                if (context.depth === 0) {
+                    flushBatch(false);
+                }
+                return res;
             }
-        ) as T;
-    } else {
-        _batchDepth--;
-        if (_batchDepth === 0) {
-            flushBatch(false);
+        } catch (err) {
+            context.depth--;
+            if (context.depth === 0) {
+                flushBatch(true);
+            }
+            throw err;
         }
-        return res;
-    }
+    });
 }
 
 function flushBatch(threw: boolean, immediate = false) {
     if (threw) {
-        for (const [, { rollback }] of _batchStores) {
+        for (const [, { rollback }] of globalBatchStores) {
             rollback();
         }
-        _batchStores.clear();
+        globalBatchStores.clear();
     } else {
-        if (_batchStores.size === 0) return;
-        // Snapshot the current epoch so the microtask can bail out if a new
-        // batch has started before it runs.
-        const epochAtFlush = _batchEpoch;
+        if (globalBatchStores.size === 0) return;
+        const epochAtFlush = globalBatchEpoch;
         const notify = () => {
-            // A new batch started between flush and notify — skip.
-            if (_batchEpoch !== epochAtFlush) return;
-            const stores = Array.from(_batchStores.entries());
-            _batchStores.clear();
+            if (globalBatchEpoch !== epochAtFlush) return;
+            const stores = Array.from(globalBatchStores.entries());
+            globalBatchStores.clear();
             const newStates = new Map<Set<any>, any>();
             for (const [listeners, { commit }] of stores) {
                 newStates.set(listeners, commit());
@@ -387,16 +427,17 @@ export function createStore<T extends object>(
 
     const setState: SetState<T> = (partial) => {
         const prevState = state;
+        const context = batchLocalStorage.getStore();
 
         // When in a batch, function updaters should see the pending batch state
-        const batchState: T = _batchDepth > 0 ? _batchStores.get(listeners)?.nextState ?? state : state;
+        const batchState: T = context && context.depth > 0 ? globalBatchStores.get(listeners)?.nextState ?? state : state;
         const nextPartial = typeof partial === 'function'
             ? (partial as (state: T) => Partial<T>)(batchState)
             : partial;
 
         const applyUpdate = (finalPartial: Partial<T>): T => {
             // When in a batch, compute nextState from pending batch state if available
-            const baseState: T = _batchDepth > 0 ? _batchStores.get(listeners)?.nextState ?? state : state;
+            const baseState: T = context && context.depth > 0 ? globalBatchStores.get(listeners)?.nextState ?? state : state;
             const nextState = { ...baseState, ...finalPartial };
 
             // Only notify if at least one key's value actually changed
@@ -405,14 +446,14 @@ export function createStore<T extends object>(
                 key => !Object.is((baseState as any)[key], (nextState as any)[key])
             );
             if (hasChanged) {
-                if (_batchDepth > 0) {
+                if (context && context.depth > 0) {
                     // We're in a batch: defer listener notifications and track the final state
-                    const existing = _batchStores.get(listeners);
+                    const existing = globalBatchStores.get(listeners);
                     if (!existing) {
                         // Track only the keys changed inside the batch so commit can merge
                         // onto any intermediate non-batched updates without overwriting them.
                         const changes: Partial<T> = { ...finalPartial };
-                        _batchStores.set(listeners, {
+                        globalBatchStores.set(listeners, {
                             prevState,
                             nextState,
                             changes,
@@ -461,8 +502,9 @@ export function createStore<T extends object>(
     };
 
     const getState: GetState<T> = () => {
-        if (_batchDepth > 0) {
-            const entry = _batchStores.get(listeners);
+        const context = batchLocalStorage.getStore();
+        if (context && context.depth > 0) {
+            const entry = globalBatchStores.get(listeners);
             if (entry) return entry.nextState;
         }
         return state;
@@ -495,7 +537,7 @@ export function createStore<T extends object>(
     };
 
     const destroy = (): void => {
-        _batchStores.delete(listeners);
+        globalBatchStores.delete(listeners);
         listeners.clear();
         if (writeTimeout) {
             clearTimeout(writeTimeout);
@@ -504,16 +546,17 @@ export function createStore<T extends object>(
     };
     const mutate = (recipe: (draft: T) => void): void => {
         const prevState = state;
+        const context = batchLocalStorage.getStore();
         // When in a batch, produce from pending batch state
-        const baseState: T = _batchDepth > 0 ? _batchStores.get(listeners)?.nextState ?? state : state;
+        const baseState: T = context && context.depth > 0 ? globalBatchStores.get(listeners)?.nextState ?? state : state;
         const nextState = produce(baseState, (draft) => {
             recipe(draft as T);
         });
         if (Object.is(baseState, nextState)) {
             return;
         }
-        if (_batchDepth > 0) {
-            const existing = _batchStores.get(listeners);
+        if (context && context.depth > 0) {
+            const existing = globalBatchStores.get(listeners);
             // Compute which keys actually changed so commit can merge instead of replace
             const changedKeys = Object.keys(nextState).filter(
                 k => !Object.is((nextState as any)[k], (baseState as any)[k])
@@ -523,7 +566,7 @@ export function createStore<T extends object>(
                 (changes as any)[k] = (nextState as any)[k];
             }
             if (!existing) {
-                _batchStores.set(listeners, {
+                globalBatchStores.set(listeners, {
                     prevState,
                     nextState,
                     changes,

From 0d422e58f826667d4946da99b4c960a364c0ad03 Mon Sep 17 00:00:00 2001
From: Unnati1007 <unnatijadon1007@gmail.com>
Date: Sun, 9 Aug 2026 23:26:10 +0530
Subject: [PATCH 2/2] feat(ui): add Window and WindowManager components

---
 packages/ui/src/Window.test.ts   | 105 ++++++++++++
 packages/ui/src/Window.ts        | 261 +++++++++++++++++++++++++++++
 packages/ui/src/WindowManager.ts | 279 +++++++++++++++++++++++++++++++
 packages/ui/src/index.ts         |   5 +
 4 files changed, 650 insertions(+)
 create mode 100644 packages/ui/src/Window.test.ts
 create mode 100644 packages/ui/src/Window.ts
 create mode 100644 packages/ui/src/WindowManager.ts

diff --git a/packages/ui/src/Window.test.ts b/packages/ui/src/Window.test.ts
new file mode 100644
index 000000000..754575d08
--- /dev/null
+++ b/packages/ui/src/Window.test.ts
@@ -0,0 +1,105 @@
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { Screen, caps } from '@termuijs/core';
+import { Text } from '@termuijs/widgets';
+import { Window } from './Window.js';
+import { WindowManager } from './WindowManager.js';
+
+describe('Window and WindowManager', () => {
+    afterEach(() => {
+        vi.restoreAllMocks();
+    });
+
+    describe('Window constructor & properties', () => {
+        it('initializes with default options', () => {
+            const win = new Window({ title: 'Test Window' });
+            expect(win.title).toBe('Test Window');
+            expect(win.windowX).toBe(0);
+            expect(win.windowY).toBe(0);
+            expect(win.windowWidth).toBe(30);
+            expect(win.windowHeight).toBe(10);
+            expect(win.isMinimized).toBe(false);
+            expect(win.isMaximized).toBe(false);
+            expect(win.isClosed).toBe(false);
+        });
+
+        it('can minimize and maximize', () => {
+            const win = new Window({ x: 2, y: 3, width: 20, height: 10 });
+            win.minimize();
+            expect(win.isMinimized).toBe(true);
+
+            win.maximize();
+            expect(win.isMaximized).toBe(true);
+            win.maximize();
+            expect(win.isMaximized).toBe(false);
+            expect(win.windowX).toBe(2);
+            expect(win.windowY).toBe(3);
+        });
+    });
+
+    describe('Window click target resolution', () => {
+        it('identifies click targets in the header', () => {
+            const win = new Window({
+                width: 20,
+                height: 10,
+                closable: true,
+                maximizable: true,
+                minimizable: true,
+            });
+            // Update widget rect so size-dependent offsets resolve correctly
+            win.updateRect({ x: 0, y: 0, width: 20, height: 10 });
+
+            // Right border is at x=19. Closable at x=18, Maximizable at x=16, Minimizable at x=14
+            expect(win.getClickTarget(18, 0)).toBe('close');
+            expect(win.getClickTarget(16, 0)).toBe('maximize');
+            expect(win.getClickTarget(14, 0)).toBe('minimize');
+            expect(win.getClickTarget(5, 0)).toBe('title');
+            expect(win.getClickTarget(5, 1)).toBeNull();
+        });
+    });
+
+    describe('WindowManager rendering and z-stack', () => {
+        it('adds windows and orders them on front click', () => {
+            const wm = new WindowManager();
+            const win1 = new Window({ title: 'Win 1' });
+            const win2 = new Window({ title: 'Win 2' });
+
+            wm.addWindow(win1);
+            wm.addWindow(win2);
+
+            expect(wm.children[0]).toBe(win1);
+            expect(wm.children[1]).toBe(win2);
+
+            // Trigger mouse down simulating a click on win1 to bring to front
+            win1.updateRect({ x: 0, y: 0, width: 10, height: 10 });
+            win2.updateRect({ x: 15, y: 15, width: 10, height: 10 });
+            wm.updateRect({ x: 0, y: 0, width: 40, height: 40 });
+
+            // Simulate mousedown at x=2, y=2 (hitting win1)
+            const mousedownEvent = { x: 2, y: 2, type: 'mousedown' as const, button: 'left' as const };
+            (wm as any)._handleGlobalMouse(mousedownEvent);
+
+            expect(wm.children[0]).toBe(win2);
+            expect(wm.children[1]).toBe(win1);
+            expect(win1.isFocused).toBe(true);
+            expect(win2.isFocused).toBe(false);
+        });
+
+        it('syncs window content positions', () => {
+            vi.spyOn(caps, 'unicode', 'get').mockReturnValue(true);
+            const wm = new WindowManager();
+            const win = new Window({ title: 'Test', x: 2, y: 3, width: 10, height: 10 });
+            const txt = new Text('Inner text', { flexGrow: 1 });
+            win.addChild(txt);
+            wm.addWindow(win);
+
+            wm.updateRect({ x: 0, y: 0, width: 40, height: 40 });
+            wm.syncLayout();
+
+            // Window absolute position should be: x = 2, y = 3
+            expect(win.rect).toEqual({ x: 2, y: 3, width: 10, height: 10 });
+
+            // Content area should start at: x = 2+1 = 3, y = 3+2 = 5
+            expect(txt.rect).toEqual({ x: 3, y: 5, width: 8, height: 7 });
+        });
+    });
+});
diff --git a/packages/ui/src/Window.ts b/packages/ui/src/Window.ts
new file mode 100644
index 000000000..bbd5275c2
--- /dev/null
+++ b/packages/ui/src/Window.ts
@@ -0,0 +1,261 @@
+import { Widget } from '@termuijs/widgets';
+import {
+    type Style,
+    type Screen,
+    type Rect,
+    type MouseEvent as TermMouseEvent,
+    mergeStyles,
+    defaultStyle,
+    styleToCellAttrs,
+    getBorderChars,
+    caps,
+} from '@termuijs/core';
+
+export interface WindowOptions {
+    title?: string;
+    x?: number;
+    y?: number;
+    width?: number;
+    height?: number;
+    minWidth?: number;
+    minHeight?: number;
+    draggable?: boolean;
+    resizable?: boolean;
+    minimizable?: boolean;
+    maximizable?: boolean;
+    closable?: boolean;
+}
+
+export class Window extends Widget {
+    public windowX: number;
+    public windowY: number;
+    public windowWidth: number;
+    public windowHeight: number;
+
+    private _title: string;
+    private _minWidth: number;
+    private _minHeight: number;
+    private _draggable: boolean;
+    private _resizable: boolean;
+    private _minimizable: boolean;
+    private _maximizable: boolean;
+    private _closable: boolean;
+
+    public isMinimized = false;
+    public isMaximized = false;
+    public isClosed = false;
+
+    // Track original bounds before maximization
+    private _prevX = 0;
+    private _prevY = 0;
+    private _prevWidth = 0;
+    private _prevHeight = 0;
+
+    constructor(options: WindowOptions = {}, style?: Partial<Style>) {
+        // Set visible border style to none because we will draw the border manually in _renderSelf
+        super(
+            mergeStyles(
+                defaultStyle(),
+                {
+                    border: 'none',
+                    padding: { top: 0, bottom: 0, left: 0, right: 0 },
+                    ...style,
+                }
+            )
+        );
+
+        this.windowX = options.x ?? 0;
+        this.windowY = options.y ?? 0;
+        this.windowWidth = options.width ?? 30;
+        this.windowHeight = options.height ?? 10;
+        this._title = options.title ?? '';
+        this._minWidth = options.minWidth ?? 15;
+        this._minHeight = options.minHeight ?? 5;
+        this._draggable = options.draggable ?? true;
+        this._resizable = options.resizable ?? true;
+        this._minimizable = options.minimizable ?? true;
+        this._maximizable = options.maximizable ?? true;
+        this._closable = options.closable ?? true;
+    }
+
+    get title(): string {
+        return this._title;
+    }
+
+    set title(value: string) {
+        this._title = value;
+        this.markDirty();
+    }
+
+    get draggable(): boolean {
+        return this._draggable;
+    }
+
+    get resizable(): boolean {
+        return this._resizable;
+    }
+
+    get minWidth(): number {
+        return this._minWidth;
+    }
+
+    get minHeight(): number {
+        return this._minHeight;
+    }
+
+    minimize(): void {
+        this.isMinimized = !this.isMinimized;
+        this.markDirty();
+    }
+
+    maximize(): void {
+        if (!this.isMaximized) {
+            // Save state
+            this._prevX = this.windowX;
+            this._prevY = this.windowY;
+            this._prevWidth = this.windowWidth;
+            this._prevHeight = this.windowHeight;
+            this.isMaximized = true;
+        } else {
+            this.windowX = this._prevX;
+            this.windowY = this._prevY;
+            this.windowWidth = this._prevWidth;
+            this.windowHeight = this._prevHeight;
+            this.isMaximized = false;
+        }
+        this.markDirty();
+    }
+
+    close(): void {
+        this.isClosed = true;
+        this.setStyle({ visible: false });
+        if (this.parent) {
+            this.parent.removeChild(this);
+        }
+    }
+
+    /**
+     * Expose content area details for layout calculation.
+     */
+    getContentRect(): Rect {
+        const { x, y, width, height } = this._rect;
+        const currentHeight = this.isMinimized ? 1 : height;
+        return {
+            x: x + 1,
+            y: y + 2,
+            width: Math.max(0, width - 2),
+            height: Math.max(0, currentHeight - 3),
+        };
+    }
+
+    /**
+     * Checks if a mouse click targets a control button in the title bar.
+     * Returns: 'minimize' | 'maximize' | 'close' | 'title' | null
+     */
+    getClickTarget(localX: number, localY: number): 'minimize' | 'maximize' | 'close' | 'title' | null {
+        if (localY !== 0) return null;
+
+        const w = this._rect.width;
+        let rightOffset = w - 2;
+
+        if (this._closable) {
+            if (localX === rightOffset) return 'close';
+            rightOffset -= 2;
+        }
+        if (this._maximizable) {
+            if (localX === rightOffset) return 'maximize';
+            rightOffset -= 2;
+        }
+        if (this._minimizable) {
+            if (localX === rightOffset) return 'minimize';
+        }
+
+        if (localX >= 1 && localX < w - 1) {
+            return 'title';
+        }
+
+        return null;
+    }
+
+    protected _renderSelf(screen: Screen): void {
+        if (this.isClosed) return;
+
+        const { x, y, width, height } = this._rect;
+        const currentHeight = this.isMinimized ? 1 : height;
+        if (width < 2 || currentHeight < 1) return;
+
+        const useUnicode = caps.unicode;
+        const borderChars = getBorderChars('single', undefined, !useUnicode);
+        if (!borderChars) return;
+
+        const cellAttrs = styleToCellAttrs(this.style);
+        
+        // Highlight active/focused window borders
+        const borderColor = this.isFocused
+            ? (this.style.focusRingColor ?? { type: 'named', name: 'cyan' })
+            : (this.style.borderColor ?? cellAttrs.fg);
+
+        const borderStyle = { ...cellAttrs, fg: borderColor };
+
+        // 1. Draw Title Bar / Top Border
+        screen.setCell(x, y, { char: borderChars.topLeft, ...borderStyle });
+        for (let col = 1; col < width - 1; col++) {
+            screen.setCell(x + col, y, { char: borderChars.top, ...borderStyle });
+        }
+        screen.setCell(x + width - 1, y, { char: borderChars.topRight, ...borderStyle });
+
+        // Draw title text
+        let titleText = this._title;
+        if (titleText) {
+            titleText = ` ${titleText} `;
+            const maxTitleLen = width - 10;
+            if (titleText.length > maxTitleLen) {
+                titleText = titleText.slice(0, Math.max(3, maxTitleLen)) + '…';
+            }
+            screen.writeString(x + 2, y, titleText, {
+                ...borderStyle,
+                bold: this.isFocused,
+            });
+        }
+
+        // Draw window controls
+        let controlOffset = width - 2;
+        if (this._closable) {
+            screen.writeString(x + controlOffset, y, '×', { ...borderStyle, bold: true });
+            controlOffset -= 2;
+        }
+        if (this._maximizable) {
+            screen.writeString(x + controlOffset, y, this.isMaximized ? '⧉' : '▢', borderStyle);
+            controlOffset -= 2;
+        }
+        if (this._minimizable) {
+            screen.writeString(x + controlOffset, y, '_', borderStyle);
+        }
+
+        if (this.isMinimized) {
+            return; // Don't render body if minimized
+        }
+
+        // 2. Draw Sides and Background
+        const bodyBgStyle = { ...cellAttrs };
+        for (let row = 1; row < height - 1; row++) {
+            screen.setCell(x, y + row, { char: borderChars.left, ...borderStyle });
+            screen.writeString(x + 1, y + row, ' '.repeat(width - 2), bodyBgStyle);
+            screen.setCell(x + width - 1, y + row, { char: borderChars.right, ...borderStyle });
+        }
+
+        // 3. Draw Bottom Border
+        screen.setCell(x, y + height - 1, { char: borderChars.bottomLeft, ...borderStyle });
+        for (let col = 1; col < width - 1; col++) {
+            screen.setCell(x + col, y + height - 1, { char: borderChars.bottom, ...borderStyle });
+        }
+        screen.setCell(x + width - 1, y + height - 1, { char: borderChars.bottomRight, ...borderStyle });
+
+        // Draw content area children
+        const contentRect = this.getContentRect();
+        for (const child of this._children) {
+            child.updateRect(contentRect);
+            child.render(screen);
+        }
+    }
+}
diff --git a/packages/ui/src/WindowManager.ts b/packages/ui/src/WindowManager.ts
new file mode 100644
index 000000000..f56e7cb4c
--- /dev/null
+++ b/packages/ui/src/WindowManager.ts
@@ -0,0 +1,279 @@
+import { Widget } from '@termuijs/widgets';
+import {
+    type Style,
+    type Screen,
+    type LayoutNode,
+    type MouseEvent as TermMouseEvent,
+    mergeStyles,
+    defaultStyle,
+    createLayoutNode,
+    InputParser,
+    computeLayout,
+    styleToCellAttrs,
+} from '@termuijs/core';
+import { Window } from './Window.js';
+
+export class WindowManager extends Widget {
+    private _globalInput: InputParser | null = null;
+    private _unsubGlobalMouse: (() => void) | null = null;
+
+    private _dragState: {
+        mode: 'drag' | 'resize' | null;
+        win: Window | null;
+        startX: number;
+        startY: number;
+        winStartX: number;
+        winStartY: number;
+        winStartWidth: number;
+        winStartHeight: number;
+        resizeDirection: 'both' | 'horizontal' | 'vertical' | null;
+    } = {
+        mode: null,
+        win: null,
+        startX: 0,
+        startY: 0,
+        winStartX: 0,
+        winStartY: 0,
+        winStartWidth: 0,
+        winStartHeight: 0,
+        resizeDirection: null,
+    };
+
+    constructor(style?: Partial<Style>) {
+        super(mergeStyles(defaultStyle(), { display: 'flex', ...style }));
+    }
+
+    addWindow(window: Window): void {
+        this.addChild(window);
+        this._focusWindow(window);
+    }
+
+    private _focusWindow(window: Window): void {
+        const idx = this._children.indexOf(window);
+        if (idx >= 0) {
+            // Move to end of children list to render on top
+            this._children.splice(idx, 1);
+            this._children.push(window);
+
+            // Set focus highlight
+            for (const child of this._children) {
+                if (child instanceof Window) {
+                    child.isFocused = (child === window);
+                }
+            }
+            this.markDirty();
+        }
+    }
+
+    override mount(): void {
+        super.mount();
+        this._globalInput = new InputParser(process.stdin);
+        this._globalInput.start();
+        this._unsubGlobalMouse = this._globalInput.onMouse((event: TermMouseEvent) => this._handleGlobalMouse(event));
+    }
+
+    override unmount(): void {
+        this._unsubGlobalMouse?.();
+        this._unsubGlobalMouse = null;
+        this._globalInput?.stop();
+        this._globalInput = null;
+        super.unmount();
+    }
+
+    private _handleGlobalMouse(event: TermMouseEvent): void {
+        const { x: managerX, y: managerY, width: managerW, height: managerH } = this._rect;
+
+        if (event.type === 'mousedown') {
+            // Find which window was clicked (last to first child, i.e., top-most rendered)
+            for (let i = this._children.length - 1; i >= 0; i--) {
+                const child = this._children[i];
+                if (child instanceof Window && !child.isClosed) {
+                    const localX = event.x - child.rect.x;
+                    const localY = event.y - child.rect.y;
+
+                    // Hit test the window bounds
+                    if (
+                        event.x >= child.rect.x &&
+                        event.x < child.rect.x + child.rect.width &&
+                        event.y >= child.rect.y &&
+                        event.y < child.rect.y + (child.isMinimized ? 1 : child.rect.height)
+                    ) {
+                        this._focusWindow(child);
+
+                        // Check controls on title bar
+                        const target = child.getClickTarget(localX, localY);
+                        if (target === 'close') {
+                            child.close();
+                            return;
+                        } else if (target === 'minimize') {
+                            child.minimize();
+                            return;
+                        } else if (target === 'maximize') {
+                            child.maximize();
+                            return;
+                        } else if (target === 'title' && child.draggable) {
+                            // Start dragging
+                            this._dragState = {
+                                mode: 'drag',
+                                win: child,
+                                startX: event.x,
+                                startY: event.y,
+                                winStartX: child.windowX,
+                                winStartY: child.windowY,
+                                winStartWidth: child.windowWidth,
+                                winStartHeight: child.windowHeight,
+                                resizeDirection: null,
+                            };
+                            return;
+                        }
+
+                        // Check resizing boundaries
+                        if (child.resizable && !child.isMaximized && !child.isMinimized) {
+                            const onRight = (localX === child.rect.width - 1);
+                            const onBottom = (localY === child.rect.height - 1);
+
+                            if (onRight || onBottom) {
+                                this._dragState = {
+                                    mode: 'resize',
+                                    win: child,
+                                    startX: event.x,
+                                    startY: event.y,
+                                    winStartX: child.windowX,
+                                    winStartY: child.windowY,
+                                    winStartWidth: child.windowWidth,
+                                    winStartHeight: child.windowHeight,
+                                    resizeDirection: (onRight && onBottom) ? 'both' : onRight ? 'horizontal' : 'vertical',
+                                };
+                                return;
+                            }
+                        }
+
+                        // Clicked inside the window content
+                        return;
+                    }
+                }
+            }
+        } else if (event.type === 'mousemove') {
+            const drag = this._dragState;
+            if (drag.mode && drag.win) {
+                const dx = event.x - drag.startX;
+                const dy = event.y - drag.startY;
+
+                if (drag.mode === 'drag') {
+                    // Update relative position and clamp title bar within manager boundary
+                    const nextX = drag.winStartX + dx;
+                    const nextY = drag.winStartY + dy;
+                    
+                    drag.win.windowX = Math.max(0, Math.min(managerW - 3, nextX));
+                    drag.win.windowY = Math.max(0, Math.min(managerH - 1, nextY));
+                } else if (drag.mode === 'resize') {
+                    const direction = drag.resizeDirection;
+                    if (direction === 'both' || direction === 'horizontal') {
+                        const nextW = drag.winStartWidth + dx;
+                        drag.win.windowWidth = Math.max(drag.win.minWidth, nextW);
+                    }
+                    if (direction === 'both' || direction === 'vertical') {
+                        const nextH = drag.winStartHeight + dy;
+                        drag.win.windowHeight = Math.max(drag.win.minHeight, nextH);
+                    }
+                }
+                this.markDirty();
+            }
+        } else if (event.type === 'mouseup') {
+            this._dragState = {
+                mode: null,
+                win: null,
+                startX: 0,
+                startY: 0,
+                winStartX: 0,
+                winStartY: 0,
+                winStartWidth: 0,
+                winStartHeight: 0,
+                resizeDirection: null,
+            };
+        }
+    }
+
+    private _managerLayoutNode: LayoutNode | null = null;
+
+    override getLayoutNode(): LayoutNode {
+        // Return a node for ourselves, but bypass Flexbox laying out our windows
+        if (this._managerLayoutNode) {
+            this._managerLayoutNode.style = this._style;
+            this._managerLayoutNode.children = [];
+        } else {
+            this._managerLayoutNode = createLayoutNode(this.id, this._style, []);
+        }
+        return this._managerLayoutNode;
+    }
+
+    override syncLayout(): void {
+        super.syncLayout(); // Syncs WindowManager's computed rect
+
+        const { x: managerX, y: managerY, width: managerW, height: managerH } = this._rect;
+
+        for (const child of this._children) {
+            if (child instanceof Window && !child.isClosed) {
+                let winX = child.windowX;
+                let winY = child.windowY;
+                let winW = child.windowWidth;
+                let winH = child.windowHeight;
+
+                if (child.isMaximized) {
+                    winX = 0;
+                    winY = 0;
+                    winW = managerW;
+                    winH = managerH;
+                } else if (child.isMinimized) {
+                    winH = 1;
+                }
+
+                // Apply absolute computed bounds to the Window
+                child.updateRect({
+                    x: managerX + winX,
+                    y: managerY + winY,
+                    width: winW,
+                    height: winH,
+                });
+
+                // Compute layout of the Window's children using its content region as the viewport
+                const contentRect = child.getContentRect();
+                const winLayoutNode = child.getLayoutNode();
+                
+                computeLayout(winLayoutNode, contentRect.width, contentRect.height);
+
+                // Shift child coordinates from relative content space to absolute screen space
+                const shiftCoordinates = (node: any, dx: number, dy: number) => {
+                    node.computed.x += dx;
+                    node.computed.y += dy;
+                    for (const c of node.children) {
+                        shiftCoordinates(c, dx, dy);
+                    }
+                };
+
+                for (const c of winLayoutNode.children) {
+                    shiftCoordinates(c, contentRect.x, contentRect.y);
+                }
+
+                // Restore Window's own layout node to its absolute screen bounds
+                winLayoutNode.computed = {
+                    x: managerX + winX,
+                    y: managerY + winY,
+                    width: winW,
+                    height: winH,
+                };
+
+                child.syncLayout();
+            }
+        }
+    }
+
+    protected _renderSelf(screen: Screen): void {
+        // WindowManager acts as a transparent backdrop container
+        const { x, y, width, height } = this._rect;
+        const cellAttrs = styleToCellAttrs(this.style);
+        for (let row = 0; row < height; row++) {
+            screen.writeString(x, y + row, ' '.repeat(width), cellAttrs);
+        }
+    }
+}
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index 1fd5a3585..85f56f038 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -248,3 +248,8 @@ export type { WelcomeScreenOptions, KeymapHint } from './WelcomeScreen.js';
 export { SetupFlow } from './SetupFlow.js';
 export type { SetupFlowOptions, SetupStep } from './SetupFlow.js';
 
+export { Window } from './Window.js';
+export type { WindowOptions } from './Window.js';
+export { WindowManager } from './WindowManager.js';
+
+