@operato/scene-storage 10.0.0-beta.48 → 10.0.0-beta.50

package/src/stockpile.ts

@@ -0,0 +1,508 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ *
+ * Stockpile — 평치(block/floor) 보관 영역. 사각형 footprint + `state.data` 의 record[].
+ * 실제 carrier component 를 자식으로 두지 않고, 인벤토리(records)의 *_개수와 종류_* 만으로
+ * 가상 carrier mesh 를 자동 적치(stackPattern × carrierPreset)해 시각화한다.
+ *
+ * 데이터 idiom — StorageRack 과 동일 (`state.data: Record[]`). mover 가 pick/place 하면
+ * record push/pop, _realObject 가 records.length 기준 mesh 를 재배치.
+ *
+ * 1단계 — 시각화: 모델에 `data: [{id:'a'},{id:'b'},...]` 가 들어오면 mesh 가 자동 적치.
+ * 2단계(추후) — mover 통합: obtainCarrier 가 transient carrier 컴포넌트 materialize,
+ *                            receiveAt 가 record push + carrier dispose.
+ */
+
+import * as THREE from 'three'
+import { Component, ComponentNature, ContainerAbstract, RealObject, sceneComponent } from '@hatiolab/things-scene'
+import type { State, Material3D } from '@hatiolab/things-scene'
+import {
+  CarrierHolder,
+  Placeable,
+  SlotTarget,
+  type AttachFrame,
+  type Alignment,
+  type Heights,
+  type PlacementArchetype
+} from '@operato/scene-base'
+
+import { Stockpile3D } from './stockpile-3d.js'
+
+export type StackPattern = 'row' | 'staggered' | 'pyramid' | 'column' | 'pile'
+export type CarrierPreset = 'box' | 'pallet' | 'drum' | 'sack' | 'crate' | 'bale'
+export type PickPolicy = 'lifo' | 'fifo'
+
+/** 적치된 carrier 의 record. 향후 sku / weight / 입고시각 등 확장. */
+export interface StockpileRecord {
+  id: string
+  [key: string]: any
+}
+
+export interface StockpileState extends State {
+  /** 적치 carrier 의 record 목록 — storage-rack 의 state.data 와 동일 idiom. */
+  data?: StockpileRecord[]
+
+  /** 적치 형태 프리셋. default 'row'. */
+  stackPattern?: StackPattern
+  /** 가상 carrier 종류 프리셋. default 'box'. */
+  carrierPreset?: CarrierPreset
+
+  /** 가상 carrier 한 개의 크기 (없으면 preset 별 기본). */
+  carrierWidth?: number
+  carrierHeight?: number
+  carrierDepth?: number
+  /** 적치된 carrier 사이의 평면(xz) 간격 — 0 이면 딱 붙음, default 3. y(단 적층)는 항상 딱 붙음. */
+  carrierGap?: number
+
+  /** 최대 적치 수 (undefined = 무제한). */
+  capacity?: number
+  /** 위로 몇 단까지 (undefined = stack 형태에 맡김). */
+  stackHeightLimit?: number
+  /** 어느 끝에서 빼나. default 'lifo'. */
+  pickPolicy?: PickPolicy
+
+  /** click 시 invoke 할 Popup 컴포넌트 id (StorageRack / RackGrid 와 동일 패턴). */
+  popupRef?: string
+
+  /**
+   * Legend 컴포넌트 id. legend 의 `state.status = {field, ranges, defaultColor}` 를
+   * 참조해 각 record 의 field 값을 색상으로 매핑한다 (StorageRack 와 동일 패턴).
+   * 미명시 시 scene 안 `type='legend'` 첫 컴포넌트 자동 발견.
+   */
+  legendTarget?: string
+
+  material3d?: Material3D
+}
+
+const SLOT_ID = 'pile'
+
+const NATURE: ComponentNature = {
+  mutable: false,
+  resizable: true,
+  rotatable: true,
+  properties: [
+    { type: 'select', label: 'stack-pattern', name: 'stackPattern',
+      property: { options: ['row', 'staggered', 'pyramid', 'column', 'pile'] } },
+    { type: 'select', label: 'carrier-preset', name: 'carrierPreset',
+      property: { options: ['box', 'pallet', 'drum', 'sack', 'crate', 'bale'] } },
+    { type: 'number', label: 'carrier-width', name: 'carrierWidth' },
+    { type: 'number', label: 'carrier-height', name: 'carrierHeight' },
+    { type: 'number', label: 'carrier-depth', name: 'carrierDepth' },
+    { type: 'number', label: 'carrier-gap', name: 'carrierGap' },
+    { type: 'number', label: 'capacity', name: 'capacity' },
+    { type: 'number', label: 'stack-height-limit', name: 'stackHeightLimit' },
+    { type: 'select', label: 'pick-policy', name: 'pickPolicy',
+      property: { options: ['lifo', 'fifo'] } },
+    { type: 'id-input', label: 'popup-ref', name: 'popupRef',
+      property: { component: 'popup' } },
+    { type: 'id-input', label: 'legend-target', name: 'legendTarget',
+      property: { component: 'legend' },
+      placeholder: '미명시 시 scene 의 legend 자동 발견' }
+  ],
+  help: 'scene/component/stockpile'
+}
+
+@sceneComponent('stockpile')
+export default class Stockpile extends CarrierHolder(Placeable(ContainerAbstract)) {
+  declare state: StockpileState
+  declare _realObject?: Stockpile3D
+
+  static placement: PlacementArchetype = 'floor'
+  static align: Alignment = 'bottom'
+  static defaultDepth = (_h: Heights) => 5   // pad 두께
+
+  get nature(): ComponentNature { return NATURE }
+  get anchors() { return [] }
+
+  // ── records (state.data 의 읽기 전용 뷰, storage-rack 패턴) ─────────────
+  get records(): ReadonlyArray<StockpileRecord> {
+    return (this.state.data as StockpileRecord[]) ?? []
+  }
+  get inventoryCount(): number {
+    return this.records.length
+  }
+
+  // ── SlottedHolder duck-type — 단일 slot ('pile') ────────────────────────
+  slotIds(): ReadonlyArray<string> { return [SLOT_ID] }
+
+  hasCarrierAt(slotId: string): boolean {
+    return slotId === SLOT_ID && this.inventoryCount > 0
+  }
+
+  canReceiveAt(slotId: string, _carrier?: Component): boolean {
+    if (slotId !== SLOT_ID) return false
+    const cap = this.state.capacity
+    if (typeof cap === 'number' && this.inventoryCount >= cap) return false
+    return true
+  }
+
+  occupiedSlotIds(): ReadonlyArray<string> {
+    return this.inventoryCount > 0 ? [SLOT_ID] : []
+  }
+  emptySlotIds(): ReadonlyArray<string> {
+    return this.canReceiveAt(SLOT_ID) ? [SLOT_ID] : []
+  }
+
+  /**
+   * record 한 개를 빼서 carrier 컴포넌트로 transient materialize. mover 가 pickup
+   * 하면 이걸 reparent 해서 들고 다닌다. storage-rack._materializeCarrier 와 동일
+   * 패턴 — Component.register(type) 으로 클래스 lookup, addComponent({silent: true})
+   * 로 cascade 차단.
+   */
+  obtainCarrier(slotId: string): Component | null {
+    if (slotId !== SLOT_ID) return null
+    if (this.records.length === 0) return null
+    const records = [...this.records]
+    const policy = (this.state.pickPolicy ?? 'lifo') as PickPolicy
+    const record = policy === 'fifo' ? records.shift()! : records.pop()!
+    this._setDataSilently(records)
+    return this._materializeCarrier(record)
+  }
+
+  private _materializeCarrier(record: StockpileRecord): Component | null {
+    // carrierPreset → 등록된 컴포넌트 type. 미등록(drum/sack/bale 등) 은 시각 mesh
+    // 전용이라 carrier 컴포넌트로는 fallback ('parcel'/'box').
+    const preset = (this.state.carrierPreset ?? 'box') as CarrierPreset
+    const PRESET_TO_TYPE: Record<CarrierPreset, string> = {
+      box: 'box',
+      pallet: 'pallet',
+      crate: 'box',
+      drum: 'parcel',
+      sack: 'parcel',
+      bale: 'parcel'
+    }
+    const carrierType = (record as any).type ?? PRESET_TO_TYPE[preset] ?? 'parcel'
+    const CarrierClass = (Component as any).register(carrierType) as
+      | (new (...args: any[]) => Component) | undefined
+    if (!CarrierClass) {
+      console.warn(`[stockpile] carrier type "${carrierType}" 미등록 — obtainCarrier 실패`)
+      return null
+    }
+
+    // 크기 — state.carrier* 또는 preset default
+    const stockpileW = (this.state as any).width ?? 100
+    const stockpileH = (this.state as any).height ?? 100
+    const cw = this.state.carrierWidth ?? 30
+    const ch = this.state.carrierHeight ?? 30
+    const cd = this.state.carrierDepth ?? 22
+
+    // id/refid/transform 류 제외 — scene 안 기존 component 충돌 회피 (storage-rack 패턴)
+    const { id: _id, refid: _refid, transform: _tf, ...recordCopy } = record as any
+    // stockpile-inner 좌표 — center 에 놓기 (Mover 가 곧 pick 해 들고 감)
+    const carrierState: any = {
+      ...recordCopy,
+      type: carrierType,
+      width: cw,
+      height: ch,
+      depth: cd,
+      refid: _nextStockpileCarrierRefid(),
+      left: stockpileW / 2 - cw / 2,
+      top: stockpileH / 2 - ch / 2
+    }
+
+    const carrier = new CarrierClass(carrierState, (this as any)._app)
+    // silent: refreshMappings cascade 차단 (transient 라 매핑 재계산 불필요)
+    ;(this as any).addComponent(carrier, { silent: true })
+    void (carrier as any).realObject
+    ;(carrier as any).applyHolderAttachPoint?.()
+    return carrier
+  }
+
+  /**
+   * carrier 를 받아 record 로 push, carrier 객체는 dispose (시각은 _realObject 가
+   * records 길이 기준 자동 갱신). capacity 초과 시도는 canReceiveAt 가 이미 차단.
+   */
+  async receiveAt(_slotId: string, carrier: Component, _options?: any): Promise<void> {
+    const cstate: any = (carrier as any)?.state ?? {}
+    const cid = cstate.id ?? `stk-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 6)}`
+    const record: StockpileRecord = {
+      id: String(cid),
+      ...(cstate.type ? { type: cstate.type } : {}),
+      ...(typeof cstate.width === 'number' ? { width: cstate.width } : {}),
+      ...(typeof cstate.height === 'number' ? { height: cstate.height } : {}),
+      ...(typeof cstate.depth === 'number' ? { depth: cstate.depth } : {})
+    }
+    const records = [...this.records, record]
+    this._setDataSilently(records)
+    ;(carrier as any)?.dispose?.()
+  }
+
+  /** dispatch → handoff 의 accept 분기 — receiveAt 으로 위임. */
+  async accept(carrier: Component, options?: any): Promise<void> {
+    return this.receiveAt(SLOT_ID, carrier, options)
+  }
+  async receive(carrier: Component, options?: any): Promise<void> {
+    return this.receiveAt(SLOT_ID, carrier, options)
+  }
+
+  /**
+   * mover 가 obtainCarrier 로 빼낸 transient carrier 를 pad 위에 안착 (잠깐 보이는
+   * 위치). mover 가 pick 하면 즉시 deck 으로 reparent 되므로 잔류는 짧다.
+   * Spot 과 동일 idiom — pad-top + carrier 의 halfDepth 만큼 들어올림.
+   */
+  attachPointFor(carrier: Component): AttachFrame | null {
+    const ro = this._realObject
+    const frame = ro?.getAttachFrame?.()
+    if (!frame) return null
+    const carrierDepth = resolveDepth(carrier)
+    return {
+      attach: frame,
+      localPosition: { x: 0, y: carrierDepth / 2, z: 0 }
+    }
+  }
+
+  slotTargetAt(slotId: string): SlotTarget {
+    return new SlotTarget(this as any, slotId)
+  }
+  getSlotAttachObject3d(slotId: string): any {
+    // slotId 가 'pile' 이면 pad. record.id 면 그 carrier mesh — popup tether 가 그
+    // stock 에 정확히 연결되도록.
+    return (this as any)._realObject?.getAttachFrame?.(slotId)
+  }
+
+  /** state.data 갱신 + 3D 즉시 재배치. */
+  private _setDataSilently(records: StockpileRecord[]): void {
+    ;(this.state as any).data = records
+    this._realObject?.update?.()
+  }
+
+  /**
+   * 2D — outlined pad + 인벤토리 카운트 텍스트. 평치 의도가 한 눈에 — 사각 영역 위에
+   * 적재된 carrier 수가 가운데 큰 글씨로.
+   */
+  render(ctx: CanvasRenderingContext2D) {
+    const { left = 0, top = 0, width = 100, height = 100 } = this.state
+    const fillStyle = (this.state.fillStyle as string) || '#c89c5c'
+    const strokeStyle = (this.state.strokeStyle as string) || fillStyle
+
+    // pad (반투명)
+    ctx.save()
+    ctx.fillStyle = fillStyle
+    ctx.globalAlpha = 0.18
+    ctx.fillRect(left, top, width, height)
+    ctx.restore()
+
+    // outline (dashed)
+    ctx.save()
+    ctx.strokeStyle = strokeStyle
+    ctx.lineWidth = 1.5
+    ctx.setLineDash([6, 3])
+    ctx.strokeRect(left + 0.75, top + 0.75, width - 1.5, height - 1.5)
+    ctx.setLineDash([])
+    ctx.restore()
+
+    // 인벤토리 수 + capacity (있으면)
+    ctx.save()
+    const fontSize = Math.min(width, height) * 0.22
+    ctx.fillStyle = '#333'
+    ctx.font = `bold ${fontSize}px sans-serif`
+    ctx.textAlign = 'center'
+    ctx.textBaseline = 'middle'
+    const label = typeof this.state.capacity === 'number'
+      ? `${this.inventoryCount}/${this.state.capacity}`
+      : `${this.inventoryCount}`
+    ctx.fillText(label, left + width / 2, top + height / 2)
+    ctx.restore()
+  }
+
+  // ── Popup 연동 — storage-rack 동일 패턴 ───────────────────────────────
+  /**
+   * things-scene EventManager3D 가 raycast → object3d.userData.context.component 의
+   * `trigger("click", mouseEvent)` 을 호출 → eventMap 으로 receive. pad / carrier mesh
+   * 어느 쪽을 클릭하든 stockpile 전체 popup invoke (단일 slot 이라 cell 구분 없음).
+   */
+  get eventMap() {
+    return {
+      '(self)': {
+        '(self)': {
+          click: this._onStockpileClick
+        }
+      }
+    }
+  }
+
+  private _onStockpileClick = (mouseEvent: MouseEvent) => {
+    // view mode 에서만 동작 (modeling 중 click 은 framework 선택 로직 우선).
+    if (!(this as any).app?.isViewMode) return
+    const hit = this._raycastStockpileHit(mouseEvent)
+    if (!hit) return
+    // hit.object 가 carrier mesh 면 userData.recordId 보유 → 그 stock 의 popup.
+    // pad / 기타면 stockpile 전체 popup.
+    const recordId = hit.object?.userData?.recordId as string | undefined
+    this._invokePopup(typeof recordId === 'string' ? recordId : undefined)
+  }
+
+  /**
+   * state.popupRef 가 가리키는 Popup 컴포넌트를 invoke.
+   *   - recordId 명시 → 그 record 의 anchor = mesh. payload = 해당 record.
+   *   - 미명시 (pad 클릭) → 'pile' anchor (pad). payload = 전체 inventory.
+   * anchor 는 SlotTarget — Popup 이 anchor.holder.getSlotAttachObject3d(anchor.slotId)
+   * 로 tether 위치 잡음 (storage-rack 와 동일 패턴).
+   */
+  private _invokePopup(recordId?: string): void {
+    const popupRefId = this.state.popupRef
+    if (!popupRefId) return
+    const popupComp: any = (this as any).root?.findById?.(popupRefId)
+    if (!popupComp || typeof popupComp.openPopup !== 'function') {
+      console.warn(`[stockpile] popupRef="${popupRefId}" 가 가리키는 컴포넌트 없거나 openPopup 미지원`)
+      return
+    }
+    if (recordId) {
+      const record = this.records.find(r => r.id === recordId) ?? { id: recordId }
+      const anchor = this.slotTargetAt(recordId)
+      popupComp.openPopup(record, { anchor })
+    } else {
+      const anchor = this.slotTargetAt(SLOT_ID)
+      popupComp.openPopup({
+        componentId: (this.state as any).id,
+        records: this.records,
+        inventoryCount: this.inventoryCount,
+        capacity: this.state.capacity,
+        carrierPreset: this.state.carrierPreset,
+        stackPattern: this.state.stackPattern
+      }, { anchor })
+    }
+  }
+
+  /**
+   * 클릭 시 framework 의 mouse NDC 를 재사용해 raycast → *우리 stockpile* 의 어떤 mesh 가
+   * closest hit 인지 반환 (다른 object 가 더 가까우면 undefined). storage-rack._raycastRackHit
+   * 와 동일 패턴 — capability.getObjectsByRaycast 우선, 없으면 scene/camera/canvas 재구성.
+   */
+  private _raycastStockpileHit(mouseEvent: MouseEvent): THREE.Intersection | undefined {
+    const ro: any = (this as any)._realObject
+    if (!ro?.object3d) return undefined
+
+    const tc: any = ro.threeContainer
+    if (!tc) return undefined
+
+    const cap: any = tc._threeCapability ?? tc._capability
+    let intersects: THREE.Intersection[] | undefined
+    if (cap?.getObjectsByRaycast) {
+      intersects = cap.getObjectsByRaycast() as THREE.Intersection[] | undefined
+    }
+    if (!intersects || intersects.length === 0) {
+      const scene = tc.scene3d as THREE.Scene | undefined
+      const renderer = tc.renderer3d as THREE.WebGLRenderer | undefined
+      const camera =
+        (tc.activeCamera3d as THREE.Camera | undefined) ??
+        (cap?.activeCamera as THREE.Camera | undefined) ??
+        (cap?.camera as THREE.Camera | undefined)
+      const canvas = renderer?.domElement
+      if (!scene || !canvas || !camera) return undefined
+      const rect = canvas.getBoundingClientRect()
+      if (rect.width === 0 || rect.height === 0) return undefined
+      const ndc = new THREE.Vector2(
+        ((mouseEvent.clientX - rect.left) / rect.width) * 2 - 1,
+        -((mouseEvent.clientY - rect.top) / rect.height) * 2 + 1
+      )
+      const raycaster = new THREE.Raycaster()
+      raycaster.setFromCamera(ndc, camera)
+      intersects = raycaster.intersectObjects(scene.children, true)
+    }
+    if (!intersects || intersects.length === 0) return undefined
+
+    // 가장 가까운 hit 이 *이 stockpile* 의 descendant 여야 한다 (다른 mesh 가 사이에 있으면 skip).
+    const closest = intersects[0]
+    let obj: THREE.Object3D | null = closest.object
+    while (obj) {
+      if (obj.userData?.context === ro) return closest
+      obj = obj.parent
+    }
+    return undefined
+  }
+
+  // ── Legend — record 의 field 값 → 색상 매핑 (StorageRack 동일 패턴) ───────
+  private _legendTarget?: Component
+
+  /**
+   * Legend 컴포넌트 lookup. 우선:
+   *  1) state.legendTarget id 명시
+   *  2) scene 전체에서 type='legend' 첫 번째 (자동 발견)
+   */
+  get legendTarget(): Component | undefined {
+    if (this._legendTarget) return this._legendTarget
+    const id = this.state.legendTarget
+    if (id) {
+      const found = ((this as any).root)?.findById?.(id) as Component | undefined
+      if (found) {
+        this._legendTarget = found
+        ;(found as any).on?.('change', this._onLegendChanged, this)
+        return found
+      }
+    }
+    const visit = (node: any): Component | undefined => {
+      if (!node) return undefined
+      if (node.state?.type === 'legend') return node as Component
+      const children = node.components as Component[] | undefined
+      if (children) for (const c of children) {
+        const r = visit(c)
+        if (r) return r
+      }
+      return undefined
+    }
+    const found = visit((this as any).root)
+    if (found) {
+      this._legendTarget = found
+      ;(found as any).on?.('change', this._onLegendChanged, this)
+    }
+    return found
+  }
+
+  private _onLegendChanged = (): void => {
+    ;(this._realObject as any)?.update?.()
+  }
+
+  /**
+   * record 의 legend.field 값을 ranges 와 매칭해 색상 해석.
+   *  - range.value === recordValue (카테고리)
+   *  - range.min ≤ Number(v) < range.max (수치)
+   *  - 매칭 없으면 defaultColor
+   */
+  resolveLegendColor(record: any): string | undefined {
+    const legend = this.legendTarget
+    if (!legend) return undefined
+    const status: any = (legend as any).getState?.('status') ?? (legend.state as any)?.status
+    if (!status) return undefined
+    const field = status.field as string | undefined
+    const ranges = status.ranges as any[] | undefined
+    if (!field || !Array.isArray(ranges)) return undefined
+
+    const value = record?.[field]
+    if (value === undefined || value === null) return status.defaultColor
+
+    for (const range of ranges) {
+      if (!range) continue
+      if (range.value !== undefined) {
+        if (range.value === value) return range.color
+        continue
+      }
+      const num = Number(value)
+      if (!Number.isFinite(num)) continue
+      const min = range.min !== undefined && range.min !== '' ? Number(range.min) : undefined
+      const max = range.max !== undefined && range.max !== '' ? Number(range.max) : undefined
+      const minOk = min === undefined || num >= min
+      const maxOk = max === undefined || num < max
+      if (minOk && maxOk) return range.color
+    }
+    return status.defaultColor as string | undefined
+  }
+
+  buildRealObject(): RealObject | undefined {
+    return new Stockpile3D(this)
+  }
+}
+
+// transient carrier refid — scene 내 기존 컴포넌트와 충돌 회피용 큰 시작값
+// (storage-rack 의 _nextCarrierRefid 와 같은 idiom, 별도 범위로 분리).
+let _stockpileCarrierSeq = 0
+function _nextStockpileCarrierRefid(): number {
+  return 800000 + (_stockpileCarrierSeq++)
+}
+
+function resolveDepth(c: Component): number {
+  const eff = (c as any)._realObject?.effectiveDepth
+  if (typeof eff === 'number' && Number.isFinite(eff)) return eff
+  const d = (c as any)?.state?.depth
+  return typeof d === 'number' && Number.isFinite(d) ? d : 0
+}

