vintage-frames 0.14.1 → 0.16.0

package/dist/cursor.js

@@ -2,14 +2,10 @@ import { truePixelRatio as e } from "./zoom.js";
 import { effectiveScale as t, onScaleChange as n } from "./scale.js";
 import { prefersReducedMotion as r } from "./motion.js";
 import { VfModalDialog as i } from "./modal-dialog.js";
-import { CURSOR_ARROW as a, CURSOR_CROSSHAIR as o, CURSOR_I_BEAM as s, CURSOR_WAIT as c } from "./cursor-art.js";
+import { onTopLayerEntry as a } from "./top-layer.js";
+import { CURSOR_ARROW as o, CURSOR_CROSSHAIR as s, CURSOR_I_BEAM as c, CURSOR_WAIT as l } from "./cursor-art.js";
 //#region src/cursor.ts
-var l = [
-	"arrow",
-	"text",
-	"crosshair",
-	"wait"
-], u = typeof navigator < "u" && (navigator.vendor ?? "").startsWith("Apple"), d = /* @__PURE__ */ new Set([
+var u = typeof navigator < "u" && (navigator.vendor ?? "").startsWith("Apple"), d = /* @__PURE__ */ new Set([
 	"text",
 	"password",
 	"search",
@@ -21,7 +17,7 @@ var l = [
 function f(e) {
 	return e instanceof HTMLTextAreaElement ? !e.disabled : e instanceof HTMLInputElement ? !e.disabled && d.has(e.type) : e instanceof HTMLElement && e.isContentEditable;
 }
-function p(e, t) {
+function ee(e, t) {
 	let n = document.elementFromPoint(e, t);
 	for (; n?.shadowRoot;) {
 		let r = n.shadowRoot.elementFromPoint(e, t);
@@ -30,7 +26,7 @@ function p(e, t) {
 	}
 	return n;
 }
-function m(e) {
+function p(e) {
 	let t = [];
 	for (; e;) {
 		t.push(e);
@@ -39,22 +35,23 @@ function m(e) {
 	}
 	return t;
 }
-function h() {
+function m() {
 	for (let e of document.querySelectorAll("[aria-busy=\"true\"]")) if (e instanceof i && e.open) return !0;
 	return !1;
 }
-function g(d = {}) {
-	let { anchor: g = document.querySelector("vf-desktop") ?? document.documentElement, waitFrameMs: _ = 250, arrow: v = a, text: y = s, crosshair: b = o, wait: x = c } = d, S = {
-		arrow: v,
-		text: y,
-		crosshair: b,
-		wait: x
-	}, C = document.documentElement, w = new AbortController(), { signal: T } = w, E = document.createElement("style");
-	E.textContent = "* { cursor: none !important }";
-	let D = document.createElement("img");
-	D.alt = "", D.setAttribute("aria-hidden", "true");
-	let O = "showPopover" in D;
-	O && D.setAttribute("popover", "manual"), Object.assign(D.style, {
+function h(d = {}) {
+	let { anchor: h = document.querySelector("vf-desktop") ?? document.documentElement, waitFrameMs: g = 250, arrow: _ = o, text: v = c, crosshair: y = s, wait: b = l, kinds: x = {} } = d, S = {
+		...x,
+		arrow: _,
+		text: v,
+		crosshair: y,
+		wait: b
+	}, C = new Set(Object.keys(S)), w = document.documentElement, T = new AbortController(), { signal: E } = T, D = document.createElement("style");
+	D.textContent = "* { cursor: none !important }";
+	let O = document.createElement("img");
+	O.alt = "", O.setAttribute("aria-hidden", "true");
+	let k = "showPopover" in O;
+	k && O.setAttribute("popover", "manual"), Object.assign(O.style, {
 		position: "fixed",
 		inset: "0 auto auto 0",
 		margin: "0",
@@ -67,15 +64,15 @@ function g(d = {}) {
 		visibility: "hidden",
 		zIndex: "2147483647"
 	});
-	let k = /* @__PURE__ */ new Map();
-	for (let e of l) {
+	let A = /* @__PURE__ */ new Map();
+	for (let e of C) {
 		let t = S[e];
 		if (!t) continue;
 		let n = t.invert && u ? t.staticSrc ?? t.src : t.src, r = Array.isArray(n) ? n : [n], i = r.map((e) => {
 			let t = new Image();
 			return t.src = e, t;
 		});
-		k.set(e, {
+		A.set(e, {
 			art: t,
 			frames: r,
 			xor: !!t.invert && !u,
@@ -83,68 +80,68 @@ function g(d = {}) {
 			ready: !1
 		});
 	}
-	let A = (e) => Promise.all(e.images.map((e) => e.decode())).then(() => {
+	let j = (e) => Promise.all(e.images.map((e) => e.decode())).then(() => {
 		e.ready = !0;
-	}), j = 1, M = 3, N = 0, P = 0, F = -1, I = -1, L = "arrow", R = k.get("arrow"), z = 0, B = 0, V = () => {
-		if (F < 0) return;
-		let { hotspotX: e = 0, hotspotY: t = 0 } = R.art, n = Math.floor((F * j - N) / M), r = Math.floor((I * j - P) / M), i = (N + (n - e) * M) / j, a = (P + (r - t) * M) / j;
-		D.style.transform = `translate(${i}px, ${a}px)`;
-	}, H = () => {
-		j = e() || 1, M = Math.max(1, Math.round(t(g) * j));
-		let n = g.getBoundingClientRect();
-		N = Math.round(n.left * j), P = Math.round(n.top * j), D.style.width = `${R.art.width * M / j}px`, D.style.height = `${R.art.height * M / j}px`, V();
-	}, U = (e) => {
-		let t = k.get(e), n = t?.ready ? t : k.get("arrow");
-		(e !== L || n !== R) && (L = e, R = n, D.dataset.kind = e, window.clearInterval(B), z = 0, D.src = R.frames[0], D.style.filter = R.xor ? "invert(1)" : "", D.style.mixBlendMode = R.xor ? "difference" : "", R.frames.length > 1 && !r() && (B = window.setInterval(() => {
-			z = (z + 1) % R.frames.length, D.src = R.frames[z];
-		}, _)), H());
-	}, W = () => {
-		if (h()) return "wait";
-		let e = m(p(F, I));
+	}), M = 1, N = 3, P = 0, F = 0, I = -1, L = -1, R = "arrow", z = A.get("arrow"), B = 0, V = 0, H = () => {
+		if (I < 0) return;
+		let { hotspotX: e = 0, hotspotY: t = 0 } = z.art, n = Math.floor((I * M - P) / N), r = Math.floor((L * M - F) / N), i = (P + (n - e) * N) / M, a = (F + (r - t) * N) / M;
+		O.style.transform = `translate(${i}px, ${a}px)`;
+	}, U = () => {
+		M = e() || 1, N = Math.max(1, Math.round(t(h) * M));
+		let n = h.getBoundingClientRect();
+		P = Math.round(n.left * M), F = Math.round(n.top * M), O.style.width = `${z.art.width * N / M}px`, O.style.height = `${z.art.height * N / M}px`, H();
+	}, W = (e) => {
+		let t = A.get(e), n = t?.ready ? t : A.get("arrow");
+		(e !== R || n !== z) && (R = e, z = n, O.dataset.kind = e, window.clearInterval(V), B = 0, O.src = z.frames[0], O.style.filter = z.xor ? "invert(1)" : "", O.style.mixBlendMode = z.xor ? "difference" : "", z.frames.length > 1 && !r() && (V = window.setInterval(() => {
+			B = (B + 1) % z.frames.length, O.src = z.frames[B];
+		}, g)), U());
+	}, G = () => {
+		if (m()) return "wait";
+		let e = p(ee(I, L));
 		if (e.some((e) => e.getAttribute("aria-busy") === "true")) return "wait";
 		for (let t of e) {
 			let e = t.getAttribute("data-vf-cursor");
-			if (e && l.includes(e)) return e;
+			if (e && C.has(e)) return e;
 		}
 		return e[0] && f(e[0]) ? "text" : "arrow";
-	}, G = () => {
-		F < 0 || U(W());
-	}, K = 0, q = () => {
-		cancelAnimationFrame(K), K = requestAnimationFrame(() => {
-			K = requestAnimationFrame(H);
+	}, K = () => {
+		I < 0 || W(G());
+	}, q = 0, J = () => {
+		cancelAnimationFrame(q), q = requestAnimationFrame(() => {
+			q = requestAnimationFrame(U);
 		});
-	}, J = () => {
-		if (!(!O || !D.isConnected)) try {
-			D.hidePopover(), D.showPopover();
+	}, Y = () => {
+		if (!(!k || !O.isConnected)) try {
+			O.hidePopover(), O.showPopover();
 		} catch {}
-	}, Y = new MutationObserver((e) => {
+	}, X = new MutationObserver((e) => {
 		for (let t of e) {
 			let e = t.target;
 			if (t.attributeName === "open" && e instanceof i && e.open) {
-				J();
+				Y();
 				break;
 			}
 		}
-		G();
-	}), X = () => {
-		D.style.visibility = "hidden";
-	}, Z = (e) => {
+		K();
+	}), Z = () => {
+		O.style.visibility = "hidden";
+	}, Q = (e) => {
 		if (e.pointerType === "touch") {
-			X();
+			Z();
 			return;
 		}
-		F = e.clientX, I = e.clientY, G(), V(), D.style.visibility = "visible";
-	}, Q = !1, $ = () => {
-		if (Q) return;
-		document.body.append(D), O && D.showPopover(), D.dataset.kind = "arrow", H(), document.head.append(E), C.style.setProperty("--vf-cursor", "none");
+		I = e.clientX, L = e.clientY, K(), H(), O.style.visibility = "visible";
+	}, $ = !1, te = () => {
+		if ($) return;
+		document.body.append(O), k && O.showPopover(), O.dataset.kind = "arrow", U(), document.head.append(D), w.style.setProperty("--vf-cursor", "none");
 		let e = {
 			capture: !0,
 			passive: !0,
-			signal: T
+			signal: E
 		};
-		window.addEventListener("pointermove", Z, e), window.addEventListener("pointerdown", Z, e), window.addEventListener("pointercancel", X, e), document.addEventListener("mouseleave", X, { signal: T }), window.addEventListener("blur", X, { signal: T }), document.addEventListener("visibilitychange", () => {
-			document.hidden && X();
-		}, { signal: T }), window.addEventListener("resize", q, { signal: T }), Y.observe(document.body, {
+		window.addEventListener("pointermove", Q, e), window.addEventListener("pointerdown", Q, e), window.addEventListener("pointercancel", Z, e), document.addEventListener("mouseleave", Z, { signal: E }), window.addEventListener("blur", Z, { signal: E }), document.addEventListener("visibilitychange", () => {
+			document.hidden && Z();
+		}, { signal: E }), window.addEventListener("resize", J, { signal: E }), X.observe(document.body, {
 			subtree: !0,
 			attributes: !0,
 			attributeFilter: [
@@ -153,19 +150,19 @@ function g(d = {}) {
 				"data-vf-cursor"
 			]
 		});
-	}, ee = n(q);
-	A(k.get("arrow")).then(() => (D.src = R.frames[0], D.decode())).then($, () => {
+	}, ne = n(J), re = a(Y);
+	j(A.get("arrow")).then(() => (O.src = z.frames[0], O.decode())).then(te, () => {
 		console.warn("applyCursor: could not load the arrow art; keeping the native pointer");
 	});
-	for (let [e, t] of k) e !== "arrow" && A(t).then(() => G(), () => {
+	for (let [e, t] of A) e !== "arrow" && j(t).then(() => K(), () => {
 		console.warn(`applyCursor: could not load the "${e}" art; it will fall back to the arrow`);
 	});
 	return () => {
-		if (Q = !0, w.abort(), Y.disconnect(), ee(), cancelAnimationFrame(K), window.clearInterval(B), O && D.isConnected) try {
-			D.hidePopover();
+		if ($ = !0, T.abort(), X.disconnect(), ne(), re(), cancelAnimationFrame(q), window.clearInterval(V), k && O.isConnected) try {
+			O.hidePopover();
 		} catch {}
-		D.remove(), E.remove(), C.style.removeProperty("--vf-cursor");
+		O.remove(), D.remove(), w.style.removeProperty("--vf-cursor");
 	};
 }
 //#endregion
-export { g as applyCursor };
+export { h as applyCursor };

package/dist/events.d.ts

@@ -46,7 +46,8 @@ export declare function emitNative(host: EventTarget, type: 'input' | 'change'):
 /**
  * Run a control's **activation behavior** the way HTML runs a native one's: at
  * the *end* of the click's propagation, and not at all if anything on the path
- * called `preventDefault()`.
+ * called `preventDefault()`. A form's `submit` defers the same way: the
+ * listener waits on the event's own type.
  *
  * This is what makes `preventDefault()` on a native checkbox — or on any
  * ancestor — actually stop it from checking. A handler that acts where it sits
@@ -73,7 +74,7 @@ export declare function emitNative(host: EventTarget, type: 'input' | 'change'):
  * submit proxy's re-entrancy guard woven through it.
  *
  * @param host    the element whose ownerDocument supplies the window to defer on
- * @param event   the click being deferred; its `defaultPrevented` is the verdict
+ * @param event   the click (or submit) being deferred; its `defaultPrevented` is the verdict
  * @param action  run once, at the end of the path, unless cancelled
  */
 export declare function deferActivation(host: Element, event: Event, action: () => void): void;

package/dist/events.js

@@ -16,10 +16,10 @@ function t(e, t) {
 function n(e, t, n) {
 	let r = e.ownerDocument.defaultView;
 	if (!r) return;
-	let i = 0, a = () => {
-		r.removeEventListener("click", a), r.clearTimeout(i), !t.defaultPrevented && n();
+	let i = t.type, a = 0, o = () => {
+		r.removeEventListener(i, o), r.clearTimeout(a), !t.defaultPrevented && n();
 	};
-	r.addEventListener("click", a), i = r.setTimeout(a, 0);
+	r.addEventListener(i, o), a = r.setTimeout(o, 0);
 }
 //#endregion
 export { n as deferActivation, e as emit, t as emitNative };

package/dist/index.d.ts

@@ -174,7 +174,8 @@ export type { PlacementBounds, PlacementClamp, PlacementOrigin, VfPositionedInte
 export { VfSized } from './size.js';
 export type { VfSizedInterface } from './size.js';
 export { VfModalDialog, modalDialogStyles } from './modal-dialog.js';
-export type { VfCloseReason } from './modal-dialog.js';
+export type { VfCloseDetail, VfCloseReason, VfShowDetail } from './modal-dialog.js';
+export type { VfCloseKeys } from './chrome.js';
 /** The embedded System 7 bitmap faces and the registration helper. */
 export { registerEmbeddedFont, PIXEL_GRID_METRICS } from './styles/register-embedded-font.js';
 export type { EmbeddedFontMetrics } from './styles/register-embedded-font.js';

package/dist/modal-dialog.d.ts

@@ -1,12 +1,33 @@
 import { LitElement } from 'lit';
 import type { PropertyValues } from 'lit';
 import { ScaleController } from './scale.js';
+import type { VfCloseKeys } from './chrome.js';
 /**
  * Reason a modal closed, carried by the `vf-close` event's detail: the Escape
  * key, the close box or `close()`, or — with {@link VfModalDialog.lightDismiss}
  * — a click outside the frame.
  */
 export type VfCloseReason = 'escape' | 'close' | 'outside';
+/**
+ * The `vf-show` event's detail: the element the modal gave its initial focus
+ * to, or null where it left the browser's choice alone.
+ */
+export interface VfShowDetail {
+    focus: HTMLElement | null;
+}
+/**
+ * The `vf-close` event's detail. A close box's close also carries the
+ * modifier keys held on its click; no other close does.
+ */
+export interface VfCloseDetail extends Partial<VfCloseKeys> {
+    reason: VfCloseReason;
+    /**
+     * The value this close carried — the submitting button's `value`, or
+     * `close(value)`'s — or null when it carried none: Escape, a click
+     * outside, `close()` alone, or removal from the DOM.
+     */
+    returnValue: string | null;
+}
 /**
  * The width an undeclared modal falls back to, in system px — a classic
  * dialog's own measure, wide enough for a line of chrome text and a button row.
@@ -49,12 +70,23 @@ export declare const modalDialogStyles: import("lit").CSSResult;
  * closed and re-centered, and focus returns to the element that was focused
  * when the modal opened.
  *
+ * A `<form method="dialog">` inside the modal closes it with the submitting
+ * button's `value` as {@link returnValue}, as a form inside a native
+ * `<dialog>` does. The platform's own rule looks for a `<dialog>` around the
+ * form, and this one is in the shadow root, so the modal listens for the
+ * submit itself.
+ *
  * Subclasses supply only the frame chrome: a `render()` returning
  * `<dialog @cancel=${this._onNativeCancel} @close=${this._onNativeClose}>` with
  * their role/ARIA and body, and {@link modalDialogStyles} in `static styles`.
  *
+ * @fires vf-show - The modal opened: it is in the top layer, placed, and its
+ *   initial focus is set. `detail: { focus }`, the element focused. The page's
+ *   moment to finish composing it — select a field's default text, measure
+ *   copy that varies. Fired inside `show()` once the modal has rendered, else
+ *   at its first render.
  * @fires vf-close - The modal closed. `detail: { reason: 'escape' | 'close' |
- *   'outside' }`.
+ *   'outside', returnValue: string | null }`.
  */
 export declare class VfModalDialog extends LitElement {
     #private;
@@ -62,6 +94,13 @@ export declare class VfModalDialog extends LitElement {
     protected readonly scale: ScaleController;
     /** Whether the modal is open. Kept in sync with the native `<dialog>`. */
     open: boolean;
+    /**
+     * The modal's answer, as on `<dialog>`: set by `close(value)` and by a
+     * submit from a `<form method="dialog">` inside it (the submitting
+     * button's `value`). Cleared on each open, so a dialog asked again doesn't
+     * start with its last answer.
+     */
+    returnValue: string;
     /**
      * Modal width in whole system px — the art's own unit, so the box holds its
      * proportion to the chrome inside it at every display density.
@@ -130,6 +169,7 @@ export declare class VfModalDialog extends LitElement {
      * drag from squeezing the box.
      */
     protected get dialogSize(): Record<string, string | null>;
+    constructor();
     /**
      * The dialog's default button — the one wearing the bold ring
      * (`vf-button[variant="default"]`) — or null with none, or none enabled.
@@ -159,8 +199,13 @@ export declare class VfModalDialog extends LitElement {
     protected get initialFocusTarget(): HTMLElement | null;
     /** Open the modal (native `showModal()`), pinned onto the device grid. */
     show(): void;
-    /** Close the modal. Fires `vf-close` with `{ reason: 'close' }`. */
-    close(): void;
+    /**
+     * Close the modal, with `returnValue` as its answer when one is given.
+     * Fires `vf-close` with `{ reason: 'close', returnValue }`.
+     */
+    close(returnValue?: string): void;
+    /** Close from a close box, its `vf-close` carrying the modifier keys held on the click. */
+    protected closeFromBox(keys: VfCloseKeys): void;
     protected updated(changed: PropertyValues<this>): void;
     /**
      * State the origin, in system px — clamped on screen and snapped onto the
@@ -197,7 +242,7 @@ export declare class VfModalDialog extends LitElement {
      * the written origin so the next open re-derives it from the box it will
      * actually have (a stated `top`/`left` is the author's or the user's and
      * survives, and is re-applied by that open), syncs `open`, and fires
-     * `vf-close` with the reason.
+     * `vf-close` with the reason and the value the close carried.
      */
     protected _onNativeClose(): void;
 }