@operato/scene-storage 10.0.0-beta.22

package/dist/spot-3d.js

@@ -0,0 +1,176 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ *
+ * Spot 3D — translucent floor pad.
+ *
+ * Renders only the FLOOR face of the conceptual zone box; side walls are
+ * absent. Children (carriers) sit on the top face via an explicit attach
+ * frame; the pad doesn't occlude them (`depthWrite: false`).
+ *
+ * Standard things-scene properties read directly:
+ *   - state.fillStyle  → pad color (sole color source)
+ *   - state.strokeStyle → outline color (defaults to fillStyle)
+ *   - state.alpha      → pad transparency, multiplied with the base 0.35 tint
+ *   - state.text       → label, rendered as a CanvasTexture quad on the pad
+ *   - state.fontColor  → label fill (defaults to fillStyle)
+ *   - state.fontSize / fontFamily / bold / italic → label typography
+ *                        (composed via the things-scene fontStyle helper)
+ *   - state.material3d → metalness / roughness / castShadow / receiveShadow
+ *                        (resolved + applied via the things-scene helpers,
+ *                        no hard-coded numbers)
+ */
+import * as THREE from 'three';
+import { RealObjectGroup, resolveMaterial3d, applyMaterial3dProps, fontStyle, opaqueColor } from '@hatiolab/things-scene';
+const DEFAULT_PAD_COLOR = '#3a8fbd';
+const BASE_PAD_OPACITY = 0.35; // multiplied by state.alpha
+export class Spot3D extends RealObjectGroup {
+    build() {
+        super.build();
+        const state = this.component.state;
+        const w = Math.max(Math.abs(numOr(state.width, 100)), 1);
+        const h = Math.max(Math.abs(numOr(state.height, 100)), 1);
+        const d = this.effectiveDepth; // 2 by default (thin pad)
+        // opaqueColor strips alpha from rgba/hsla strings — THREE.Color doesn't
+        // honor alpha, would emit a console warning, and ignore the alpha bit.
+        // The actual transparency comes through the material.opacity below.
+        const padColor = opaqueColor(state.fillStyle || DEFAULT_PAD_COLOR);
+        const alpha = clamp(numOr(state.alpha, 1), 0, 1);
+        const padOpacity = clamp(BASE_PAD_OPACITY * alpha, 0.05, 1);
+        // material3d: pulls user-set metalness / roughness / shadow / side.
+        // Local defaults (transparent + DoubleSide + depthWrite:false) come
+        // from the constructor below; user values override via applyMaterial3dProps.
+        const resolved = resolveMaterial3d(state.material3d);
+        // ── Floor pad (the only visible surface of the conceptual zone box) ──
+        const padThickness = Math.max(d * 0.4, 0.5);
+        const padMat = new THREE.MeshStandardMaterial({
+            color: padColor,
+            transparent: true,
+            opacity: padOpacity,
+            side: THREE.DoubleSide,
+            depthWrite: false
+        });
+        applyMaterial3dProps(padMat, resolved);
+        const pad = new THREE.Mesh(new THREE.BoxGeometry(w, padThickness, h), padMat);
+        pad.position.set(0, -d / 2 + padThickness / 2, 0);
+        pad.castShadow = resolved.castShadow;
+        pad.receiveShadow = resolved.receiveShadow;
+        this.object3d.add(pad);
+        // ── Outline of the zone footprint (line on the floor) ──
+        const outlineGeo = new THREE.BufferGeometry().setFromPoints([
+            new THREE.Vector3(-w / 2, -d / 2 + padThickness + 0.05, -h / 2),
+            new THREE.Vector3(w / 2, -d / 2 + padThickness + 0.05, -h / 2),
+            new THREE.Vector3(w / 2, -d / 2 + padThickness + 0.05, h / 2),
+            new THREE.Vector3(-w / 2, -d / 2 + padThickness + 0.05, h / 2),
+            new THREE.Vector3(-w / 2, -d / 2 + padThickness + 0.05, -h / 2)
+        ]);
+        const outlineMat = new THREE.LineBasicMaterial({
+            color: opaqueColor(state.strokeStyle || padColor),
+            transparent: true,
+            opacity: 0.7 * alpha
+        });
+        const outline = new THREE.Line(outlineGeo, outlineMat);
+        this.object3d.add(outline);
+        // ── Label (uses standard text + font fields) ──
+        const text = state.text;
+        if (typeof text === 'string' && text.length > 0) {
+            const label = this._buildLabel(text, state, padColor, w, h);
+            if (label) {
+                label.position.set(0, -d / 2 + padThickness + Math.max(w, h) * 0.05, 0);
+                this.object3d.add(label);
+            }
+        }
+    }
+    /**
+     * Build the label as a canvas-textured quad. Uses the same `fontStyle`
+     * helper things-scene uses for its 2D text rendering, so the label
+     * here matches what the property panel previews.
+     */
+    _buildLabel(text, state, defaultColor, w, h) {
+        const fontSize = clamp(numOr(state.fontSize, 36), 8, 200);
+        const fontFamily = String(state.fontFamily ?? 'sans-serif');
+        const bold = !!state.bold;
+        const italic = !!state.italic;
+        const color = state.fontColor || defaultColor;
+        const canvas = document.createElement('canvas');
+        canvas.width = 512;
+        canvas.height = 128;
+        const ctx = canvas.getContext('2d');
+        if (!ctx)
+            return null;
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        ctx.font = fontStyle(bold, italic, fontSize, fontFamily);
+        ctx.fillStyle = color;
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'middle';
+        ctx.fillText(text, canvas.width / 2, canvas.height / 2);
+        const tex = new THREE.CanvasTexture(canvas);
+        tex.needsUpdate = true;
+        const labelMat = new THREE.MeshBasicMaterial({
+            map: tex,
+            transparent: true,
+            depthWrite: false,
+            side: THREE.DoubleSide
+        });
+        const labelW = Math.min(w, h) * 0.6;
+        const labelH = labelW * (canvas.height / canvas.width);
+        const mesh = new THREE.Mesh(new THREE.PlaneGeometry(labelW, labelH), labelMat);
+        mesh.rotation.x = -Math.PI / 2; // lay flat, readable from above
+        return mesh;
+    }
+    /**
+     * The sub-frame that carrier components should mount onto.
+     *
+     * Semantically Spot is a virtual cuboid SPACE — it marks "stuff goes
+     * here" — and carriers are placed INSIDE that space, resting on the
+     * cuboid's BOTTOM face. So the attach frame sits at the cuboid's
+     * bottom (`y = -d/2` in spot-local), NOT at the top of the rendered
+     * pad. The pad is just a translucent visual marker for the zone; the
+     * floor of the conceptual volume is what carriers stand on.
+     *
+     * The Spot.attachPointFor mixin lifts the carrier by its own halfDepth
+     * (in the +Y direction within this frame), placing the carrier's
+     * BOTTOM face exactly at the cuboid floor.
+     */
+    getAttachFrame() {
+        if (!this._attachFrame) {
+            const d = this.effectiveDepth;
+            this._attachFrame = new THREE.Object3D();
+            this._attachFrame.position.set(0, -d / 2, 0);
+            this.object3d.add(this._attachFrame);
+        }
+        return this._attachFrame;
+    }
+    _attachFrame;
+    updateDimension() { }
+    onchange(after, before) {
+        if ('width' in after ||
+            'height' in after ||
+            'depth' in after ||
+            'fillStyle' in after ||
+            'strokeStyle' in after ||
+            'alpha' in after ||
+            'text' in after ||
+            'fontColor' in after ||
+            'fontSize' in after ||
+            'fontFamily' in after ||
+            'bold' in after ||
+            'italic' in after ||
+            'material3d' in after) {
+            this._attachFrame = undefined;
+            this.update();
+            return;
+        }
+        super.onchange(after, before);
+    }
+    // alpha is rebuilt into the materials on every build; opt out of the
+    // base RealObject's "multiply existing material opacity" pass to avoid
+    // double-application.
+    updateAlpha() { }
+}
+function clamp(v, lo, hi) {
+    return Math.max(lo, Math.min(hi, v));
+}
+function numOr(v, dflt) {
+    return typeof v === 'number' && Number.isFinite(v) ? v : dflt;
+}
+//# sourceMappingURL=spot-3d.js.map