package/src/storage-rack.ts

@@ -10,6 +10,7 @@ import {
   CarrierHolder,
   Placeable,
   SlotTarget,
+  componentBoundingBox,
   type AttachFrame,
   type Alignment,
   type Heights,
@@ -19,6 +20,7 @@ import {
 } from '@operato/scene-base'
 
 import { StorageRack3D } from './storage-rack-3d.js'
+import { rackAcceptsMoverTool } from './rack-capability.js'
 
 /** Rack 컴포넌트 state */
 export interface StorageRackState extends State {
@@ -178,14 +180,25 @@ export default class Rack
     return (this.state as any)?.isObstacle !== false
   }
   obstacleBoundingBox(): { left: number; top: number; width: number; height: number; y?: number; zHeight?: number } | null {
-    const s: any = this.state
-    if (typeof s?.left !== 'number') return null
-    return {
-      left: s.left, top: s.top,
-      width: s.width, height: s.height,
-      y: typeof s.zPos === 'number' ? s.zPos : 0,
-      zHeight: typeof s.depth === 'number' ? s.depth : 0
-    }
+    // scene-base 의 componentBoundingBox 위임 — rotation 적용된 AABB.
+    return componentBoundingBox(this)
+  }
+
+  /**
+   * 이 rack 에 *_놓으려는 mover_* 의 능력을 수용하는가. canAccept(carrier) 는 carrier
+   * 타입만 보지만, 이건 *_적재 mover 의 물리 능력_* 을 본다.
+   *
+   * rack 선반 적재는 *_높이 도달_* mover (crane / stacker / forklift) 의 몫이다.
+   * 평탄 데크 차량(agv-deck)은 바닥 운반 전용 — 선반에 직접 못 올린다. 따라서
+   * agv-deck 류는 거부 → transfer planner 가 자동으로 in-port 경유(환승)를 택한다.
+   *
+   * 거부 목록은 state.blockedTools 로 override (default ['agv-deck']). 향후 선반
+   * 높이(level) vs mover liftHeight 비교로 정교화 가능.
+   */
+  canAcceptFromMover(mover: any): boolean {
+    const toolType = mover?.toolType ?? mover?.state?.toolType
+    const blocked = (this.state as any)?.blockedTools ?? ['agv-deck']
+    return rackAcceptsMoverTool(toolType, blocked)
   }
 
   get nature() {

package/src/templates/index.ts

@@ -10,6 +10,9 @@
  *   - spot — virtual placement marker
  */
 import spot from './spot.js'
+import stockpile from './stockpile.js'
+import stockpileGrid from './stockpile-grid.js'
+import pickingStation from './picking-station.js'
 const pallet = new URL('../../icons/pallet.png', import.meta.url).href
 const box = new URL('../../icons/box.png', import.meta.url).href
 const parcel = new URL('../../icons/parcel.png', import.meta.url).href
@@ -196,5 +199,8 @@ export default [
       ]
     }
   },
