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

package/dist/templates/stockpile-grid.js

@@ -0,0 +1,38 @@
+// 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' }] }
+        ]
+    }
+};
+//# sourceMappingURL=stockpile-grid.js.map

package/dist/templates/stockpile-grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stockpile-grid.js","sourceRoot":"","sources":["../../src/templates/stockpile-grid.ts"],"names":[],"mappings":"AAAA,yFAAyF;AACzF,MAAM,IAAI,GAAG,IAAI,GAAG,CAAC,wBAAwB,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAA;AAEpE,eAAe;IACb,IAAI,EAAE,gBAAgB;IACtB,WAAW,EACT,kHAAkH;IACpH,KAAK,EAAE,SAAS;IAChB,IAAI;IACJ,KAAK,EAAE;QACL,IAAI,EAAE,gBAAgB;QACtB,GAAG,EAAE,GAAG;QACR,IAAI,EAAE,GAAG;QACT,KAAK,EAAE,GAAG;QACV,MAAM,EAAE,GAAG;QACX,KAAK,EAAE,CAAC;QACR,QAAQ,EAAE,CAAC;QACX,SAAS,EAAE,SAAS;QACpB,WAAW,EAAE,SAAS;QACtB,IAAI,EAAE,CAAC;QACP,IAAI,EAAE,CAAC;QACP,SAAS,EAAE,GAAG;QACd,UAAU,EAAE,GAAG;QACf,YAAY,EAAE,KAAK;QACnB,aAAa,EAAE,KAAK;QACpB,YAAY,EAAE,EAAE;QAChB,aAAa,EAAE,EAAE;QACjB,YAAY,EAAE,EAAE;QAChB,UAAU,EAAE,EAAE;QACd,QAAQ,EAAE,EAAE;QACZ,UAAU,EAAE,MAAM;QAClB,iDAAiD;QACjD,IAAI,EAAE;YACJ,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE;YACtD,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE;YACpE,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE;SACzC;KACF;CACF,CAAA","sourcesContent":["// Reuse parcel.png as a placeholder icon until a dedicated stockpile-grid icon is drawn.\nconst icon = new URL('../../icons/parcel.png', import.meta.url).href\n\nexport default {\n  type: 'stockpile-grid',\n  description:\n    'grid of block/floor storage cells — each cell is a stockpile with its own records, capacity, and preset override',\n  group: 'storage',\n  icon,\n  model: {\n    type: 'stockpile-grid',\n    top: 200,\n    left: 400,\n    width: 300,\n    height: 200,\n    depth: 5,\n    rotation: 0,\n    fillStyle: '#c89c5c',\n    strokeStyle: '#7a5a2e',\n    cols: 3,\n    rows: 2,\n    cellWidth: 100,\n    cellHeight: 100,\n    stackPattern: 'row',\n    carrierPreset: 'box',\n    carrierWidth: 30,\n    carrierHeight: 30,\n    carrierDepth: 22,\n    carrierGap: 10,\n    capacity: 20,\n    pickPolicy: 'lifo',\n    // 데모 — 일부 cell 에 records 미리 채워서 끌어 놓자 마자 적치 보이게.\n    data: [\n      { col: 0, row: 0, data: [{ id: 'a1' }, { id: 'a2' }] },\n      { col: 1, row: 0, data: [{ id: 'b1' }, { id: 'b2' }, { id: 'b3' }] },\n      { col: 2, row: 1, data: [{ id: 'c1' }] }\n    ]\n  }\n}\n"]}

package/dist/templates/stockpile.d.ts

@@ -0,0 +1,29 @@
+declare const _default: {
+    type: string;
+    description: string;
+    group: string;
+    icon: string;
+    model: {
+        type: string;
+        top: number;
+        left: number;
+        width: number;
+        height: number;
+        depth: number;
+        rotation: number;
+        fillStyle: string;
+        strokeStyle: string;
+        stackPattern: string;
+        carrierPreset: string;
+        carrierWidth: number;
+        carrierHeight: number;
+        carrierDepth: number;
+        carrierGap: number;
+        capacity: number;
+        pickPolicy: string;
+        data: {
+            id: string;
+        }[];
+    };
+};
+export default _default;

package/dist/templates/stockpile.js