package/dist/spot-3d.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spot-3d.js","sourceRoot":"","sources":["../src/spot-3d.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n *\n * Spot 3D — translucent floor pad.\n *\n * Renders only the FLOOR face of the conceptual zone box; side walls are\n * absent. Children (carriers) sit on the top face via an explicit attach\n * frame; the pad doesn't occlude them (`depthWrite: false`).\n *\n * Standard things-scene properties read directly:\n *   - state.fillStyle  → pad color (sole color source)\n *   - state.strokeStyle → outline color (defaults to fillStyle)\n *   - state.alpha      → pad transparency, multiplied with the base 0.35 tint\n *   - state.text       → label, rendered as a CanvasTexture quad on the pad\n *   - state.fontColor  → label fill (defaults to fillStyle)\n *   - state.fontSize / fontFamily / bold / italic → label typography\n *                        (composed via the things-scene fontStyle helper)\n *   - state.material3d → metalness / roughness / castShadow / receiveShadow\n *                        (resolved + applied via the things-scene helpers,\n *                        no hard-coded numbers)\n */\n\nimport * as THREE from 'three'\nimport {\n  RealObjectGroup,\n  resolveMaterial3d,\n  applyMaterial3dProps,\n  fontStyle,\n  opaqueColor,\n  type Material3D\n} from '@hatiolab/things-scene'\n\nconst DEFAULT_PAD_COLOR = '#3a8fbd'\nconst BASE_PAD_OPACITY = 0.35 // multiplied by state.alpha\n\nexport class Spot3D extends RealObjectGroup {\n  build() {\n    super.build()\n\n    const state = this.component.state as any\n    const w = Math.max(Math.abs(numOr(state.width, 100)), 1)\n    const h = Math.max(Math.abs(numOr(state.height, 100)), 1)\n    const d = this.effectiveDepth // 2 by default (thin pad)\n    // opaqueColor strips alpha from rgba/hsla strings — THREE.Color doesn't\n    // honor alpha, would emit a console warning, and ignore the alpha bit.\n    // The actual transparency comes through the material.opacity below.\n    const padColor = opaqueColor((state.fillStyle as string) || DEFAULT_PAD_COLOR)\n    const alpha = clamp(numOr(state.alpha, 1), 0, 1)\n    const padOpacity = clamp(BASE_PAD_OPACITY * alpha, 0.05, 1)\n\n    // material3d: pulls user-set metalness / roughness / shadow / side.\n    // Local defaults (transparent + DoubleSide + depthWrite:false) come\n    // from the constructor below; user values override via applyMaterial3dProps.\n    const resolved = resolveMaterial3d(state.material3d as Material3D | undefined)\n\n    // ── Floor pad (the only visible surface of the conceptual zone box) ──\n    const padThickness = Math.max(d * 0.4, 0.5)\n    const padMat = new THREE.MeshStandardMaterial({\n      color: padColor,\n      transparent: true,\n      opacity: padOpacity,\n      side: THREE.DoubleSide,\n      depthWrite: false\n    })\n    applyMaterial3dProps(padMat, resolved)\n    const pad = new THREE.Mesh(new THREE.BoxGeometry(w, padThickness, h), padMat)\n    pad.position.set(0, -d / 2 + padThickness / 2, 0)\n    pad.castShadow = resolved.castShadow\n    pad.receiveShadow = resolved.receiveShadow\n    this.object3d.add(pad)\n\n    // ── Outline of the zone footprint (line on the floor) ──\n    const outlineGeo = new THREE.BufferGeometry().setFromPoints([\n      new THREE.Vector3(-w / 2, -d / 2 + padThickness + 0.05, -h / 2),\n      new THREE.Vector3(w / 2, -d / 2 + padThickness + 0.05, -h / 2),\n      new THREE.Vector3(w / 2, -d / 2 + padThickness + 0.05, h / 2),\n      new THREE.Vector3(-w / 2, -d / 2 + padThickness + 0.05, h / 2),\n      new THREE.Vector3(-w / 2, -d / 2 + padThickness + 0.05, -h / 2)\n    ])\n    const outlineMat = new THREE.LineBasicMaterial({\n      color: opaqueColor((state.strokeStyle as string) || padColor),\n      transparent: true,\n      opacity: 0.7 * alpha\n    })\n    const outline = new THREE.Line(outlineGeo, outlineMat)\n    this.object3d.add(outline)\n\n    // ── Label (uses standard text + font fields) ──\n    const text = state.text\n    if (typeof text === 'string' && text.length > 0) {\n      const label = this._buildLabel(text, state, padColor, w, h)\n      if (label) {\n        label.position.set(0, -d / 2 + padThickness + Math.max(w, h) * 0.05, 0)\n        this.object3d.add(label)\n      }\n    }\n  }\n\n  /**\n   * Build the label as a canvas-textured quad. Uses the same `fontStyle`\n   * helper things-scene uses for its 2D text rendering, so the label\n   * here matches what the property panel previews.\n   */\n  private _buildLabel(text: string, state: any, defaultColor: string, w: number, h: number): THREE.Mesh | null {\n    const fontSize = clamp(numOr(state.fontSize, 36), 8, 200)\n    const fontFamily = String(state.fontFamily ?? 'sans-serif')\n    const bold = !!state.bold\n    const italic = !!state.italic\n    const color = (state.fontColor as string) || defaultColor\n\n    const canvas = document.createElement('canvas')\n    canvas.width = 512\n    canvas.height = 128\n    const ctx = canvas.getContext('2d')\n    if (!ctx) return null\n    ctx.clearRect(0, 0, canvas.width, canvas.height)\n    ctx.font = fontStyle(bold, italic, fontSize, fontFamily)\n    ctx.fillStyle = color\n    ctx.textAlign = 'center'\n    ctx.textBaseline = 'middle'\n    ctx.fillText(text, canvas.width / 2, canvas.height / 2)\n    const tex = new THREE.CanvasTexture(canvas)\n    tex.needsUpdate = true\n    const labelMat = new THREE.MeshBasicMaterial({\n      map: tex,\n      transparent: true,\n      depthWrite: false,\n      side: THREE.DoubleSide\n    })\n    const labelW = Math.min(w, h) * 0.6\n    const labelH = labelW * (canvas.height / canvas.width)\n    const mesh = new THREE.Mesh(new THREE.PlaneGeometry(labelW, labelH), labelMat)\n    mesh.rotation.x = -Math.PI / 2 // lay flat, readable from above\n    return mesh\n  }\n\n  /**\n   * The sub-frame that carrier components should mount onto.\n   *\n   * Semantically Spot is a virtual cuboid SPACE — it marks \"stuff goes\n   * here\" — and carriers are placed INSIDE that space, resting on the\n   * cuboid's BOTTOM face. So the attach frame sits at the cuboid's\n   * bottom (`y = -d/2` in spot-local), NOT at the top of the rendered\n   * pad. The pad is just a translucent visual marker for the zone; the\n   * floor of the conceptual volume is what carriers stand on.\n   *\n   * The Spot.attachPointFor mixin lifts the carrier by its own halfDepth\n   * (in the +Y direction within this frame), placing the carrier's\n   * BOTTOM face exactly at the cuboid floor.\n   */\n  getAttachFrame(): THREE.Object3D {\n    if (!this._attachFrame) {\n      const d = this.effectiveDepth\n      this._attachFrame = new THREE.Object3D()\n      this._attachFrame.position.set(0, -d / 2, 0)\n      this.object3d.add(this._attachFrame)\n    }\n    return this._attachFrame\n  }\n\n  private _attachFrame?: THREE.Object3D\n\n  updateDimension() {}\n\n  onchange(after: Record<string, unknown>, before: Record<string, unknown>) {\n    if (\n      'width' in after ||\n      'height' in after ||\n      'depth' in after ||\n      'fillStyle' in after ||\n      'strokeStyle' in after ||\n      'alpha' in after ||\n      'text' in after ||\n      'fontColor' in after ||\n      'fontSize' in after ||\n      'fontFamily' in after ||\n      'bold' in after ||\n      'italic' in after ||\n      'material3d' in after\n    ) {\n      this._attachFrame = undefined\n      this.update()\n      return\n    }\n    super.onchange(after, before)\n  }\n\n  // alpha is rebuilt into the materials on every build; opt out of the\n  // base RealObject's \"multiply existing material opacity\" pass to avoid\n  // double-application.\n  updateAlpha() {}\n}\n\nfunction clamp(v: number, lo: number, hi: number) {\n  return Math.max(lo, Math.min(hi, v))\n}\n\nfunction numOr(v: unknown, dflt: number): number {\n  return typeof v === 'number' && Number.isFinite(v) ? v : dflt\n}\n"]}