-  spot
+  spot,
+  stockpile,
+  stockpileGrid,
+  pickingStation
 ]

package/src/templates/picking-station.ts

@@ -0,0 +1,23 @@
+// Reuse parcel.png as a placeholder icon until a dedicated picking-station icon is drawn.
+const icon = new URL('../../icons/parcel.png', import.meta.url).href
+
+export default {
+  type: 'picking-station',
+  description:
+    'work station — carrier stays for processingTimeMs then becomes idle. anchors AMR↔human handoff',
+  group: 'storage',
+  icon,
+  model: {
+    type: 'picking-station',
+    top: 200,
+    left: 400,
+    width: 120,
+    height: 100,
+    depth: 60,
+    rotation: 0,
+    fillStyle: '#5a8ab8',
+    strokeStyle: '#3d6a8f',
+    processingTimeMs: 3000,
+    status: 'idle'
+  }
+}

package/src/templates/stockpile-grid.ts

@@ -0,0 +1,39 @@
+// Reuse parcel.png as a placeholder icon until a dedicated stockpile-grid icon is drawn.
+const icon = new URL('../../icons/parcel.png', import.meta.url).href
+
+export default {
+  type: 'stockpile-grid',
+  description:
+    'grid of block/floor storage cells — each cell is a stockpile with its own records, capacity, and preset override',
+  group: 'storage',
+  icon,
+  model: {
+    type: 'stockpile-grid',
+    top: 200,
+    left: 400,
+    width: 300,
+    height: 200,
+    depth: 5,
+    rotation: 0,
+    fillStyle: '#c89c5c',
+    strokeStyle: '#7a5a2e',
+    cols: 3,
+    rows: 2,
+    cellWidth: 100,
+    cellHeight: 100,
+    stackPattern: 'row',
+    carrierPreset: 'box',
+    carrierWidth: 30,
+    carrierHeight: 30,
+    carrierDepth: 22,
+    carrierGap: 10,
+    capacity: 20,
+    pickPolicy: 'lifo',
+    // 데모 — 일부 cell 에 records 미리 채워서 끌어 놓자 마자 적치 보이게.
+    data: [
+      { col: 0, row: 0, data: [{ id: 'a1' }, { id: 'a2' }] },
+      { col: 1, row: 0, data: [{ id: 'b1' }, { id: 'b2' }, { id: 'b3' }] },
+      { col: 2, row: 1, data: [{ id: 'c1' }] }
+    ]
+  }
+}

