vintage-frames 0.14.0 → 0.15.0

package/dist/shell/shell.js

@@ -0,0 +1,234 @@
+import { onScaleChange as e } from "../scale.js";
+import { VfWindow as t } from "../components/vf-window.js";
+import "../index.js";
+import { createCatalog as n } from "./catalog.js";
+import { createWindowManager as r, deepActiveElement as i } from "./windows.js";
+import { openWindowsOf as a } from "./state.js";
+import { startClock as o } from "./clock.js";
+//#region src/shell/shell.ts
+function s(e) {
+	return e;
+}
+var c = "app", l = (e) => e instanceof HTMLInputElement || e instanceof HTMLTextAreaElement || e?.isContentEditable === !0;
+function u(s, c) {
+	let u = c.apps, f = u.find((e) => e.catalog), p = c.defaultApp ?? f?.id ?? u[0]?.id ?? "", m = c.state ?? null, h = c.services ?? {}, g = [], _ = s.querySelector(":scope > vf-menu-bar");
+	if (!_) throw Error("vintage-frames/shell: the desktop has no vf-menu-bar");
+	let v = _.querySelector(":scope > vf-menu");
+	if (!v) throw Error("vintage-frames/shell: the menu bar has no system menu");
+	_.shortcuts = !0;
+	let y = m?.saved?.pattern;
+	y && (s.pattern = y);
+	let b = null;
+	if (c.fit === "viewport") {
+		let t = () => {
+			let e = {
+				width: s.width,
+				height: s.height
+			};
+			s.fitWithin(document.documentElement.clientWidth, document.documentElement.clientHeight), b?.resized(e);
+		};
+		t(), window.addEventListener("resize", t);
+		let n = e(t);
+		g.push(() => {
+			window.removeEventListener("resize", t), n();
+		});
+	}
+	let x = r(s, {
+		defaultApp: p,
+		savedPin: (e) => m?.pin(e) ?? null
+	});
+	b = x;
+	let S = (e) => {
+		e.target === s && s.clearActive();
+	};
+	s.addEventListener("pointerdown", S), g.push(() => s.removeEventListener("pointerdown", S));
+	let C = {}, w = /* @__PURE__ */ new Map();
+	w.set("app", {
+		art: (e) => u.find((t) => t.id === d(e))?.icon ?? "",
+		open: (e, t) => void C[d(e) ?? ""]?.open?.({ from: t }),
+		editable: !1
+	});
+	for (let e of u) for (let [t, n] of Object.entries(e.kinds ?? {})) w.set(t, n);
+	let T = f?.catalog ? n({
+		storage: f.catalog.storage,
+		volumes: f.catalog.volumes,
+		listed: (e) => w.has(e),
+		hooks: (e) => w.get(e)
+	}) : null, E = () => !!document.querySelector("vf-dialog[open]"), D = () => l(i()), O = /* @__PURE__ */ new Map(), k = () => {
+		for (let [e, t] of O) {
+			let n = !t();
+			e.disabled !== n && (e.disabled = n);
+		}
+	};
+	document.addEventListener("pointerdown", k, !0), document.addEventListener("keydown", k, !0), s.addEventListener("vf-select", k), s.addEventListener("vf-activate", k), g.push(() => document.removeEventListener("pointerdown", k, !0), () => document.removeEventListener("keydown", k, !0), () => s.removeEventListener("vf-select", k), () => s.removeEventListener("vf-activate", k), x.onWindows(k), x.onLayout(k)), T && g.push(T.subscribe(k));
+	let A = (e) => {
+		if (!e) return [];
+		let t = document.createElement("div");
+		t.innerHTML = e, customElements.upgrade(t);
+		let n = [...t.children].filter((e) => e instanceof HTMLElement);
+		for (let e of n) e.remove();
+		return n;
+	}, j = u.map((e) => ({
+		def: e,
+		menus: A(e.menus).filter((e) => e.localName === "vf-menu"),
+		dialogs: A(e.dialogs).filter((e) => e.dataset.dialog != null)
+	})), M = [];
+	for (let { def: e, menus: t, dialogs: n } of j) {
+		let r = [], i = `vintage-frames/shell (${e.id})`, a = /* @__PURE__ */ new Set();
+		for (let t of n) x.holdDialog(t, { app: e.id }), a.add(t);
+		r.push(() => {
+			for (let e of a) x.releaseDialog(e), e.remove();
+			a.clear();
+		});
+		let o = {
+			desktop: s,
+			windows: x,
+			menus: t,
+			systemMenu: v,
+			apps: C,
+			catalog: T,
+			services: h,
+			state: m,
+			kinds: w,
+			kind: (e) => w.get(e),
+			app: (e) => u.find((t) => t.id === e),
+			menu(e) {
+				let n = t.find((t) => t.dataset.menu === e);
+				if (!n) throw Error(`${i}: missing menu ${e}`);
+				return n;
+			},
+			item(e) {
+				for (let n of t) {
+					let t = n.querySelector(`vf-menu-item[value="${CSS.escape(e)}"]`);
+					if (t) return t;
+				}
+				throw Error(`${i}: missing menu item ${e}`);
+			},
+			onMenu(e) {
+				for (let n of t) o.on(n, "vf-menu-select", (t) => {
+					if (E()) return;
+					let { value: n, item: r } = t.detail;
+					e(n, r);
+				});
+			},
+			systemItem(e, t, n) {
+				let i = document.createElement("vf-menu-item");
+				return i.setAttribute("value", e), i.textContent = t, v.append(i), o.on(v, "vf-menu-select", (t) => {
+					!E() && t.detail.value === e && n();
+				}), r.push(() => i.remove()), i;
+			},
+			dialog(e) {
+				let t = n.find((t) => t.dataset.dialog === e);
+				if (!t) throw Error(`${i}: missing dialog ${e}`);
+				return t;
+			},
+			hold(t) {
+				return x.holdDialog(t, { app: e.id }), a.add(t), t;
+			},
+			release(e) {
+				a.delete(e) && (x.releaseDialog(e), e.remove());
+			},
+			ask(t) {
+				if (x.appOf(t) !== e.id) throw Error(`${i}: ask() takes a dialog the application holds`);
+				return new Promise((e) => {
+					let n = (r) => {
+						r.target === t && (t.removeEventListener("vf-close", n), e(r.detail.returnValue));
+					};
+					t.addEventListener("vf-close", n), t.show();
+				});
+			},
+			gate(e, t) {
+				O.set(e, t), r.push(() => O.delete(e));
+				let n = !t();
+				e.disabled !== n && (e.disabled = n);
+			},
+			typing: D,
+			modalOpen: E,
+			onFront(t) {
+				t(x.front === e.id), r.push(x.onFront((n) => t(n === e.id)));
+			},
+			on(e, t, n, i) {
+				e.addEventListener(t, n, i), r.push(() => e.removeEventListener(t, n, i));
+			},
+			onDispose(e) {
+				r.push(e);
+			}
+		}, c = e.init(o);
+		c && (C[e.id] = c), M.push(() => {
+			for (let e of r.splice(0).reverse()) e();
+		});
+	}
+	let N = null, P = () => {
+		let e = x.asking ?? x.front, t = j.find((t) => t.def.id === e) ?? j.find((e) => e.def.id === p) ?? null;
+		if (!(!t || t === N)) {
+			if (N) for (let e of N.menus) e.remove();
+			v.after(...t.menus), _.label = t.def.name, N = t, k();
+		}
+	};
+	if (g.push(x.onFront(P), x.onDialogs(P)), P(), c.clock !== !1) {
+		let e = _.querySelector(":scope > [slot=\"end\"]"), t = !e;
+		e || (e = document.createElement("vf-label"), e.slot = "end", _.append(e));
+		let n = o(e);
+		g.push(() => {
+			n(), t && e.remove();
+		});
+	}
+	let F = /* @__PURE__ */ new WeakSet(), I = () => {
+		if (T) for (let e of s.stackingOrder) {
+			if (!(e instanceof t)) continue;
+			let n = x.itemOf(e);
+			if (n == null) continue;
+			let r = T.item(n);
+			r ? (F.add(e), e.heading !== r.name && (e.heading = r.name)) : F.has(e) && T.get().available && x.close(e, { to: null });
+		}
+	};
+	return T && g.push(T.subscribe(I), x.onWindows(I)), m?.hold(), {
+		desktop: s,
+		windows: x,
+		catalog: T,
+		apps: C,
+		ready: (async () => {
+			try {
+				T && (await T.refresh(), f?.catalog?.seed && await T.seed(f.catalog.seed));
+				for (let { item: e, app: t } of a(m?.saved ?? null)) await C[t]?.open?.({ item: e });
+				let e = m?.saved?.active;
+				if (e) {
+					let t = x.windowFor(e);
+					t && s.bringToFront(t);
+				}
+			} finally {
+				if (m) {
+					let e = m.start(() => ({
+						windows: x.snapshot(),
+						active: x.itemOf(s.activeWindow),
+						pattern: s.pattern ?? null
+					}), (e) => {
+						let t = [
+							x.onLayout(e),
+							x.onWindows(e),
+							...T ? [T.subscribe(e)] : []
+						];
+						return s.addEventListener("vf-activate", e), () => {
+							for (let e of t) e();
+							s.removeEventListener("vf-activate", e);
+						};
+					});
+					g.push(e), m.release();
+				}
+			}
+		})(),
+		dispose() {
+			for (let e of M.splice(0).reverse()) e();
+			if (N) for (let e of N.menus) e.remove();
+			N = null;
+			for (let e of g.splice(0)) e();
+			x.dispose(), T?.dispose();
+		}
+	};
+}
+function d(e) {
+	let t = e.data;
+	return typeof t?.app == "string" ? t.app : null;
+}
+//#endregion
+export { c as APP_KIND, d as appIdOf, u as createShell, s as defineApp };