package/dist/spot.d.ts

@@ -0,0 +1,41 @@
+import { Component, ComponentNature, RealObject } from '@hatiolab/things-scene';
+import { type Alignment, type Heights, type PlacementArchetype } from '@operato/scene-base';
+declare const Base: typeof Component;
+export default class Spot extends Base {
+    static placement: PlacementArchetype;
+    static align: Alignment;
+    static defaultDepth: (_h: Heights) => number;
+    get nature(): ComponentNature;
+    get anchors(): never[];
+    /**
+     * 2D — outlined rectangle + corner L marks. The pad body is drawn with a
+     * fixed low alpha (0.15) on top of the user's `fillStyle` so the zone reads
+     * as virtual even when fillStyle is fully opaque. Outline + corner marks
+     * use `strokeStyle` (or fall back to `fillStyle`) at the user's `lineWidth`
+     * and `lineDash`. The text label is drawn by the framework's standard
+     * postrender pipeline using `text` / `fontColor` / `fontSize` / etc.
+     */
+    render(ctx: CanvasRenderingContext2D): void;
+    buildRealObject(): RealObject | undefined;
+    /**
+     * Mount carriers on the TOP of the pad (Spot3D's `getAttachFrame` is
+     * already at pad-top in spot-local). Then lift the carrier by its
+     * own halfDepth so the carrier's BOTTOM rests ON the pad surface, not
+     * its volumetric center — without this lift, half the carrier would
+     * sink below the pad / floor.
+     *
+     * Reads `_realObject.effectiveDepth` first (the framework-resolved
+     * value, accounting for `static defaultDepth` and parent context),
+     * falling back to raw `state.depth` for components built before
+     * RealObject creation.
+     */
+    attachPointFor(carrier: Component): {
+        attach: import("three").Object3D<import("three").Object3DEventMap>;
+        localPosition: {
+            x: number;
+            y: number;
+            z: number;
+        };
+    } | undefined;
+}
+export {};

