@operato/scene-storage 10.0.0-beta.28 → 10.0.0-beta.31

package/dist/templates/index.js

@@ -1,6 +1,6 @@
 /*
  * things-scene catalog templates for the storage domain — pallet/box/parcel
- * variants, ASRS rack/crane, and the virtual `spot` placement marker.
+ * variants, ASRS rack/crane, ASRS aisle composite, and the virtual `spot` placement marker.
  */
 import spot from './spot.js';
 const pallet = new URL('../../icons/pallet.png', import.meta.url).href;
@@ -108,6 +108,48 @@ export default [
             carriageHeight: 100
         }
     },
+    {
+        type: 'group',
+        description: 'AS/RS aisle — 4-level rack pair + stacker crane',
+        group: 'storage',
+        icon: asrsRack,
+        model: {
+            type: 'group',
+            top: 100,
+            left: 100,
+            width: 840,
+            height: 220,
+            components: [
+                {
+                    type: 'asrs-rack',
+                    top: 100,
+                    left: 100,
+                    width: 800,
+                    height: 80,
+                    levels: 4,
+                    bays: 8
+                },
+                {
+                    type: 'asrs-crane',
+                    top: 140,
+                    left: 420,
+                    width: 60,
+                    height: 220,
+                    status: 'idle',
+                    carriageHeight: 0
+                },
+                {
+                    type: 'asrs-rack',
+                    top: 320,
+                    left: 100,
+                    width: 800,
+                    height: 80,
+                    levels: 4,
+                    bays: 8
+                }
+            ]
+        }
+    },
     spot
 ];
 //# sourceMappingURL=index.js.map

