@monimesl/dot-simulator 0.1.0-alpha.15 → 0.1.0-alpha.16

package/dist/client/simulator.js

@@ -76,6 +76,49 @@
 		"warning",
 		"danger"
 	];
+	const TEXT_TONES = {
+		words: [...TONES, "onPrimary"],
+		or: "themeColor"
+	};
+	const BACKGROUNDS = {
+		words: [
+			"background",
+			"surface",
+			"primary",
+			"muted",
+			"info",
+			"success",
+			"warning",
+			"danger"
+		],
+		or: "themeColor"
+	};
+	const BORDERS = [
+		"none",
+		"subtle",
+		"strong"
+	];
+	const RADII = [
+		"none",
+		"small",
+		"medium",
+		"large",
+		"full"
+	];
+	const LENGTH = {
+		words: ["fill"],
+		or: "number"
+	};
+	const BOX_PROPS = {
+		background: BACKGROUNDS,
+		border: BORDERS,
+		radius: RADII,
+		width: LENGTH,
+		height: LENGTH,
+		minHeight: "number",
+		maxWidth: "number",
+		aspect: ASPECTS
+	};
 	const STATUS_TONES = [
 		"default",
 		"info",
@@ -462,11 +505,13 @@
 		name: "Text",
 		props: {
 			variant: [
+				"display",
 				"title",
+				"subtitle",
 				"body",
 				"caption"
 			],
-			tone: TONES,
+			tone: TEXT_TONES,
 			weight: [
 				"regular",
 				"medium",
@@ -478,6 +523,12 @@
 				"end"
 			],
 			maxLines: "number",
+			decoration: [
+				"none",
+				"underline",
+				"strikethrough"
+			],
+			numeric: "boolean",
 			...PADDING_PROPS
 		},
 		children: "text",
@@ -528,6 +579,46 @@
 		events: ["change"],
 		children: "elements"
 	});
+	const Radio = defineComponent({
+		name: "Radio",
+		props: {
+			value: "string",
+			label: "string",
+			disabled: "boolean"
+		},
+		children: "none"
+	});
+	const View = defineComponent({
+		name: "View",
+		props: {
+			gap: SPACES,
+			direction: ["column", "row"],
+			align: [
+				"stretch",
+				"start",
+				"center",
+				"end"
+			],
+			justify: [
+				"start",
+				"center",
+				"end",
+				"between"
+			],
+			wrap: "boolean",
+			grow: "boolean",
+			...PADDING_PROPS,
+			variant: ["plain", "card"],
+			...BOX_PROPS
+		},
+		events: ["tap"],
+		children: "elements",
+		overrides: [{
+			prop: "aspect",
+			ignores: "height",
+			because: "the aspect sets the height"
+		}]
+	});
 	const builtinComponents = {
 		AmountInput,
 		Badge,
@@ -552,52 +643,35 @@
 		Option,
 		ProgressBar,
 		QRCode,
-		Radio: defineComponent({
-			name: "Radio",
-			props: {
-				value: "string",
-				label: "string",
-				disabled: "boolean"
-			},
-			children: "none"
-		}),
+		Radio,
 		RadioGroup,
 		Scroll,
 		Select,
 		Sheet,
 		Skeleton,
 		Spinner,
+		Stack: defineComponent({
+			name: "Stack",
+			props: {
+				radius: BOX_PROPS.radius,
+				width: BOX_PROPS.width,
+				height: BOX_PROPS.height,
+				aspect: BOX_PROPS.aspect
+			},
+			children: "elements",
+			overrides: [{
+				prop: "aspect",
+				ignores: "height",
+				because: "the aspect sets the height"
+			}]
+		}),
 		Switch,
 		Tab,
 		Tabs,
 		Text,
 		TextArea,
 		Toast,
-		View: defineComponent({
-			name: "View",
-			props: {
-				gap: SPACES,
-				direction: ["column", "row"],
-				align: [
-					"stretch",
-					"start",
-					"center",
-					"end"
-				],
-				justify: [
-					"start",
-					"center",
-					"end",
-					"between"
-				],
-				wrap: "boolean",
-				grow: "boolean",
-				...PADDING_PROPS,
-				variant: ["plain", "card"]
-			},
-			events: ["tap"],
-			children: "elements"
-		})
+		View
 	};
 	componentRegistry(Object.values(builtinComponents));
 	var HostError = class extends Error {
@@ -678,7 +752,7 @@
 		limit;
 		#pages = [];
 		#nextInstanceId = 1;
-		constructor(limit = 8) {
+		constructor(limit = 16) {
 			this.limit = limit;
 		}
 		get pages() {
@@ -779,7 +853,8 @@
 					this.#succeed(id, await entry(call));
 					return;
 				}
-				await this.#permissions.check(call.method, entry.permission, call.signal);
+				const permission = typeof entry.permission === "function" ? entry.permission(call.params) : entry.permission;
+				await this.#permissions.check(call.method, permission, call.signal);
 				this.#succeed(id, await entry.handle(call));
 			} catch (error) {
 				this.#fail(id, error);
@@ -979,7 +1054,7 @@
 	}
 	//#endregion
 	//#region src/versions.ts
-	const SIMULATOR_VERSIONS = { runtimeVersion: "0.1.0-alpha.15" };
+	const SIMULATOR_VERSIONS = { runtimeVersion: "0.1.0-alpha.16" };
 	//#endregion
 	//#region src/paths.ts
 	const CLIENT_PATH = "/__dot/";
@@ -988,6 +1063,7 @@
 	const FILE_PATH = `${CLIENT_PATH}storage/file/`;
 	const CACHE_PATH = `${CLIENT_PATH}storage/cache/`;
 	const SECRET_PATH = `${CLIENT_PATH}storage/secret/`;
+	const MEDIA_PATH = `${CLIENT_PATH}media/`;
 	const DOT_PATH = "/dot/";
 	const WEBVIEW_URL = `${DOT_PATH}ui/index.html`;
 	const MANIFEST_URL = `${DOT_PATH}manifest.json`;
@@ -1003,6 +1079,196 @@
 		if ("error" in answer) throw new HostError(answer.error.code, answer.error.message);
 		return answer.result;
 	}