package/dist/spot.js

@@ -0,0 +1,177 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ *
+ * Spot — virtual pickup / drop zone.
+ *
+ * A modeling-time anchor for "this is where things land" — the destination
+ * of a robot arm pick-and-place, the slot of an AGV stop, the staging
+ * zone next to a conveyor. Spot itself does not move and does
+ * not perform any logistics action; it only marks a location and accepts
+ * carrier components as children.
+ *
+ * Visual identity:
+ *   - 2D: outlined rectangle with corner "L" marks (so it reads as a
+ *     virtual zone, not a solid object).
+ *   - 3D: a thin translucent floor pad — only the floor of the conceptual
+ *     box is rendered, the side walls are absent.
+ *
+ * Standard things-scene properties used (no component-specific extras —
+ * keep the property-panel UX uniform with other components):
+ *   - `fillStyle`               — pad / outline color (sole color source)
+ *   - `strokeStyle`             — outline color override (defaults to fillStyle)
+ *   - `lineWidth` / `lineDash`  — outline stroke style
+ *   - `alpha`                   — overall transparency, framework-applied
+ *   - `text` / `fontColor` / `fontSize` / `fontFamily` / `bold` / `italic`
+ *                               — label rendered by the standard text pipeline
+ *   - `material3d` (3D)         — metalness / roughness / castShadow / receiveShadow
+ *
+ * Role: `CarrierHolder` — accepts any Carrier as a child and lays it on
+ * the top face of the pad (overrides default attachPointFor).
+ */
+import { __decorate } from "tslib";
+import { Container, sceneComponent } from '@hatiolab/things-scene';
+import { CarrierHolder, Placeable } from '@operato/scene-base';
+import { Spot3D } from './spot-3d.js';
+const NATURE = {
+    mutable: false,
+    resizable: true,
+    rotatable: true,
+    // No component-specific properties — fillStyle / strokeStyle / lineWidth /
+    // alpha / text / font* are framework-standard, surfaced by the property
+    // panel automatically.
+    properties: [],
+    help: 'scene/component/spot'
+};
+// Container base — Spot accepts carrier children (parcel/box/pallet/...).
+// CarrierHolder mixin only publishes the attach-point hook; the actual
+// child-list management comes from the things-scene Container.
+const Base = CarrierHolder(Placeable(Container));
+let Spot = class Spot extends Base {
+    static placement = 'floor';
+    static align = 'bottom';
+    static defaultDepth = (_h) => 2; // a thin pad
+    get nature() {
+        return NATURE;
+    }
+    get anchors() {
+        return [];
+    }
+    /**
+     * 2D — outlined rectangle + corner L marks. The pad body is drawn with a
+     * fixed low alpha (0.15) on top of the user's `fillStyle` so the zone reads
+     * as virtual even when fillStyle is fully opaque. Outline + corner marks
+     * use `strokeStyle` (or fall back to `fillStyle`) at the user's `lineWidth`
+     * and `lineDash`. The text label is drawn by the framework's standard
+     * postrender pipeline using `text` / `fontColor` / `fontSize` / etc.
+     */
+    render(ctx) {
+        const { left = 0, top = 0, width = 100, height = 100 } = this.state;
+        const fillStyle = this.state.fillStyle || '#3a8fbd';
+        const strokeStyle = this.state.strokeStyle || fillStyle;
+        const lineWidth = numOr(this.state.lineWidth, 1);
+        const lineDashStyle = String(this.state.lineDash ?? 'dash');
+        // ── Pad body (fixed-low-alpha tint of fillStyle) ───────────────────
+        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 = lineWidth;
+        applyLineDash(ctx, lineDashStyle, lineWidth);
+        ctx.strokeRect(left + lineWidth / 2, top + lineWidth / 2, width - lineWidth, height - lineWidth);
+        ctx.setLineDash([]);
+        ctx.restore();
+        // ── Corner L marks (solid, slightly heavier than outline) ──────────
+        const ml = Math.min(width, height) * 0.18;
+        const cornerW = Math.max(lineWidth * 1.5, 1.5);
+        ctx.save();
+        ctx.strokeStyle = strokeStyle;
+        ctx.lineWidth = cornerW;
+        for (const [cx, cy, sx, sy] of [
+            [left, top, 1, 1],
+            [left + width, top, -1, 1],
+            [left + width, top + height, -1, -1],
+            [left, top + height, 1, -1]
+        ]) {
+            ctx.beginPath();
+            ctx.moveTo(cx + sx * ml, cy);
+            ctx.lineTo(cx, cy);
+            ctx.lineTo(cx, cy + sy * ml);
+            ctx.stroke();
+        }
+        ctx.restore();
+    }
+    buildRealObject() {
+        return new Spot3D(this);
+    }
+    /**
+     * Mount carriers on the TOP of the pad (Spot3D's `getAttachFrame` is
+     * already at pad-top in spot-local). Then lift the carrier by its
+     * own halfDepth so the carrier's BOTTOM rests ON the pad surface, not
+     * its volumetric center — without this lift, half the carrier would
+     * sink below the pad / floor.
+     *
+     * Reads `_realObject.effectiveDepth` first (the framework-resolved
+     * value, accounting for `static defaultDepth` and parent context),
+     * falling back to raw `state.depth` for components built before
+     * RealObject creation.
+     */
+    attachPointFor(carrier) {
+        const ro = this._realObject;
+        const frame = ro?.getAttachFrame?.();
+        if (!frame)
+            return undefined;
+        const carrierDepth = resolveDepth(carrier);
+        return {
+            attach: frame,
+            localPosition: { x: 0, y: carrierDepth / 2, z: 0 }
+        };
+    }
+};
+Spot = __decorate([
+    sceneComponent('spot')
+], Spot);
+export default Spot;
+function resolveDepth(c) {
+    const eff = c._realObject?.effectiveDepth;
+    if (typeof eff === 'number' && Number.isFinite(eff))
+        return eff;
+    return numOr(c?.state?.depth, 0);
+}
+function numOr(v, dflt) {
+    return typeof v === 'number' && Number.isFinite(v) ? v : dflt;
+}
+/**
+ * Map a things-scene `lineDash` string to a Canvas dash pattern. Mirrors
+ * the keys understood by things-scene's `drawer/stroke.ts` so users see
+ * consistent options across components. Unknown strings fall through to
+ * a plain dashed pattern instead of throwing on setLineDash.
+ */
+function applyLineDash(ctx, style, lw) {
+    switch (style) {
+        case 'solid':
+            ctx.setLineDash([]);
+            return;
+        case 'round-dot':
+            ctx.setLineDash([0.1, lw * 2]);
+            ctx.lineCap = 'round';
+            return;
+        case 'square-dot':
+            ctx.setLineDash([lw, lw]);
+            return;
+        case 'long-dash':
+            ctx.setLineDash([lw * 6, lw * 3]);
+            return;
+        case 'dash-dot':
+            ctx.setLineDash([lw * 4, lw * 2, lw, lw * 2]);
+            return;
+        case 'dash':
+        default:
+            ctx.setLineDash([lw * 4, lw * 1.5]);
+            return;
+    }
+}
+//# sourceMappingURL=spot.js.map