package/dist/templates/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/templates/index.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * things-scene catalog templates for the storage domain — pallet/box/parcel\n * variants, ASRS rack/crane, and the virtual `spot` placement marker.\n */\nimport spot from './spot.js'\nconst pallet = new URL('../../icons/pallet.png', import.meta.url).href\nconst box = new URL('../../icons/box.png', import.meta.url).href\nconst parcel = new URL('../../icons/parcel.png', import.meta.url).href\nconst asrsRack = new URL('../../icons/asrs-rack.png', import.meta.url).href\nconst asrsCrane = new URL('../../icons/asrs-crane.png', import.meta.url).href\n\nexport default [\n  {\n    type: 'pallet',\n    description: 'wood pallet (EUR / EPAL)',\n    group: 'storage',\n    icon: pallet,\n    model: {\n      type: 'pallet',\n      top: 100,\n      left: 100,\n      width: 80,\n      height: 80,\n      material: 'wood'\n    }\n  },\n  {\n    type: 'pallet',\n    description: 'plastic pallet',\n    group: 'storage',\n    icon: pallet,\n    model: {\n      type: 'pallet',\n      top: 100,\n      left: 250,\n      width: 80,\n      height: 80,\n      material: 'plastic'\n    }\n  },\n  {\n    type: 'box',\n    description: 'wood crate',\n    group: 'storage',\n    icon: box,\n    model: {\n      type: 'box',\n      top: 100,\n      left: 400,\n      width: 80,\n      height: 80,\n      material: 'wood'\n    }\n  },\n  {\n    type: 'box',\n    description: 'plastic tote',\n    group: 'storage',\n    icon: box,\n    model: {\n      type: 'box',\n      top: 100,\n      left: 520,\n      width: 80,\n      height: 80,\n      material: 'plastic'\n    }\n  },\n  {\n    type: 'parcel',\n    description: 'cardboard parcel',\n    group: 'storage',\n    icon: parcel,\n    model: {\n      type: 'parcel',\n      top: 100,\n      left: 640,\n      width: 60,\n      height: 80\n    }\n  },\n  {\n    type: 'asrs-rack',\n    description: 'AS/RS storage rack (multi-level)',\n    group: 'storage',\n    icon: asrsRack,\n    model: {\n      type: 'asrs-rack',\n      top: 300,\n      left: 100,\n      width: 800,\n      height: 200,\n      levels: 4,\n      bays: 5\n    }\n  },\n  {\n    type: 'asrs-crane',\n    description: 'AS/RS stacker crane',\n    group: 'storage',\n    icon: asrsCrane,\n    model: {\n      type: 'asrs-crane',\n      top: 550,\n      left: 400,\n      width: 100,\n      height: 200,\n      status: 'idle',\n      carriageHeight: 100\n    }\n  },\n  spot\n]\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/templates/index.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * things-scene catalog templates for the storage domain — pallet/box/parcel\n * variants, ASRS rack/crane, ASRS aisle composite, and the virtual `spot` placement marker.\n */\nimport spot from './spot.js'\nconst pallet = new URL('../../icons/pallet.png', import.meta.url).href\nconst box = new URL('../../icons/box.png', import.meta.url).href\nconst parcel = new URL('../../icons/parcel.png', import.meta.url).href\nconst asrsRack = new URL('../../icons/asrs-rack.png', import.meta.url).href\nconst asrsCrane = new URL('../../icons/asrs-crane.png', import.meta.url).href\n\nexport default [\n  {\n    type: 'pallet',\n    description: 'wood pallet (EUR / EPAL)',\n    group: 'storage',\n    icon: pallet,\n    model: {\n      type: 'pallet',\n      top: 100,\n      left: 100,\n      width: 80,\n      height: 80,\n      material: 'wood'\n    }\n  },\n  {\n    type: 'pallet',\n    description: 'plastic pallet',\n    group: 'storage',\n    icon: pallet,\n    model: {\n      type: 'pallet',\n      top: 100,\n      left: 250,\n      width: 80,\n      height: 80,\n      material: 'plastic'\n    }\n  },\n  {\n    type: 'box',\n    description: 'wood crate',\n    group: 'storage',\n    icon: box,\n    model: {\n      type: 'box',\n      top: 100,\n      left: 400,\n      width: 80,\n      height: 80,\n      material: 'wood'\n    }\n  },\n  {\n    type: 'box',\n    description: 'plastic tote',\n    group: 'storage',\n    icon: box,\n    model: {\n      type: 'box',\n      top: 100,\n      left: 520,\n      width: 80,\n      height: 80,\n      material: 'plastic'\n    }\n  },\n  {\n    type: 'parcel',\n    description: 'cardboard parcel',\n    group: 'storage',\n    icon: parcel,\n    model: {\n      type: 'parcel',\n      top: 100,\n      left: 640,\n      width: 60,\n      height: 80\n    }\n  },\n  {\n    type: 'asrs-rack',\n    description: 'AS/RS storage rack (multi-level)',\n    group: 'storage',\n    icon: asrsRack,\n    model: {\n      type: 'asrs-rack',\n      top: 300,\n      left: 100,\n      width: 800,\n      height: 200,\n      levels: 4,\n      bays: 5\n    }\n  },\n  {\n    type: 'asrs-crane',\n    description: 'AS/RS stacker crane',\n    group: 'storage',\n    icon: asrsCrane,\n    model: {\n      type: 'asrs-crane',\n      top: 550,\n      left: 400,\n      width: 100,\n      height: 200,\n      status: 'idle',\n      carriageHeight: 100\n    }\n  },\n  {\n    type: 'group',\n    description: 'AS/RS aisle — 4-level rack pair + stacker crane',\n    group: 'storage',\n    icon: asrsRack,\n    model: {\n      type: 'group',\n      top: 100,\n      left: 100,\n      width: 840,\n      height: 220,\n      components: [\n        {\n          type: 'asrs-rack',\n          top: 100,\n          left: 100,\n          width: 800,\n          height: 80,\n          levels: 4,\n          bays: 8\n        },\n        {\n          type: 'asrs-crane',\n          top: 140,\n          left: 420,\n          width: 60,\n          height: 220,\n          status: 'idle',\n          carriageHeight: 0\n        },\n        {\n          type: 'asrs-rack',\n          top: 320,\n          left: 100,\n          width: 800,\n          height: 80,\n          levels: 4,\n          bays: 8\n        }\n      ]\n    }\n  },\n  spot\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.28",
+  "version": "10.0.0-beta.31",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -21,24 +21,29 @@
     "build": "tsc",
     "prepublishOnly": "tsc",
     "lint": "eslint src/ && prettier \"src/**/*.ts\" --check",
-    "format": "eslint src/ --fix && prettier \"src/**/*.ts\" --write"
+    "format": "eslint src/ --fix && prettier \"src/**/*.ts\" --write",
+    "test": "mocha --require should --require ./test/setup.js --node-option import=tsx \"test/**/test-*.ts\""
   },
   "dependencies": {
     "@hatiolab/things-scene": "^10.0.0-beta.1",
-    "@operato/scene-base": "^10.0.0-beta.24",
+    "@operato/scene-base": "^10.0.0-beta.31",
     "three": "^0.183.0"
   },
   "devDependencies": {
     "@hatiolab/prettier-config": "^1.0.0",
+    "@types/mocha": "^10.0.0",
     "@types/three": "^0.183.0",
     "@typescript-eslint/eslint-plugin": "^8.0.0",
     "@typescript-eslint/parser": "^8.0.0",
     "eslint": "^9.18.0",
     "eslint-config-prettier": "^10.0.1",
+    "mocha": "^11.0.0",
     "prettier": "^3.2.5",
+    "should": "^13.2.3",
     "tslib": "^2.3.1",
+    "tsx": "^4.21.0",
     "typescript": "^5.0.4"
   },
   "prettier": "@hatiolab/prettier-config",
