@assistant-ui/react-generative-ui 0.0.21 → 0.0.22

package/dist/a2ui/convert.js

@@ -1,9 +1,13 @@
 import { ICON_NAMES } from "../ir.js";
 import { A2UI_SURFACE_ID } from "./types.js";
+import "./reducer.js";
+import { decodePointer, resolvePointer } from "./dataModel.js";
+import { evaluateA2uiValueFunction } from "./valueFunctions.js";
 //#region src/a2ui/convert.ts
 const DEPTH_CAP = 32;
 const TEMPLATE_ITEM_CAP = 100;
 const NODE_BUDGET = 5e3;
+const EVALUATION_BUDGET = 2e4;
 const SUPPORTED_COMPONENTS = /* @__PURE__ */ new Set([
 	"Text",
 	"Image",
@@ -17,7 +21,13 @@ const SUPPORTED_COMPONENTS = /* @__PURE__ */ new Set([
 	"TextField",
 	"CheckBox",
 	"ChoicePicker",
-	"DateTimeInput"
+	"DateTimeInput",
+	"Slider"
+]);
+const CHILD_LIST_COMPONENTS = /* @__PURE__ */ new Set([
+	"Row",
+	"Column",
+	"List"
 ]);
 const ICON_NAME_SET = new Set(ICON_NAMES);
 const ICON_SIZE_SET = /* @__PURE__ */ new Set([
@@ -40,44 +50,85 @@ const setOwnProperty = (target, key, value) => {
 	});
 	else target[key] = value;
 };
+const FUNCTION_CALL_KEYS = /* @__PURE__ */ new Set([
+	"call",
+	"args",
+	"returnType",
+	"catalogId"
+]);
+const isFunctionCall = (value) => isPlainObject(value) && typeof value["call"] === "string" && (value["args"] === void 0 || isPlainObject(value["args"])) && Object.keys(value).every((key) => FUNCTION_CALL_KEYS.has(key));
 const isBinding = (value) => isPlainObject(value) && Object.keys(value).length === 1 && typeof value["path"] === "string";
-const isTemplateChildren = (value) => isPlainObject(value) && Object.keys(value).length === 1 && isPlainObject(value["template"]) && Object.keys(value["template"]).length === 2 && typeof value["template"]["componentId"] === "string" && typeof value["template"]["path"] === "string";
-const decodePointer = (path) => {
-	if (path === "" || path === "/") return [];
-	if (!path.startsWith("/")) return void 0;
-	return path.slice(1).split("/").map((segment) => segment.replaceAll("~1", "/").replaceAll("~0", "~"));
+const childTemplateOf = (children) => {
+	const template = isPlainObject(children) && Object.keys(children).length === 1 && isPlainObject(children["template"]) ? children["template"] : children;
+	return isPlainObject(template) && Object.keys(template).length === 2 && typeof template["componentId"] === "string" && typeof template["path"] === "string" ? {
+		componentId: template["componentId"],
+		path: template["path"]
+	} : void 0;
 };
-const resolvePointer = (source, path) => {
-	const segments = decodePointer(path);
-	if (!segments) return void 0;
-	let current = source;
-	for (const segment of segments) {
-		if (Array.isArray(current)) {
-			if (!/^(0|[1-9]\d*)$/.test(segment)) return void 0;
-			current = current[Number(segment)];
-			continue;
-		}
-		if (!isRecord(current) || !Object.hasOwn(current, segment)) return;
-		current = current[segment];
+const bindingPath = (value) => isBinding(value) ? value.path : void 0;
+const pointerIn = (scope, path) => (path.startsWith("/") ? "" : scope.path) + decodePointer(path).map((segment) => `/${segment.replaceAll("~", "~0").replaceAll("/", "~1")}`).join("");
+const setIn = (value, segments, leaf) => {
+	const [head, ...rest] = segments;
+	if (head === void 0) return leaf;
+	if (/^(0|[1-9]\d*)$/.test(head) && (Array.isArray(value) || value === void 0 || value === null)) {
+		const list = Array.isArray(value) ? value : [];
+		const index = Number(head);
+		if (index >= list.length && index > 1e4) return value;
+		const copy = [...list];
+		copy[index] = setIn(copy[index], rest, leaf);
+		return copy;
 	}
-	return current;
+	const copy = isRecord(value) ? { ...value } : {};
+	setOwnProperty(copy, head, setIn(Object.hasOwn(copy, head) ? copy[head] : void 0, rest, leaf));
+	return copy;
 };
-const bindingPath = (value) => isBinding(value) ? value.path : void 0;
-const lastPointerSegment = (path) => {
-	if (!path) return void 0;
-	return decodePointer(path)?.at(-1);
+const withFieldReferences = (value, pointer, fields) => {
+	if (fields.has(pointer)) return fields.get(pointer);
+	let result = value;
+	for (const [name, field] of fields) if (name.startsWith(`${pointer}/`)) result = setIn(result, decodePointer(name.slice(pointer.length)), field);
+	return result;
 };
-const materialize = (value, source) => {
-	if (isBinding(value)) return resolvePointer(source, value.path);
-	if (Array.isArray(value)) return value.map((entry) => materialize(entry, source)).filter((entry) => entry !== void 0);
-	if (!isPlainObject(value)) return value;
+const materializeEntries = (value, source, context, evaluate, depth, positional = false) => {
 	const result = {};
 	for (const [key, entry] of Object.entries(value)) {
-		const resolved = materialize(entry, source);
+		const resolved = key === "functionCall" && isFunctionCall(entry) ? {
+			...entry,
+			...entry.args !== void 0 ? { args: materializeEntries(entry.args, source, context, evaluate, depth, true) } : {}
+		} : materialize(entry, source, context, evaluate, depth, positional);
 		if (resolved !== void 0) setOwnProperty(result, key, resolved);
 	}
 	return result;
 };
+function materialize(value, source, context, evaluate = true, depth = 0, positional = false) {
+	if (isBinding(value)) {
+		const pointer = pointerIn({
+			data: source,
+			path: context.scopePath
+		}, value.path);
+		const resolved = resolvePointer(context.surface.dataModel, pointer);
+		context.dependencies?.set(pointer, resolved);
+		return resolved;
+	}
+	if (Array.isArray(value)) {
+		const entries = value.map((entry) => materialize(entry, source, context, evaluate, depth, positional));
+		return positional ? entries : entries.filter((entry) => entry !== void 0);
+	}
+	if (!isPlainObject(value)) return value;
+	if (!evaluate || !isFunctionCall(value)) return materializeEntries(value, source, context, evaluate, depth, positional);
+	if (!spendEvaluation(context)) return void 0;
+	if (depth >= DEPTH_CAP) {
+		if (!context.functionDepthWarned) {
+			context.warnings.push(`A2UI function nesting cap of ${DEPTH_CAP} was reached.`);
+			context.functionDepthWarned = true;
+		}
+		return;
+	}
+	return evaluateA2uiValueFunction(value.call, materializeEntries(value.args ?? {}, source, context, true, depth + 1, true), {
+		resolve: (part) => spendEvaluation(context) ? materialize(part, source, context, true, depth + 1) : void 0,
+		warn: (message) => context.warnings.push(message),
+		templates: context.templates
+	});
+}
 const firstDefined = (props, keys) => {
 	for (const key of keys) if (props[key] !== void 0) return props[key];
 };
@@ -86,6 +137,74 @@ const stringProp = (props, keys) => {
 	return typeof value === "string" ? value : void 0;
 };
 const sourceSurfaceId = (surface) => surface[A2UI_SURFACE_ID] ?? "";
+const BOUND_KEYS = [
+	"text",
+	"value",
+	"binding"
+];
+const INPUT_COMPONENTS = /* @__PURE__ */ new Set([
+	"TextField",
+	"CheckBox",
+	"ChoicePicker",
+	"DateTimeInput",
+	"Slider"
+]);
+const DATE_PATTERN = /^\d{4}-\d{2}-\d{2}$/;
+const finiteNumber = (value) => typeof value === "number" && Number.isFinite(value) ? value : void 0;
+const decimalPlaces = (value) => {
+	const [mantissa = "", exponent = "0"] = String(value).split("e");
+	return Math.max(0, (mantissa.split(".")[1]?.length ?? 0) - Number(exponent));
+};
+const sliderStep = (min, max, value, steps) => {
+	if (max <= min) return void 0;
+	if (typeof steps === "number" && Number.isInteger(steps) && steps >= 1) return (max - min) / steps;
+	const precision = Math.max(decimalPlaces(min), value === void 0 ? 0 : decimalPlaces(value));
+	return Math.min(10 ** Math.floor(Math.log10((max - min) / 100)), 10 ** -precision);
+};
+const recordBindings = (node, props, mapped, scope, context) => {
+	const component = node["component"];
+	const name = mapped["name"];
+	const boundKey = BOUND_KEYS.find((key) => node[key] !== void 0);
+	const value = boundKey === void 0 ? void 0 : props[boundKey];
+	if (INPUT_COMPONENTS.has(String(component)) && typeof name === "string") {
+		context.textFields.set(name, (!context.textFields.has(name) || context.bindings !== void 0) && (component === "TextField" || component === "DateTimeInput"));
+		const field = (fallback) => fallback === void 0 ? { $field: name } : {
+			$field: name,
+			fallback
+		};
+		const listValued = component === "ChoicePicker" && mapped.$type !== "CheckboxGroup" && typeof value !== "string";
+		context.inputFields.set(name, listValued ? [field(Array.isArray(value) ? value[0] : void 0)] : field(value));
+	}
+	const action = mapped.$action;
+	const raw = node["action"];
+	if (!action || !isRecord(raw)) return;
+	const functionCall = action.type === "a2ui:functionCall";
+	const event = isRecord(raw["event"]) ? raw["event"] : raw;
+	const userMessage = event["userMessage"];
+	if (!functionCall && isBinding(userMessage)) context.boundUserMessages.push({
+		action,
+		pointer: pointerIn(scope, userMessage.path)
+	});
+	const rawEntries = functionCall ? isRecord(raw["functionCall"]) ? raw["functionCall"]["args"] : void 0 : event["context"];
+	const target = functionCall ? action["args"] : action["context"];
+	if (!isRecord(rawEntries) || !isRecord(target)) return;
+	for (const [key, entry] of Object.entries(rawEntries)) if (isBinding(entry)) context.boundActionEntries.push({
+		target,
+		key,
+		pointer: pointerIn(scope, entry.path)
+	});
+};
+const spendEvaluation = (context) => {
+	if (context.evaluations < EVALUATION_BUDGET) {
+		context.evaluations++;
+		return true;
+	}
+	if (!context.evaluationBudgetWarned) {
+		context.warnings.push(`A2UI function evaluation budget of ${EVALUATION_BUDGET} was reached.`);
+		context.evaluationBudgetWarned = true;
+	}
+	return false;
+};
 const reserveNode = (context) => {
 	if (context.emittedNodes >= NODE_BUDGET) {
 		if (!context.budgetWarned) {
@@ -105,14 +224,14 @@ const childReferences = (node) => {
 	if (node["component"] === "Tabs" && Array.isArray(node["tabs"])) for (const tab of node["tabs"]) references.push(isRecord(tab) ? tab["child"] : void 0);
 	return references;
 };
-const childrenOf = (node, dataSource, context, depth, visited) => {
+const childrenOf = (node, scope, context, depth, visited) => {
 	const result = [];
 	for (const childId of childReferences(node)) {
 		if (typeof childId !== "string") {
 			context.warnings.push(`Component "${String(node["id"] ?? "")}" has a malformed child reference.`);
 			continue;
 		}
-		const child = convertComponent(childId, dataSource, context, depth + 1, visited);
+		const child = convertComponent(childId, scope, context, depth + 1, visited);
 		if (child) result.push(child);
 	}
 	return result;
@@ -127,17 +246,35 @@ const textLabel = (node, children, context) => {
 };
 const mappedAction = (node, props, context) => {
 	const action = props["action"];
-	const event = isRecord(action) && isRecord(action["event"]) ? action["event"] : action;
-	const actionName = typeof event === "string" ? event : isRecord(event) && typeof event["name"] === "string" ? event["name"] : void 0;
-	if (!actionName) return void 0;
-	const actionContext = isRecord(event) ? event["context"] : void 0;
-	return {
-		type: "a2ui:action",
-		name: actionName,
+	if (action === void 0) return void 0;
+	const source = {
 		surfaceId: context.surfaceId,
-		sourceComponentId: typeof node["id"] === "string" ? node["id"] : "",
-		...actionContext !== void 0 ? { context: actionContext } : {}
+		sourceComponentId: typeof node["id"] === "string" ? node["id"] : ""
 	};
+	const event = isRecord(action) && isRecord(action["event"]) ? action["event"] : action;
+	const actionName = typeof event === "string" ? event : isRecord(event) && typeof event["name"] === "string" ? event["name"] : void 0;
+	if (actionName) {
+		const actionContext = isRecord(event) ? event["context"] : void 0;
+		const userMessage = isRecord(event) ? event["userMessage"] : void 0;
+		return {
+			type: "a2ui:action",
+			name: actionName,
+			...source,
+			...typeof userMessage === "string" ? { userMessage } : {},
+			...actionContext !== void 0 ? { context: actionContext } : {}
+		};
+	}
+	const functionCall = isRecord(action) ? action["functionCall"] : void 0;
+	if (isRecord(functionCall) && typeof functionCall["call"] === "string") {
+		const args = functionCall["args"];
+		return {
+			type: "a2ui:functionCall",
+			call: functionCall["call"],
+			...source,
+			...isRecord(args) ? { args } : {}
+		};
+	}
+	context.warnings.push(`Component "${String(node["id"] ?? "")}" has a malformed action.`);
 };
 const choiceOptions = (value) => {
 	if (!Array.isArray(value)) return [];
@@ -148,7 +285,7 @@ const choiceOptions = (value) => {
 	});
 	return options;
 };
-const mappedProps = (node, props, context) => {
+const mappedProps = (node, props, context, scope) => {
 	const component = node["component"];
 	if (component === "Text") {
 		const text = stringProp(props, ["text", "value"]);
@@ -239,35 +376,37 @@ const mappedProps = (node, props, context) => {
 	};
 	if (component === "Button") {
 		const label = stringProp(props, ["label", "text"]);
-		const buttonStyle = props["buttonStyle"];
+		const variantStyle = props["variant"] === "primary" ? "primary" : props["variant"] === "borderless" ? "ghost" : void 0;
+		const buttonStyle = typeof props["buttonStyle"] === "string" ? props["buttonStyle"] : variantStyle;
 		const block = props["block"];
 		const submit = props["submit"];
 		const action = mappedAction(node, props, context);
 		return {
 			$type: "Button",
 			...label !== void 0 ? { label } : {},
-			...typeof buttonStyle === "string" ? { buttonStyle } : {},
+			...buttonStyle !== void 0 ? { buttonStyle } : {},
 			...typeof block === "boolean" ? { block } : {},
 			...typeof submit === "boolean" ? { submit } : {},
 			...action ? { $action: action } : {}
 		};
 	}
-	const binding = firstDefined(node, [
-		"text",
-		"value",
-		"binding"
-	]);
-	const name = lastPointerSegment(bindingPath(binding));
+	const bound = bindingPath(firstDefined(node, BOUND_KEYS));
+	const name = bound === void 0 ? void 0 : pointerIn(scope, bound);
 	const label = stringProp(props, ["label"]);
 	if (component === "TextField") {
 		const placeholder = stringProp(props, ["placeholder"]);
-		const multiline = typeof props["multiline"] === "boolean" ? props["multiline"] : props["textFieldType"] === "longText" ? true : void 0;
+		const inputType = props["variant"] === "obscured" ? "password" : props["variant"] === "number" ? "number" : void 0;
+		const multiline = typeof props["multiline"] === "boolean" ? props["multiline"] : props["variant"] === "longText" || props["textFieldType"] === "longText" ? true : void 0;
+		const initial = firstDefined(props, ["value", "text"]);
+		const defaultValue = typeof initial === "string" ? initial : typeof initial === "number" && Number.isFinite(initial) ? String(initial) : void 0;
 		return {
 			$type: "Input",
+			...inputType !== void 0 ? { inputType } : {},
 			...placeholder !== void 0 ? { placeholder } : {},
 			...multiline !== void 0 ? { multiline } : {},
 			...label !== void 0 ? { label } : {},
-			...name !== void 0 ? { name } : {}
+			...name !== void 0 ? { name } : {},
+			...defaultValue !== void 0 ? { defaultValue } : {}
 		};
 	}
 	if (component === "CheckBox") {
@@ -279,28 +418,51 @@ const mappedProps = (node, props, context) => {
 			...typeof defaultChecked === "boolean" ? { defaultChecked } : {}
 		};
 	}
+	if (component === "Slider") {
+		const min = finiteNumber(props["min"]) ?? 0;
+		const max = finiteNumber(props["max"]);
+		if (max === void 0 || max < min) return void 0;
+		const value = finiteNumber(props["value"]);
+		const step = sliderStep(min, max, name === void 0 ? value : finiteNumber(resolvePointer(context.stepModel, name)), props["steps"]);
+		return {
+			$type: "Slider",
+			min,
+			max,
+			...step !== void 0 ? { step } : {},
+			...value !== void 0 ? { defaultValue: value } : {},
+			...label !== void 0 ? { label } : {},
+			...name !== void 0 ? { name } : {}
+		};
+	}
 	if (component === "ChoicePicker") {
 		const options = choiceOptions(props["options"]);
 		const value = props["value"];
-		const defaultValue = typeof value === "string" ? value : Array.isArray(value) && typeof value[0] === "string" ? value[0] : void 0;
-		if (props["variant"] === "radio" || props["variant"] === "single" || props["variant"] === "singleSelection" || props["displayStyle"] === "radio" || props["variant"] === "mutuallyExclusive" && props["displayStyle"] !== "chips") return {
-			$type: "RadioGroup",
+		const selected = typeof value === "string" ? [value] : Array.isArray(value) ? value.filter((entry) => typeof entry === "string") : [];
+		if (props["variant"] === "multipleSelection") return {
+			$type: "CheckboxGroup",
 			options,
 			...label !== void 0 ? { label } : {},
 			...name !== void 0 ? { name } : {},
-			...defaultValue !== void 0 ? { defaultValue } : {}
+			...selected.length > 0 ? { defaultValue: selected } : {}
 		};
-		const placeholder = stringProp(props, ["placeholder"]);
+		const [defaultValue] = selected;
 		return {
-			$type: "Select",
+			$type: "RadioGroup",
 			options,
-			...placeholder !== void 0 ? { placeholder } : {},
 			...label !== void 0 ? { label } : {},
-			...name !== void 0 ? { name } : {}
+			...name !== void 0 ? { name } : {},
+			...defaultValue !== void 0 ? { defaultValue } : {}
 		};
 	}
 	if (component === "DateTimeInput") {
 		const value = stringProp(props, ["value"]);
+		const shapeValue = name === void 0 ? value : resolvePointer(context.stepModel, name);
+		if (props["enableTime"] === true || typeof shapeValue === "string" && shapeValue !== "" && !DATE_PATTERN.test(shapeValue)) return {
+			$type: "Input",
+			...value !== void 0 ? { defaultValue: value } : {},
+			...label !== void 0 ? { label } : {},
+			...name !== void 0 ? { name } : {}
+		};
 		const min = stringProp(props, ["min"]);
 		const max = stringProp(props, ["max"]);
 		return {
@@ -313,11 +475,12 @@ const mappedProps = (node, props, context) => {
 		};
 	}
 };
-const convertTemplate = (node, templateChildren, dataSource, context, depth, visited, retained, mappedContainer) => {
+const convertTemplate = (node, template, scope, context, depth, visited, converted) => {
 	if (!reserveNode(context)) return null;
-	const horizontalList = node["component"] === "List" && materialize(node["direction"], dataSource) === "horizontal";
-	const container = mappedContainer ?? retained ?? { $type: horizontalList ? "Row" : "ListView" };
-	const list = resolvePointer(dataSource, templateChildren.template.path);
+	const container = converted ?? { $type: "ListView" };
+	const itemized = container.$type === "ListView";
+	const list = resolvePointer(context.surface.dataModel, pointerIn(scope, template.path));
+	const listPointer = pointerIn(scope, template.path);
 	if (!Array.isArray(list)) {
 		context.warnings.push(`Template on component "${String(node["id"] ?? "")}" did not resolve to a list.`);
 		return {
@@ -332,21 +495,23 @@ const convertTemplate = (node, templateChildren, dataSource, context, depth, vis
 	}
 	const children = [];
 	for (let index = 0; index < itemCount; index++) {
-		if (!retained && !horizontalList && !reserveNode(context)) break;
-		const child = convertComponent(templateChildren.template.componentId, list[index], context, depth + 1, visited);
-		if (retained || horizontalList) {
-			if (child) children.push(child);
-		} else children.push({
+		if (itemized && !reserveNode(context)) break;
+		const child = convertComponent(template.componentId, {
+			data: list[index],
+			path: `${listPointer}/${index}`
+		}, context, depth + 1, visited);
+		if (itemized) children.push({
 			$type: "ListViewItem",
 			...child ? { children: child } : {}
 		});
+		else if (child) children.push(child);
 	}
 	return {
 		...container,
 		children
 	};
 };
-function convertComponent(componentId, dataSource, context, depth, visited) {
+function convertComponent(componentId, scope, context, depth, visited) {
 	if (depth >= DEPTH_CAP) {
 		if (!context.depthWarned) {
 			context.warnings.push(`A2UI depth cap of ${DEPTH_CAP} was reached.`);
@@ -370,19 +535,61 @@ function convertComponent(componentId, dataSource, context, depth, visited) {
 			context.warnings.push(`Unknown A2UI component "${String(component ?? "")}" was skipped.`);
 			return null;
 		}
-		const templateChildren = node["children"];
-		const hasTemplate = isTemplateChildren(templateChildren);
-		if (!SUPPORTED_COMPONENTS.has(component) && !context.keepUnknownComponents && !hasTemplate) {
+		const template = childTemplateOf(node["children"]);
+		if (!SUPPORTED_COMPONENTS.has(component) && !context.keepUnknownComponents && !template) {
 			context.warnings.push(`Unknown A2UI component "${component}" was skipped.`);
 			return null;
 		}
-		const props = {};
-		for (const [key, value] of Object.entries(node)) {
-			if (key === "id" || key === "component" || key === "children" || key === "child") continue;
-			const resolved = materialize(value, dataSource);
-			if (resolved !== void 0) setOwnProperty(props, key, resolved);
+		const cacheKey = context.cache ? JSON.stringify([
+			componentId,
+			scope.path,
+			depth
+		]) : "";
+		let cached = context.cache?.get(cacheKey);
+		if (cached && (context.evaluations + cached.evaluations > EVALUATION_BUDGET || [...cached.dependencies].some(([path, value]) => !Object.is(resolvePointer(context.surface.dataModel, path), value)))) cached = void 0;
+		let props;
+		let mapped;
+		if (cached) {
+			props = cached.props;
+			mapped = cached.mapped;
+			context.evaluations += cached.evaluations;
+		} else {
+			props = {};
+			const dependencies = /* @__PURE__ */ new Map();
+			const evaluations = context.evaluations;
+			context.dependencies = dependencies;
+			context.scopePath = scope.path;
+			for (const [key, value] of Object.entries(node)) {
+				if (key === "id" || key === "component" || key === "children" || key === "child") continue;
+				const resolved = materialize(value, scope.data, context, key !== "checks");
+				if (resolved !== void 0) setOwnProperty(props, key, resolved);
+			}
+			context.dependencies = void 0;
+			mapped = mappedProps(node, props, context, scope);
+			if (context.cache && context.warnings.length === 0 && !mapped?.$action) {
+				cached = {
+					props,
+					mapped,
+					dependencies,
+					evaluations: context.evaluations - evaluations
+				};
+				context.cache.set(cacheKey, cached);
+			}
+		}
+		if (mapped && context.bindings && typeof mapped["name"] === "string" && INPUT_COMPONENTS.has(component)) {
+			const field = mapped.$type === "Checkbox" ? "checked" : "value";
+			const defaultField = mapped.$type === "Checkbox" ? "defaultChecked" : "defaultValue";
+			const fallback = mapped.$type === "Checkbox" ? false : mapped.$type === "CheckboxGroup" ? [] : mapped.$type === "Slider" ? mapped["min"] : "";
+			const { [defaultField]: initialValue, ...rest } = mapped;
+			mapped = {
+				...rest,
+				[field]: initialValue ?? mapped[field] ?? fallback
+			};
+			context.bindings.set(mapped["name"], {
+				value: mapped[field],
+				arrayValue: component === "ChoicePicker" && mapped.$type !== "CheckboxGroup" && typeof props["value"] !== "string"
+			});
 		}
-		const mapped = mappedProps(node, props, context);
 		if (!mapped && SUPPORTED_COMPONENTS.has(component)) {
 			context.warnings.push(`A2UI component "${component}" could not be mapped and was skipped.`);
 			return null;
@@ -391,11 +598,12 @@ function convertComponent(componentId, dataSource, context, depth, visited) {
 			$type: component,
 			...Object.fromEntries(Object.entries(props).filter(([key]) => !key.startsWith("$")))
 		} : void 0;
-		if (hasTemplate) return convertTemplate(node, templateChildren, dataSource, context, depth, visited, retained, component === "List" ? mapped : void 0);
+		if (template) return convertTemplate(node, template, scope, context, depth, visited, CHILD_LIST_COMPONENTS.has(component) ? mapped : retained);
 		if (!reserveNode(context)) return null;
 		const converted = mapped ?? retained;
 		if (!converted) return null;
-		const children = childrenOf(node, dataSource, context, depth, visited);
+		recordBindings(node, props, converted, scope, context);
+		const children = childrenOf(node, scope, context, depth, visited);
 		if (mapped?.$type === "Button" && mapped["label"] === void 0) {
 			const label = textLabel(node, children, context);
 			if (label !== void 0) return {
@@ -407,15 +615,39 @@ function convertComponent(componentId, dataSource, context, depth, visited) {
 			$type: "ListViewItem",
 			children: child
 		})) : children;
-		return {
+		if (cached?.result && cached.children?.length === listChildren.length && cached.children.every((child, index) => child === listChildren[index])) return cached.result;
+		const result = {
 			...converted,
 			...listChildren.length > 0 ? { children: listChildren } : {}
 		};
+		if (cached) {
+			cached.children = listChildren;
+			cached.result = result;
+		}
+		return result;
 	} finally {
 		visited.delete(componentId);
 	}
 }
 function convertSurfaceToUISpec(surface, options = {}) {
+	return convertSurface(surface, options.keepUnknownComponents === true);
+}
+const createLiveSurfaceConverter = (surface) => {
+	const cache = /* @__PURE__ */ new Map();
+	const templates = /* @__PURE__ */ new Map();
+	return (dataModel) => {
+		const bindings = /* @__PURE__ */ new Map();
+		return {
+			...convertSurface({
+				...surface,
+				dataModel,
+				[A2UI_SURFACE_ID]: sourceSurfaceId(surface)
+			}, false, bindings, cache, templates, surface.dataModel),
+			bindings
+		};
+	};
+};
+function convertSurface(surface, keepUnknownComponents, bindings, cache, templates = /* @__PURE__ */ new Map(), stepModel = surface.dataModel) {
 	const warnings = [];
 	if (!surface.components.has("root")) return {
 		spec: null,
@@ -423,17 +655,46 @@ function convertSurfaceToUISpec(surface, options = {}) {
 	};
 	const context = {
 		surface,
+		stepModel,
 		surfaceId: sourceSurfaceId(surface),
 		warnings,
 		emittedNodes: 0,
 		depthWarned: false,
 		budgetWarned: false,
 		templateCapWarned: false,
-		keepUnknownComponents: options.keepUnknownComponents === true
+		evaluations: 0,
+		evaluationBudgetWarned: false,
+		functionDepthWarned: false,
+		templates,
+		inputFields: /* @__PURE__ */ new Map(),
+		textFields: /* @__PURE__ */ new Map(),
+		boundActionEntries: [],
+		boundUserMessages: [],
+		keepUnknownComponents,
+		bindings,
+		cache,
+		dependencies: void 0,
+		scopePath: ""
 	};
 	try {
+		const spec = convertComponent("root", {
+			data: surface.dataModel,
+			path: ""
+		}, context, 0, /* @__PURE__ */ new Set());
+		for (const { target, key, pointer } of context.boundActionEntries) {
+			const value = withFieldReferences(target[key], pointer, context.inputFields);
+			if (value !== void 0) setOwnProperty(target, key, value);
+		}
+		for (const { action, pointer } of context.boundUserMessages) {
+			if (!context.textFields.get(pointer)) continue;
+			const fallback = action["userMessage"];
+			setOwnProperty(action, "userMessage", typeof fallback === "string" ? {
+				$field: pointer,
+				fallback
+			} : { $field: pointer });
+		}
 		return {
-			spec: convertComponent("root", surface.dataModel, context, 0, /* @__PURE__ */ new Set()),
+			spec,
 			warnings
 		};
 	} catch {
@@ -445,6 +706,6 @@ function convertSurfaceToUISpec(surface, options = {}) {
 	}
 }
 //#endregion
-export { convertSurfaceToUISpec };
+export { convertSurfaceToUISpec, createLiveSurfaceConverter };
 
 //# sourceMappingURL=convert.js.map