package/dist/spot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spot.js","sourceRoot":"","sources":["../src/spot.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n *\n * Spot — virtual pickup / drop zone.\n *\n * A modeling-time anchor for \"this is where things land\" — the destination\n * of a robot arm pick-and-place, the slot of an AGV stop, the staging\n * zone next to a conveyor. Spot itself does not move and does\n * not perform any logistics action; it only marks a location and accepts\n * carrier components as children.\n *\n * Visual identity:\n *   - 2D: outlined rectangle with corner \"L\" marks (so it reads as a\n *     virtual zone, not a solid object).\n *   - 3D: a thin translucent floor pad — only the floor of the conceptual\n *     box is rendered, the side walls are absent.\n *\n * Standard things-scene properties used (no component-specific extras —\n * keep the property-panel UX uniform with other components):\n *   - `fillStyle`               — pad / outline color (sole color source)\n *   - `strokeStyle`             — outline color override (defaults to fillStyle)\n *   - `lineWidth` / `lineDash`  — outline stroke style\n *   - `alpha`                   — overall transparency, framework-applied\n *   - `text` / `fontColor` / `fontSize` / `fontFamily` / `bold` / `italic`\n *                               — label rendered by the standard text pipeline\n *   - `material3d` (3D)         — metalness / roughness / castShadow / receiveShadow\n *\n * Role: `CarrierHolder` — accepts any Carrier as a child and lays it on\n * the top face of the pad (overrides default attachPointFor).\n */\n\nimport { Component, ComponentNature, Container, RealObject, sceneComponent } from '@hatiolab/things-scene'\nimport {\n  CarrierHolder,\n  Placeable,\n  type Alignment,\n  type Heights,\n  type PlacementArchetype\n} from '@operato/scene-base'\n\nimport { Spot3D } from './spot-3d.js'\n\nconst NATURE: ComponentNature = {\n  mutable: false,\n  resizable: true,\n  rotatable: true,\n  // No component-specific properties — fillStyle / strokeStyle / lineWidth /\n  // alpha / text / font* are framework-standard, surfaced by the property\n  // panel automatically.\n  properties: [],\n  help: 'scene/component/spot'\n}\n\n// Container base — Spot accepts carrier children (parcel/box/pallet/...).\n// CarrierHolder mixin only publishes the attach-point hook; the actual\n// child-list management comes from the things-scene Container.\nconst Base = CarrierHolder(Placeable(Container)) as unknown as typeof Component\n\n@sceneComponent('spot')\nexport default class Spot extends Base {\n  static placement: PlacementArchetype = 'floor'\n  static align: Alignment = 'bottom'\n  static defaultDepth = (_h: Heights) => 2 // a thin pad\n\n  get nature(): ComponentNature {\n    return NATURE\n  }\n\n  get anchors() {\n    return []\n  }\n\n  /**\n   * 2D — outlined rectangle + corner L marks. The pad body is drawn with a\n   * fixed low alpha (0.15) on top of the user's `fillStyle` so the zone reads\n   * as virtual even when fillStyle is fully opaque. Outline + corner marks\n   * use `strokeStyle` (or fall back to `fillStyle`) at the user's `lineWidth`\n   * and `lineDash`. The text label is drawn by the framework's standard\n   * postrender pipeline using `text` / `fontColor` / `fontSize` / etc.\n   */\n  render(ctx: CanvasRenderingContext2D) {\n    const { left = 0, top = 0, width = 100, height = 100 } = this.state\n    const fillStyle = (this.state.fillStyle as string) || '#3a8fbd'\n    const strokeStyle = (this.state.strokeStyle as string) || fillStyle\n    const lineWidth = numOr(this.state.lineWidth, 1)\n    const lineDashStyle = String(this.state.lineDash ?? 'dash')\n\n    // ── Pad body (fixed-low-alpha tint of fillStyle) ───────────────────\n    ctx.save()\n    ctx.fillStyle = fillStyle\n    ctx.globalAlpha = 0.15\n    ctx.fillRect(left, top, width, height)\n    ctx.restore()\n\n    // ── Outline ────────────────────────────────────────────────────────\n    ctx.save()\n    ctx.strokeStyle = strokeStyle\n    ctx.lineWidth = lineWidth\n    applyLineDash(ctx, lineDashStyle, lineWidth)\n    ctx.strokeRect(\n      left + lineWidth / 2,\n      top + lineWidth / 2,\n      width - lineWidth,\n      height - lineWidth\n    )\n    ctx.setLineDash([])\n    ctx.restore()\n\n    // ── Corner L marks (solid, slightly heavier than outline) ──────────\n    const ml = Math.min(width, height) * 0.18\n    const cornerW = Math.max(lineWidth * 1.5, 1.5)\n    ctx.save()\n    ctx.strokeStyle = strokeStyle\n    ctx.lineWidth = cornerW\n    for (const [cx, cy, sx, sy] of [\n      [left, top, 1, 1],\n      [left + width, top, -1, 1],\n      [left + width, top + height, -1, -1],\n      [left, top + height, 1, -1]\n    ] as [number, number, number, number][]) {\n      ctx.beginPath()\n      ctx.moveTo(cx + sx * ml, cy)\n      ctx.lineTo(cx, cy)\n      ctx.lineTo(cx, cy + sy * ml)\n      ctx.stroke()\n    }\n    ctx.restore()\n  }\n\n  buildRealObject(): RealObject | undefined {\n    return new Spot3D(this as any)\n  }\n\n  /**\n   * Mount carriers on the TOP of the pad (Spot3D's `getAttachFrame` is\n   * already at pad-top in spot-local). Then lift the carrier by its\n   * own halfDepth so the carrier's BOTTOM rests ON the pad surface, not\n   * its volumetric center — without this lift, half the carrier would\n   * sink below the pad / floor.\n   *\n   * Reads `_realObject.effectiveDepth` first (the framework-resolved\n   * value, accounting for `static defaultDepth` and parent context),\n   * falling back to raw `state.depth` for components built before\n   * RealObject creation.\n   */\n  attachPointFor(carrier: Component) {\n    const ro = (this as any)._realObject as Spot3D | undefined\n    const frame = ro?.getAttachFrame?.()\n    if (!frame) return undefined\n    const carrierDepth = resolveDepth(carrier)\n    return {\n      attach: frame,\n      localPosition: { x: 0, y: carrierDepth / 2, z: 0 }\n    }\n  }\n}\n\nfunction resolveDepth(c: Component): number {\n  const eff = (c as any)._realObject?.effectiveDepth\n  if (typeof eff === 'number' && Number.isFinite(eff)) return eff\n  return numOr((c as any)?.state?.depth, 0)\n}\n\nfunction numOr(v: unknown, dflt: number): number {\n  return typeof v === 'number' && Number.isFinite(v) ? v : dflt\n}\n\n/**\n * Map a things-scene `lineDash` string to a Canvas dash pattern. Mirrors\n * the keys understood by things-scene's `drawer/stroke.ts` so users see\n * consistent options across components. Unknown strings fall through to\n * a plain dashed pattern instead of throwing on setLineDash.\n */\nfunction applyLineDash(ctx: CanvasRenderingContext2D, style: string, lw: number) {\n  switch (style) {\n    case 'solid':\n      ctx.setLineDash([])\n      return\n    case 'round-dot':\n      ctx.setLineDash([0.1, lw * 2])\n      ctx.lineCap = 'round'\n      return\n    case 'square-dot':\n      ctx.setLineDash([lw, lw])\n      return\n    case 'long-dash':\n      ctx.setLineDash([lw * 6, lw * 3])\n      return\n    case 'dash-dot':\n      ctx.setLineDash([lw * 4, lw * 2, lw, lw * 2])\n      return\n    case 'dash':\n    default:\n      ctx.setLineDash([lw * 4, lw * 1.5])\n      return\n  }\n}\n"]}

