@monimesl/dot-simulator 0.1.0-alpha.7 → 0.1.0-alpha.9

package/dist/client/simulator.js

@@ -20,7 +20,8 @@
 		props: {
 			value: "number",
 			currency: "string",
-			decimals: "number",
+			minorUnits: "number",
+			unit: ["minor", "major"],
 			label: "string",
 			placeholder: "string",
 			hint: "string",
@@ -51,6 +52,22 @@
 		"medium",
 		"large"
 	];
+	const PADDING_PROPS = {
+		padding: SPACES,
+		paddingTop: SPACES,
+		paddingStart: SPACES,
+		paddingEnd: SPACES,
+		paddingBottom: SPACES
+	};
+	const ASPECTS = [
+		"1:1",
+		"4:3",
+		"3:2",
+		"16:9",
+		"3:4",
+		"2:3",
+		"9:16"
+	];
 	const TONES = [
 		"default",
 		"muted",
@@ -89,26 +106,33 @@
 		"download",
 		"edit",
 		"error",
+		"external-link",
 		"eye",
 		"eye-off",
 		"file",
 		"gift",
+		"globe",
 		"grid",
+		"headphones",
 		"heart",
 		"help",
 		"history",
 		"home",
 		"image",
 		"info",
+		"link",
 		"list",
 		"location",
 		"lock",
 		"logout",
 		"mail",
+		"microphone",
 		"minus",
 		"mobile",
 		"more",
+		"music",
 		"phone",
+		"playlist",
 		"plus",
 		"qr-code",
 		"receipt",
@@ -119,10 +143,12 @@
 		"share",
 		"star",
 		"success",
+		"ticket",
 		"trash",
 		"upload",
 		"user",
 		"users",
+		"video",
 		"wallet",
 		"warning",
 		"water",
@@ -137,7 +163,8 @@
 			indicator: ["dots", "none"],
 			gap: SPACES,
 			effect: ["slide", "scale"],
-			index: "number"
+			index: "number",
+			...PADDING_PROPS
 		},
 		events: ["change"],
 		children: "elements"
@@ -167,6 +194,21 @@
 		events: ["change", "complete"],
 		children: "none"
 	});
+	const DetailRow = defineComponent({
+		name: "DetailRow",
+		props: {
+			label: "string",
+			value: "string",
+			tone: TONES,
+			weight: [
+				"regular",
+				"medium",
+				"bold"
+			],
+			...PADDING_PROPS
+		},
+		children: "none"
+	});
 	const Divider = defineComponent({
 		name: "Divider",
 		children: "none"
@@ -176,7 +218,8 @@
 		props: {
 			icon: ICON_NAMES,
 			title: "string",
-			text: "string"
+			text: "string",
+			...PADDING_PROPS
 		},
 		children: "elements"
 	});
@@ -194,7 +237,8 @@
 		name: "Notice",
 		props: {
 			tone: STATUS_TONES,
-			title: "string"
+			title: "string",
+			...PADDING_PROPS
 		},
 		children: "text"
 	});
@@ -205,13 +249,15 @@
 	});
 	const Footer = defineComponent({
 		name: "Footer",
+		props: PADDING_PROPS,
 		children: "elements"
 	});
 	const Grid = defineComponent({
 		name: "Grid",
 		props: {
 			columns: "number",
-			gap: SPACES
+			gap: SPACES,
+			...PADDING_PROPS
 		},
 		children: "elements"
 	});
@@ -248,10 +294,16 @@
 				"rounded",
 				"square",
 				"circle"
-			]
+			],
+			aspect: ASPECTS
 		},
 		events: ["load", "error"],
-		children: "none"
+		children: "none",
+		overrides: [{
+			prop: "aspect",
+			ignores: "height",
+			because: "the aspect sets the height"
+		}]
 	});
 	const Input = defineComponent({
 		name: "Input",
@@ -276,9 +328,23 @@
 		events: ["change", "submit"],
 		children: "none"
 	});