+	function tooLargeMessage(name) {
+		return `"${name}" is larger than 25 MB`;
+	}
+	//#endregion
+	//#region src/client/dom.ts
+	function element(selector) {
+		const node = document.querySelector(selector);
+		if (!node) throw new Error(`The simulator page is missing ${selector}`);
+		return node;
+	}
+	function createElement(tag, className, text) {
+		const node = document.createElement(tag);
+		node.className = className;
+		if (text !== void 0) node.textContent = text;
+		return node;
+	}
+	//#endregion
+	//#region src/client/dash/ui.ts
+	const DEFAULT_ACTIONS = [{
+		id: "ok",
+		label: "OK"
+	}];
+	function alert(phone, options, signal, field) {
+		return new Promise((resolve, reject) => {
+			const layer = createElement("div", "dialog-layer");
+			const dialog = createElement("div", "dialog");
+			dialog.setAttribute("role", "alertdialog");
+			const body = createElement("div", "dialog-body");
+			body.append(createElement("div", "dialog-title", options.title));
+			if (options.message) body.append(createElement("div", "dialog-message", options.message));
+			if (field) body.append(field);
+			const actions = options.actions ?? DEFAULT_ACTIONS;
+			const buttons = createElement("div", actions.length === 2 ? "dialog-actions" : "dialog-actions stacked");
+			for (const action of actions) {
+				const button = createElement("button", action.role ?? "default", action.label);
+				button.addEventListener("click", () => {
+					layer.remove();
+					resolve({ action: action.id });
+				});
+				buttons.append(button);
+			}
+			dialog.append(body, buttons);
+			layer.append(dialog);
+			field?.addEventListener("keydown", (event) => {
+				if (event.key === "Enter") buttons.lastElementChild?.click();
+			});
+			signal.addEventListener("abort", () => {
+				layer.remove();
+				reject(new HostError("cancelled", "The alert was dismissed"));
+			});
+			phone.append(layer);
+			field?.focus();
+		});
+	}
+	//#endregion
+	//#region src/client/dash/media.ts
+	const MAX_PHOTO_SIDE = 2048;
+	const JPEG_QUALITY = .85;
+	function photoPermission(params) {
+		return photoSource(params) === "camera" ? "camera" : "photoLibrary";
+	}
+	async function pickPhoto(phone, note, params, signal) {
+		const source = photoSource(params);
+		await allowPicker(phone, source === "camera" ? "Take a photo" : "Choose a photo", signal);
+		const file = await chooseFile("image/*", signal);
+		const jpeg = await toJpeg(file);
+		const name = jpegName(file.name);
+		note(`photo (${source}): ${name}`);
+		return keepOnDevServer("photo", {
+			name,
+			data: await base64(jpeg)
+		}, signal);
+	}
+	async function pickFile(phone, note, params, signal) {
+		const types = fileTypes(params);
+		await allowPicker(phone, "Choose a file", signal);
+		const file = await chooseFile(types.join(","), signal);
+		if (file.size > 26214400) throw new HostError("invalid", tooLargeMessage(file.name));
+		note(`file: ${file.name}`);
+		const contentType = file.type || "application/octet-stream";
+		return keepOnDevServer("file", {
+			name: file.name,
+			contentType,
+			data: await base64(file)
+		}, signal);
+	}
+	async function scanCode(phone, note, signal) {
+		const field = createElement("input", "dialog-input");
+		field.placeholder = "https://monime.io/pay/…";
+		const { action } = await alert(phone, {
+			title: "Scan a QR code",
+			message: "Type or paste the text the code holds.",
+			actions: [{
+				id: "cancel",
+				label: "Cancel",
+				role: "cancel"
+			}, {
+				id: "scan",
+				label: "Scan"
+			}]
+		}, signal, field);
+		const text = field.value.trim();
+		if (action !== "scan" || text === "") throw new HostError("cancelled", "No code was scanned");
+		note(`scanned: ${text}`);
+		return {
+			text,
+			format: "qr"
+		};
+	}
+	function jpegName(fileName) {
+		const dot = fileName.lastIndexOf(".");
+		return `${(dot > 0 ? fileName.slice(0, dot) : fileName) || "photo"}.jpg`;
+	}
+	function photoSource(params) {
+		const source = params?.source;
+		if (source !== "library" && source !== "camera") throw new HostError("invalid", "\"source\" must be \"library\" or \"camera\"");
+		return source;
+	}
+	function fileTypes(params) {
+		const types = params?.types ?? [];
+		if (!Array.isArray(types) || types.some((type) => typeof type !== "string" || !type.includes("/"))) throw new HostError("invalid", "\"types\" must list content types, such as \"application/pdf\" or \"image/*\"");
+		return types;
+	}
+	async function allowPicker(phone, title, signal) {
+		if (navigator.userActivation.isActive) return;
+		const { action } = await alert(phone, {
+			title,
+			message: "The simulator picks a file from this computer.",
+			actions: [{
+				id: "cancel",
+				label: "Cancel",
+				role: "cancel"
+			}, {
+				id: "choose",
+				label: "Choose"
+			}]
+		}, signal);
+		if (action !== "choose") throw new HostError("cancelled", "Nothing was chosen");
+	}
+	function chooseFile(accept, signal) {
+		return new Promise((resolve, reject) => {
+			const input = document.createElement("input");
+			input.type = "file";
+			input.accept = accept;
+			input.addEventListener("change", () => {
+				const file = input.files?.[0];
+				if (file) resolve(file);
+				else reject(new HostError("cancelled", "Nothing was chosen"));
+			});
+			input.addEventListener("cancel", () => {
+				reject(new HostError("cancelled", "Nothing was chosen"));
+			});
+			signal.addEventListener("abort", () => {
+				reject(new HostError("cancelled", "The call ended before anything was chosen"));
+			});
+			input.click();
+		});
+	}
+	async function toJpeg(file) {
+		let image;
+		try {
+			image = await createImageBitmap(file, { imageOrientation: "from-image" });
+		} catch {
+			throw new HostError("failed", `"${file.name}" isn't a photo the simulator can read`);
+		}
+		const scale = Math.min(1, MAX_PHOTO_SIDE / Math.max(image.width, image.height));
+		const canvas = new OffscreenCanvas(Math.round(image.width * scale), Math.round(image.height * scale));
+		const context = canvas.getContext("2d");
+		if (!context) throw new HostError("failed", "The browser couldn't draw the photo");
+		context.drawImage(image, 0, 0, canvas.width, canvas.height);
+		image.close();
+		return canvas.convertToBlob({
+			type: "image/jpeg",
+			quality: JPEG_QUALITY
+		});
+	}
+	function keepOnDevServer(kind, params, signal) {
+		return callDevServer(`${MEDIA_PATH}${kind}`, params, signal);
+	}
+	function base64(blob) {
+		return new Promise((resolve, reject) => {
+			const reader = new FileReader();
+			reader.addEventListener("load", () => {
+				const url = reader.result;
+				resolve(url.slice(url.indexOf(",") + 1));
+			});
+			reader.addEventListener("error", () => reject(new HostError("failed", "The file couldn't be read")));
+			reader.readAsDataURL(blob);
+		});
+	}
 	//#endregion
 	//#region src/client/dash/system.ts
 	const SHAKE_DURATION_MS = 300;
