vintage-frames 0.15.0 → 0.16.1

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/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 { VfCloseDetail, 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,14 +1,25 @@
 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-close` event's detail. */
-export interface VfCloseDetail {
+/**
+ * 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
@@ -46,7 +57,8 @@ export declare const modalDialogStyles: import("lit").CSSResult;
  * {@link defaultButton} and {@link initialFocusTarget}): Return or Enter
  * activates the default button from anywhere in the dialog, and the box opens
  * with the insertion point in its first text field — or, with none, focus on
- * the default button.
+ * the default button. A field marked `autoselect` takes the focus with its
+ * text selected, on every open.
  *
  * Removing an open modal from the DOM is a close path too. HTML's dialog
  * *removing steps* take the element out of the top layer **without** running
@@ -69,6 +81,12 @@ export declare const modalDialogStyles: import("lit").CSSResult;
  * `<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, such as measuring copy that varies. A
+ *   field marked `autoselect` has its text selected after the event, so a
+ *   value set in a handler is the one selected. Fired inside `show()` once
+ *   the modal has rendered, else at its first render.
  * @fires vf-close - The modal closed. `detail: { reason: 'escape' | 'close' |
  *   'outside', returnValue: string | null }`.
  */
@@ -169,7 +187,8 @@ export declare class VfModalDialog extends LitElement {
      * so with no text field the default button takes it (which is also what
      * makes Return and Space work there without a Tab). In order:
      *
-     * 1. a slotted control carrying `autofocus` — the author's say;
+     * 1. the first slotted control carrying `autofocus` or `autoselect` — the
+     *    author's say;
      * 2. the first enabled text-entry control (`vf-text-field`,
      *    `vf-number-field`, `vf-text-area`, or a native text input/textarea);
      * 3. the {@link defaultButton};
@@ -178,7 +197,8 @@ export declare class VfModalDialog extends LitElement {
      * Left to itself, `showModal()` focuses the first focusable thing in flat
      * tree order, which for a Cancel/OK row is Cancel, and for a body with a
      * link in it is the link — so Return did the one thing a classic dialog's
-     * Return never did. Override to choose differently.
+     * Return never did. Override to choose differently. A target marked
+     * `autoselect` has its text selected once `vf-show` has fired.
      */
     protected get initialFocusTarget(): HTMLElement | null;
     /** Open the modal (native `showModal()`), pinned onto the device grid. */
@@ -188,6 +208,8 @@ export declare class VfModalDialog extends LitElement {
      * 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

package/dist/modal-dialog.js

@@ -12,7 +12,7 @@ var p = 24, m = /* @__PURE__ */ new Set([
 	"email",
 	"password",
 	"number"
-]), h = (e) => e instanceof HTMLInputElement ? m.has(e.type) : !0, g = u`
+]), h = (e) => e instanceof HTMLInputElement ? m.has(e.type) : !0, g = "vf-text-field, vf-number-field, vf-text-area, textarea, input", _ = (e) => e.autoselect ?? e.hasAttribute("autoselect"), v = u`
   dialog {
     padding: 0;
     margin: auto;
@@ -51,7 +51,7 @@ var p = 24, m = /* @__PURE__ */ new Set([
        the fallback is the arrow it always showed. */
     cursor: var(--vf-cursor, default);
   }
-`, _ = class extends l {
+`, y = class extends l {
 	get dialogSize() {
 		return {
 			width: a(this.width ?? 260),
@@ -69,100 +69,105 @@ var p = 24, m = /* @__PURE__ */ new Set([
 	}
 	#n;
 	#r;
+	#i;
 	constructor() {
-		super(), this.scale = new n(this), this.open = !1, this.returnValue = "", this.lightDismiss = !1, this.#e = !1, this.#n = null, this.#r = null, this.#i = (t) => {
+		super(), this.scale = new n(this), this.open = !1, this.returnValue = "", this.lightDismiss = !1, this.#e = !1, this.#n = null, this.#r = null, this.#i = null, this.#a = (t) => {
 			let n = t.target;
-			if (!(n instanceof HTMLFormElement) || v(n) !== this) return;
+			if (!(n instanceof HTMLFormElement) || b(n) !== this) return;
 			let r = t.submitter;
 			if ((r?.hasAttribute("formmethod") ? r.getAttribute("formmethod") : n.getAttribute("method"))?.toLowerCase() !== "dialog") return;
 			let i = r instanceof HTMLButtonElement || r instanceof HTMLInputElement ? r.value : void 0;
 			e(this, t, () => this.close(i));
-		}, this.#a = null, this.#o = new c(this, () => [
+		}, this.#o = null, this.#s = new c(this, () => [
 			[
 				this._dialog,
 				"pointerdown",
-				this.#l
+				this.#u
 			],
 			[
 				this._dialog,
 				"pointerup",
-				this.#u
+				this.#d
 			],
 			[
 				this._dialog,
 				"pointercancel",
-				this.#d
+				this.#f
 			],
 			[
 				this._dialog,
 				"keydown",
-				this.#c
+				this.#l
 			]
-		]), this.#c = (e) => {
+		]), this.#l = (e) => {
 			if (e.key !== "Enter" || e.defaultPrevented || e.isComposing || e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) return;
 			let t = e.composedPath();
 			if (t.some((e) => e instanceof HTMLAnchorElement && e.hasAttribute("href")) || t.some((e) => e instanceof HTMLTextAreaElement || e instanceof HTMLElement && e.isContentEditable) && e.code !== "NumpadEnter") return;
 			let n = this.defaultButton;
 			n && (e.preventDefault(), n.click());
-		}, this.#l = (e) => {
-			this.#a = e.target === this._dialog ? e.pointerId : null;
 		}, this.#u = (e) => {
-			let t = this.#a === e.pointerId;
-			this.#a = null, !(!t || e.target !== this._dialog || !this.lightDismiss) && (this.#n = "outside", this.close());
-		}, this.#d = () => {
-			this.#a = null;
-		}, this.#f = null, this.#v = () => this.settle(), this.addEventListener("submit", this.#i);
+			this.#o = e.target === this._dialog ? e.pointerId : null;
+		}, this.#d = (e) => {
+			let t = this.#o === e.pointerId;
+			this.#o = null, !(!t || e.target !== this._dialog || !this.lightDismiss) && (this.#n = "outside", this.close());
+		}, this.#f = () => {
+			this.#o = null;
+		}, this.#p = null, this.#y = () => this.settle(), this.addEventListener("submit", this.#a);
 	}
