gesso-framework 0.6.30 → 0.8.0

package/dist/app-De3z58x7.js

@@ -0,0 +1,638 @@
+import { t as __exportAll } from "./rolldown-runtime-D7D4PA-g.js";
+import { a as WAITS_UP_TO, i as serveAgentPort, l as validate, n as combineSurfaces, o as agentSurface, r as remoteSurface, t as AGENT_PORT } from "./remote-B4bjdTzg.js";
+import { colorToHex, darkTheme, lightTheme } from "gesso-core";
+//#region src/agent/designedTheme.ts
+/**
+* The theme an agent's `theme` names, and what to call it back.
+*
+* `light` and `dark` are the application's design themes, or Gesso's
+* where it has none. `app` is the theme the running application is
+* drawn in. Asked for nothing, an application that has design themes
+* means them, its light one before its dark, since what it is drawn in
+* is not what is being designed; one without them means itself.
+*/
+function designedTheme(asked, themes, appTheme) {
+	const name = asked ?? (themes.light !== void 0 ? "light" : themes.dark !== void 0 ? "dark" : "app");
+	if (name === "dark") return {
+		theme: themes.dark ?? darkTheme,
+		name
+	};
+	if (name === "light") return {
+		theme: themes.light ?? lightTheme,
+		name
+	};
+	return {
+		theme: appTheme() ?? lightTheme,
+		name
+	};
+}
+//#endregion
+//#region src/agent/tools.ts
+/** A tool's answer as text, and, given, the same as data. */
+function agentText(text, structured) {
+	return {
+		content: [{
+			type: "text",
+			text
+		}],
+		...structured === void 0 ? {} : { structuredContent: structured },
+		isError: false
+	};
+}
+/** A tool's failure, written for the agent to correct its call by. */
+function agentError(text) {
+	return {
+		content: [{
+			type: "text",
+			text
+		}],
+		isError: true
+	};
+}
+/** A tool's answer as text and pictures, each a PNG's bytes. */
+function agentImages(text, pictures, structured) {
+	const content = [{
+		type: "text",
+		text
+	}];
+	for (const png of pictures) content.push({
+		type: "image",
+		data: base64(png),
+		mimeType: "image/png"
+	});
+	return {
+		content,
+		...structured === void 0 ? {} : { structuredContent: structured },
+		isError: false
+	};
+}
+/** Serves a list of tool definitions as a surface, read afresh each time so a list may change. */
+function toolSurface(definitions) {
+	const listed = (definition) => ({
+		name: definition.name,
+		...definition.title === void 0 ? {} : { title: definition.title },
+		description: definition.description,
+		inputSchema: definition.inputSchema,
+		annotations: {
+			...definition.title === void 0 ? {} : { title: definition.title },
+			readOnlyHint: definition.readOnly === true,
+			...definition.destructive === void 0 ? {} : { destructiveHint: definition.destructive },
+			...definition.idempotent === void 0 ? {} : { idempotentHint: definition.idempotent },
+			openWorldHint: false
+		},
+		...definition.waitsUpToMs === void 0 ? {} : { _meta: { [WAITS_UP_TO]: definition.waitsUpToMs } }
+	});
+	return {
+		tools: () => definitions().map(listed),
+		resources: () => [],
+		read: () => void 0,
+		call: async (name, args) => {
+			const definition = definitions().find((each) => each.name === name);
+			if (definition === void 0) return agentError(`There is no tool called ${name}.`);
+			const input = args ?? {};
+			const problem = validate(definition.inputSchema, input);
+			if (problem !== null) return agentError(`${name}: ${problem}`);
+			try {
+				return await definition.run(input);
+			} catch (error) {
+				return agentError(`${name} failed: ${error instanceof Error ? error.message : String(error)}`);
+			}
+		}
+	};
+}
+function base64(bytes) {
+	let binary = "";
+	const chunk = 32768;
+	for (let at = 0; at < bytes.length; at += chunk) binary += String.fromCharCode(...bytes.subarray(at, at + chunk));
+	return btoa(binary);
+}
+//#endregion
+//#region src/agent/tokens.ts
+function themeTokens$1(theme) {
+	const typography = {};
+	for (const [role, style] of Object.entries(theme.typography)) typography[role] = {
+		fontFamily: style.fontFamily,
+		fontSize: style.fontSize,
+		fontWeight: style.fontWeight,
+		lineHeight: style.lineHeight,
+		letterSpacing: style.letterSpacing
+	};
+	const shadows = {};
+	for (const [name, layers] of Object.entries(theme.shadows)) shadows[name] = layers.map(formatShadow).join(", ") || "none";
+	const extensions = {};
+	for (const [key, group] of theme.extensions ?? []) extensions[key.description ?? "extension"] = plain(group);
+	return {
+		colors: Object.fromEntries(Object.entries(theme.colors).map(([name, color]) => [name, hex(color)])),
+		typography,
+		spacing: { ...theme.spacing },
+		shapes: plain(theme.shapes),
+		shadows,
+		density: theme.density,
+		contrast: theme.contrast,
+		units: {
+			pixelsPerInch: theme.units.pixelsPerInch,
+			rootFontSize: theme.units.rootFontSize
+		},
+		extensions
+	};
+}
+/**
+* The tokens as text, a few lines per group, for an agent to read.
+* `which` says which theme they are: "The theme in force at the
+* application's outermost content".
+*/
+function formatThemeTokens(tokens, which) {
+	const lines = [
+		`${which}. Write these names rather than their values, so a screen follows the theme into dark mode, high contrast and a rebrand.`,
+		"",
+		"colors: any color prop takes the name (backgroundColor=\"surface\", color=\"primary\")."
+	];
+	for (const [name, value] of Object.entries(tokens.colors)) lines.push(`  ${name} ${value}`);
+	lines.push("", "typography: the textStyle prop takes the role (textStyle=\"title\"). family size/line-height weight");
+	for (const [role, style] of Object.entries(tokens.typography)) lines.push(`  ${role} ${style.fontFamily} ${style.fontSize}/${style.lineHeight} ${style.fontWeight}`);
+	lines.push("", "shapes: borderRadius takes the name (borderRadius=\"medium\").", `  ${inline(tokens.shapes)}`, "", "spacing: the scale, in pixels, for gap, padding and margin.", `  ${inline(tokens.spacing)}`, "", "shadows:");
+	for (const [name, value] of Object.entries(tokens.shadows)) lines.push(`  ${name} ${value}`);
+	lines.push("", `density ${tokens.density}, contrast ${tokens.contrast}`);
+	const { pixelsPerInch, rootFontSize } = tokens.units;
+	lines.push("", `units: every length above is pixels. 1in = ${pixelsPerInch}px, 1pt = ${round(pixelsPerInch / 72)}px, 1mm = ${round(pixelsPerInch / 25.4)}px, 1rem = ${rootFontSize}px. To write one in these units, convert with the theme's: const { rem, inch, pt, mm } = lengths(theme.units) from gesso-core.`);
+	const extensions = Object.entries(tokens.extensions);
+	if (extensions.length > 0) {
+		lines.push("", "extensions: token groups the application added.");
+		for (const [name, group] of extensions) lines.push(`  ${name} ${JSON.stringify(group)}`);
+	}
+	return lines.join("\n");
+}
+function round(value) {
+	return Math.round(value * 1e3) / 1e3;
+}
+function inline(record) {
+	return Object.entries(record).map(([name, value]) => `${name} ${typeof value === "object" ? JSON.stringify(value) : String(value)}`).join(", ");
+}
+function formatShadow(shadow) {
+	const color = typeof shadow.color === "string" ? shadow.color : hex(shadow.color);
+	const parts = [
+		shadow.offsetX,
+		shadow.offsetY,
+		shadow.blurRadius,
+		shadow.spreadRadius
+	].join(" ");
+	return `${shadow.inset === true ? "inset " : ""}${parts} ${color}`;
+}
+function isColor(value) {
+	if (typeof value !== "object" || value === null) return false;
+	const color = value;
+	return Object.keys(value).length === 4 && typeof color.r === "number" && typeof color.g === "number" && typeof color.b === "number" && typeof color.a === "number";
+}
+function hex(color) {
+	return colorToHex(color);
+}
+/** A token group as JSON can hold it: colours as hex, and nothing that is not data. */
+function plain(value) {
+	if (isColor(value)) return hex(value);
+	if (Array.isArray(value)) return value.map(plain);
+	if (typeof value === "object" && value !== null) {
+		const out = {};
+		for (const [key, entry] of Object.entries(value)) if (typeof entry !== "function") out[key] = plain(entry);
+		return out;
+	}
+	return value;
+}
+//#endregion
+//#region src/agent/ui.ts
+const THEME = {
+	enum: [
+		"app",
+		"light",
+		"dark"
+	],
+	description: "The light or dark theme of what is being designed, or the running application's own (app). By default the light one where the application designs in themes of its own, as a design editor does, else its own."
+};
+const TARGET = {
+	ref: {
+		type: "string",
+		description: "The ref ui_snapshot gave the control, such as \"e4\"."
+	},
+	role: {
+		type: "string",
+		description: "The control's role, such as \"button\" or \"textbox\"."
+	},
+	name: {
+		type: "string",
+		description: "The control's accessible name, as ui_snapshot shows it in quotes."
+	}
+};
+const TOOLS = [
+	{
+		name: "ui_snapshot",
+		title: "Read the screen",
+		description: "The screen as an outline of what a screen reader would announce: each control with its role, name, state, value and a ref to act on it by. Read it before acting, and again whenever an action did not do what you expected. Prefer a channel tool when one covers what you want; these act on the interface.",
+		inputSchema: {
+			type: "object",
+			properties: {},
+			additionalProperties: false
+		},
+		annotations: {
+			readOnlyHint: true,
+			openWorldHint: false
+		}
+	},
+	{
+		name: "ui_press",
+		title: "Press a control",
+		description: "Presses a button, link, checkbox, tab or any other control, as a click would. Name it by ref, or by role and name. Returns the screen afterwards.",
+		inputSchema: {
+			type: "object",
+			properties: TARGET,
+			additionalProperties: false
+		},
+		annotations: {
+			readOnlyHint: false,
+			destructiveHint: false,
+			openWorldHint: false
+		}
+	},
+	{
+		name: "ui_type",
+		title: "Fill a field",
+		description: "Replaces a text field's whole text, as if the person had selected it all and typed. Name the field by ref, or by role and name. Returns the screen afterwards; press Enter with ui_key to submit.",
+		inputSchema: {
+			type: "object",
+			properties: {
+				...TARGET,
+				text: {
+					type: "string",
+					description: "The text the field should hold."
+				}
+			},
+			required: ["text"],
+			additionalProperties: false
+		},
+		annotations: {
+			readOnlyHint: false,
+			destructiveHint: false,
+			openWorldHint: false
+		}
+	},
+	{
+		name: "ui_focus",
+		title: "Focus a control",
+		description: "Moves keyboard focus to a control, by ref or by role and name. Returns the screen afterwards.",
+		inputSchema: {
+			type: "object",
+			properties: TARGET,
+			additionalProperties: false
+		},
+		annotations: {
+			readOnlyHint: false,
+			destructiveHint: false,
+			idempotentHint: true,
+			openWorldHint: false
+		}
+	},
+	{
+		name: "ui_key",
+		title: "Press a key",
+		description: "Presses a key where focus is, as the keyboard would: Enter, Escape, Tab, ArrowDown, a letter. Modifiers are optional. Returns the screen afterwards.",
+		inputSchema: {
+			type: "object",
+			properties: {
+				key: {
+					type: "string",
+					description: "A KeyboardEvent key name, such as \"Enter\", \"Escape\" or \"a\"."
+				},
+				shift: { type: "boolean" },
+				ctrl: { type: "boolean" },
+				alt: { type: "boolean" },
+				meta: { type: "boolean" }
+			},
+			required: ["key"],
+			additionalProperties: false
+		},
+		annotations: {
+			readOnlyHint: false,
+			destructiveHint: false,
+			openWorldHint: false
+		}
+	},
+	{
+		name: "tokens_view",
+		title: "Read the design tokens",
+		description: "The theme's colours, type styles, corner radii, spacing scale and shadows, by name and value, as the screen draws them. Read it before designing, and write the names rather than raw values. Name a control, by ref or by role and name, to read the theme where it is: part of a screen may have a theme of its own.",
+		inputSchema: {
+			type: "object",
+			properties: {
+				...TARGET,
+				theme: THEME
+			},
+			additionalProperties: false
+		},
+		annotations: {
+			readOnlyHint: true,
+			openWorldHint: false
+		}
+	},
+	{
+		name: "render_frame",
+		title: "Draw a frame",
+		description: "Draws a module of the project to a PNG you can look at: a mock, or a component with inputs, at the width you ask for, in the theme being designed in. The pixels are the application's own: the same layout, text and paint. Draw what you build, at a phone width and a desktop one, and look before you call it done. Without a height it is as tall as its content, which suits a component or a section; give one for a whole screen, which then fills it.",
+		inputSchema: {
+			type: "object",
+			properties: {
+				module: {
+					type: "string",
+					description: "The module, from the project root, as library_overview gives it: \"src/mocks/Settings\"."
+				},
+				export: {
+					type: "string",
+					description: "The export to draw: a component or an element. By default the module's default, else its only component."
+				},
+				inputs: {
+					type: "object",
+					description: "Inputs for a component, by name, as library_get lists them."
+				},
+				width: {
+					type: "number",
+					description: "In logical pixels: 390 for a phone, 1280 for a desktop."
+				},
+				height: {
+					type: "number",
+					description: "In logical pixels. Leave it out to fit the content."
+				},
+				scale: {
+					type: "number",
+					description: "Device pixels per logical pixel, 1 to 3 (default 1)."
+				},
+				theme: THEME
+			},
+			required: ["module", "width"],
+			additionalProperties: false
+		},
+		annotations: {
+			readOnlyHint: true,
+			openWorldHint: false
+		}
+	}
+];
+/**
+* The screen's tools, by name: what a relay that carries only the screen
+* (`gesso-electrobun`'s, to a desktop app's main process) lets through.
+* Listed from the tools themselves, so a tool added here is relayed
+* without the relay being told.
+*/
+const SCREEN_TOOL_NAMES = TOOLS.map((tool) => tool.name);
+/**
+* Short names for record ids.
+*
+* A record's id is its path through the tree, `root:0:0:component:1:0:1`,
+* which is exact and long, and an outline repeats one on every line an
+* agent reads. A ref is `e` and a number, given the first time a record
+* is seen and kept for as long as the surface lives, so the ref an agent
+* read in one snapshot still names the same control in the next.
+*/
+var UiRefs = class {
+	byId = /* @__PURE__ */ new Map();
+	byRef = /* @__PURE__ */ new Map();
+	refOf(id) {
+		let ref = this.byId.get(id);
+		if (ref === void 0) {
+			ref = `e${this.byId.size + 1}`;
+			this.byId.set(id, ref);
+			this.byRef.set(ref, id);
+		}
+		return ref;
+	}
+	/** The record id a ref names, or the input itself when it is not a ref this surface gave. */
+	idOf(ref) {
+		return this.byRef.get(ref) ?? ref;
+	}
+};
+/**
+* The tools, over a host. `host` returns undefined until the
+* application has started, and a tool called before then says so.
+*/
+function uiSurface(host, options = {}) {
+	const quietMs = options.quietMs ?? 50;
+	const settleMs = options.settleMs ?? 1e3;
+	const refs = new UiRefs();
+	/** Waits until two readings of the screen agree, then returns the last. */
+	const settled = async (ui) => {
+		const start = Date.now();
+		let previous = "";
+		for (;;) {
+			ui.flush();
+			const current = outline(ui.semanticsTree(), ui.focusedNodeId(), refs);
+			if (current === previous || Date.now() - start >= settleMs) return current;
+			previous = current;
+			await new Promise((resolve) => setTimeout(resolve, quietMs));
+		}
+	};
+	const act = async (args, perform) => {
+		const ui = host();
+		if (ui === void 0) return failure("The application has not started yet.");
+		ui.flush();
+		const found = resolveTarget(ui.semanticsTree(), args, refs);
+		if (typeof found === "string") return failure(found);
+		if (found.disabled === true) return failure(`${describe(found)} is disabled.`);
+		const problem = perform(ui, found);
+		if (problem !== null) return failure(problem);
+		return success(await settled(ui));
+	};
+	return {
+		tools: () => TOOLS,
+		call: async (name, args = {}) => {
+			switch (name) {
+				case "ui_snapshot": {
+					const ui = host();
+					return ui === void 0 ? failure("The application has not started yet.") : success(await settled(ui));
+				}
+				case "ui_press": return act(args, (ui, record) => (ui.applySemanticsAction({
+					id: record.id,
+					action: "click"
+				}), null));
+				case "ui_focus": return act(args, (ui, record) => (ui.applySemanticsAction({
+					id: record.id,
+					action: "focus"
+				}), null));
+				case "ui_type":
+					if (typeof args.text !== "string") return failure("ui_type needs text: the text the field should hold.");
+					return act(args, (ui, record) => {
+						if (record.states?.includes("readonly")) return `${describe(record)} is read-only.`;
+						ui.applySemanticsAction({
+							id: record.id,
+							action: "setValue",
+							value: args.text
+						});
+						return null;
+					});
+				case "ui_key": {
+					const ui = host();
+					if (ui === void 0) return failure("The application has not started yet.");
+					if (typeof args.key !== "string" || args.key === "") return failure("ui_key needs key: a KeyboardEvent key name, such as \"Enter\".");
+					ui.key(args.key, {
+						shift: args.shift === true,
+						ctrl: args.ctrl === true,
+						alt: args.alt === true,
+						meta: args.meta === true
+					});
+					return success(await settled(ui));
+				}
+				case "tokens_view": {
+					const ui = host();
+					if (ui === void 0) return failure("The application has not started yet.");
+					if (ui.theme === void 0) return failure("This application does not report its theme to agents.");
+					let at;
+					if (args.ref !== void 0 || args.role !== void 0 || args.name !== void 0) {
+						ui.flush();
+						const found = resolveTarget(ui.semanticsTree(), args, refs);
+						if (typeof found === "string") return failure(found);
+						at = found;
+					}
+					let theme;
+					let which;
+					if (at !== void 0) {
+						theme = ui.theme(at.id);
+						which = `The theme in force at ${describe(at)}`;
+					} else {
+						const designed = designedTheme(args.theme, ui.designThemes?.() ?? {}, () => ui.theme?.());
+						theme = designed.name === "app" ? ui.theme() : designed.theme;
+						which = designed.name === "app" ? "The theme in force at the application's outermost content" : `The ${designed.name} theme being designed in`;
+					}
+					if (theme === void 0) return failure("The application has not drawn anything yet, so no theme is in force.");
+					const tokens = themeTokens$1(theme);
+					return {
+						content: [{
+							type: "text",
+							text: formatThemeTokens(tokens, which)
+						}],
+						structuredContent: tokens,
+						isError: false
+					};
+				}
+				case "render_frame": {
+					const ui = host();
+					if (ui === void 0) return failure("The application has not started yet.");
+					if (ui.render === void 0) return failure("This application cannot draw frames for agents.");
+					if (typeof args.module !== "string" || args.module === "") return failure("render_frame needs module: the module, from the project root, such as \"src/mocks/Settings\".");
+					if (typeof args.width !== "number" || !(args.width > 0)) return failure("render_frame needs width: a number of logical pixels above zero, such as 390.");
+					return ui.render(args);
+				}
+				default: return failure(`There is no tool called ${name}.`);
+			}
+		},
+		resources: () => [],
+		read: () => void 0,
+		dispose: () => {}
+	};
+}
+/**
+* The tree as an indented outline, one control per line:
+*
+*   - button "Add one" [e3]
+*   - textbox "Title" value="Groceries" [e4] (focused)
+*
+* Text, because an agent reads it, and an outline is a third the size
+* of the same tree as JSON. A record with neither a role nor a name is
+* structure, and its children are lifted to its depth.
+*/
+function outline(tree, focused, refs = new UiRefs()) {
+	const depths = /* @__PURE__ */ new Map();
+	const lines = [];
+	for (const record of tree.values()) {
+		const parentDepth = record.parent === null ? -1 : depths.get(record.parent) ?? -1;
+		const shown = record.role !== void 0 || record.label !== void 0 && record.label !== "";
+		const depth = shown ? parentDepth + 1 : parentDepth;
+		depths.set(record.id, depth);
+		if (!shown) continue;
+		const parts = [`${"  ".repeat(depth)}- ${describe(record)}`];
+		if (record.states !== void 0 && record.states.length > 0) parts.push(`[${record.states.join(", ")}]`);
+		const value = valueOf(record);
+		if (value !== null) parts.push(`value=${JSON.stringify(value)}`);
+		if (record.disabled === true) parts.push("(disabled)");
+		parts.push(`[${refs.refOf(record.id)}]`);
+		if (record.id === focused) parts.push("(focused)");
+		lines.push(parts.join(" "));
+	}
+	return lines.length === 0 ? "(the screen announces nothing)" : lines.join("\n");
+}
+function describe(record) {
+	const name = record.label === void 0 || record.label === "" ? "" : ` ${JSON.stringify(record.label)}`;
+	return `${record.role ?? "text"}${name}`;
+}
+function valueOf(record) {
+	if (record.valueText !== void 0 && record.valueText !== record.label) return record.valueText;
+	if (record.valueNow !== void 0) return String(record.valueNow);
+	return null;
+}
+/**
+* The record an action names: by ref, or by role and name. A name
+* matches exactly before it matches as a part, ignoring case, so
+* "Save" finds the button called Save rather than "Save as". More than
+* one match is an error listing them, because guessing which of two
+* buttons an agent meant is how the wrong one gets pressed.
+*/
+function resolveTarget(tree, args, refs = new UiRefs()) {
+	const ref = typeof args.ref === "string" ? args.ref : void 0;
+	const role = typeof args.role === "string" ? args.role : void 0;
+	const name = typeof args.name === "string" ? args.name : void 0;
+	if (ref !== void 0) return tree.get(refs.idOf(ref)) ?? `Nothing on the screen has the ref ${ref} now. Read ui_snapshot again for current refs.`;
+	if (role === void 0 && name === void 0) return "Say which control: a ref from ui_snapshot, or a role and a name.";
+	const candidates = [...tree.values()].filter((record) => role === void 0 || record.role === role);
+	let matches = candidates;
+	if (name !== void 0) {
+		const wanted = name.toLowerCase();
+		const exact = candidates.filter((record) => record.label?.toLowerCase() === wanted);
+		matches = exact.length > 0 ? exact : candidates.filter((record) => record.label?.toLowerCase().includes(wanted));
+	}
+	const wanted = [role, name === void 0 ? void 0 : JSON.stringify(name)].filter(Boolean).join(" ");
+	if (matches.length === 1) return matches[0];
+	if (matches.length === 0) {
+		const nearby = candidates.filter((record) => record.role !== void 0).slice(0, 10).map((record) => `${describe(record)} [${refs.refOf(record.id)}]`);
+		return `Nothing on the screen is ${wanted}.${nearby.length > 0 ? ` Some that are: ${nearby.join("; ")}.` : ""}`;
+	}
+	return `${matches.length} controls are ${wanted}: ${matches.slice(0, 10).map((record) => `${describe(record)} [${refs.refOf(record.id)}]`).join("; ")}. Use a ref.`;
+}
+function success(text) {
+	return {
+		content: [{
+			type: "text",
+			text
+		}],
+		isError: false
+	};
+}
+function failure(text) {
+	return {
+		content: [{
+			type: "text",
+			text
+		}],
+		isError: true
+	};
+}
+//#endregion
+//#region src/agent/app.ts
+var app_exports = /* @__PURE__ */ __exportAll({ serveApplicationAgent: () => serveApplicationAgent });
+/**
+* Answers an agent port with the whole application: the channels this
+* thread feeds, whatever each worker behind it serves, and the screen.
+*
+* The thread that draws is the one that knows all three, which is the
+* render worker in the worker configuration and the page in the single
+* thread one; both answer with this. The screen comes last, so a
+* channel tool keeps its name.
+*/
+function serveApplicationAgent(port, parts) {
+	return serveAgentPort(port, (confirm) => {
+		const workers = [...parts.workers()].filter((worker) => worker.spawned).map((worker) => remoteSurface(worker.open(AGENT_PORT), { confirm }));
+		return combineSurfaces([
+			agentSurface(parts.channels(), { confirm }),
+			...workers,
+			uiSurface(parts.ui),
+			...parts.tools === void 0 ? [] : [toolSurface(parts.tools)]
+		]);
+	});
+}
+//#endregion
+export { outline as a, formatThemeTokens as c, agentImages as d, agentText as f, UiRefs as i, themeTokens$1 as l, designedTheme as m, serveApplicationAgent as n, resolveTarget as o, toolSurface as p, SCREEN_TOOL_NAMES as r, uiSurface as s, app_exports as t, agentError as u };
+
+//# sourceMappingURL=app-De3z58x7.js.map