+	const Link = defineComponent({
+		name: "Link",
+		props: {
+			href: "string",
+			tone: TONES
+		},
+		events: ["tap"],
+		children: "text",
+		inline: true
+	});
 	const List = defineComponent({
 		name: "List",
-		props: { size: ["sm", "md"] },
+		props: {
+			size: ["sm", "md"],
+			...PADDING_PROPS
+		},
+		events: ["endReached"],
 		children: "elements"
 	});
 	const ListItem = defineComponent({
@@ -288,7 +354,8 @@
 			subtitle: "string",
 			value: "string",
 			icon: ICON_NAMES,
-			image: "string"
+			image: "string",
+			...PADDING_PROPS
 		},
 		events: ["tap"],
 		children: "elements"
@@ -298,7 +365,8 @@
 		props: {
 			open: "boolean",
 			title: "string",
-			showCloseIcon: "boolean"
+			showCloseIcon: "boolean",
+			...PADDING_PROPS
 		},
 		events: ["close"],
 		children: "elements"
@@ -343,6 +411,21 @@
 		},
 		children: "none"
 	});
+	const Scroll = defineComponent({
+		name: "Scroll",
+		props: {
+			gap: SPACES,
+			snap: [
+				"none",
+				"start",
+				"center"
+			],
+			index: "number",
+			...PADDING_PROPS
+		},
+		events: ["change"],
+		children: "elements"
+	});
 	const Skeleton = defineComponent({
 		name: "Skeleton",
 		props: {
@@ -360,7 +443,8 @@
 		name: "Tabs",
 		props: {
 			value: "string",
-			variant: ["underline", "segmented"]
+			variant: ["underline", "segmented"],
+			...PADDING_PROPS
 		},
 		events: ["change"],
 		children: "elements"
@@ -393,7 +477,8 @@
 				"center",
 				"end"
 			],
-			maxLines: "number"
+			maxLines: "number",
+			...PADDING_PROPS
 		},
 		children: "text",
 		inline: true
@@ -451,6 +536,7 @@
 		Checkbox,
 		Chip,
 		CodeInput,
+		DetailRow,
 		Divider,
 		EmptyState,
 		Footer,
@@ -459,6 +545,7 @@
 		Icon,
 		Image,
 		Input,
+		Link,
 		List,
 		ListItem,
 		Notice,
@@ -475,6 +562,7 @@
 			children: "none"
 		}),
 		RadioGroup,
+		Scroll,
 		Select,
 		Sheet,
 		Skeleton,
@@ -504,11 +592,7 @@
 				],
 				wrap: "boolean",
 				grow: "boolean",
-				padding: SPACES,
-				paddingTop: SPACES,
-				paddingStart: SPACES,
-				paddingEnd: SPACES,
-				paddingBottom: SPACES,
+				...PADDING_PROPS,
 				variant: ["plain", "card"]
 			},
 			events: ["tap"],
@@ -600,10 +684,6 @@
 		get top() {
 			return this.#pages.at(-1);
 		}
-		/**
-		* Applies a navigation, or refuses it and returns false: a push onto a full stack, or going back
-		* from the first page (which the host handles itself, e.g. by closing the dot).
-		*/
 		apply(navigation) {
 			switch (navigation.action) {
 				case "push":
@@ -642,10 +722,10 @@
 		}
 	};
 	function checkCompatibility(manifest, { dashVersion, minRuntimeVersion, reactVersions }) {
-		if (!isVersionAtLeast(manifest.runtime, minRuntimeVersion)) throw new IncompatibleDotError("runtimeTooOld", `This dot was built with Dot runtime ${manifest.runtime}, but this host runs ${minRuntimeVersion} or newer. Rebuild it with a newer @monimesl/dot-runtime.`);
+		if (!isVersionAtLeast(manifest.runtime, minRuntimeVersion)) throw new IncompatibleDotError("runtimeTooOld", `This dot was built with an old Dot runtime, ${manifest.runtime}. Rebuild it with @monimesl/dot-runtime ${minRuntimeVersion} or newer.`);
 		const minDashVersion = manifest.dash?.minVersion;
-		if (minDashVersion !== void 0 && !isVersionAtLeast(dashVersion, minDashVersion)) throw new IncompatibleDotError("dashTooOld", `This dot needs Dash ${minDashVersion} or newer, and this is Dash ${dashVersion}.`);
-		if (reactVersions !== void 0 && !reactVersions.some((version) => isReactCompatible(version, manifest.react))) throw new IncompatibleDotError("reactUnavailable", `This dot needs React ${manifest.react} or a newer ${majorVersion(manifest.react)}.x, which this host doesn't ship.`);
+		if (minDashVersion !== void 0 && !isVersionAtLeast(dashVersion, minDashVersion)) throw new IncompatibleDotError("dashTooOld", `This dot needs Dash ${minDashVersion} or newer. This is Dash ${dashVersion}.`);
+		if (reactVersions !== void 0 && !reactVersions.some((version) => isReactCompatible(version, manifest.react))) throw new IncompatibleDotError("reactUnavailable", `This dot needs React ${manifest.react}, which this host doesn't have.`);
 	}
 	//#endregion
 	//#region src/host-calls.ts