@@ -0,0 +1,31 @@
+// 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' }]
+    }
+};
+//# sourceMappingURL=stockpile.js.map

package/dist/templates/stockpile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stockpile.js","sourceRoot":"","sources":["../../src/templates/stockpile.ts"],"names":[],"mappings":"AAAA,oFAAoF;AACpF,MAAM,IAAI,GAAG,IAAI,GAAG,CAAC,wBAAwB,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAA;AAEpE,eAAe;IACb,IAAI,EAAE,WAAW;IACjB,WAAW,EACT,4IAA4I;IAC9I,KAAK,EAAE,SAAS,CAAC,sIAAsI;IACvJ,IAAI;IACJ,KAAK,EAAE;QACL,IAAI,EAAE,WAAW;QACjB,GAAG,EAAE,GAAG;QACR,IAAI,EAAE,GAAG;QACT,KAAK,EAAE,GAAG;QACV,MAAM,EAAE,GAAG;QACX,KAAK,EAAE,CAAC;QACR,QAAQ,EAAE,CAAC;QACX,SAAS,EAAE,SAAS;QACpB,mDAAmD;QACnD,WAAW,EAAE,SAAS;QACtB,YAAY,EAAE,KAAK;QACnB,aAAa,EAAE,KAAK;QACpB,YAAY,EAAE,EAAE;QAChB,aAAa,EAAE,EAAE;QACjB,YAAY,EAAE,EAAE;QAChB,UAAU,EAAE,EAAE;QACd,QAAQ,EAAE,EAAE;QACZ,UAAU,EAAE,MAAM;QAClB,iDAAiD;QACjD,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC;KACpD;CACF,CAAA","sourcesContent":["// Reuse parcel.png as a placeholder icon until a dedicated stockpile icon is drawn.\nconst icon = new URL('../../icons/parcel.png', import.meta.url).href\n\nexport default {\n  type: 'stockpile',\n  description:\n    'block/floor storage — rectangular footprint with auto-stacked virtual carriers (stackPattern × carrierPreset) driven by state.data records',\n  group: 'storage' /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|3D|facility|storage|conveyance|transport|manufacturing|form|etc */,\n  icon,\n  model: {\n    type: 'stockpile',\n    top: 200,\n    left: 400,\n    width: 200,\n    height: 150,\n    depth: 5,\n    rotation: 0,\n    fillStyle: '#c89c5c',\n    // 바닥 페인트 라인 의도 — fillStyle 보다 진한 색으로 영역 마킹이 눈에 띄게.\n    strokeStyle: '#7a5a2e',\n    stackPattern: 'row',\n    carrierPreset: 'box',\n    carrierWidth: 30,\n    carrierHeight: 30,\n    carrierDepth: 22,\n    carrierGap: 10,\n    capacity: 30,\n    pickPolicy: 'lifo',\n    // 데모용 — 새로 끌어다 놓았을 때 적치된 모습이 즉시 보이도록 record 몇 개.\n    data: [{ id: 'p-1' }, { id: 'p-2' }, { id: 'p-3' }]\n  }\n}\n"]}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/scene-storage",
   "description": "Storage-domain components for things-scene (smart factory / logistics) — pallet, box, parcel; AS/RS and shelves planned.",
   "author": "heartyoh",
-  "version": "10.0.0-beta.47",
+  "version": "10.0.0-beta.50",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -26,7 +26,7 @@
   },
   "dependencies": {
     "@hatiolab/things-scene": "^10.0.0-beta.1",
-    "@operato/scene-base": "^10.0.0-beta.47",
+    "@operato/scene-base": "^10.0.0-beta.50",
     "three": "^0.183.0"
   },
   "devDependencies": {
@@ -45,5 +45,5 @@
     "typescript": "^5.0.4"
   },
   "prettier": "@hatiolab/prettier-config",
-  "gitHead": "153a7b98b92b1f03d8e5612ad2ef8cc8c7c3a345"
+  "gitHead": "9578b7fbd4cdde41a9610de591de086e5f231eb1"
 }

package/src/index.ts

@@ -25,6 +25,20 @@ export { Crane3D } from './crane-3d.js'
 export { default as Spot } from './spot.js'
 export { Spot3D } from './spot-3d.js'
 
