vintage-frames 0.3.0 → 0.4.0

package/custom-elements.json

@@ -2145,7 +2145,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "`<vf-desktop>` — the full-bleed classic desktop container.\n\nRenders the 50%-dither gray desktop pattern and manages the stacking order\nand `active` state of slotted `vf-window` children: a `pointerdown` or\n`focusin` (keyboard focus) anywhere inside a window brings it to the front\nand makes it the single active window. The windows' light-DOM order is kept\nin step with the stacking order (bottom-most first, at pointer-gesture\nends), so tabbing walks the stack the way the eye does and Shift+Tab is\nits exact mirror.\n\nUtility windows (`vf-window[variant=\"utility\"]`) stack in a floating tier\nabove every document-tier window, restack only among themselves, and stand\noutside the single-active invariant entirely — clicking a palette neither\ndeactivates the active document window nor greys the palette, exactly as\nSystem 7's floating windoids behaved while their application was frontmost.\n\nThe desktop is a raster with an explicit size, always: **`width` and\n`height`**, in system px, the way a WIND resource declared a window's —\nthe host box renders at the declared screen plus `2 × bezel` per axis, a\nwhole number of system pixels by construction (default 512×342, the\ncompact Mac's screen). Pure CSS sizing is not supported; the page sets\nthe numbers — directly, or via VfDesktop.fitWithin on\n`resize`/`onScaleChange` for a viewport-filling desktop — and positions\nthe sized box with its own stylesheet, keeping any sub-system-pixel\nslack on its side. `bezel` (system px) draws the black screen surround —\nthe CRT's unlit margin — around the screen, rounding its top corners\nwith the classic corner mask.\n\nCustom properties:\n- `--vf-desktop-pattern` — the dither's tile art (default a 1-bit 50%\n  checker, opaque black-on-white on a 30-system-px tile). Overriding it\n  renders the token as a placed tile grid at that same 30-px geometry\n  (src/tile-grid.ts); a token swapped at runtime without touching the\n  component wants a `requestUpdate()`.\n- `--vf-desktop` — base color painted *under* the pattern layer (default\n  `#808080`). The default tile is opaque, so this only becomes visible when\n  `--vf-desktop-pattern` is overridden with a tile that has transparent\n  cells (or with `none`).",
+          "description": "`<vf-desktop>` — the full-bleed classic desktop container.\n\nRenders the 50%-dither gray desktop pattern and manages the stacking order\nand `active` state of slotted `vf-window` children: a `pointerdown` or\n`focusin` (keyboard focus) anywhere inside a window brings it to the front\nand makes it the single active window. The windows' light-DOM order is kept\nin step with the stacking order (bottom-most first, at pointer-gesture\nends), so tabbing walks the stack the way the eye does and Shift+Tab is\nits exact mirror.\n\nUtility windows (`vf-window[variant=\"utility\"]`) stack in a floating tier\nabove every document-tier window, restack only among themselves, and stand\noutside the single-active invariant entirely — clicking a palette neither\ndeactivates the active document window nor greys the palette, exactly as\nSystem 7's floating windoids behaved while their application was frontmost.\n\n**Deactivation.** On a real System 7 machine clicking the desktop clicked\nthe *Finder* — the frontmost application's windows lost their stripes.\nclearActive is that gesture's handler: it clears `active` from\nthe whole document tier, and **zero active windows is a legal state**,\nheld until a press or keyboard focus re-enters a document window (or a\nnew one is slotted, which activates it — opening a window brings its\napplication forward). The desktop never takes this decision itself: its\nfurniture is slotted light DOM (an icon layer, say), so only the page\nknows which of its children — or which presses on the bare dither — mean\n\"the Finder\", and it routes those through `clearActive()`. Left alone,\nthe classic always-one-active behavior is unchanged. activeWindow\nreads the current holder, and every change of holder — including to and\nfrom none — fires `vf-activate`.\n\nThe desktop is a raster with an explicit size, always: **`width` and\n`height`**, in system px, the way a WIND resource declared a window's —\nthe host box renders at the declared screen plus `2 × bezel` per axis, a\nwhole number of system pixels by construction (default 512×342, the\ncompact Mac's screen). Pure CSS sizing is not supported; the page sets\nthe numbers — directly, or via VfDesktop.fitWithin on\n`resize`/`onScaleChange` for a viewport-filling desktop — and positions\nthe sized box with its own stylesheet, keeping any sub-system-pixel\nslack on its side. `bezel` (system px) draws the black screen surround —\nthe CRT's unlit margin — around the screen, rounding its top corners\nwith the classic corner mask.\n\nCustom properties:\n- `--vf-desktop-pattern` — the dither's tile art (default a 1-bit 50%\n  checker, opaque black-on-white on a 30-system-px tile). Overriding it\n  renders the token as a placed tile grid at that same 30-px geometry\n  (src/tile-grid.ts); a token swapped at runtime without touching the\n  component wants a `requestUpdate()`.\n- `--vf-desktop` — base color painted *under* the pattern layer (default\n  `#808080`). The default tile is opaque, so this only becomes visible when\n  `--vf-desktop-pattern` is overridden with a tile that has transparent\n  cells (or with `none`).",
           "name": "VfDesktop",
           "cssProperties": [
             {
@@ -2278,6 +2278,26 @@
               "default": "0",
               "description": "Monotonic z-index counter for window stacking."
             },
+            {
+              "kind": "field",
+              "name": "_activeWindow",
+              "type": {
+                "text": "HTMLElement | null"
+              },
+              "privacy": "private",
+              "default": "null",
+              "description": "The active document-tier window, or null when the tier is deactivated\n(or empty). The single change-tracked truth behind activeWindow\nand the `vf-activate` event — written only by _setActive."
+            },
+            {
+              "kind": "field",
+              "name": "_deactivated",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false",
+              "description": "Whether the document tier was *deliberately* deactivated (a\nclearActive call) — as opposed to `_activeWindow` being null\nbecause nothing has activated yet. Slot changes preserve a deliberate\ndeactivation instead of promoting a survivor; a newly slotted document\nwindow still activates (opening a window brings its application forward)."
+            },
             {
               "kind": "field",
               "name": "_awaitingUpgrade",
@@ -2353,6 +2373,25 @@
               ],
               "description": "Bring a slotted window to the front of its tier. A document-tier window\nalso becomes the single active window (clearing `active` on the other\ndocument windows); a utility window restacks within the floating tier\nand leaves every `active` state alone.\n\nThe light-DOM order of the slotted windows follows (_syncDomOrder):\nvisual stacking and sequential focus order come from independent channels\n(z-index vs DOM position), and letting them drift apart is how a desktop\ntabs front-to-back one way and back-to-front the other, with widgets\nreachable only travelling backwards. Deferred to the end of any in-flight\npointer gesture — moving a node clears the pointer capture a title-bar\ndrag or grow-box resize holds on it, and a background window must stay\ndraggable in the same gesture that raises it."
             },
