vintage-frames 0.1.0

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

@@ -0,0 +1,243 @@
+import { LitElement, type PropertyValues } from 'lit';
+declare const VfDesktop_base: (new (...args: any[]) => import("../position.js").VfPositionedInterface) & typeof LitElement;
+/**
+ * `<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
+ * `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
+ * ends), so tabbing walks the stack the way the eye does and Shift+Tab is
+ * its exact mirror.
+ *
+ * Utility windows (`vf-window[variant="utility"]`) stack in a floating tier
+ * above every document-tier window, restack only among themselves, and stand
+ * outside the single-active invariant entirely — clicking a palette neither
+ * deactivates the active document window nor greys the palette, exactly as
+ * System 7's floating windoids behaved while their application was frontmost.
+ *
+ * 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
+ * whole number of system pixels by construction (default 512×342, the
+ * compact Mac's screen). Pure CSS sizing is not supported; the page sets
+ * the numbers — directly, or via {@link VfDesktop.fitWithin} on
+ * `resize`/`onScaleChange` for a viewport-filling desktop — and positions
+ * the sized box with its own stylesheet, keeping any sub-system-pixel
+ * slack on its side. `bezel` (system px) draws the black screen surround —
+ * the CRT's unlit margin — around the screen, rounding its top corners
+ * with the classic corner mask.
+ *
+ * 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
+ *   (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`).
+ *
+ * @slot - Default slot: menu bar, windows, anything.
+ * @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 —
+ *   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)
+ */
+export declare class VfDesktop extends VfDesktop_base {
+    #private;
+    static styles: import("lit").CSSResult[];
+    /**
+     * Screen width in system px — the raster's own size, the way a WIND
+     * resource declared a window's. The host box renders at exactly
+     * `width + 2 × bezel` system px, always whole; a desktop is never sized
+     * by page CSS — the page sets these numbers (directly or via
+     * {@link fitWithin}) and positions the explicitly sized box with its own
+     * stylesheet, keeping whatever sub-system-pixel slack its layout has on
+     * its side of the fence. Defaults to the compact Mac's 512.
+     */
+    width: number;
+    /** Screen height in system px; see {@link width}. Defaults to 342. */
+    height: number;
+    /**
+     * Width of the black screen bezel, in system px (`0` = none), added onto
+     * the declared screen on every side — a `width="502" bezel="5"` desktop
+     * renders a 512-system-px host box. The compact Mac's CRT showed an
+     * unlit black margin between the desktop's raster and the case; `bezel`
+     * draws it around the screen and puts the classic screen-corner mask on
+     * the screen's two *top* corners — only the top pair was rounded in the
+     * framebuffer. Flow, window coordinates and the drag clip all belong to
+     * the screen, so windows crop at its edge. Inside a bezeled desktop a
+     * menu bar needs no `rounded` of its own — the desktop's mask lands on
+     * the same pixels.
+     */
+    bezel: 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
+     * page's half of the sizing contract: it owns the viewport, so it
+     * measures the box and hands it here on `resize` and `onScaleChange`
+     * (zoom and density moves change how many CSS px a system px costs),
+     * and the sub-system-pixel remainder stays on the page, behind the
+     * bezel. The epsilon forgives float error in the division so an
+     * exact-fit bound never drops a whole system pixel.
+     */
+    fitWithin(maxWidth: number, maxHeight: number): {
+        width: number;
+        height: number;
+    };
+    /** Slotted `vf-window` children (direct children only). */
+    private _windows;
+    /** Default-on display scaling (true 72dpi size); see src/scale.ts. */
+    private readonly scale;
+    /** Device-pixel grid snapping (opt in with applyGridSnap()); see src/grid-snap.ts. */
+    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
+     * src/tile-grid.ts). Re-read every update; a token swapped at runtime
+     * without touching the component wants a `requestUpdate()`.
+     */
+    private _pattern;
+    /** Monotonic z-index counter for window stacking. */
+    private _zCounter;
+    /** 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. */
+    private _pointerGesture;
+    /** Whether {@link _syncDomOrder} is putting focus back after a node move. */
+    private _restoringFocus;
+    /**
+     * Ends the pointer-gesture window that defers DOM reordering. Capture-phase
+     * on the document so a component's `stopPropagation` can't strand the flag,
+     * and detached on host disconnect by the controller.
+     */
+    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). */
+    private _isUtility;
+    /**
+     * Bring a slotted window to the front of its tier. A document-tier window
+     * also becomes the single active window (clearing `active` on the other
+     * document windows); a utility window restacks within the floating tier
+     * and leaves every `active` state alone.
+     *
+     * The light-DOM order of the slotted windows follows ({@link _syncDomOrder}):
+     * visual stacking and sequential focus order come from independent channels
+     * (z-index vs DOM position), and letting them drift apart is how a desktop
+     * tabs front-to-back one way and back-to-front the other, with widgets
+     * reachable only travelling backwards. Deferred to the end of any in-flight
+     * pointer gesture — moving a node clears the pointer capture a title-bar
+     * drag or grow-box resize holds on it, and a background window must stay
+     * draggable in the same gesture that raises it.
+     */
+    bringToFront(win: HTMLElement): 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. */
+    private _requestDomSync;
+    /**
+     * Raise the window an event originated in, skipping the restack/activation
+     * churn when it is already on top of its own tier (and, for a document
+     * window, already active): otherwise every click inside the front window
+     * would bump _zCounter and re-run the whole-fleet activation loop for
+     * nothing.
+     *
+     * Restacks z/active only — deliberately no DOM sync. A focus-driven raise
+     * MUST NOT move nodes: moving the window focus just entered re-orders the
+     * sequence mid-traversal, and a Shift+Tab that raises each window it
+     * enters (pushing it forward in the DOM, back the way the traversal came)
+     * would revisit it forever. The pointer path syncs at gesture end instead,
+     * which is also the next safe point after any keyboard-session staleness.
+     */
+    private _raise;
+    /**
+     * Delegated pointerdown: raise the window the event originated in. Any
+     * press opens the gesture window that defers DOM reordering (see
+     * {@link bringToFront}) — a raise can be requested mid-gesture by this
+     * press or by code the press runs.
+     */
+    private _onPointerDown;
+    /**
+     * The press ended (or was cancelled) — sync the DOM order. Unconditional
+     * rather than only-if-raised: the sync no-ops when order already agrees,
+     * and running it at every gesture end is what heals the staleness a
+     * keyboard-only stretch leaves behind (focus-driven raises change z but
+     * never move nodes — see {@link _raise}).
+     */
+    private _onGestureEnd;
+    /**
+     * Delegated focusin: raise the window keyboard focus entered, so tabbing
+     * into a background window brings it to front (and reveals its close/zoom
+     * widgets) just like a pointerdown would. Ignored while `_syncDomOrder` is
+     * putting focus back after a node move — the restore re-fires focusin on
+     * an element that may sit in a *background* window, and raising that
+     * window would undo the raise that triggered the sync.
+     */
+    private _onFocusIn;
+    /** The slotted window the event originated in, if any. */
+    private _windowFromEvent;
+    /** Wire up newly slotted windows: seed z-indices, normalize `active`. */
+    private _onSlotChange;
+    /**
+     * Re-assert the single-active-window state after slotted `<vf-window>`
+     * elements upgrade. One-shot: the flag collapses repeat slotchanges into a
+     * single wait, and once the definition is registered `_onSlotChange` stops
+     * calling this at all. If a consumer never imports vf-window the promise
+     * simply never settles — those elements render nothing either way.
+     */
+    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). */
+    private _setActive;
+    /**
+     * Set a window's `active` state. Prefers the property (the source of truth
+     * on an upgraded `vf-window`, whose reflection then wins over any pending
+     * initial-value reflection); falls back to the attribute for not-yet
+     * upgraded elements.
+     */
+    private _setWindowActive;
+    /** The window with the highest z-index, or null when there are none. */
+    private _topmost;
+    /** The innermost focused element, through open shadow roots. */
+    private _deepActiveElement;
+    /**
+     * Re-order the slotted windows in the light DOM to match their z-order
+     * (bottom-most first), so sequential focus navigation walks the stack the
+     * way the eye does — and Shift+Tab is its exact mirror. The utility band
+     * sorts the floating tier after every document window by construction.
+     *
+     * 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.
+     * Only runs between pointer gestures or programmatically, never from a
+     * focus-driven raise (see {@link _raise} for why).
+     */
+    private _syncDomOrder;
+    protected willUpdate(changed: PropertyValues<this>): void;
+    protected updated(changed: Map<PropertyKey, unknown>): void;
+    protected render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'vf-desktop': VfDesktop;
+    }
+}
+export {};

