纯 TS/JS 开发

纯 TS/JS 开发不要求从 Figma 开始。你可以导入已有 Artifact 或 exact Component Ref，定义新的结构与行为，再编译、预览、发布为新的 Artifact 和 Web Component。TS/JS 是作者入口，canonical Artifact 仍是交付事实源。

项目分层

src/
  artifact / component definitions
  scripts / behaviors / bindings
  host adapters
  tests
        ↓ compile
canonical Artifact + Composition IR + dependency lock
        ↓ verify/package
ESM + Web Component + manifests + .d.ts

不要把运行中的 Instance、DOM 节点或 service closure写入定义层。组件定义只保存可序列化的 child spec、surface、routes、structure、host capability 与 exact dependency。

组合新组件

import {
  defineFlamoComponent,
  compileResolvedFlamoComposition,
} from '@flamo/tools';

const SearchPanel = defineFlamoComponent({
  id: 'SearchPanel',
  children: [
    { key: 'query', ref: inputRef, parentKey: null, mount: { kind: 'root' } },
    { key: 'submit', ref: buttonRef, parentKey: null, mount: { kind: 'root' } },
  ],
  surface,
  routes,
});

const output = await compileResolvedFlamoComposition(SearchPanel, resolver);

resolver 必须 exact resolve 每个依赖。compiler 规范化 child order、surface 与 routes，并生成 Artifact、dependency lock、composition hash 和 receipt。对外发布前还要通过 package/verify/promote。

运行时动态结构

当前实例可以使用 mountChild() 增加 child、reconcileChildren() 对齐 keyed 集合、swapChild() 原子替换动态组件。快速连续切换通过 cancellation / latest-wins receipt 处理；相同 key 是否保留状态由 statePolicy 决定。运行时 mutation 只影响当前实例，不会自动写回定义。

宿主服务

data fetching、认证、缓存、router 和业务 store 由 host-owned service/adapter 显式注入。组件 manifest 声明 required/optional capability，child 只继承 allowlist；subscription 与请求通过 instance owner 和 AbortSignal 在 dispose 时清理。Runtime core 不隐式抓取宿主 singleton，也不把自己描述成完整应用框架。

验证重点

至少覆盖两个并行实例、update、dispose 后重新 create() / mount()、child partial failure、module 404、ABI/hash/tag 冲突、服务拒绝和迟到异步结果。这里的 remount 是销毁旧生命周期后创建新 Instance，不是调用不存在的 instance.mount()。TypeScript 项目还应把生成 .d.ts 与实际 public surface 对照。精确签名见 API Reference。