package/src/templates/stockpile.ts

@@ -0,0 +1,32 @@
+// Reuse parcel.png as a placeholder icon until a dedicated stockpile icon is drawn.
+const icon = new URL('../../icons/parcel.png', import.meta.url).href
+
+export default {
+  type: 'stockpile',
+  description:
+    'block/floor storage — rectangular footprint with auto-stacked virtual carriers (stackPattern × carrierPreset) driven by state.data records',
+  group: 'storage' /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|3D|facility|storage|conveyance|transport|manufacturing|form|etc */,
+  icon,
+  model: {
+    type: 'stockpile',
+    top: 200,
+    left: 400,
+    width: 200,
+    height: 150,
+    depth: 5,
+    rotation: 0,
+    fillStyle: '#c89c5c',
+    // 바닥 페인트 라인 의도 — fillStyle 보다 진한 색으로 영역 마킹이 눈에 띄게.
+    strokeStyle: '#7a5a2e',
+    stackPattern: 'row',
+    carrierPreset: 'box',
+    carrierWidth: 30,
+    carrierHeight: 30,
+    carrierDepth: 22,
+    carrierGap: 10,
+    capacity: 30,
+    pickPolicy: 'lifo',
+    // 데모용 — 새로 끌어다 놓았을 때 적치된 모습이 즉시 보이도록 record 몇 개.
+    data: [{ id: 'p-1' }, { id: 'p-2' }, { id: 'p-3' }]
+  }
+}