+export { default as Stockpile } from './stockpile.js'
+export type {
+  StockpileState, StockpileRecord, StackPattern, CarrierPreset, PickPolicy
+} from './stockpile.js'
+export { Stockpile3D } from './stockpile-3d.js'
+
+export { default as StockpileGrid } from './stockpile-grid.js'
+export type { StockpileGridState, StockpileGridCell } from './stockpile-grid.js'
+export { StockpileGrid3D } from './stockpile-grid-3d.js'
+
+export { default as PickingStation } from './picking-station.js'
+export type { PickingStationState, PickingStationStatus } from './picking-station.js'
+export { PickingStation3D } from './picking-station-3d.js'
+
 export { default as GenericContainer } from './generic-container.js'
 export type { ContainerStatus } from './generic-container.js'
 export { GenericContainer3D } from './generic-container-3d.js'

package/src/picking-station-3d.ts

@@ -0,0 +1,164 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ *
+ * PickingStation3D — 사람 작업 위치의 3D 시각화. pad(영역) + 작업대(가운데 box, top
+ * face 가 carrier 안착면). status 별 색 변화 (idle/processing/busy) 로 작업 진행
+ * 인지성.
+ */
+
+import * as THREE from 'three'
+import { RealObjectGroup } from '@hatiolab/things-scene'
+
+import type PickingStation from './picking-station.js'
+import type { PickingStationStatus } from './picking-station.js'
+
+const PAD_DEPTH = 2
+
+const STATUS_TINT: Record<PickingStationStatus, number> = {
+  idle: 0x4a7a9b,        // 차분한 blue-grey
+  processing: 0xd9943a,  // 작업 중 — 주황
+  busy: 0xc04040          // busy/blocked — 빨강
+}
+
+export class PickingStation3D extends RealObjectGroup {
+  private _padMesh?: THREE.Mesh
+  private _padOutline?: THREE.LineSegments
+  private _tableMesh?: THREE.Mesh
+
+  build() {
+    super.build()
+    const state = this.component.state as any
+    const w = state.width ?? 100
+    const h = state.height ?? 100
+    const depth = state.depth ?? 5
+
+    // ── pad (영역) ─────────────────────────────────────────────
+    const padGeom = new THREE.BoxGeometry(w, PAD_DEPTH, h)
+    const padMat = new THREE.MeshStandardMaterial({
+      color: this._padColor(), roughness: 0.85, transparent: true, opacity: 0.5
+    })
+    this._padMesh = new THREE.Mesh(padGeom, padMat)
+    this._padMesh.position.y = PAD_DEPTH / 2
+    this._padMesh.receiveShadow = true
+    this.object3d.add(this._padMesh)
+
+    // pad outline
+    const outline = new THREE.LineBasicMaterial({ color: this._strokeColor() })
+    this._padOutline = new THREE.LineSegments(new THREE.EdgesGeometry(padGeom), outline)
+    this._padOutline.position.y = PAD_DEPTH / 2
+    this.object3d.add(this._padOutline)
+
+    // ── 작업대 (table) — pad 위 가운데 box. top face = carrier 안착면. ──
+    const tableW = w * 0.55
+    const tableH = h * 0.45
+    const tableD = Math.max(8, depth)   // 작업면 높이 — operation height 근사
+    const tableGeom = new THREE.BoxGeometry(tableW, tableD, tableH)
+    const tableMat = new THREE.MeshStandardMaterial({
+      color: this._statusColor(), roughness: 0.6, metalness: 0.1
+    })
+    this._tableMesh = new THREE.Mesh(tableGeom, tableMat)
+    this._tableMesh.position.y = PAD_DEPTH + tableD / 2
+    this._tableMesh.castShadow = true
+    this._tableMesh.receiveShadow = true
+    this.object3d.add(this._tableMesh)
+  }
+
+  /** carrier 안착 anchor — 작업대 top face. */
+  getAttachFrame(): THREE.Object3D | undefined {
+    return this._tableMesh ?? this._padMesh
+  }
+
+  private _padColor(): THREE.Color {
+    const raw = (this.component.state as any)?.fillStyle
+    if (typeof raw === 'string' && raw.length > 0) {
+      try { return new THREE.Color(raw) } catch { /* fallthrough */ }
+    }
+    return new THREE.Color(0x5a8ab8)
+  }
+
+  private _strokeColor(): THREE.Color {
+    const raw = (this.component.state as any)?.strokeStyle
+    if (typeof raw === 'string' && raw.length > 0) {
+      try { return new THREE.Color(raw) } catch { /* fallthrough */ }
+    }
+    return this._padColor().clone().multiplyScalar(0.6)
+  }
+
+  /** status 에 따른 작업대 색 — idle/processing/busy. */
+  private _statusColor(): THREE.Color {
+    const s = (this.component.state as any)?.status as PickingStationStatus | undefined
+    return new THREE.Color(STATUS_TINT[s ?? 'idle'] ?? STATUS_TINT.idle)
+  }
+
+  private _applyPadColor(): void {
+    if (this._padMesh) {
+      const m = this._padMesh.material as THREE.MeshStandardMaterial
+      m.color.copy(this._padColor())
+      m.needsUpdate = true
+    }
+  }
+  private _applyStrokeColor(): void {
+    if (this._padOutline) {
+      const m = this._padOutline.material as THREE.LineBasicMaterial
+      m.color.copy(this._strokeColor())
+      m.needsUpdate = true
+    }
+  }
+  private _applyStatusColor(): void {
+    if (this._tableMesh) {
+      const m = this._tableMesh.material as THREE.MeshStandardMaterial
+      m.color.copy(this._statusColor())
+      m.needsUpdate = true
+    }
+  }
+
+  updateAlpha(): void {
+    const alpha = typeof (this.component.state as any).alpha === 'number'
+      ? (this.component.state as any).alpha : 1
+    if (this._padMesh) {
+      const m = this._padMesh.material as THREE.MeshStandardMaterial
+      m.opacity = 0.5 * alpha
+      m.transparent = m.opacity < 1
+      m.needsUpdate = true
+    }
+  }
+
+  updateDimension(): void {
+    if (this._padMesh) {
+      const state = this.component.state as any
+      const w = state.width ?? 100
+      const h = state.height ?? 100
+      const depth = state.depth ?? 5
+      this._padMesh.geometry.dispose()
+      this._padMesh.geometry = new THREE.BoxGeometry(w, PAD_DEPTH, h)
+      if (this._padOutline) {
+        this._padOutline.geometry.dispose()
+        this._padOutline.geometry = new THREE.EdgesGeometry(this._padMesh.geometry)
+      }
+      if (this._tableMesh) {
+        const tableW = w * 0.55
+        const tableH = h * 0.45
+        const tableD = Math.max(8, depth)
+        this._tableMesh.geometry.dispose()
+        this._tableMesh.geometry = new THREE.BoxGeometry(tableW, tableD, tableH)
+        this._tableMesh.position.y = PAD_DEPTH + tableD / 2
+      }
+    }
+  }
+
+  onchange(after: Record<string, unknown>, before: Record<string, unknown>): void {
+    if ('width' in after || 'height' in after || 'depth' in after) {
+      this.updateDimension()
+      return
+    }
+    if ('alpha' in after) { this.updateAlpha(); return }
+    if ('fillStyle' in after) {
+      this._applyPadColor()
+      if ((this.component.state as any).strokeStyle == null) this._applyStrokeColor()
+      return
+    }
+    if ('strokeStyle' in after) { this._applyStrokeColor(); return }
+    if ('status' in after) { this._applyStatusColor(); return }
+    super.onchange?.(after, before)
+  }
+}