package/dist/templates/index.d.ts

@@ -0,0 +1,92 @@
+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;
+    };
+} | {
+    type: string;
+    description: string;
+    group: string;
+    icon: string;
+    model: {
+        type: string;
+        top: number;
+        left: number;
+        width: number;
+        height: number;
+        material: string;
+        levels?: undefined;
+        bays?: undefined;
+        status?: undefined;
+        carriageHeight?: undefined;
+    };
+} | {
+    type: string;
+    description: string;
+    group: string;
+    icon: string;
+    model: {
+        type: string;
+        top: number;
+        left: number;
+        width: number;
+        height: number;
+        material?: undefined;
+        levels?: undefined;
+        bays?: undefined;
+        status?: undefined;
+        carriageHeight?: undefined;
+    };
+} | {
+    type: string;
+    description: string;
+    group: string;
+    icon: string;
+    model: {
+        type: string;
+        top: number;
+        left: number;
+        width: number;
+        height: number;
+        levels: number;
+        bays: number;
+        material?: undefined;
+        status?: undefined;
+        carriageHeight?: undefined;
+    };
+} | {
+    type: string;
+    description: string;
+    group: string;
+    icon: string;
+    model: {
+        type: string;
+        top: number;
+        left: number;
+        width: number;
+        height: number;
+        status: string;
+        carriageHeight: number;
+        material?: undefined;
+        levels?: undefined;
+        bays?: undefined;
+    };
+})[];
+export default _default;