@@ -667,7 +747,7 @@
 					id,
 					error: {
 						code: "unsupported",
-						message: `This host has no "${method}"`
+						message: `This host doesn't support "${method}"`
 					}
 				});
 				return;
@@ -690,7 +770,7 @@
 			this.#end(id)?.controller.abort();
 		}
 		dismissUI() {
-			for (const [id, call] of this.#running) if (call.method.startsWith(UI_METHOD_PREFIX)) this.#fail(id, new HostError("cancelled", "The page it was shown on is no longer on top"));
+			for (const [id, call] of this.#running) if (call.method.startsWith(UI_METHOD_PREFIX)) this.#fail(id, new HostError("cancelled", "Its page is no longer on screen"));
 		}
 		async #invoke(id, entry, call) {
 			try {
@@ -752,7 +832,7 @@
 		}
 		async check(method, permission, signal) {
 			const reason = this.#declared[permission];
-			if (reason === void 0) throw new HostError("denied", `"${method}" needs the "${permission}" permission. Add it to dot.json's permissions, with the reason Dash shows the person.`);
+			if (reason === void 0) throw new HostError("denied", `"${method}" needs the "${permission}" permission. Add it to permissions in dot.json, with a reason to show the person.`);
 			let allowed = this.#answers.get(permission);
 			if (allowed === void 0) {
 				allowed = await this.#ask({
@@ -762,7 +842,7 @@
 				}, signal);
 				this.#answers.set(permission, allowed);
 			}
-			if (!allowed) throw new HostError("denied", `The person did not allow "${permission}"`);
+			if (!allowed) throw new HostError("denied", `The person didn't allow "${permission}"`);
 		}
 	};
 	//#endregion
@@ -908,7 +988,9 @@
 	const CLIENT_PATH = "/__dot/";
 	const EVENTS_PATH = `${CLIENT_PATH}events`;
 	const HTTP_PATH = `${CLIENT_PATH}network/http/`;
-	const FILE_PATH = `${CLIENT_PATH}file/`;
+	const FILE_PATH = `${CLIENT_PATH}storage/file/`;
+	const CACHE_PATH = `${CLIENT_PATH}storage/cache/`;
+	const SECRET_PATH = `${CLIENT_PATH}storage/secret/`;
 	const DOT_PATH = "/dot/";
 	const WEBVIEW_URL = `${DOT_PATH}ui/index.html`;
 	const MANIFEST_URL = `${DOT_PATH}manifest.json`;
@@ -947,7 +1029,7 @@
 		try {
 			await navigator.clipboard.writeText(text);
 		} catch (error) {
-			throw new HostError("failed", `The browser kept the clipboard: ${error.message}`);
+			throw new HostError("failed", `The browser blocked the clipboard: ${error.message}`);
 		}
 		note(`copied: ${text}`);
 	}
@@ -957,9 +1039,21 @@
 			params.url,
 			params.file && `file ${params.file}`
 		].filter(Boolean);
-		if (parts.length === 0) throw new HostError("invalid", "Give share a text, a url or a file");
+		if (parts.length === 0) throw new HostError("invalid", "share needs a text, a url or a file");
 		note(`shared: ${parts.join(" · ")}`);
 	}
