@signal9/era-ui 2.4.0 → 2.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -34,14 +34,40 @@
34
34
  // Feed the live viewport size to the store so maximize / snap have real bounds.
35
35
  let w = $state(0);
36
36
  let h = $state(0);
37
+ let ref = $state<HTMLDivElement | null>(null);
38
+
39
+ // Selection containment: a text drag that starts in one window must never
40
+ // bleed into its neighbours — while the primary button is down, every
41
+ // OTHER window goes user-select:none, restored on release. The browser has
42
+ // no cross-window selection fence (user-select: contain never shipped), so
43
+ // this is the whole mechanism.
44
+ function containSelection(e: PointerEvent) {
45
+ if (e.button !== 0 || !ref) return;
46
+ const origin = (e.target as Element | null)?.closest?.('[data-window]');
47
+ if (!origin) return;
48
+ const muted: HTMLElement[] = [];
49
+ for (const el of ref.querySelectorAll<HTMLElement>('[data-window]')) {
50
+ if (el !== origin) {
51
+ el.style.userSelect = 'none';
52
+ muted.push(el);
53
+ }
54
+ }
55
+ const release = () => {
56
+ for (const el of muted) el.style.userSelect = '';
57
+ };
58
+ window.addEventListener('pointerup', release, { once: true });
59
+ window.addEventListener('pointercancel', release, { once: true });
60
+ }
37
61
  $effect(() => {
38
62
  wm.bounds = { width: w, height: h };
39
63
  });
40
64
  </script>
41
65
 
42
66
  <div
67
+ bind:this={ref}
43
68
  bind:clientWidth={w}
44
69
  bind:clientHeight={h}
70
+ onpointerdowncapture={containSelection}
45
71
  data-desktop
46
72
  class={cn('relative h-full w-full overflow-hidden bg-(--color-1)', className)}
47
73
  {...restProps}
@@ -185,6 +185,13 @@
185
185
  <Button
186
186
  active={wm.focusedId === win.id && win.state !== 'minimized'}
187
187
  onclick={() => wm.toggleMinimize(win.id)}
188
+ onauxclick={(e: MouseEvent) => {
189
+ if (e.button === 1) wm.close(win.id);
190
+ }}
191
+ onpointerdown={(e: PointerEvent) => {
192
+ // Cancel middle pointerdown so autoscroll never engages.
193
+ if (e.button === 1) e.preventDefault();
194
+ }}
188
195
  class={cn('max-w-48 min-w-0 justify-start', win.state === 'minimized' && 'opacity-60')}
189
196
  >
190
197
  {#if win.icon}{@const Icon = win.icon}<Icon class="size-(--era-h-xs) shrink-0" />{/if}
@@ -216,17 +223,20 @@
216
223
  <!-- System tray -->
217
224
  <div class="flex shrink-0 items-center gap-(--era-gap)">
218
225
  {@render end?.()}
219
- <div class="relative">
220
- <Button icon size="default" aria-label="Notifications" onclick={onNotifications}>
221
- <Bell class="size-(--era-h-xs)" />
222
- </Button>
223
- {#if notif.unread > 0}
226
+ <!-- The bell only exists while there's something unread — silent means
227
+ no dead chrome (the center stays reachable via onNotifications
228
+ consumers' own affordances). -->
229
+ {#if notif.unread > 0}
230
+ <div class="relative">
231
+ <Button icon size="default" aria-label="Notifications" onclick={onNotifications}>
232
+ <Bell class="size-(--era-h-xs)" />
233
+ </Button>
224
234
  <span
225
235
  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"
226
236
  >
227
237
  {notif.unread > 99 ? '99+' : notif.unread}
228
238
  </span>
229
- {/if}
230
- </div>
239
+ </div>
240
+ {/if}
231
241
  </div>
232
242
  </div>
@@ -59,6 +59,7 @@
59
59
 
60
60
  <Pane.Root
61
61
  bind:ref
62
+ data-window
62
63
  bind:position={win.pos}
63
64
  bind:size={win.size}
64
65
  resizable={win.resizable}
@@ -99,7 +100,8 @@
99
100
  // Cancelling the middle pointerdown suppresses its compatibility
100
101
  // mouse events, so the browser's autoscroll never engages.
101
102
  if (e.button === 1) e.preventDefault();
102
- armed = e.button === 2 ? 'minimize' : e.button === 1 ? 'maximize' : null;
103
+ armed =
104
+ e.button === 2 && win.minimizable ? 'minimize' : e.button === 1 ? 'maximize' : null;
103
105
  }}
104
106
  onpointerup={(e: PointerEvent) => {
105
107
  if (e.button === 2 && armed === 'minimize') wm.minimize(win.id);
@@ -50,6 +50,10 @@ export interface AppDefinition {
50
50
  singleton?: boolean;
51
51
  /** Show a resize grip (default true). */
52
52
  resizable?: boolean;
53
+ /** One switch for the whole minimize affordance (default true): off, the
54
+ * × gesture won't arm it and taskbar tabs only focus — minimize() and
55
+ * toggleMinimize() become focus-only no-ops. */
56
+ minimizable?: boolean;
53
57
  /** Extra classes for the window body (Pane.Content) — e.g. `p-(--era-gap)`
54
58
  * for a body of controls, or `p-0` for a full-bleed app. */
55
59
  bodyClass?: string;
@@ -73,6 +77,7 @@ export interface AppWindow {
73
77
  restore: Frame | null;
74
78
  component?: AppComponent;
75
79
  resizable: boolean;
80
+ minimizable: boolean;
76
81
  bodyClass?: string;
77
82
  }
78
83
  /** A named virtual desktop. Every window belongs to exactly one; only the
@@ -104,6 +104,7 @@ export class WindowManager {
104
104
  restore: null,
105
105
  component: app.component,
106
106
  resizable: overrides?.resizable ?? app.resizable ?? true,
107
+ minimizable: app.minimizable ?? true,
107
108
  bodyClass: app.bodyClass
108
109
  };
109
110
  this.windows.push(win);
@@ -128,7 +129,7 @@ export class WindowManager {
128
129
  }
129
130
  minimize(id) {
130
131
  const w = this.#find(id);
131
- if (w)
132
+ if (w?.minimizable)
132
133
  w.state = 'minimized';
133
134
  }
134
135
  /** Taskbar behaviour: focus if not focused, else minimize; restore if minimized. */
@@ -136,7 +137,7 @@ export class WindowManager {
136
137
  const w = this.#find(id);
137
138
  if (!w)
138
139
  return;
139
- if (w.state === 'minimized')
140
+ if (w.state === 'minimized' || !w.minimizable)
140
141
  this.focus(id);
141
142
  else if (this.focusedId === id)
142
143
  w.state = 'minimized';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@signal9/era-ui",
3
- "version": "2.4.0",
3
+ "version": "2.5.0",
4
4
  "scripts": {
5
5
  "dev": "vite dev --host",
6
6
  "build": "vite build && npm run prepack",