@operato/board 10.0.0-beta.5 → 10.0.0-beta.50

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

@@ -0,0 +1,89 @@
+import { Component, DataSubscriptionProvider } from '@hatiolab/things-scene';
+export type PlaybackState = 'idle' | 'playing' | 'paused' | 'stopped';
+export interface PlaybackStatus {
+    state: PlaybackState;
+    currentTime: string;
+    speed: number;
+    bufferedRanges?: {
+        from: number;
+        to: number;
+    }[];
+}
+export interface PlaybackConfig {
+    /** 플레이백 가능한 시간 범위 */
+    timeRange?: {
+        from: Date;
+        to: Date;
+    };
+}
+/**
+ * PlaybackProvider — YouTube 스트리밍 방식의 청크 기반 플레이백
+ *
+ * - 10분 단위로 데이터를 fetch하여 버퍼에 적재
+ * - 남은 데이터 1분 이하 시 다음 10분 prefetch
+ * - seek 시 기존 버퍼 전체 폐기 후 fresh fetch
+ * - requestAnimationFrame 기반 재생 루프
+ */
+export declare class PlaybackProvider implements DataSubscriptionProvider {
+    private _components;
+    private _buffer;
+    private _state;
+    private _speed;
+    private _playHead;
+    private _lastFrameTime;
+    private _rafId;
+    private _lastDistributedSnapshot;
+    private _onStatusChange?;
+    private _totalRange;
+    constructor(onStatusChange?: (status: PlaybackStatus) => void);
+    get state(): PlaybackState;
+    get speed(): number;
+    get currentTime(): string;
+    /**
+     * DataSubscriptionProvider.subscribe 구현
+     */
+    subscribe(tag: string, component: Component): Promise<{
+        unsubscribe: () => void;
+    }>;
+    /**
+     * 플레이백 시작
+     */
+    start(fromTime: Date, speed?: number, totalRange?: {
+        from: Date;
+        to: Date;
+    }): Promise<void>;
+    /**
+     * 일시정지
+     */
+    pause(): void;
+    /**
+     * 재개
+     */
+    resume(): void;
+    /**
+     * seek — 기존 버퍼 폐기 + 새 위치에서 fresh fetch
+     */
+    seek(toTime: Date): Promise<void>;
+    /**
+     * 배속 변경
+     */
+    setSpeed(speed: number): void;
+    /**
+     * 중지
+     */
+    stop(): void;
+    /**
+     * DataSubscriptionProvider.dispose 구현
+     */
+    dispose(): void;
+    private _startPlayLoop;
+    private _stopPlayLoop;
+    private _playLoop;
+    private _distributeSnapshot;
+    private _createFetcher;
+    /**
+     * 백엔드 응답을 PlaybackSnapshot[] 형식으로 변환
+     */
+    private _parsePlaybackResponse;
+    private _notifyStatus;
+}

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

