vintage-frames 0.3.0 → 0.5.0

package/dist/components/vf-container.js

@@ -3,16 +3,29 @@ 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 { vfBase as i } from "../styles/recipes/host.js";
-import { GridSnapController as a } from "../grid-snap.js";
-import { VfSized as o } from "../size.js";
-import { LitElement as s, css as c, html as l } from "lit";
+import { parsePattern as a } from "../patterns.js";
+import { PatternFillController as o, vfPatternFill as s } from "../pattern-fill.js";
+import { GridSnapController as c } from "../grid-snap.js";
+import { VfSized as l } from "../size.js";
+import { LitElement as u, css as d, html as f } from "lit";
+import { property as p, query as m } from "lit/decorators.js";
 //#region src/components/vf-container.ts
-var u = class extends o(r(s)) {
+var h = class extends l(r(u)) {
 	constructor(...e) {
-		super(...e), this.scale = new t(this), this.gridSnap = new a(this);
+		super(...e), this._pattern = null, this.#e = !1, this.scale = new t(this), this.gridSnap = new c(this), this.patternFill = new o(this, {
+			getBox: () => this.box,
+			getPattern: () => this._pattern,
+			getSize: () => ({
+				width: this.width,
+				height: this.height
+			})
+		});
 	}
 	static {
-		this.styles = [i, c`
+		this.styles = [
+			i,
+			s,
+			d`
       :host {
         display: block;
         /* Shrink-wrap an undeclared axis rather than claim the parent's
@@ -75,12 +88,21 @@ var u = class extends o(r(s)) {
       ::slotted([fill-height]) {
         height: 100%;
       }
-    `];
+    `
+		];
+	}
+	#e;
+	willUpdate(e) {
+		super.willUpdate(e), e.has("pattern") && (this._pattern = a(this.pattern), this._pattern === null && this.pattern?.trim() && !this.#e && (this.#e = !0, console.warn(`vf-container: unknown pattern "${this.pattern}" — a library name (docs/PATTERNS.md) or sixteen hex digits. Painting nothing.`)));
 	}
 	render() {
-		return l`<div class="vf-snap box"><slot></slot></div>`;
+		return f`<div
+      class="vf-snap box vf-pattern-fill${this._pattern ? " vf-patterned" : ""}"
+    >
+      <slot></slot>
+    </div>`;
 	}
 };
-u = n([e("vf-container")], u);
+n([p()], h.prototype, "pattern", void 0), n([m(".box")], h.prototype, "box", void 0), h = n([e("vf-container")], h);
 //#endregion
-export { u as VfContainer };
+export { h as VfContainer };

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

@@ -3,8 +3,10 @@ declare const VfDesktop_base: (new (...args: any[]) => import("../position.js").
 /**
  * `<vf-desktop>` — the full-bleed classic desktop container.
  *
- * Renders the 50%-dither gray desktop pattern and manages the stacking order
- * and `active` state of slotted `vf-window` children: a `pointerdown` or
+ * Renders the desktop pattern — the classic 50% dither by default, or any of
+ * the standard patterns by name (`pattern`, System 7's General Controls
+ * setting) — and manages the stacking order and `active` state of slotted
+ * `vf-window` children: a `pointerdown` or
  * `focusin` (keyboard focus) anywhere inside a window brings it to the front
  * and makes it the single active window. The windows' light-DOM order is kept
  * in step with the stacking order (bottom-most first, at pointer-gesture
@@ -17,6 +19,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
@@ -29,27 +45,41 @@ declare const VfDesktop_base: (new (...args: any[]) => import("../position.js").
  * the CRT's unlit margin — around the screen, rounding its top corners
  * with the classic corner mask.
  *
+ * **`pattern`** names the desktop pattern — `gray-50` (the dither) by
+ * default, any of the 38 standard patterns (docs/PATTERNS.md), or sixteen
+ * hex digits stating a custom 8×8 pattern, as on `vf-container`. It is
+ * painted as the screen's own background: black ink on an opaque white
+ * paper, one whole-surface raster at one image px per system px, 1-bit at
+ * every density and zoom (src/pattern-fill.ts).
+ *
  * Custom properties:
- * - `--vf-desktop-pattern` — the dither's tile art (default a 1-bit 50%
- *   checker, opaque black-on-white on a 30-system-px tile). Overriding it
- *   renders the token as a placed tile grid at that same 30-px geometry
+ * - `--vf-desktop-pattern` — a consumer's own tile art in place of the
+ *   pattern (the kit's default is a 1-bit 50% checker, opaque
+ *   black-on-white on a 30-system-px tile). Set, it wins over `pattern` and
+ *   renders as a placed tile grid at that same 30-px geometry
  *   (src/tile-grid.ts); a token swapped at runtime without touching the
  *   component wants a `requestUpdate()`.
- * - `--vf-desktop` — base color painted *under* the pattern layer (default
- *   `#808080`). The default tile is opaque, so this only becomes visible when
- *   `--vf-desktop-pattern` is overridden with a tile that has transparent
- *   cells (or with `none`).
+ * - `--vf-desktop` — base color painted *under* the pattern (default
+ *   `#808080`). The pattern's paper is opaque, so this only becomes visible
+ *   when `--vf-desktop-pattern` is overridden with a tile that has
+ *   transparent cells (or with `none`).
  *
  * @slot - Default slot: menu bar, windows, anything.
- * @csspart desktop - The dithered screen surface — the whole-system-px
+ * @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 patterned screen surface — the whole-system-px
  *   raster (inset by `bezel` when one is set).
- * @cssprop [--vf-desktop=#808080] - base color under the desktop dither —
- *   occluded by the default (opaque) tile, so it only shows through a custom
- *   `--vf-desktop-pattern`
- * @cssprop --vf-desktop-pattern - the desktop dither's art — a 50% checker
- *   drawn as opaque black-on-white rects, on a 30-system-px tile. Override the
- *   whole tile; consumer art renders as a placed tile grid at that same
- *   geometry (raster art magnifies nearest-neighbor, the `vf-img` idiom)
+ * @cssprop [--vf-desktop=#808080] - base color under the desktop pattern —
+ *   occluded by the pattern's opaque paper, so it only shows through a
+ *   custom `--vf-desktop-pattern`
+ * @cssprop --vf-desktop-pattern - a consumer's own desktop tile, in place of
+ *   `pattern` — the kit's default is the 50% checker drawn as opaque
+ *   black-on-white rects on a 30-system-px tile. Override the whole tile;
+ *   consumer art renders as a placed tile grid at that same geometry (raster
+ *   art magnifies nearest-neighbor, the `vf-img` idiom)
  */
 export declare class VfDesktop extends VfDesktop_base {
     #private;
@@ -79,6 +109,17 @@ export declare class VfDesktop extends VfDesktop_base {
      * the same pixels.
      */
     bezel: number;
+    /**
+     * The desktop pattern — System 7's General Controls setting. A library
+     * pattern by name (`gray-50`, the classic dither, by default; `gray-75`,
+     * `bricks`, … — docs/PATTERNS.md) or sixteen hex digits stating a custom
+     * 8×8 pattern, as on `vf-container`. Painted black on opaque white over
+     * the whole screen, 1-bit at every density and zoom. A
+     * `--vf-desktop-pattern` token override still wins and renders the
+     * consumer's tile as a placed grid; an unrecognized value warns once and
+     * keeps the dither.
+     */
+    pattern: string | null | undefined;
     /**
      * 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
@@ -101,13 +142,38 @@ export declare class VfDesktop extends VfDesktop_base {
     private readonly gridSnap;
     /**
      * The consumer's `--vf-desktop-pattern` override, or `''` for the kit
-     * dither — which of the two exact-fill paths render() takes (see
+     * pattern — which of the two exact-fill paths render() takes (see
      * src/tile-grid.ts). Re-read every update; a token swapped at runtime
      * without touching the component wants a `requestUpdate()`.
      */
-    private _pattern;
+    private _token;
+    /** `pattern`, resolved — the kit path's art; the dither when unset. */
+    private _desktopPattern;
+    /** The screen surface the pattern paints on; exists from the first render. */
+    private readonly screen;
+    /**
+     * The desktop pattern, painted as the screen's own background
+     * (src/pattern-fill.ts) from the declared raster — scale-independent, so
+     * density and zoom re-encode nothing — and silent while a consumer token
+     * owns the fill.
+     */
+    private readonly patternFill;
     /** 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 +209,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 +277,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,41 +1,29 @@
-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, tileRects as l, tileSpan as u } from "../styles/recipes/tile.js";
+import { PATTERNS as d, parsePattern as f, patternMotif as p } from "../patterns.js";
+import { patternOverride as m, tileGrid as h, vfTileGrid as g } from "../tile-grid.js";
+import { PatternFillController as _, vfPatternFill as v } from "../pattern-fill.js";
+import { GridSnapController as y } from "../grid-snap.js";
+import { DocumentListenersController as b } from "../document-listeners.js";
+import { SCREEN_CORNER as x, steppedCornerClip as S } from "../pixel-frame.js";
+import { LitElement as C, css as w, html as T, unsafeCSS as E } from "lit";
+import { property as D, query as O, queryAssignedElements as k } from "lit/decorators.js";
 //#region src/components/vf-desktop.ts
-var E = 1e6, D = 512, O = 342, k = 2, A = [
-	[
-		0,
-		0,
-		2,
-		2,
-		"#ffffff"
-	],
-	[
-		0,
-		0,
-		1,
-		1,
-		"#000000"
-	],
-	[
-		1,
-		1,
-		1,
-		1,
-		"#000000"
-	]
-], j = s(k, k, l(A)), M = c(k, k, A), N = u(k), P = class extends a(b) {
+var A = 1e6, j = 512, M = 342, N = "gray-50", P = p(d[N], "#000000", "#ffffff"), F = c(P.width, P.height, l(P.rects)), I = u(P.width), L = class extends o(C) {
 	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 = j, this.height = M, this.bezel = 0, this.pattern = N, this.scale = new n(this), this.gridSnap = new y(this), this._token = "", this._desktopPattern = d[N], this.#e = !1, this.patternFill = new _(this, {
+			getBox: () => this.screen,
+			getPattern: () => this._token ? null : this._desktopPattern,
+			getSize: () => ({
+				width: this.width ?? j,
+				height: this.height ?? M
+			})
+		}), this._zCounter = 0, this._activeWindow = null, this._deactivated = !1, this._awaitingUpgrade = !1, this._pointerGesture = !1, this._restoringFocus = !1, this._gestureEnd = new b(this, () => [[
 			document,
 			"pointerup",
 			this._onGestureEnd,
@@ -59,9 +47,10 @@ var E = 1e6, D = 512, O = 342, k = 2, A = [
 	}
 	static {
 		this.styles = [
-			o,
-			h,
-			x`
+			s,
+			g,
+			v,
+			w`
       :host {
         display: block;
         position: relative;
@@ -87,69 +76,48 @@ var E = 1e6, D = 512, O = 342, k = 2, A = [
            raster's corrected edge, not the host's possibly-fractional one. */
         overflow: hidden;
         /* An isolated stacking context, so the tile grid's z-index: -1 below
-           resolves HERE — above this element's own underlay background, under
-           every slotted child. Without it the negative z-index would resolve
+           resolves HERE — above this element's own background, under every
+           slotted child. Without it the negative z-index would resolve
            against some ancestor stacking context and paint the tiles beneath
            this background. */
         isolation: isolate;
+        /* The base color. Under the kit pattern it is covered by the fill's
+           opaque white paper (vfPatternFill) — the authentic black-on-white
+           dither — and shows only through a consumer token's translucent
+           tile (see the --vf-desktop note in the class doc). The pattern
+           itself is this element's own background, written by the
+           PatternFillController: one whole-surface raster at one image px
+           per system px, magnified nearest-neighbor, which is what keeps it
+           1-bit at the zoom-minted scales a repeating fill cannot hold
+           (src/tile-grid.ts, src/pattern-fill.ts). */
         background-color: var(--vf-desktop, #808080);
-        /* Classic 50% checker dither as a crisp 1-bit SVG tile — a 2×2 motif
-           painting an opaque white base with two black pixels on the diagonal.
-           Black-on-white is the authentic System 7 dither, so the tile is
-           deliberately opaque and covers the background-color above (see the
-           --vf-desktop note in the class doc). Scaled with --vf-scale so each
-           system pixel lands on whole device pixels; unlike a conic-gradient
-           (whose hard stops the browser feathers into a blur), the SVG rects are
-           pixel-exact.
-
-           This CSS-repeated layer is the UNDERLAY: what actually shows is the
-           whole-surface raster (or, under a consumer pattern token, the
-           placed tile grid) rendered over it — see src/tile-grid.ts — which
-           is what keeps the dither 1-bit at the zoom-minted scales a
-           repeating fill cannot hold. The declaration stays as
-           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)}
-        /* 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
-           less of that — so the desktop goes flat Canvas (the forced
-           background-color) rather than re-dithering in the user's pair.
-           Deliberate; the windoid dot bar, which carries meaning, IS
-           re-inked (see vfDots). */
+        /* Forced colors: the pattern is literal black ink on white, which
+           ignores a dark theme entirely. A backdrop is decoration, and
+           high-contrast mode is a request for less of that — so the desktop
+           goes flat Canvas (the forced background-color) rather than
+           re-dithering in the user's pair. Deliberate; the windoid dot bar,
+           which carries meaning, IS re-inked (see vfDots). The recipe drops
+           the image too; stated here as well so the posture lives with the
+           surface. */
         @media (forced-colors: active) {
           background-image: none;
         }
       }
-      /* With a consumer pattern token in play the exact fill is the placed
-         tile grid, and the CSS-repeated underlay must not paint: a
-         translucent consumer tile would show the underlay's *drifting* copy
-         of the same art through itself. The base color stays — that is the
-         layer translucent art composites over, as documented. */
-      .screen.patterned {
-        background-image: none;
-      }
-      /* The dither's exact fill — the whole-surface raster (kit art) or the
-         placed tile grid (consumer art) — kept under every slotted child
-         (menu bar, windows) by the negative z-index the .screen isolation
-         scopes. The grid's tiles resolve the pattern token stated once here
-         rather than per tile. */
-      .screen > .vf-tile-grid,
-      .screen > .vf-tile-raster {
+      /* A consumer token's exact fill — the placed tile grid — kept under
+         every slotted child (menu bar, windows) by the negative z-index the
+         .screen isolation scopes. The grid's tiles resolve the token stated
+         once here rather than per tile; the fallback is the kit dither for
+         the record, never reached (the grid renders only under a set token). */
+      .screen > .vf-tile-grid {
+        position: absolute;
+        inset: 0;
         z-index: -1;
-        /* Forced colors: hidden with the underlay's tile, same posture — the
-           desktop goes flat Canvas (a backdrop is decoration). */
+        --_vf-tile-image: var(--vf-desktop-pattern, ${E(F)});
+        /* Forced colors: hidden with the pattern, same posture. */
         @media (forced-colors: active) {
           display: none;
         }
       }
-      .screen > .vf-tile-grid {
-        position: absolute;
-        inset: 0;
-        --_vf-tile-image: var(--vf-desktop-pattern, ${C(M)});
-      }
       /* Bezeled, the screen is inset by exactly one bezel width. The host
          is always the declared screen + 2×bezel (written in updated()), so
          this subtraction is exact and the raster is whole by construction —
@@ -175,25 +143,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) * ${x[0]}px);
+        height: calc(var(--vf-scale, 1) * ${x.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: ${E(S(x, "left"))};
       }
       .corner.tr {
         right: 0;
-        clip-path: ${C(y(v, "right"))};
+        clip-path: ${E(S(x, "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 +180,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 ? A : 0)), t || this._setActive(e);
 	}
 	_requestDomSync() {
 		this._pointerGesture || this._syncDomOrder();
@@ -231,20 +205,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 ? A : 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 +250,40 @@ 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");
+		if (super.willUpdate(e), this._token = m(this, "--vf-desktop-pattern"), e.has("pattern")) {
+			let e = f(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 ${N}.`)), this._desktopPattern = e ?? d[N];
+		}
 	}
 	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 ?? j, t = this.height ?? M;
+			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({
-			cols: n,
-			rows: i,
-			tile: N
+		let e = this.width ?? j, t = this.height ?? M, n = this._token ? T`<div class="vf-tile-grid">
+          ${h({
+			cols: Math.ceil(e / I),
+			rows: Math.ceil(t / I),
+			tile: I
 		})}
-        </div>` : S`<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)}"
-        ></div>`;
-		return S`
+        </div>` : null;
+		return T`
       <div class=${this.bezel > 0 ? "desktop vf-snap bezeled" : "desktop vf-snap"}>
-        <div class="screen${this._pattern ? " patterned" : ""}" part="desktop">
-          ${a}
+        <div
+          class="screen vf-pattern-fill${this._token ? "" : " vf-patterned"}"
+          part="desktop"
+        >
+          ${n}
           <slot @slotchange=${this._onSlotChange}></slot>
-          ${this.bezel > 0 ? S`<div class="corner tl"></div>
+          ${this.bezel > 0 ? T`<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([D({ type: Number })], L.prototype, "width", void 0), a([D({ type: Number })], L.prototype, "height", void 0), a([D({ type: Number })], L.prototype, "bezel", void 0), a([D()], L.prototype, "pattern", void 0), a([k({ selector: "vf-window" })], L.prototype, "_windows", void 0), a([O(".screen")], L.prototype, "screen", void 0), L = a([t("vf-desktop")], L);
 //#endregion
-export { P as VfDesktop };
+export { L as VfDesktop };

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

@@ -4,19 +4,21 @@ import './vf-button-group.js';
  * `<vf-dialog>` — the System 7 modal dialog shell.
  *
  * Two chromes, one modal lifecycle (native `<dialog>` for top-layer rendering
- * and focus trapping, with a fully transparent backdrop — no dimming):
+ * and focus trapping, with a fully transparent backdrop — no dimming). Both
+ * are the same dBoxProc double frame — 1px outer rule, 2px gap, 2px inner
+ * band, no shadow ({@link vfModalFrame}):
  *
- * - **Default:** a striped title bar with a centered title over a white body —
- *   the movable-modal look. Drag the title bar to move it. `closable` adds the
- *   standard close box (left of the bar) — the HIG's own figures disagree on
- *   whether a movable modal carries one (Figure 5-1 says yes, Figure 6-1 and
- *   the Chapter 6 text say no), so the component enables either reading rather
- *   than enforcing one.
- * - **`frame="plain"`:** the classic dBoxProc modal-dialog frame — 1px outer
- *   border, 2px gap, 2px inner band, no shadow, no title bar — and immovable,
- *   like the original. A `heading` renders as a centered display-face heading
- *   at the top of the body (the reference art's "Dialog title"); `closable` is
- *   ignored, there being no bar to carry the widget.
+ * - **Default:** the movable modal (movableDBoxProc) — the striped title bar
+ *   set into the top of that frame, with a centered title over a white body.
+ *   Drag the title bar to move it. `closable` adds the standard close box
+ *   (left of the bar) — the HIG's own figures disagree on whether a movable
+ *   modal carries one (Figure 5-1 says yes, Figure 6-1 and the Chapter 6 text
+ *   say no), so the component enables either reading rather than enforcing
+ *   one.
+ * - **`frame="plain"`:** the modal dialog box — the bare frame, no title bar —
+ *   and immovable, like the original. A `heading` renders as a centered
+ *   display-face heading at the top of the body (the reference art's "Dialog
+ *   title"); `closable` is ignored, there being no bar to carry the widget.
  *
  * Open it with `show()` (or set the `open` attribute/property); close with
  * `close()`. Escape closes it and fires `vf-close` with
@@ -27,7 +29,8 @@ import './vf-button-group.js';
  * @slot buttons - Optional action buttons. Rendered as a bottom-right
  *   `vf-button-group` (equal-width, faces aligned); the footer only takes
  *   space when the slot is populated.
- * @csspart frame - The outer chrome frame (striped-bar or plain).
+ * @csspart frame - The outer frame (the double frame's 1px rule; the bar and
+ *   the inner band sit inside it).
  * @csspart title-bar - The striped title bar (default chrome only).
  * @csspart title - The centered title patch (or the plain-frame heading).
  * @csspart close-box - The close widget (`closable`, default chrome only).
@@ -76,8 +79,9 @@ export declare class VfDialog extends VfModalDialog {
      */
     closable: boolean;
     /**
-     * Frame chrome. Omit for the striped title bar (movable modal); `'plain'`
-     * for the immovable dBoxProc double frame with no bar (modal dialog box).
+     * Frame chrome. Omit for the movable modal (the double frame with the
+     * striped title bar set into it); `'plain'` for the immovable modal dialog
+     * box (the bare double frame, no bar).
      */
     frame?: 'plain';
     /** Whether the `buttons` slot has assigned content (drives the footer). */