package/dist/components/vf-desktop.js

@@ -0,0 +1,310 @@
+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";
+//#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) {
+	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, () => [[
+			document,
+			"pointerup",
+			this._onGestureEnd,
+			!0
+		], [
+			document,
+			"pointercancel",
+			this._onGestureEnd,
+			!0
+		]]), this._onPointerDown = (e) => {
+			this._pointerGesture || (this._pointerGesture = !0, this._gestureEnd.attach());
+			let t = this._windowFromEvent(e);
+			t && this._raise(t);
+		}, this._onGestureEnd = () => {
+			this._gestureEnd.detach(), this._pointerGesture = !1, this._syncDomOrder();
+		}, this._onFocusIn = (e) => {
+			if (this._restoringFocus) return;
+			let t = this._windowFromEvent(e);
+			t && this._raise(t);
+		};
+	}
+	static {
+		this.styles = [
+			o,
+			h,
+			x`
+      :host {
+        display: block;
+        position: relative;
+      }
+      .desktop {
+        position: relative;
+        width: 100%;
+        height: 100%;
+      }
+      /* The bezel surface: the unlit black margin a compact Mac's CRT showed
+         between the raster and the case. Painted only when bezeled, so an
+         unbezeled desktop's paint is exactly the screen's. */
+      .desktop.bezeled {
+        background: var(--vf-black, #000);
+      }
+      .screen {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        /* Clip here rather than on the host so dragged windows crop at the
+           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
+           against some ancestor stacking context and paint the tiles beneath
+           this background. */
+        isolation: isolate;
+        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). */
+        @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 {
+        z-index: -1;
+        /* Forced colors: hidden with the underlay's tile, same posture — the
+           desktop goes flat Canvas (a backdrop is decoration). */
+        @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 —
+         a page's sub-system-pixel slack never enters the component. */
+      .bezeled .screen {
+        top: var(--vf-desktop-bezel, 0px);
+        left: var(--vf-desktop-bezel, 0px);
+        width: calc(100% - 2 * var(--vf-desktop-bezel, 0px));
+        height: calc(100% - 2 * var(--vf-desktop-bezel, 0px));
+      }
+      /* Slotted windows need a positioning context so z-index applies.
+         (An inline position: absolute set by a movable window wins.) */
+      ::slotted(vf-window) {
+        position: relative;
+      }
+      /* With a bezel, the screen's top corners wear the SCREEN_CORNER mask,
+         rounding into the surrounding black — the top pair only, because the
+         classic framebuffer masked only those; the raster's bottom corners
+         ran square. Children of .screen, so they anchor to the raster's own
+         corners (over a slotted menu bar's, which sit in the same place). The
+         hardware mask was in front of every pixel — a window dragged into a
+         corner slides under it — hence the maximal z-index. */
+      .corner {
+        position: absolute;
+        top: 0;
+        width: calc(var(--vf-scale, 1) * ${v[0]}px);
+        height: calc(var(--vf-scale, 1) * ${v.length}px);
+        background: var(--vf-black, #000);
+        pointer-events: none;
+        z-index: 2147483647;
+      }
+      .corner.tl {
+        left: 0;
+        clip-path: ${C(y(v, "left"))};
+      }
+      .corner.tr {
+        right: 0;
+        clip-path: ${C(y(v, "right"))};
+      }
+    `
+		];
+	}
+	fitWithin(e, t) {
+		let r = n(this), i = (e) => Math.max(0, Math.floor(e / r + 1e-6) - 2 * this.bezel);
+		return this.width = i(e), this.height = i(t), {
+			width: this.width,
+			height: this.height
+		};
+	}
+	#e;
+	connectedCallback() {
+		super.connectedCallback(), this.addEventListener("pointerdown", this._onPointerDown), this.addEventListener("focusin", this._onFocusIn);
+	}
+	disconnectedCallback() {
+		this.removeEventListener("pointerdown", this._onPointerDown), this.removeEventListener("focusin", this._onFocusIn), this._pointerGesture = !1, super.disconnectedCallback();
+	}
+	_isUtility(e) {
+		return e.getAttribute("variant") === "utility";
+	}
+	bringToFront(e) {
+		this._restack(e), this._requestDomSync();
+	}
+	_restack(e) {
+		let t = this._isUtility(e);
+		e.style.zIndex = String(++this._zCounter + (t ? E : 0)), t || this._setActive(e);
+	}
+	_requestDomSync() {
+		this._pointerGesture || this._syncDomOrder();
+	}
+	_raise(e) {
+		let t = this._isUtility(e), n = this._windows.filter((e) => this._isUtility(e) === t);
+		this._topmost(n) === e && (t || e.hasAttribute("active")) || this._restack(e);
+	}
+	_windowFromEvent(e) {
+		let t = this._windows;
+		return e.composedPath().find((e) => e instanceof HTMLElement && t.includes(e));
+	}
+	_onSlotChange() {
+		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);
+		}
+		let n = t ?? this._topmost(e.filter((e) => !this._isUtility(e)));
+		n && this._setActive(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);
+		}));
+	}
+	_setActive(e) {
+		for (let t of this._windows) this._isUtility(t) || this._setWindowActive(t, t === e);
+	}
+	_setWindowActive(e, t) {
+		if ("active" in e) {
+			let n = e;
+			n.active !== t && (n.active = t);
+		} else e.hasAttribute("active") !== t && e.toggleAttribute("active", t);
+	}
+	_topmost(e) {
+		let t = null, n = -Infinity;
+		for (let r of e) {
+			let e = Number(r.style.zIndex) || 0;
+			e >= n && (n = e, t = r);
+		}
+		return t;
+	}
+	_deepActiveElement() {
+		let e = document.activeElement;
+		for (; e?.shadowRoot?.activeElement;) e = e.shadowRoot.activeElement;
+		return e;
+	}
+	_syncDomOrder() {
+		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;
+		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");
+	}
+	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);
+		}
+	}
+	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
+		})}
+        </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 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>
+                <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);
+//#endregion
+export { P as VfDesktop };

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