@@ -0,0 +1,258 @@
+import gql from 'graphql-tag';
+import { PlaybackBuffer } from './playback-buffer.js';
+/**
+ * PlaybackProvider — YouTube 스트리밍 방식의 청크 기반 플레이백
+ *
+ * - 10분 단위로 데이터를 fetch하여 버퍼에 적재
+ * - 남은 데이터 1분 이하 시 다음 10분 prefetch
+ * - seek 시 기존 버퍼 전체 폐기 후 fresh fetch
+ * - requestAnimationFrame 기반 재생 루프
+ */
+export class PlaybackProvider {
+    constructor(onStatusChange) {
+        this._components = new Map();
+        this._buffer = null;
+        this._state = 'idle';
+        this._speed = 1;
+        this._playHead = 0;
+        this._lastFrameTime = 0;
+        this._rafId = 0;
+        this._lastDistributedSnapshot = null;
+        this._totalRange = null;
+        this._playLoop = (now) => {
+            if (this._state !== 'playing' || !this._buffer)
+                return;
+            const delta = (now - this._lastFrameTime) * this._speed;
+            this._lastFrameTime = now;
+            this._playHead += delta;
+            // 전체 범위 끝 도달 체크
+            if (this._totalRange && this._playHead >= this._totalRange.to.getTime()) {
+                this._playHead = this._totalRange.to.getTime();
+                this._state = 'stopped';
+                this._notifyStatus();
+                return;
+            }
+            // 현재 스냅샷 배포
+            const snap = this._buffer.getSnapshotAt(this._playHead);
+            if (snap && snap !== this._lastDistributedSnapshot) {
+                this._distributeSnapshot(snap.data);
+                this._lastDistributedSnapshot = snap;
+            }
+            // prefetch 체크 (비동기, 루프 블로킹 안 함)
+            this._buffer.checkPrefetch(this._playHead);
+            this._notifyStatus();
+            // 다음 프레임
+            this._rafId = requestAnimationFrame(this._playLoop);
+        };
+        this._onStatusChange = onStatusChange;
+    }
+    get state() { return this._state; }
+    get speed() { return this._speed; }
+    get currentTime() { return this._playHead ? new Date(this._playHead).toISOString() : ''; }
+    /**
+     * DataSubscriptionProvider.subscribe 구현
+     */
+    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);
+                    }
+                }
+            }
+        };
+    }
+    /**
+     * 플레이백 시작
+     */
+    async start(fromTime, speed = 1, totalRange) {
+        this.stop();
+        this._speed = speed;
+        this._totalRange = totalRange || { from: fromTime, to: new Date(fromTime.getTime() + 3600000) };
+        // 버퍼 생성 + 초기 로드
+        this._buffer = new PlaybackBuffer(this._createFetcher(), this._totalRange);
+        await this._buffer.loadInitial(fromTime.getTime());
+        this._playHead = fromTime.getTime();
+        this._state = 'playing';
+        this._lastFrameTime = performance.now();
+        this._startPlayLoop();
+        this._notifyStatus();
+    }
+    /**
+     * 일시정지
+     */
+    pause() {
+        if (this._state !== 'playing')
+            return;
+        this._state = 'paused';
+        this._stopPlayLoop();
+        this._notifyStatus();
+    }
+    /**
+     * 재개
+     */
+    resume() {
+        if (this._state !== 'paused')
+            return;
+        this._state = 'playing';
+        this._lastFrameTime = performance.now();
+        this._startPlayLoop();
+        this._notifyStatus();
+    }
+    /**
+     * seek — 기존 버퍼 폐기 + 새 위치에서 fresh fetch
+     */
+    async seek(toTime) {
+        if (!this._buffer)
+            return;
+        const wasPlaying = this._state === 'playing';
+        this._stopPlayLoop();
+        // 버퍼 전체 폐기 + 새 위치 로드
+        await this._buffer.seek(toTime.getTime());
+        this._playHead = toTime.getTime();
+        this._lastDistributedSnapshot = null;
+        // 새 위치의 첫 스냅샷 즉시 배포
+        const snap = this._buffer.getSnapshotAt(this._playHead);
+        if (snap) {
+            this._distributeSnapshot(snap.data);
+            this._lastDistributedSnapshot = snap;
+        }
+        if (wasPlaying) {
+            this._state = 'playing';
+            this._lastFrameTime = performance.now();
+            this._startPlayLoop();
+        }
+        this._notifyStatus();
+    }
+    /**
+     * 배속 변경
+     */
+    setSpeed(speed) {
+        this._speed = speed;
+        this._notifyStatus();
+    }
+    /**
+     * 중지
+     */
+    stop() {
+        var _a;
+        this._stopPlayLoop();
+        (_a = this._buffer) === null || _a === void 0 ? void 0 : _a.clear();
+        this._buffer = null;
+        this._state = 'stopped';
+        this._playHead = 0;
+        this._lastDistributedSnapshot = null;
+        this._notifyStatus();
+    }
+    /**
+     * DataSubscriptionProvider.dispose 구현
+     */
+    dispose() {
+        this.stop();
+        this._state = 'idle';
+        this._components.clear();
+    }
+    // --- 재생 루프 ---
+    _startPlayLoop() {
+        this._rafId = requestAnimationFrame(this._playLoop);
+    }
+    _stopPlayLoop() {
+        if (this._rafId) {
+            cancelAnimationFrame(this._rafId);
+            this._rafId = 0;
+        }
+    }
+    // --- 데이터 배포 ---
+    _distributeSnapshot(snapshotData) {
+        if (!snapshotData || typeof snapshotData !== 'object')
+            return;
+        for (const [tag, value] of Object.entries(snapshotData)) {
+            const components = this._components.get(tag);
+            if (components) {
+                for (const component of components) {
+                    component.data = value;
+                }
+            }
+        }
+    }
+    // --- 데이터 fetcher ---
+    _createFetcher() {
+        return async (fromTime, toTime) => {
+            var _a;
+            try {
+                const { client } = await import('@operato/graphql');
+                const response = await client.query({
+                    query: gql `
+            query PlaybackChunk($startTime: String!, $endTime: String!) {
+              playback(startTime: $startTime, endTime: $endTime) {
+                status
+                playback {
+                  scenarios {
+                    scenarioName
+                    snapshots {
+                      type
+                      time
+                      data
+                    }
+                  }
+                }
+              }
+            }
+          `,
+                    variables: {
+                        startTime: fromTime.toISOString().replace('T', ' ').replace(/\.\d+Z$/, ''),
+                        endTime: toTime.toISOString().replace('T', ' ').replace(/\.\d+Z$/, '')
+                    },
+                    fetchPolicy: 'no-cache'
+                });
+                return this._parsePlaybackResponse((_a = response.data) === null || _a === void 0 ? void 0 : _a.playback);
+            }
+            catch (e) {
+                console.error('[PlaybackProvider] chunk fetch error:', e);
+                return [];
+            }
+        };
+    }
+    /**
+     * 백엔드 응답을 PlaybackSnapshot[] 형식으로 변환
+     */
+    _parsePlaybackResponse(response) {
+        var _a;
+        if (!(response === null || response === void 0 ? void 0 : response.status) || !((_a = response === null || response === void 0 ? void 0 : response.playback) === null || _a === void 0 ? void 0 : _a.scenarios))
+            return [];
+        const snapshotMap = new Map();
+        for (const scenario of response.playback.scenarios) {
+            for (const record of scenario.snapshots) {
+                const time = new Date(record.time.replace(' ', 'T')).getTime();
+                const data = typeof record.data === 'string' ? JSON.parse(record.data) : record.data;
+                if (!snapshotMap.has(time)) {
+                    snapshotMap.set(time, {});
+                }
+                const merged = snapshotMap.get(time);
+                // scenarioName을 tag로 사용
+                merged[scenario.scenarioName] = data;
+            }
+        }
+        return Array.from(snapshotMap.entries())
+            .map(([timestamp, data]) => ({ timestamp, data }))
+            .sort((a, b) => a.timestamp - b.timestamp);
+    }
+    // --- 상태 통보 ---
+    _notifyStatus() {
+        var _a, _b;
+        (_a = this._onStatusChange) === null || _a === void 0 ? void 0 : _a.call(this, {
+            state: this._state,
+            currentTime: this._playHead ? new Date(this._playHead).toISOString() : '',
+            speed: this._speed,
+            bufferedRanges: (_b = this._buffer) === null || _b === void 0 ? void 0 : _b.getBufferedRanges()
+        });
+    }
+}
+//# 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'\nimport gql from 'graphql-tag'\nimport { PlaybackBuffer, type PlaybackSnapshot, type ChunkFetcher } from './playback-buffer.js'\n\nexport type PlaybackState = 'idle' | 'playing' | 'paused' | 'stopped'\n\nexport interface PlaybackStatus {\n  state: PlaybackState\n  currentTime: string\n  speed: number\n  bufferedRanges?: { from: number; to: number }[]\n}\n\nexport interface PlaybackConfig {\n  /** 플레이백 가능한 시간 범위 */\n  timeRange?: { from: Date; to: Date }\n}\n\n/**\n * PlaybackProvider — YouTube 스트리밍 방식의 청크 기반 플레이백\n *\n * - 10분 단위로 데이터를 fetch하여 버퍼에 적재\n * - 남은 데이터 1분 이하 시 다음 10분 prefetch\n * - seek 시 기존 버퍼 전체 폐기 후 fresh fetch\n * - requestAnimationFrame 기반 재생 루프\n */\nexport class PlaybackProvider implements DataSubscriptionProvider {\n  private _components: Map<string, Set<Component>> = new Map()\n  private _buffer: PlaybackBuffer | null = null\n  private _state: PlaybackState = 'idle'\n  private _speed: number = 1\n  private _playHead: number = 0\n  private _lastFrameTime: number = 0\n  private _rafId: number = 0\n  private _lastDistributedSnapshot: PlaybackSnapshot | null = null\n  private _onStatusChange?: (status: PlaybackStatus) => void\n  private _totalRange: { from: Date; to: Date } | null = null\n\n  constructor(onStatusChange?: (status: PlaybackStatus) => void) {\n    this._onStatusChange = onStatusChange\n  }\n\n  get state() { return this._state }\n  get speed() { return this._speed }\n  get currentTime() { return this._playHead ? new Date(this._playHead).toISOString() : '' }\n\n  /**\n   * DataSubscriptionProvider.subscribe 구현\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   * 플레이백 시작\n   */\n  async start(fromTime: Date, speed: number = 1, totalRange?: { from: Date; to: Date }) {\n    this.stop()\n\n    this._speed = speed\n    this._totalRange = totalRange || { from: fromTime, to: new Date(fromTime.getTime() + 3600000) }\n\n    // 버퍼 생성 + 초기 로드\n    this._buffer = new PlaybackBuffer(this._createFetcher(), this._totalRange)\n    await this._buffer.loadInitial(fromTime.getTime())\n\n    this._playHead = fromTime.getTime()\n    this._state = 'playing'\n    this._lastFrameTime = performance.now()\n\n    this._startPlayLoop()\n    this._notifyStatus()\n  }\n\n  /**\n   * 일시정지\n   */\n  pause() {\n    if (this._state !== 'playing') return\n    this._state = 'paused'\n    this._stopPlayLoop()\n    this._notifyStatus()\n  }\n\n  /**\n   * 재개\n   */\n  resume() {\n    if (this._state !== 'paused') return\n    this._state = 'playing'\n    this._lastFrameTime = performance.now()\n    this._startPlayLoop()\n    this._notifyStatus()\n  }\n\n  /**\n   * seek — 기존 버퍼 폐기 + 새 위치에서 fresh fetch\n   */\n  async seek(toTime: Date) {\n    if (!this._buffer) return\n\n    const wasPlaying = this._state === 'playing'\n    this._stopPlayLoop()\n\n    // 버퍼 전체 폐기 + 새 위치 로드\n    await this._buffer.seek(toTime.getTime())\n    this._playHead = toTime.getTime()\n    this._lastDistributedSnapshot = null\n\n    // 새 위치의 첫 스냅샷 즉시 배포\n    const snap = this._buffer.getSnapshotAt(this._playHead)\n    if (snap) {\n      this._distributeSnapshot(snap.data)\n      this._lastDistributedSnapshot = snap\n    }\n\n    if (wasPlaying) {\n      this._state = 'playing'\n      this._lastFrameTime = performance.now()\n      this._startPlayLoop()\n    }\n\n    this._notifyStatus()\n  }\n\n  /**\n   * 배속 변경\n   */\n  setSpeed(speed: number) {\n    this._speed = speed\n    this._notifyStatus()\n  }\n\n  /**\n   * 중지\n   */\n  stop() {\n    this._stopPlayLoop()\n    this._buffer?.clear()\n    this._buffer = null\n    this._state = 'stopped'\n    this._playHead = 0\n    this._lastDistributedSnapshot = null\n    this._notifyStatus()\n  }\n\n  /**\n   * DataSubscriptionProvider.dispose 구현\n   */\n  dispose() {\n    this.stop()\n    this._state = 'idle'\n    this._components.clear()\n  }\n\n  // --- 재생 루프 ---\n\n  private _startPlayLoop() {\n    this._rafId = requestAnimationFrame(this._playLoop)\n  }\n\n  private _stopPlayLoop() {\n    if (this._rafId) {\n      cancelAnimationFrame(this._rafId)\n      this._rafId = 0\n    }\n  }\n\n  private _playLoop = (now: number) => {\n    if (this._state !== 'playing' || !this._buffer) return\n\n    const delta = (now - this._lastFrameTime) * this._speed\n    this._lastFrameTime = now\n    this._playHead += delta\n\n    // 전체 범위 끝 도달 체크\n    if (this._totalRange && this._playHead >= this._totalRange.to.getTime()) {\n      this._playHead = this._totalRange.to.getTime()\n      this._state = 'stopped'\n      this._notifyStatus()\n      return\n    }\n\n    // 현재 스냅샷 배포\n    const snap = this._buffer.getSnapshotAt(this._playHead)\n    if (snap && snap !== this._lastDistributedSnapshot) {\n      this._distributeSnapshot(snap.data)\n      this._lastDistributedSnapshot = snap\n    }\n\n    // prefetch 체크 (비동기, 루프 블로킹 안 함)\n    this._buffer.checkPrefetch(this._playHead)\n\n    this._notifyStatus()\n\n    // 다음 프레임\n    this._rafId = requestAnimationFrame(this._playLoop)\n  }\n\n  // --- 데이터 배포 ---\n\n  private _distributeSnapshot(snapshotData: any) {\n    if (!snapshotData || typeof snapshotData !== 'object') return\n\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  // --- 데이터 fetcher ---\n\n  private _createFetcher(): ChunkFetcher {\n    return async (fromTime: Date, toTime: Date): Promise<PlaybackSnapshot[]> => {\n      try {\n        const { client } = await import('@operato/graphql')\n        const response = await client.query({\n          query: gql`\n            query PlaybackChunk($startTime: String!, $endTime: String!) {\n              playback(startTime: $startTime, endTime: $endTime) {\n                status\n                playback {\n                  scenarios {\n                    scenarioName\n                    snapshots {\n                      type\n                      time\n                      data\n                    }\n                  }\n                }\n              }\n            }\n          `,\n          variables: {\n            startTime: fromTime.toISOString().replace('T', ' ').replace(/\\.\\d+Z$/, ''),\n            endTime: toTime.toISOString().replace('T', ' ').replace(/\\.\\d+Z$/, '')\n          },\n          fetchPolicy: 'no-cache'\n        })\n\n        return this._parsePlaybackResponse(response.data?.playback)\n      } catch (e) {\n        console.error('[PlaybackProvider] chunk fetch error:', e)\n        return []\n      }\n    }\n  }\n\n  /**\n   * 백엔드 응답을 PlaybackSnapshot[] 형식으로 변환\n   */\n  private _parsePlaybackResponse(response: any): PlaybackSnapshot[] {\n    if (!response?.status || !response?.playback?.scenarios) return []\n\n    const snapshotMap = new Map<number, Record<string, any>>()\n\n    for (const scenario of response.playback.scenarios) {\n      for (const record of scenario.snapshots) {\n        const time = new Date(record.time.replace(' ', 'T')).getTime()\n        const data = typeof record.data === 'string' ? JSON.parse(record.data) : record.data\n\n        if (!snapshotMap.has(time)) {\n          snapshotMap.set(time, {})\n        }\n        const merged = snapshotMap.get(time)!\n        // scenarioName을 tag로 사용\n        merged[scenario.scenarioName] = data\n      }\n    }\n\n    return Array.from(snapshotMap.entries())\n      .map(([timestamp, data]) => ({ timestamp, data }))\n      .sort((a, b) => a.timestamp - b.timestamp)\n  }\n\n  // --- 상태 통보 ---\n\n  private _notifyStatus() {\n    this._onStatusChange?.({\n      state: this._state,\n      currentTime: this._playHead ? new Date(this._playHead).toISOString() : '',\n      speed: this._speed,\n      bufferedRanges: this._buffer?.getBufferedRanges()\n    })\n  }\n}\n"]}

