@lernapps/app-templates 0.0.0-stage → 0.1.0

package/dist/html-mffkHGHh.mjs

@@ -0,0 +1,89 @@
+// runtime/shared/languages.ts
+/**
+* The languages the runtime has texts for, German first. Every registry of the runtime's own texts has one entry per
+* language (its type says so), so adding a language is complete when the compiler is.
+*/
+const LANGUAGES = ["de", "en"];
+const isLanguage = (lang) => LANGUAGES.includes(lang);
+const LOCALES = {
+	de: "de-DE",
+	en: "en-GB"
+};
+/** The locale for numbers and dates in `lang`; German's for a language the runtime has no texts for. */
+const localeOf = (lang) => LOCALES[isLanguage(lang) ? lang : "de"];
+/** The entry of `registry` for `lang`; German's for a language the runtime has no texts for. */
+const textsIn = (registry, lang) => registry[isLanguage(lang) ? lang : "de"];
+/** The text in `lang`; a plain string is the same in every language. */
+function inLanguage(text, lang) {
+	return typeof text === "string" ? text : text[lang] ?? text["de"] ?? "";
+}
+/**
+* The text in each of the app's `languages` that it has, and the problems of its languages: a translation missing,
+* a language not declared (in `declaredIn`, the file with the app's languages). A plain string is German, and complete
+* only while German is the only language; with `neutral` (a formula, a code), a plain string is the same in every
+* language.
+*/
+function textLanguages(value, languages, neutral = false, declaredIn = "src/app.yaml") {
+	if (typeof value === "string") {
+		if (neutral) return {
+			texts: languages.map((lang) => ({
+				lang,
+				text: value,
+				keyed: false
+			})),
+			problems: []
+		};
+		const map = `{ ${languages.map((code) => `${code}: …`).join(", ")} }`;
+		return {
+			texts: [{
+				lang: "de",
+				text: value,
+				keyed: false
+			}],
+			problems: languages.slice(1).map((lang) => ({
+				lang,
+				message: `the translation is missing; write the text as a map: ${map}`
+			}))
+		};
+	}
+	const problems = [...Object.keys(value).filter((lang) => !languages.includes(lang)).map((lang) => ({
+		lang,
+		message: `${lang} is not a language of the app; declare it in languages in ${declaredIn}, or remove it`
+	})), ...languages.filter((lang) => !(lang in value)).map((lang) => ({
+		lang,
+		message: "the translation is missing"
+	}))];
+	return {
+		texts: languages.filter((lang) => lang in value).map((lang) => ({
+			lang,
+			text: value[lang] ?? "",
+			keyed: true
+		})),
+		problems
+	};
+}
+/** What is wrong with an app's list of languages: German first, each once, each one the runtime has texts for. */
+function languageListProblems(languages, supported) {
+	const problems = [];
+	if (languages[0] !== "de") problems.push({
+		lang: languages[0] ?? "",
+		message: "German comes first: languages: [de, …]"
+	});
+	languages.forEach((lang, index) => {
+		if (languages.indexOf(lang) !== index) problems.push({
+			lang,
+			message: `${lang} is listed twice`
+		});
+		else if (!supported.includes(lang)) problems.push({
+			lang,
+			message: `the runtime has no texts of its own in ${lang} yet; it has ${supported.join(", ")}`
+		});
+	});
+	return problems;
+}
+// runtime/shared/html.ts
+/** `text` for HTML text or a double-quoted attribute value. */
+const escape = (text) => text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+/** `text` for HTML text, quotation marks as they are. */
+const escapeText = (text) => text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+export { isLanguage as a, textLanguages as c, inLanguage as i, textsIn as l, escapeText as n, languageListProblems as o, LANGUAGES as r, localeOf as s, escape as t };

package/dist/image-CspJVfyQ.mjs