+            {
+              "kind": "field",
+              "name": "activeWindow",
+              "type": {
+                "text": "HTMLElement | null"
+              },
+              "description": "The active document-tier window, or null while the tier is deactivated\n(or has no windows). Utility windows are never the holder.",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "clearActive",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Deactivate the whole document tier — clear `active` from every document\nwindow, leaving none the holder. Pages route \"the user clicked the\nFinder\" presses — on the bare dither, on their own desktop furniture\n(an icon layer) — through here; the deactivated state holds until a\ndocument window is pressed, focused, brought to front, or newly\nslotted."
+            },
             {
               "kind": "method",
               "name": "_restack",
@@ -2474,11 +2513,11 @@
                 {
                   "name": "win",
                   "type": {
-                    "text": "HTMLElement"
+                    "text": "HTMLElement | null"
                   }
                 }
               ],
-              "description": "Set `active` on `win` only, clearing it on every other *document-tier*\nwindow. Utility windows stand outside the invariant: a palette keeps\nwhatever `active` state it has (true by default, so its dither and\nwidgets stay drawn while document windows trade the highlight)."
+              "description": "Set `active` on `win` only, clearing it on every other *document-tier*\nwindow (`null` clears the whole tier — the deactivated state). Utility\nwindows stand outside the invariant: a palette keeps whatever `active`\nstate it has (true by default, so its dither and widgets stay drawn\nwhile document windows trade the highlight). The one write site of\n_activeWindow, so `vf-activate` fires exactly on a change of\nholder — re-asserting the current holder is silent."
             },
             {
               "kind": "method",
@@ -2573,6 +2612,12 @@
               }
             }
           ],