+	function openUrl(note, url) {
+		if (!isHttps(url)) throw new HostError("invalid", `Dash only opens https addresses, not ${url}`);
+		window.open(url, "_blank", "noopener");
+		note(`opened: ${url}`);
+	}
+	function isHttps(url) {
+		try {
+			return new URL(url).protocol === "https:";
+		} catch {
+			return false;
+		}
+	}
 	function delay(milliseconds, signal) {
 		if (!Number.isFinite(milliseconds) || milliseconds < 0) throw new HostError("invalid", `A delay is a number of milliseconds, 0 or more, not ${milliseconds}`);
 		return new Promise((resolve) => {
@@ -1033,6 +1127,20 @@
 		"open",
 		"usage"
 	];
+	const CACHE_OPERATIONS = [
+		"get",
+		"set",
+		"remove",
+		"exists",
+		"keys",
+		"clear"
+	];
+	const SECRET_OPERATIONS = [
+		"get",
+		"set",
+		"remove",
+		"clear"
+	];
 	function dashHandlers(phone, note) {
 		return {
 			"dash.ui.alert": ({ params, signal }) => alert(phone, params, signal),
@@ -1040,9 +1148,12 @@
 			"dash.system.torch": ({ params }) => torch(phone, note, params.state),
 			"dash.system.copyText": ({ params }) => copyText(note, params.text),
 			"dash.system.share": ({ params }) => share(note, params),
+			"dash.system.openUrl": ({ params }) => openUrl(note, params.url),
 			"dash.system.delay": ({ params, signal }) => delay(params.milliseconds, signal),
 			...devServerHandlers("dash.network.http", HTTP_PATH, HTTP_METHODS),
-			...devServerHandlers("dash.file", FILE_PATH, FILE_OPERATIONS)
+			...devServerHandlers("dash.storage.file", FILE_PATH, FILE_OPERATIONS),
+			...devServerHandlers("dash.storage.cache", CACHE_PATH, CACHE_OPERATIONS),
+			...devServerHandlers("dash.storage.secret", SECRET_PATH, SECRET_OPERATIONS)
 		};
 	}
 	function devServerHandlers(group, path, names) {
@@ -1101,21 +1212,17 @@
 	const log = element("#log");
 	const errorBanner = element("#error");
 	const phone = element(".phone");
-	const platformSelect = element("#platform");
-	const inputModeSelect = element("#input-mode");
 	const schemeSelect = element("#scheme");
 	const navigationBar = element(".navigation-bar");
 	const navigationTitle = element("#navigation-title");
 	const navigationBack = element("#navigation-back");
 	const tabBar = element(".tab-bar");
 	const browserDark = matchMedia("(prefers-color-scheme: dark)");
-	const COARSE_POINTER_MEDIA = /\(\s*(?:any-)?pointer\s*:\s*coarse\s*\)/gi;
-	const EMULATED_TOUCH_STYLE = "data-dot-simulator-touch";
-	let runningApp = null;
+	let runningDot = null;
 	let launchCount = 0;
 	let hotReloads = 0;
 	async function launch(restorePages = []) {
-		stopRunningApp();
+		stopRunningDot();
 		launchCount += 1;
 		const thisLaunch = launchCount;
 		if (log.childElementCount > 0) note("dot restarted");
@@ -1149,16 +1256,16 @@
 		});
 		worker.addEventListener("error", (event) => showError(`Service crashed: ${event.message}`));
 		screen.src = WEBVIEW_URL;
-		runningApp = {
+		runningDot = {
 			host,
 			worker
 		};
 	}
-	function stopRunningApp() {
-		if (!runningApp) return;
-		runningApp.host.stop();
-		runningApp.worker.terminate();
-		runningApp = null;
+	function stopRunningDot() {
+		if (!runningDot) return;
+		runningDot.host.stop();
+		runningDot.worker.terminate();
+		runningDot = null;
 	}
 	function showBars(bars, pages) {
 		navigationBar.hidden = bars.navigationBarHidden;
@@ -1173,7 +1280,7 @@
 		else phone.style.removeProperty(property);
 	}
 	function goBack() {
-		if (runningApp && !runningApp.host.back()) note("back on the first page: a device would close the dot");
+		if (runningDot && !runningDot.host.back()) note("back on the first page: a device would close the dot");
 	}
 	const ARROWS = {
 		toHost: "both --> host",
@@ -1199,22 +1306,22 @@
 		while (log.childElementCount > MAX_LOG_ENTRIES) log.firstElementChild?.remove();
 		log.scrollTop = log.scrollHeight;
 	}
-	function syncLaunch(restorePages = []) {
+	function restart(restorePages = []) {
 		launch(restorePages).catch((error) => {
 			showError(`Could not start the dot: ${String(error)}`);
 		});
 	}
 	function relaunch() {
-		syncLaunch(runningApp?.host.pages ?? []);
+		restart(runningDot?.host.pages ?? []);
 	}
 	function hotReload() {
-		if (!runningApp) {
-			syncLaunch();
+		if (!runningDot) {
+			restart();
 			return;
 		}
 		hotReloads += 1;
 		const reload = { dotHotReload: hotReloads };
-		runningApp.worker.postMessage(reload);
+		runningDot.worker.postMessage(reload);
 		screen.contentWindow?.postMessage(reload, location.origin);
 		note("dot updated in place");
 	}
@@ -1222,9 +1329,11 @@
 		errorBanner.hidden = message === null;
 		errorBanner.textContent = message ?? "";
 	}
+	function syncSystemContext() {
+		runningDot?.host.setSystemContext(systemContext());
+	}
 	function systemContext() {
 		return {
-			platform: platformSelect.value,
 			scheme: schemeSelect.value,
 			appState: appState()
 		};
@@ -1239,55 +1348,7 @@
 	function changeScheme(scheme) {
 		schemeSelect.value = scheme;
 		phone.dataset.scheme = scheme;
-		runningApp?.host.setSystemContext(systemContext());
-	}
-	function changeInputMode(mode) {
-		inputModeSelect.value = mode;
-		phone.dataset.inputMode = mode;
-		applyInputMode();
-	}
-	function applyInputMode() {
-		const document = screen.contentDocument;
-		if (!document) return;
-		document.documentElement.dataset.dotSimulatorInput = inputModeSelect.value;
-		document.querySelector(`style[${EMULATED_TOUCH_STYLE}]`)?.remove();
-		if (inputModeSelect.value !== "touch") return;
-		const css = coarsePointerCss(document);
-		if (!css) return;
-		const style = document.createElement("style");
-		style.setAttribute(EMULATED_TOUCH_STYLE, "");
-		style.textContent = css;
-		document.head.append(style);
-	}
-	function coarsePointerCss(document) {
-		let css = "";
-		for (const sheet of document.styleSheets) try {
-			css += coarsePointerRules(sheet.cssRules);
-		} catch {}
-		return css;
-	}
-	function coarsePointerRules(rules) {
-		let css = "";
-		for (const rule of rules) {
-			const nestedRules = rule.cssRules;
-			if (!nestedRules) continue;
-			if (rule.type === CSSRule.MEDIA_RULE) {
-				const media = rule;
-				COARSE_POINTER_MEDIA.lastIndex = 0;
-				if (COARSE_POINTER_MEDIA.test(media.conditionText)) {
-					COARSE_POINTER_MEDIA.lastIndex = 0;
-					const condition = media.conditionText.replace(COARSE_POINTER_MEDIA, "(min-width: 0px)");
-					const contents = Array.from(media.cssRules, (child) => child.cssText).join("\n");
-					css += condition === "(min-width: 0px)" ? contents : `@media ${condition}{${contents}}`;
-					continue;
-				}
-			}
-			const contents = coarsePointerRules(nestedRules);
-			if (!contents) continue;
-			const openingBrace = rule.cssText.indexOf("{");
-			if (openingBrace !== -1) css += `${rule.cssText.slice(0, openingBrace)}{${contents}}`;
-		}
-		return css;
+		syncSystemContext();
 	}
 	const events = new EventSource(EVENTS_PATH);
 	events.addEventListener("reload", () => {
@@ -1299,24 +1360,15 @@
 		hotReload();
 	});
 	events.addEventListener("build-error", (event) => showError(String(event.data)));
-	element("#reload").addEventListener("click", () => syncLaunch());
+	element("#reload").addEventListener("click", () => restart());
 	element("#back").addEventListener("click", goBack);
 	navigationBack.addEventListener("click", goBack);
 	element("#clear").addEventListener("click", () => log.replaceChildren());
 	schemeSelect.addEventListener("change", () => changeScheme(schemeSelect.value));
-	inputModeSelect.addEventListener("change", () => changeInputMode(inputModeSelect.value));
-	platformSelect.addEventListener("change", () => {
-		phone.dataset.platform = platformSelect.value;
-		runningApp?.host.setSystemContext(systemContext());
-	});
-	screen.addEventListener("load", applyInputMode);
 	browserDark.addEventListener("change", () => changeScheme(browserScheme()));
-	document.addEventListener("visibilitychange", () => {
-		runningApp?.host.setSystemContext(systemContext());
-	});
+	document.addEventListener("visibilitychange", syncSystemContext);
 	changeScheme(browserScheme());
-	changeInputMode("touch");
-	syncLaunch();
+	restart();
 	//#endregion
 })();