@@ -0,0 +1,21 @@
+import { readFileSync } from "node:fs";
+// runtime/shared/blocks/image.ts
+const TYPES = {
+	svg: "image/svg+xml",
+	png: "image/png",
+	jpg: "image/jpeg",
+	webp: "image/webp"
+};
+/** The media type of a bundled image, by its file name. */
+const imageType = (name) => TYPES[name.slice(name.lastIndexOf(".") + 1)] ?? "application/octet-stream";
+/**
+* Whether the SVG file `file` has no size of its own: its root has neither a width nor a height (only a viewBox, or
+* percentages). In a box as wide as its content, as the image of a labelled figure is, the browser draws such an image
+* with zero width. Another kind of image has a size.
+*/
+function isSizeless(file) {
+	if (!file.endsWith(".svg")) return false;
+	const root = /<svg\b[^>]*>/i.exec(readFileSync(file, "utf8"))?.[0] ?? "";
+	return !/\s(?:width|height)\s*=\s*["']?\s*\d*\.?\d+\s*(?:px|pt|pc|mm|cm|in|em|ex|rem)?\s*["'\s/>]/i.test(root);
+}
+export { isSizeless as n, imageType as t };

package/dist/interactive-e2e.mjs

@@ -0,0 +1,140 @@
+import { i as inLanguage } from "./html-mffkHGHh.mjs";
+import { r as languageRoot } from "./pages-9RaaomoO.mjs";
+import { i as doingText, n as STATE_PROPERTY, o as inputsOf, s as mismatch, t as CLOCK_PROPERTY } from "./contract-PONpxJtd.mjs";
+import { i as message, o as loadInteractive, t as APP_PAGE } from "./render-BL6fV_NI.mjs";
+import { expect, test } from "playwright/test";
+// runtime/interactive/e2e.ts
+/** The page's language, its alternates and a switch to each other language, the archetype marker. */
+async function expectFrame(page, lang, languages) {
+	await expect(page.locator("html")).toHaveAttribute("lang", lang);
+	await expect(page.locator("meta[name=\"lernapps-archetype\"]")).toHaveAttribute("content", "interactive");
+	for (const other of languages) {
+		await expect(page.locator(`link[rel="alternate"][hreflang="${other}"]`)).toHaveCount(1);
+		if (other === lang) continue;
+		const link = page.locator(`.page-languages a[hreflang="${other}"]`);
+		await expect(link).toBeVisible();
+		const response = await page.request.get(await link.evaluate((a) => a.href));
+		expect(response.status(), `the switch to ${other}`).toBe(200);
+	}
+}
+/** Collects the page's console errors and uncaught exceptions. */
+function consoleErrors(page) {
+	const errors = [];
+	page.on("console", (entry) => {
+		if (entry.type() === "error") errors.push(entry.text());
+	});
+	page.on("pageerror", (error) => errors.push(error.message));
+	return errors;
+}
+/** Emits `input` (an Input) as input from the app's root component in `host`, as the component itself does. */
+function emitInput(host, input) {
+	const root = (host._vnode?.component)?.subTree?.component;
+	if (root === void 0) throw new Error("the app's root component is not mounted");
+	root.emit("input", input);
+}
+/** Steps `count` ticks on the tests' clock of the page, the global `property`. */
+function stepTicks({ count, property }) {
+	Reflect.get(globalThis, property).tick(count);
+}
+/**
+* Presses `key` as the learner does. Playwright knows only the keys of a US keyboard by name; any other character
+* (ä, ö, ü, ß, é) goes as the keydown event the runtime listens to, with that key.
+*/
+async function pressKey(page, key) {
+	if (key.length === 1 && key > "~") await page.evaluate((pressed) => {
+		document.dispatchEvent(new KeyboardEvent("keydown", {
+			key: pressed,
+			bubbles: true,
+			cancelable: true
+		}));
+	}, key);
+	else await page.keyboard.press(key);
+}
+/** The interactive app's tests, for the app in `root`. */
+function interactiveTests(root = ".") {
+	const { app, playthroughs } = loadInteractive(root);
+	const routes = app.routes ?? [];
+	test.describe("interactive", () => {
+		test.describe.configure({ mode: "parallel" });
+		test.use({ reducedMotion: "reduce" });
+		test.describe("without JavaScript", () => {
+			test.use({ javaScriptEnabled: false });
+			for (const lang of app.languages) {
+				const start = languageRoot(lang);
+				const text = (value) => inLanguage(value, lang).replace(/\s+/g, " ").trim();
+				test(`${start || "./"}: the start page says what the app does, how to play and what one learns`, async ({ page }) => {
+					await page.goto(`./${start}`);
+					await expectFrame(page, lang, app.languages);
+					const main = page.locator("main");
+					await expect(main.locator("h1")).toHaveText(text(app.title));
+					await expect(main.locator(".interactive-intro")).toBeVisible();
+					await expect(main.locator(".interactive-noscript"), "the note that the app needs JavaScript").toBeVisible();
+					const play = main.locator("a.interactive-start");
+					await expect(play).toBeVisible();
+					const response = await page.request.get(await play.evaluate((a) => a.href));
+					expect(response.status(), "the link into the app").toBe(200);
+					for (const route of routes) {
+						const link = main.locator(`a[href$="${APP_PAGE}#${route.id}"]`);
+						await expect(link, `the link to the route ${route.id}`).toHaveText(text(route.title));
+					}
+					await expect(main.getByRole("heading", {
+						level: 2,
+						name: message(lang, "howto"),
+						exact: true
+					})).toBeVisible();
+					for (const competency of app.competencies) await expect(main.locator(".interactive-competencies li", { hasText: text(competency) })).toBeVisible();
+					for (const section of app.sections ?? []) await expect(main.locator(`h2[id="${section.id}"]`), `the section ${section.id}`).toHaveText(text(section.title));
+					expect(await page.locator("script").count(), "the start page loads no script").toBe(0);
+				});
+				test(`${start}${APP_PAGE}: the app page says that the app needs JavaScript and has each route's anchor`, async ({ page }) => {
+					await page.goto(`./${start}${APP_PAGE}`);
+					await expectFrame(page, lang, app.languages);
+					const main = page.locator("main");
+					await expect(main.locator("h1"), "one h1: the title").toHaveText(text(app.title));
+					await expect(page.locator(".interactive-title-slot"), "the slot of the heading line").toBeHidden();
+					const note = main.locator(".interactive-noscript");
+					await expect(note, "the note that the app needs JavaScript").toBeVisible();
+					const back = await note.locator("a").evaluate((a) => a.href);
+					expect(back, "the note links the start page").toBe(new URL("../", page.url()).href);
+					for (const route of routes) await expect(main.locator(`[id="${route.id}"]`), `the anchor of the route ${route.id}`).toHaveText(text(route.title));
+				});
+			}
+		});
+		test.describe("with JavaScript", () => {
+			test(`${APP_PAGE}: the app mounts without a console error`, async ({ page }) => {
+				const errors = consoleErrors(page);
+				await page.goto(`./${APP_PAGE}`);
+				await expect(page.locator(".interactive-app")).toHaveAttribute("data-mounted", "");
+				await expect(page.locator(".interactive-app")).not.toBeEmpty();
+				expect(errors, "no console error").toEqual([]);
+			});
+			for (const { yaml, playthrough } of playthroughs) {
+				const route = playthrough.route ?? routes[0]?.id;
+				test(`${yaml.file}: played with its inputs and ticks`, async ({ page }) => {
+					const errors = consoleErrors(page);
+					await page.addInitScript((property) => Reflect.set(globalThis, property, {}), CLOCK_PROPERTY);
+					await page.goto(`./${APP_PAGE}?seed=${playthrough.seed}${route === void 0 ? "" : `#${route}`}`);
+					const host = page.locator(".interactive-app");
+					await expect(host).toHaveAttribute("data-mounted", "");
+					const live = page.locator("body > [aria-live=\"polite\"]");
+					for (const [index, step] of playthrough.steps.entries()) {
+						for (const input of inputsOf(step)) if (input.kind === "key") await pressKey(page, input.key);
+						else await host.evaluate(emitInput, input);
+						if (step.ticks !== void 0) await page.evaluate(stepTicks, {
+							count: step.ticks,
+							property: CLOCK_PROPERTY
+						});
+						const where = `${yaml.file}: steps[${index}] after ${doingText(step).join(", ")}`;
+						if (step.state !== void 0) {
+							const state = await host.evaluate((element, property) => element[property], STATE_PROPERTY);
+							expect(mismatch(state, step.state), `${where}: the state`).toBeUndefined();
+						}
+						if (step.announce !== void 0) await expect(live, `${where}: the announcement`).toHaveText(step.announce);
+					}
+					expect(errors, "no console error").toEqual([]);
+				});
+			}
+		});
+	});
+}
+export { interactiveTests };

package/dist/interactive-plugin.mjs

@@ -0,0 +1,242 @@
+import { c as withLanguage, i as notFoundPage, n as fromDepth } from "./pages-9RaaomoO.mjs";
+import { c as sourceScope, n as codeProblems } from "./vue-code-BkJjW_I_.mjs";
+import { o as pathText, t as Problems } from "./content-cYBPYg_J.mjs";
+import { n as vueAlias, r as withServer, t as VUE_OPTIONS } from "./vue-DO1m6q1R.mjs";
+import { a as inputText, i as doingText, o as inputsOf, s as mismatch } from "./contract-PONpxJtd.mjs";
+import { a as InteractiveError, n as pages, o as loadInteractive, r as renderPage } from "./render-BL6fV_NI.mjs";
+import { existsSync, readFileSync, readdirSync, statSync } from "node:fs";
+import { join } from "node:path";
+import vue from "@vitejs/plugin-vue";
+// runtime/interactive/plugin.ts
+const MARKER = "<!-- interactive -->";
+/** Where the core is, from the app's root. */
+const CORE = "src/core/index.ts";
+const CONTRACT = "the core exports start(seed, route) and step(state, input), and tick(state, dt) when the app moves on its own (interactive-core-contract)";
+/** The shell with the page in it; the start page without the shell's scripts. */
+function fill(shell, rendered) {
+	if (!shell.includes(MARKER)) throw new Error(`index.html has no ${MARKER}: put it in <body>, where the pages go`);
+	let html = withLanguage(shell, rendered.page.lang).replace(/\s*<title>[\s\S]*?<\/title>/, "").replace("</head>", `  ${rendered.head}\n  </head>`);
+	if (rendered.page.kind === "start") html = html.replace(/\s*<script type="module"[^>]*><\/script>/g, "").replace(/\s*<link rel="modulepreload"[^>]*>/g, "");
+	return fromDepth(html, rendered.page.path).replace(MARKER, () => rendered.body);
+}
+/** The single-file components of the app, from its root: every .vue file in src/. */
+function vueFiles(root, dir = "src") {
+	if (!existsSync(join(root, dir))) return [];
+	return readdirSync(join(root, dir)).sort().flatMap((name) => {
+		const file = `${dir}/${name}`;
+		if (statSync(join(root, file)).isDirectory()) return name === "node_modules" ? [] : vueFiles(root, file);
+		return name.endsWith(".vue") ? [file] : [];
+	});
+}
+const reason = (error) => (error instanceof Error ? error.message : String(error)).split("\n")[0] ?? "";
+/** Plays `playthrough` from `route`: the state after each step, or where it throws. */
+function play(core, playthrough, route) {
+	const states = [];
+	let state;
+	try {
+		state = core.start(playthrough.seed, route);
+	} catch (error) {
+		return {
+			states,
+			error: {
+				path: ["seed"],
+				message: `start(${playthrough.seed}, ${JSON.stringify(route)}) throws: ${reason(error)} (interactive-core-contract)`
+			}
+		};
+	}
+	for (const [index, step] of playthrough.steps.entries()) {
+		for (const [at, input] of inputsOf(step).entries()) try {
+			state = core.step(state, input);
+		} catch (error) {
+			const message = `step(state, ${inputText(input)}) throws: ${reason(error)} (interactive-core-contract)`;
+			return {
+				states,
+				error: {
+					path: [
+						"steps",
+						index,
+						step.keys === void 0 ? "inputs" : "keys",
+						at
+					],
+					message
+				}
+			};
+		}
+		for (let at = 0; at < (step.ticks ?? 0); at++) try {
+			state = core.tick?.(state, 20) ?? state;
+		} catch (error) {
+			const message = `tick(state, 20) throws at tick ${at + 1}: ${reason(error)} (interactive-core-contract)`;
+			return {
+				states,
+				error: {
+					path: [
+						"steps",
+						index,
+						"ticks"
+					],
+					message
+				}
+			};
+		}
+		states.push(state);
+	}
+	return { states };
+}
+const valueAt = (value, path) => path.reduce((at, part) => typeof at === "object" && at !== null ? at[part] : void 0, value);
+/** The problems of the core: its exports, the start of every route, and every playthrough. */
+async function coreProblems(root, content, load) {
+	if (!existsSync(join(root, "src/core/index.ts"))) return [`${CORE} is missing; ${CONTRACT}`];
+	let exports;
+	try {
+		exports = await load(`/${CORE}`);
+	} catch (error) {
+		return [`${CORE}: cannot be loaded: ${reason(error)}`];
+	}
+	const lacking = ["start", "step"].filter((name) => typeof exports[name] !== "function");
+	if (exports["tick"] !== void 0 && typeof exports["tick"] !== "function") lacking.push("tick as a function");
+	if (lacking.length > 0) return [`${CORE}: exports no ${lacking.join(", ")}; ${CONTRACT}`];
+	const core = exports;
+	const problems = new Problems();
+	const routes = content.app.routes ?? [];
+	const failed = /* @__PURE__ */ new Set();
+	routes.forEach((route, index) => {
+		try {
+			core.start(1, route.id);
+		} catch (error) {
+			failed.add(route.id);
+			problems.at(content.appYaml, [
+				"routes",
+				index,
+				"id"
+			], `start(1, ${JSON.stringify(route.id)}) throws: ${reason(error)}; the core starts every route (interactive-core-contract)`);
+		}
+	});
+	for (const { yaml, playthrough } of content.playthroughs) {
+		const route = playthrough.route ?? routes[0]?.id ?? "";
+		if (failed.has(route)) continue;
+		const ticking = playthrough.steps.findIndex((step) => step.ticks !== void 0);
+		if (core.tick === void 0 && ticking >= 0) {
+			problems.at(yaml, [
+				"steps",
+				ticking,
+				"ticks"
+			], `the core exports no tick, so no time passes in the app; export tick(state, dt) from ${CORE}, or leave the ticks out (interactive-core-contract)`);
+			continue;
+		}
+		const first = play(core, playthrough, route);
+		if (first.error !== void 0) {
+			problems.at(yaml, first.error.path, first.error.message);
+			continue;
+		}
+		const second = play(core, playthrough, route);
+		const differs = first.states.findIndex((state, index) => JSON.stringify(state) !== JSON.stringify(second.states[index]));
+		if (differs >= 0 || second.error !== void 0) {
+			problems.at(yaml, ["steps", Math.max(differs, 0)], "the state differs between two plays of the same steps; the core gives the same state for the same seed, route, inputs and ticks, so draw from the seed, never from Math.random or the clock (interactive-core-contract)");
+			break;
+		}
+		for (const [index, step] of playthrough.steps.entries()) {
+			if (step.state === void 0) continue;
+			const found = mismatch(first.states[index], step.state);
+			if (found === void 0) continue;
+			const done = playthrough.steps.slice(0, index + 1).flatMap(doingText).join(", ");
+			const where = found.path.length === 0 ? "the state" : pathText(found.path);
+			problems.at(yaml, [
+				"steps",
+				index,
+				"state",
+				...found.path
+			], `${where} is ${JSON.stringify(found.actual) ?? "missing"} after ${done}, the playthrough expects ${JSON.stringify(valueAt(step.state, found.path))} (interactive-playthroughs-pass)`);
+			break;
+		}
+	}
+	return problems.lines;
+}
+/** The build step of an interactive app: validates src/, checks its components and its core, writes every page. */
+function interactive() {
+	let root = process.cwd();
+	let command = "build";
+	let content;
+	const load = () => content ??= loadInteractive(root);
+	return [
+		vue(VUE_OPTIONS),
+		{
+			name: "lernapps-interactive-vue-alias",
+			config: () => ({ resolve: { alias: vueAlias() } })
+		},
+		{
+			name: "lernapps-interactive",
+			enforce: "post",
+			configResolved(config) {
+				root = config.root;
+				command = config.command;
+			},
+			async buildStart() {
+				content = void 0;
+				let loaded;
+				try {
+					loaded = load();
+				} catch (error) {
+					this.error(error instanceof Error ? error.message : String(error));
+				}
+				if (command !== "build") return;
+				const problems = codeProblems(root, vueFiles(root), sourceScope(root));
+				if (problems.length === 0) problems.push(...await withServer(root, (loader) => coreProblems(root, loaded, loader)));
+				if (problems.length > 0) this.error(new InteractiveError(problems).message);
+			},
+			generateBundle(_options, bundle) {
+				const index = bundle["index.html"];
+				if (index === void 0 || index.type !== "asset") return;
+				const shell = String(index.source);
+				const app = load().app;
+				for (const page of pages(app)) {
+					const html = fill(shell, renderPage(app, page));
+					if (page.path === "") index.source = html;
+					else this.emitFile({
+						type: "asset",
+						fileName: `${page.path}index.html`,
+						source: html
+					});
+				}
+				this.emitFile({
+					type: "asset",
+					fileName: "404.html",
+					source: notFoundPage()
+				});
+			},
+			configureServer(server) {
+				server.watcher.on("all", (_event, file) => {
+					if (file.endsWith(".yaml") && file.startsWith(join(root, "src"))) {
+						content = void 0;
+						server.ws.send({ type: "full-reload" });
+					}
+				});
+				server.middlewares.use((request, response, next) => {
+					const path = decodeURIComponent(new URL(request.url ?? "/", "http://localhost").pathname).replace(/^\//, "");
+					let app;
+					try {
+						app = load().app;
+					} catch (error) {
+						response.statusCode = 500;
+						response.setHeader("content-type", "text/plain; charset=utf-8");
+						response.end(error instanceof Error ? error.message : String(error));
+						return;
+					}
+					const page = pages(app).find((candidate) => candidate.path === path);
+					if (page === void 0) return next();
+					const shell = readFileSync(join(root, "index.html"), "utf8");
+					server.transformIndexHtml(`/${path}`, fill(shell, {
+						...renderPage(app, page),
+						page: {
+							...page,
+							path: ""
+						}
+					})).then((html) => {
+						response.setHeader("content-type", "text/html; charset=utf-8");
+						response.end(html);
+					}).catch(next);
+				});
+			}
+		}
+	];
+}
+export { CORE, fill, interactive };

package/dist/interactive.mjs

@@ -0,0 +1,75 @@
+import { n as STATE_PROPERTY, r as TICK, t as CLOCK_PROPERTY } from "./contract-PONpxJtd.mjs";
+import { createApp, h, shallowRef } from "vue";
+// runtime/interactive/interactive.ts
+/** Where a key belongs to the page's own controls, not to the app. */
+const CONTROLS = "a[href], button, input, select, textarea, summary, [contenteditable]";
+/**
+* Starts the app on the app page: its state from `core`, shown by the component `root`, and in the heading line the
+* component `options.title` if there is one. Nothing on another page.
+*/
+function startInteractive(core, root, options = {}) {
+	const host = document.querySelector(".interactive-app");
+	if (host === null) return;
+	const routes = JSON.parse(host.dataset["routes"] ?? "[]");
+	const seedParam = Number(new URL(location.href).searchParams.get("seed"));
+	const seed = Number.isInteger(seedParam) && seedParam > 0 ? seedParam : 1 + Math.floor(Math.random() * 2 ** 31 - 1);
+	const routeOf = () => {
+		const id = decodeURIComponent(location.hash.slice(1));
+		return routes.includes(id) ? id : routes[0] ?? "";
+	};
+	let route = routeOf();
+	const state = shallowRef(core.start(seed, route));
+	const set = (next) => {
+		state.value = next;
+		Object.assign(host, { [STATE_PROPERTY]: next });
+	};
+	set(state.value);
+	const markRoute = () => {
+		for (const link of document.querySelectorAll(".interactive-routes a")) if (link.hash === `#${route}`) link.setAttribute("aria-current", "true");
+		else link.removeAttribute("aria-current");
+	};
+	markRoute();
+	/** Gives `given` to the core; whether it changed the state. */
+	const input = (given) => {
+		const next = core.step(state.value, given);
+		if (next === state.value) return false;
+		set(next);
+		return true;
+	};
+	document.addEventListener("keydown", (event) => {
+		if (event.ctrlKey || event.altKey || event.metaKey || event.isComposing) return;
+		if (event.target instanceof Element && event.target.closest(CONTROLS) !== null) return;
+		if (input({
+			kind: "key",
+			key: event.key
+		})) event.preventDefault();
+	});
+	addEventListener("hashchange", () => {
+		if (routeOf() === route) return;
+		route = routeOf();
+		set(core.start(seed, route));
+		markRoute();
+	});
+	const tick = () => set(core.tick?.(state.value, 20) ?? state.value);
+	const clock = Reflect.get(globalThis, CLOCK_PROPERTY);
+	if (typeof clock === "object" && clock !== null) Object.assign(clock, { tick: (count) => {
+		for (let at = 0; at < count; at++) tick();
+	} });
+	else if (core.tick !== void 0) setInterval(tick, 20);
+	const lang = document.documentElement.lang || "de";
+	const mount = (component, into) => {
+		createApp({ render: () => h(component, {
+			state: state.value,
+			lang,
+			onInput: input
+		}) }).mount(into);
+	};
+	const slot = document.querySelector(".interactive-title-slot");
+	if (options.title !== void 0 && slot !== null) {
+		mount(options.title, slot);
+		slot.hidden = false;
+	}
+	mount(root, host);
+	host.dataset["mounted"] = "";
+}
+export { TICK, startInteractive };