@@ -1059,52 +1325,6 @@
 		});
 	}
 	//#endregion
-	//#region src/client/dom.ts
-	function element(selector) {
-		const node = document.querySelector(selector);
-		if (!node) throw new Error(`The simulator page is missing ${selector}`);
-		return node;
-	}
-	function createElement(tag, className, text) {
-		const node = document.createElement(tag);
-		node.className = className;
-		if (text !== void 0) node.textContent = text;
-		return node;
-	}
-	//#endregion
-	//#region src/client/dash/ui.ts
-	const DEFAULT_ACTIONS = [{
-		id: "ok",
-		label: "OK"
-	}];
-	function alert(phone, options, signal) {
-		return new Promise((resolve, reject) => {
-			const layer = createElement("div", "dialog-layer");
-			const dialog = createElement("div", "dialog");
-			dialog.setAttribute("role", "alertdialog");
-			const body = createElement("div", "dialog-body");
-			body.append(createElement("div", "dialog-title", options.title));
-			if (options.message) body.append(createElement("div", "dialog-message", options.message));
-			const actions = options.actions ?? DEFAULT_ACTIONS;
-			const buttons = createElement("div", actions.length === 2 ? "dialog-actions" : "dialog-actions stacked");
-			for (const action of actions) {
-				const button = createElement("button", action.role ?? "default", action.label);
-				button.addEventListener("click", () => {
-					layer.remove();
-					resolve({ action: action.id });
-				});
-				buttons.append(button);
-			}
-			dialog.append(body, buttons);
-			layer.append(dialog);
-			signal.addEventListener("abort", () => {
-				layer.remove();
-				reject(new HostError("cancelled", "The alert was dismissed"));
-			});
-			phone.append(layer);
-		});
-	}
-	//#endregion
 	//#region src/client/dash/index.ts
 	const HTTP_METHODS = [
 		"request",
@@ -1147,6 +1367,18 @@
 			"dash.system.share": ({ params }) => share(note, params),
 			"dash.system.openUrl": ({ params }) => openUrl(note, params.url),
 			"dash.system.delay": ({ params, signal }) => delay(params.milliseconds, signal),
+			"dash.media.pickPhoto": {
+				permission: photoPermission,
+				handle: ({ params, signal }) => pickPhoto(phone, note, params, signal)
+			},
+			"dash.media.scanCode": {
+				permission: "camera",
+				handle: ({ signal }) => scanCode(phone, note, signal)
+			},
+			"dash.storage.file.pick": {
+				permission: "files",
+				handle: ({ params, signal }) => pickFile(phone, note, params, signal)
+			},
 			...devServerHandlers("dash.network.http", HTTP_PATH, HTTP_METHODS),
 			...devServerHandlers("dash.storage.file", FILE_PATH, FILE_OPERATIONS),
 			...devServerHandlers("dash.storage.cache", CACHE_PATH, CACHE_OPERATIONS),
@@ -1158,7 +1390,12 @@
 	}
 	//#endregion
 	//#region src/client/dash/permissions.ts