-  "gitHead": "40634f9afc681d852d6028a329cedb51cc4fb94f"
+  "gitHead": "fdafbd04fd083a43690be937230c7d96a3ee5da3"
 }

package/src/asrs-crane-3d.ts

@@ -167,6 +167,26 @@ export class AsrsCrane3D extends RealObjectGroup {
     // Place lamp near the corner of the base, away from the mast
     lampMesh.position.set(width * 0.3, baseY + railH + baseH + lampH / 2, height * 0.3)
     this.object3d.add(lampMesh)
+
+    // ── Carriage frame (invisible anchor for carrier attach) ──────────
+    // Placed at the top of the shuttle, where cargo rests.
+    this._carriageFrame = new THREE.Object3D()
+    this._carriageFrame.name = 'crane-carriage-tcp'
+    this._carriageFrame.position.set(0, carriageY - carriageH / 2 - shuttleH, 0)
+    this.object3d.add(this._carriageFrame)
+  }
+
+  /** Sub-frame where carriers attach during transport (fork tool-centre-point). */
+  private _carriageFrame?: THREE.Object3D
+
+  /**
+   * Return the carriage TCP anchor. Carriers attached to this frame will
+   * follow carriage movement as `carriageHeight` changes and the crane rebuilds.
+   *
+   * Callers should re-fetch this after any state change that triggers rebuild.
+   */
+  getCarriageFrame(): THREE.Object3D | undefined {
+    return this._carriageFrame
   }
 
   updateDimension() {}

package/src/asrs-crane.ts

@@ -1,13 +1,18 @@
 /*
  * Copyright © HatioLab Inc. All rights reserved.
  */
-import { Component, ComponentNature, RealObject, RectPath, Shape, sceneComponent } from '@hatiolab/things-scene'
+import { Component, ComponentNature, ContainerAbstract, ContainerCapacity, RealObject, sceneComponent } from '@hatiolab/things-scene'
+import type { SlotDef, State, Material3D } from '@hatiolab/things-scene'
 import {
+  CarrierHolder,
   Legendable,
+  Mover,
   Placeable,
+  type AttachFrame,
   type Alignment,
   type Heights,
   type LegendBinding,
+  type MoveOptions,
   type PlacementArchetype
 } from '@operato/scene-base'
 
@@ -25,6 +30,18 @@ import { AsrsCrane3D } from './asrs-crane-3d.js'
  */
 export type AsrsCraneStatus = 'idle' | 'moving' | 'loading' | 'unloading' | 'error'
 
