@signal9/era-ui 2.4.0 → 2.6.0

package/dist/os/desktop.svelte

@@ -34,14 +34,46 @@
 	// Feed the live viewport size to the store so maximize / snap have real bounds.
 	let w = $state(0);
 	let h = $state(0);
+	let ref = $state<HTMLDivElement | null>(null);
+
+	// Selection containment: a text drag that starts in one window must never
+	// bleed into its neighbours — while the primary button is down, every
+	// OTHER window goes user-select:none, restored on release. The browser has
+	// no cross-window selection fence (user-select: contain never shipped), so
+	// this is the whole mechanism.
+	function containSelection(e: PointerEvent) {
+		if (e.button !== 0 || !ref) return;
+		const origin = (e.target as Element | null)?.closest?.('[data-window]');
+		if (!origin) return;
+		const muted: HTMLElement[] = [];
+		for (const el of ref.querySelectorAll<HTMLElement>('[data-window]')) {
+			if (el !== origin) {
+				el.style.userSelect = 'none';
+				muted.push(el);
+			}
+		}
+		const release = () => {
+			for (const el of muted) el.style.userSelect = '';
+		};
+		window.addEventListener('pointerup', release, { once: true });
+		window.addEventListener('pointercancel', release, { once: true });
+	}
 	$effect(() => {
 		wm.bounds = { width: w, height: h };
 	});
+	// Viewport/chrome resizes re-fit the windows (untracked: relayout reads
+	// window state we must not subscribe to, or every drag would re-run this).
+	$effect(() => {
+		void wm.workArea;
+		untrack(() => wm.relayout());
+	});
 </script>
 
 <div
+	bind:this={ref}
 	bind:clientWidth={w}
 	bind:clientHeight={h}
+	onpointerdowncapture={containSelection}
 	data-desktop
 	class={cn('relative h-full w-full overflow-hidden bg-(--color-1)', className)}
 	{...restProps}

package/dist/os/taskbar.svelte

@@ -185,6 +185,13 @@
 				<Button
 					active={wm.focusedId === win.id && win.state !== 'minimized'}
 					onclick={() => wm.toggleMinimize(win.id)}