package/dist/shell/state.d.ts

@@ -0,0 +1,88 @@
+/**
+ * The saved session: one versioned localStorage key holding each window's
+ * box as a nine-slice pin and its depth, the active window's item, the
+ * desktop pattern, and the site's own keys.
+ *
+ * - A window entry with a depth (`z`) was open at the write. One without is a
+ *   box alone — a palette, or a window closed this session — which a reload
+ *   never reopens and an open() still lands in.
+ * - Writes wait a moment and are held until the boot has reopened the
+ *   session: a write while windows are still reopening would drop the depth
+ *   of the ones not reached yet. Hiding or leaving the page writes at once.
+ * - `?fresh=1` neither reads nor writes.
+ *
+ * The parsing is pure, so it is tested under Node; the storage is the page's
+ * localStorage, reached only when a state is made.
+ */
+import type { Pin } from './geometry.js';
+/** One saved window. */
+export interface SavedWindow {
+    /** The application that owns it, which reopens it. */
+    app: string;
+    pin: Pin;
+    /** Its depth when saved, 0 the bottom; unset for a box alone. */
+    z?: number;
+}
+/** What the session holds. */
+export interface SavedSession {
+    v: number;
+    /** Windows by the item they show. */
+    windows: Record<string, SavedWindow>;
+    /** The active window's item, or null. */
+    active: string | null;
+    /** The desktop pattern, or null for the desktop's own. */
+    pattern: string | null;
+    /** The site's own keys. */
+    extra: Record<string, unknown>;
+}
+/**
+ * A parsed blob as a session, its bad entries dropped, or null for anything
+ * that isn't one of this version.
+ */
+export declare function readSession(parsed: unknown): SavedSession | null;
+/** The windows that were open, deepest first: the order a boot reopens them in. */
+export declare function openWindowsOf(session: SavedSession | null): {
+    item: string;
+    app: string;
+    pin: Pin;
+}[];
+/** What the shell reports at a write: the windows it knows and the active one. */
+export interface SessionSnapshot {
+    windows: Record<string, SavedWindow>;
+    active: string | null;
+    pattern: string | null;
+}
+/**
+ * The session to write: every window known before keeps its box and loses
+ * its depth, and the snapshot's windows — the open ones with theirs — go
+ * over them.
+ */
+export declare function mergeSession(known: Record<string, SavedWindow>, snapshot: SessionSnapshot, extra: Record<string, unknown>): SavedSession;
+/** A saved session the shell reads at boot and writes as the desktop changes. */
+export interface ShellState {
+    /** The session read at boot, or null. */
+    readonly saved: SavedSession | null;
+    /** A saved window's pin, by item, or null. */
+    pin(item: string): Pin | null;
+    /** A site key's saved value, else its default. */
+    get<T = unknown>(key: string): T;
+    /** Set a site key and write at once, so an immediate reload still finds it. */
+    set(key: string, value: unknown): void;
+    /** Hold every write until {@link release}. */
+    hold(): void;
+    /** Release the hold and write what is on screen. */
+    release(): void;
+    /**
+     * Start writing: `snapshot` is read at each write, after `subscribe`'s
+     * signal settles. Returns the stop function.
+     */
+    start(snapshot: () => SessionSnapshot, subscribe: (fn: () => void) => () => void): () => void;
+}
+export interface LocalStorageStateOptions {
+    /** The site's own keys and their defaults: `{ greet: true, seeded: false }`. */
+    extra?: Record<string, unknown>;
+    /** Neither read nor write. Default: `?fresh=1` in the address. */
+    fresh?: boolean;
+}
+/** A session kept under one localStorage `key`. */
+export declare function localStorageState(key: string, options?: LocalStorageStateOptions): ShellState;