+/** AsrsCrane 컴포넌트 state */
+export interface AsrsCraneState extends State {
+  // ── 운영 상태 ──
+  status?: AsrsCraneStatus
+
+  // ── 액추에이터 ──
+  carriageHeight?: number
+
+  // ── 3D 재질 ──
+  material3d?: Material3D
+}
+
 const BODY_LEGEND = {
   idle: '#888',
   moving: '#aabbcc',
@@ -72,27 +89,40 @@ const NATURE: ComponentNature = {
   help: 'scene/component/asrs-crane'
 }
 
-const Base = Legendable(Placeable(RectPath(Shape))) as unknown as typeof Component
-
+// Mixin chain: Mover → CarrierHolder → ContainerCapacity → Legendable → Placeable → ContainerAbstract
+//
+//   Mover:             pick / place / pickAndPlace / moveTo / engage primitives
+//   CarrierHolder:     attachPointFor() — where the carrier sits on the crane (carriage fork)
+//   ContainerCapacity: receive() / dispatch() / canReceive() / slots — slot tracking +
+//                      TRANSFER_SLOT_KEY bookkeeping during transit
+//   Legendable:        status → bodyColor / lampEmissive colour mapping
+//   Placeable:         floor-archetype 3D positioning
+//   ContainerAbstract: child management — carrier becomes a child while in transit
+//
+// Note: ContainerAbstract replaces Shape. The 2D outline is drawn manually in
+// render() below (a simple top-down rectangle), matching the old Shape output
+// without the Shape base-class overhead.
 /**
  * AsrsCrane — the stacker / retrieval crane that runs in the aisle of an
  * AS/RS, moving cargo between the load port and the rack cells.
  *
  * Structure: a tall vertical mast that translates along a floor + ceiling
  * rail (the aisle), with a carriage that slides up/down the mast carrying a
- * shuttle / forks. The whole assembly's footprint is narrow (mast width)
- * but its visual height is full ceiling — by far the tallest single
- * component in a typical scene.
+ * shuttle / forks.
  *
- * Currently Shape-based (no children). The carrier the crane is *currently
- * carrying* is best modeled via data binding (a `currentCarrier` data field
- * on the crane → looked up to a Pallet/Box elsewhere in the scene), as in
- * fmsim's CarrierManager pattern. Adding the carrier as a child would mix
- * static placement with the dynamic data-driven flow we deliberately keep
- * separate (see Phase A4 commit notes).
+ * **Monitoring mode**: crane status is driven by data binding
+ * (`state.status`, `state.carriageHeight`). The carrier is referenced
+ * via data binding — it is NOT a child of the crane in monitoring mode.
+ *
+ * **Simulation mode**: call `crane.pick(carrier)` / `crane.place(carrier, rackCell)`
+ * (or `crane.pickAndPlace(carrier, rackCell)`). Mover handles navigation +
+ * engage + reparent. During transit the carrier IS a child of the crane.
  */
 @sceneComponent('asrs-crane')
-export default class AsrsCrane extends Base {
+export default class AsrsCrane extends Mover(CarrierHolder(ContainerCapacity(Legendable(Placeable(ContainerAbstract))))) {
+  declare state: AsrsCraneState
+  declare _realObject?: AsrsCrane3D
+
   static legends: Record<string, LegendBinding> = {
     bodyColor: { from: 'status', legend: BODY_LEGEND },
     lampEmissive: { from: 'status', legend: LAMP_EMISSIVE_LEGEND }
@@ -102,6 +132,9 @@ export default class AsrsCrane extends Base {
   static align: Alignment = 'bottom'
   static defaultDepth = (h: Heights) => h.ceiling - h.floor
 
+  /** Yaw offset: crane model is drawn with the aisle axis along X (right = forward). */
+  static yawOffset = 0
+
   get nature() {
     return NATURE
   }
@@ -110,21 +143,124 @@ export default class AsrsCrane extends Base {
     return []
   }
 
+  // ── ContainerCapacity ─────────────────────────────────────────────────────
+
+  /** Stacker crane carries at most one load at a time on its forks. */
+  get slots(): SlotDef[] {
+    return [{ id: 'forks', maxCount: 1 }]
+  }
+
+  // ── CarrierHolder — attach frame (carriage fork position) ─────────────────
+
+  /**
+   * Return the 3D attach frame on the crane's carriage (fork tip).
+   * Carriers are attached here while the crane is in transit (pick phase).
+   *
+   * The AsrsCrane3D exposes `getCarriageFrame()` — a sub-Object3D that
+   * tracks the carriage height and sits at the fork TCP. If the 3D object
+   * isn't built yet (e.g. before scene initialization), fall back to the
+   * crane's own object3d centre.
+   */
+  attachPointFor(carrier: Component): AttachFrame | null {
+    const ro = this._realObject
+    const frame = ro?.getCarriageFrame?.()
+    if (frame) {
+      const carrierDepth = resolveCarrierDepth(carrier)
+      return { attach: frame, localPosition: { x: 0, y: carrierDepth / 2, z: 0 } }
+    }
+    const root = this._realObject?.object3d
+    if (!root) return null
+    return { attach: root }
+  }
+
+  // ── Mover overrides ───────────────────────────────────────────────────────
+
+  /**
+   * Domain-specific actuation between arrival and reparent.
+   *
+   * Simulation sequence for PICK:
+   *   1. Mover.pick() navigates crane to carrier position (moveTo).
+   *   2. engage('pick') → snap carriage height + status 'loading'.
+   *   3. Carrier is reparented to crane (becomes child).
+   *
+   * For now: set status and snap carriage height. A full ASRS simulation
+   * would tween the carriageHeight here (animate AsrsCrane3D).
+   *
+   * Status lifecycle:
+   *   idle → (moveTo running) → engage fires → loading/unloading → (reparent) → idle
+   * The 'moving' state is not set from Mover.moveTo() because TypeScript
+   * can't call super.moveTo() on an `: any`-typed mixin. WCS data binding
+   * sets 'moving' in monitoring mode; override pick()/place() to set it
+   * in full simulation environments.
+   */
+  async engage(
+    target: Component,
+    kind: 'pick' | 'place',
+    _options: MoveOptions = {}
+  ): Promise<void> {
+    if (kind === 'pick') {
+      this.setState({ status: 'loading' as AsrsCraneStatus })
+      const carrierY = resolveCarrierCenterY(target)
+      if (carrierY !== null) {
+        this.setState({ carriageHeight: carrierY })
+      }
+    } else {
+      this.setState({ status: 'unloading' as AsrsCraneStatus })
+    }
+    // In a full simulation: await carriage-motion tween here.
+  }
+
+  // ── Domain aliases ────────────────────────────────────────────────────────
+
+  /** Fetch a carrier from a rack cell (semantically = pick). */
+  fetch(carrier: Component, options?: MoveOptions): Promise<void> {
+    return this.pick(carrier, options)
+  }
+
+  /** Deposit a carrier into a rack cell (semantically = place). */
+  deposit(carrier: Component, cell: Component, options?: MoveOptions): Promise<void> {
+    return this.place(carrier, cell, options)
+  }
+
+  // ── 2D rendering ─────────────────────────────────────────────────────────
+
   /**
    * 2D — top-down rectangle showing the crane's footprint along the aisle.
    * The crane is much taller than wide, so the 2D mark is small.
    */
   render(ctx: CanvasRenderingContext2D) {
     const { width, height, left, top } = this.state
+    const fillColor = (this.state.bodyColor as string) || '#888'
+    ctx.save()
+    ctx.fillStyle = fillColor
     ctx.beginPath()
     ctx.rect(left, top, width, height)
+    ctx.fill()
+    ctx.restore()
   }
 
-  get fillStyle() {
-    return (this.state.bodyColor as string) || '#888'
-  }
+  // ── 3D ───────────────────────────────────────────────────────────────────
 
   buildRealObject(): RealObject | undefined {
-    return new AsrsCrane3D(this as any)
+    return new AsrsCrane3D(this)
   }
 }
+
+function resolveCarrierDepth(c: Component): number {
+  const eff = (c as any)._realObject?.effectiveDepth
+  if (typeof eff === 'number' && Number.isFinite(eff)) return eff
+  return numOr((c as any)?.state?.depth, 0)
+}
+
+function resolveCarrierCenterY(c: Component): number | null {
+  const pos = (c as any).state
+  if (!pos) return null
+  // zPos is the 3D Y center of a Placeable component in things-scene
+  const zPos = numOr(pos.zPos, NaN)
+  if (!Number.isNaN(zPos)) return zPos
+  return null
+}
+
+function numOr(v: unknown, dflt: number): number {
+  return typeof v === 'number' && Number.isFinite(v) ? v : dflt
+}

package/src/asrs-rack.ts

@@ -2,8 +2,13 @@
  * Copyright © HatioLab Inc. All rights reserved.
  */
 import { Component, ComponentNature, ContainerAbstract, RealObject, sceneComponent } from '@hatiolab/things-scene'
+import type { State, Material3D } from '@hatiolab/things-scene'
 import {
+  CellContainer,
+  CellMap,
+  CarrierHolder,
   Placeable,
+  type AttachFrame,
   type Alignment,
   type Heights,
   type PlacementArchetype
@@ -11,6 +16,19 @@ import {
 
 import { AsrsRack3D } from './asrs-rack-3d.js'
 
+/** AsrsRack 컴포넌트 state */
+export interface AsrsRackState extends State {
+  // ── 토폴로지 ──
+  bays?: number
+  levels?: number
+
+  // ── 디버그 ──
+  debugCells?: boolean
+
+  // ── 3D 재질 ──
+  material3d?: Material3D
+}
+
 const NATURE: ComponentNature = {
   mutable: false,
   resizable: true,
@@ -35,35 +53,33 @@ const NATURE: ComponentNature = {
 // `ContainerAbstract` (not `Container`) — Container = MixinHTMLElement(ContainerAbstract),
 // which forces `isHTMLElement(): true` and trips the 3D pipeline's
 // addObject DOM-skip gate. ASRS rack lives only in the 3D scene graph.
-const Base = Placeable(ContainerAbstract) as unknown as typeof Component
-
+//
+// Mixin chain: CellContainer → CarrierHolder → Placeable → ContainerAbstract
+//   CellContainer: cell topology (cellMap, cell(), findAvailableCell(), occupiedCellIds())
+//   CarrierHolder: 3D attach-point protocol (attachPointFor, containable gates)
+//   Placeable:     floor-archetype positioning
+//   ContainerAbstract: child component management
 /**
  * AsrsRack — a multi-level high-bay storage rack, the structural backbone of
  * an AS/RS (Automated Storage / Retrieval System).
  *
  * `levels` × `bays` cells form a vertical grid. Each cell holds one logistics
  * package (Pallet / Box / Parcel). A pair of AsrsRacks separated by an aisle
- * (where an AsrsCrane runs) is the typical AS/RS configuration; v1 ships the
- * single-rack unit and lets users compose multi-rack systems by placing them
- * side by side. A future `AsrsAisle` composite may bundle the pair + crane.
+ * (where an AsrsCrane runs) is the typical AS/RS configuration.
  *
- * **Placement**: `floor` archetype, full ceiling depth by default — AS/RS
- * racks typically span floor to ceiling, with levels sized to fit the tallest
- * pallet load. Users can shorten via explicit `state.depth` for warehouses
- * with smaller envelopes.
+ * **Monitoring mode** (default): pallets/boxes are direct children of the rack,
+ * placed by the WCS data binding. No RackCell children are created.
  *
- * **Container-based**. Cells host stored cargo as children — each child's
- * left/top within the rack's bounds determines which cell it occupies. The
- * stacking pass in `Placeable.computeDefaultZPos` ensures each child cargo's
- * z lands on the rack's overall bottom (parent.zPos + parent.depth = ceiling),
- * which isn't quite cell-level resolution — true per-cell z positioning is
- * a v3 concern (the cargo would need to know which cell-row it's in).
+ * **Simulation mode**: call `rack._buildCells()` after placing the rack on the
+ * scene. This creates RackCell children at the correct 3D positions. The
+ * AsrsCrane then navigates to individual RackCells for pick-and-place.
  *
- * No Legendable for v1 — racks are passive structures; their per-cell
- * occupancy state is implicit in the children, not a status flag.
+ * **Placement**: `floor` archetype, full ceiling depth by default.
  */
 @sceneComponent('asrs-rack')
-export default class AsrsRack extends Base {
+export default class AsrsRack extends CellContainer(CarrierHolder(Placeable(ContainerAbstract))) {
+  declare state: AsrsRackState
+
   static placement: PlacementArchetype = 'floor'
   static align: Alignment = 'bottom'
   static defaultDepth = (h: Heights) => h.ceiling - h.floor
@@ -76,13 +92,110 @@ export default class AsrsRack extends Base {
     return []
   }
 
-  /** Operation cargo (pallets / boxes / parcels) goes in the rack's cells. */
-  containable(component: Component) {
+  // ── CellContainer ─────────────────────────────────────────────────────────
+
+  /**
+   * Derive the cell topology from the rack's current dimensions and bay/level
+   * counts. The CellMap is rebuilt fresh each time (state changes trigger
+   * re-reads via things-scene's invalidation pipeline).
+   *
+   * Coordinate convention (matches things-scene 3D):
+   *   X = bay axis  (left → right)
+   *   Y = level axis (floor → ceiling, the rack's `depth` state property)
+   *   Z = row axis   (front → back, the rack's `height` state property)
+   */
+  get cellMap(): CellMap {
+    const bays = Math.max(1, Math.floor((this.state.bays as number) || 5))
+    const levels = Math.max(1, Math.floor((this.state.levels as number) || 4))
+    const width = (this.state.width as number) || 1000
+    const rackDepth = (this.state.depth as number) || 3000   // Y: floor→ceiling
+    const rackHeight = (this.state.height as number) || 600  // Z: front→back
+
+    return CellMap.grid({
+      bays,
+      rows: 1,
+      levels,
+      bayWidth: width / bays,
+      rowDepth: rackHeight,
+      levelHeight: rackDepth / levels
+    })
+  }
+
+  /**
+   * Create RackCell child components for each cell in the CellMap.
+   *
+   * Called explicitly to enter simulation mode — monitoring-mode racks
+   * never call this (pallets are direct children, no explicit cells).
+   *
+   * Idempotent: removes existing rack-cell children first.
+   */
+  _buildCells(): void {
+    // Remove existing rack-cell children
+    const existing = (this.components as Component[] | undefined) ?? []
+    for (const child of [...existing]) {
+      if ((child as any).state?.type === 'rack-cell') {
+        this.removeComponent(child)
+      }
+    }
+
+    // Create a RackCell for each cell in the map
+    const RackCellClass = (Component as any).register('rack-cell') as (new (...args: any[]) => Component) | undefined
+    if (!RackCellClass) {
+      console.warn('AsrsRack._buildCells: rack-cell type not registered. Import rack-cell.ts first.')
+      return
+    }
+
+    const context = this._app
+    for (const cell of this.cellMap.cells) {
+      const model = {
+        type: 'rack-cell',
+        cellId: cell.id,
+        width: cell.size.width,
+        height: cell.size.depth,  // 2D height = 3D Z depth
+        depth: cell.size.height   // 3D Y = level height
+      }
+      const rackCell = new RackCellClass(model, context)
+      this.addComponent(rackCell)
+    }
+  }
+
+  // ── Container gates ───────────────────────────────────────────────────────
+
+  /**
+   * Allow:
+   *   - Carriable components (pallets, boxes, parcels) — direct children in monitoring mode.
+   *   - RackCell — created by _buildCells() in simulation mode.
+   *
+   * Block:
+   *   - Everything else (sensors, labels, etc. can be siblings of the rack, not children).
+   */
+  containable(component: Component): boolean {
+    if ((component as any).state?.type === 'rack-cell') return true
     const archetype = (component.constructor as any).placement
     if (archetype === 'operation') return true
-    return component.isDescendible(this as any)
+    return component.isDescendible(this)
+  }
+
+  // ── CarrierHolder — attach frame for direct carrier children ─────────────
+
+  /**
+   * Attach frame for carriers that are DIRECT children of the rack
+   * (monitoring mode, where pallets go directly into the rack without
+   * explicit RackCell components).
+   *
+   * In simulation mode, carriers become children of their RackCell,
+   * and each RackCell provides its own attachPointFor(). So this method
+   * is only invoked on direct-child carriers in monitoring mode — it
+   * returns the rack's own object3d as the attach frame (default behavior).
+   */
+  attachPointFor(_carrier: Component): AttachFrame | null {
+    const root = this._realObject?.object3d
+    if (!root) return null
+    return { attach: root }
   }
 
+  // ── 2D rendering ─────────────────────────────────────────────────────────
+
   /**
    * 2D — top-down rectangle showing the rack footprint, with subdivisions
    * suggesting the bay layout (lines parallel to the aisle).
@@ -106,7 +219,9 @@ export default class AsrsRack extends Base {
     return '#a0a0a8'
   }
 
+  // ── 3D ───────────────────────────────────────────────────────────────────
+
   buildRealObject(): RealObject | undefined {
-    return new AsrsRack3D(this as any)
+    return new AsrsRack3D(this)
   }
 }

package/src/box.ts

@@ -1,7 +1,8 @@
 /*
  * Copyright © HatioLab Inc. All rights reserved.
  */
-import { Component, ComponentNature, RealObject, RectPath, Shape, sceneComponent } from '@hatiolab/things-scene'
+import { ComponentNature, RealObject, RectPath, Shape, sceneComponent } from '@hatiolab/things-scene'
+import type { State, Material3D } from '@hatiolab/things-scene'
 import {
   Carriable,
   Legendable,
@@ -26,6 +27,15 @@ import { Box3D } from './box-3d.js'
  */
 export type BoxMaterial = 'wood' | 'plastic'
 
+/** Box 컴포넌트 state */
+export interface BoxState extends State {
+  // ── 외관 ──
+  material?: BoxMaterial
+
+  // ── 3D 재질 ──
+  material3d?: Material3D
+}
+
 const BODY_LEGEND = {
   wood: '#a87644',
   plastic: '#3a5078',
@@ -54,8 +64,6 @@ const NATURE: ComponentNature = {
 
 // Carriable: a box can be a child of any CarrierHolder (Pallet for stacking,
 // AGV deck, robot-arm gripper, Spot for staging).
-const Base = Carriable(Legendable(Placeable(RectPath(Shape)))) as unknown as typeof Component
-
 /**
  * Box — a generic stackable container for goods. Wood crate or plastic tote
  * variants distinguished by `material` prop.
@@ -65,7 +73,9 @@ const Base = Carriable(Legendable(Placeable(RectPath(Shape)))) as unknown as typ
  * scene-tree). If a future use case needs nested boxes, extend Container.
  */
 @sceneComponent('box')
-export default class Box extends Base {
+export default class Box extends Carriable(Legendable(Placeable(RectPath(Shape)))) {
+  declare state: BoxState
+
   static legends: Record<string, LegendBinding> = {
     bodyColor: { from: 'material', legend: BODY_LEGEND }
   }
@@ -94,6 +104,6 @@ export default class Box extends Base {
   }
 
   buildRealObject(): RealObject | undefined {
-    return new Box3D(this as any)
+    return new Box3D(this)
   }
 }

package/src/generic-container-3d.ts

@@ -31,7 +31,7 @@ export class GenericContainer3D extends RealObjectGLTF {
   }
 
   private _applyActuators() {
-    const state = this.component.state as any
+    const state = this.component.state
     applyActuators(this, state.actuators, state.actuatorValues)
   }