@operato/scene-storage 10.0.0-beta.22

package/dist/templates/index.js.map

@@ -0,0 +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 palletWood = new URL('../../icons/pallet-wood.png', import.meta.url).href\nconst palletPlastic = new URL('../../icons/pallet-plastic.png', import.meta.url).href\nconst boxWood = new URL('../../icons/box-wood.png', import.meta.url).href\nconst boxPlastic = new URL('../../icons/box-plastic.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: palletWood,\n    model: {\n      type: 'pallet',\n      top: 100,\n      left: 100,\n      width: 120,\n      height: 80,\n      material: 'wood'\n    }\n  },\n  {\n    type: 'pallet',\n    description: 'plastic pallet',\n    group: 'storage',\n    icon: palletPlastic,\n    model: {\n      type: 'pallet',\n      top: 100,\n      left: 250,\n      width: 120,\n      height: 80,\n      material: 'plastic'\n    }\n  },\n  {\n    type: 'box',\n    description: 'wood crate',\n    group: 'storage',\n    icon: boxWood,\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: boxPlastic,\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: 90\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"]}

package/dist/templates/spot.d.ts

@@ -0,0 +1,24 @@
+declare const _default: {
+    type: string;
+    description: string;
+    group: string;
+    icon: string;
+    model: {
+        type: string;
+        top: number;
+        left: number;
+        width: number;
+        height: number;
+        text: string;
+        fillStyle: string;
+        strokeStyle: string;
+        lineWidth: number;
+        lineDash: string;
+        alpha: number;
+        fontColor: string;
+        fontSize: number;
+        fontFamily: string;
+        bold: boolean;
+    };
+};
+export default _default;

package/dist/templates/spot.js

@@ -0,0 +1,26 @@
+// Reuse parcel.png as a placeholder icon until a dedicated spot icon is drawn.
+const icon = new URL('../../icons/parcel.png', import.meta.url).href;
+export default {
+    type: 'spot',
+    description: 'virtual pickup / drop zone — translucent floor pad that accepts carrier components as children',
+    group: 'storage' /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|3D|facility|storage|conveyance|transport|manufacturing|form|etc */,
+    icon,
+    model: {
+        type: 'spot',
+        top: 200,
+        left: 400,
+        width: 80,
+        height: 80,
+        text: 'SPOT_A',
+        fillStyle: '#3a8fbd',
+        strokeStyle: '#3a8fbd',
+        lineWidth: 1,
+        lineDash: 'dash',
+        alpha: 1,
+        fontColor: '#3a8fbd',
+        fontSize: 16,
+        fontFamily: 'sans-serif',
+        bold: true
+    }
+};
+//# sourceMappingURL=spot.js.map

package/dist/templates/spot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spot.js","sourceRoot":"","sources":["../../src/templates/spot.ts"],"names":[],"mappings":"AAAA,+EAA+E;AAC/E,MAAM,IAAI,GAAG,IAAI,GAAG,CAAC,wBAAwB,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAA;AAEpE,eAAe;IACb,IAAI,EAAE,MAAM;IACZ,WAAW,EAAE,gGAAgG;IAC7G,KAAK,EAAE,SAAS,CAAC,sIAAsI;IACvJ,IAAI;IACJ,KAAK,EAAE;QACL,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,GAAG;QACR,IAAI,EAAE,GAAG;QACT,KAAK,EAAE,EAAE;QACT,MAAM,EAAE,EAAE;QACV,IAAI,EAAE,QAAQ;QACd,SAAS,EAAE,SAAS;QACpB,WAAW,EAAE,SAAS;QACtB,SAAS,EAAE,CAAC;QACZ,QAAQ,EAAE,MAAM;QAChB,KAAK,EAAE,CAAC;QACR,SAAS,EAAE,SAAS;QACpB,QAAQ,EAAE,EAAE;QACZ,UAAU,EAAE,YAAY;QACxB,IAAI,EAAE,IAAI;KACX;CACF,CAAA","sourcesContent":["// Reuse parcel.png as a placeholder icon until a dedicated spot icon is drawn.\nconst icon = new URL('../../icons/parcel.png', import.meta.url).href\n\nexport default {\n  type: 'spot',\n  description: 'virtual pickup / drop zone — translucent floor pad that accepts carrier components as children',\n  group: 'storage' /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|3D|facility|storage|conveyance|transport|manufacturing|form|etc */,\n  icon,\n  model: {\n    type: 'spot',\n    top: 200,\n    left: 400,\n    width: 80,\n    height: 80,\n    text: 'SPOT_A',\n    fillStyle: '#3a8fbd',\n    strokeStyle: '#3a8fbd',\n    lineWidth: 1,\n    lineDash: 'dash',\n    alpha: 1,\n    fontColor: '#3a8fbd',\n    fontSize: 16,\n    fontFamily: 'sans-serif',\n    bold: true\n  }\n}\n"]}

package/package.json

@@ -0,0 +1,44 @@
+{
+  "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.22",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "license": "MIT",
+  "things-scene": true,
+  "publishConfig": {
+    "access": "public",
+    "@operato:registry": "https://registry.npmjs.org"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/things-scene/operato-scene.git",
+    "directory": "packages/storage"
+  },
+  "scripts": {
+    "build": "tsc",
+    "prepublishOnly": "tsc",
+    "lint": "eslint src/ && prettier \"src/**/*.ts\" --check",
+    "format": "eslint src/ --fix && prettier \"src/**/*.ts\" --write"
+  },
+  "dependencies": {
+    "@hatiolab/things-scene": "^10.0.0-beta.1",
+    "@operato/scene-base": "^10.0.0-beta.22",
+    "three": "^0.183.0"
+  },
+  "devDependencies": {
+    "@hatiolab/prettier-config": "^1.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",
+    "prettier": "^3.2.5",
+    "tslib": "^2.3.1",
+    "typescript": "^5.0.4"
+  },
+  "prettier": "@hatiolab/prettier-config",
+  "gitHead": "f48e52f4f5fdc30ec06af9da7cf253f6e29cfb0e"
+}

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

@@ -0,0 +1,191 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ *
+ * AsrsCrane 3D — stacker crane for AS/RS aisles.
+ *
+ * LO-POLY but structurally complete. The signature parts:
+ *
+ *   - tall vertical mast (the dominant element — runs floor → ceiling)
+ *   - base unit (motor housing at floor level, runs on the floor rail)
+ *   - top guide (sliding block at ceiling that runs on the ceiling rail —
+ *     stabilizes the mast under acceleration)
+ *   - carriage (horizontal block that slides up/down the mast at
+ *     `state.carriageHeight`)
+ *   - shuttle/fork attachment on the carriage (extends sideways into a cell
+ *     to extract / insert a pallet)
+ *   - status lamp on top of the base unit
+ *
+ * The base unit + top guide combo is what visually distinguishes a stacker
+ * crane from a forklift — the stacker is *constrained* to the aisle, riding
+ * rails top and bottom, and that constraint is the visual signature.
+ */
+
+import * as THREE from 'three'
+import * as BufferGeometryUtils from 'three/examples/jsm/utils/BufferGeometryUtils.js'
+import { RealObjectGroup } from '@hatiolab/things-scene'
+
+const MAST_COLOR = 0x4a5060
+const BASE_COLOR = 0x33394a
+const SHUTTLE_COLOR = 0x222233
+const RAIL_COLOR = 0x222222
+
+export class AsrsCrane3D extends RealObjectGroup {
+  build() {
+    super.build()
+
+    const { width, height, depth = 200 } = this.component.state
+    const bodyColor = (this.component.state.bodyColor as string) || '#888'
+    const emissiveColor = (this.component.state.lampEmissive as string) || '#222222'
+    const status = this.component.state.status
+    const lampIntensity = status && status !== 'idle' ? 1.5 : 0.2
+    // Clamp carriageHeight to the available mast travel — keeps the carriage
+    // inside the shaft even if state.carriageHeight is stale (e.g. left over
+    // from an older height-scale convention).
+    const carriageRaw = (this.component.state.carriageHeight as number) ?? depth * 0.4
+    const carriageHeight = Math.max(0, Math.min(carriageRaw, depth * 0.85))
+
+    const baseY = -depth / 2
+
+    // Proportions
+    const baseH = depth * 0.10
+    const topGuideH = depth * 0.05
+    const mastH = depth - baseH - topGuideH
+    const mastW = width * 0.35
+    const mastD = height * 0.35
+
+    const bodyMaterial = new THREE.MeshStandardMaterial({
+      color: bodyColor,
+      metalness: 0.4,
+      roughness: 0.5
+    })
+    const mastMaterial = new THREE.MeshStandardMaterial({
+      color: MAST_COLOR,
+      metalness: 0.85,
+      roughness: 0.3
+    })
+    const baseMaterial = new THREE.MeshStandardMaterial({
+      color: BASE_COLOR,
+      metalness: 0.7,
+      roughness: 0.4
+    })
+    const shuttleMaterial = new THREE.MeshStandardMaterial({
+      color: SHUTTLE_COLOR,
+      metalness: 0.85,
+      roughness: 0.3
+    })
+
+    // ── Floor rail (visible track under the base) ─────────────────────
+    const railH = baseH * 0.25
+    const railGeo = new THREE.BoxGeometry(width * 1.15, railH, mastD * 0.4)
+    const railMesh = new THREE.Mesh(
+      railGeo,
+      new THREE.MeshStandardMaterial({ color: RAIL_COLOR, metalness: 0.9, roughness: 0.3 })
+    )
+    railMesh.position.set(0, baseY + railH / 2, 0)
+    railMesh.receiveShadow = true
+    this.object3d.add(railMesh)
+
+    // ── Base unit (motor housing on floor rail) ───────────────────────
+    const baseGeo = new THREE.BoxGeometry(width * 0.95, baseH, height * 0.85)
+    const baseMesh = new THREE.Mesh(baseGeo, baseMaterial)
+    baseMesh.position.set(0, baseY + railH + baseH / 2, 0)
+    baseMesh.castShadow = true
+    baseMesh.receiveShadow = true
+    this.object3d.add(baseMesh)
+
+    // Body color tint band on base unit (subtle status indication)
+    const tintH = baseH * 0.15
+    const tintGeo = new THREE.BoxGeometry(width * 0.95, tintH, height * 0.85)
+    const tintMaterial = new THREE.MeshStandardMaterial({
+      color: bodyColor,
+      transparent: true,
+      opacity: 0.6,
+      metalness: 0.1,
+      roughness: 0.6
+    })
+    const tintMesh = new THREE.Mesh(tintGeo, tintMaterial)
+    tintMesh.position.set(0, baseY + railH + baseH - tintH / 2, 0)
+    this.object3d.add(tintMesh)
+
+    // ── Mast (vertical column from base top to ceiling) ───────────────
+    const mastY = baseY + railH + baseH + mastH / 2
+    const mastGeo = new THREE.BoxGeometry(mastW, mastH, mastD)
+    const mastMesh = new THREE.Mesh(mastGeo, mastMaterial)
+    mastMesh.position.set(0, mastY, 0)
+    mastMesh.castShadow = true
+    this.object3d.add(mastMesh)
+
+    // ── Carriage (horizontal block sliding on mast at carriageHeight) ─
+    const carriageW = width * 0.85
+    const carriageH = baseH * 0.7
+    const carriageD = mastD * 1.4
+    const carriageY = baseY + railH + baseH + carriageHeight + carriageH / 2
+    const carriageGeo = new THREE.BoxGeometry(carriageW, carriageH, carriageD)
+    const carriageMesh = new THREE.Mesh(carriageGeo, bodyMaterial)
+    carriageMesh.position.set(0, carriageY, 0)
+    carriageMesh.castShadow = true
+    this.object3d.add(carriageMesh)
+
+    // ── Shuttle / fork attachment on carriage (extends sideways) ──────
+    const shuttleW = width * 1.05
+    const shuttleH = carriageH * 0.5
+    const shuttleD = carriageD * 0.6
+    const shuttleGeo = new THREE.BoxGeometry(shuttleW, shuttleH, shuttleD)
+    const shuttleMesh = new THREE.Mesh(shuttleGeo, shuttleMaterial)
+    shuttleMesh.position.set(0, carriageY - carriageH / 2 - shuttleH / 2, 0)
+    shuttleMesh.castShadow = true
+    this.object3d.add(shuttleMesh)
+
+    // ── Top guide (sliding block on ceiling rail) ─────────────────────
+    const topGuideGeo = new THREE.BoxGeometry(width * 0.7, topGuideH, height * 0.6)
+    const topGuideMesh = new THREE.Mesh(topGuideGeo, baseMaterial)
+    topGuideMesh.position.set(0, baseY + depth - topGuideH / 2, 0)
+    topGuideMesh.castShadow = true
+    this.object3d.add(topGuideMesh)
+
+    // Ceiling rail (small visual cue at very top)
+    const ceilingRailGeo = new THREE.BoxGeometry(width * 1.15, topGuideH * 0.4, mastD * 0.4)
+    const ceilingRailMesh = new THREE.Mesh(
+      ceilingRailGeo,
+      new THREE.MeshStandardMaterial({ color: RAIL_COLOR, metalness: 0.9, roughness: 0.3 })
+    )
+    ceilingRailMesh.position.set(0, baseY + depth - topGuideH * 0.2, 0)
+    this.object3d.add(ceilingRailMesh)
+
+    // ── Status lamp on top of base unit ───────────────────────────────
+    const lampR = Math.min(width, height) * 0.04
+    const lampH = lampR * 1.5
+    const lampMaterial = new THREE.MeshStandardMaterial({
+      color: emissiveColor,
+      emissive: emissiveColor,
+      emissiveIntensity: lampIntensity,
+      metalness: 0,
+      roughness: 0.3
+    })
+    const lampGeo = new THREE.CylinderGeometry(lampR, lampR * 0.85, lampH, 12)
+    const lampMesh = new THREE.Mesh(lampGeo, lampMaterial)
+    // 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)
+  }
+
+  updateDimension() {}
+
+  onchange(after: Record<string, unknown>, before: Record<string, unknown>) {
+    if (
+      'status' in after ||
+      'bodyColor' in after ||
+      'lampEmissive' in after ||
+      'carriageHeight' in after ||
+      'width' in after ||
+      'height' in after ||
+      'depth' in after
+    ) {
+      this.update()
+      return
+    }
+    super.onchange(after, before)
+  }
+
+  updateAlpha() {}
+}

package/src/asrs-crane.ts

@@ -0,0 +1,130 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import { Component, ComponentNature, RealObject, RectPath, Shape, sceneComponent } from '@hatiolab/things-scene'
+import {
+  Legendable,
+  Placeable,
+  type Alignment,
+  type Heights,
+  type LegendBinding,
+  type PlacementArchetype
+} from '@operato/scene-base'
+
+import { AsrsCrane3D } from './asrs-crane-3d.js'
+
+/**
+ * AsrsCrane status — the operating state of a stacker crane in an AS/RS aisle.
+ *
+ * - `idle`       — parked at home position
+ * - `moving`     — translating along the aisle (horizontal) or along the
+ *                  mast (vertical); the two motions are typically combined
+ * - `loading`    — extracting a pallet from a rack cell
+ * - `unloading`  — placing a pallet into a rack cell
+ * - `error`      — fault / e-stop / collision warning
+ */
+export type AsrsCraneStatus = 'idle' | 'moving' | 'loading' | 'unloading' | 'error'
+
+const BODY_LEGEND = {
+  idle: '#888',
+  moving: '#aabbcc',
+  loading: '#ffaa00',
+  unloading: '#ffaa00',
+  error: '#c66',
+  default: '#888'
+}
+
+const LAMP_EMISSIVE_LEGEND = {
+  idle: '#222222',
+  moving: '#44ff44',
+  loading: '#ffaa00',
+  unloading: '#ffaa00',
+  error: '#ff3333',
+  default: '#222222'
+}
+
+const NATURE: ComponentNature = {
+  mutable: false,
+  resizable: true,
+  rotatable: true,
+  properties: [
+    {
+      type: 'select',
+      label: 'status',
+      name: 'status',
+      property: {
+        options: [
+          { display: 'Idle', value: 'idle' },
+          { display: 'Moving', value: 'moving' },
+          { display: 'Loading', value: 'loading' },
+          { display: 'Unloading', value: 'unloading' },
+          { display: 'Error', value: 'error' }
+        ]
+      }
+    },
+    {
+      type: 'number',
+      label: 'carriage-height',
+      name: 'carriageHeight',
+      placeholder: 'mm — height of carriage on mast'
+    }
+  ],
+  help: 'scene/component/asrs-crane'
+}
+
+const Base = Legendable(Placeable(RectPath(Shape))) as unknown as typeof Component
+
+/**
+ * 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.
+ *
+ * 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).
+ */
+@sceneComponent('asrs-crane')
+export default class AsrsCrane extends Base {
+  static legends: Record<string, LegendBinding> = {
+    bodyColor: { from: 'status', legend: BODY_LEGEND },
+    lampEmissive: { from: 'status', legend: LAMP_EMISSIVE_LEGEND }
+  }
+
+  static placement: PlacementArchetype = 'floor'
+  static align: Alignment = 'bottom'
+  static defaultDepth = (h: Heights) => h.ceiling - h.floor
+
+  get nature() {
+    return NATURE
+  }
+
+  get anchors() {
+    return []
+  }
+
+  /**
+   * 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
+    ctx.beginPath()
+    ctx.rect(left, top, width, height)
+  }
+
+  get fillStyle() {
+    return (this.state.bodyColor as string) || '#888'
+  }
+
+  buildRealObject(): RealObject | undefined {
+    return new AsrsCrane3D(this as any)
+  }
+}

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

@@ -0,0 +1,146 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ *
+ * AsrsRack 3D — multi-level high-bay storage rack.
+ *
+ * LO-POLY but visually unambiguous as a rack. The signature parts:
+ *
+ *   - 4 corner uprights (vertical posts running floor → top)
+ *   - intermediate uprights between bays (one between each adjacent bay pair)
+ *   - horizontal beams at each level on both front and back faces (defining
+ *     the cell decks)
+ *   - diagonal cross-bracing on the back face (the "X" pattern that says
+ *     this is a load-bearing storage rack, not just a generic frame)
+ *
+ * No floor / ceiling panels — the rack is open by design (cells are accessed
+ * by the stacker crane from the front/aisle side).
+ *
+ * Cargo (pallets, boxes) added as children render at their own z position.
+ * The rack itself is purely structural geometry.
+ */
+
+import * as THREE from 'three'
+import * as BufferGeometryUtils from 'three/examples/jsm/utils/BufferGeometryUtils.js'
+import { RealObjectGroup } from '@hatiolab/things-scene'
+
+const POST_COLOR = 0x6a7080
+const BEAM_COLOR = 0x556070
+const BRACE_COLOR = 0x556070
+
+export class AsrsRack3D extends RealObjectGroup {
+  build() {
+    super.build()
+
+    const { width, height, depth = 3000 } = this.component.state
+    const levels = Math.max(1, Math.floor((this.component.state.levels as number) || 4))
+    const bays = Math.max(1, Math.floor((this.component.state.bays as number) || 5))
+
+    const baseY = -depth / 2
+    const postW = Math.min(width / bays, height) * 0.06
+    const beamH = depth * 0.025
+    const braceT = postW * 0.6
+
+    const postMaterial = new THREE.MeshStandardMaterial({
+      color: POST_COLOR,
+      metalness: 0.7,
+      roughness: 0.4
+    })
+    const beamMaterial = new THREE.MeshStandardMaterial({
+      color: BEAM_COLOR,
+      metalness: 0.7,
+      roughness: 0.4
+    })
+    const braceMaterial = new THREE.MeshStandardMaterial({
+      color: BRACE_COLOR,
+      metalness: 0.7,
+      roughness: 0.4
+    })
+
+    // ── Uprights (vertical posts at every bay boundary) ──────────────
+    // bays + 1 vertical positions; for each, one front post + one back post.
+    const postGeos: THREE.BufferGeometry[] = []
+    for (let i = 0; i <= bays; i++) {
+      const xFrac = i / bays - 0.5
+      const x = xFrac * width
+      // Front + back posts
+      for (const zSign of [-1, 1]) {
+        const post = new THREE.BoxGeometry(postW, depth, postW)
+        post.translate(x, 0, zSign * (height / 2 - postW / 2))
+        postGeos.push(post)
+      }
+    }
+    const postMesh = new THREE.Mesh(BufferGeometryUtils.mergeGeometries(postGeos), postMaterial)
+    postMesh.castShadow = true
+    postMesh.receiveShadow = true
+    this.object3d.add(postMesh)
+
+    // ── Horizontal beams (front + back faces at each level) ──────────
+    // levels + 1 vertical positions (level 0 = ground, level N = top).
+    const beamGeos: THREE.BufferGeometry[] = []
+    for (let lv = 0; lv <= levels; lv++) {
+      const yFrac = lv / levels
+      const y = baseY + yFrac * depth - beamH / 2 + (lv === 0 ? beamH : 0)
+
+      for (const zSign of [-1, 1]) {
+        const beam = new THREE.BoxGeometry(width, beamH, beamH)
+        beam.translate(0, y, zSign * (height / 2 - beamH / 2))
+        beamGeos.push(beam)
+      }
+    }
+    const beamMesh = new THREE.Mesh(BufferGeometryUtils.mergeGeometries(beamGeos), beamMaterial)
+    beamMesh.castShadow = true
+    beamMesh.receiveShadow = true
+    this.object3d.add(beamMesh)
+
+    // ── Diagonal cross-bracing on the back face (the "X" pattern) ────
+    // Two diagonals per level — "/" and "\" — making an X across each
+    // bay-tall cell. Visual signature of a load-bearing rack.
+    const braceGeos: THREE.BufferGeometry[] = []
+    const cellW = width / bays
+    const cellH = depth / levels
+    const braceLen = Math.sqrt(cellW * cellW + cellH * cellH)
+    const braceAngle = Math.atan2(cellH, cellW)
+    const backZ = height / 2 - postW * 0.6
+
+    for (let bay = 0; bay < bays; bay++) {
+      // Brace only every other bay to keep things visually open
+      if (bay % 2 !== 0) continue
+
+      const cellCenterX = (bay - bays / 2 + 0.5) * cellW
+
+      for (let lv = 0; lv < levels; lv++) {
+        const cellCenterY = baseY + (lv + 0.5) * cellH
+
+        for (const sign of [-1, 1]) {
+          const brace = new THREE.BoxGeometry(braceLen, braceT, braceT)
+          brace.rotateZ(sign * braceAngle)
+          brace.translate(cellCenterX, cellCenterY, backZ)
+          braceGeos.push(brace)
+        }
+      }
+    }
+    if (braceGeos.length > 0) {
+      const braceMesh = new THREE.Mesh(BufferGeometryUtils.mergeGeometries(braceGeos), braceMaterial)
+      braceMesh.castShadow = true
+      this.object3d.add(braceMesh)
+    }
+  }
+
+  updateDimension() {}
+
+  onchange(after: Record<string, unknown>, before: Record<string, unknown>) {
+    if (
+      'levels' in after ||
+      'bays' in after ||
+      'width' in after ||
+      'height' in after ||
+      'depth' in after
+    ) {
+      this.update()
+      return
+    }
+    super.onchange(after, before)
+  }
+
+  updateAlpha() {}
+}