@signal9/era-ui 1.16.0 → 1.18.0

package/dist/os/taskbar.svelte

@@ -26,6 +26,16 @@
 	const wm = getWindowManager();
 	const notif = getNotifications();
 
+	// Register our height as reserved chrome: maximize stops above the bar, and
+	// drag containment keeps window bars reachable above it (not hidden behind).
+	let barHeight = $state(0);
+	$effect(() => {
+		wm.insets.bottom = barHeight;
+		return () => {
+			wm.insets.bottom = 0;
+		};
+	});
+
 	// Live clock (minute resolution is plenty; tick often enough to feel current).
 	let now = $state(new Date());
 	$effect(() => {
@@ -39,6 +49,7 @@
      at the bar's own tier (h-lg → rd-lg). The corners axis gates it for free:
      data-corners="square" zeroes --era-roundness-scale and with it rd-lg. -->
 <div
+	bind:clientHeight={barHeight}
 	class={cn(
 		'absolute inset-x-0 bottom-0 flex h-(--era-h-lg) items-center gap-(--era-gap) rounded-t-(--era-rd-lg) border-t border-divider-faded bg-(--era-surface-bg-elevated) px-(--era-inset-sm) shadow-(--era-shadow-lg) glass-blur',
 		LAYER.taskbar,

package/dist/os/window.svelte

@@ -2,7 +2,9 @@
 	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 type { Plugin } from '@neodrag/svelte';
 	import { cn } from '../utils/index.js';
 	import { getWindowManager, type AppWindow } from './wm.svelte.js';
 
@@ -11,14 +13,40 @@
 	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);
+	// Shell containment: a window can never become unrecoverable. The bar may not
+	// leave the TOP of the shell at all (y ≥ top inset), and on every other side
+	// at least wm.dragKeep px of the window must stay inside the work area (which
+	// excludes the taskbar — a strip hidden behind chrome would be just as lost).
+	// Clamped mid-drag the way neodrag's own bounds plugin does it: offset +
+	// proposed delta → clamp → re-propose the delta, so the cursor simply stops
+	// pulling at the fence instead of rubber-banding on release. Only a `drag`
+	// hook (width read live), and a STABLE plugin list — an inline array would
+	// change identity every render and make neodrag reconcile mid-session.
+	const shellClamp: Plugin = {
+		name: 'era:shell-clamp',
+		drag(ctx) {
+			const { width: W, height: H } = wm.bounds;
+			if (!W || !H) return;
+			const { top, right, bottom, left } = wm.insets;
+			const keep = wm.dragKeep;
+			const width = (ctx.rootNode as HTMLElement).offsetWidth;
+			const px = ctx.offset.x + (ctx.proposed.x ?? 0);
+			const py = ctx.offset.y + (ctx.proposed.y ?? 0);
+			const cx = Math.min(Math.max(px, left + keep - width), W - right - keep);
+			const cy = Math.min(Math.max(py, top), H - bottom - keep);
+			ctx.propose(cx - ctx.offset.x, cy - ctx.offset.y);
+		}
+	};
+	const windowPlugins = [shellClamp];
+
+	// 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
@@ -34,6 +62,7 @@
 	bind:position={win.pos}
 	bind:size={win.size}
 	resizable={win.resizable}
+	plugins={windowPlugins}
 	onpointerdowncapture={() => wm.focus(win.id)}
 	class={cn(
 		'transition-[box-shadow,opacity]',
@@ -49,25 +78,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
@@ -76,6 +76,17 @@ export declare class WindowManager {
         width: number;
         height: number;
     };
+    /** Edges reserved by chrome (the Taskbar registers its height as `bottom`).
+     *  The work area = bounds − insets; maximize and drag containment honour it. */
+    insets: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    /** Drag containment: a window's bar may never leave the top of the shell, and
+     *  at least this many px of it must stay reachable on every other side. */
+    dragKeep: number;
     /** The focused window = the top-most non-minimized one. */
     focusedId: string | null;
     register(app: AppDefinition): void;
@@ -88,7 +99,12 @@ 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 WORK AREA — bounds minus chrome insets, so a maximized window
+     *  doesn't hide under the taskbar (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

@@ -12,6 +12,12 @@ export class WindowManager {
     apps = $state.raw({});
     /** Desktop viewport size — set by the Desktop host; drives maximize / snap. */
     bounds = $state({ width: 0, height: 0 });
+    /** Edges reserved by chrome (the Taskbar registers its height as `bottom`).
+     *  The work area = bounds − insets; maximize and drag containment honour it. */
+    insets = $state({ top: 0, right: 0, bottom: 0, left: 0 });
+    /** Drag containment: a window's bar may never leave the top of the shell, and
+     *  at least this many px of it must stay reachable on every other side. */
+    dragKeep = 25;
     #z = 0;
     #seq = 0;
     /** The focused window = the top-most non-minimized one. */
@@ -95,7 +101,34 @@ export class WindowManager {
         else
             this.focus(id);
     }
-    /** Un-snap back to the pre-tile geometry (or just un-minimize). */
+    /** Fill the WORK AREA — bounds minus chrome insets, so a maximized window
+     *  doesn't hide under the taskbar (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 };
+        const { top, right, bottom, left } = this.insets;
+        w.pos = { x: left, y: top };
+        w.size = {
+            width: this.bounds.width - left - right,
+            height: this.bounds.height - top - bottom
+        };
+        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/dist/ui/pane/pane-root.svelte

@@ -83,6 +83,33 @@
 		}
 	};
 
+	// Replaces neodrag's DEFAULT threshold plugin (same name — the engine keys
+	// plugins by name, last one wins, and user plugins come after defaults). The
+	// default keeps its 3px click-vs-drag distance gate but ALSO cancels the drag
+	// when the first pointermove's target has escaped the dragged node — which is
+	// exactly what a fast flick does (the cursor out-runs the bar before the drag
+	// starts and captures the pointer), so quick grabs randomly never engaged.
+	// Same distance gate here, no containment bail: the pointerdown already
+	// decided eligibility (dragGate), where the cursor is one move later must not.
+	const flickSafeThreshold: Plugin = {
+		name: 'neodrag:threshold',
+		setup() {
+			return { x: 0, y: 0 };
+		},
+		shouldStart(_ctx, state: { x: number; y: number }, event) {
+			const e = event as PointerEvent;
+			state.x = e.clientX;
+			state.y = e.clientY;
+			return true;
+		},
+		drag(ctx, state: { x: number; y: number }, event) {
+			if (ctx.isDragging) return;
+			const e = event as PointerEvent;
+			// Clean clicks stay clicks: no drag until the pointer has moved > 3px.
+			if ((e.clientX - state.x) ** 2 + (e.clientY - state.y) ** 2 <= 9) ctx.preventStart();
+		}
+	};
+
 	// Ctrl held is ALSO tracked reactively — but only for the visual affordances
 	// (grab cursor, no text selection, inert tabs), never for the drag itself. If
 	// this lags the keypress, the drag still works (the gate reads the event); the
@@ -303,6 +330,8 @@
 		// Gates which pointerdown starts a drag: handle bar only, or the whole pane
 		// while Ctrl is held. Stateless — decided live off the event. See above.
 		dragGate,
+		// Overrides the default threshold by name — fast flicks must engage. See above.
+		flickSafeThreshold,
 		// Exposes data-neodrag-state="idle | dragging" on the root — the drag-only
 		// layer-promotion hook hangs off it.
 		stateMarker(),

package/package.json

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