@monimesl/dot-simulator 0.1.0-alpha.2 → 0.1.0-alpha.4

package/dist/client/simulator.js

@@ -15,72 +15,498 @@
 		}
 		return registry;
 	}
+	const AmountInput = defineComponent({
+		name: "AmountInput",
+		props: {
+			value: "number",
+			currency: "string",
+			decimals: "number",
+			label: "string",
+			placeholder: "string",
+			hint: "string",
+			error: "string",
+			disabled: "boolean"
+		},
+		events: ["change"],
+		children: "none"
+	});
+	const Button = defineComponent({
+		name: "Button",
+		props: {
+			variant: ["primary", "secondary"],
+			disabled: "boolean",
+			loading: "boolean"
+		},
+		events: ["click"],
+		children: "text"
+	});
+	const SIZES = [
+		"small",
+		"medium",
+		"large"
+	];
+	const SPACES = [
+		"none",
+		"small",
+		"medium",
+		"large"
+	];
+	const TONES = [
+		"default",
+		"muted",
+		"info",
+		"success",
+		"warning",
+		"danger"
+	];
+	const STATUS_TONES = [
+		"default",
+		"info",
+		"success",
+		"warning",
+		"danger"
+	];
+	const ICON_NAMES = [
+		"arrow-down",
+		"arrow-left",
+		"arrow-right",
+		"arrow-up",
+		"bank",
+		"bell",
+		"bolt",
+		"calendar",
+		"card",
+		"cart",
+		"cash",
+		"check",
+		"chevron-down",
+		"chevron-left",
+		"chevron-right",
+		"chevron-up",
+		"clock",
+		"close",
+		"copy",
+		"download",
+		"edit",
+		"error",
+		"eye",
+		"eye-off",
+		"file",
+		"gift",
+		"grid",
+		"heart",
+		"help",
+		"history",
+		"home",
+		"image",
+		"info",
+		"list",
+		"location",
+		"lock",
+		"logout",
+		"mail",
+		"minus",
+		"mobile",
+		"more",
+		"phone",
+		"plus",
+		"qr-code",
+		"receipt",
+		"refresh",
+		"search",
+		"send",
+		"settings",
+		"share",
+		"star",
+		"success",
+		"trash",
+		"upload",
+		"user",
+		"users",
+		"wallet",
+		"warning",
+		"water",
+		"wifi"
+	];
+	const Carousel = defineComponent({
+		name: "Carousel",
+		props: {
+			autoplay: "boolean",
+			interval: "number",
+			loop: "boolean",
+			indicator: ["dots", "none"],
+			gap: SPACES,
+			effect: ["slide", "scale"],
+			index: "number"
+		},
+		events: ["change"],
+		children: "elements"
+	});
+	const Chip = defineComponent({
+		name: "Chip",
+		props: {
+			label: "string",
+			icon: ICON_NAMES,
+			selected: "boolean",
+			disabled: "boolean"
+		},
+		events: ["tap"],
+		children: "none"
+	});
+	const CodeInput = defineComponent({
+		name: "CodeInput",
+		props: {
+			value: "string",
+			length: "number",
+			label: "string",
+			hint: "string",
+			error: "string",
+			secure: "boolean",
+			disabled: "boolean"
+		},
+		events: ["change", "complete"],
+		children: "none"
+	});
+	const Divider = defineComponent({
+		name: "Divider",
+		children: "none"
+	});
+	const EmptyState = defineComponent({
+		name: "EmptyState",
+		props: {
+			icon: ICON_NAMES,
+			title: "string",
+			text: "string"
+		},
+		children: "elements"
+	});
+	const Spinner = defineComponent({
+		name: "Spinner",
+		props: { size: SIZES },
+		children: "none"
+	});
+	const ProgressBar = defineComponent({
+		name: "ProgressBar",
+		props: { value: "number" },
+		children: "none"
+	});
+	const Notice = defineComponent({
+		name: "Notice",
+		props: {
+			tone: STATUS_TONES,
+			title: "string"
+		},
+		children: "text"
+	});
+	const Badge = defineComponent({
+		name: "Badge",
+		props: { tone: STATUS_TONES },
+		children: "text"
+	});
+	const Footer = defineComponent({
+		name: "Footer",
+		children: "elements"
+	});
+	const Grid = defineComponent({
+		name: "Grid",
+		props: {
+			columns: "number",
+			gap: SPACES
+		},
+		children: "elements"
+	});
+	const GridItem = defineComponent({
+		name: "GridItem",
+		props: {
+			label: "string",
+			icon: ICON_NAMES,
+			image: "string",
+			badge: "string"
+		},
+		events: ["tap"],
+		children: "none"
+	});
+	const Icon = defineComponent({
+		name: "Icon",
+		props: {
+			name: ICON_NAMES,
+			size: SIZES,
+			tone: TONES
+		},
+		children: "none",
+		inline: true
+	});
+	const Image = defineComponent({
+		name: "Image",
+		props: {
+			src: "string",
+			alt: "string",
+			width: "number",
+			height: "number",
+			fit: ["cover", "contain"],
+			shape: [
+				"rounded",
+				"square",
+				"circle"
+			]
+		},
+		events: ["load", "error"],
+		children: "none"
+	});
+	const Input = defineComponent({
+		name: "Input",
+		props: {
+			value: "string",
+			placeholder: "string",
+			label: "string",
+			hint: "string",
+			error: "string",
+			prefix: "string",
+			suffix: "string",
+			type: [
+				"text",
+				"number",
+				"email",
+				"phone",
+				"password"
+			],
+			maxLength: "number",
+			disabled: "boolean"
+		},
+		events: ["change", "submit"],
+		children: "none"
+	});
+	const List = defineComponent({
+		name: "List",
+		children: "elements"
+	});
+	const ListItem = defineComponent({
+		name: "ListItem",
+		props: {
+			title: "string",
+			subtitle: "string",
+			value: "string",
+			icon: ICON_NAMES,
+			image: "string"
+		},
+		events: ["tap"],
+		children: "elements"
+	});
+	const Sheet = defineComponent({
+		name: "Sheet",
+		props: {
+			open: "boolean",
+			title: "string"
+		},
+		events: ["close"],
+		children: "elements"
+	});
+	const Toast = defineComponent({
+		name: "Toast",
+		props: {
+			message: "string",
+			tone: STATUS_TONES,
+			duration: "number"
+		},
+		events: ["hide"],
+		children: "none"
+	});
+	const QRCode = defineComponent({
+		name: "QRCode",
+		props: {
+			value: "string",
+			size: "number",
+			label: "string"
+		},
+		children: "none"
+	});
+	const Select = defineComponent({
+		name: "Select",
+		props: {
+			value: "string",
+			label: "string",
+			placeholder: "string",
+			hint: "string",
+			error: "string",
+			disabled: "boolean"
+		},
+		events: ["change"],
+		children: "elements"
+	});
+	const Option = defineComponent({
+		name: "Option",
+		props: {
+			value: "string",
+			label: "string"
+		},
+		children: "none"
+	});
+	const Skeleton = defineComponent({
+		name: "Skeleton",
+		props: {
+			shape: [
+				"text",
+				"circle",
+				"box"
+			],
+			lines: "number",
+			height: "number"
+		},
+		children: "none"
+	});
+	const Tabs = defineComponent({
+		name: "Tabs",
+		props: {
+			value: "string",
+			variant: ["underline", "segmented"]
+		},
+		events: ["change"],
+		children: "elements"
+	});
+	const Tab = defineComponent({
+		name: "Tab",
+		props: {
+			value: "string",
+			label: "string",
+			badge: "number"
+		},
+		children: "none"
+	});
+	const Text = defineComponent({
+		name: "Text",
+		props: {
+			variant: [
+				"title",
+				"body",
+				"caption"
+			],
+			tone: TONES,
+			weight: [
+				"regular",
+				"medium",
+				"bold"
+			],
+			align: [
+				"start",
+				"center",
+				"end"
+			],
+			maxLines: "number"
+		},
+		children: "text",
+		inline: true
+	});
+	const TextArea = defineComponent({
+		name: "TextArea",
+		props: {
+			value: "string",
+			placeholder: "string",
+			label: "string",
+			hint: "string",
+			error: "string",
+			rows: "number",
+			maxLength: "number",
+			disabled: "boolean"
+		},
+		events: ["change"],
+		children: "none"
+	});
+	const Switch = defineComponent({
+		name: "Switch",
+		props: {
+			checked: "boolean",
+			label: "string",
+			disabled: "boolean"
+		},
+		events: ["change"],
+		children: "none"
+	});
+	const Checkbox = defineComponent({
+		name: "Checkbox",
+		props: {
+			checked: "boolean",
+			label: "string",
+			disabled: "boolean"
+		},
+		events: ["change"],
+		children: "none"
+	});
+	const RadioGroup = defineComponent({
+		name: "RadioGroup",
+		props: {
+			value: "string",
+			label: "string",
+			disabled: "boolean"
+		},
+		events: ["change"],
+		children: "elements"
+	});
 	const builtinComponents = {
-		Button: defineComponent({
-			name: "Button",
-			props: {
-				variant: ["primary", "secondary"],
-				disabled: "boolean"
-			},
-			events: ["click"],
-			children: "text"
-		}),
-		Image: defineComponent({
-			name: "Image",
-			props: {
-				src: "string",
-				alt: "string",
-				width: "number",
-				height: "number"
-			},
-			events: ["load", "error"],
-			children: "none"
-		}),
-		Input: defineComponent({
-			name: "Input",
+		AmountInput,
+		Badge,
+		Button,
+		Carousel,
+		Checkbox,
+		Chip,
+		CodeInput,
+		Divider,
+		EmptyState,
+		Footer,
+		Grid,
+		GridItem,
+		Icon,
+		Image,
+		Input,
+		List,
+		ListItem,
+		Notice,
+		Option,
+		ProgressBar,
+		QRCode,
+		Radio: defineComponent({
+			name: "Radio",
 			props: {
 				value: "string",
-				placeholder: "string",
 				label: "string",
-				type: [
-					"text",
-					"number",
-					"email",
-					"phone",
-					"password"
-				],
-				maxLength: "number",
 				disabled: "boolean"
 			},
-			events: ["change", "submit"],
 			children: "none"
 		}),
-		Text: defineComponent({
-			name: "Text",
-			props: { variant: [
-				"title",
-				"body",
-				"caption"
-			] },
-			children: "text",
-			inline: true
-		}),
+		RadioGroup,
+		Select,
+		Sheet,
+		Skeleton,
+		Spinner,
+		Switch,
+		Tab,
+		Tabs,
+		Text,
+		TextArea,
+		Toast,
 		View: defineComponent({
 			name: "View",
 			props: {
+				gap: SPACES,
 				direction: ["column", "row"],
-				gap: [
-					"none",
-					"small",
-					"medium",
-					"large"
-				],
 				align: [
 					"stretch",
 					"start",
 					"center",
 					"end"
 				],
+				justify: [
+					"start",
+					"center",
+					"end",
+					"between"
+				],
+				wrap: "boolean",
+				grow: "boolean",
+				padding: SPACES,
+				paddingTop: SPACES,
+				paddingStart: SPACES,
+				paddingEnd: SPACES,
+				paddingBottom: SPACES,
 				variant: ["plain", "card"]
 			},
 			events: ["tap"],
@@ -96,6 +522,8 @@
 			this.code = code;
 		}
 	};
+	const LABEL = "[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?";
+	new RegExp(`^(?:\\*\\.${LABEL}(?:\\.${LABEL})+|${LABEL}(?:\\.${LABEL})*)$`);
 	const SEMVER_PATTERN = /^(0|[1-9]\d*)\.(0|[1-9]\d*)\.(0|[1-9]\d*)(?:-((?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*)(?:\.(?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*))*))?(?:\+([0-9a-zA-Z-]+(?:\.[0-9a-zA-Z-]+)*))?$/;
 	function majorVersion(version) {
 		return parseVersion(version).major;
@@ -337,7 +765,7 @@
 	};
 	//#endregion
 	//#region src/host.ts
-	function startHost({ logic, ui, manifest, dashVersion, minRuntimeVersion, systemContext, handlers = {}, askPermission, observe }) {
+	function startHost({ logic, ui, manifest, dashVersion, minRuntimeVersion, systemContext, handlers = {}, askPermission, observe, restorePages = [], onBarsChange }) {
 		checkCompatibility(manifest, {
 			dashVersion,
 			minRuntimeVersion
@@ -357,6 +785,18 @@
 			ui.post(message);
 			logic.post(message);
 		};
+		const barsByInstance = /* @__PURE__ */ new Map();
+		const showBars = () => {
+			const top = stack.top;
+			const bars = top && barsByInstance.get(top.instanceId);
+			onBarsChange?.({
+				title: bars?.navigationBar.title ?? manifest.name,
+				navigationBarHidden: bars?.navigationBar.hidden ?? false,
+				navigationBarColor: bars?.navigationBar.backgroundColor,
+				navigationBarTextColor: bars?.navigationBar.textColor,
+				tabBarHidden: bars?.tabBar.hidden ?? false
+			}, stack.pages);
+		};
 		const syncStack = () => {
 			const message = {
 				type: "syncStack",
@@ -366,6 +806,9 @@
 				}
 			};
 			broadcast(message);
+			const open = new Set(stack.pages.map((entry) => entry.instanceId));
+			for (const instanceId of barsByInstance.keys()) if (!open.has(instanceId)) barsByInstance.delete(instanceId);
+			showBars();
 		};
 		const syncSystemContext = () => {
 			broadcast({
@@ -381,13 +824,40 @@
 			if (stack.top !== previousTop) calls.dismissUI();
 			return true;
 		};
+		const openFirstPages = () => {
+			const [first, ...rest] = restorePages.filter((entry) => manifest.pages.includes(entry.page));
+			if (!first) {
+				navigate({
+					action: "reset",
+					page: manifest.entry,
+					options: {}
+				});
+				return;
+			}
+			stack.apply({
+				action: "reset",
+				page: first.page,
+				options: first.options
+			});
+			for (const entry of rest) stack.apply({
+				action: "push",
+				page: entry.page,
+				options: entry.options
+			});
+			syncStack();
+		};
 		const navigateFromPage = ({ from, ...navigation }) => {
 			if (from === stack.top?.instanceId) navigate(navigation);
 		};
 		const hostMessageHandlers = /* @__PURE__ */ new Map([
 			["navigate", (payload) => navigateFromPage(payload)],
 			["hostCall", (payload) => calls.run(payload)],
-			["hostCancel", (payload) => calls.cancel(payload.id)]
+			["hostCancel", (payload) => calls.cancel(payload.id)],
+			["pageBars", (payload) => {
+				const { instanceId, ...bars } = payload;
+				barsByInstance.set(instanceId, bars);
+				showBars();
+			}]
 		]);
 		const stopService = logic.listen((raw) => {
 			const message = raw;
@@ -406,14 +876,13 @@
 			logic.post(message);
 			if (message.type === "connect") {
 				syncSystemContext();
-				navigate({
-					action: "reset",
-					page: manifest.entry,
-					options: {}
-				});
+				openFirstPages();
 			}
 		});
 		return {
+			get pages() {
+				return stack.pages;
+			},
 			back: () => navigate({
 				action: "back",
 				delta: 1
@@ -436,10 +905,24 @@
 	//#region src/paths.ts
 	const CLIENT_PATH = "/__dot/";
 	const EVENTS_PATH = `${CLIENT_PATH}events`;
+	const HTTP_PATH = `${CLIENT_PATH}network/http/`;
+	const FILE_PATH = `${CLIENT_PATH}file/`;
 	const DOT_PATH = "/dot/";
 	const WEBVIEW_URL = `${DOT_PATH}ui/index.html`;
 	const MANIFEST_URL = `${DOT_PATH}manifest.json`;
 	//#endregion
+	//#region src/client/dash/dev-server.ts
+	async function callDevServer(path, params, signal) {
+		const answer = await (await fetch(path, {
+			method: "POST",
+			headers: { "Content-Type": "application/json" },
+			body: JSON.stringify(params),
+			signal
+		})).json();
+		if ("error" in answer) throw new HostError(answer.error.code, answer.error.message);
+		return answer.result;
+	}
+	//#endregion
 	//#region src/client/dash/system.ts
 	const SHAKE_DURATION_MS = 300;
 	const SHAKE = [
@@ -458,6 +941,30 @@
 		phone.dataset.torch = state;
 		note(`torch: ${state}`);
 	}
+	async function copyText(note, text) {
+		try {
+			await navigator.clipboard.writeText(text);
+		} catch (error) {
+			throw new HostError("failed", `The browser kept the clipboard: ${error.message}`);
+		}
+		note(`copied: ${text}`);
+	}
+	function share(note, params) {
+		const parts = [
+			params.text,
+			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");
+		note(`shared: ${parts.join(" · ")}`);
+	}
+	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) => {
+			const timer = setTimeout(resolve, milliseconds);
+			signal.addEventListener("abort", () => clearTimeout(timer));
+		});
+	}
 	//#endregion
 	//#region src/client/dom.ts
 	function element(selector) {
@@ -506,13 +1013,39 @@
 	}
 	//#endregion
 	//#region src/client/dash/index.ts
+	const HTTP_METHODS = [
+		"request",
+		"download",
+		"upload"
+	];
+	const FILE_OPERATIONS = [
+		"read",
+		"write",
+		"stat",
+		"list",
+		"createFolder",
+		"move",
+		"copy",
+		"remove",
+		"save",
+		"open",
+		"usage"
+	];
 	function dashHandlers(phone, note) {
 		return {
 			"dash.ui.alert": ({ params, signal }) => alert(phone, params, signal),
 			"dash.system.vibrate": ({ params }) => vibrate(phone, note, params),
-			"dash.system.torch": ({ params }) => torch(phone, note, params.state)
+			"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.delay": ({ params, signal }) => delay(params.milliseconds, signal),
+			...devServerHandlers("dash.network.http", HTTP_PATH, HTTP_METHODS),
+			...devServerHandlers("dash.file", FILE_PATH, FILE_OPERATIONS)
 		};
 	}
+	function devServerHandlers(group, path, names) {
+		return Object.fromEntries(names.map((name) => [`${group}.${name}`, ({ params, signal }) => callDevServer(`${path}${name}`, params, signal)]));
+	}
 	//#endregion
 	//#region src/client/dash/permissions.ts
 	const PERMISSION_SUMMARIES = { account: "see your Dash account: your name, and your email or phone" };
@@ -567,10 +1100,15 @@
 	const errorBanner = element("#error");
 	const phone = element(".phone");
 	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)");
 	let runningApp = null;
 	let launchCount = 0;
-	async function launch() {
+	let hotReloads = 0;
+	async function launch(restorePages = []) {
 		stopRunningApp();
 		launchCount += 1;
 		const thisLaunch = launchCount;
@@ -599,7 +1137,9 @@
 			systemContext: systemContext(),
 			handlers: dashHandlers(phone, note),
 			askPermission: (request, signal) => askPermission(phone, note, request, signal),
-			observe: record
+			observe: record,
+			restorePages,
+			onBarsChange: showBars
 		});
 		worker.addEventListener("error", (event) => showError(`Service crashed: ${event.message}`));
 		screen.src = WEBVIEW_URL;
@@ -614,6 +1154,18 @@
 		runningApp.worker.terminate();
 		runningApp = null;
 	}
+	function showBars(bars, pages) {
+		navigationBar.hidden = bars.navigationBarHidden;
+		navigationTitle.textContent = bars.title;
+		navigationBack.hidden = pages.length < 2;
+		setBarColor("--bar", bars.navigationBarColor);
+		setBarColor("--bar-text", bars.navigationBarTextColor);
+		tabBar.hidden = bars.tabBarHidden;
+	}
+	function setBarColor(property, color) {
+		if (color) phone.style.setProperty(property, color);
+		else phone.style.removeProperty(property);
+	}
 	function goBack() {
 		if (runningApp && !runningApp.host.back()) note("back on the first page: a device would close the dot");
 	}
@@ -641,11 +1193,25 @@
 		while (log.childElementCount > MAX_LOG_ENTRIES) log.firstElementChild?.remove();
 		log.scrollTop = log.scrollHeight;
 	}
-	function syncLaunch() {
-		launch().catch((error) => {
+	function syncLaunch(restorePages = []) {
+		launch(restorePages).catch((error) => {
 			showError(`Could not start the dot: ${String(error)}`);
 		});
 	}
+	function relaunch() {
+		syncLaunch(runningApp?.host.pages ?? []);
+	}
+	function hotReload() {
+		if (!runningApp) {
+			syncLaunch();
+			return;
+		}
+		hotReloads += 1;
+		const reload = { dotHotReload: hotReloads };
+		runningApp.worker.postMessage(reload);
+		screen.contentWindow?.postMessage(reload, location.origin);
+		note("dot updated in place");
+	}
 	function showError(message) {
 		errorBanner.hidden = message === null;
 		errorBanner.textContent = message ?? "";
@@ -671,11 +1237,16 @@
 	const events = new EventSource(EVENTS_PATH);
 	events.addEventListener("reload", () => {
 		showError(null);
-		syncLaunch();
+		relaunch();
+	});
+	events.addEventListener("hot-reload", () => {
+		showError(null);
+		hotReload();
 	});
 	events.addEventListener("build-error", (event) => showError(String(event.data)));
-	element("#reload").addEventListener("click", syncLaunch);
+	element("#reload").addEventListener("click", () => syncLaunch());
 	element("#back").addEventListener("click", goBack);
+	navigationBack.addEventListener("click", goBack);
 	element("#clear").addEventListener("click", () => log.replaceChildren());
 	schemeSelect.addEventListener("change", () => changeScheme(schemeSelect.value));
 	browserDark.addEventListener("change", () => changeScheme(browserScheme()));