@bolloon/bolloon-agent 0.4.14 → 0.4.16

package/dist/web/a2ui-client.js

@@ -4103,7 +4103,7 @@
         function is(x2, y2) {
           return x2 === y2 && (0 !== x2 || 1 / x2 === 1 / y2) || x2 !== x2 && y2 !== y2;
         }
-        function shallowEqual(objA, objB) {
+        function shallowEqual2(objA, objB) {
           if (objectIs(objA, objB)) return true;
           if ("object" !== typeof objA || null === objA || "object" !== typeof objB || null === objB)
             return false;
@@ -4171,7 +4171,7 @@
             anchorOffset: doc.anchorOffset,
             focusNode: doc.focusNode,
             focusOffset: doc.focusOffset
-          }), lastSelection && shallowEqual(lastSelection, doc) || (lastSelection = doc, doc = accumulateTwoPhaseListeners(activeElementInst, "onSelect"), 0 < doc.length && (nativeEvent = new SyntheticEvent(
+          }), lastSelection && shallowEqual2(lastSelection, doc) || (lastSelection = doc, doc = accumulateTwoPhaseListeners(activeElementInst, "onSelect"), 0 < doc.length && (nativeEvent = new SyntheticEvent(
             "onSelect",
             "select",
             null,
@@ -8199,7 +8199,7 @@
             );
             return oldProps;
           }
-          return ctor.prototype && ctor.prototype.isPureReactComponent ? !shallowEqual(oldProps, newProps) || !shallowEqual(oldState, newState) : true;
+          return ctor.prototype && ctor.prototype.isPureReactComponent ? !shallowEqual2(oldProps, newProps) || !shallowEqual2(oldState, newState) : true;
         }
         function callComponentWillReceiveProps(workInProgress2, instance, newProps, nextContext) {
           var oldState = instance.state;
@@ -8505,7 +8505,7 @@
           if (!checkScheduledUpdateOrContext(current2, renderLanes2)) {
             var prevProps = type.memoizedProps;
             Component = Component.compare;
-            Component = null !== Component ? Component : shallowEqual;
+            Component = null !== Component ? Component : shallowEqual2;
             if (Component(prevProps, nextProps) && current2.ref === workInProgress2.ref)
               return bailoutOnAlreadyFinishedWork(
                 current2,
@@ -8522,7 +8522,7 @@
         function updateSimpleMemoComponent(current2, workInProgress2, Component, nextProps, renderLanes2) {
           if (null !== current2) {
             var prevProps = current2.memoizedProps;
-            if (shallowEqual(prevProps, nextProps) && current2.ref === workInProgress2.ref && workInProgress2.type === current2.type)
+            if (shallowEqual2(prevProps, nextProps) && current2.ref === workInProgress2.ref && workInProgress2.type === current2.type)
               if (didReceiveUpdate = false, workInProgress2.pendingProps = nextProps = prevProps, checkScheduledUpdateOrContext(current2, renderLanes2))
                 0 !== (current2.flags & 131072) && (didReceiveUpdate = true);
               else
@@ -25808,6 +25808,365 @@
     }
   };
 
+  // node_modules/@a2ui/web_core/src/v0_9/schema/common-types.js
+  var DataBindingSchema = external_exports.object({
+    "path": external_exports.string().describe("A JSON Pointer path to a value in the data model.")
+  }).describe("REF:common_types.json#/$defs/DataBinding|A JSON Pointer path to a value in the data model.");
+  var FunctionCallSchema = external_exports.object({
+    "call": external_exports.string().describe("The name of the function to call."),
+    "args": external_exports.record(external_exports.any()).describe("Arguments passed to the function."),
+    "returnType": external_exports.enum(["string", "number", "boolean", "array", "object", "any", "void"]).default("boolean")
+  }).describe("REF:common_types.json#/$defs/FunctionCall|Invokes a named function on the client.");
+  var DynamicBooleanSchema = external_exports.union([external_exports.boolean(), DataBindingSchema, FunctionCallSchema]).describe("REF:common_types.json#/$defs/DynamicBoolean|A boolean value that can be a literal, a path, or a function call returning a boolean.");
+  var DynamicStringSchema = external_exports.union([
+    external_exports.string(),
+    DataBindingSchema,
+    // FunctionCall returning string (simplified schema for Zod, stricter in JSON Schema)
+    FunctionCallSchema
+  ]).describe("REF:common_types.json#/$defs/DynamicString|Represents a string");
+  var DynamicNumberSchema = external_exports.union([external_exports.number(), DataBindingSchema, FunctionCallSchema]).describe("REF:common_types.json#/$defs/DynamicNumber|Represents a value that can be either a literal number, a path to a number in the data model, or a function call returning a number.");
+  var DynamicStringListSchema = external_exports.union([external_exports.array(external_exports.string()), DataBindingSchema, FunctionCallSchema]).describe("REF:common_types.json#/$defs/DynamicStringList|Represents a value that can be either a literal array of strings, a path to a string array in the data model, or a function call returning a string array.");
+  var DynamicValueSchema = external_exports.union([
+    external_exports.string(),
+    external_exports.number(),
+    external_exports.boolean(),
+    external_exports.array(external_exports.any()),
+    DataBindingSchema,
+    FunctionCallSchema
+  ]).describe("REF:common_types.json#/$defs/DynamicValue|A value that can be a literal, a path, or a function call returning any type.");
+  var ComponentIdSchema = markChildRef(external_exports.string().describe("REF:common_types.json#/$defs/ComponentId|The unique identifier for a component."), "component-id");
+  function markChildRef(schema, ref) {
+    schema._def.a2uiChildRef = ref;
+    return schema;
+  }
+  function childRefKindOf(schema) {
+    return schema._def.a2uiChildRef;
+  }
+  function componentId(options = {}) {
+    if (options.description === void 0) {
+      return ComponentIdSchema;
+    }
+    return ComponentIdSchema.describe(`REF:common_types.json#/$defs/ComponentId|${options.description}`);
+  }
+  function childList(options = {}) {
+    if (options.description === void 0) {
+      return ChildListSchema;
+    }
+    return ChildListSchema.describe(`REF:common_types.json#/$defs/ChildList|${options.description}`);
+  }
+  var ChildListSchema = markChildRef(external_exports.union([
+    external_exports.array(ComponentIdSchema).describe("A static list of child component IDs."),
+    external_exports.object({
+      "componentId": ComponentIdSchema,
+      "path": external_exports.string().describe("The path to the list of component property objects in the data model.")
+    }).describe("A template for generating a dynamic list of children.")
+  ]).describe("REF:common_types.json#/$defs/ChildList"), "child-list");
+  var ActionSchema = external_exports.union([
+    external_exports.object({
+      "event": external_exports.object({
+        "name": external_exports.string(),
+        "context": external_exports.record(DynamicValueSchema).optional()
+      })
+    }).describe("Triggers a server-side event."),
+    external_exports.object({
+      "functionCall": FunctionCallSchema
+    }).describe("Executes a local client-side function.")
+  ]).describe("REF:common_types.json#/$defs/Action");
+  var CheckRuleSchema = external_exports.object({
+    "condition": DynamicBooleanSchema,
+    "message": external_exports.string().describe("The error message to display if the check fails.")
+  }).describe("REF:common_types.json#/$defs/CheckRule|A check rule consisting of a condition and an error message.");
+  var CheckableSchema = external_exports.object({
+    "checks": external_exports.array(CheckRuleSchema).optional().describe("A list of checks to perform."),
+    "isValid": external_exports.boolean().optional().describe("Whether the checks currently pass."),
+    "validationErrors": external_exports.array(external_exports.string()).optional().describe("Current validation error messages.")
+  }).describe("REF:common_types.json#/$defs/Checkable|Properties for components that support client-side checks.");
+  var AccessibilityAttributesSchema = external_exports.object({
+    "label": DynamicStringSchema.optional().describe("REF:common_types.json#/$defs/DynamicString|A short string used by assistive technologies to convey the purpose of an element."),
+    "description": DynamicStringSchema.optional().describe("REF:common_types.json#/$defs/DynamicString|Additional information provided by assistive technologies about an element.")
+  }).describe("REF:common_types.json#/$defs/AccessibilityAttributes|Attributes to enhance accessibility.");
+  var AnyComponentSchema = external_exports.object({
+    "component": external_exports.string().describe("The type name of the component."),
+    "id": ComponentIdSchema.optional(),
+    "weight": external_exports.number().optional()
+  }).passthrough().describe("A generic A2UI component definition.");
+
+  // node_modules/@a2ui/web_core/src/v0_9/catalog/schema_loader.js
+  var COMMON_TYPE_SCHEMAS = {
+    DynamicString: DynamicStringSchema,
+    DynamicNumber: DynamicNumberSchema,
+    DynamicBoolean: DynamicBooleanSchema,
+    DynamicStringList: DynamicStringListSchema,
+    DynamicValue: DynamicValueSchema,
+    ComponentId: ComponentIdSchema,
+    ChildList: ChildListSchema,
+    Action: ActionSchema,
+    CheckRule: CheckRuleSchema,
+    Checkable: CheckableSchema,
+    AccessibilityAttributes: AccessibilityAttributesSchema
+  };
+  function resolveJsonPointer(rootDoc, pointer) {
+    if (!pointer.startsWith("#/"))
+      return void 0;
+    const segments = pointer.slice(2).split("/").map((s2) => s2.replace(/~1/g, "/").replace(/~0/g, "~"));
+    let curr = rootDoc;
+    for (const seg of segments) {
+      if (curr && typeof curr === "object" && seg in curr) {
+        curr = curr[seg];
+      } else {
+        return void 0;
+      }
+    }
+    return typeof curr === "object" && curr !== null ? curr : void 0;
+  }
+  function resolveProtocolRef(ref) {
+    const defName = ref.split(/#\/(?:\$defs|definitions)\//)[1];
+    return defName ? COMMON_TYPE_SCHEMAS[defName] : void 0;
+  }
+  function convertEnumToZod(values) {
+    if (values.length === 0) {
+      return external_exports.unknown();
+    }
+    if (values.every((v2) => typeof v2 === "string")) {
+      return external_exports.enum(values);
+    }
+    if (values.length === 1) {
+      return external_exports.literal(values[0]);
+    }
+    return external_exports.union(values.map((v2) => external_exports.literal(v2)));
+  }
+  function convertPropertyToZod(propSchema, rootDoc, visitedPointers = /* @__PURE__ */ new Set()) {
+    if (!propSchema || typeof propSchema !== "object") {
+      return external_exports.unknown();
+    }
+    if (propSchema.$ref && typeof propSchema.$ref === "string") {
+      const ref = propSchema.$ref;
+      const resolvedProtocol = resolveProtocolRef(ref);
+      if (resolvedProtocol) {
+        const defName = ref.split(/#\/(?:\$defs|definitions)\//)[1];
+        const desc = propSchema.description ? `REF:common_types.json#/$defs/${defName}|${propSchema.description}` : resolvedProtocol.description;
+        return desc ? resolvedProtocol.describe(desc) : resolvedProtocol;
+      }
+      if (rootDoc && ref.startsWith("#/") && !visitedPointers.has(ref)) {
+        visitedPointers.add(ref);
+        const localTarget = resolveJsonPointer(rootDoc, ref);
+        if (localTarget) {
+          let zodType = convertPropertyToZod(localTarget, rootDoc, visitedPointers);
+          if (propSchema.description) {
+            zodType = zodType.describe(propSchema.description);
+          }
+          return zodType;
+        }
+      }
+    }
+    if (Array.isArray(propSchema.oneOf) || Array.isArray(propSchema.anyOf)) {
+      const branches = propSchema.oneOf || propSchema.anyOf;
+      const enumBranch = branches.find((b2) => Array.isArray(b2.enum));
+      const hasBinding = branches.some((b2) => typeof b2.$ref === "string" && b2.$ref.includes("DataBinding"));
+      if (enumBranch) {
+        let enumZod = convertEnumToZod(enumBranch.enum);
+        if (propSchema.default !== void 0) {
+          enumZod = enumZod.default(propSchema.default);
+        }
+        const desc = propSchema.description || (hasBinding ? "REF:common_types.json#/$defs/DynamicString" : void 0);
+        if (desc) {
+          enumZod = enumZod.describe(desc);
+        }
+        return enumZod;
+      }
+    }
+    if (Array.isArray(propSchema.enum) && propSchema.enum.length > 0) {
+      let enumZod = convertEnumToZod(propSchema.enum);
+      if (propSchema.default !== void 0) {
+        enumZod = enumZod.default(propSchema.default);
+      }
+      if (propSchema.description) {
+        enumZod = enumZod.describe(propSchema.description);
+      }
+      return enumZod;
+    }
+    if (propSchema.type === "array") {
+      const itemSchema = propSchema.items ? convertPropertyToZod(propSchema.items, rootDoc, visitedPointers) : external_exports.any();
+      let arr = external_exports.array(itemSchema);
+      if (propSchema.description)
+        arr = arr.describe(propSchema.description);
+      return arr;
+    }
+    switch (propSchema.type) {
+      case "string": {
+        let s2 = external_exports.string();
+        if (propSchema.default !== void 0)
+          s2 = s2.default(propSchema.default);
+        if (propSchema.description)
+          s2 = s2.describe(propSchema.description);
+        return s2;
+      }
+      case "integer": {
+        let n2 = external_exports.number().int();
+        if (propSchema.default !== void 0)
+          n2 = n2.default(propSchema.default);
+        if (propSchema.description)
+          n2 = n2.describe(propSchema.description);
+        return n2;
+      }
+      case "number": {
+        let n2 = external_exports.number();
+        if (propSchema.default !== void 0)
+          n2 = n2.default(propSchema.default);
+        if (propSchema.description)
+          n2 = n2.describe(propSchema.description);
+        return n2;
+      }
+      case "boolean": {
+        let b2 = external_exports.boolean();
+        if (propSchema.default !== void 0)
+          b2 = b2.default(propSchema.default);
+        if (propSchema.description)
+          b2 = b2.describe(propSchema.description);
+        return b2;
+      }
+      case "object": {
+        let obj = external_exports.record(external_exports.any());
+        if (propSchema.description)
+          obj = obj.describe(propSchema.description);
+        return obj;
+      }
+      default: {
+        let anyZ = external_exports.any();
+        if (propSchema.description)
+          anyZ = anyZ.describe(propSchema.description);
+        return anyZ;
+      }
+    }
+  }
+  function convertPropertiesToShape(properties, requiredSet, omitEnvelopeFields = false, rootDoc) {
+    const shape = {};
+    for (const [propName, propSchema] of Object.entries(properties)) {
+      if (omitEnvelopeFields && (propName === "component" || propName === "id")) {
+        continue;
+      }
+      const zodField = convertPropertyToZod(propSchema, rootDoc);
+      shape[propName] = requiredSet.has(propName) ? zodField : zodField.optional();
+    }
+    return shape;
+  }
+  function collectComponentSubSchemas(schema, rootDoc, visitedPointers = /* @__PURE__ */ new Set()) {
+    const result = [];
+    if (!schema || typeof schema !== "object")
+      return result;
+    if (Array.isArray(schema.allOf)) {
+      for (const sub of schema.allOf) {
+        if (!sub || typeof sub !== "object")
+          continue;
+        if (typeof sub.$ref === "string") {
+          const ref = sub.$ref;
+          if (ref.includes("common_types.json") && ref.includes("ComponentCommon")) {
+            result.push({
+              properties: {
+                accessibility: AccessibilityAttributesSchema.optional()
+              }
+            });
+          } else if (ref.startsWith("#/")) {
+            if (!visitedPointers.has(ref)) {
+              visitedPointers.add(ref);
+              const target = resolveJsonPointer(rootDoc, ref);
+              if (target) {
+                result.push(...collectComponentSubSchemas(target, rootDoc, visitedPointers));
+              }
+            }
+          }
+        } else {
+          result.push(...collectComponentSubSchemas(sub, rootDoc, visitedPointers));
+        }
+      }
+    }
+    if (schema.properties) {
+      result.push(schema);
+    }
+    return result;
+  }
+  function convertComponentJsonSchemaToZod(rawSchema, rootDoc) {
+    const shape = {};
+    const schemasToMerge = collectComponentSubSchemas(rawSchema, rootDoc);
+    const requiredSet = /* @__PURE__ */ new Set();
+    for (const s2 of schemasToMerge) {
+      if (Array.isArray(s2.required)) {
+        s2.required.forEach((r2) => requiredSet.add(r2));
+      }
+    }
+    for (const s2 of schemasToMerge) {
+      const propShape = convertPropertiesToShape(s2.properties || {}, requiredSet, true, rootDoc);
+      Object.assign(shape, propShape);
+    }
+    return external_exports.object(shape).strict();
+  }
+  function convertFunctionArgsJsonSchemaToZod(rawSchema, rootDoc) {
+    const requiredSet = new Set(Array.isArray(rawSchema.required) ? rawSchema.required : []);
+    const shape = convertPropertiesToShape(rawSchema.properties || {}, requiredSet, false, rootDoc);
+    return external_exports.object(shape).strict();
+  }
+  function parseFunctionDefinitions(rawFunctions, rootDoc) {
+    const result = [];
+    if (!rawFunctions)
+      return result;
+    if (Array.isArray(rawFunctions)) {
+      for (const fn of rawFunctions) {
+        if (fn && typeof fn.name === "string") {
+          const paramSchema = fn.parameters && typeof fn.parameters === "object" ? convertFunctionArgsJsonSchemaToZod(fn.parameters, rootDoc) : external_exports.record(external_exports.any());
+          result.push({
+            name: fn.name,
+            description: fn.description,
+            returnType: fn.returnType ?? "any",
+            schema: paramSchema
+          });
+        }
+      }
+      return result;
+    }
+    if (typeof rawFunctions === "object") {
+      for (const [name, defn] of Object.entries(rawFunctions)) {
+        const d2 = defn;
+        const argsSchema = d2.properties?.args ?? d2.args ?? d2.parameters;
+        const paramSchema = argsSchema && typeof argsSchema === "object" ? convertFunctionArgsJsonSchemaToZod(argsSchema, rootDoc) : external_exports.record(external_exports.any());
+        result.push({
+          name,
+          description: d2.description,
+          returnType: d2.returnType ?? d2.properties?.returnType?.const ?? "any",
+          schema: paramSchema
+        });
+      }
+    }
+    return result;
+  }
+  function loadCatalogFromSchema(catalogSchema) {
+    const catalogId = catalogSchema.catalogId ?? catalogSchema.$id ?? catalogSchema.id;
+    if (!catalogId || typeof catalogId !== "string") {
+      throw new Error("Catalog ID must be specified via catalog metadata ('catalogId' or '$id').");
+    }
+    const permittedNames = /* @__PURE__ */ new Set();
+    const oneOf = catalogSchema.$defs?.anyComponent?.oneOf;
+    if (Array.isArray(oneOf)) {
+      for (const item of oneOf) {
+        if (typeof item?.$ref === "string" && item.$ref.startsWith("#/components/")) {
+          permittedNames.add(item.$ref.split("/").pop());
+        }
+      }
+    }
+    const components = [];
+    const componentsMap = catalogSchema.components ?? {};
+    for (const [name, rawCompSchema] of Object.entries(componentsMap)) {
+      if (permittedNames.size === 0 || permittedNames.has(name)) {
+        const zodSchema = convertComponentJsonSchemaToZod(rawCompSchema, catalogSchema);
+        components.push({
+          name,
+          schema: zodSchema
+        });
+      }
+    }
+    const functions = parseFunctionDefinitions(catalogSchema.functions, catalogSchema);
+    return new Catalog(catalogId, components, functions);
+  }
+
   // node_modules/@a2ui/web_core/src/v0_9/catalog/types.js
   function createFunctionImplementation(api, execute) {
     return {
@@ -25836,9 +26195,13 @@
         if (!fn) {
           throw new A2uiExpressionError(`Function not found in catalog '${this.id}': ${name}`, name);
         }
+        const execute = fn.execute;
+        if (typeof execute !== "function") {
+          throw new A2uiExpressionError(`Function '${name}' in catalog '${this.id}' is schema-only and has no implementation.`, name);
+        }
         try {
           const safeArgs = fn.schema.parse(rawArgs);
-          return fn.execute(safeArgs, ctx, abortSignal);
+          return execute.call(fn, safeArgs, ctx, abortSignal);
         } catch (e2) {
           if (e2?.name === "ZodError" || e2 instanceof external_exports.ZodError) {
             throw new A2uiExpressionError(`Validation failed for function '${name}': ${e2.message}`, name, e2.errors ?? e2.issues);
@@ -25847,6 +26210,14 @@
         }
       };
     }
+    /**
+     * Constructs a fully-typed schema-only Catalog directly from raw A2UI catalog schema.
+     *
+     * @param catalogSchema Raw catalog schema or client capabilities payload object.
+     */
+    static fromSchema(catalogSchema) {
+      return loadCatalogFromSchema(catalogSchema);
+    }
   };
 
   // node_modules/@a2ui/web_core/src/v0_9/common/events.js
@@ -28164,6 +28535,24 @@
   };
 
   // node_modules/@a2ui/web_core/src/v0_9/processing/message-processor.js
+  function formatZodIssue(err) {
+    const path = err.path.join(".") || "root";
+    if ("keys" in err && Array.isArray(err.keys) && err.keys.length > 0) {
+      const keysStr = err.keys.map((k) => `'${k}'`).join(", ");
+      return `${path}: Unrecognized key(s) in object: ${keysStr}`;
+    }
+    if (err.code === "invalid_enum_value" && Array.isArray(err.options)) {
+      const optionsStr = err.options.join(" | ");
+      return `${path}: Invalid enum value. Expected ${optionsStr}, received '${err.received}'`;
+    }
+    if (err.message && !err.message.includes("Expected undefined, received undefined")) {
+      return `${path}: ${err.message}`;
+    }
+    if ("expected" in err && err.expected !== void 0 && err.received !== void 0) {
+      return path + ": Expected " + err.expected + ", received " + err.received;
+    }
+    return `${path}: Validation error (${err.code || "invalid"})`;
+  }
   var MessageProcessor = class {
     /**
      * Creates a new message processor.
@@ -28378,8 +28767,12 @@
           if (componentApi) {
             const validationResult = componentApi.schema.safeParse(properties);
             if (!validationResult.success) {
-              const formattedErrors = validationResult.error.errors.map((err) => `${err.path.join(".") || "root"}: ${err.message}`).join(", ");
-              throw new A2uiValidationError(`Validation failed for component '${componentType}' (${id}): ${formattedErrors}`);
+              const formattedErrors = validationResult.error.errors.map(formatZodIssue).join(", ");
+              console.error("[A2UI Validation Error] Component '" + componentType + "' (" + id + "):", {
+                propertyKeys: Object.keys(properties),
+                issues: validationResult.error.issues
+              });
+              throw new A2uiValidationError(`Validation failed for component '${componentType}' (${id}): ${formattedErrors}`, validationResult.error.issues);
             }
           }
         }
@@ -28461,6 +28854,19 @@
       const absolutePath = this.resolvePath(path);
       this.dataModel.set(absolutePath, value);
     }
+    /**
+     * Checks whether a value (typically an array element) contains any dynamic parts
+     * (path bindings or function calls) that require resolution.
+     */
+    static containsDynamicValue(value) {
+      if (value === null || typeof value !== "object") {
+        return false;
+      }
+      if (Array.isArray(value)) {
+        return value.some((item) => _DataContext.containsDynamicValue(item));
+      }
+      return "path" in value || "call" in value;
+    }
     /**
      * Synchronously evaluates a `DynamicValue` (a literal, a path binding, or a function call)
      * into its concrete runtime value.
@@ -28473,9 +28879,15 @@
      * @returns The synchronously resolved value.
      */
     resolveDynamicValue(value) {
-      if (value === null || typeof value !== "object" || Array.isArray(value)) {
+      if (value === null || typeof value !== "object") {
         return value;
       }
+      if (Array.isArray(value)) {
+        if (!_DataContext.containsDynamicValue(value)) {
+          return value;
+        }
+        return value.map((item) => this.resolveDynamicValue(item));
+      }
       if ("path" in value) {
         const absolutePath = this.resolvePath(value.path);
         return this.dataModel.get(absolutePath);
@@ -28540,9 +28952,22 @@
      * @returns A Preact Signal containing the reactive result of the evaluation.
      */
     resolveSignal(value) {
-      if (typeof value !== "object" || value === null || Array.isArray(value)) {
+      if (typeof value !== "object" || value === null) {
         return signal(value);
       }
+      if (Array.isArray(value)) {
+        if (!_DataContext.containsDynamicValue(value)) {
+          return signal(value);
+        }
+        const itemSignals = value.map((item) => this.resolveSignal(item));
+        const resultSig = computed(() => itemSignals.map((s2) => getValue(s2)));
+        resultSig.unsubscribe = () => {
+          for (const s2 of itemSignals) {
+            s2.unsubscribe?.();
+          }
+        };
+        return resultSig;
+      }
       if ("path" in value) {
         const absolutePath = this.resolvePath(value.path);
         return this.dataModel.getSignal(absolutePath);
@@ -28710,10 +29135,10 @@
      * @param componentId The ID of the component.
      * @param dataModelBasePath The base path for data model access (default: '/').
      */
-    constructor(surface, componentId, dataModelBasePath = "/") {
-      const model = surface.componentsModel.get(componentId);
+    constructor(surface, componentId2, dataModelBasePath = "/") {
+      const model = surface.componentsModel.get(componentId2);
       if (!model) {
-        throw new A2uiStateError(`Component not found: ${componentId}`);
+        throw new A2uiStateError(`Component not found: ${componentId2}`);
       }
       this.componentModel = model;
       this.surfaceComponents = surface.componentsModel;
@@ -28735,14 +29160,33 @@
   function scrapeSchemaBehavior(schema) {
     return getFieldBehavior(schema);
   }
+  var ACTION_REF = "REF:common_types.json#/$defs/Action";
+  var DATA_BINDING_REF = "REF:common_types.json#/$defs/DataBinding";
+  var DYNAMIC_REF_PREFIX = "#/$defs/Dynamic";
   function getFieldBehavior(type, propertyName) {
     let current = type;
+    let description = current._def?.description || "";
     while (current._def.typeName === "ZodOptional" || current._def.typeName === "ZodNullable" || current._def.typeName === "ZodDefault") {
+      if (!description && current._def.description) {
+        description = current._def.description;
+      }
       current = current._def.innerType;
     }
+    if (!description && current._def.description) {
+      description = current._def.description;
+    }
     if (propertyName === "checks") {
       return { type: "CHECKABLE" };
     }
+    if (description.startsWith(ACTION_REF)) {
+      return { type: "ACTION" };
+    }
+    if (childRefKindOf(current) === "child-list" || description.includes("#/$defs/ChildList")) {
+      return { type: "STRUCTURAL" };
+    }
+    if ((description.startsWith(DATA_BINDING_REF) || description.includes(DYNAMIC_REF_PREFIX)) && current._def.typeName !== "ZodObject" && current._def.typeName !== "ZodArray") {
+      return { type: "DYNAMIC" };
+    }
     if (current._def.typeName === "ZodUnion") {
       const options = current._def.options;
       const isAction = options.some((o2) => o2._def.typeName === "ZodObject" && o2._def.shape().event);
@@ -28778,6 +29222,7 @@
       this.propsListeners = [];
       this.currentProps = {};
       this.isConnected = false;
+      this.actionClosures = /* @__PURE__ */ new Map();
       this.context = context;
       this.behaviorTree = scrapeSchemaBehavior(schema);
       if (this.behaviorTree.type !== "OBJECT") {
@@ -28808,13 +29253,56 @@
       this.currentProps = { ...this.currentProps, ...resolved };
       this.notify();
     }
-    resolveAndBind(value, behavior, path, isSync) {
-      if (value === void 0 || value === null)
-        return value;
-      switch (behavior.type) {
-        case "DYNAMIC": {
-          const bound = this.context.dataContext.subscribeDynamicValue(value, (newVal) => {
-            this.updateDeepValue(path, newVal);
+    bindDynamicValue(value, path, isSync) {
+      const bound = this.context.dataContext.subscribeDynamicValue(value, (newVal) => {
+        this.updateDeepValue(path, newVal);
+        this.notify();
+      });
+      if (!isSync) {
+        this.dataListeners.push(() => bound.unsubscribe());
+      } else {
+        bound.unsubscribe();
+      }
+      return bound.value;
+    }
+    bindAction(value, path) {
+      const cacheKey = path.join("/");
+      const cached = this.actionClosures.get(cacheKey);
+      if (cached && jsonEquals(cached.raw, value)) {
+        return cached.closure;
+      }
+      const closure = () => {
+        const resolveDeepSync = (val) => {
+          if (typeof val !== "object" || val === null)
+            return val;
+          if ("path" in val || "call" in val) {
+            return this.context.dataContext.resolveDynamicValue(val);
+          }
+          if (Array.isArray(val))
+            return val.map(resolveDeepSync);
+          const res = {};
+          for (const [k, v2] of Object.entries(val))
+            res[k] = resolveDeepSync(v2);
+          return res;
+        };
+        this.context.dispatchAction(resolveDeepSync(value));
+      };
+      this.actionClosures.set(cacheKey, { raw: value, closure });
+      return closure;
+    }
+    bindStructuralTemplate(value, path, isSync) {
+      if (value && typeof value === "object" && !Array.isArray(value)) {
+        const templatePath = value.path;
+        const templateComponentId = value.componentId;
+        if (templatePath && templateComponentId) {
+          const bound = this.context.dataContext.subscribeDynamicValue({ path: templatePath }, (newVal) => {
+            const arr = Array.isArray(newVal) ? newVal : [];
+            const listContext2 = this.context.dataContext.nested(templatePath);
+            const resolvedChildren = arr.map((_2, i2) => ({
+              id: templateComponentId,
+              basePath: listContext2.nested(String(i2)).path
+            }));
+            this.updateDeepValue(path, resolvedChildren);
             this.notify();
           });
           if (!isSync) {
@@ -28822,50 +29310,28 @@
           } else {
             bound.unsubscribe();
           }
-          return bound.value;
+          const currentArr = Array.isArray(bound.value) ? bound.value : [];
+          const listContext = this.context.dataContext.nested(templatePath);
+          return currentArr.map((_2, i2) => ({
+            id: templateComponentId,
+            basePath: listContext.nested(String(i2)).path
+          }));
+        }
+      }
+      return value;
+    }
+    resolveAndBind(value, behavior, path, isSync) {
+      if (value === void 0 || value === null)
+        return value;
+      switch (behavior.type) {
+        case "DYNAMIC": {
+          return this.bindDynamicValue(value, path, isSync);
         }
         case "ACTION": {
-          return () => {
-            const resolveDeepSync = (val) => {
-              if (typeof val !== "object" || val === null)
-                return val;
-              if ("path" in val || "call" in val)
-                return this.context.dataContext.resolveDynamicValue(val);
-              if (Array.isArray(val))
-                return val.map(resolveDeepSync);
-              const res = {};
-              for (const [k, v2] of Object.entries(val))
-                res[k] = resolveDeepSync(v2);
-              return res;
-            };
-            this.context.dispatchAction(resolveDeepSync(value));
-          };
+          return this.bindAction(value, path);
         }
         case "STRUCTURAL": {
-          if (value && typeof value === "object" && value.path && value.componentId) {
-            const bound = this.context.dataContext.subscribeDynamicValue({ path: value.path }, (newVal) => {
-              const arr = Array.isArray(newVal) ? newVal : [];
-              const listContext2 = this.context.dataContext.nested(value.path);
-              const resolvedChildren = arr.map((_2, i2) => ({
-                id: value.componentId,
-                basePath: listContext2.nested(String(i2)).path
-              }));
-              this.updateDeepValue(path, resolvedChildren);
-              this.notify();
-            });
-            if (!isSync) {
-              this.dataListeners.push(() => bound.unsubscribe());
-            } else {
-              bound.unsubscribe();
-            }
-            const currentArr = Array.isArray(bound.value) ? bound.value : [];
-            const listContext = this.context.dataContext.nested(value.path);
-            return currentArr.map((_2, i2) => ({
-              id: value.componentId,
-              basePath: listContext.nested(String(i2)).path
-            }));
-          }
-          return value;
+          return this.bindStructuralTemplate(value, path, isSync);
         }
         case "CHECKABLE": {
           const rules = Array.isArray(value) ? value : [];
@@ -28900,8 +29366,9 @@
           this.updateDeepValue([...parentPath, "validationErrors"], initialErrors);
           return value;
         }
-        case "STATIC":
+        case "STATIC": {
           return value;
+        }
         case "ARRAY": {
           if (!Array.isArray(value))
             return value;
@@ -28980,77 +29447,817 @@
       return this.currentProps;
     }
   };
-
-  // node_modules/@a2ui/web_core/src/v0_9/schema/common-types.js
-  var DataBindingSchema = external_exports.object({
-    "path": external_exports.string().describe("A JSON Pointer path to a value in the data model.")
-  }).describe("REF:common_types.json#/$defs/DataBinding|A JSON Pointer path to a value in the data model.");
-  var FunctionCallSchema = external_exports.object({
-    "call": external_exports.string().describe("The name of the function to call."),
-    "args": external_exports.record(external_exports.any()).describe("Arguments passed to the function."),
-    "returnType": external_exports.enum(["string", "number", "boolean", "array", "object", "any", "void"]).default("boolean")
-  }).describe("REF:common_types.json#/$defs/FunctionCall|Invokes a named function on the client.");
-  var DynamicBooleanSchema = external_exports.union([external_exports.boolean(), DataBindingSchema, FunctionCallSchema]).describe("REF:common_types.json#/$defs/DynamicBoolean|A boolean value that can be a literal, a path, or a function call returning a boolean.");
-  var DynamicStringSchema = external_exports.union([
-    external_exports.string(),
-    DataBindingSchema,
-    // FunctionCall returning string (simplified schema for Zod, stricter in JSON Schema)
-    FunctionCallSchema
-  ]).describe("REF:common_types.json#/$defs/DynamicString|Represents a string");
-  var DynamicNumberSchema = external_exports.union([external_exports.number(), DataBindingSchema, FunctionCallSchema]).describe("REF:common_types.json#/$defs/DynamicNumber|Represents a value that can be either a literal number, a path to a number in the data model, or a function call returning a number.");
-  var DynamicStringListSchema = external_exports.union([external_exports.array(external_exports.string()), DataBindingSchema, FunctionCallSchema]).describe("REF:common_types.json#/$defs/DynamicStringList|Represents a value that can be either a literal array of strings, a path to a string array in the data model, or a function call returning a string array.");
-  var DynamicValueSchema = external_exports.union([
-    external_exports.string(),
-    external_exports.number(),
-    external_exports.boolean(),
-    external_exports.array(external_exports.any()),
-    DataBindingSchema,
-    FunctionCallSchema
-  ]).describe("REF:common_types.json#/$defs/DynamicValue|A value that can be a literal, a path, or a function call returning any type.");
-  var ComponentIdSchema = external_exports.string().describe("REF:common_types.json#/$defs/ComponentId|The unique identifier for a component.");
-  var ChildListSchema = external_exports.union([
-    external_exports.array(ComponentIdSchema).describe("A static list of child component IDs."),
-    external_exports.object({
-      "componentId": ComponentIdSchema,
-      "path": external_exports.string().describe("The path to the list of component property objects in the data model.")
-    }).describe("A template for generating a dynamic list of children.")
-  ]).describe("REF:common_types.json#/$defs/ChildList");
-  var ActionSchema = external_exports.union([
-    external_exports.object({
-      "event": external_exports.object({
-        "name": external_exports.string(),
-        "context": external_exports.record(DynamicValueSchema).optional()
-      })
-    }).describe("Triggers a server-side event."),
-    external_exports.object({
-      "functionCall": FunctionCallSchema
-    }).describe("Executes a local client-side function.")
-  ]).describe("REF:common_types.json#/$defs/Action");
-  var CheckRuleSchema = external_exports.object({
-    "condition": DynamicBooleanSchema,
-    "message": external_exports.string().describe("The error message to display if the check fails.")
-  }).describe("REF:common_types.json#/$defs/CheckRule|A check rule consisting of a condition and an error message.");
-  var CheckableSchema = external_exports.object({
-    "checks": external_exports.array(CheckRuleSchema).optional().describe("A list of checks to perform."),
-    "isValid": external_exports.boolean().optional().describe("Whether the checks currently pass."),
-    "validationErrors": external_exports.array(external_exports.string()).optional().describe("Current validation error messages.")
-  }).describe("REF:common_types.json#/$defs/Checkable|Properties for components that support client-side checks.");
-  var AccessibilityAttributesSchema = external_exports.object({
-    "label": DynamicStringSchema.optional().describe("REF:common_types.json#/$defs/DynamicString|A short string used by assistive technologies to convey the purpose of an element."),
-    "description": DynamicStringSchema.optional().describe("REF:common_types.json#/$defs/DynamicString|Additional information provided by assistive technologies about an element.")
-  }).describe("REF:common_types.json#/$defs/AccessibilityAttributes|Attributes to enhance accessibility.");
-  var AnyComponentSchema = external_exports.object({
-    "component": external_exports.string().describe("The type name of the component."),
-    "id": ComponentIdSchema.optional(),
-    "weight": external_exports.number().optional()
-  }).passthrough().describe("A generic A2UI component definition.");
-
-  // node_modules/@a2ui/web_core/src/v0_9/basic_catalog/expressions/expression_parser.js
-  var ExpressionParser = class _ExpressionParser {
-    static {
-      this.MAX_DEPTH = 10;
+  function jsonEquals(a2, b2) {
+    if (Object.is(a2, b2))
+      return true;
+    if (typeof a2 !== "object" || typeof b2 !== "object" || a2 === null || b2 === null) {
+      return false;
     }
-    /**
+    if (Array.isArray(a2) || Array.isArray(b2)) {
+      if (!Array.isArray(a2) || !Array.isArray(b2) || a2.length !== b2.length) {
+        return false;
+      }
+      return a2.every((item, index) => jsonEquals(item, b2[index]));
+    }
+    const aKeys = Object.keys(a2);
+    const bKeys = Object.keys(b2);
+    if (aKeys.length !== bKeys.length)
+      return false;
+    return aKeys.every((key) => Object.prototype.hasOwnProperty.call(b2, key) && jsonEquals(a2[key], b2[key]));
+  }
+
+  // node_modules/@a2ui/web_core/src/v0_9/nodes/resolved-binding.js
+  var ResolvedBinding = class {
+    constructor(value) {
+      this.value = value;
+    }
+  };
+  var WritableBinding = class extends ResolvedBinding {
+    constructor(value, set, path) {
+      super(value);
+      this.set = set;
+      this.path = path;
+    }
+  };
+  function isWritable(binding) {
+    return binding instanceof WritableBinding;
+  }
+  function sameBinding(a2, b2) {
+    if (isWritable(a2) !== isWritable(b2)) {
+      return false;
+    }
+    if (isWritable(a2) && isWritable(b2) && a2.path !== b2.path) {
+      return false;
+    }
+    return valueEquals(a2.value, b2.value);
+  }
+  function valueEquals(a2, b2) {
+    if (Object.is(a2, b2)) {
+      return true;
+    }
+    if (Array.isArray(a2) && Array.isArray(b2)) {
+      return a2.length === b2.length && a2.every((item, i2) => valueEquals(item, b2[i2]));
+    }
+    if (isPlainObject(a2) && isPlainObject(b2)) {
+      const aKeys = Object.keys(a2);
+      const bKeys = Object.keys(b2);
+      return aKeys.length === bKeys.length && aKeys.every((key) => key in b2 && valueEquals(a2[key], b2[key]));
+    }
+    return false;
+  }
+  function isPlainObject(value) {
+    if (typeof value !== "object" || value === null) {
+      return false;
+    }
+    const proto = Object.getPrototypeOf(value);
+    return proto === Object.prototype || proto === null;
+  }
+
+  // node_modules/@a2ui/web_core/src/v0_9/nodes/component-node.js
+  var PLACEHOLDER_TYPE = "Placeholder";
+  function isComponentNode(value) {
+    return value instanceof MutableComponentNode;
+  }
+  var MutableComponentNode = class {
+    constructor(instanceId, componentId2, type, dataPath, initialProps, impl, state = "resolved") {
+      this._onDestroyed = new EventEmitter();
+      this.onDestroyed = this._onDestroyed;
+      this.cleanups = [];
+      this._disposed = false;
+      this.instanceId = instanceId;
+      this.componentId = componentId2;
+      this.type = type;
+      this.dataPath = dataPath;
+      this.props = signal(initialProps);
+      this.impl = impl;
+      this.state = state;
+    }
+    get disposed() {
+      return this._disposed;
+    }
+    get isPlaceholder() {
+      return this.state !== "resolved";
+    }
+    addCleanup(cleanup) {
+      this.cleanups.push(cleanup);
+    }
+    toJSON() {
+      if (this.isPlaceholder) {
+        return { id: this.componentId, type: this.type, state: this.state };
+      }
+      const serialized = {
+        id: this.componentId,
+        type: this.type
+      };
+      const props = peekValue(this.props);
+      for (const [key, value] of Object.entries(props)) {
+        serialized[key] = serializeValue(value);
+      }
+      return serialized;
+    }
+    /**
+     * Replaces the resolved props, emitting only if a shallow comparison shows
+     * a change. Callers must keep unchanged values reference-identical; the
+     * shallow comparison is exact only under that invariant.
+     */
+    setProps(next) {
+      if (this._disposed) {
+        return;
+      }
+      const previous = peekValue(this.props);
+      if (!shallowEqual(previous, next)) {
+        setValue(this.props, next);
+      }
+    }
+    /**
+     * Tears down this node: runs registered cleanups, then fires `onDestroyed`.
+     * Idempotent.
+     */
+    dispose() {
+      if (this._disposed) {
+        return;
+      }
+      this._disposed = true;
+      for (const cleanup of this.cleanups) {
+        try {
+          cleanup();
+        } catch (e2) {
+          console.error(`ComponentNode cleanup error (${this.instanceId}):`, e2);
+        }
+      }
+      this.cleanups = [];
+      this._onDestroyed.emit();
+      this._onDestroyed.dispose();
+    }
+  };
+  function serializeValue(value) {
+    if (isComponentNode(value)) {
+      return value.toJSON();
+    }
+    if (value instanceof ResolvedBinding) {
+      return serializeValue(value.value);
+    }
+    if (typeof value === "function") {
+      return "<Action>";
+    }
+    if (Array.isArray(value)) {
+      return value.map(serializeValue);
+    }
+    if (value && typeof value === "object") {
+      const result = {};
+      for (const [key, inner] of Object.entries(value)) {
+        result[key] = serializeValue(inner);
+      }
+      return result;
+    }
+    return value;
+  }
+  function shallowEqual(a2, b2) {
+    if (Object.is(a2, b2)) {
+      return true;
+    }
+    const aKeys = Object.keys(a2);
+    const bKeys = Object.keys(b2);
+    if (aKeys.length !== bKeys.length) {
+      return false;
+    }
+    for (const key of aKeys) {
+      if (!Object.is(a2[key], b2[key])) {
+        return false;
+      }
+    }
+    return true;
+  }
+
+  // node_modules/@a2ui/web_core/src/v0_9/nodes/ref-fields.js
+  var COMPONENT_ID_REF = "REF:common_types.json#/$defs/ComponentId";
+  var CHILD_LIST_REF = "REF:common_types.json#/$defs/ChildList";
+  var EMPTY_REF_FIELDS = /* @__PURE__ */ new Map();
+  var refFieldsCache = /* @__PURE__ */ new WeakMap();
+  function extractRefFields(schema) {
+    const cached = refFieldsCache.get(schema);
+    if (cached) {
+      return cached;
+    }
+    const unwrapped = unwrap(schema);
+    if (unwrapped.schema._def.typeName !== "ZodObject") {
+      refFieldsCache.set(schema, EMPTY_REF_FIELDS);
+      return EMPTY_REF_FIELDS;
+    }
+    const fields = /* @__PURE__ */ new Map();
+    const shape = unwrapped.schema.shape;
+    for (const [key, value] of Object.entries(shape)) {
+      const field = unwrap(value);
+      if (marksChildList(field) || isChildListUnion(field.schema)) {
+        fields.set(key, { kind: "list" });
+        continue;
+      }
+      if (marksComponentId(field)) {
+        fields.set(key, { kind: "single" });
+        continue;
+      }
+      if (field.schema._def.typeName === "ZodArray") {
+        const element = unwrap(field.schema._def.type);
+        if (marksComponentId(element)) {
+          fields.set(key, { kind: "list" });
+          continue;
+        }
+        if (element.schema._def.typeName === "ZodObject") {
+          const subKeys = /* @__PURE__ */ new Set();
+          const elementShape = element.schema.shape;
+          for (const [subKey, subValue] of Object.entries(elementShape)) {
+            if (marksComponentId(unwrap(subValue))) {
+              subKeys.add(subKey);
+            }
+          }
+          if (subKeys.size > 0) {
+            fields.set(key, { kind: "nested", keys: subKeys });
+          }
+        }
+      }
+    }
+    const result = fields;
+    refFieldsCache.set(schema, result);
+    return result;
+  }
+  function unwrap(schema) {
+    const descriptions = [];
+    const refs = /* @__PURE__ */ new Set();
+    let current = schema;
+    for (; ; ) {
+      if (current.description) {
+        descriptions.push(current.description);
+      }
+      const ref = childRefKindOf(current);
+      if (ref) {
+        refs.add(ref);
+      }
+      const typeName = current._def.typeName;
+      if (typeName === "ZodOptional" || typeName === "ZodNullable" || typeName === "ZodDefault") {
+        current = current._def.innerType;
+      } else if (typeName === "ZodEffects") {
+        current = current._def.schema;
+      } else {
+        return { schema: current, descriptions, refs };
+      }
+    }
+  }
+  function marksComponentId(field) {
+    return field.refs.has("component-id") || hasPointer(field.descriptions, COMPONENT_ID_REF);
+  }
+  function marksChildList(field) {
+    return field.refs.has("child-list") || hasPointer(field.descriptions, CHILD_LIST_REF);
+  }
+  function hasPointer(descriptions, pointer) {
+    return descriptions.some((d2) => d2.startsWith(pointer));
+  }
+  function isChildListUnion(schema) {
+    if (schema._def.typeName !== "ZodUnion") {
+      return false;
+    }
+    const options = schema._def.options;
+    return options.some((o2) => {
+      if (o2._def.typeName !== "ZodObject") {
+        return false;
+      }
+      const shape = o2.shape;
+      return shape.componentId && shape.path;
+    });
+  }
+
+  // node_modules/@a2ui/web_core/src/v0_9/nodes/node-resolver.js
+  var ROOT_COMPONENT_ID = "root";
+  var ROOT_DATA_PATH = "/";
+  var ROOT_EDGE_KEY = ">root>root@/";
+  var EMPTY_REF_FIELDS2 = /* @__PURE__ */ new Map();
+  var NodeResolver = class {
+    constructor(surface, catalog) {
+      this.records = /* @__PURE__ */ new Map();
+      this.nodesByEdge = /* @__PURE__ */ new Map();
+      this.nodesByComponentId = /* @__PURE__ */ new Map();
+      this.pendingParents = /* @__PURE__ */ new Map();
+      this.dispatchedErrors = /* @__PURE__ */ new Map();
+      this.modelSubs = [];
+      this._disposed = false;
+      if (catalog !== surface.catalog) {
+        throw new A2uiStateError("NodeResolver requires the same catalog instance its surface was constructed with.");
+      }
+      this.surface = surface;
+      this.catalog = catalog;
+      this.rootNode = signal(void 0);
+      this.modelSubs.push(surface.componentsModel.onCreated.subscribe((component) => this.onComponentCreated(component)));
+      this.modelSubs.push(surface.componentsModel.onDeleted.subscribe((id) => this.onComponentDeleted(id)));
+      if (surface.componentsModel.get(ROOT_COMPONENT_ID)) {
+        this.buildRoot();
+      }
+    }
+    /**
+     * Dispatches once per (code, component, path) for as long as the condition
+     * persists: the record is cleared when the component is deleted, when a
+     * node for the pair resolves, or when a cyclic stand-in's edge goes away,
+     * so a condition that is fixed and later reintroduced reports again.
+     */
+    dispatchOnce(code, componentId2, dataPath, message2) {
+      let byPath = this.dispatchedErrors.get(componentId2);
+      if (!byPath) {
+        byPath = /* @__PURE__ */ new Map();
+        this.dispatchedErrors.set(componentId2, byPath);
+      }
+      let codes = byPath.get(dataPath);
+      if (!codes) {
+        codes = /* @__PURE__ */ new Set();
+        byPath.set(dataPath, codes);
+      }
+      if (codes.has(code)) {
+        return;
+      }
+      codes.add(code);
+      this.surface.dispatchError({ code, message: message2 });
+    }
+    clearDispatched(componentId2, dataPath) {
+      const byPath = this.dispatchedErrors.get(componentId2);
+      if (byPath?.delete(dataPath) && byPath.size === 0) {
+        this.dispatchedErrors.delete(componentId2);
+      }
+    }
+    /** Number of live nodes (including placeholders). Exposed for tests and devtools. */
+    get activeNodeCount() {
+      return this.records.size;
+    }
+    get disposed() {
+      return this._disposed;
+    }
+    /** Tears down the whole tree and stops tracking the surface. Idempotent. */
+    dispose() {
+      if (this._disposed) {
+        return;
+      }
+      this._disposed = true;
+      for (const sub of this.modelSubs) {
+        sub.unsubscribe();
+      }
+      this.modelSubs.length = 0;
+      for (const node of [...this.records.keys()]) {
+        this.disposeNode(node);
+      }
+      this.pendingParents.clear();
+      this.dispatchedErrors.clear();
+      this.rootRecord = void 0;
+      setValue(this.rootNode, void 0);
+    }
+    /** No-op while a root record exists; root deletion clears it so a re-sent root rebuilds. */
+    buildRoot() {
+      if (this.rootRecord) {
+        return;
+      }
+      const node = this.createNode(ROOT_COMPONENT_ID, ROOT_DATA_PATH, ROOT_EDGE_KEY, void 0);
+      this.rootRecord = this.records.get(node);
+      setValue(this.rootNode, node);
+    }
+    onComponentCreated(component) {
+      if (this._disposed) {
+        return;
+      }
+      if (component.id === ROOT_COMPONENT_ID) {
+        const current = this.surface.componentsModel.get(ROOT_COMPONENT_ID);
+        if (this.rootRecord && this.rootRecord.componentModel !== current) {
+          this.disposeNode(this.rootRecord.node);
+          this.rootRecord = void 0;
+          if (!current) {
+            setValue(this.rootNode, void 0);
+          }
+        }
+        if (current) {
+          this.buildRoot();
+        }
+      }
+      const waiting = this.pendingParents.get(component.id);
+      if (waiting) {
+        this.pendingParents.delete(component.id);
+        for (const parent of waiting) {
+          const record = this.records.get(parent);
+          if (record && !parent.disposed) {
+            this.materialize(record);
+          }
+        }
+      }
+    }
+    onComponentDeleted(id) {
+      if (this._disposed) {
+        return;
+      }
+      this.dispatchedErrors.delete(id);
+      const model = this.surface.componentsModel.get(id);
+      const affected = this.nodesByComponentId.get(id);
+      if (!affected) {
+        return;
+      }
+      const parentsToRefresh = /* @__PURE__ */ new Set();
+      let rootAffected = false;
+      for (const node of [...affected]) {
+        const record = this.records.get(node);
+        if (!record) {
+          continue;
+        }
+        if (record.parent) {
+          parentsToRefresh.add(record.parent);
+        } else {
+          rootAffected = true;
+        }
+      }
+      if (rootAffected && this.rootRecord) {
+        if (!model) {
+          this.disposeNode(this.rootRecord.node);
+          this.rootRecord = void 0;
+          setValue(this.rootNode, void 0);
+        } else if (this.rootRecord.componentModel !== model) {
+          this.disposeNode(this.rootRecord.node);
+          this.rootRecord = void 0;
+          this.buildRoot();
+        }
+      }
+      for (const parent of parentsToRefresh) {
+        const record = this.records.get(parent);
+        if (record && !parent.disposed) {
+          this.materialize(record);
+        }
+      }
+    }
+    /**
+     * Creates a node for one (componentId, dataPath) edge. A missing component
+     * definition yields a placeholder node and registers the parent for a
+     * refresh when the definition arrives.
+     */
+    createNode(componentId2, dataPath, edgeKey, parent, occurrence = 1) {
+      const model = this.surface.componentsModel.get(componentId2);
+      if (!model) {
+        const record2 = this.registerNode(new MutableComponentNode(instanceIdFor(componentId2, dataPath, occurrence), componentId2, PLACEHOLDER_TYPE, dataPath, {}, void 0, "pending"), { edgeKey, parent, occurrence, refFields: EMPTY_REF_FIELDS2 });
+        if (parent) {
+          this.registerPendingParent(componentId2, parent);
+        }
+        return record2.node;
+      }
+      const api = this.catalog.components.get(model.type);
+      if (!api) {
+        this.dispatchOnce("UNKNOWN_COMPONENT_TYPE", componentId2, dataPath, `Component '${componentId2}' has type '${model.type}', which is not in catalog '${this.catalog.id}'.`);
+        return this.registerNode(new MutableComponentNode(instanceIdFor(componentId2, dataPath, occurrence), componentId2, model.type, dataPath, {}, void 0, "unknown-type"), { edgeKey, parent, occurrence, refFields: EMPTY_REF_FIELDS2, componentModel: model }).node;
+      }
+      this.clearDispatched(componentId2, dataPath);
+      const context = new ComponentContext(this.surface, componentId2, dataPath);
+      const binder = new GenericBinder(context, api.schema);
+      const record = this.registerNode(new MutableComponentNode(instanceIdFor(componentId2, dataPath, occurrence), componentId2, model.type, dataPath, {}, api), {
+        edgeKey,
+        parent,
+        occurrence,
+        refFields: extractRefFields(api.schema),
+        behavior: scrapeSchemaBehavior(api.schema),
+        context,
+        componentModel: model,
+        binder
+      });
+      record.binderSub = binder.subscribe((raw) => {
+        record.lastBinderProps = raw;
+        this.materialize(record);
+      });
+      record.lastBinderProps = binder.snapshot;
+      this.materialize(record);
+      return record.node;
+    }
+    registerNode(node, partial) {
+      const record = {
+        node,
+        edgeKey: partial.edgeKey,
+        parent: partial.parent,
+        occurrence: partial.occurrence,
+        refFields: partial.refFields,
+        behavior: partial.behavior,
+        context: partial.context,
+        componentModel: partial.componentModel,
+        binder: partial.binder,
+        childEdges: /* @__PURE__ */ new Map()
+      };
+      this.records.set(node, record);
+      this.nodesByEdge.set(partial.edgeKey, node);
+      let byId = this.nodesByComponentId.get(node.componentId);
+      if (!byId) {
+        byId = /* @__PURE__ */ new Set();
+        this.nodesByComponentId.set(node.componentId, byId);
+      }
+      byId.add(node);
+      return record;
+    }
+    /**
+     * Returns the node for a child edge, reusing the cached node when the edge
+     * is unchanged and replacing it (placeholder upgrade or downgrade, id
+     * change, type change) when it is not.
+     */
+    childNode(componentId2, dataPath, edgeKey, parent, occurrence = 1) {
+      const existing = this.nodesByEdge.get(edgeKey);
+      if (this.isCyclic(componentId2, dataPath, parent)) {
+        if (existing && !existing.disposed && existing.isPlaceholder && this.records.get(existing)?.occurrence === occurrence) {
+          return existing;
+        }
+        if (existing && !existing.disposed) {
+          this.disposeNode(existing);
+        }
+        this.dispatchOnce("CYCLIC_REFERENCE", componentId2, dataPath, `Component '${componentId2}' at '${dataPath}' is referenced by one of its own descendants; rendering a placeholder instead.`);
+        return this.registerNode(new MutableComponentNode(instanceIdFor(componentId2, dataPath, occurrence), componentId2, PLACEHOLDER_TYPE, dataPath, {}, void 0, "cyclic"), { edgeKey, parent, occurrence, refFields: EMPTY_REF_FIELDS2 }).node;
+      }
+      if (existing && !existing.disposed) {
+        const model = this.surface.componentsModel.get(componentId2);
+        const api = model ? this.catalog.components.get(model.type) : void 0;
+        const existingRecord = this.records.get(existing);
+        const upToDate = existing.componentId === componentId2 && existing.dataPath === dataPath && existingRecord?.occurrence === occurrence && (existing.isPlaceholder ? model === void 0 && existing.state === "pending" || model !== void 0 && api === void 0 && existing.state === "unknown-type" && existingRecord?.componentModel === model : model !== void 0 && existing.type === model.type && existingRecord?.componentModel === model);
+        if (upToDate) {
+          if (existing.state === "pending") {
+            this.registerPendingParent(componentId2, parent);
+          }
+          return existing;
+        }
+        this.disposeNode(existing);
+      }
+      return this.createNode(componentId2, dataPath, edgeKey, parent, occurrence);
+    }
+    /** Registers a parent to be refreshed when `componentId` arrives. */
+    registerPendingParent(componentId2, parent) {
+      let waiting = this.pendingParents.get(componentId2);
+      if (!waiting) {
+        waiting = /* @__PURE__ */ new Set();
+        this.pendingParents.set(componentId2, waiting);
+      }
+      waiting.add(parent);
+    }
+    /** True when (componentId, dataPath) already appears in the parent chain. */
+    isCyclic(componentId2, dataPath, parent) {
+      for (let node = parent; node; node = this.records.get(node)?.parent) {
+        if (node.componentId === componentId2 && node.dataPath === dataPath) {
+          return true;
+        }
+      }
+      return false;
+    }
+    /**
+     * Rebuilds a node's resolved props from its binder output: child reference
+     * properties become live `ComponentNode`s, children this parent no longer
+     * references are disposed, and unchanged values keep reference identity so
+     * the shallow comparison in `MutableComponentNode.setProps` stays exact.
+     */
+    materialize(record) {
+      if (record.node.disposed) {
+        return;
+      }
+      const raw = record.lastBinderProps ?? record.binder?.snapshot ?? {};
+      const next = { ...raw };
+      const newEdges = /* @__PURE__ */ new Map();
+      const modelProps = record.componentModel?.properties;
+      if (modelProps) {
+        for (const key of record.refFields.keys()) {
+          if (key in next && !(key in modelProps)) {
+            delete next[key];
+          }
+        }
+      }
+      const occurrences = /* @__PURE__ */ new Map();
+      const resolveChild = (slot, componentId2, dataPath) => {
+        const occurrenceKey = `${escapeIdPart(componentId2)}@${escapeIdPart(dataPath)}`;
+        const occurrence = (occurrences.get(occurrenceKey) ?? 0) + 1;
+        occurrences.set(occurrenceKey, occurrence);
+        const edgeKey = `${record.edgeKey}>${slot}>${occurrenceKey}`;
+        const child = this.childNode(componentId2, dataPath, edgeKey, record.node, occurrence);
+        newEdges.set(edgeKey, child);
+        return child;
+      };
+      for (const [key, ref] of record.refFields) {
+        switch (ref.kind) {
+          case "single": {
+            const value = next[key];
+            if (typeof value === "string" && value) {
+              next[key] = resolveChild(escapeIdPart(key), value, record.node.dataPath);
+            }
+            break;
+          }
+          case "list": {
+            const value = next[key];
+            if (!Array.isArray(value)) {
+              break;
+            }
+            next[key] = value.map((item, index) => {
+              if (typeof item === "string" && item) {
+                return resolveChild(`${escapeIdPart(key)}[${index}]`, item, record.node.dataPath);
+              }
+              if (item && typeof item === "object" && !Array.isArray(item)) {
+                const entry = item;
+                if (typeof entry.id === "string" && typeof entry.basePath === "string") {
+                  return resolveChild(`${escapeIdPart(key)}[${index}]`, entry.id, entry.basePath);
+                }
+                if (typeof entry.componentId === "string" && entry.componentId) {
+                  return resolveChild(`${escapeIdPart(key)}[${index}]`, entry.componentId, record.node.dataPath);
+                }
+              }
+              return item;
+            });
+            break;
+          }
+          case "nested": {
+            const value = next[key];
+            if (!Array.isArray(value)) {
+              break;
+            }
+            next[key] = value.map((item, index) => {
+              if (!item || typeof item !== "object" || Array.isArray(item)) {
+                return item;
+              }
+              const entry = { ...item };
+              let resolvedAny = false;
+              for (const subKey of ref.keys) {
+                const childId = entry[subKey];
+                if (typeof childId === "string" && childId) {
+                  entry[subKey] = resolveChild(`${escapeIdPart(key)}[${index}].${escapeIdPart(subKey)}`, childId, record.node.dataPath);
+                  resolvedAny = true;
+                }
+              }
+              return resolvedAny ? entry : item;
+            });
+            break;
+          }
+        }
+      }
+      for (const [edgeKey, child] of record.childEdges) {
+        if (!newEdges.has(edgeKey)) {
+          this.disposeNode(child);
+          if (child.isPlaceholder) {
+            const stillWaiting = [...newEdges.values()].some((other) => other.isPlaceholder && other.componentId === child.componentId);
+            if (!stillWaiting) {
+              const waiting = this.pendingParents.get(child.componentId);
+              if (waiting) {
+                waiting.delete(record.node);
+                if (waiting.size === 0) {
+                  this.pendingParents.delete(child.componentId);
+                }
+              }
+            }
+          }
+        }
+      }
+      record.childEdges = newEdges;
+      const wrapped = record.behavior && record.context ? wrapDynamicValues(next, record.behavior, modelProps ?? {}, record.context.dataContext) : next;
+      const previous = peekValue(record.node.props);
+      for (const key of Object.keys(wrapped)) {
+        wrapped[key] = stabilize(previous[key], wrapped[key]);
+      }
+      record.node.setProps(wrapped);
+    }
+    /** Disposes a node and, through parent-scoped ownership, its subtree. */
+    disposeNode(node) {
+      if (node.disposed) {
+        return;
+      }
+      const record = this.records.get(node);
+      if (record) {
+        for (const child of record.childEdges.values()) {
+          this.disposeNode(child);
+        }
+        record.childEdges.clear();
+        record.binderSub?.unsubscribe();
+        record.binderSub = void 0;
+        if (this.nodesByEdge.get(record.edgeKey) === node) {
+          this.nodesByEdge.delete(record.edgeKey);
+        }
+        this.records.delete(node);
+      }
+      const byId = this.nodesByComponentId.get(node.componentId);
+      if (byId) {
+        byId.delete(node);
+        if (byId.size === 0) {
+          this.nodesByComponentId.delete(node.componentId);
+        }
+      }
+      for (const [componentId2, waiting] of this.pendingParents) {
+        waiting.delete(node);
+        if (waiting.size === 0) {
+          this.pendingParents.delete(componentId2);
+        }
+      }
+      if (node.state === "cyclic") {
+        this.clearDispatched(node.componentId, node.dataPath);
+      }
+      node.dispose();
+    }
+  };
+  var ID_PART_ESCAPES = {
+    "~": "~0",
+    "#": "~1",
+    "[": "~2",
+    "]": "~3",
+    ">": "~4",
+    "@": "~5"
+  };
+  function escapeIdPart(part) {
+    return part.replace(/[~#[\]>@]/g, (match2) => ID_PART_ESCAPES[match2]);
+  }
+  function instanceIdFor(componentId2, dataPath, occurrence) {
+    const trimmed = dataPath.replace(/\/+$/, "") || ROOT_DATA_PATH;
+    const base = dataPath === ROOT_DATA_PATH ? escapeIdPart(componentId2) : `${escapeIdPart(componentId2)}-[${escapeIdPart(trimmed)}]`;
+    return occurrence > 1 ? `${base}#${occurrence}` : base;
+  }
+  function wrapDynamicValues(value, behavior, raw, dataContext) {
+    switch (behavior.type) {
+      case "DYNAMIC": {
+        const path = raw && typeof raw === "object" && !Array.isArray(raw) && typeof raw.path === "string" ? raw.path : void 0;
+        if (path === void 0) {
+          return new ResolvedBinding(value);
+        }
+        return new WritableBinding(value, (newValue) => dataContext.set(path, newValue), path);
+      }
+      case "ARRAY": {
+        if (!Array.isArray(value)) {
+          return value;
+        }
+        const rawItems = Array.isArray(raw) ? raw : [];
+        return value.map((item, index) => wrapDynamicValues(item, behavior.element, rawItems[index], dataContext));
+      }
+      case "OBJECT": {
+        if (!value || typeof value !== "object" || Array.isArray(value)) {
+          return value;
+        }
+        const setterNames = /* @__PURE__ */ new Set();
+        for (const [key, childBehavior] of Object.entries(behavior.shape)) {
+          if (childBehavior.type === "DYNAMIC") {
+            setterNames.add(`set${key.charAt(0).toUpperCase()}${key.slice(1)}`);
+          }
+        }
+        const rawRecord = raw && typeof raw === "object" && !Array.isArray(raw) ? raw : {};
+        const out = {};
+        for (const [key, item] of Object.entries(value)) {
+          if (setterNames.has(key)) {
+            continue;
+          }
+          out[key] = wrapDynamicValues(item, behavior.shape[key] ?? { type: "STATIC" }, rawRecord[key], dataContext);
+        }
+        for (const [key, childBehavior] of Object.entries(behavior.shape)) {
+          if (childBehavior.type === "DYNAMIC" && !(key in out)) {
+            out[key] = new ResolvedBinding(void 0);
+          }
+        }
+        return out;
+      }
+      default:
+        return value;
+    }
+  }
+  function stabilize(prev, next) {
+    if (Object.is(prev, next)) {
+      return next;
+    }
+    if (prev instanceof ResolvedBinding && next instanceof ResolvedBinding) {
+      return sameBinding(prev, next) ? prev : next;
+    }
+    if (isComponentNode(prev) || isComponentNode(next)) {
+      return next;
+    }
+    if (Array.isArray(prev) && Array.isArray(next) && prev.length === next.length) {
+      let allSame = true;
+      const out = next.map((item, i2) => {
+        const stabilized = stabilize(prev[i2], item);
+        if (!Object.is(stabilized, prev[i2])) {
+          allSame = false;
+        }
+        return stabilized;
+      });
+      return allSame ? prev : out;
+    }
+    if (isPlainObject2(prev) && isPlainObject2(next)) {
+      const prevKeys = Object.keys(prev);
+      const nextKeys = Object.keys(next);
+      if (prevKeys.length === nextKeys.length) {
+        let allSame = true;
+        const out = {};
+        for (const key of nextKeys) {
+          const stabilized = stabilize(prev[key], next[key]);
+          out[key] = stabilized;
+          if (!(key in prev) || !Object.is(stabilized, prev[key])) {
+            allSame = false;
+          }
+        }
+        return allSame ? prev : out;
+      }
+    }
+    return next;
+  }
+  function isPlainObject2(value) {
+    if (!value || typeof value !== "object" || Array.isArray(value) || isComponentNode(value)) {
+      return false;
+    }
+    const proto = Object.getPrototypeOf(value);
+    return proto === Object.prototype || proto === null;
+  }
+
+  // node_modules/@a2ui/web_core/src/v0_9/basic_catalog/expressions/expression_parser.js
+  var ExpressionParser = class _ExpressionParser {
+    static {
+      this.MAX_DEPTH = 10;
+    }
+    /**
      * Parses an input string into an array of DynamicValues.
      * If the input contains no interpolation, it returns the raw string as a single literal.
      */
@@ -31442,7 +32649,9 @@
     name: "Row",
     schema: external_exports.object({
       ...CommonProps,
-      "children": ChildListSchema.describe("Defines the children. Use an array of strings for a fixed set of children, or a template object to generate children from a data list. Children cannot be defined inline, they must be referred to by ID."),
+      "children": childList({
+        description: "Defines the children. Use an array of strings for a fixed set of children, or a template object to generate children from a data list. Children cannot be defined inline, they must be referred to by ID."
+      }),
       "justify": external_exports.enum(["center", "end", "spaceAround", "spaceBetween", "spaceEvenly", "start", "stretch"]).default("start").describe("Defines the arrangement of children along the main axis (horizontally). Use 'spaceBetween' to push items to the edges, or 'start'/'end'/'center' to pack them together.").optional(),
       "align": external_exports.enum(["start", "center", "end", "stretch"]).default("stretch").describe("Defines the alignment of children along the cross axis (vertically). This is similar to the CSS 'align-items' property, but uses camelCase values (e.g., 'start').").optional()
     }).strict().describe("A layout component that arranges its children horizontally. To create a grid layout, nest Columns within this Row.")
@@ -31451,7 +32660,9 @@
     name: "Column",
     schema: external_exports.object({
       ...CommonProps,
-      "children": ChildListSchema.describe("Defines the children. Use an array of strings for a fixed set of children, or a template object to generate children from a data list. Children cannot be defined inline, they must be referred to by ID."),
+      "children": childList({
+        description: "Defines the children. Use an array of strings for a fixed set of children, or a template object to generate children from a data list. Children cannot be defined inline, they must be referred to by ID."
+      }),
       "justify": external_exports.enum(["start", "center", "end", "spaceBetween", "spaceAround", "spaceEvenly", "stretch"]).default("start").describe("Defines the arrangement of children along the main axis (vertically). Use 'spaceBetween' to push items to the edges (e.g. header at top, footer at bottom), or 'start'/'end'/'center' to pack them together.").optional(),
       "align": external_exports.enum(["center", "end", "start", "stretch"]).default("stretch").describe("Defines the alignment of children along the cross axis (horizontally). This is similar to the CSS 'align-items' property.").optional()
     }).strict().describe("A layout component that arranges its children vertically. To create a grid layout, nest Rows within this Column.")
@@ -31460,7 +32671,9 @@
     name: "List",
     schema: external_exports.object({
       ...CommonProps,
-      "children": ChildListSchema.describe("Defines the children. Use an array of strings for a fixed set of children, or a template object to generate children from a data list."),
+      "children": childList({
+        description: "Defines the children. Use an array of strings for a fixed set of children, or a template object to generate children from a data list."
+      }),
       "direction": external_exports.enum(["vertical", "horizontal"]).default("vertical").describe("The direction in which the list items are laid out.").optional(),
       "align": external_exports.enum(["start", "center", "end", "stretch"]).default("stretch").describe("Defines the alignment of children along the cross axis.").optional(),
       "listStyle": external_exports.enum(["ordered", "unordered", "none"]).describe("The style of the list (ordered, unordered, or none).").optional()
@@ -31470,7 +32683,9 @@
     name: "Card",
     schema: external_exports.object({
       ...CommonProps,
-      "child": ComponentIdSchema.describe("The ID of the single child component to be rendered inside the card. To display multiple elements, you MUST wrap them in a layout component (like Column or Row) and pass that container's ID here. Do NOT pass multiple IDs or a non-existent ID. Do NOT define the child component inline.")
+      "child": componentId({
+        description: "The ID of the single child component to be rendered inside the card. To display multiple elements, you MUST wrap them in a layout component (like Column or Row) and pass that container's ID here. Do NOT pass multiple IDs or a non-existent ID. Do NOT define the child component inline."
+      })
     }).strict()
   };
   var TabsApi = {
@@ -31479,7 +32694,9 @@
       ...CommonProps,
       "tabs": external_exports.array(external_exports.object({
         "title": DynamicStringSchema.describe("The tab title."),
-        "child": ComponentIdSchema.describe("The ID of the child component. Do NOT define the component inline.")
+        "child": componentId({
+          description: "The ID of the child component. Do NOT define the component inline."
+        })
       }).strict()).min(1).describe("An array of objects, where each object defines a tab with a title and a child component.")
     }).strict()
   };
@@ -31487,8 +32704,12 @@
     name: "Modal",
     schema: external_exports.object({
       ...CommonProps,
-      "trigger": ComponentIdSchema.describe("The ID of the component that opens the modal when interacted with (e.g., a button). Do NOT define the component inline."),
-      "content": ComponentIdSchema.describe("The ID of the component to be displayed inside the modal. Do NOT define the component inline.")
+      "trigger": componentId({
+        description: "The ID of the component that opens the modal when interacted with (e.g., a button). Do NOT define the component inline."
+      }),
+      "content": componentId({
+        description: "The ID of the component to be displayed inside the modal. Do NOT define the component inline."
+      })
     }).strict()
   };
   var DividerApi = {
@@ -31502,7 +32723,9 @@
     name: "Button",
     schema: external_exports.object({
       ...CommonProps,
-      "child": ComponentIdSchema.describe("The ID of the child component. Use a 'Text' component for a labeled button. Only use an 'Icon' if the requirements explicitly ask for an icon-only button. Do NOT define the child component inline."),
+      "child": componentId({
+        description: "The ID of the child component. Use a 'Text' component for a labeled button. Only use an 'Icon' if the requirements explicitly ask for an icon-only button. Do NOT define the child component inline."
+      }),
       "variant": external_exports.enum(["default", "primary", "borderless"]).default("default").describe("A hint for the button style. If omitted, a default button style is used. 'primary' indicates this is the main call-to-action button. 'borderless' means the button has no visual border or background, making its child content appear like a clickable link.").optional(),
       "action": ActionSchema.optional(),
       ...CheckableSchema.shape
@@ -31671,104 +32894,243 @@
   // node_modules/@a2ui/react/v0_9/index.js
   var import_react = __toESM(require_react(), 1);
   var import_jsx_runtime = __toESM(require_jsx_runtime(), 1);
-  var ResolvedChild = (0, import_react.memo)(
+  var NodeSurfaceContext = (0, import_react.createContext)(
+    null
+  );
+  var LoadingPlaceholder = ({ componentId: componentId2 }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { color: "gray", padding: "4px" }, children: [
+    "[Loading ",
+    componentId2,
+    "...]"
+  ] });
+  var reportedUnresolved = /* @__PURE__ */ new WeakMap();
+  var UnresolvedChildReference = ({ surface, id, requestedPath, detail }) => {
+    const message2 = `Unresolved child reference '${id}' at '${requestedPath}': ${detail}`;
+    (0, import_react.useEffect)(() => {
+      if (!surface) {
+        return;
+      }
+      let seen = reportedUnresolved.get(surface);
+      if (!seen) {
+        seen = /* @__PURE__ */ new Set();
+        reportedUnresolved.set(surface, seen);
+      }
+      const key = JSON.stringify([id, requestedPath]);
+      if (!seen.has(key)) {
+        seen.add(key);
+        void surface.dispatchError({ code: "UNRESOLVED_CHILD_REFERENCE", message: message2 });
+      }
+    }, [surface, id, requestedPath, message2]);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { color: "red" }, children: message2 });
+  };
+  function useSignalValue(signal2) {
+    const subscribe = (0, import_react.useCallback)(
+      (onChange) => effect(() => {
+        getValue(signal2);
+        onChange();
+      }),
+      [signal2]
+    );
+    const getSnapshot = (0, import_react.useCallback)(() => peekValue(signal2), [signal2]);
+    return (0, import_react.useSyncExternalStore)(subscribe, getSnapshot);
+  }
+  function newChildIndex() {
+    return { byToken: /* @__PURE__ */ new Map(), byId: /* @__PURE__ */ new Map() };
+  }
+  function setChild(map, id, child, firstWins) {
+    let byPath = map.get(id);
+    if (!byPath) {
+      byPath = /* @__PURE__ */ new Map();
+      map.set(id, byPath);
+    }
+    if (!firstWins || !byPath.has(child.dataPath)) {
+      byPath.set(child.dataPath, child);
+    }
+  }
+  function registerChild(index, child) {
+    setChild(index.byToken, child.instanceId, child, false);
+    setChild(index.byId, child.componentId, child, true);
+    return child.instanceId;
+  }
+  function toViewValue(parent, value, index) {
+    if (isComponentNode(value)) {
+      const token = registerChild(index, value);
+      if (value.dataPath !== parent.dataPath) {
+        return { id: token, basePath: value.dataPath };
+      }
+      return token;
+    }
+    if (value instanceof ResolvedBinding) {
+      return toViewValue(parent, value.value, index);
+    }
+    if (Array.isArray(value)) {
+      return value.map((item) => toViewValue(parent, item, index));
+    }
+    if (isPlainObject3(value)) {
+      return toViewProps(parent, value, index);
+    }
+    return value;
+  }
+  function isPlainObject3(value) {
+    if (!value || typeof value !== "object") {
+      return false;
+    }
+    const proto = Object.getPrototypeOf(value);
+    return proto === Object.prototype || proto === null;
+  }
+  function toViewProps(parent, props, index) {
+    const result = {};
+    for (const [key, inner] of Object.entries(props)) {
+      if (inner instanceof ResolvedBinding) {
+        result[key] = toViewValue(parent, inner.value, index);
+        result[`set${key.charAt(0).toUpperCase()}${key.slice(1)}`] = isWritable(inner) ? inner.set : () => {
+        };
+      } else {
+        result[key] = toViewValue(parent, inner, index);
+      }
+    }
+    return result;
+  }
+  function useNodeView(node, buildChild) {
+    const surface = (0, import_react.useContext)(NodeSurfaceContext);
+    const resolved = useSignalValue(node.props);
+    const { viewProps, childIndex } = (0, import_react.useMemo)(() => {
+      const index = newChildIndex();
+      return { viewProps: toViewProps(node, resolved, index), childIndex: index };
+    }, [node, resolved]);
+    const context = (0, import_react.useMemo)(
+      () => surface && surface.componentsModel.get(node.componentId) ? new ComponentContext(surface, node.componentId, node.dataPath) : void 0,
+      [surface, node]
+    );
+    const resolveThrough = (0, import_react.useCallback)(
+      (map, id, basePath) => {
+        const requested = basePath ?? node.dataPath;
+        const byPath = map.get(id);
+        const childNode = byPath?.get(requested);
+        if (childNode) {
+          return buildChild(childNode, basePath);
+        }
+        const elsewhere = byPath ? [...byPath.keys()] : [];
+        if (elsewhere.length > 0) {
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            UnresolvedChildReference,
+            {
+              surface,
+              id,
+              requestedPath: requested,
+              detail: `instances exist at ${elsewhere.join(", ")}. Instances are created only at the data paths the payload implies; buildChild selects among them.`
+            },
+            JSON.stringify([id, requested])
+          );
+        }
+        return buildChild(id, basePath);
+      },
+      [buildChild, node, surface]
+    );
+    const viewBuildChild = (0, import_react.useCallback)(
+      (id, basePath) => resolveThrough(childIndex.byToken, id, basePath),
+      [resolveThrough, childIndex]
+    );
+    const rawBuildChild = (0, import_react.useCallback)(
+      (id, basePath) => resolveThrough(childIndex.byId, id, basePath),
+      [resolveThrough, childIndex]
+    );
+    if (!surface) {
+      throw new Error("A2UI component views render only inside A2uiSurface.");
+    }
+    return { viewProps, context, viewBuildChild, rawBuildChild };
+  }
+  var RenderFallback = ({ node, impl, buildChild }) => {
+    const { context, rawBuildChild } = useNodeView(node, buildChild);
+    const Render = impl.render;
+    if (!context) {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LoadingPlaceholder, { componentId: node.componentId });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Render, { context, buildChild: rawBuildChild });
+  };
+  var NodeView = (0, import_react.memo)(
     ({
       surface,
-      id,
-      basePath,
-      compImpl,
-      componentModel
+      node
     }) => {
-      const ComponentToRender = compImpl.render;
-      const context = (0, import_react.useMemo)(
-        () => new ComponentContext(surface, id, basePath),
-        // componentModel is used as a trigger for recreation even if not in the body
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        [surface, id, basePath, componentModel]
-      );
       const buildChild = (0, import_react.useCallback)(
-        (childId, specificPath) => {
-          const path = specificPath || context.dataContext.path;
+        (child, basePath) => {
+          if (isComponentNode(child)) {
+            return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NodeView, { surface, node: child }, child.instanceId);
+          }
+          const requested = basePath ?? node.dataPath;
+          const detail = surface.componentsModel.get(child) ? "the component exists, but the catalog schema does not mark the referencing property as a component id. Use componentId() or childList() from @a2ui/web_core." : "no component with this id exists on the surface.";
           return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            DeferredChild,
+            UnresolvedChildReference,
             {
               surface,
-              id: childId,
-              basePath: path
+              id: child,
+              requestedPath: requested,
+              detail
             },
-            `${childId}-${path}`
+            JSON.stringify([child, requested])
           );
         },
-        [surface, context.dataContext.path]
+        [surface, node]
       );
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ComponentToRender, { context, buildChild });
+      if (node.state === "unknown-type") {
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { color: "red" }, children: [
+          "Unknown component type: ",
+          node.type
+        ] });
+      }
+      if (node.isPlaceholder) {
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LoadingPlaceholder, { componentId: node.componentId });
+      }
+      const impl = node.impl;
+      if (!impl) {
+        return null;
+      }
+      const View = impl.view;
+      if (!View) {
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RenderFallback, { node, impl, buildChild });
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(View, { node, buildChild });
     }
   );
-  ResolvedChild.displayName = "ResolvedChild";
-  var DeferredChild = (0, import_react.memo)(({ surface, id, basePath }) => {
-    const store = (0, import_react.useMemo)(() => {
-      let version = 0;
-      return {
-        subscribe: (cb) => {
-          const unsub1 = surface.componentsModel.onCreated.subscribe((comp) => {
-            if (comp.id === id) {
-              version++;
-              cb();
-            }
-          });
-          const unsub2 = surface.componentsModel.onDeleted.subscribe((delId) => {
-            if (delId === id) {
-              version++;
-              cb();
-            }
-          });
-          return () => {
-            unsub1.unsubscribe();
-            unsub2.unsubscribe();
-          };
-        },
-        getSnapshot: () => {
-          const comp = surface.componentsModel.get(id);
-          return comp ? `${comp.type}-${version}` : `missing-${version}`;
-        }
-      };
-    }, [surface, id]);
-    (0, import_react.useSyncExternalStore)(store.subscribe, store.getSnapshot);
-    const componentModel = surface.componentsModel.get(id);
-    if (!componentModel) {
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { color: "gray", padding: "4px" }, children: [
-        "[Loading ",
-        id,
-        "...]"
-      ] });
-    }
-    const compImpl = surface.catalog.components.get(componentModel.type);
-    if (!compImpl) {
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { color: "red" }, children: [
-        "Unknown component: ",
-        componentModel.type
-      ] });
-    }
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      ResolvedChild,
-      {
-        surface,
-        id,
-        basePath,
-        componentModel,
-        compImpl
-      }
+  NodeView.displayName = "NodeView";
+  var A2uiSurface = ({ surface }) => {
+    const box = (0, import_react.useMemo)(
+      () => ({ resolver: void 0 }),
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [surface]
     );
-  });
-  DeferredChild.displayName = "DeferredChild";
-  var A2uiSurface = ({
-    surface
-  }) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DeferredChild, { surface, id: "root", basePath: "/" });
+    const subscribe = (0, import_react.useCallback)(
+      (onChange) => {
+        const resolver = new NodeResolver(surface, surface.catalog);
+        box.resolver = resolver;
+        const stopEffect = effect(() => {
+          getValue(resolver.rootNode);
+          onChange();
+        });
+        return () => {
+          stopEffect();
+          resolver.dispose();
+          if (box.resolver === resolver) {
+            box.resolver = void 0;
+          }
+        };
+      },
+      [surface, box]
+    );
+    const getSnapshot = (0, import_react.useCallback)(
+      () => box.resolver ? peekValue(box.resolver.rootNode) : void 0,
+      [box]
+    );
+    const root = (0, import_react.useSyncExternalStore)(subscribe, getSnapshot);
+    if (!root) {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LoadingPlaceholder, { componentId: "root" });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NodeSurfaceContext.Provider, { value: surface, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NodeView, { surface, node: root }) });
   };
   function createComponentImplementation(api, RenderComponent) {
     const MemoizedRender = (0, import_react.memo)(RenderComponent, (prev, next) => {
       if (prev.props !== next.props) return false;
+      if (prev.buildChild !== next.buildChild) return false;
       if (prev.context.componentModel.id !== next.context.componentModel.id) return false;
       if (prev.context.dataContext.path !== next.context.dataContext.path) return false;
       return true;
@@ -31796,10 +33158,19 @@
       }, [binding]);
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MemoizedRender, { props: props || {}, buildChild, context });
     };
+    const NodeView2 = ({ node, buildChild }) => {
+      const { viewProps, context, viewBuildChild } = useNodeView(node, buildChild);
+      if (!context) {
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LoadingPlaceholder, { componentId: node.componentId });
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MemoizedRender, { props: viewProps, buildChild: viewBuildChild, context });
+    };
+    NodeView2.displayName = `${api.name}.view`;
     return {
       name: api.name,
       schema: api.schema,
-      render: ReactWrapper
+      render: ReactWrapper,
+      view: NodeView2
     };
   }
   var useBasicCatalogStyles = () => {
@@ -32043,9 +33414,9 @@
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("audio", { src: props.url, controls: true })
     ] });
   });
-  var ChildList = ({ childList, buildChild }) => {
-    if (!Array.isArray(childList)) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: childList.map((childRef, index) => {
+  var ChildList = ({ childList: childList2, buildChild }) => {
+    if (!Array.isArray(childList2)) return null;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: childList2.map((childRef, index) => {
       if (typeof childRef === "string") {
         return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.default.Fragment, { children: buildChild(childRef) }, `${childRef}-${index}`);
       }