package/dist/shell/state.js

@@ -0,0 +1,103 @@
+import { isPin as e } from "./geometry.js";
+//#region src/shell/state.ts
+var t = 1, n = 400;
+function r(t) {
+	let n = t;
+	return !n || typeof n != "object" || typeof n.app != "string" || !n.app || !e(n.pin) ? null : Number.isInteger(n.z) ? {
+		app: n.app,
+		pin: n.pin,
+		z: n.z
+	} : {
+		app: n.app,
+		pin: n.pin
+	};
+}
+function i(e) {
+	let n = e;
+	if (!n || typeof n != "object" || n.v !== t) return null;
+	let i = {};
+	if (n.windows && typeof n.windows == "object") for (let [e, t] of Object.entries(n.windows)) {
+		let n = r(t);
+		n && (i[e] = n);
+	}
+	return {
+		v: t,
+		windows: i,
+		active: typeof n.active == "string" && n.active ? n.active : null,
+		pattern: typeof n.pattern == "string" && n.pattern.trim() ? n.pattern : null,
+		extra: n.extra && typeof n.extra == "object" && !Array.isArray(n.extra) ? { ...n.extra } : {}
+	};
+}
+function a(e) {
+	return Object.entries(e?.windows ?? {}).filter(([, e]) => e.z != null).sort(([, e], [, t]) => e.z - t.z).map(([e, t]) => ({
+		item: e,
+		app: t.app,
+		pin: t.pin
+	}));
+}
+function o(e, n, i) {
+	let a = {};
+	for (let [t, n] of Object.entries(e)) a[t] = {
+		app: n.app,
+		pin: n.pin
+	};
+	for (let [e, t] of Object.entries(n.windows)) {
+		let n = r(t);
+		n && (a[e] = n);
+	}
+	return {
+		v: t,
+		windows: a,
+		active: n.active,
+		pattern: n.pattern,
+		extra: { ...i }
+	};
+}
+function s(e, t = {}) {
+	let r = t.fresh ?? new URLSearchParams(location.search).get("fresh") === "1", i = t.extra ?? {}, a = r ? null : c(e), s = {
+		...i,
+		...a?.extra ?? {}
+	}, l = { ...a?.windows ?? {} }, u = !1, d = null, f = () => {
+		if (r || u || !d) return;
+		let t = o(l, d(), s);
+		l = t.windows;
+		try {
+			localStorage.setItem(e, JSON.stringify(t));
+		} catch {}
+	};
+	return {
+		saved: a,
+		pin: (e) => a?.windows[e]?.pin ?? null,
+		get: (e) => s[e],
+		set(e, t) {
+			s[e] = t, f();
+		},
+		hold() {
+			u = !0;
+		},
+		release() {
+			u = !1, f();
+		},
+		start(e, t) {
+			if (r) return () => {};
+			d = e;
+			let i = 0, a = () => {
+				clearTimeout(i), i = window.setTimeout(f, n);
+			}, o = () => {
+				document.visibilityState === "hidden" && f();
+			}, s = t(a);
+			return document.addEventListener("visibilitychange", o), window.addEventListener("pagehide", f), () => {
+				clearTimeout(i), s(), document.removeEventListener("visibilitychange", o), window.removeEventListener("pagehide", f), d = null;
+			};
+		}
+	};
+}
+function c(e) {
+	try {
+		return i(JSON.parse(localStorage.getItem(e) ?? "null"));
+	} catch {
+		return null;
+	}
+}
+//#endregion
+export { s as localStorageState, o as mergeSession, a as openWindowsOf, i as readSession };

