@operato/board 10.0.0-beta.2 → 10.0.0-beta.20

package/CHANGELOG.md

@@ -3,6 +3,173 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [10.0.0-beta.20](https://github.com/hatiolab/operato/compare/v10.0.0-beta.19...v10.0.0-beta.20) (2026-03-29)
+
+
+### :house: Code Refactoring
+
+* **board:** fab를 expand/collapse 패턴으로 통일 ([ef369ef](https://github.com/hatiolab/operato/commit/ef369ef959780f52499a3ce08fae3f10a7d2a910))
+
+
+
+## [10.0.0-beta.19](https://github.com/hatiolab/operato/compare/v10.0.0-beta.18...v10.0.0-beta.19) (2026-03-29)
+
+
+### :rocket: New Features
+
+* **board:** viewer 3D 토글 fab 추가, 보드 선택 카드 강조 + 자동 스크롤 ([9c5c14c](https://github.com/hatiolab/operato/commit/9c5c14c9dfcb69d3830f8e50c1e5a6d82de5f419))
+
+
+
+## [10.0.0-beta.18](https://github.com/hatiolab/operato/compare/v10.0.0-beta.17...v10.0.0-beta.18) (2026-03-25)
+
+**Note:** Version bump only for package @operato/board
+
+
+
+
+
+## [10.0.0-beta.17](https://github.com/hatiolab/operato/compare/v10.0.0-beta.16...v10.0.0-beta.17) (2026-03-23)
+
+
+### :rocket: New Features
+
+* **board:** add board model cache (IndexedDB) ([122036d](https://github.com/hatiolab/operato/commit/122036d19063a4f9e47d5f4d325615f6e895a328))
+
+
+
+## [10.0.0-beta.16](https://github.com/hatiolab/operato/compare/v10.0.0-beta.15...v10.0.0-beta.16) (2026-03-23)
+
+
+### :rocket: New Features
+
+* **board:** scene monitor 연동 — load tracker/overlay 통합 ([265a716](https://github.com/hatiolab/operato/commit/265a7167b21337b3842d2bae5ef95ba3d071053c))
+
+
+
+## [10.0.0-beta.15](https://github.com/hatiolab/operato/compare/v10.0.0-beta.14...v10.0.0-beta.15) (2026-03-22)
+
+
+### :rocket: New Features
+
+* **board:** 데이터바인딩 팝업 에디터 + property 콤보박스 + D키 핫키 ([d467180](https://github.com/hatiolab/operato/commit/d467180e106b1d268099bf9895082e2c6cf8d07b))
+
+
+### :bug: Bug Fix
+
+* **board:** 데이터바인딩 팝업 모델 반영 + GLTF animations 트리 + 사이드바 저장 조건 완화 ([46fe68e](https://github.com/hatiolab/operato/commit/46fe68ea8c3af43c5c4275a42cd7bb5e761ec118))
+
+
+
+## [10.0.0-beta.14](https://github.com/hatiolab/operato/compare/v10.0.0-beta.13...v10.0.0-beta.14) (2026-03-20)
+
+
+### :rocket: New Features
+
+* **board:** 모델러에 snap-guide-layer 추가 ([85e091b](https://github.com/hatiolab/operato/commit/85e091b4f3486845ef9804610d9237f5d8902de3))
+
+
+### :house: Code Refactoring
+
+* **board:** 모델러에서 guide-layer 제거 ([dbfd8fe](https://github.com/hatiolab/operato/commit/dbfd8fe19a0739671e6e27849dd6f3b1d3b53c97))
+
+
+
+## [10.0.0-beta.13](https://github.com/hatiolab/operato/compare/v10.0.0-beta.12...v10.0.0-beta.13) (2026-03-19)
+
+
+### :bug: Bug Fix
+
+* **board:** 편집 툴바 조건부 버튼 이벤트 바인딩 + dimension 초기화 ([e642ffa](https://github.com/hatiolab/operato/commit/e642ffa8be05cf4305f857fd4bef633611401c42))
+
+
+
+## [10.0.0-beta.12](https://github.com/hatiolab/operato/compare/v10.0.0-beta.11...v10.0.0-beta.12) (2026-03-17)
+
+**Note:** Version bump only for package @operato/board
+
+
+
+
+
+## [10.0.0-beta.11](https://github.com/hatiolab/operato/compare/v10.0.0-beta.10...v10.0.0-beta.11) (2026-03-15)
+
+
+### :bug: Bug Fix
+
+* **board:** 프리뷰 팝업에 preventCloseOnBlur 옵션 추가 ([c73cd97](https://github.com/hatiolab/operato/commit/c73cd97210bb280b932b10fca125ef2022c6766e))
+
+
+
+## [10.0.0-beta.10](https://github.com/hatiolab/operato/compare/v10.0.0-beta.9...v10.0.0-beta.10) (2026-03-14)
+
+**Note:** Version bump only for package @operato/board
+
+
+
+
+
+## [10.0.0-beta.9](https://github.com/hatiolab/operato/compare/v10.0.0-beta.8...v10.0.0-beta.9) (2026-03-13)
+
+
+### :rocket: New Features
+
+* **board:** 2D/3D 모드별 edit-toolbar 분기 ([26ca616](https://github.com/hatiolab/operato/commit/26ca616b85294af77a8eed5f24c937c612db57f8))
+* **board:** 3D 모드 기즈모 버튼, 툴바 UX 개선 ([45b46ff](https://github.com/hatiolab/operato/commit/45b46ff47ac2258bac66db51c0a6b46b16f26fbe))
+
+
+
+## [10.0.0-beta.8](https://github.com/hatiolab/operato/compare/v10.0.0-beta.7...v10.0.0-beta.8) (2026-03-13)
+
+
+### :rocket: New Features
+
+* **board:** add playback feature for historical data replay ([e8a3a73](https://github.com/hatiolab/operato/commit/e8a3a730648c2b5ec17244b157e1ce59b728b524))
+
+
+
+## [10.0.0-beta.7](https://github.com/hatiolab/operato/compare/v10.0.0-beta.6...v10.0.0-beta.7) (2026-03-09)
+
+
+### :bug: Bug Fix
+
+* **board:** correct invalid CSS overflow and remove debug console.log ([7292222](https://github.com/hatiolab/operato/commit/7292222646bde1140018465b4fe57f529103c48c))
+
+
+
+## [10.0.0-beta.6](https://github.com/hatiolab/operato/compare/v10.0.0-beta.5...v10.0.0-beta.6) (2026-03-09)
+
+
+### :bug: Bug Fix
+
+* **board:** remove unnecessary reactive properties to prevent Lit update warnings ([2e6ad75](https://github.com/hatiolab/operato/commit/2e6ad75b853fc27a56410e4fff7de24325d24d24))
+
+
+
+## [10.0.0-beta.5](https://github.com/hatiolab/operato/compare/v10.0.0-beta.4...v10.0.0-beta.5) (2026-03-08)
+
+**Note:** Version bump only for package @operato/board
+
+
+
+
+
+## [10.0.0-beta.4](https://github.com/hatiolab/operato/compare/v10.0.0-beta.3...v10.0.0-beta.4) (2026-03-06)
+
+**Note:** Version bump only for package @operato/board
+
+
+
+
+
+## [10.0.0-beta.3](https://github.com/hatiolab/operato/compare/v10.0.0-beta.2...v10.0.0-beta.3) (2026-03-06)
+
+**Note:** Version bump only for package @operato/board
+
+
+
+
+
 ## [10.0.0-beta.2](https://github.com/hatiolab/operato/compare/v10.0.0-beta.1...v10.0.0-beta.2) (2026-03-05)
 
 

package/dist/src/data-storage/board-model-cache.d.ts

@@ -0,0 +1,30 @@
+export interface CachedBoard {
+    id: string;
+    name: string;
+    model: any;
+    updatedAt: string;
+}
+export declare class BoardModelCache {
+    /**
+     * 캐시에서 보드 모델 조회
+     * @returns 캐시된 보드 또는 null
+     */
+    static get(boardId: string): Promise<CachedBoard | null>;
+    /**
+     * 보드 모델을 캐시에 저장
+     */
+    static put(boardId: string, name: string, model: string, updatedAt: string): Promise<void>;
+    /**
+     * 캐시가 최신인지 확인
+     * @returns true면 캐시 유효, false면 갱신 필요
+     */
+    static isValid(boardId: string, serverUpdatedAt: string): Promise<boolean>;
+    /**
+     * 특정 보드 캐시 삭제
+     */
+    static remove(boardId: string): Promise<void>;
+    /**
+     * 전체 캐시 클리어
+     */
+    static clear(): Promise<void>;
+}

package/dist/src/data-storage/board-model-cache.js

@@ -0,0 +1,93 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ *
+ * BoardModelCache — 보드 모델 JSON을 IndexedDB에 캐싱.
+ *
+ * 캐시 히트 시 네트워크 대기 없이 즉시 scene 생성 가능.
+ * updatedAt 비교로 캐시 무효화.
+ */
+import Dexie from 'dexie';
+class BoardModelDatabase extends Dexie {
+    constructor() {
+        super('board-model-cache');
+        this.version(1).stores({
+            board_models: 'id'
+        });
+    }
+}
+const db = new BoardModelDatabase();
+export class BoardModelCache {
+    /**
+     * 캐시에서 보드 모델 조회
+     * @returns 캐시된 보드 또는 null
+     */
+    static async get(boardId) {
+        try {
+            const record = await db.board_models.get(boardId);
+            if (!record)
+                return null;
+            return {
+                id: record.id,
+                name: record.name,
+                model: JSON.parse(record.model),
+                updatedAt: record.updatedAt
+            };
+        }
+        catch (_a) {
+            return null;
+        }
+    }
+    /**
+     * 보드 모델을 캐시에 저장
+     */
+    static async put(boardId, name, model, updatedAt) {
+        try {
+            await db.board_models.put({
+                id: boardId,
+                name,
+                model,
+                updatedAt,
+                cachedAt: Date.now()
+            });
+        }
+        catch (_a) {
+            // 캐시 저장 실패는 무시 — 기능에 영향 없음
+        }
+    }
+    /**
+     * 캐시가 최신인지 확인
+     * @returns true면 캐시 유효, false면 갱신 필요
+     */
+    static async isValid(boardId, serverUpdatedAt) {
+        try {
+            const record = await db.board_models.get(boardId);
+            return (record === null || record === void 0 ? void 0 : record.updatedAt) === serverUpdatedAt;
+        }
+        catch (_a) {
+            return false;
+        }
+    }
+    /**
+     * 특정 보드 캐시 삭제
+     */
+    static async remove(boardId) {
+        try {
+            await db.board_models.delete(boardId);
+        }
+        catch (_a) {
+            // ignore
+        }
+    }
+    /**
+     * 전체 캐시 클리어
+     */
+    static async clear() {
+        try {
+            await db.board_models.clear();
+        }
+        catch (_a) {
+            // ignore
+        }
+    }
+}
+//# sourceMappingURL=board-model-cache.js.map

package/dist/src/data-storage/board-model-cache.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"board-model-cache.js","sourceRoot":"","sources":["../../../src/data-storage/board-model-cache.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAA;AAUzB,MAAM,kBAAmB,SAAQ,KAAK;IAGpC;QACE,KAAK,CAAC,mBAAmB,CAAC,CAAA;QAC1B,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;YACrB,YAAY,EAAE,IAAI;SACnB,CAAC,CAAA;IACJ,CAAC;CACF;AAED,MAAM,EAAE,GAAG,IAAI,kBAAkB,EAAE,CAAA;AASnC,MAAM,OAAO,eAAe;IAC1B;;;OAGG;IACH,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,OAAe;QAC9B,IAAI,CAAC;YACH,MAAM,MAAM,GAAG,MAAM,EAAE,CAAC,YAAY,CAAC,GAAG,CAAC,OAAO,CAAC,CAAA;YACjD,IAAI,CAAC,MAAM;gBAAE,OAAO,IAAI,CAAA;YAExB,OAAO;gBACL,EAAE,EAAE,MAAM,CAAC,EAAE;gBACb,IAAI,EAAE,MAAM,CAAC,IAAI;gBACjB,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;gBAC/B,SAAS,EAAE,MAAM,CAAC,SAAS;aAC5B,CAAA;QACH,CAAC;QAAC,WAAM,CAAC;YACP,OAAO,IAAI,CAAA;QACb,CAAC;IACH,CAAC;IAED;;OAEG;IACH,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,OAAe,EAAE,IAAY,EAAE,KAAa,EAAE,SAAiB;QAC9E,IAAI,CAAC;YACH,MAAM,EAAE,CAAC,YAAY,CAAC,GAAG,CAAC;gBACxB,EAAE,EAAE,OAAO;gBACX,IAAI;gBACJ,KAAK;gBACL,SAAS;gBACT,QAAQ,EAAE,IAAI,CAAC,GAAG,EAAE;aACrB,CAAC,CAAA;QACJ,CAAC;QAAC,WAAM,CAAC;YACP,2BAA2B;QAC7B,CAAC;IACH,CAAC;IAED;;;OAGG;IACH,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,OAAe,EAAE,eAAuB;QAC3D,IAAI,CAAC;YACH,MAAM,MAAM,GAAG,MAAM,EAAE,CAAC,YAAY,CAAC,GAAG,CAAC,OAAO,CAAC,CAAA;YACjD,OAAO,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,SAAS,MAAK,eAAe,CAAA;QAC9C,CAAC;QAAC,WAAM,CAAC;YACP,OAAO,KAAK,CAAA;QACd,CAAC;IACH,CAAC;IAED;;OAEG;IACH,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,OAAe;QACjC,IAAI,CAAC;YACH,MAAM,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA;QACvC,CAAC;QAAC,WAAM,CAAC;YACP,SAAS;QACX,CAAC;IACH,CAAC;IAED;;OAEG;IACH,MAAM,CAAC,KAAK,CAAC,KAAK;QAChB,IAAI,CAAC;YACH,MAAM,EAAE,CAAC,YAAY,CAAC,KAAK,EAAE,CAAA;QAC/B,CAAC;QAAC,WAAM,CAAC;YACP,SAAS;QACX,CAAC;IACH,CAAC;CACF","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n *\n * BoardModelCache — 보드 모델 JSON을 IndexedDB에 캐싱.\n *\n * 캐시 히트 시 네트워크 대기 없이 즉시 scene 생성 가능.\n * updatedAt 비교로 캐시 무효화.\n */\n\nimport Dexie from 'dexie'\n\ninterface IBoardModelRecord {\n  id: string          // board ID (primary key)\n  name: string\n  model: string       // JSON string (파싱 전)\n  updatedAt: string   // 서버의 updatedAt\n  cachedAt: number    // 로컬 캐시 시점\n}\n\nclass BoardModelDatabase extends Dexie {\n  board_models!: Dexie.Table<IBoardModelRecord, string>\n\n  constructor() {\n    super('board-model-cache')\n    this.version(1).stores({\n      board_models: 'id'\n    })\n  }\n}\n\nconst db = new BoardModelDatabase()\n\nexport interface CachedBoard {\n  id: string\n  name: string\n  model: any      // 파싱된 모델 객체\n  updatedAt: string\n}\n\nexport class BoardModelCache {\n  /**\n   * 캐시에서 보드 모델 조회\n   * @returns 캐시된 보드 또는 null\n   */\n  static async get(boardId: string): Promise<CachedBoard | null> {\n    try {\n      const record = await db.board_models.get(boardId)\n      if (!record) return null\n\n      return {\n        id: record.id,\n        name: record.name,\n        model: JSON.parse(record.model),\n        updatedAt: record.updatedAt\n      }\n    } catch {\n      return null\n    }\n  }\n\n  /**\n   * 보드 모델을 캐시에 저장\n   */\n  static async put(boardId: string, name: string, model: string, updatedAt: string): Promise<void> {\n    try {\n      await db.board_models.put({\n        id: boardId,\n        name,\n        model,\n        updatedAt,\n        cachedAt: Date.now()\n      })\n    } catch {\n      // 캐시 저장 실패는 무시 — 기능에 영향 없음\n    }\n  }\n\n  /**\n   * 캐시가 최신인지 확인\n   * @returns true면 캐시 유효, false면 갱신 필요\n   */\n  static async isValid(boardId: string, serverUpdatedAt: string): Promise<boolean> {\n    try {\n      const record = await db.board_models.get(boardId)\n      return record?.updatedAt === serverUpdatedAt\n    } catch {\n      return false\n    }\n  }\n\n  /**\n   * 특정 보드 캐시 삭제\n   */\n  static async remove(boardId: string): Promise<void> {\n    try {\n      await db.board_models.delete(boardId)\n    } catch {\n      // ignore\n    }\n  }\n\n  /**\n   * 전체 캐시 클리어\n   */\n  static async clear(): Promise<void> {\n    try {\n      await db.board_models.clear()\n    } catch {\n      // ignore\n    }\n  }\n}\n"]}

package/dist/src/graphql/playback-subscription.d.ts

@@ -0,0 +1,74 @@
+import { Component, DataSubscriptionProvider } from '@hatiolab/things-scene';
+export type PlaybackState = 'idle' | 'playing' | 'paused' | 'stopped';
+export interface PlaybackStatus {
+    state: PlaybackState;
+    currentTime: string;
+    speed: number;
+}
+export interface PlaybackConfig {
+    /** 플레이백 가능한 시간 범위 */
+    timeRange?: {
+        from: Date;
+        to: Date;
+    };
+}
+/**
+ * PlaybackProvider
+ *
+ * 백엔드 플레이백 서비스와 point-to-point 구독으로 통신하는 DataSubscriptionProvider.
+ * 백엔드가 요청된 시점/배속으로 스냅샷을 실시간처럼 푸시하면,
+ * 이를 받아서 등록된 컴포넌트에 전달한다.
+ *
+ * 실시간 DataSubscriptionProviderImpl과 동일한 인터페이스를 구현하므로
+ * Scene 입장에서는 실시간/플레이백을 구분하지 않는다.
+ */
+export declare class PlaybackProvider implements DataSubscriptionProvider {
+    private _components;
+    private _subscription;
+    private _state;
+    private _speed;
+    private _currentTime;
+    private _onStatusChange?;
+    constructor(onStatusChange?: (status: PlaybackStatus) => void);
+    get state(): PlaybackState;
+    get speed(): number;
+    get currentTime(): string;
+    /**
+     * DataSubscriptionProvider.subscribe 구현
+     * 컴포넌트를 tag별로 등록한다. 실제 데이터는 백엔드 구독을 통해 수신된다.
+     */
+    subscribe(tag: string, component: Component): Promise<{
+        unsubscribe: () => void;
+    }>;
+    /**
+     * 플레이백 시작 — 백엔드에 point-to-point 구독을 개시한다.
+     */
+    start(fromTime: Date, speed?: number): Promise<void>;
+    /**
+     * 일시정지
+     */
+    pause(): Promise<void>;
+    /**
+     * 재개
+     */
+    resume(): Promise<void>;
+    /**
+     * 특정 시점으로 이동
+     */
+    seek(toTime: Date): Promise<void>;
+    /**
+     * 배속 변경
+     */
+    setSpeed(speed: number): Promise<void>;
+    /**
+     * 플레이백 중지 및 구독 해제
+     */
+    stop(): void;
+    /**
+     * DataSubscriptionProvider.dispose 구현
+     */
+    dispose(): void;
+    private _distributeSnapshot;
+    private _sendCommand;
+    private _notifyStatus;
+}

package/dist/src/graphql/playback-subscription.js

@@ -0,0 +1,191 @@
+import gql from 'graphql-tag';
+import { subscribe } from '@operato/graphql';
+/**
+ * PlaybackProvider
+ *
+ * 백엔드 플레이백 서비스와 point-to-point 구독으로 통신하는 DataSubscriptionProvider.
+ * 백엔드가 요청된 시점/배속으로 스냅샷을 실시간처럼 푸시하면,
+ * 이를 받아서 등록된 컴포넌트에 전달한다.
+ *
+ * 실시간 DataSubscriptionProviderImpl과 동일한 인터페이스를 구현하므로
+ * Scene 입장에서는 실시간/플레이백을 구분하지 않는다.
+ */
+export class PlaybackProvider {
+    constructor(onStatusChange) {
+        this._components = new Map();
+        this._subscription = null;
+        this._state = 'idle';
+        this._speed = 1;
+        this._currentTime = '';
+        this._onStatusChange = onStatusChange;
+    }
+    get state() {
+        return this._state;
+    }
+    get speed() {
+        return this._speed;
+    }
+    get currentTime() {
+        return this._currentTime;
+    }
+    /**
+     * DataSubscriptionProvider.subscribe 구현
+     * 컴포넌트를 tag별로 등록한다. 실제 데이터는 백엔드 구독을 통해 수신된다.
+     */
+    async subscribe(tag, component) {
+        if (!this._components.has(tag)) {
+            this._components.set(tag, new Set());
+        }
+        this._components.get(tag).add(component);
+        return {
+            unsubscribe: () => {
+                const components = this._components.get(tag);
+                if (components) {
+                    components.delete(component);
+                    if (components.size === 0) {
+                        this._components.delete(tag);
+                    }
+                }
+            }
+        };
+    }
+    /**
+     * 플레이백 시작 — 백엔드에 point-to-point 구독을 개시한다.
+     */
+    async start(fromTime, speed = 1) {
+        var _a;
+        // 기존 구독이 있으면 정리
+        (_a = this._subscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+        this._speed = speed;
+        this._state = 'playing';
+        this._subscription = await subscribe({
+            query: gql `
+          subscription Playback($fromTime: String!, $speed: Float!) {
+            playback(fromTime: $fromTime, speed: $speed) {
+              timestamp
+              data
+            }
+          }
+        `,
+            variables: {
+                fromTime: fromTime.toISOString(),
+                speed
+            }
+        }, {
+            next: ({ data }) => {
+                if (!(data === null || data === void 0 ? void 0 : data.playback))
+                    return;
+                const { timestamp, data: snapshotData } = data.playback;
+                this._currentTime = timestamp;
+                // 스냅샷 데이터를 tag별로 분배
+                this._distributeSnapshot(snapshotData);
+                this._notifyStatus();
+            },
+            error: (err) => {
+                console.error('[PlaybackProvider] subscription error:', err);
+                this._state = 'stopped';
+                this._notifyStatus();
+            },
+            complete: () => {
+                this._state = 'stopped';
+                this._notifyStatus();
+            }
+        });
+        this._notifyStatus();
+    }
+    /**
+     * 일시정지
+     */
+    async pause() {
+        if (this._state !== 'playing')
+            return;
+        this._state = 'paused';
+        // 백엔드에 pause 명령 전송 (mutation)
+        await this._sendCommand('pause');
+        this._notifyStatus();
+    }
+    /**
+     * 재개
+     */
+    async resume() {
+        if (this._state !== 'paused')
+            return;
+        this._state = 'playing';
+        await this._sendCommand('resume');
+        this._notifyStatus();
+    }
+    /**
+     * 특정 시점으로 이동
+     */
+    async seek(toTime) {
+        await this._sendCommand('seek', { toTime: toTime.toISOString() });
+        this._currentTime = toTime.toISOString();
+        this._notifyStatus();
+    }
+    /**
+     * 배속 변경
+     */
+    async setSpeed(speed) {
+        this._speed = speed;
+        await this._sendCommand('speed', { speed });
+        this._notifyStatus();
+    }
+    /**
+     * 플레이백 중지 및 구독 해제
+     */
+    stop() {
+        var _a;
+        (_a = this._subscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+        this._subscription = null;
+        this._state = 'stopped';
+        this._notifyStatus();
+    }
+    /**
+     * DataSubscriptionProvider.dispose 구현
+     */
+    dispose() {
+        this.stop();
+        this._components.clear();
+    }
+    _distributeSnapshot(snapshotData) {
+        if (!snapshotData || typeof snapshotData !== 'object')
+            return;
+        // snapshotData: { tag1: value1, tag2: value2, ... }
+        for (const [tag, value] of Object.entries(snapshotData)) {
+            const components = this._components.get(tag);
+            if (components) {
+                for (const component of components) {
+                    component.data = value;
+                }
+            }
+        }
+    }
+    async _sendCommand(command, params = {}) {
+        try {
+            const { client } = await import('@operato/graphql');
+            await client.mutate({
+                mutation: gql `
+          mutation PlaybackControl($command: String!, $params: String) {
+            playbackControl(command: $command, params: $params)
+          }
+        `,
+                variables: {
+                    command,
+                    params: JSON.stringify(params)
+                }
+            });
+        }
+        catch (e) {
+            console.error('[PlaybackProvider] command failed:', command, e);
+        }
+    }
+    _notifyStatus() {
+        var _a;
+        (_a = this._onStatusChange) === null || _a === void 0 ? void 0 : _a.call(this, {
+            state: this._state,
+            currentTime: this._currentTime,
+            speed: this._speed
+        });
+    }
+}
+//# sourceMappingURL=playback-subscription.js.map

package/dist/src/graphql/playback-subscription.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"playback-subscription.js","sourceRoot":"","sources":["../../../src/graphql/playback-subscription.ts"],"names":[],"mappings":"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","sourcesContent":["import { Component, DataSubscriptionProvider } from '@hatiolab/things-scene'\n\nimport gql from 'graphql-tag'\nimport { subscribe } from '@operato/graphql'\n\nexport type PlaybackState = 'idle' | 'playing' | 'paused' | 'stopped'\n\nexport interface PlaybackStatus {\n  state: PlaybackState\n  currentTime: string\n  speed: number\n}\n\nexport interface PlaybackConfig {\n  /** 플레이백 가능한 시간 범위 */\n  timeRange?: { from: Date; to: Date }\n}\n\n/**\n * PlaybackProvider\n *\n * 백엔드 플레이백 서비스와 point-to-point 구독으로 통신하는 DataSubscriptionProvider.\n * 백엔드가 요청된 시점/배속으로 스냅샷을 실시간처럼 푸시하면,\n * 이를 받아서 등록된 컴포넌트에 전달한다.\n *\n * 실시간 DataSubscriptionProviderImpl과 동일한 인터페이스를 구현하므로\n * Scene 입장에서는 실시간/플레이백을 구분하지 않는다.\n */\nexport class PlaybackProvider implements DataSubscriptionProvider {\n  private _components: Map<string, Set<Component>> = new Map()\n  private _subscription: { unsubscribe: () => void } | null = null\n  private _state: PlaybackState = 'idle'\n  private _speed: number = 1\n  private _currentTime: string = ''\n  private _onStatusChange?: (status: PlaybackStatus) => void\n\n  constructor(onStatusChange?: (status: PlaybackStatus) => void) {\n    this._onStatusChange = onStatusChange\n  }\n\n  get state() {\n    return this._state\n  }\n\n  get speed() {\n    return this._speed\n  }\n\n  get currentTime() {\n    return this._currentTime\n  }\n\n  /**\n   * DataSubscriptionProvider.subscribe 구현\n   * 컴포넌트를 tag별로 등록한다. 실제 데이터는 백엔드 구독을 통해 수신된다.\n   */\n  async subscribe(tag: string, component: Component) {\n    if (!this._components.has(tag)) {\n      this._components.set(tag, new Set())\n    }\n    this._components.get(tag)!.add(component)\n\n    return {\n      unsubscribe: () => {\n        const components = this._components.get(tag)\n        if (components) {\n          components.delete(component)\n          if (components.size === 0) {\n            this._components.delete(tag)\n          }\n        }\n      }\n    }\n  }\n\n  /**\n   * 플레이백 시작 — 백엔드에 point-to-point 구독을 개시한다.\n   */\n  async start(fromTime: Date, speed: number = 1) {\n    // 기존 구독이 있으면 정리\n    this._subscription?.unsubscribe()\n\n    this._speed = speed\n    this._state = 'playing'\n\n    this._subscription = await subscribe(\n      {\n        query: gql`\n          subscription Playback($fromTime: String!, $speed: Float!) {\n            playback(fromTime: $fromTime, speed: $speed) {\n              timestamp\n              data\n            }\n          }\n        `,\n        variables: {\n          fromTime: fromTime.toISOString(),\n          speed\n        }\n      },\n      {\n        next: ({ data }: { data: any }) => {\n          if (!data?.playback) return\n\n          const { timestamp, data: snapshotData } = data.playback\n          this._currentTime = timestamp\n\n          // 스냅샷 데이터를 tag별로 분배\n          this._distributeSnapshot(snapshotData)\n\n          this._notifyStatus()\n        },\n        error: (err: any) => {\n          console.error('[PlaybackProvider] subscription error:', err)\n          this._state = 'stopped'\n          this._notifyStatus()\n        },\n        complete: () => {\n          this._state = 'stopped'\n          this._notifyStatus()\n        }\n      }\n    )\n\n    this._notifyStatus()\n  }\n\n  /**\n   * 일시정지\n   */\n  async pause() {\n    if (this._state !== 'playing') return\n\n    this._state = 'paused'\n\n    // 백엔드에 pause 명령 전송 (mutation)\n    await this._sendCommand('pause')\n    this._notifyStatus()\n  }\n\n  /**\n   * 재개\n   */\n  async resume() {\n    if (this._state !== 'paused') return\n\n    this._state = 'playing'\n\n    await this._sendCommand('resume')\n    this._notifyStatus()\n  }\n\n  /**\n   * 특정 시점으로 이동\n   */\n  async seek(toTime: Date) {\n    await this._sendCommand('seek', { toTime: toTime.toISOString() })\n    this._currentTime = toTime.toISOString()\n    this._notifyStatus()\n  }\n\n  /**\n   * 배속 변경\n   */\n  async setSpeed(speed: number) {\n    this._speed = speed\n    await this._sendCommand('speed', { speed })\n    this._notifyStatus()\n  }\n\n  /**\n   * 플레이백 중지 및 구독 해제\n   */\n  stop() {\n    this._subscription?.unsubscribe()\n    this._subscription = null\n    this._state = 'stopped'\n    this._notifyStatus()\n  }\n\n  /**\n   * DataSubscriptionProvider.dispose 구현\n   */\n  dispose() {\n    this.stop()\n    this._components.clear()\n  }\n\n  private _distributeSnapshot(snapshotData: any) {\n    if (!snapshotData || typeof snapshotData !== 'object') return\n\n    // snapshotData: { tag1: value1, tag2: value2, ... }\n    for (const [tag, value] of Object.entries(snapshotData)) {\n      const components = this._components.get(tag)\n      if (components) {\n        for (const component of components) {\n          component.data = value\n        }\n      }\n    }\n  }\n\n  private async _sendCommand(command: string, params: Record<string, any> = {}) {\n    try {\n      const { client } = await import('@operato/graphql')\n      await client.mutate({\n        mutation: gql`\n          mutation PlaybackControl($command: String!, $params: String) {\n            playbackControl(command: $command, params: $params)\n          }\n        `,\n        variables: {\n          command,\n          params: JSON.stringify(params)\n        }\n      })\n    } catch (e) {\n      console.error('[PlaybackProvider] command failed:', command, e)\n    }\n  }\n\n  private _notifyStatus() {\n    this._onStatusChange?.({\n      state: this._state,\n      currentTime: this._currentTime,\n      speed: this._speed\n    })\n  }\n}\n"]}

package/dist/src/index.d.ts

@@ -1,6 +1,8 @@
 export * from './types.js';
 export { registerDefaultGroups } from './component/register-default-groups.js';
 export { BoardDataStorage, PlaylistStorage } from './data-storage/data-storage.js';
+export { BoardModelCache } from './data-storage/board-model-cache.js';
+export type { CachedBoard } from './data-storage/board-model-cache.js';
 export * from './ox-board-viewer.js';
 export * from './ox-board-player.js';
 export * from './ox-board-modeller.js';

package/dist/src/index.js

@@ -1,6 +1,7 @@
 export * from './types.js';
 export { registerDefaultGroups } from './component/register-default-groups.js';
 export { BoardDataStorage, PlaylistStorage } from './data-storage/data-storage.js';
+export { BoardModelCache } from './data-storage/board-model-cache.js';
 export * from './ox-board-viewer.js';
 export * from './ox-board-player.js';
 export * from './ox-board-modeller.js';

package/dist/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA;AAE1B,OAAO,EAAE,qBAAqB,EAAE,MAAM,wCAAwC,CAAA;AAC9E,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAA;AAElF,cAAc,sBAAsB,CAAA;AACpC,cAAc,sBAAsB,CAAA;AACpC,cAAc,wBAAwB,CAAA;AACtC,cAAc,oBAAoB,CAAA;AAClC,cAAc,+BAA+B,CAAA","sourcesContent":["export * from './types.js'\n\nexport { registerDefaultGroups } from './component/register-default-groups.js'\nexport { BoardDataStorage, PlaylistStorage } from './data-storage/data-storage.js'\n\nexport * from './ox-board-viewer.js'\nexport * from './ox-board-player.js'\nexport * from './ox-board-modeller.js'\nexport * from './ox-board-list.js'\nexport * from './ox-board-template-viewer.js'\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA;AAE1B,OAAO,EAAE,qBAAqB,EAAE,MAAM,wCAAwC,CAAA;AAC9E,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAA;AAClF,OAAO,EAAE,eAAe,EAAE,MAAM,qCAAqC,CAAA;AAGrE,cAAc,sBAAsB,CAAA;AACpC,cAAc,sBAAsB,CAAA;AACpC,cAAc,wBAAwB,CAAA;AACtC,cAAc,oBAAoB,CAAA;AAClC,cAAc,+BAA+B,CAAA","sourcesContent":["export * from './types.js'\n\nexport { registerDefaultGroups } from './component/register-default-groups.js'\nexport { BoardDataStorage, PlaylistStorage } from './data-storage/data-storage.js'\nexport { BoardModelCache } from './data-storage/board-model-cache.js'\nexport type { CachedBoard } from './data-storage/board-model-cache.js'\n\nexport * from './ox-board-viewer.js'\nexport * from './ox-board-player.js'\nexport * from './ox-board-modeller.js'\nexport * from './ox-board-list.js'\nexport * from './ox-board-template-viewer.js'\n"]}

package/dist/src/modeller/edit-toolbar-style.js

@@ -12,7 +12,7 @@ export const style = css `
   [tools] {
     display: flex;
     align-items: center;
-    overflow: none;
+    overflow: hidden;
     padding: 0px 10px;
   }
 
@@ -201,6 +201,43 @@ export const style = css `
     background-position-y: -1593px;
   }
 
+  #align-z-front {
+    background-position-y: -142px;
+    filter: hue-rotate(180deg);
+  }
+
+  #align-z-middle {
+    background-position-y: -192px;
+    filter: hue-rotate(180deg);
+  }
+
+  #align-z-back {
+    background-position-y: -242px;
+    filter: hue-rotate(180deg);
+  }
+
+  #distribute-z {
+    background-position-y: -1593px;
+    filter: hue-rotate(180deg);
+  }
+
+  .gizmo-btn {
+    background: none !important;
+    color: rgba(255, 255, 255, 0.5);
+    min-width: 24px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    border-radius: 3px;
+    padding: 2px;
+  }
+
+  .gizmo-btn[disabled] {
+    opacity: 0.3;
+    pointer-events: none;
+  }
+
   #toggle-property {
     background-position-y: -1392px;
   }