package/src/picking-station.ts

@@ -0,0 +1,243 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ *
+ * PickingStation — 사람(또는 자동화) 작업 위치. carrier 가 도착하면 *_processingTimeMs_*
+ * 동안 머문 뒤 status='idle' 로 자동 전환되어 다음 mover 가 가져갈 수 있다.
+ *
+ * 단일 slot SlottedHolder (Spot 비슷) + 처리 시간/상태 + popupRef + click raycast.
+ * 3D 는 pad(영역) + 작업대(가운데 box) — picking/QC 작업 자리의 인지성을 위해.
+ */
+
+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 { PickingStation3D } from './picking-station-3d.js'
+
+export type PickingStationStatus = 'idle' | 'processing' | 'busy'
+
+export interface PickingStationState extends State {
+  /** carrier 가 머무는 처리 시간 (ms). 0/미설정이면 즉시 idle 유지. */
+  processingTimeMs?: number
+  /** 현재 상태 (자동). */
+  status?: PickingStationStatus
+  /** click 시 invoke 할 Popup 컴포넌트 id. */
+  popupRef?: string
+  material3d?: Material3D
+}
+
+const SLOT_ID = 'station'
+
+const NATURE: ComponentNature = {
+  mutable: false,
+  resizable: true,
+  rotatable: true,
+  properties: [
+    { type: 'number', label: 'processing-time-ms', name: 'processingTimeMs' },
+    { type: 'select', label: 'status', name: 'status',
+      property: { options: ['idle', 'processing', 'busy'] } },
+    { type: 'id-input', label: 'popup-ref', name: 'popupRef',
+      property: { component: 'popup' } }
+  ],
+  help: 'scene/component/picking-station'
+}
+
+@sceneComponent('picking-station')
+export default class PickingStation extends CarrierHolder(Placeable(ContainerAbstract)) {
+  declare state: PickingStationState
+  declare _realObject?: PickingStation3D
+
+  static placement: PlacementArchetype = 'floor'
+  static align: Alignment = 'bottom'
+  static defaultDepth = (h: Heights) => h.operation - h.floor
+
+  get nature(): ComponentNature { return NATURE }
+  get anchors() { return [] }
+
+  // ── SlottedHolder duck-type (단일 slot 'station') ─────────────
+  slotIds(): ReadonlyArray<string> { return [SLOT_ID] }
+
+  hasCarrierAt(slotId: string): boolean {
+    return slotId === SLOT_ID &&
+      ((this as any).components ?? []).some((c: any) => c?.isCarriable)
+  }
+  canReceiveAt(slotId: string, _carrier?: Component): boolean {
+    return slotId === SLOT_ID && !this.hasCarrierAt(slotId)
+  }
+  occupiedSlotIds(): ReadonlyArray<string> {
+    return this.hasCarrierAt(SLOT_ID) ? [SLOT_ID] : []
+  }
+  emptySlotIds(): ReadonlyArray<string> {
+    return this.hasCarrierAt(SLOT_ID) ? [] : [SLOT_ID]
+  }
+  obtainCarrier(slotId: string): Component | null {
+    if (slotId !== SLOT_ID) return null
+    return ((this as any).components ?? []).find((c: any) => c?.isCarriable) ?? null
+  }
+
+  /**
+   * carrier 도착 — components + 3D 로 reparent (Spot 패턴). processingTimeMs > 0
+   * 이면 status='processing' 으로 전환했다가 timer 후 'idle' 로 복귀.
+   *
+   * 단순 setTimeout — frameClock 통합(view-mode/일시정지 동기) 은 추후.
+   */
+  async receiveAt(_slotId: string, carrier: Component, options?: any): Promise<void> {
+    ;(this as any).reparent?.(carrier, { ...(options ?? {}), animated: false })
+    const procMs = this.state.processingTimeMs ?? 0
+    if (procMs > 0) {
+      this.setState({ status: 'processing' as PickingStationStatus })
+      setTimeout(() => {
+        if ((this.state.status as PickingStationStatus) === 'processing') {
+          this.setState({ status: 'idle' as PickingStationStatus })
+        }
+      }, procMs)
+    }
+  }
+
+  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)
+  }
+
+  slotTargetAt(slotId: string): SlotTarget { return new SlotTarget(this as any, slotId) }
+  getSlotAttachObject3d(_slotId: string): any {
+    return (this as any)._realObject?.getAttachFrame?.()
+  }
+
+  /** carrier 를 작업대(table) 상단에 안착. */
+  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 } }
+  }
+
+  // ── 2D render ───────────────────────────────────────────────
+  render(ctx: CanvasRenderingContext2D) {
+    const { left = 0, top = 0, width = 100, height = 100 } = this.state
+    const fillStyle = (this.state.fillStyle as string) || '#5a8ab8'
+    const strokeStyle = (this.state.strokeStyle as string) || '#3d6a8f'
+    const status = (this.state.status ?? 'idle') as PickingStationStatus
+
+    // pad
+    ctx.save()
+    ctx.fillStyle = fillStyle
+    ctx.globalAlpha = 0.15
+    ctx.fillRect(left, top, width, height)
+    ctx.restore()
+
+    // outline
+    ctx.save()
+    ctx.strokeStyle = strokeStyle
+    ctx.lineWidth = 1.5
+    ctx.strokeRect(left + 0.75, top + 0.75, width - 1.5, height - 1.5)
+    ctx.restore()
+
+    // 작업대 (가운데 작은 사각)
+    const tw = width * 0.55, th = height * 0.45
+    const tx = left + (width - tw) / 2
+    const ty = top + (height - th) / 2
+    ctx.save()
+    ctx.fillStyle = strokeStyle
+    ctx.globalAlpha = 0.35
+    ctx.fillRect(tx, ty, tw, th)
+    ctx.restore()
+
+    // 상태
+    ctx.save()
+    const fontSize = Math.min(width, height) * 0.16
+    ctx.fillStyle = '#222'
+    ctx.font = `bold ${fontSize}px sans-serif`
+    ctx.textAlign = 'center'
+    ctx.textBaseline = 'middle'
+    ctx.fillText(status.toUpperCase(), left + width / 2, top + height / 2)
+    ctx.restore()
+  }
+
+  // ── Popup + click ────────────────────────────────────────────
+  get eventMap() {
+    return { '(self)': { '(self)': { click: this._onStationClick } } }
+  }
+
+  private _onStationClick = (mouseEvent: MouseEvent) => {
+    if (!(this as any).app?.isViewMode) return
+    const hit = this._raycastStationHit(mouseEvent)
+    if (!hit) return
+    this._invokePopup()
+  }
+
+  private _invokePopup(): void {
+    const popupRefId = this.state.popupRef
+    if (!popupRefId) return
+    const popupComp: any = (this as any).root?.findById?.(popupRefId)
+    if (!popupComp || typeof popupComp.openPopup !== 'function') return
+    const anchor = this.slotTargetAt(SLOT_ID)
+    const carrier = this.obtainCarrier(SLOT_ID)
+    popupComp.openPopup({
+      componentId: (this.state as any).id,
+      status: this.state.status ?? 'idle',
+      processingTimeMs: this.state.processingTimeMs,
+      currentCarrierId: (carrier as any)?.state?.id ?? null
+    }, { anchor })
+  }
+
+  private _raycastStationHit(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
+    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
+  }
+
+  buildRealObject(): RealObject | undefined {
+    return new PickingStation3D(this)
+  }
+}
+
+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/rack-capability.ts

