@signal9/era-ui 1.16.0 → 1.17.0

package/dist/os/window.svelte

@@ -2,6 +2,7 @@
 	import * as Pane from '../ui/pane';
 	import { Button } from '../ui/button';
 	import Minus from '@lucide/svelte/icons/minus';
+	import Square from '@lucide/svelte/icons/square';
 	import X from '@lucide/svelte/icons/x';
 	import { cn } from '../utils/index.js';
 	import { getWindowManager, type AppWindow } from './wm.svelte.js';
@@ -11,14 +12,14 @@
 	const wm = getWindowManager();
 	const focused = $derived(wm.focusedId === win.id);
 
-	// The window's single control closes on left-click and MINIMIZES on right-click
-	// (a shell has a taskbar to restore from, so no dedicated buttons). While the
-	// right button is held the glyph previews the minimize action; a left press
-	// keeps the X, so holding never implies minimize when the release will close.
-	// Like a native click, the minimize COMMITS on release, not press: right
-	// pointerdown only arms it (contextmenu is suppressed), right pointerup over
-	// the button fires it, and dragging off first cancels.
-	let minimizeHint = $state(false);
+	// The window's single control: left-click CLOSES, right-click MINIMIZES (the
+	// taskbar restores it), middle-click toggles MAXIMIZE — no dedicated buttons.
+	// While a non-primary button is held the glyph previews its action (minus /
+	// square); a left press keeps the ×, so holding never implies another action
+	// when the release will close. Like a native click, each action COMMITS on
+	// release, not press: the press only arms it (contextmenu / autoscroll are
+	// suppressed), pointerup over the button fires it, dragging off first cancels.
+	let armed = $state<'minimize' | 'maximize' | null>(null);
 
 	// z-index is set imperatively, NOT via a style="" prop: Pane positions itself
 	// by writing element.style.translate, and a whole-attribute style binding would
@@ -49,25 +50,34 @@
 		{/if}
 		<span class={cn('truncate text-body', focused ? 'text-bright' : 'text-muted')}>{win.title}</span
 		>
-		<!-- Close / minimize. data-pane-control so it clicks instead of dragging the pane. -->
+		<!-- Close / minimize / maximize. data-pane-control so it clicks instead of
+		     dragging the pane. -->
 		<div class="ml-auto shrink-0" data-pane-control>
 			<Button
 				icon
 				size="icon"
 				tone="destructive"
-				aria-label="Close (right-click to minimize)"
+				aria-label="Close (right-click minimizes, middle-click maximizes)"
 				onclick={() => wm.close(win.id)}
 				oncontextmenu={(e: MouseEvent) => e.preventDefault()}
-				onpointerdown={(e: PointerEvent) => (minimizeHint = e.button === 2)}
+				onpointerdown={(e: PointerEvent) => {
+					// Cancelling the middle pointerdown suppresses its compatibility
+					// mouse events, so the browser's autoscroll never engages.
+					if (e.button === 1) e.preventDefault();
+					armed = e.button === 2 ? 'minimize' : e.button === 1 ? 'maximize' : null;
+				}}
 				onpointerup={(e: PointerEvent) => {
-					if (e.button === 2 && minimizeHint) wm.minimize(win.id);
-					minimizeHint = false;
+					if (e.button === 2 && armed === 'minimize') wm.minimize(win.id);
+					else if (e.button === 1 && armed === 'maximize') wm.toggleMaximize(win.id);
+					armed = null;
 				}}
-				onpointerleave={() => (minimizeHint = false)}
-				onpointercancel={() => (minimizeHint = false)}
+				onpointerleave={() => (armed = null)}
+				onpointercancel={() => (armed = null)}
 			>
-				{#if minimizeHint}
+				{#if armed === 'minimize'}
 					<Minus class="size-(--era-h-xs)" />
+				{:else if armed === 'maximize'}
+					<Square class="size-(--era-h-xs)" />
 				{:else}
 					<X class="size-(--era-h-xs)" />
 				{/if}

package/dist/os/wm.svelte.d.ts

@@ -1,6 +1,6 @@
 import { type Component } from 'svelte';
 import type { IconProps } from '@lucide/svelte';
-export type WindowState = 'normal' | 'minimized';
+export type WindowState = 'normal' | 'minimized' | 'maximized';
 /** Snap targets: the four edges (halves) or four corners (quadrants). */
 export type SnapZone = 'left' | 'right' | 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 /** Props every app body receives — its own window record and the manager, so it
@@ -88,7 +88,11 @@ export declare class WindowManager {
     minimize(id: string): void;
     /** Taskbar behaviour: focus if not focused, else minimize; restore if minimized. */
     toggleMinimize(id: string): void;
-    /** Un-snap back to the pre-tile geometry (or just un-minimize). */
+    /** Fill the desktop bounds (middle-click on the window's ×). Keeps the first
+     *  pre-maximize/pre-snap snapshot so restore returns to the true origin. */
+    maximize(id: string): void;
+    toggleMaximize(id: string): void;
+    /** Un-maximize / un-snap back to the pre-change geometry (or just un-minimize). */
     restore(id: string): void;
     /** Half / quadrant tiling against the desktop bounds. */
     snap(id: string, zone: SnapZone): void;

package/dist/os/wm.svelte.js

@@ -95,7 +95,29 @@ export class WindowManager {
         else
             this.focus(id);
     }
-    /** Un-snap back to the pre-tile geometry (or just un-minimize). */
+    /** Fill the desktop bounds (middle-click on the window's ×). Keeps the first
+     *  pre-maximize/pre-snap snapshot so restore returns to the true origin. */
+    maximize(id) {
+        const w = this.#find(id);
+        if (!w)
+            return;
+        if (!w.restore)
+            w.restore = { pos: { ...w.pos }, size: w.size ? { ...w.size } : null };
+        w.pos = { x: 0, y: 0 };
+        w.size = { width: this.bounds.width, height: this.bounds.height };
+        w.state = 'maximized';
+        this.focus(id);
+    }
+    toggleMaximize(id) {
+        const w = this.#find(id);
+        if (!w)
+            return;
+        if (w.state === 'maximized')
+            this.restore(id);
+        else
+            this.maximize(id);
+    }
+    /** Un-maximize / un-snap back to the pre-change geometry (or just un-minimize). */
     restore(id) {
         const w = this.#find(id);
         if (!w)

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@signal9/era-ui",
-	"version": "1.16.0",
+	"version": "1.17.0",
 	"scripts": {
 		"dev": "vite dev --host",
 		"build": "vite build && npm run prepack",