@monimesl/dot-simulator 0.1.0-alpha.10

package/dist/client/simulator.js

@@ -0,0 +1,1386 @@
+(function() {
+	//#region ../../core/dist/index.js
+	function defineComponent(manifest) {
+		return {
+			props: {},
+			events: [],
+			...manifest
+		};
+	}
+	function componentRegistry(manifests) {
+		const registry = {};
+		for (const manifest of manifests) {
+			if (manifest.name in registry) throw new Error(`Component <${manifest.name}> is defined twice`);
+			registry[manifest.name] = manifest;
+		}
+		return registry;
+	}
+	const AmountInput = defineComponent({
+		name: "AmountInput",
+		props: {
+			value: "number",
+			currency: "string",
+			minorUnits: "number",
+			unit: ["minor", "major"],
+			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 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",
+		"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",
+		"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",
+		"refresh",
+		"search",
+		"send",
+		"settings",
+		"share",
+		"star",
+		"success",
+		"ticket",
+		"trash",
+		"upload",
+		"user",
+		"users",
+		"video",
+		"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",
+			...PADDING_PROPS
+		},
+		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 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"
+	});
+	const EmptyState = defineComponent({
+		name: "EmptyState",
+		props: {
+			icon: ICON_NAMES,
+			title: "string",
+			text: "string",
+			...PADDING_PROPS
+		},
+		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",
+			...PADDING_PROPS
+		},
+		children: "text"
+	});
+	const Badge = defineComponent({
+		name: "Badge",
+		props: { tone: STATUS_TONES },
+		children: "text"
+	});
+	const Footer = defineComponent({
+		name: "Footer",
+		props: PADDING_PROPS,
+		children: "elements"
+	});
+	const Grid = defineComponent({
+		name: "Grid",
+		props: {
+			columns: "number",
+			gap: SPACES,
+			...PADDING_PROPS
+		},
+		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"
+			],
+			aspect: ASPECTS
+		},
+		events: ["load", "error"],
+		children: "none",
+		overrides: [{
+			prop: "aspect",
+			ignores: "height",
+			because: "the aspect sets the height"
+		}]
+	});
+	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 Link = defineComponent({
+		name: "Link",
+		props: {
+			href: "string",
+			tone: TONES
+		},
+		events: ["tap"],
+		children: "text",
+		inline: true
+	});
+	const List = defineComponent({
+		name: "List",
+		props: {
+			size: ["sm", "md"],
+			...PADDING_PROPS
+		},
+		events: ["endReached"],
+		children: "elements"
+	});
+	const ListItem = defineComponent({
+		name: "ListItem",
+		props: {
+			title: "string",
+			subtitle: "string",
+			value: "string",
+			icon: ICON_NAMES,
+			image: "string",
+			...PADDING_PROPS
+		},
+		events: ["tap"],
+		children: "elements"
+	});
+	const Sheet = defineComponent({
+		name: "Sheet",
+		props: {
+			open: "boolean",
+			title: "string",
+			showCloseIcon: "boolean",
+			...PADDING_PROPS
+		},
+		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 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: {
+			shape: [
+				"text",
+				"circle",
+				"box"
+			],
+			lines: "number",
+			height: "number"
+		},
+		children: "none"
+	});
+	const Tabs = defineComponent({
+		name: "Tabs",
+		props: {
+			value: "string",
+			variant: ["underline", "segmented"],
+			...PADDING_PROPS
+		},
+		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",
+			...PADDING_PROPS
+		},
+		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 = {
+		AmountInput,
+		Badge,
+		Button,
+		Carousel,
+		Checkbox,
+		Chip,
+		CodeInput,
+		DetailRow,
+		Divider,
+		EmptyState,
+		Footer,
+		Grid,
+		GridItem,
+		Icon,
+		Image,
+		Input,
+		Link,
+		List,
+		ListItem,
+		Notice,
+		Option,
+		ProgressBar,
+		QRCode,
+		Radio: defineComponent({
+			name: "Radio",
+			props: {
+				value: "string",
+				label: "string",
+				disabled: "boolean"
+			},
+			children: "none"
+		}),
+		RadioGroup,
+		Scroll,
+		Select,
+		Sheet,
+		Skeleton,
+		Spinner,
+		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"
+		})
+	};
+	componentRegistry(Object.values(builtinComponents));
+	var HostError = class extends Error {
+		name = "HostError";
+		code;
+		constructor(code, message) {
+			super(message);
+			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;
+	}
+	function isVersionAtLeast(version, minimum) {
+		return compareVersions(version, minimum) >= 0;
+	}
+	function compareVersions(left, right) {
+		const leftVersion = parseVersion(left);
+		const rightVersion = parseVersion(right);
+		const differences = [
+			leftVersion.major - rightVersion.major,
+			leftVersion.minor - rightVersion.minor,
+			leftVersion.patch - rightVersion.patch
+		];
+		for (const difference of differences) if (difference !== 0) return difference;
+		return comparePrereleases(leftVersion.prerelease, rightVersion.prerelease);
+	}
+	function parseVersion(version) {
+		const match = SEMVER_PATTERN.exec(version);
+		if (!match) throw new Error(`"${version}" is not a semantic version`);
+		const [, major, minor, patch, prerelease] = match;
+		return {
+			major: Number(major),
+			minor: Number(minor),
+			patch: Number(patch),
+			prerelease: prerelease === void 0 ? [] : prerelease.split(".")
+		};
+	}
+	function comparePrereleases(left, right) {
+		if (left.length === 0 || right.length === 0) return right.length - left.length;
+		const shared = Math.min(left.length, right.length);
+		for (let index = 0; index < shared; index++) {
+			const order = compareIdentifiers(left[index], right[index]);
+			if (order !== 0) return order;
+		}
+		return left.length - right.length;
+	}
+	function compareIdentifiers(left, right) {
+		const leftIsNumber = /^\d+$/.test(left);
+		const rightIsNumber = /^\d+$/.test(right);
+		if (leftIsNumber && rightIsNumber) return Number(left) - Number(right);
+		if (leftIsNumber) return -1;
+		if (rightIsNumber) return 1;
+		if (left < right) return -1;
+		if (left > right) return 1;
+		return 0;
+	}
+	function isReactCompatible(hostVersion, dotVersion) {
+		return majorVersion(hostVersion) === majorVersion(dotVersion) && isVersionAtLeast(hostVersion, dotVersion);
+	}
+	function createAdaptorTransport(adapter) {
+		return {
+			post: (message) => adapter.postMessage(message),
+			listen(listener) {
+				const onMessage = (event) => listener(event.data);
+				adapter.addEventListener("message", onMessage);
+				return () => adapter.removeEventListener("message", onMessage);
+			}
+		};
+	}
+	var NavigationStack = class {
+		limit;
+		#pages = [];
+		#nextInstanceId = 1;
+		constructor(limit = 8) {
+			this.limit = limit;
+		}
+		get pages() {
+			return this.#pages;
+		}
+		get top() {
+			return this.#pages.at(-1);
+		}
+		apply(navigation) {
+			switch (navigation.action) {
+				case "push":
+					if (this.#pages.length >= this.limit) return false;
+					break;
+				case "replace":
+					this.#pages.pop();
+					break;
+				case "reset":
+					this.#pages = [];
+					break;
+				case "back": {
+					const count = Math.min(navigation.delta, this.#pages.length - 1);
+					if (count < 1) return false;
+					this.#pages = this.#pages.slice(0, -count);
+					return true;
+				}
+			}
+			const { page, options } = navigation;
+			this.#pages = [...this.#pages, {
+				instanceId: this.#nextInstanceId++,
+				page,
+				options
+			}];
+			return true;
+		}
+	};
+	//#endregion
+	//#region src/compatibility.ts
+	var IncompatibleDotError = class extends Error {
+		name = "IncompatibleDotError";
+		reason;
+		constructor(reason, message) {
+			super(message);
+			this.reason = reason;
+		}
+	};
+	function checkCompatibility(manifest, { dashVersion, minRuntimeVersion, reactVersions }) {
+		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. 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
+	const UI_METHOD_PREFIX = "dash.ui.";
+	var HostCallRunner = class {
+		#handlers;
+		#permissions;
+		#answer;
+		#running = /* @__PURE__ */ new Map();
+		constructor(handlers, permissions, answer) {
+			this.#handlers = handlers;
+			this.#permissions = permissions;
+			this.#answer = answer;
+		}
+		run({ id, method, params, timeout }) {
+			const entry = this.#handlers[method];
+			if (!entry) {
+				this.#answer({
+					id,
+					error: {
+						code: "unsupported",
+						message: `This host doesn't support "${method}"`
+					}
+				});
+				return;
+			}
+			const call = {
+				method,
+				controller: new AbortController()
+			};
+			if (timeout !== void 0) call.timer = setTimeout(() => {
+				this.#fail(id, new HostError("timeout", `"${method}" took longer than ${timeout}ms`));
+			}, timeout);
+			this.#running.set(id, call);
+			this.#invoke(id, entry, {
+				method,
+				params,
+				signal: call.controller.signal
+			});
+		}
+		cancel(id) {
+			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 that showed this dialog is no longer on screen"));
+		}
+		async #invoke(id, entry, call) {
+			try {
+				if (typeof entry === "function") {
+					this.#succeed(id, await entry(call));
+					return;
+				}
+				await this.#permissions.check(call.method, entry.permission, call.signal);
+				this.#succeed(id, await entry.handle(call));
+			} catch (error) {
+				this.#fail(id, error);
+			}
+		}
+		#succeed(id, value) {
+			if (this.#end(id)) this.#answer({
+				id,
+				value
+			});
+		}
+		#fail(id, error) {
+			const call = this.#end(id);
+			if (!call) return;
+			call.controller.abort();
+			this.#answer({
+				id,
+				error: describeError(error)
+			});
+		}
+		#end(id) {
+			const call = this.#running.get(id);
+			if (call) {
+				this.#running.delete(id);
+				clearTimeout(call.timer);
+			}
+			return call;
+		}
+	};
+	function describeError(error) {
+		if (error instanceof HostError) return {
+			code: error.code,
+			message: error.message
+		};
+		return {
+			code: "failed",
+			message: error instanceof Error ? error.message : String(error)
+		};
+	}
+	//#endregion
+	//#region src/permissions.ts
+	var PermissionGate = class {
+		#dotName;
+		#declared;
+		#ask;
+		#answers = /* @__PURE__ */ new Map();
+		constructor(dotName, declared, ask) {
+			this.#dotName = dotName;
+			this.#declared = declared;
+			this.#ask = ask;
+		}
+		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 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({
+					dotName: this.#dotName,
+					permission,
+					reason
+				}, signal);
+				this.#answers.set(permission, allowed);
+			}
+			if (!allowed) throw new HostError("denied", `The person didn't allow the "${permission}" permission`);
+		}
+	};
+	//#endregion
+	//#region src/host.ts
+	function startHost({ logic, ui, manifest, dashVersion, minRuntimeVersion, systemContext, handlers = {}, askPermission, observe, restorePages = [], onBarsChange }) {
+		checkCompatibility(manifest, {
+			dashVersion,
+			minRuntimeVersion
+		});
+		const stack = new NavigationStack();
+		let context = systemContext;
+		const calls = new HostCallRunner(handlers, new PermissionGate(manifest.name, manifest.permissions ?? {}, askPermission), (result) => {
+			const message = {
+				type: "hostResult",
+				payload: result
+			};
+			observe?.("fromHost", message);
+			logic.post(message);
+		});
+		const broadcast = (message) => {
+			observe?.("fromHost", message);
+			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",
+				payload: {
+					pages: stack.pages,
+					limit: stack.limit
+				}
+			};
+			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({
+				type: "syncSystemContext",
+				payload: context
+			});
+		};
+		const navigate = (navigation) => {
+			if (navigation.action !== "back" && !manifest.pages.includes(navigation.page)) return false;
+			const previousTop = stack.top;
+			if (!stack.apply(navigation)) return false;
+			syncStack();
+			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)],
+			["pageBars", (payload) => {
+				const { instanceId, ...bars } = payload;
+				barsByInstance.set(instanceId, bars);
+				showBars();
+			}]
+		]);
+		const stopService = logic.listen((raw) => {
+			const message = raw;
+			const handleHostMessage = hostMessageHandlers.get(message.type);
+			if (handleHostMessage) {
+				observe?.("toHost", message);
+				handleHostMessage(message.payload);
+				return;
+			}
+			observe?.("toWebview", message);
+			ui.post(message);
+		});
+		const stopWebview = ui.listen((raw) => {
+			const message = raw;
+			observe?.("toService", message);
+			logic.post(message);
+			if (message.type === "connect") {
+				syncSystemContext();
+				openFirstPages();
+			}
+		});
+		return {
+			get pages() {
+				return stack.pages;
+			},
+			back: () => navigate({
+				action: "back",
+				delta: 1
+			}),
+			setSystemContext: (next) => {
+				context = next;
+				syncSystemContext();
+			},
+			stop: () => {
+				stopService();
+				stopWebview();
+			}
+		};
+	}
+	const SIMULATOR_VERSIONS = {
+		dashVersion: "1.0.0",
+		minRuntimeVersion: "0.1.0-alpha.1"
+	};
+	//#endregion
+	//#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}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`;
+	//#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 = [
+		{ transform: "translateX(0)" },
+		{ transform: "translateX(-5px)" },
+		{ transform: "translateX(5px)" },
+		{ transform: "translateX(-3px)" },
+		{ transform: "translateX(3px)" },
+		{ transform: "translateX(0)" }
+	];
+	async function vibrate(phone, note, options) {
+		note(`vibrated: ${options.style}`);
+		await phone.animate(SHAKE, { duration: SHAKE_DURATION_MS }).finished;
+	}
+	function torch(phone, note, state) {
+		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 blocked 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", "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) => {
+			const timer = setTimeout(resolve, milliseconds);
+			signal.addEventListener("abort", () => clearTimeout(timer));
+		});
+	}
+	//#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",
+		"download",
+		"upload"
+	];
+	const FILE_OPERATIONS = [
+		"read",
+		"write",
+		"stat",
+		"list",
+		"createFolder",
+		"move",
+		"copy",
+		"remove",
+		"save",
+		"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),
+			"dash.system.vibrate": ({ params }) => vibrate(phone, note, params),
+			"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.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) {
+		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" };
+	async function askPermission(phone, note, request, signal) {
+		const { action } = await alert(phone, {
+			title: `Allow “${request.dotName}” to ${PERMISSION_SUMMARIES[request.permission]}?`,
+			message: request.reason,
+			actions: [{
+				id: "deny",
+				label: "Don't Allow",
+				role: "cancel"
+			}, {
+				id: "allow",
+				label: "Allow"
+			}]
+		}, signal);
+		const allowed = action === "allow";
+		if (allowed) note(`permission ${request.permission}: allowed`);
+		else note(`permission ${request.permission}: not allowed`);
+		return allowed;
+	}
+	//#endregion
+	//#region src/client/wire.ts
+	function isWire(data) {
+		return typeof data?.dot === "string";
+	}
+	function wireTransport(channel) {
+		return {
+			post: (message) => channel.post({ dot: JSON.stringify(message) }),
+			listen: (listener) => channel.listen((data) => {
+				if (isWire(data)) listener(JSON.parse(data.dot));
+			})
+		};
+	}
+	function windowChannel(other) {
+		return {
+			post: (message) => other()?.postMessage(message, location.origin),
+			listen(listener) {
+				const onMessage = (event) => {
+					if (event.source === other()) listener(event.data);
+				};
+				window.addEventListener("message", onMessage);
+				return () => window.removeEventListener("message", onMessage);
+			}
+		};
+	}
+	//#endregion
+	//#region src/client/simulator.ts
+	const MAX_LOG_ENTRIES = 500;
+	const screen = element("#screen");
+	const log = element("#log");
+	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 clock = element(".clock");
+	const browserDark = matchMedia("(prefers-color-scheme: dark)");
+	const timeFormat = new Intl.DateTimeFormat("en-GB", {
+		hour: "2-digit",
+		minute: "2-digit",
+		hourCycle: "h23"
+	});
+	function showTime() {
+		clock.textContent = timeFormat.format(/* @__PURE__ */ new Date());
+	}
+	showTime();
+	setInterval(showTime, 1e3);
+	let runningDot = null;
+	let launchCount = 0;
+	let hotReloads = 0;
+	async function launch(restorePages = []) {
+		stopRunningDot();
+		launchCount += 1;
+		const thisLaunch = launchCount;
+		if (log.childElementCount > 0) note("dot restarted");
+		let manifest;
+		try {
+			manifest = await (await fetch(MANIFEST_URL)).json();
+		} catch {
+			showError(`There's nothing to run, because ${MANIFEST_URL} is missing. Check whether the build failed.`);
+			return;
+		}
+		if (thisLaunch !== launchCount) return;
+		try {
+			checkCompatibility(manifest, SIMULATOR_VERSIONS);
+		} catch (error) {
+			screen.src = "about:blank";
+			showError(error.message);
+			return;
+		}
+		const worker = new Worker(`${CLIENT_PATH}service-bridge.js`);
+		const host = startHost({
+			logic: wireTransport(createAdaptorTransport(worker)),
+			ui: wireTransport(windowChannel(() => screen.contentWindow)),
+			manifest,
+			...SIMULATOR_VERSIONS,
+			systemContext: systemContext(),
+			handlers: dashHandlers(phone, note),
+			askPermission: (request, signal) => askPermission(phone, note, request, signal),
+			observe: record,
+			restorePages,
+			onBarsChange: showBars
+		});
+		worker.addEventListener("error", (event) => showError(`The dot's service crashed: ${event.message}`));
+		screen.src = WEBVIEW_URL;
+		runningDot = {
+			host,
+			worker
+		};
+	}
+	function stopRunningDot() {
+		if (!runningDot) return;
+		runningDot.host.stop();
+		runningDot.worker.terminate();
+		runningDot = 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 (runningDot && !runningDot.host.back()) note("back on the first page, where a phone would close the dot");
+	}
+	const ARROWS = {
+		toHost: "both --> host",
+		fromHost: "host --> both",
+		toService: "ui --> logic",
+		toWebview: "ui <-- logic"
+	};
+	function note(text) {
+		log.append(createElement("li", "note", text));
+	}
+	function record(direction, message) {
+		const entry = createElement("li", direction);
+		const details = document.createElement("details");
+		const summary = document.createElement("summary");
+		const time = (/* @__PURE__ */ new Date()).toLocaleTimeString([], { hour12: false });
+		summary.append(createElement("span", "time", time), createElement("span", "arrow", ARROWS[direction]), createElement("span", "type", message.type));
+		const payload = document.createElement("pre");
+		payload.textContent = JSON.stringify(message.payload, null, 2);
+		details.append(summary, payload);
+		entry.append(details);
+		if (message.type === "error") entry.classList.add("failed");
+		log.append(entry);
+		while (log.childElementCount > MAX_LOG_ENTRIES) log.firstElementChild?.remove();
+		log.scrollTop = log.scrollHeight;
+	}
+	function restart(restorePages = []) {
+		launch(restorePages).catch((error) => {
+			showError(`Could not start the dot: ${String(error)}`);
+		});
+	}
+	function relaunch() {
+		restart(runningDot?.host.pages ?? []);
+	}
+	function hotReload() {
+		if (!runningDot) {
+			restart();
+			return;
+		}
+		hotReloads += 1;
+		const reload = { dotHotReload: hotReloads };
+		runningDot.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 syncSystemContext() {
+		runningDot?.host.setSystemContext(systemContext());
+	}
+	function systemContext() {
+		return {
+			scheme: schemeSelect.value,
+			appState: appState()
+		};
+	}
+	function appState() {
+		if (document.visibilityState === "hidden") return "background";
+		return "active";
+	}
+	function browserScheme() {
+		return browserDark.matches ? "dark" : "light";
+	}
+	function changeScheme(scheme) {
+		schemeSelect.value = scheme;
+		phone.dataset.scheme = scheme;
+		syncSystemContext();
+	}
+	const events = new EventSource(EVENTS_PATH);
+	events.addEventListener("reload", () => {
+		showError(null);
+		relaunch();
+	});
+	events.addEventListener("hot-reload", () => {
+		showError(null);
+		hotReload();
+	});
+	events.addEventListener("build-error", (event) => showError(String(event.data)));
+	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));
+	browserDark.addEventListener("change", () => changeScheme(browserScheme()));
+	document.addEventListener("visibilitychange", syncSystemContext);
+	changeScheme(browserScheme());
+	restart();
+	//#endregion
+})();
+
+//# sourceMappingURL=simulator.js.map