+          "events": [
+            {
+              "description": "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.",
+              "name": "vf-activate"
+            }
+          ],
           "attributes": [
             {
               "name": "width",

package/dist/components/vf-button.js

@@ -1,21 +1,21 @@
-import { vfElement as e } from "../define.js";
-import { ScaleController as t } from "../scale.js";
-import n from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
-import { VfPositioned as r } from "../position.js";
-import { vfDisplay as i } from "../styles/recipes/display-face.js";
-import { vfBase as a } from "../styles/recipes/host.js";
-import { vfFocusUnderline as o } from "../styles/recipes/focus.js";
-import { GridSnapController as s } from "../grid-snap.js";
-import { BUTTON_FACE as c, BUTTON_FRAME as l, RING_FRAME as u, RING_HOLE as d, steppedRectClip as f, steppedRingClip as p } from "../pixel-frame.js";
-import { deferActivation as m } from "../events.js";
+import { deferActivation as e } from "../events.js";
+import { vfElement as t } from "../define.js";
+import { ScaleController as n } from "../scale.js";
+import r from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
+import { VfPositioned as i } from "../position.js";
+import { vfDisplay as a } from "../styles/recipes/display-face.js";
+import { vfBase as o } from "../styles/recipes/host.js";
+import { vfFocusUnderline as s } from "../styles/recipes/focus.js";
+import { GridSnapController as c } from "../grid-snap.js";
+import { BUTTON_FACE as l, BUTTON_FRAME as u, RING_FRAME as d, RING_HOLE as f, steppedRectClip as p, steppedRingClip as m } from "../pixel-frame.js";
 import { VfShadowRoleControl as h } from "../form-control.js";
 import { css as g, html as _, nothing as v, unsafeCSS as y } from "lit";
 import { property as b, query as x } from "lit/decorators.js";
 //#region src/components/vf-button.ts
-var S = "vf-submitter", C = class extends r(h) {
-	constructor(...e) {
-		super(...e), this.type = "button", this.name = "", this.value = "", this.formAction = "", this.formEnctype = "", this.formMethod = "", this.formNoValidate = !1, this.formTarget = "", this.scale = new t(this), this.gridSnap = new s(this), this.#e = !1, this.handleClick = (e) => {
-			this.isDisabled || this.#e || this.resolvedType !== "button" && m(this, e, () => this.activate());
+var S = "vf-submitter", C = class extends i(h) {
+	constructor(...t) {
+		super(...t), this.type = "button", this.name = "", this.value = "", this.formAction = "", this.formEnctype = "", this.formMethod = "", this.formNoValidate = !1, this.formTarget = "", this.scale = new n(this), this.gridSnap = new c(this), this.#e = !1, this.handleClick = (t) => {
+			this.isDisabled || this.#e || this.resolvedType !== "button" && e(this, t, () => this.activate());
 		};
 	}
 	static {
@@ -26,8 +26,8 @@ var S = "vf-submitter", C = class extends r(h) {
 	}
 	static {
 		this.styles = [
+			o,
 			a,
-			i,
 			g`
       :host {
         display: inline-flex;
@@ -61,7 +61,7 @@ var S = "vf-submitter", C = class extends r(h) {
         bottom: calc(var(--vf-scale, 1) * -${4}px - var(--vf-snap-dy, 0px));
         right: calc(var(--vf-scale, 1) * -${4}px - var(--vf-snap-dx, 0px));
         background: var(--vf-black, #000);
-        clip-path: ${y(p(u, d))};
+        clip-path: ${y(m(d, f))};
         pointer-events: none;
       }
       /* Disabled default: the fat outer ring dims to gray; the inner button
@@ -131,12 +131,12 @@ var S = "vf-submitter", C = class extends r(h) {
       }
       button::before {
         background: var(--vf-black, #000);
-        clip-path: ${y(f(l))};
+        clip-path: ${y(p(u))};
       }
       /* Face: white fill inset one pixel, with its own traced corner steps. */
       button::after {
         background: var(--vf-white, #fff);
-        clip-path: ${y(f(c))};
+        clip-path: ${y(p(l))};
       }
       /* Pressed: instant white-on-black inversion. */
       button:active:not(:disabled) {
@@ -167,7 +167,7 @@ var S = "vf-submitter", C = class extends r(h) {
         outline: none;
       }
       button:focus-visible .label::after {
-        ${o}
+        ${s}
       }
       /* Disabled: only the label dims to gray; the solid black border stays. */
       button:disabled {
@@ -213,22 +213,22 @@ var S = "vf-submitter", C = class extends r(h) {
 		}
 	}
 };
-n([b({ reflect: !0 })], C.prototype, "variant", void 0), n([b({ reflect: !0 })], C.prototype, "type", void 0), n([b({ reflect: !0 })], C.prototype, "name", void 0), n([b({ reflect: !0 })], C.prototype, "value", void 0), n([b({
+r([b({ reflect: !0 })], C.prototype, "variant", void 0), r([b({ reflect: !0 })], C.prototype, "type", void 0), r([b({ reflect: !0 })], C.prototype, "name", void 0), r([b({ reflect: !0 })], C.prototype, "value", void 0), r([b({
 	attribute: "formaction",
 	reflect: !0
-})], C.prototype, "formAction", void 0), n([b({
+})], C.prototype, "formAction", void 0), r([b({
 	attribute: "formenctype",
 	reflect: !0
-})], C.prototype, "formEnctype", void 0), n([b({
+})], C.prototype, "formEnctype", void 0), r([b({
 	attribute: "formmethod",
 	reflect: !0
-})], C.prototype, "formMethod", void 0), n([b({
+})], C.prototype, "formMethod", void 0), r([b({
 	type: Boolean,
 	attribute: "formnovalidate",
 	reflect: !0
-})], C.prototype, "formNoValidate", void 0), n([b({
+})], C.prototype, "formNoValidate", void 0), r([b({
 	attribute: "formtarget",
 	reflect: !0
-})], C.prototype, "formTarget", void 0), n([x("button")], C.prototype, "buttonEl", void 0), C = n([e("vf-button")], C);
+})], C.prototype, "formTarget", void 0), r([x("button")], C.prototype, "buttonEl", void 0), C = r([t("vf-button")], C);
 //#endregion
 export { C as VfButton };

package/dist/components/vf-checkbox.js

@@ -1,11 +1,11 @@
-import { vfElement as e } from "../define.js";
-import t from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
-import { VfPositioned as n } from "../position.js";
-import { vfDisplay as r } from "../styles/recipes/display-face.js";
-import { vfBase as i } from "../styles/recipes/host.js";
-import { vfFocusUnderline as a } from "../styles/recipes/focus.js";
-import { vfToggle as o } from "../styles/recipes/toggle.js";
-import { emit as s, emitNative as c } from "../events.js";
+import { emit as e, emitNative as t } from "../events.js";
+import { vfElement as n } from "../define.js";
+import r from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
+import { VfPositioned as i } from "../position.js";
+import { vfDisplay as a } from "../styles/recipes/display-face.js";
+import { vfBase as o } from "../styles/recipes/host.js";
+import { vfFocusUnderline as s } from "../styles/recipes/focus.js";
+import { vfToggle as c } from "../styles/recipes/toggle.js";
 import { CHECKBOX_X as l, glyphSvg as u } from "../glyphs.js";
 import { VfFormControl as d } from "../form-control.js";
 import { VfToggleControl as f } from "../toggle-control.js";
@@ -13,12 +13,12 @@ import { css as p, html as m } from "lit";
 import { property as h, state as g } from "lit/decorators.js";
 import { classMap as _ } from "lit/directives/class-map.js";
 //#region src/components/vf-checkbox.ts
-var v = class extends n(f(d)) {
+var v = class extends i(f(d)) {
 	static {
 		this.styles = [
-			i,
-			r,
 			o,
+			a,
+			c,
 			p`
       /* Keyboard focus underlines the box itself — not the label, and not a
          ring around either (see vfFocusUnderline). Both adjustments below are
@@ -28,7 +28,7 @@ var v = class extends n(f(d)) {
          blank row and the rule itself: −(1 + 1 + 1). */
       :host(:focus-visible) .box::after {
         --vf-focus-underline-offset: -3px;
-        ${a}
+        ${s}
         left: calc(var(--vf-scale, 1) * -1px);
         right: calc(var(--vf-scale, 1) * -1px);
       }
@@ -132,12 +132,12 @@ var v = class extends n(f(d)) {
 		this.checked = !0;
 	}
 	activate() {
-		this.checked = !this.checked, this.focus(), s(this, "vf-change", { checked: this.checked }), c(this, "input"), c(this, "change");
+		this.checked = !this.checked, this.focus(), e(this, "vf-change", { checked: this.checked }), t(this, "input"), t(this, "change");
 	}
 };
-t([h({
+r([h({
 	type: Boolean,
 	reflect: !0
-})], v.prototype, "checked", void 0), t([h({ reflect: !0 })], v.prototype, "name", void 0), t([h()], v.prototype, "value", void 0), t([g()], v.prototype, "_hasLabel", void 0), v = t([e("vf-checkbox")], v);
+})], v.prototype, "checked", void 0), r([h({ reflect: !0 })], v.prototype, "name", void 0), r([h()], v.prototype, "value", void 0), r([g()], v.prototype, "_hasLabel", void 0), v = r([n("vf-checkbox")], v);
 //#endregion
 export { v as VfCheckbox };

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

@@ -17,6 +17,20 @@ declare const VfDesktop_base: (new (...args: any[]) => import("../position.js").
  * deactivates the active document window nor greys the palette, exactly as
  * System 7's floating windoids behaved while their application was frontmost.
  *
+ * **Deactivation.** On a real System 7 machine clicking the desktop clicked
+ * the *Finder* — the frontmost application's windows lost their stripes.
+ * {@link clearActive} is that gesture's handler: it clears `active` from
+ * the whole document tier, and **zero active windows is a legal state**,
+ * held until a press or keyboard focus re-enters a document window (or a
+ * new one is slotted, which activates it — opening a window brings its
+ * application forward). The desktop never takes this decision itself: its
+ * furniture is slotted light DOM (an icon layer, say), so only the page
+ * knows which of its children — or which presses on the bare dither — mean
+ * "the Finder", and it routes those through `clearActive()`. Left alone,
+ * the classic always-one-active behavior is unchanged. {@link activeWindow}
+ * reads the current holder, and every change of holder — including to and
+ * from none — fires `vf-activate`.
+ *
  * 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
@@ -41,6 +55,11 @@ declare const VfDesktop_base: (new (...args: any[]) => import("../position.js").
  *   cells (or with `none`).
  *
  * @slot - Default slot: menu bar, windows, anything.
+ * @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.
  * @csspart desktop - The dithered screen surface — the whole-system-px
  *   raster (inset by `bezel` when one is set).
  * @cssprop [--vf-desktop=#808080] - base color under the desktop dither —
@@ -108,6 +127,20 @@ export declare class VfDesktop extends VfDesktop_base {
     private _pattern;
     /** Monotonic z-index counter for window stacking. */
     private _zCounter;
+    /**
+     * The active document-tier window, or null when the tier is deactivated
+     * (or empty). The single change-tracked truth behind {@link activeWindow}
+     * and the `vf-activate` event — written only by {@link _setActive}.
+     */
+    private _activeWindow;
+    /**
+     * Whether the document tier was *deliberately* deactivated (a
+     * {@link clearActive} call) — as opposed to `_activeWindow` being null
+     * because nothing has activated yet. Slot changes preserve a deliberate
+     * deactivation instead of promoting a survivor; a newly slotted document
+     * window still activates (opening a window brings its application forward).
+     */
+    private _deactivated;
     /** Whether a one-shot post-upgrade re-normalization is already pending. */
     private _awaitingUpgrade;
     /** Whether a pointer gesture that began on the desktop is still in flight. */
@@ -143,6 +176,18 @@ export declare class VfDesktop extends VfDesktop_base {
      * draggable in the same gesture that raises it.
      */
     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. */
+    get activeWindow(): HTMLElement | null;
+    /**
+     * Deactivate the whole document tier — clear `active` from every document
+     * window, leaving none the holder. Pages route "the user clicked the
+     * Finder" presses — on the bare dither, on their own desktop furniture
+     * (an icon layer) — through here; the deactivated state holds until a
+     * document window is pressed, focused, brought to front, or newly
+     * slotted.
+     */
+    clearActive(): void;
     /** The z/active half of a raise, shared by every path. */
     private _restack;
     /** Sync the DOM order now, or at gesture end if a pointer is down. */
@@ -199,9 +244,12 @@ export declare class VfDesktop extends VfDesktop_base {
      */
     private _normalizeAfterUpgrade;
     /** Set `active` on `win` only, clearing it on every other *document-tier*
-     *  window. Utility windows stand outside the invariant: a palette keeps
-     *  whatever `active` state it has (true by default, so its dither and
-     *  widgets stay drawn while document windows trade the highlight). */
+     *  window (`null` clears the whole tier — the deactivated state). Utility
+     *  windows stand outside the invariant: a palette keeps whatever `active`
+     *  state it has (true by default, so its dither and widgets stay drawn
+     *  while document windows trade the highlight). The one write site of
+     *  {@link _activeWindow}, so `vf-activate` fires exactly on a change of
+     *  holder — re-asserting the current holder is silent. */
     private _setActive;
     /**
      * Set a window's `active` state. Prefers the property (the source of truth

package/dist/components/vf-desktop.js

@@ -1,17 +1,18 @@
-import { vfElement as e } from "../define.js";
-import { ScaleController as t, effectiveScale as n, sysLength as r } from "../scale.js";
-import i from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
-import { VfPositioned as a } from "../position.js";
-import { vfBase as o } from "../styles/recipes/host.js";
-import { tileImage as s, tileRaster as c, tileRects as l, tileSpan as u, vfTileSize as d } from "../styles/recipes/tile.js";
-import { TileRasterCache as f, patternOverride as p, tileGrid as m, vfTileGrid as h } from "../tile-grid.js";
-import { GridSnapController as g } from "../grid-snap.js";
-import { DocumentListenersController as _ } from "../document-listeners.js";
-import { SCREEN_CORNER as v, steppedCornerClip as y } from "../pixel-frame.js";
-import { LitElement as b, css as x, html as S, unsafeCSS as C } from "lit";
-import { property as w, queryAssignedElements as T } from "lit/decorators.js";
+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 } from "../position.js";
+import { vfBase as s } from "../styles/recipes/host.js";
+import { tileImage as c, tileRaster as l, tileRects as u, tileSpan as d, vfTileSize as f } from "../styles/recipes/tile.js";
+import { TileRasterCache as p, patternOverride as m, tileGrid as h, vfTileGrid as g } from "../tile-grid.js";
+import { GridSnapController as _ } from "../grid-snap.js";
+import { DocumentListenersController as v } from "../document-listeners.js";
+import { SCREEN_CORNER as y, steppedCornerClip as b } from "../pixel-frame.js";
+import { LitElement as x, css as S, html as C, unsafeCSS as w } from "lit";
+import { property as T, queryAssignedElements as E } from "lit/decorators.js";
 //#region src/components/vf-desktop.ts
-var E = 1e6, D = 512, O = 342, k = 2, A = [
+var D = 1e6, O = 512, k = 342, A = 2, j = [
 	[
 		0,
 		0,
@@ -33,9 +34,9 @@ var E = 1e6, D = 512, O = 342, k = 2, A = [
 		1,
 		"#000000"
 	]
-], j = s(k, k, l(A)), M = c(k, k, A), N = u(k), P = class extends a(b) {
+], M = c(A, A, u(j)), N = l(A, A, j), P = d(A), F = class extends o(x) {
 	constructor(...e) {
-		super(...e), this.width = D, this.height = O, this.bezel = 0, this.scale = new t(this), this.gridSnap = new g(this), this._pattern = "", this.#e = new f(), this._zCounter = 0, this._awaitingUpgrade = !1, this._pointerGesture = !1, this._restoringFocus = !1, this._gestureEnd = new _(this, () => [[
+		super(...e), this.width = O, this.height = k, this.bezel = 0, this.scale = new n(this), this.gridSnap = new _(this), this._pattern = "", this.#e = new p(), this._zCounter = 0, this._activeWindow = null, this._deactivated = !1, this._awaitingUpgrade = !1, this._pointerGesture = !1, this._restoringFocus = !1, this._gestureEnd = new v(this, () => [[
 			document,
 			"pointerup",
 			this._onGestureEnd,
@@ -59,9 +60,9 @@ var E = 1e6, D = 512, O = 342, k = 2, A = [
 	}
 	static {
 		this.styles = [
-			o,
-			h,
-			x`
+			s,
+			g,
+			S`
       :host {
         display: block;
         position: relative;
@@ -110,8 +111,8 @@ var E = 1e6, D = 512, O = 342, k = 2, A = [
            belt-and-braces paint beneath the (opaque) kit fill. Override the
            whole tile via --vf-desktop-pattern — the tile grid renders the
            same token at the same documented geometry. */
-        background-image: var(--vf-desktop-pattern, ${C(j)});
-        ${d(k)}
+        background-image: var(--vf-desktop-pattern, ${w(M)});
+        ${f(A)}
         /* Forced colors: the checker is opaque literal white-and-black (a
            preserved url() tile), which ignores a dark theme entirely. A
            backdrop is decoration, and high-contrast mode is a request for
@@ -148,7 +149,7 @@ var E = 1e6, D = 512, O = 342, k = 2, A = [
       .screen > .vf-tile-grid {
         position: absolute;
         inset: 0;
-        --_vf-tile-image: var(--vf-desktop-pattern, ${C(M)});
+        --_vf-tile-image: var(--vf-desktop-pattern, ${w(N)});
       }
       /* Bezeled, the screen is inset by exactly one bezel width. The host
          is always the declared screen + 2×bezel (written in updated()), so
@@ -175,25 +176,25 @@ var E = 1e6, D = 512, O = 342, k = 2, A = [
       .corner {
         position: absolute;
         top: 0;
-        width: calc(var(--vf-scale, 1) * ${v[0]}px);
-        height: calc(var(--vf-scale, 1) * ${v.length}px);
+        width: calc(var(--vf-scale, 1) * ${y[0]}px);
+        height: calc(var(--vf-scale, 1) * ${y.length}px);
         background: var(--vf-black, #000);
         pointer-events: none;
         z-index: 2147483647;
       }
       .corner.tl {
         left: 0;
-        clip-path: ${C(y(v, "left"))};
+        clip-path: ${w(b(y, "left"))};
       }
       .corner.tr {
         right: 0;
-        clip-path: ${C(y(v, "right"))};
+        clip-path: ${w(b(y, "right"))};
       }
     `
 		];
 	}
 	fitWithin(e, t) {
-		let r = n(this), i = (e) => Math.max(0, Math.floor(e / r + 1e-6) - 2 * this.bezel);
+		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), {
 			width: this.width,
 			height: this.height
@@ -212,9 +213,15 @@ var E = 1e6, D = 512, O = 342, k = 2, A = [
 	bringToFront(e) {
 		this._restack(e), this._requestDomSync();
 	}
+	get activeWindow() {
+		return this._activeWindow;
+	}
+	clearActive() {
+		this._deactivated = !0, this._setActive(null);
+	}
 	_restack(e) {
 		let t = this._isUtility(e);
-		e.style.zIndex = String(++this._zCounter + (t ? E : 0)), t || this._setActive(e);
+		e.style.zIndex = String(++this._zCounter + (t ? D : 0)), t || this._setActive(e);
 	}
 	_requestDomSync() {
 		this._pointerGesture || this._syncDomOrder();
@@ -231,20 +238,22 @@ var E = 1e6, D = 512, O = 342, k = 2, A = [
 		let e = this._windows, t = null;
 		for (let n of e) if (!n.style.zIndex) {
 			let e = this._isUtility(n);
-			n.style.zIndex = String(++this._zCounter + (e ? E : 0)), e || (t = n);
+			n.style.zIndex = String(++this._zCounter + (e ? D : 0)), e || (t = n);
 		}
-		let n = t ?? this._topmost(e.filter((e) => !this._isUtility(e)));
-		n && this._setActive(n), customElements.get("vf-window") || this._normalizeAfterUpgrade();
+		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();
 	}
 	_normalizeAfterUpgrade() {
 		this._awaitingUpgrade || (this._awaitingUpgrade = !0, customElements.whenDefined("vf-window").then(() => {
 			if (this._awaitingUpgrade = !1, !this.isConnected) return;
-			let e = this._topmost(this._windows.filter((e) => !this._isUtility(e)));
-			e && this._setActive(e);
+			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)));
 		}));
 	}
-	_setActive(e) {
-		for (let t of this._windows) this._isUtility(t) || this._setWindowActive(t, t === e);
+	_setActive(t) {
+		t && (this._deactivated = !1);
+		for (let e of this._windows) this._isUtility(e) || this._setWindowActive(e, e === t);
+		t !== this._activeWindow && (this._activeWindow = t, e(this, "vf-activate", { window: t }));
 	}
 	_setWindowActive(e, t) {
 		if ("active" in e) {
@@ -274,37 +283,37 @@ var E = 1e6, D = 512, O = 342, k = 2, A = [
 		r && n instanceof HTMLElement && n.isConnected && this._deepActiveElement() !== n && (this._restoringFocus = !0, n.focus({ preventScroll: !0 }), this._restoringFocus = !1);
 	}
 	willUpdate(e) {
-		super.willUpdate(e), this._pattern = p(this, "--vf-desktop-pattern");
+		super.willUpdate(e), this._pattern = m(this, "--vf-desktop-pattern");
 	}
 	updated(e) {
-		if (e.has("bezel") && (this.bezel > 0 ? this.style.setProperty("--vf-desktop-bezel", r(this.bezel)) : this.style.removeProperty("--vf-desktop-bezel")), e.has("width") || e.has("height") || e.has("bezel")) {
-			let e = this.width ?? D, t = this.height ?? O;
-			this.style.width = r(e + 2 * this.bezel), this.style.height = r(t + 2 * this.bezel);
+		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 ?? O, t = this.height ?? k;
+			this.style.width = i(e + 2 * this.bezel), this.style.height = i(t + 2 * this.bezel);
 		}
 	}
 	render() {
-		let e = this.width ?? D, t = this.height ?? O, n = Math.ceil(e / N), i = Math.ceil(t / N), a = this._pattern ? S`<div class="vf-tile-grid">
-          ${m({
+		let e = this.width ?? O, t = this.height ?? k, n = Math.ceil(e / P), r = Math.ceil(t / P), a = this._pattern ? C`<div class="vf-tile-grid">
+          ${h({
 			cols: n,
-			rows: i,
-			tile: N
+			rows: r,
+			tile: P
 		})}
-        </div>` : S`<div
+        </div>` : C`<div
           class="vf-tile-raster"
-          style="width:${r(n * N)};height:${r(i * N)};background-image:${this.#e.for(k, k, A, n * N, i * N)}"
+          style="width:${i(n * P)};height:${i(r * P)};background-image:${this.#e.for(A, A, j, n * P, r * P)}"
         ></div>`;
-		return S`
+		return C`
       <div class=${this.bezel > 0 ? "desktop vf-snap bezeled" : "desktop vf-snap"}>
         <div class="screen${this._pattern ? " patterned" : ""}" part="desktop">
           ${a}
           <slot @slotchange=${this._onSlotChange}></slot>
-          ${this.bezel > 0 ? S`<div class="corner tl"></div>
+          ${this.bezel > 0 ? C`<div class="corner tl"></div>
                 <div class="corner tr"></div>` : null}
         </div>
       </div>
     `;
 	}
 };
-i([w({ type: Number })], P.prototype, "width", void 0), i([w({ type: Number })], P.prototype, "height", void 0), i([w({ type: Number })], P.prototype, "bezel", void 0), i([T({ selector: "vf-window" })], P.prototype, "_windows", void 0), P = i([e("vf-desktop")], P);
+a([T({ type: Number })], F.prototype, "width", void 0), a([T({ type: Number })], F.prototype, "height", void 0), a([T({ type: Number })], F.prototype, "bezel", void 0), a([E({ selector: "vf-window" })], F.prototype, "_windows", void 0), F = a([t("vf-desktop")], F);
 //#endregion
-export { P as VfDesktop };
+export { F as VfDesktop };