vintage-frames 0.14.0 → 0.14.1

package/dist/components/vf-desktop.d.ts

@@ -36,6 +36,25 @@ declare const VfDesktop_base: (new (...args: any[]) => import("../position.js").
  * reads the current holder, and every change of holder — including to and
  * from none — fires `vf-activate`.
  *
+ * **Hidden windows.** A window with `hidden` — closed by a page that hides
+ * its windows rather than removing them, through `vf-window.hide()` or the
+ * attribute itself — never holds the active state. One slotted hidden waits
+ * to be shown; `bringToFront()` on one gives it its place in the stack and
+ * activates nothing; the holder hiding hands the state to the topmost shown
+ * document window, or to none. A window shown into a tier where none is
+ * active, unless the tier was deliberately deactivated, takes it.
+ * {@link stackingOrder} lists the windows as they stand, bottom-most first.
+ *
+ * **The work area.** A slotted `vf-menu-bar` along the top takes its band
+ * off the screen: {@link workArea} is what is left, and the gestures on the
+ * screen stay in it — a window dragged up stops with its title bar under the
+ * bar, where it can still be grabbed, and an icon dropped, nudged or walked
+ * on the desktop lands below the bar. `window-top` deepens the area for
+ * windows alone ({@link windowArea}), for a page with a strip of its own
+ * under the bar. A gesture asks for the box it is clamped into with
+ * `vf-placement-bounds-request` (bubbles, non-composed), the drag surface's
+ * handshake, and the desktop answers for the hosts placed on its screen.
+ *
  * The desktop is a raster with an explicit size, always: **`width` and
  * `height`**, in system px, the way a WIND resource declared a window's —
  * the host box renders at the declared screen plus `2 × bezel` per axis, a
@@ -88,8 +107,8 @@ declare const VfDesktop_base: (new (...args: any[]) => import("../position.js").
  * @fires vf-activate - The active document-tier window changed. Detail
  *   `{ window: HTMLElement | null }` — the new holder, or `null` when the
  *   document tier deactivated (a {@link clearActive} call, or the active
- *   window leaving the DOM with none behind it). Fired once per change of
- *   holder, never for a re-assertion of the same one.
+ *   window leaving the DOM or hiding with no shown window behind it). Fired
+ *   once per change of holder, never for a re-assertion of the same one.
  * @csspart desktop - The patterned screen surface — the whole-system-px
  *   raster (inset by `bezel` when one is set).
  * @cssprop [--vf-desktop=#808080] - base color under the desktop pattern —
@@ -139,6 +158,38 @@ export declare class VfDesktop extends VfDesktop_base {
      * keeps the dither.
      */
     pattern: string | null | undefined;
+    /**
+     * The least `top` a window may take, in system px from the screen's top —
+     * for a page that keeps a strip of its own under the menu bar, over the
+     * windows. A window dragged on this desktop stops there, and
+     * {@link windowArea} starts there; icons still stop at the menu bar. Below
+     * the bar's bottom it changes nothing. Unset, windows stop at the bar.
+     */
+    windowTop?: number | null;
+    /**
+     * The screen less a slotted `vf-menu-bar` along its top edge, in system
+     * px from the screen's corner (the bezel excluded, as for
+     * {@link placementAt}): `{ left, top, width, height }`. The desktop clamps
+     * the gestures on its screen into it — an icon dropped, nudged or walked
+     * on the desktop lands below the menu bar, where it can be grabbed again.
+     * Without a bar it is the whole screen. Measured at the call.
+     */
+    get workArea(): {
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+    };
+    /**
+     * {@link workArea}, deepened to {@link windowTop} where that is lower: the
+     * area windows are dragged in. A window's title bar never goes above it.
+     */
+    get windowArea(): {
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+    };
     /**
      * Size the screen to the largest whole-system-px raster whose host box —
      * bezel included — fits a CSS-px bound, and return what was set. The
@@ -223,10 +274,13 @@ export declare class VfDesktop extends VfDesktop_base {
     private readonly _gestureEnd;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    /** Whether a slotted window belongs to the floating (utility) tier. The
-     *  attribute is the source of truth here so a not-yet-upgraded element
-     *  still lands in the right tier (variant reflects, so an upgraded
-     *  property-set window agrees). */
+    /** Whether a slotted window belongs to the floating (utility) tier: the
+     *  `variant` property where the window has one, else the attribute, so a
+     *  not-yet-upgraded element still lands in the right tier. Not the
+     *  attribute alone — it reflects in the window's next update, after a
+     *  window made by script and appended in the same task has been slotted,
+     *  and that palette would land in the document tier and lose its
+     *  `active`. */
     private _isUtility;
     /**
      * Bring a slotted window to the front of its tier. A document-tier window
@@ -247,8 +301,17 @@ export declare class VfDesktop extends VfDesktop_base {
      */
     bringToFront(win: HTMLElement): void;
     /** The active document-tier window, or null while the tier is deactivated
-     *  (or has no windows). Utility windows are never the holder. */
+     *  (or has no shown windows). Utility windows and hidden windows are never
+     *  the holder. */
     get activeWindow(): HTMLElement | null;
+    /**
+     * The slotted windows in stacking order, bottom-most first: the document
+     * tier, then the floating tier above it, each in the order its windows
+     * were last raised. Hidden windows are included where they stand. This is
+     * the order the eye sees; the windows' light-DOM order catches up with it
+     * only once a gesture ends, and a raise by keyboard focus moves no node.
+     */
+    get stackingOrder(): HTMLElement[];
     /**
      * Deactivate the whole document tier — clear `active` from every document
      * window, leaving none the holder. Pages route "the user clicked the
@@ -258,7 +321,11 @@ export declare class VfDesktop extends VfDesktop_base {
      * slotted.
      */
     clearActive(): void;
-    /** The z/active half of a raise, shared by every path. */
+    /**
+     * The z/active half of a raise, shared by every path. A hidden window
+     * takes its place in the stack and nothing else: it activates when it is
+     * shown and raised.
+     */
     private _restack;
     /**
      * Schedule the DOM-order sync: one task from now, coalesced, and never
@@ -316,6 +383,19 @@ export declare class VfDesktop extends VfDesktop_base {
      * detail alone.
      */
     private _onDragSurfaceRequest;
+    /**
+     * A gesture measuring the box it is clamped into (src/position.ts): for a
+     * host placed on this screen — a slotted window, an icon in an unplaced
+     * field — the screen, bezel excluded, and the work area's top as the
+     * floor: {@link windowArea}'s for a window, {@link workArea}'s for
+     * anything else. The floor is rounded up to the host's placement lattice,
+     * so a snapped landing never rounds above it. A host placed in a box of its
+     * own (a window body, a placed field) is that box's; an outer desktop
+     * leaves a filled detail alone.
+     */
+    private _onBoundsRequest;
+    /** The bottom of a slotted, shown menu bar along the screen's top edge, system px; else 0. */
+    private _menuBarFloor;
     /**
      * Delegated focusin: raise the window keyboard focus entered, so tabbing
      * into a background window brings it to front (and reveals its close/zoom
@@ -329,6 +409,19 @@ export declare class VfDesktop extends VfDesktop_base {
     private _windowFromEvent;
     /** Wire up newly slotted windows: seed z-indices, normalize `active`. */
     private _onSlotChange;
+    /**
+     * Resolve who should hold `active` after the window set or a window's
+     * visibility changed: a holder still slotted and shown keeps it, a
+     * deliberate deactivation is preserved (never promote a survivor over the
+     * user's "clicked the Finder"), and only then does the topmost shown
+     * window inherit — the active window left the DOM or was hidden, or a
+     * window was shown into a tier with none active. Applied even when null,
+     * so a stray `active` attribute on slotted markup, or on a hidden window,
+     * is normalized in the deactivated state too.
+     */
+    private _resolveActive;
+    /** Watch the `hidden` attribute of every slotted window, and no other. */
+    private _observeWindows;
     /**
      * Re-assert the single-active-window state after slotted `<vf-window>`
      * elements upgrade. One-shot: the flag collapses repeat slotchanges into a
@@ -365,15 +458,24 @@ export declare class VfDesktop extends VfDesktop_base {
      * Minimal-move: windows already in relative order are never touched (the
      * common case — after one raise, one window moves). Non-window siblings
      * (a menu bar, page content) keep their positions; only a window that must
-     * cross the stack moves past them. Moving a node containing the focused
-     * element drops focus to `<body>`, so it is restored afterwards — behind
-     * `_restoringFocus`, because the restore re-fires focusin (see
-     * {@link _onFocusIn}) on an element that may sit in a background window.
+     * cross the stack moves past them. `moveBefore()` keeps the focus inside a
+     * moved window where the browser has it ({@link _move}); re-inserting a
+     * node containing the focused element drops focus to `<body>`, so it is
+     * restored afterwards — behind `_restoringFocus`, because the restore
+     * re-fires focusin (see {@link _onFocusIn}) on an element that may sit in a
+     * background window.
      * Reached only through {@link _requestDomSync}'s task — after a pointer
      * gesture or a programmatic raise, never from a focus-driven one (see
      * {@link _raise} for why).
      */
     private _syncDomOrder;
+    /**
+     * Move a slotted window before `before`: with `Element.moveBefore()` where
+     * the browser has it, which keeps the focus inside the window — a rename
+     * field, a text field's caret — through the move; else by re-inserting it,
+     * and {@link _syncDomOrder} puts the focus back.
+     */
+    private _move;
     protected willUpdate(changed: PropertyValues<this>): void;
     protected updated(changed: Map<PropertyKey, unknown>): void;
     protected render(): unknown;

package/dist/components/vf-desktop.js

@@ -1,25 +1,25 @@
 import { emit as e } from "../events.js";
 import { vfElement as t } from "../define.js";
-import { ScaleController as n, effectiveScale as r, sysLength as i } from "../scale.js";
-import a from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
-import { VfPositioned as o, placementIn as s } from "../position.js";
-import { vfBase as c } from "../styles/recipes/host.js";
-import { tileImage as l, tileRects as u, tileSpan as d } from "../styles/recipes/tile.js";
-import { patternOverride as f, tileGrid as p, vfTileGrid as m } from "../tile-grid.js";
-import { PATTERNS as h, parsePattern as g, patternMotif as _ } from "../patterns.js";
-import { PatternFillController as v, vfPatternFill as y } from "../pattern-fill.js";
-import { GridSnapController as b } from "../grid-snap.js";
-import { DocumentListenersController as x } from "../document-listeners.js";
-import { SCREEN_CORNER as S, steppedCornerClip as C } from "../pixel-frame.js";
-import { LitElement as w, css as T, html as E, unsafeCSS as D } from "lit";
-import { property as O, query as k, queryAssignedElements as A } from "lit/decorators.js";
+import { ScaleController as n, effectiveScale as r, sysLength as i, systemPxQuantum as a } from "../scale.js";
+import o from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
+import { VfPositioned as s, placementIn as c } from "../position.js";
+import { vfBase as l } from "../styles/recipes/host.js";
+import { tileImage as u, tileRects as d, tileSpan as f } from "../styles/recipes/tile.js";
+import { patternOverride as p, tileGrid as m, vfTileGrid as h } from "../tile-grid.js";
+import { PATTERNS as g, parsePattern as _, patternMotif as v } from "../patterns.js";
+import { PatternFillController as y, vfPatternFill as b } from "../pattern-fill.js";
+import { GridSnapController as x } from "../grid-snap.js";
+import { DocumentListenersController as S } from "../document-listeners.js";
+import { SCREEN_CORNER as C, steppedCornerClip as w } from "../pixel-frame.js";
+import { LitElement as T, css as E, html as D, unsafeCSS as O } from "lit";
+import { property as k, query as A, queryAssignedElements as j } from "lit/decorators.js";
 //#region src/components/vf-desktop.ts
-var j = 1e6, M = 2 * j, N = 2000001, P = 512, F = 342, I = "gray-50", L = _(h[I], "#000000", "#ffffff"), R = l(L.width, L.height, u(L.rects)), z = d(L.width), B = class extends o(w) {
+var M = 1e6, N = 2 * M, P = 2000001, F = 512, I = 342, L = "gray-50", R = v(g[L], "#000000", "#ffffff"), z = u(R.width, R.height, d(R.rects)), B = f(R.width), V = (e) => Number(e.style.zIndex) || 0, H = class extends s(T) {
 	constructor(...e) {
-		super(...e), this.width = P, this.height = F, this.bezel = 0, this.pattern = I, this.scale = new n(this), this.gridSnap = new b(this), this._token = "", this._desktopPattern = h[I], this.#e = !1, this.patternFill = new v(this, {
+		super(...e), this.width = F, this.height = I, this.bezel = 0, this.pattern = L, this.scale = new n(this), this.gridSnap = new x(this), this._token = "", this._desktopPattern = g[L], this.#e = !1, this.patternFill = new y(this, {
 			getBox: () => this.screen,
 			getPattern: () => this._token ? null : this._desktopPattern
-		}), this._zCounter = 0, this._activeWindow = null, this._deactivated = !1, this._awaitingUpgrade = !1, this._pointerGesture = !1, this._restoringFocus = !1, this._domSyncTimer = 0, this._gestureEnd = new x(this, () => [[
+		}), this._zCounter = 0, this._activeWindow = null, this._deactivated = !1, this._awaitingUpgrade = !1, this.#t = new MutationObserver(() => this._resolveActive()), this._pointerGesture = !1, this._restoringFocus = !1, this._domSyncTimer = 0, this._gestureEnd = new S(this, () => [[
 			document,
 			"pointerup",
 			this._onGestureEnd,
@@ -38,6 +38,15 @@ var j = 1e6, M = 2 * j, N = 2000001, P = 512, F = 342, I = "gray-50", L = _(h[I]
 		}, this._onDragSurfaceRequest = (e) => {
 			let t = e.detail;
 			!t || t.surface || (t.surface = this.dragSurface);
+		}, this._onBoundsRequest = (e) => {
+			let t = e.detail, n = e.target;
+			if (!t || t.bounds || !(n instanceof HTMLElement) || n.offsetParent !== this) return;
+			let r = n.localName === "vf-window" ? this.windowArea : this.workArea, i = a(n);
+			t.bounds = {
+				width: r.left + r.width,
+				height: r.top + r.height,
+				top: Math.ceil(r.top / i) * i
+			};
 		}, this._onFocusIn = (e) => {
 			if (this._restoringFocus) return;
 			let t = this._windowFromEvent(e);
@@ -46,10 +55,10 @@ var j = 1e6, M = 2 * j, N = 2000001, P = 512, F = 342, I = "gray-50", L = _(h[I]
 	}
 	static {
 		this.styles = [
-			c,
-			m,
-			y,
-			T`
+			l,
+			h,
+			b,
+			E`
       :host {
         display: block;
         position: relative;
@@ -110,7 +119,7 @@ var j = 1e6, M = 2 * j, N = 2000001, P = 512, F = 342, I = "gray-50", L = _(h[I]
         position: absolute;
         inset: 0;
         z-index: -1;
-        --_vf-tile-image: var(--vf-desktop-pattern, ${D(R)});
+        --_vf-tile-image: var(--vf-desktop-pattern, ${O(z)});
         /* Forced colors: hidden with the pattern, same posture. */
         @media (forced-colors: active) {
           display: none;
@@ -142,7 +151,7 @@ var j = 1e6, M = 2 * j, N = 2000001, P = 512, F = 342, I = "gray-50", L = _(h[I]
       ::slotted(vf-menu-bar),
       ::slotted(vf-menu) {
         position: relative;
-        z-index: ${M};
+        z-index: ${N};
       }
       /* The drag surface (see the class doc): the box an icon's outline is
          positioned in — the screen's own, bezel excluded — clipped with
@@ -158,7 +167,7 @@ var j = 1e6, M = 2 * j, N = 2000001, P = 512, F = 342, I = "gray-50", L = _(h[I]
         pointer-events: none;
       }
       .drag-surface > * {
-        z-index: ${N};
+        z-index: ${P};
       }
       /* With a bezel, the screen's four corners wear the SCREEN_CORNER mask,
          rounding into the surrounding black; the bottom pair is the same
@@ -169,8 +178,8 @@ var j = 1e6, M = 2 * j, N = 2000001, P = 512, F = 342, I = "gray-50", L = _(h[I]
          maximal z-index. */
       .corner {
         position: absolute;
-        width: calc(var(--vf-scale, 1) * ${S[0]}px);
-        height: calc(var(--vf-scale, 1) * ${S.length}px);
+        width: calc(var(--vf-scale, 1) * ${C[0]}px);
+        height: calc(var(--vf-scale, 1) * ${C.length}px);
         background: var(--vf-black, #000);
         pointer-events: none;
         z-index: 2147483647;
@@ -178,26 +187,43 @@ var j = 1e6, M = 2 * j, N = 2000001, P = 512, F = 342, I = "gray-50", L = _(h[I]
       .corner.tl {
         top: 0;
         left: 0;
-        clip-path: ${D(C(S, "left"))};
+        clip-path: ${O(w(C, "left"))};
       }
       .corner.tr {
         top: 0;
         right: 0;
-        clip-path: ${D(C(S, "right"))};
+        clip-path: ${O(w(C, "right"))};
       }
       .corner.bl {
         bottom: 0;
         left: 0;
-        clip-path: ${D(C(S, "left", "bottom"))};
+        clip-path: ${O(w(C, "left", "bottom"))};
       }
       .corner.br {
         bottom: 0;
         right: 0;
-        clip-path: ${D(C(S, "right", "bottom"))};
+        clip-path: ${O(w(C, "right", "bottom"))};
       }
     `
 		];
 	}
+	get workArea() {
+		let e = this.width ?? F, t = this.height ?? I, n = Math.min(t, this._menuBarFloor());
+		return {
+			left: 0,
+			top: n,
+			width: e,
+			height: t - n
+		};
+	}
+	get windowArea() {
+		let e = this.workArea, t = Math.min(e.top + e.height, Math.max(e.top, this.windowTop ?? 0));
+		return {
+			...e,
+			top: t,
+			height: e.top + e.height - t
+		};
+	}
 	fitWithin(e, t) {
 		let n = r(this), i = (e) => Math.max(0, Math.floor(e / n + 1e-6) - 2 * this.bezel);
 		return this.width = i(e), this.height = i(t), {
@@ -206,17 +232,18 @@ var j = 1e6, M = 2 * j, N = 2000001, P = 512, F = 342, I = "gray-50", L = _(h[I]
 		};
 	}
 	placementAt(e, t, n) {
-		return s(this.screen ?? this, e, t, this, n);
+		return c(this.screen ?? this, e, t, this, n);
 	}
 	#e;
+	#t;
 	connectedCallback() {
-		super.connectedCallback(), this.addEventListener("pointerdown", this._onPointerDown), this.addEventListener("focusin", this._onFocusIn), this.addEventListener("vf-drag-surface-request", this._onDragSurfaceRequest);
+		super.connectedCallback(), this.addEventListener("pointerdown", this._onPointerDown), this.addEventListener("focusin", this._onFocusIn), this.addEventListener("vf-drag-surface-request", this._onDragSurfaceRequest), this.addEventListener("vf-placement-bounds-request", this._onBoundsRequest), this.hasUpdated && this._observeWindows();
 	}
 	disconnectedCallback() {
-		this.removeEventListener("pointerdown", this._onPointerDown), this.removeEventListener("focusin", this._onFocusIn), this.removeEventListener("vf-drag-surface-request", this._onDragSurfaceRequest), this._pointerGesture = !1, this._domSyncTimer &&= (clearTimeout(this._domSyncTimer), 0), super.disconnectedCallback();
+		this.removeEventListener("pointerdown", this._onPointerDown), this.removeEventListener("focusin", this._onFocusIn), this.removeEventListener("vf-drag-surface-request", this._onDragSurfaceRequest), this.removeEventListener("vf-placement-bounds-request", this._onBoundsRequest), this.#t.disconnect(), this._pointerGesture = !1, this._domSyncTimer &&= (clearTimeout(this._domSyncTimer), 0), super.disconnectedCallback();
 	}
 	_isUtility(e) {
-		return e.getAttribute("variant") === "utility";
+		return ("variant" in e ? e.variant : e.getAttribute("variant")) === "utility";
 	}
 	bringToFront(e) {
 		this._restack(e), this._requestDomSync();
@@ -224,12 +251,15 @@ var j = 1e6, M = 2 * j, N = 2000001, P = 512, F = 342, I = "gray-50", L = _(h[I]
 	get activeWindow() {
 		return this._activeWindow;
 	}
+	get stackingOrder() {
+		return [...this._windows].sort((e, t) => V(e) - V(t));
+	}
 	clearActive() {
 		this._deactivated = !0, this._setActive(null);
 	}
 	_restack(e) {
 		let t = this._isUtility(e);
-		e.style.zIndex = String(++this._zCounter + (t ? j : 0)), t || this._setActive(e);
+		e.style.zIndex = String(++this._zCounter + (t ? M : 0)), !t && !e.hidden && this._setActive(e);
 	}
 	_requestDomSync() {
 		this._pointerGesture || this._domSyncTimer || (this._domSyncTimer = window.setTimeout(() => {
@@ -237,27 +267,47 @@ var j = 1e6, M = 2 * j, N = 2000001, P = 512, F = 342, I = "gray-50", L = _(h[I]
 		}, 0));
 	}
 	_raise(e) {
-		let t = this._isUtility(e), n = this._windows.filter((e) => this._isUtility(e) === t);
+		let t = this._isUtility(e), n = this._windows.filter((e) => this._isUtility(e) === t && !e.hidden);
 		this._topmost(n) === e && (t || e.hasAttribute("active")) || this._restack(e);
 	}
+	_menuBarFloor() {
+		let e = this.screen;
+		if (!e) return 0;
+		let t = [...this.children].find((e) => e.localName === "vf-menu-bar" && !e.hidden);
+		if (!t) return 0;
+		let n = t.getBoundingClientRect();
+		if (n.height <= 0) return 0;
+		let i = e.getBoundingClientRect(), a = r(this);
+		return Math.round((n.top - i.top) / a) > 0 ? 0 : Math.max(0, Math.round((n.bottom - i.top) / a));
+	}
 	_windowFromEvent(e) {
 		let t = this._windows;
 		return e.composedPath().find((e) => e instanceof HTMLElement && t.includes(e));
 	}
 	_onSlotChange() {
-		let e = this._windows, t = null;
+		let e = this._windows;
+		this._observeWindows();
+		let t = null;
 		for (let n of e) if (!n.style.zIndex) {
 			let e = this._isUtility(n);
-			n.style.zIndex = String(++this._zCounter + (e ? j : 0)), e || (t = n);
+			n.style.zIndex = String(++this._zCounter + (e ? M : 0)), !e && !n.hidden && (t = n);
 		}
-		let n = e.filter((e) => !this._isUtility(e)), r = this._activeWindow && n.includes(this._activeWindow) ? this._activeWindow : null;
-		this._setActive(t ?? r ?? (this._deactivated ? null : this._topmost(n))), customElements.get("vf-window") || this._normalizeAfterUpgrade();
+		t ? this._setActive(t) : this._resolveActive(), customElements.get("vf-window") || this._normalizeAfterUpgrade();
+	}
+	_resolveActive() {
+		let e = this._windows.filter((e) => !this._isUtility(e) && !e.hidden), t = this._activeWindow && e.includes(this._activeWindow) ? this._activeWindow : null;
+		this._setActive(t ?? (this._deactivated ? null : this._topmost(e)));
+	}
+	_observeWindows() {
+		this.#t.takeRecords(), this.#t.disconnect();
+		for (let e of this._windows) this.#t.observe(e, {
+			attributes: !0,
+			attributeFilter: ["hidden"]
+		});
 	}
 	_normalizeAfterUpgrade() {
 		this._awaitingUpgrade || (this._awaitingUpgrade = !0, customElements.whenDefined("vf-window").then(() => {
-			if (this._awaitingUpgrade = !1, !this.isConnected) return;
-			let e = this._windows.filter((e) => !this._isUtility(e)), t = this._activeWindow && e.includes(this._activeWindow) ? this._activeWindow : null;
-			this._setActive(t ?? (this._deactivated ? null : this._topmost(e)));
+			this._awaitingUpgrade = !1, this.isConnected && this._resolveActive();
 		}));
 	}
 	_setActive(t) {
@@ -274,7 +324,7 @@ var j = 1e6, M = 2 * j, N = 2000001, P = 512, F = 342, I = "gray-50", L = _(h[I]
 	_topmost(e) {
 		let t = null, n = -Infinity;
 		for (let r of e) {
-			let e = Number(r.style.zIndex) || 0;
+			let e = V(r);
 			e >= n && (n = e, t = r);
 		}
 		return t;
@@ -288,31 +338,39 @@ var j = 1e6, M = 2 * j, N = 2000001, P = 512, F = 342, I = "gray-50", L = _(h[I]
 		if (!this.isConnected) return;
 		let e = this._windows;
 		if (e.length < 2) return;
-		let t = [...e].sort((e, t) => (Number(e.style.zIndex) || 0) - (Number(t.style.zIndex) || 0)), n = this._deepActiveElement(), r = !1, i = null;
-		for (let e of t) i && i.compareDocumentPosition(e) & Node.DOCUMENT_POSITION_PRECEDING && (this.insertBefore(e, i.nextSibling), r = !0), i = e;
+		let t = [...e].sort((e, t) => V(e) - V(t)), n = this._deepActiveElement(), r = !1, i = null;
+		for (let e of t) i && i.compareDocumentPosition(e) & Node.DOCUMENT_POSITION_PRECEDING && (this._move(e, i.nextSibling), r = !0), i = e;
 		r && n instanceof HTMLElement && n.isConnected && this._deepActiveElement() !== n && (this._restoringFocus = !0, n.focus({ preventScroll: !0 }), this._restoringFocus = !1);
 	}
+	_move(e, t) {
+		let n = this;
+		if (typeof n.moveBefore == "function") try {
+			n.moveBefore(e, t);
+			return;
+		} catch {}
+		this.insertBefore(e, t);
+	}
 	willUpdate(e) {
-		if (super.willUpdate(e), this._token = f(this, "--vf-desktop-pattern"), e.has("pattern")) {
-			let e = g(this.pattern);
-			e === null && this.pattern?.trim() && !this.#e && (this.#e = !0, console.warn(`vf-desktop: unknown pattern "${this.pattern}" — a library name (docs/PATTERNS.md) or sixteen hex digits. Keeping ${I}.`)), this._desktopPattern = e ?? h[I];
+		if (super.willUpdate(e), this._token = p(this, "--vf-desktop-pattern"), e.has("pattern")) {
+			let e = _(this.pattern);
+			e === null && this.pattern?.trim() && !this.#e && (this.#e = !0, console.warn(`vf-desktop: unknown pattern "${this.pattern}" — a library name (docs/PATTERNS.md) or sixteen hex digits. Keeping ${L}.`)), this._desktopPattern = e ?? g[L];
 		}
 	}
 	updated(e) {
 		if (e.has("bezel") && (this.bezel > 0 ? this.style.setProperty("--vf-desktop-bezel", i(this.bezel)) : this.style.removeProperty("--vf-desktop-bezel")), e.has("width") || e.has("height") || e.has("bezel")) {
-			let e = this.width ?? P, t = this.height ?? F;
+			let e = this.width ?? F, t = this.height ?? I;
 			this.style.width = i(e + 2 * this.bezel), this.style.height = i(t + 2 * this.bezel);
 		}
 	}
 	render() {
-		let e = this.width ?? P, t = this.height ?? F, n = this._token ? E`<div class="vf-tile-grid">
-          ${p({
-			cols: Math.ceil(e / z),
-			rows: Math.ceil(t / z),
-			tile: z
+		let e = this.width ?? F, t = this.height ?? I, n = this._token ? D`<div class="vf-tile-grid">
+          ${m({
+			cols: Math.ceil(e / B),
+			rows: Math.ceil(t / B),
+			tile: B
 		})}
         </div>` : null;
-		return E`
+		return D`
       <div class=${this.bezel > 0 ? "desktop vf-snap bezeled" : "desktop vf-snap"}>
         <div
           class="screen vf-pattern-fill${this._token ? "" : " vf-patterned"}"
@@ -321,7 +379,7 @@ var j = 1e6, M = 2 * j, N = 2000001, P = 512, F = 342, I = "gray-50", L = _(h[I]
           ${n}
           <slot @slotchange=${this._onSlotChange}></slot>
           <div class="drag-surface"></div>
-          ${this.bezel > 0 ? E`<div class="corner tl"></div>
+          ${this.bezel > 0 ? D`<div class="corner tl"></div>
                 <div class="corner tr"></div>
                 <div class="corner bl"></div>
                 <div class="corner br"></div>` : null}
@@ -330,6 +388,9 @@ var j = 1e6, M = 2 * j, N = 2000001, P = 512, F = 342, I = "gray-50", L = _(h[I]
     `;
 	}
 };
-a([O({ type: Number })], B.prototype, "width", void 0), a([O({ type: Number })], B.prototype, "height", void 0), a([O({ type: Number })], B.prototype, "bezel", void 0), a([O()], B.prototype, "pattern", void 0), a([A({ selector: "vf-window" })], B.prototype, "_windows", void 0), a([k(".screen")], B.prototype, "screen", void 0), a([k(".drag-surface")], B.prototype, "dragSurface", void 0), B = a([t("vf-desktop")], B);
+o([k({ type: Number })], H.prototype, "width", void 0), o([k({ type: Number })], H.prototype, "height", void 0), o([k({ type: Number })], H.prototype, "bezel", void 0), o([k()], H.prototype, "pattern", void 0), o([k({
+	type: Number,
+	attribute: "window-top"
+})], H.prototype, "windowTop", void 0), o([j({ selector: "vf-window" })], H.prototype, "_windows", void 0), o([A(".screen")], H.prototype, "screen", void 0), o([A(".drag-surface")], H.prototype, "dragSurface", void 0), H = o([t("vf-desktop")], H);
 //#endregion
-export { B as VfDesktop };
+export { H as VfDesktop };

package/dist/components/vf-icon-field.d.ts

@@ -67,7 +67,7 @@ declare const VfIconField_base: (new (...args: any[]) => import("../size.js").Vf
  * the pointer, and the selection follows it live by the Finder's one rule:
  * **an icon is selected exactly when it was selected at the press XOR the
  * rectangle touches it.** The press fixes that anchor: a plain press has
- * already cleared everything (the way any press outside an icon does), so
+ * already cleared everything (a press on a field's background does), so
  * the rectangle simply selects what it touches and releases what it leaves;
  * with Shift or ⌘ held the selection survives the press and the rectangle
  * *toggles* against it — an icon already selected deselects while the