{
  "schemaVersion": 1,
  "atomId": "tray_container.aicomponent",
  "bundleType": "aicomponent",
  "category": "ui",
  "mode": "fixed",
  "label": {
    "zh": "底部篮子/托盘容器",
    "en": "Bottom tray container (slot-based)"
  },
  "tags": ["ui", "tray", "basket", "container", "slot", "collect", "match-3", "pick-and-match", "threejs", "html-overlay", "3d"],
  "bindingRoles": ["trayContainer"],
  "renderModes": ["phaser-sprite", "html-overlay", "threejs-mesh"],
  "engineVariants": {
    "phaser": {
      "imports": ["phaser.aicomponent"],
      "scaffoldFiles": {
        "src/game/ui/TrayRenderer.ts": { "source": "ref/TrayRenderer.ts", "mode": "full", "weight": 10 }
      }
    },
    "threejs": {
      "imports": ["threejs.aicomponent"],
      "scaffoldFiles": {
        "src/game/ui/TrayRendererHtmlOverlay.ts": { "source": "ref/TrayRendererHtmlOverlay.ts", "mode": "full", "weight": 10 },
        "src/game/ui/TrayRenderer3D.ts": { "source": "ref/TrayRenderer3D.ts", "mode": "full", "weight": 10 }
      }
    }
  },
  "imports": [
    { "slot": "engine", "pinAtomId": "phaser.aicomponent", "edgeKind": "requires", "bindAs": "engine" }
  ],
  "binding": {
    "role": "trayContainer",
    "target": "src/game/ui/TrayRenderer.ts",
    "type": "code-module-reference"
  },
  "exports": [
    { "name": "TrayRenderer", "kind": "class", "location": "src/game/ui/TrayRenderer.ts" },
    { "name": "TrayRendererHtmlOverlay", "kind": "class", "location": "src/game/ui/TrayRendererHtmlOverlay.ts" },
    { "name": "TrayRenderer3D", "kind": "class", "location": "src/game/ui/TrayRenderer3D.ts" }
  ],
  "neutralDescriptor": {
    "geometry": "N-slot container for collected items with grouping insert, match elimination animation, overflow shake feedback",
    "layers": ["ui-layout", "animation", "item-management"],
    "replaceable": ["capacity", "slot size", "animation durations", "render mode (phaser/html/3d)"]
  },
  "usageHints": [
    "支持三种渲染模式：phaser-sprite（Phaser 场景内）、html-overlay（CSS DOM 覆盖层）、threejs-mesh（3D 场景内）",
    "html-overlay 推荐用于 Three.js 项目的 UI 层——不占用 WebGL 管线，CSS transition 动画流畅",
    "threejs-mesh 用于需要完全沉浸式 3D 体验的项目——物品在场景内以 Mesh 呈现",
    "三种模式接口一致：setup/getSlotPos/addItem/rearrangeItems/removeMatchedItems/shake/destroy",
    "TrayRenderer3D.update(dt) 需要在 onUpdate 中每帧调用以驱动动画"
  ],
  "files": {
    "skill": "SKILL.md",
    "ref": ["ref/TrayRenderer.ts", "ref/TrayRendererHtmlOverlay.ts", "ref/TrayRenderer3D.ts"]
  }
}