+					onauxclick={(e: MouseEvent) => {
+						if (e.button === 1) wm.close(win.id);
+					}}
+					onpointerdown={(e: PointerEvent) => {
+						// Cancel middle pointerdown so autoscroll never engages.
+						if (e.button === 1) e.preventDefault();
+					}}
 					class={cn('max-w-48 min-w-0 justify-start', win.state === 'minimized' && 'opacity-60')}
 				>
 					{#if win.icon}{@const Icon = win.icon}<Icon class="size-(--era-h-xs) shrink-0" />{/if}
@@ -216,17 +223,20 @@
 	<!-- System tray -->
 	<div class="flex shrink-0 items-center gap-(--era-gap)">
 		{@render end?.()}
-		<div class="relative">
-			<Button icon size="default" aria-label="Notifications" onclick={onNotifications}>
-				<Bell class="size-(--era-h-xs)" />
-			</Button>
-			{#if notif.unread > 0}
+		<!-- The bell only exists while there's something unread — silent means
+		     no dead chrome (the center stays reachable via onNotifications
+		     consumers' own affordances). -->
+		{#if notif.unread > 0}
+			<div class="relative">
+				<Button icon size="default" aria-label="Notifications" onclick={onNotifications}>
+					<Bell class="size-(--era-h-xs)" />
+				</Button>
 				<span
 					class="absolute -top-0.5 -right-0.5 flex min-w-4 items-center justify-center rounded-full bg-primary px-1 text-[0.65rem] leading-4 text-primary-fg"
 				>
 					{notif.unread > 99 ? '99+' : notif.unread}
 				</span>
-			{/if}
-		</div>
+			</div>
+		{/if}
 	</div>
 </div>

package/dist/os/window.svelte

@@ -59,6 +59,7 @@
 
 <Pane.Root
 	bind:ref
+	data-window
 	bind:position={win.pos}
 	bind:size={win.size}
 	resizable={win.resizable}
@@ -99,7 +100,8 @@
 					// 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;
+					armed =
+							e.button === 2 && win.minimizable ? 'minimize' : e.button === 1 ? 'maximize' : null;
 				}}
 				onpointerup={(e: PointerEvent) => {
 					if (e.button === 2 && armed === 'minimize') wm.minimize(win.id);

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

@@ -50,6 +50,10 @@ export interface AppDefinition {
     singleton?: boolean;
     /** Show a resize grip (default true). */
     resizable?: boolean;
+    /** One switch for the whole minimize affordance (default true): off, the
+     *  × gesture won't arm it and taskbar tabs only focus — minimize() and
+     *  toggleMinimize() become focus-only no-ops. */
+    minimizable?: boolean;
     /** Extra classes for the window body (Pane.Content) — e.g. `p-(--era-gap)`
      *  for a body of controls, or `p-0` for a full-bleed app. */
     bodyClass?: string;
@@ -73,6 +77,7 @@ export interface AppWindow {
     restore: Frame | null;
     component?: AppComponent;
     resizable: boolean;
+    minimizable: boolean;
     bodyClass?: string;
 }
 /** A named virtual desktop. Every window belongs to exactly one; only the
@@ -139,6 +144,13 @@ export declare class WindowManager {
     toggleMaximize(id: string): void;
     /** Un-maximize / un-snap back to the pre-change frame (or just un-minimize). */
     restore(id: string): void;
+    /** Re-fit windows after the desktop or its chrome resizes: maximized
+     *  windows re-fill the work area; normal windows re-clamp so the bar stays
+     *  below the top and at least dragKeep px stays reachable on every other
+     *  side — the same fence the drag containment enforces, applied at rest.
+     *  The Desktop calls this whenever the work area changes; chrome itself
+     *  (the taskbar) never resizes with the viewport. */
+    relayout(): void;
     /** Half / quadrant tiling against the work area. */
     snap(id: string, zone: SnapZone): void;
     /** Create a workspace (optionally switching to it) and return its id. */

package/dist/os/wm.svelte.js

@@ -104,6 +104,7 @@ export class WindowManager {
             restore: null,
             component: app.component,
             resizable: overrides?.resizable ?? app.resizable ?? true,
+            minimizable: app.minimizable ?? true,
             bodyClass: app.bodyClass
         };
         this.windows.push(win);
@@ -128,7 +129,7 @@ export class WindowManager {
     }
     minimize(id) {
         const w = this.#find(id);
-        if (w)
+        if (w?.minimizable)
             w.state = 'minimized';
     }
     /** Taskbar behaviour: focus if not focused, else minimize; restore if minimized. */
@@ -136,7 +137,7 @@ export class WindowManager {
         const w = this.#find(id);
         if (!w)
             return;
-        if (w.state === 'minimized')
+        if (w.state === 'minimized' || !w.minimizable)
             this.focus(id);
         else if (this.focusedId === id)
             w.state = 'minimized';
@@ -179,6 +180,30 @@ export class WindowManager {
         w.state = 'normal';
         this.focus(id);
     }
+    /** Re-fit windows after the desktop or its chrome resizes: maximized
+     *  windows re-fill the work area; normal windows re-clamp so the bar stays
+     *  below the top and at least dragKeep px stays reachable on every other
+     *  side — the same fence the drag containment enforces, applied at rest.
+     *  The Desktop calls this whenever the work area changes; chrome itself
+     *  (the taskbar) never resizes with the viewport. */
+    relayout() {
+        const { x, y, width, height } = this.workArea;
+        if (!width || !height)
+            return;
+        for (const w of this.windows) {
+            if (w.state === 'maximized') {
+                w.pos = { x, y };
+                w.size = { width, height };
+            }
+            else {
+                const winW = w.size?.width ?? 0;
+                w.pos = {
+                    x: Math.min(Math.max(w.pos.x, x + this.dragKeep - winW), x + width - this.dragKeep),
+                    y: Math.min(Math.max(w.pos.y, y), y + height - this.dragKeep)
+                };
+            }
+        }
+    }
     /** Half / quadrant tiling against the work area. */
     snap(id, zone) {
         const w = this.#find(id);

package/package.json

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