-	#i;
 	#a;
 	#o;
+	#s;
 	get defaultButton() {
 		let e = "vf-button[variant=\"default\"]";
 		return [...this.querySelectorAll(e), ...this.renderRoot.querySelectorAll(e)].find((e) => !e.matches(":disabled")) ?? null;
 	}
 	get initialFocusTarget() {
-		return this.querySelector("[autofocus]") || ([...this.querySelectorAll("vf-text-field, vf-number-field, vf-text-area, textarea, input")].find((e) => h(e) && !e.matches(":disabled")) ?? this.defaultButton);
+		return [...this.querySelectorAll("*")].find((e) => e.hasAttribute("autofocus") || _(e)) || ([...this.querySelectorAll(g)].find((e) => h(e) && !e.matches(":disabled")) ?? this.defaultButton);
 	}
-	#s() {
-		this.initialFocusTarget?.focus();
+	#c() {
+		let e = this.initialFocusTarget;
+		return e?.focus(), e;
 	}
-	#c;
 	#l;
 	#u;
 	#d;
 	#f;
+	#p;
 	show() {
-		this.open = !0, this.hasUpdated && this.#_();
+		this.open = !0, this.hasUpdated && this.#v();
 	}
 	close(e) {
-		this.open && e !== void 0 && (this.#r = e), this.open = !1, this.hasUpdated && this.#_();
+		this.open && e !== void 0 && (this.#r = e), this.open = !1, this.hasUpdated && this.#v();
+	}
+	closeFromBox(e) {
+		this.open && (this.#i = e), this.close();
 	}
 	updated(e) {
-		e.has("open") && this.#_(), (e.has("top") || e.has("left")) && this.settle(), this.#t();
+		e.has("open") && this.#v(), (e.has("top") || e.has("left")) && this.settle(), this.#t();
 	}
-	#p() {
+	#m() {
 		let e = document.documentElement;
 		return {
 			width: o(e.clientWidth || window.innerWidth, this),
 			height: o(e.clientHeight || window.innerHeight, this)
 		};
 	}
-	#m(e, t) {
-		let n = this.#p(), r = o(this._dialog?.offsetWidth ?? 0, this);
+	#h(e, t) {
+		let n = this.#m(), r = o(this._dialog?.offsetWidth ?? 0, this);
 		return {
 			x: Math.min(Math.max(e, p - r), n.width - p),
 			y: Math.min(Math.max(t, 0), Math.max(0, n.height - p))
 		};
 	}
-	#h() {
-		let e = this.#p(), t = this._dialog?.getBoundingClientRect();
+	#g() {
+		let e = this.#m(), t = this._dialog?.getBoundingClientRect();
 		return {
 			x: (e.width - o(t?.width ?? 0, this)) / 2,
 			y: (e.height - o(t?.height ?? 0, this)) / 2
 		};
 	}
 	placeAt(e, t) {
-		let n = this.#m(e, t);
+		let n = this.#h(e, t);
 		this.left = i(n.x, this), this.top = i(n.y, this);
 	}
 	settle() {
@@ -171,10 +176,10 @@ var p = 24, m = /* @__PURE__ */ new Set([
 		let t = this.left != null || this.top != null ? {
 			x: this.left ?? 0,
 			y: this.top ?? 0
-		} : this.#h(), n = this.#m(t.x, t.y);
+		} : this.#g(), n = this.#h(t.x, t.y);
 		e.style.left = a(i(n.x, this)), e.style.top = a(i(n.y, this)), e.style.right = "auto", e.style.bottom = "auto", e.style.margin = "0";
 	}
-	#g() {
+	#_() {
 		let e = this._dialog?.style;
 		if (e) for (let t of [
 			"left",
@@ -184,51 +189,58 @@ var p = 24, m = /* @__PURE__ */ new Set([
 			"margin"
 		]) e.removeProperty(t);
 	}
-	#_() {
+	#v() {
 		let e = this._dialog;
-		e && (this.open && !e.open ? (this.#f = document.activeElement, this.returnValue = "", e.showModal(), this.#s(), this.settle(), this.#x(e), this.#o.attach()) : !this.open && e.open && e.close());
+		if (e) {
+			if (this.open && !e.open) {
+				this.#p = document.activeElement, this.returnValue = "", e.showModal();
+				let n = this.#c();
+				this.settle(), this.#S(e), this.#s.attach(), t(this, "vf-show", { focus: n }), n && _(n) && n.select?.();
+			} else !this.open && e.open && e.close();
+		}
 	}
-	#v;
 	#y;
 	#b;
-	#x(e) {
-		typeof ResizeObserver < "u" && !this.#y && (this.#y = new ResizeObserver(this.#v), this.#y.observe(e)), window.addEventListener("resize", this.#v), this.#b ??= r(this.#v);
+	#x;
+	#S(e) {
+		typeof ResizeObserver < "u" && !this.#b && (this.#b = new ResizeObserver(this.#y), this.#b.observe(e)), window.addEventListener("resize", this.#y), this.#x ??= r(this.#y);
 	}
-	#S() {
-		this.#y?.disconnect(), this.#y = void 0, window.removeEventListener("resize", this.#v), this.#b?.(), this.#b = void 0;
+	#C() {
+		this.#b?.disconnect(), this.#b = void 0, window.removeEventListener("resize", this.#y), this.#x?.(), this.#x = void 0;
 	}
 	disconnectedCallback() {
-		super.disconnectedCallback(), this.#S();
+		super.disconnectedCallback(), this.#C();
 		let e = this._dialog;
 		if (e?.open) {
 			e.close();
-			let t = this.#f, n = document.activeElement;
+			let t = this.#p, n = document.activeElement;
 			t instanceof HTMLElement && t.isConnected && (n === null || n === document.body) && t.focus();
 		}
-		this.#f = null;
+		this.#p = null;
 	}
 	_onNativeCancel() {
 		this.#n = "escape";
 	}
 	_onNativeClose() {
-		let e = this.#n ?? "close", n = this.#r;
-		this.#n = null, this.#r = null, n !== null && (this.returnValue = n), this.#f = null, this.#a = null, this.#o.detach(), this.#S(), this.open = !1, this.#g(), t(this, "vf-close", {
+		let e = this.#n ?? "close", n = this.#r, r = this.#i;
+		this.#n = null, this.#r = null, this.#i = null, n !== null && (this.returnValue = n), this.#p = null, this.#o = null, this.#s.detach(), this.#C(), this.open = !1, this.#_(), t(this, "vf-close", {
 			reason: e,
-			returnValue: n
+			returnValue: n,
+			...r
 		});
 	}
 };
 s([d({
 	type: Boolean,
 	reflect: !0
-})], _.prototype, "open", void 0), s([d({ type: Number })], _.prototype, "width", void 0), s([d({ type: Number })], _.prototype, "height", void 0), s([d({ type: Number })], _.prototype, "top", void 0), s([d({ type: Number })], _.prototype, "left", void 0), s([d({
+})], y.prototype, "open", void 0), s([d({ type: Number })], y.prototype, "width", void 0), s([d({ type: Number })], y.prototype, "height", void 0), s([d({ type: Number })], y.prototype, "top", void 0), s([d({ type: Number })], y.prototype, "left", void 0), s([d({
 	type: Boolean,
 	reflect: !0,
 	attribute: "light-dismiss"
-})], _.prototype, "lightDismiss", void 0), s([f("dialog")], _.prototype, "_dialog", void 0);
-function v(e) {
-	for (let t = e.parentElement; t; t = t.parentElement) if (t instanceof _) return t;
+})], y.prototype, "lightDismiss", void 0), s([f("dialog")], y.prototype, "_dialog", void 0);
+function b(e) {
+	for (let t = e.parentElement; t; t = t.parentElement) if (t instanceof y) return t;
 	return null;
 }
 //#endregion