package/dist/templates/index.js

@@ -0,0 +1,115 @@
+/*
+ * things-scene catalog templates for the storage domain — pallet/box/parcel
+ * variants, ASRS rack/crane, and the virtual `spot` placement marker.
+ */
+import spot from './spot.js';
+const palletWood = new URL('../../icons/pallet-wood.png', import.meta.url).href;
+const palletPlastic = new URL('../../icons/pallet-plastic.png', import.meta.url).href;
+const boxWood = new URL('../../icons/box-wood.png', import.meta.url).href;
+const boxPlastic = new URL('../../icons/box-plastic.png', import.meta.url).href;
+const parcel = new URL('../../icons/parcel.png', import.meta.url).href;
+const asrsRack = new URL('../../icons/asrs-rack.png', import.meta.url).href;
+const asrsCrane = new URL('../../icons/asrs-crane.png', import.meta.url).href;
+export default [
+    {
+        type: 'pallet',
+        description: 'wood pallet (EUR / EPAL)',
+        group: 'storage',
+        icon: palletWood,
+        model: {
+            type: 'pallet',
+            top: 100,
+            left: 100,
+            width: 120,
+            height: 80,
+            material: 'wood'
+        }
+    },
+    {
+        type: 'pallet',
+        description: 'plastic pallet',
+        group: 'storage',
+        icon: palletPlastic,
+        model: {
+            type: 'pallet',
+            top: 100,
+            left: 250,
+            width: 120,
+            height: 80,
+            material: 'plastic'
+        }
+    },
+    {
+        type: 'box',
+        description: 'wood crate',
+        group: 'storage',
+        icon: boxWood,
+        model: {
+            type: 'box',
+            top: 100,
+            left: 400,
+            width: 80,
+            height: 80,
+            material: 'wood'
+        }
+    },
+    {
+        type: 'box',
+        description: 'plastic tote',
+        group: 'storage',
+        icon: boxPlastic,
+        model: {
+            type: 'box',
+            top: 100,
+            left: 520,
+            width: 80,
+            height: 80,
+            material: 'plastic'
+        }
+    },
+    {
+        type: 'parcel',
+        description: 'cardboard parcel',
+        group: 'storage',
+        icon: parcel,
+        model: {
+            type: 'parcel',
+            top: 100,
+            left: 640,
+            width: 60,
+            height: 90
+        }
+    },
+    {
+        type: 'asrs-rack',
+        description: 'AS/RS storage rack (multi-level)',
+        group: 'storage',
+        icon: asrsRack,
+        model: {
+            type: 'asrs-rack',
+            top: 300,
+            left: 100,
+            width: 800,
+            height: 200,
+            levels: 4,
+            bays: 5
+        }
+    },
+    {
+        type: 'asrs-crane',
+        description: 'AS/RS stacker crane',
+        group: 'storage',
+        icon: asrsCrane,
+        model: {
+            type: 'asrs-crane',
+            top: 550,
+            left: 400,
+            width: 100,
+            height: 200,
+            status: 'idle',
+            carriageHeight: 100
+        }
+    },
+    spot
+];
+//# sourceMappingURL=index.js.map