@signal9/era-ui 1.17.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

@@ -4,6 +4,7 @@
 	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';
 
@@ -12,6 +13,32 @@
 	const wm = getWindowManager();
 	const focused = $derived(wm.focusedId === win.id);
 
+	// 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 /
@@ -35,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]',

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

@@ -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,8 +99,9 @@ export declare class WindowManager {
     minimize(id: string): void;
     /** Taskbar behaviour: focus if not focused, else minimize; restore if minimized. */
     toggleMinimize(id: string): void;
-    /** 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. */
+    /** 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). */

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,16 +101,21 @@ export class WindowManager {
         else
             this.focus(id);
     }
-    /** 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. */
+    /** 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 };
-        w.pos = { x: 0, y: 0 };
-        w.size = { width: this.bounds.width, height: this.bounds.height };
+        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);
     }

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.17.0",
+	"version": "1.18.0",
 	"scripts": {
 		"dev": "vite dev --host",
 		"build": "vite build && npm run prepack",