-export { _ as VfModalDialog, g as modalDialogStyles };
+export { y as VfModalDialog, v as modalDialogStyles };

package/dist/shell/catalog.d.ts

@@ -158,7 +158,7 @@ export interface Catalog {
     clear(): Promise<void>;
     import(archive: CatalogArchive, options?: {
         mode?: 'merge' | 'replace';
-    }): Promise<number>;
+    }): Promise<Map<string, Item>>;
     dispose(): Promise<void>;
 }
 export declare function createCatalog(options: CatalogOptions): Catalog;

package/dist/shell/catalog.js

@@ -119,7 +119,13 @@ function x(n) {
 			...t,
 			name: ""
 		};
-	}, I = {
+	};
+	async function I() {
+		M.clear();
+		for (let e of await A().list()) e.id !== i && (await A().remove(e.id), C.delete(e.id));
+		C = /* @__PURE__ */ new Map();
+	}
+	let L = {
 		get: () => E,
 		subscribe(e) {
 			return D.add(e), () => {
@@ -143,7 +149,7 @@ function x(n) {
 			k();
 		},
 		async seed(e) {
-			return !r || !w || T ? !1 : (await e(I), await r.put({
+			return !r || !w || T ? !1 : (await e(L), await r.put({
 				id: i,
 				name: "",
 				kind: i,
@@ -240,30 +246,38 @@ function x(n) {
 			return { items: [...C.values()] };
 		},
 		async clear() {
-			if (r) {
-				for (let e of await r.list()) e.id !== i && await r.remove(e.id);
-				C = /* @__PURE__ */ new Map(), M.clear(), k();
+			if (r) try {
+				await I();
+			} finally {
+				k();
 			}
 		},
 		async import(e, { mode: t = "merge" } = {}) {
-			let n = e.items.filter((e) => e.id !== i && !o(e.id));
-			if (!n.length || !r) return 0;
-			let a = t === "replace", s = /* @__PURE__ */ new Map();
-			for (let e of n) s.set(e.id, a ? e.id : x());
-			let c = (e) => e == null || o(e) ? e : s.get(e) ?? null;
-			a && await I.clear();
-			for (let e of n) await j({
-				...e,
-				id: s.get(e.id),
-				parent: c(e.parent)
-			});
-			return k(), n.length;
+			let n = /* @__PURE__ */ new Map(), a = e.items.filter((e) => e.id !== i && !o(e.id));
+			if (!a.length || !r) return n;
+			let s = t === "replace", c = /* @__PURE__ */ new Map();
+			for (let e of a) c.set(e.id, s ? e.id : x());
+			let l = (e) => e == null || o(e) ? e : c.get(e) ?? null;
+			try {
+				s && await I();
+				for (let e of a) {
+					let t = {
+						...e,
+						id: c.get(e.id),
+						parent: l(e.parent)
+					};
+					await j(t), n.set(e.id, t);
+				}
+			} finally {
+				k();
+			}
+			return n;
 		},
 		async dispose() {
 			await P(), D.clear();
 		}
 	};
-	return I;
+	return L;
 }
 function S(e = []) {
 	let t = new Map(e.map((e) => [e.id, e]));