@@ -0,0 +1,105 @@
+import { VfModalDialog } from '../modal-dialog.js';
+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):
+ *
+ * - **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.
+ *
+ * Open it with `show()` (or set the `open` attribute/property); close with
+ * `close()`. Escape closes it and fires `vf-close` with
+ * `{ reason: 'escape' }`; the close box and programmatic closing fire
+ * `{ reason: 'close' }`.
+ *
+ * @slot - Default slot: dialog body content.
+ * @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 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).
+ * @csspart body - The white content area.
+ * @csspart content - The scrolling region inside the body (heading + slotted
+ *   content, not the footer). Inert while the content fits; over-stuffed, it
+ *   scrolls under a System 7 rail and becomes a keyboard stop.
+ * @csspart footer - The action row wrapping the buttons.
+ * @csspart buttons - The button group inside the footer.
+ * @fires vf-close - Dialog closed. Detail `{ reason: 'escape' | 'close' }`.
+ * @cssprop --vf-dots-pattern - the windoid bar's dot-grid dither — a 2×2 tile,
+ *   one black pixel at the origin (`vfDots`; override the whole pattern like
+ *   `--vf-desktop-pattern`)
+ * @cssprop --vf-titlebar-height - window/dialog title bars
+ * @cssprop --vf-scrollbar-thumb - scrollbar thumb/elevator (white)
+ * @cssprop --vf-scrollbar-track - the scroll trough's base color under the
+ *   dot-dither (white)
+ */
+export declare class VfDialog extends VfModalDialog {
+    static styles: import("lit").CSSResult[];
+    /**
+     * Title-bar drag-to-move (shared with `vf-window` via {@link DragController}).
+     * The gesture states the modal's `top`/`left` in system px — viewport
+     * coordinates, since `showModal()` puts the box in the top layer — so a
+     * dragged dialog is placed exactly the way an authored one is, and holds its
+     * spot through a zoom rather than being re-centered by it. Inert with
+     * `frame="plain"` — no bar is rendered, so no pointer ever reaches the
+     * controller (dBoxProc dialogs don't move).
+     */
+    private readonly _drag;
+    /** Holds the centered title patch on the placement lattice (src/chrome.ts). */
+    private readonly _titleCenter;
+    /** Title text: the bar's centered patch, or the plain frame's heading. */
+    heading: string;
+    /**
+     * Accessible name for the dialog (`aria-label`), for a dialog with no
+     * `heading` — an untitled title bar has no text to be named by. Ignored when
+     * empty and a `heading` is set (the title patch names the dialog then);
+     * defaults to `'Dialog'` when neither is given.
+     */
+    label: string;
+    /**
+     * Show the close box (left side of the title bar). Off by default — the
+     * bare movable-modal bar. Ignored with `frame="plain"` (no bar). Clicking
+     * it closes the dialog and fires `vf-close` with `{ reason: 'close' }`.
+     */
+    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?: 'plain';
+    /** Whether the `buttons` slot has assigned content (drives the footer). */
+    private _hasButtons;
+    private _content;
+    /** Whether the body content overflows its box (drives the content stop). */
+    private _scrollable;
+    /**
+     * Activates the System 7 rail — and the content region's keyboard stop —
+     * once the body content overflows the declared (or viewport-capped) box.
+     */
+    private readonly _scrollState;
+    /** Syncs the drawn rail to the content region and drives its interactions. */
+    private readonly _rail;
+    /** Content changed under the fixed box — re-measure the overflow. */
+    private _onBodySlotChange;
+    private _onCloseClick;
+    protected render(): unknown;
+    private _onButtonsSlotChange;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'vf-dialog': VfDialog;
+    }
+}