@monimesl/dot-simulator 0.1.0-alpha.3 → 0.1.0-alpha.5

package/dist/client/simulator.js

@@ -15,6 +15,21 @@
 		}
 		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: {
@@ -25,15 +40,17 @@
 		events: ["click"],
 		children: "text"
 	});
-	const Divider = defineComponent({
-		name: "Divider",
-		children: "none"
-	});
 	const SIZES = [
 		"small",
 		"medium",
 		"large"
 	];
+	const SPACES = [
+		"none",
+		"small",
+		"medium",
+		"large"
+	];
 	const TONES = [
 		"default",
 		"muted",
@@ -111,6 +128,58 @@
 		"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 },
@@ -138,6 +207,25 @@
 		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: {
@@ -190,6 +278,7 @@
 	});
 	const List = defineComponent({
 		name: "List",
+		props: { size: ["sm", "md"] },
 		children: "elements"
 	});
 	const ListItem = defineComponent({
@@ -208,7 +297,8 @@
 		name: "Sheet",
 		props: {
 			open: "boolean",
-			title: "string"
+			title: "string",
+			showCloseIcon: "boolean"
 		},
 		events: ["close"],
 		children: "elements"
@@ -223,6 +313,15 @@
 		events: ["hide"],
 		children: "none"
 	});
+	const QRCode = defineComponent({
+		name: "QRCode",
+		props: {
+			value: "string",
+			size: "number",
+			label: "string"
+		},
+		children: "none"
+	});
 	const Select = defineComponent({
 		name: "Select",
 		props: {
@@ -257,6 +356,24 @@
 		},
 		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: {
@@ -326,27 +443,19 @@
 		events: ["change"],
 		children: "elements"
 	});
-	const Radio = defineComponent({
-		name: "Radio",
-		props: {
-			value: "string",
-			label: "string",
-			disabled: "boolean"
-		},
-		children: "none"
-	});
-	const SPACE = [
-		"none",
-		"small",
-		"medium",
-		"large"
-	];
 	const builtinComponents = {
+		AmountInput,
 		Badge,
 		Button,
+		Carousel,
 		Checkbox,
+		Chip,
+		CodeInput,
 		Divider,
+		EmptyState,
 		Footer,
+		Grid,
+		GridItem,
 		Icon,
 		Image,
 		Input,
@@ -355,20 +464,31 @@
 		Notice,
 		Option,
 		ProgressBar,
-		Radio,
+		QRCode,
+		Radio: defineComponent({
+			name: "Radio",
+			props: {
+				value: "string",
+				label: "string",
+				disabled: "boolean"
+			},
+			children: "none"
+		}),
 		RadioGroup,
 		Select,
 		Sheet,
 		Skeleton,
 		Spinner,
 		Switch,
+		Tab,
+		Tabs,
 		Text,
 		TextArea,
 		Toast,
 		View: defineComponent({
 			name: "View",
 			props: {
-				gap: SPACE,
+				gap: SPACES,
 				direction: ["column", "row"],
 				align: [
 					"stretch",
@@ -384,11 +504,11 @@
 				],
 				wrap: "boolean",
 				grow: "boolean",
-				padding: SPACE,
-				paddingTop: SPACE,
-				paddingStart: SPACE,
-				paddingEnd: SPACE,
-				paddingBottom: SPACE,
+				padding: SPACES,
+				paddingTop: SPACES,
+				paddingStart: SPACES,
+				paddingEnd: SPACES,
+				paddingBottom: SPACES,
 				variant: ["plain", "card"]
 			},
 			events: ["tap"],
@@ -647,7 +767,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
@@ -667,6 +787,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",
@@ -676,6 +808,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({
@@ -691,13 +826,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;
@@ -716,14 +878,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
@@ -940,11 +1101,20 @@
 	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 launchCount = 0;
-	async function launch() {
+	let hotReloads = 0;
+	async function launch(restorePages = []) {
 		stopRunningApp();
 		launchCount += 1;
 		const thisLaunch = launchCount;
@@ -973,7 +1143,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;
@@ -988,6 +1160,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");
 	}
@@ -1015,17 +1199,32 @@
 		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 ?? "";
 	}
 	function systemContext() {
 		return {
+			platform: platformSelect.value,
 			scheme: schemeSelect.value,
 			appState: appState()
 		};
@@ -1042,21 +1241,81 @@
 		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;
+	}
 	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));
+	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());
 	});
 	changeScheme(browserScheme());
+	changeInputMode("touch");
 	syncLaunch();
 	//#endregion
 })();