@@ -0,0 +1,26 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ *
+ * Rack 적재 mover 능력 판정 — *_순수 로직_* (things-scene 무관). storage-rack 의
+ * canAcceptFromMover 가 위임. mocha 환경에서 StorageRack 직접 import 불가하므로
+ * 판정 로직만 분리해 단위 검증.
+ */
+
+/**
+ * rack 이 *_이 mover 의 toolType_* 을 선반 적재용으로 수용하는가.
+ *
+ * rack 선반 적재는 높이 도달 mover (crane / stacker / forklift) 의 몫. 평탄 데크
+ * 차량(agv-deck)은 바닥 운반 전용 — 선반 직접 적재 불가 → 거부. 거부된 mover 는
+ * transfer planner 가 자동으로 in-port 경유(환승)를 택하게 만든다.
+ *
+ * @param moverToolType  적재하려는 mover 의 toolType (undefined 면 능력 미상 → 허용)
+ * @param blockedTools   거부 toolType 목록 (default ['agv-deck'])
+ */
+export function rackAcceptsMoverTool(
+  moverToolType: string | undefined | null,
+  blockedTools: readonly string[] = ['agv-deck']
+): boolean {
+  if (moverToolType == null) return true
+  if (!Array.isArray(blockedTools)) return true
+  return !blockedTools.includes(moverToolType)
+}

package/src/rack-grid.ts

@@ -39,6 +39,7 @@ import {
   CarrierHolder,
   Placeable,
   SlotTarget,
+  componentBoundingBox,
   type AttachFrame,
   type Alignment,
   type Heights,
@@ -278,14 +279,8 @@ export default class RackGrid
     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)
   }
 
   static placement: PlacementArchetype = 'floor'