package/dist/src/index.d.ts

@@ -1,7 +1,10 @@
 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-preview.js';
 export * from './ox-board-player.js';
 export * from './ox-board-modeller.js';
 export * from './ox-board-list.js';

package/dist/src/index.js

@@ -1,7 +1,9 @@
 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-preview.js';
 export * from './ox-board-player.js';
 export * from './ox-board-modeller.js';
 export * from './ox-board-list.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,uBAAuB,CAAA;AACrC,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-preview.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/bulk-create-dialog.d.ts

@@ -0,0 +1,51 @@
+import { LitElement } from 'lit';
+import { generateBulkComponents, type BulkCreateArea as Area } from '@hatiolab/things-scene';
+export type ConflictPolicy = 'skip' | 'duplicate';
+export interface BulkCreateDialogProps {
+    /** 템플릿 컴포넌트 state (read-only 표시용). */
+    template: Record<string, any>;
+    /** 초기 영역 (보드 좌표). 사용자가 dialog 내에서 조정 가능. */
+    initialArea: Area;
+    /** 기존 scene 의 모든 ID — 충돌 검사. */
+    existingIds?: Set<string>;
+    /** OK 클릭 시 콜백 — 생성할 model 배열 전달. */
+    onConfirm: (models: ReturnType<typeof generateBulkComponents>) => void;
+    /** 취소 / 닫기 콜백. */
+    onCancel?: () => void;
+}
+export declare class BulkCreateDialog extends LitElement {
+    static styles: import("lit").CSSResult;
+    template: Record<string, any>;
+    initialArea: Area;
+    existingIds: Set<string>;
+    onConfirm: BulkCreateDialogProps['onConfirm'];
+    onCancel?: BulkCreateDialogProps['onCancel'];
+    private pattern;
+    private count;
+    private rows;
+    private cols;
+    private idPattern;
+    private idStart;
+    private idPadding;
+    private area;
+    private conflictPolicy;
+    countInput: HTMLInputElement;
+    connectedCallback(): void;
+    /** rows/cols 가 미입력 (undefined) 이면 영역 종횡비 + count 로 자동 계산해 표시. */
+    private get displayRows();
+    private get displayCols();
+    firstUpdated(): void;
+    private updateArea;
+    private get previewModels();
+    private get conflicts();
+    /** 충돌 정책 적용 후 실제 생성될 model 배열. */
+    private get effectiveModels();
+    private onOk;
+    private onCancelClick;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bulk-create-dialog': BulkCreateDialog;
+    }
+}