复合组件

复合组件是“多个独立组件共同组成一个新的稳定边界”，不是把一个组件的 hover、pressed、disabled 等状态拆成多个常驻实例。

SearchPanel
├─ query    Input
├─ submit   Button
└─ results  ResultList

在 Figma 中准备结构

把 Input、Button、ResultList 保持为可识别的 Component / Instance，并使用明确的父子层级、Auto Layout 和公开 properties。同步后，组合 authoring 需要把每个依赖解析为 exact Component Ref，不能只按显示名称猜测版本。

组合合同

每个 child 使用稳定 key；parentKey 表达组件所有权层级；mount 决定 child 进入 root、node、slot 或 portal。父级 surface 通过 typed routes 映射能力：

parent prop 驱动一个或多个 child props；
child event 聚合为 parent CustomEvent；
parent method 编排 child methods；
parent slot forwarding 到指定 child slot/outlet；
publicChildRefs 只暴露经过选择的 child。

编译与发布

Artifact authoring 与 TS/JS builder 应编译到同一 canonical Composition IR。compiler 输出 Artifact、dependency lock 与 receipt；Runtime 根据它事务式准备并提交 child graph。只有再经过 verify、package、promote，新边界才得到可跨项目 exact resolve 的 Component Ref。

运行时把几个现有 Instance 挂到父级，只会修改当前 child graph，不会自动创建 Artifact 或 Component Release。如果组合需要保存，应回到定义层重建相同结构。

不要用复合组件表示状态

单个 Button 的 visual state 应通过 state、variant、prop patch 或 Behavior 驱动，而不是长期挂载多个完整 Button 再切 visible。组件组合解决职责协作；状态模型解决同一职责的变化。TS/JS 示例可参考纯 TS/JS 开发。