package/dist/shell/storage.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Catalog storage that keeps: IndexedDB, one object store of item records
+ * keyed by `id`.
+ *
+ * The database opens at the profile's own version, and one version up when
+ * the store is missing — opening at a fixed version throws `VersionError` on
+ * a profile already past it. It opens on first use; a failed open is retried
+ * on the next call. Every call rejects on failure (a private window), and the
+ * catalog then reports itself unavailable. A connection closes itself when
+ * another tab upgrades the database, and the next call reopens.
+ */
+import type { CatalogStorage } from './catalog.js';
+/** A catalog storage in the IndexedDB database `name`, which keeps it across reloads. */
+export declare function indexedDbStorage(name: string): CatalogStorage;

package/dist/shell/storage.js

@@ -0,0 +1,41 @@
+//#region src/shell/storage.ts
+var e = "items", t = (e) => new Promise((t, n) => {
+	e.onsuccess = () => t(e.result), e.onerror = () => n(e.error ?? /* @__PURE__ */ Error("IndexedDB request failed"));
+});
+function n(t, n, r) {
+	return new Promise((i, a) => {
+		let o = n == null ? indexedDB.open(t) : indexedDB.open(t, n);
+		o.onupgradeneeded = () => {
+			o.result.objectStoreNames.contains(e) || o.result.createObjectStore(e, { keyPath: "id" });
+		}, o.onsuccess = () => {
+			let e = o.result;
+			e.onversionchange = () => {
+				r(), e.close();
+			}, i(e);
+		}, o.onerror = () => a(o.error ?? /* @__PURE__ */ Error("IndexedDB open failed")), o.onblocked = () => {
+			console.warn(`vintage-frames/shell: waiting for another tab to let go of the "${t}" database`);
+		};
+	});
+}
+async function r(t, r) {
+	let i = await n(t, void 0, r);
+	if (!i.objectStoreNames.contains(e)) {
+		let e = i.version + 1;
+		i.close(), i = await n(t, e, r);
+	}
+	return i;
+}
+function i(n) {
+	let i = null, a = () => typeof indexedDB > "u" ? Promise.reject(/* @__PURE__ */ Error("IndexedDB is unavailable")) : (i ??= r(n, () => {
+		i = null;
+	}).catch((e) => {
+		throw i = null, e;
+	}), i), o = async (n, r) => t(r((await a()).transaction(e, n).objectStore(e)));
+	return {
+		list: () => o("readonly", (e) => e.getAll()),
+		put: (e) => o("readwrite", (t) => t.put(e)),
+		remove: (e) => o("readwrite", (t) => t.delete(e))
+	};
+}
+//#endregion
+export { i as indexedDbStorage };