-	const PERMISSION_SUMMARIES = { account: "see your Dash account: your name, and your email or phone" };
+	const PERMISSION_SUMMARIES = {
+		account: "see your Dash account: your name, and your email or phone",
+		camera: "use your camera to take photos and scan codes",
+		photoLibrary: "use photos you choose from your library",
+		files: "use files you choose from your phone"
+	};
 	async function askPermission(phone, note, request, signal) {
 		const { action } = await alert(phone, {
 			title: `Allow “${request.dotName}” to ${PERMISSION_SUMMARIES[request.permission]}?`,
@@ -1205,8 +1442,11 @@
 	//#endregion
 	//#region src/client/simulator.ts
 	const MAX_LOG_ENTRIES = 500;
+	const MESSAGES_SHOWN_KEY = "dot-simulator-messages";
 	const screen = element("#screen");
 	const log = element("#log");
+	const messagesPanel = element("#messages-panel");
+	const messagesButton = element("#messages");
 	const errorBanner = element("#error");
 	const phone = element(".phone");
 	const schemeSelect = element("#scheme");
@@ -1369,14 +1609,34 @@
 		hotReload();
 	});
 	events.addEventListener("build-error", (event) => showError(String(event.data)));
+	function showMessages(shown) {
+		messagesPanel.hidden = !shown;
+		messagesButton.setAttribute("aria-pressed", String(shown));
+	}
+	function toggleMessages() {
+		const shown = messagesPanel.hidden;
+		showMessages(shown);
+		try {
+			localStorage.setItem(MESSAGES_SHOWN_KEY, String(shown));
+		} catch {}
+	}
+	function messagesShownLastTime() {
+		try {
+			return localStorage.getItem(MESSAGES_SHOWN_KEY) !== "false";
+		} catch {
+			return true;
+		}
+	}
 	element("#reload").addEventListener("click", () => restart());
 	element("#back").addEventListener("click", goBack);
 	navigationBack.addEventListener("click", goBack);
 	element("#clear").addEventListener("click", () => log.replaceChildren());
+	messagesButton.addEventListener("click", toggleMessages);
 	schemeSelect.addEventListener("change", () => changeScheme(schemeSelect.value));
 	browserDark.addEventListener("change", () => changeScheme(browserScheme()));
 	document.addEventListener("visibilitychange", syncSystemContext);
 	changeScheme(browserScheme());
+	showMessages(messagesShownLastTime());
 	restart();
 	//#endregion
 })();