@operato/board 10.0.0-beta.6 → 10.0.0-beta.61

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 Area } from './bulk-create.js';
+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;
+    }
+}

package/dist/src/modeller/bulk-create-dialog.js

@@ -0,0 +1,531 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ *
+ * 멀티 컴포넌트 생성 dialog — 템플릿 + 영역 + 옵션 입력 → OK 시 콜백 호출.
+ */
+import { __decorate } from "tslib";
+import { LitElement, css, html } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { generateBulkComponents, findIdConflicts, inferIdPattern, nextAvailableStart, deriveGridShape } from './bulk-create.js';
+let BulkCreateDialog = class BulkCreateDialog extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.existingIds = new Set();
+        this.pattern = 'grid';
+        this.count = 12;
+        this.rows = undefined;
+        this.cols = undefined;
+        this.idPattern = '{i}';
+        this.idStart = 1;
+        this.idPadding = 0;
+        this.conflictPolicy = 'skip';
+        this.onOk = () => {
+            const models = this.effectiveModels;
+            if (models.length === 0)
+                return;
+            this.onConfirm(models);
+        };
+        this.onCancelClick = () => {
+            var _a;
+            (_a = this.onCancel) === null || _a === void 0 ? void 0 : _a.call(this);
+        };
+    }
+    connectedCallback() {
+        var _a;
+        super.connectedCallback();
+        // OxPopup wrapper (ox-popup) 의 흰색 배경 + box-shadow 가 dialog 라운드 코너
+        // 밖으로 비쳐서 4 꼭지점에 흰색 사각형이 보임. 부모를 투명/그림자 없이 만들어
+        // dialog 자체의 라운드 + 그림자만 보이게.
+        const parent = this.parentElement;
+        if (parent) {
+            parent.style.background = 'transparent';
+            parent.style.boxShadow = 'none';
+            parent.style.border = 'none';
+        }
+        this.area = { ...this.initialArea };
+        // 1) 영역 종횡비로 레이아웃 기본 선택:
+        //    너비 ≫ 높이 → line-h (가로), 높이 ≫ 너비 → line-v (세로), 비슷하면 grid.
+        const w = Math.max(this.area.width, 1);
+        const h = Math.max(this.area.height, 1);
+        const aspect = w / h;
+        if (aspect >= 2.5)
+            this.pattern = 'line-h';
+        else if (aspect <= 0.4)
+            this.pattern = 'line-v';
+        else
+            this.pattern = 'grid';
+        // 2) 템플릿 id 로부터 ID 패턴 / padding 자동 추론.
+        const inferred = inferIdPattern((_a = this.template) === null || _a === void 0 ? void 0 : _a.id);
+        this.idPattern = inferred.pattern;
+        this.idPadding = inferred.padding;
+        // 3) 시작 번호 = existingIds 에 패턴 매칭되는 *최대 번호 + 1*.
+        //    반복 bulk-paste 시 이전 batch 의 끝 다음으로 자동 advance.
+        //    매칭 ID 가 없으면 inferIdPattern 의 fallback (= template num+1) 사용.
+        this.idStart = nextAvailableStart(inferred.pattern, this.existingIds, inferred.start);
+    }
+    /** rows/cols 가 미입력 (undefined) 이면 영역 종횡비 + count 로 자동 계산해 표시. */
+    get displayRows() {
+        if (this.rows != null)
+            return this.rows;
+        return deriveGridShape(this.count, this.area, undefined, this.cols).rows;
+    }
+    get displayCols() {
+        if (this.cols != null)
+            return this.cols;
+        return deriveGridShape(this.count, this.area, this.rows, undefined).cols;
+    }
+    firstUpdated() {
+        var _a, _b;
+        (_a = this.countInput) === null || _a === void 0 ? void 0 : _a.focus();
+        (_b = this.countInput) === null || _b === void 0 ? void 0 : _b.select();
+    }
+    updateArea(field, value) {
+        this.area = { ...this.area, [field]: value };
+    }
+    get previewModels() {
+        var _a, _b;
+        if (!this.template)
+            return [];
+        return generateBulkComponents({
+            template: this.template,
+            area: this.area,
+            pattern: this.pattern,
+            count: this.count,
+            rows: this.rows,
+            cols: this.cols,
+            idPattern: this.idPattern.replace(/\{type\}/g, String((_b = (_a = this.template) === null || _a === void 0 ? void 0 : _a.type) !== null && _b !== void 0 ? _b : 'C')),
+            idStart: this.idStart,
+            idPadding: this.idPadding
+        });
+    }
+    get conflicts() {
+        return findIdConflicts(this.previewModels, this.existingIds);
+    }
+    /** 충돌 정책 적용 후 실제 생성될 model 배열. */
+    get effectiveModels() {
+        const all = this.previewModels;
+        if (this.conflictPolicy === 'skip' && this.existingIds.size > 0) {
+            return all.filter(m => !this.existingIds.has(m.id));
+        }
+        return all;
+    }
+    render() {
+        var _a, _b, _c, _d;
+        const tplType = (_b = (_a = this.template) === null || _a === void 0 ? void 0 : _a.type) !== null && _b !== void 0 ? _b : '?';
+        const tplId = (_d = (_c = this.template) === null || _c === void 0 ? void 0 : _c.id) !== null && _d !== void 0 ? _d : '?';
+        const models = this.previewModels;
+        return html `
+      <h3>Bulk Paste — ${tplType}</h3>
+
+      <div class="row">
+        <label>템플릿</label>
+        <span style="color:#b6d4fe;">${tplId} <span style="color:rgba(255,255,255,0.4);">(${tplType})</span></span>
+      </div>
+
+      <div class="row">
+        <label>레이아웃</label>
+        <div class="pattern-picker">
+          <button
+            type="button"
+            class="pattern-btn ${this.pattern === 'grid' ? 'active' : ''}"
+            @click=${() => (this.pattern = 'grid')}
+            title="격자"
+          >
+            <svg viewBox="0 0 24 24">
+              <circle cx="6" cy="6" r="1.6" /><circle cx="12" cy="6" r="1.6" /><circle cx="18" cy="6" r="1.6" />
+              <circle cx="6" cy="12" r="1.6" /><circle cx="12" cy="12" r="1.6" /><circle cx="18" cy="12" r="1.6" />
+              <circle cx="6" cy="18" r="1.6" /><circle cx="12" cy="18" r="1.6" /><circle cx="18" cy="18" r="1.6" />
+            </svg>
+            <span>격자</span>
+          </button>
+          <button
+            type="button"
+            class="pattern-btn ${this.pattern === 'line-h' ? 'active' : ''}"
+            @click=${() => (this.pattern = 'line-h')}
+            title="가로 1줄"
+          >
+            <svg viewBox="0 0 24 24">
+              <circle cx="3" cy="12" r="1.6" /><circle cx="8" cy="12" r="1.6" /><circle cx="13" cy="12" r="1.6" />
+              <circle cx="18" cy="12" r="1.6" /><circle cx="22" cy="12" r="1.4" />
+            </svg>
+            <span>가로</span>
+          </button>
+          <button
+            type="button"
+            class="pattern-btn ${this.pattern === 'line-v' ? 'active' : ''}"
+            @click=${() => (this.pattern = 'line-v')}
+            title="세로 1줄"
+          >
+            <svg viewBox="0 0 24 24">
+              <circle cx="12" cy="3" r="1.6" /><circle cx="12" cy="8" r="1.6" /><circle cx="12" cy="13" r="1.6" />
+              <circle cx="12" cy="18" r="1.6" /><circle cx="12" cy="22" r="1.4" />
+            </svg>
+            <span>세로</span>
+          </button>
+        </div>
+      </div>
+
+      <div class="row">
+        <label>개수</label>
+        <input
+          id="count-input"
+          type="number"
+          min="1"
+          .value=${String(this.count)}
+          @input=${(e) => (this.count = Math.max(1, +e.target.value))}
+        />
+      </div>
+
+      ${this.pattern === 'grid'
+            ? html `
+            <div class="row">
+              <label>행 × 열</label>
+              <div class="grid-shape">
+                <input
+                  type="number"
+                  min="1"
+                  .value=${String(this.displayRows)}
+                  @input=${(e) => {
+                const v = e.target.value;
+                this.rows = v ? Math.max(1, +v) : undefined;
+            }}
+                />
+                <span>×</span>
+                <input
+                  type="number"
+                  min="1"
+                  .value=${String(this.displayCols)}
+                  @input=${(e) => {
+                const v = e.target.value;
+                this.cols = v ? Math.max(1, +v) : undefined;
+            }}
+                />
+              </div>
+            </div>
+          `
+            : ''}
+
+      <div class="row">
+        <label>ID 패턴</label>
+        <input
+          type="text"
+          .value=${this.idPattern}
+          @input=${(e) => (this.idPattern = e.target.value)}
+        />
+      </div>
+      <div class="row">
+        <span></span>
+        <div class="hint">placeholder: <code>{i}</code> 일련번호, <code>{r}</code> 행, <code>{c}</code> 열 (grid)</div>
+      </div>
+
+      <div class="row">
+        <label>시작 번호</label>
+        <input
+          type="number"
+          .value=${String(this.idStart)}
+          @input=${(e) => (this.idStart = +e.target.value)}
+        />
+      </div>
+
+      <div class="row">
+        <label>Zero-pad 자릿수</label>
+        <input
+          type="number"
+          min="0"
+          .value=${String(this.idPadding)}
+          @input=${(e) => (this.idPadding = Math.max(0, +e.target.value))}
+        />
+      </div>
+
+      <div class="preview">
+        ${models.length > 0
+            ? html `총 ${models.length}개 — 예: <code>${models[0].id}</code> ... <code>${models[models.length - 1].id}</code>`
+            : html `<span style="color:#ff8080;">생성될 컴포넌트 없음</span>`}
+      </div>
+
+      ${this.conflicts.length > 0
+            ? html `
+            <div class="conflict">
+              <strong>ID 충돌 ${this.conflicts.length}개</strong>
+              <code>${this.conflicts.slice(0, 5).join(', ')}${this.conflicts.length > 5 ? ', ...' : ''}</code>
+              <div class="conflict-hint" style="margin-top:6px;">
+                <div class="policy-radios">
+                  <label>
+                    <input
+                      type="radio"
+                      name="conflict-policy"
+                      value="skip"
+                      .checked=${this.conflictPolicy === 'skip'}
+                      @change=${() => (this.conflictPolicy = 'skip')}
+                    />
+                    충돌 ID 스킵 (기본)
+                  </label>
+                  <label>
+                    <input
+                      type="radio"
+                      name="conflict-policy"
+                      value="duplicate"
+                      .checked=${this.conflictPolicy === 'duplicate'}
+                      @change=${() => (this.conflictPolicy = 'duplicate')}
+                    />
+                    중복 그대로 생성
+                  </label>
+                </div>
+              </div>
+            </div>
+          `
+            : ''}
+
+      <div class="actions">
+        <button @click=${this.onCancelClick}>취소</button>
+        <button
+          class="primary"
+          @click=${this.onOk}
+          ?disabled=${this.effectiveModels.length === 0}
+        >
+          생성 (${this.effectiveModels.length}${this.conflicts.length > 0 && this.conflictPolicy === 'skip'
+            ? html `<span style="opacity:0.6;"> / ${models.length}</span>`
+            : ''})
+        </button>
+      </div>
+    `;
+    }
+};
+BulkCreateDialog.styles = css `
+    :host {
+      display: block;
+      padding: 16px 20px;
+      min-width: 340px;
+      max-width: 480px;
+      background: rgba(30, 30, 30, 0.94);
+      border: 1px solid rgba(255, 255, 255, 0.08);
+      border-radius: 10px;
+      backdrop-filter: blur(8px);
+      -webkit-backdrop-filter: blur(8px);
+      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
+      color: rgba(255, 255, 255, 0.85);
+      font: 12px/1.6 -apple-system, BlinkMacSystemFont, sans-serif;
+    }
+    h3 {
+      margin: 0 0 12px;
+      font-size: 13px;
+      font-weight: 600;
+      color: #4a9eff;
+    }
+    .row {
+      display: grid;
+      grid-template-columns: 100px 1fr;
+      align-items: center;
+      gap: 8px;
+      margin: 6px 0;
+    }
+    label {
+      font-size: 12px;
+      color: rgba(255, 255, 255, 0.55);
+    }
+    input,
+    select {
+      padding: 4px 6px;
+      font: inherit;
+      font-size: 12px;
+      background: rgba(255, 255, 255, 0.06);
+      border: 1px solid rgba(255, 255, 255, 0.12);
+      border-radius: 3px;
+      width: 100%;
+      box-sizing: border-box;
+      color: rgba(255, 255, 255, 0.9);
+      outline: none;
+    }
+    input:focus,
+    select:focus {
+      border-color: #4a9eff;
+      background: rgba(74, 158, 255, 0.08);
+    }
+    select option {
+      background: rgb(30, 30, 30);
+      color: rgba(255, 255, 255, 0.9);
+    }
+    .grid-shape {
+      display: grid;
+      grid-template-columns: 1fr 20px 1fr;
+      gap: 4px;
+      align-items: center;
+    }
+    .grid-shape > span {
+      text-align: center;
+      color: rgba(255, 255, 255, 0.35);
+    }
+    .pattern-picker {
+      display: flex;
+      gap: 6px;
+    }
+    .pattern-btn {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 2px;
+      padding: 6px 4px;
+      background: rgba(255, 255, 255, 0.04);
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      border-radius: 4px;
+      cursor: pointer;
+      color: rgba(255, 255, 255, 0.6);
+      transition: background 0.1s, border-color 0.1s;
+    }
+    .pattern-btn:hover {
+      background: rgba(255, 255, 255, 0.08);
+    }
+    .pattern-btn.active {
+      border-color: #4a9eff;
+      background: rgba(74, 158, 255, 0.15);
+      color: rgba(255, 255, 255, 0.95);
+    }
+    .pattern-btn svg {
+      width: 28px;
+      height: 28px;
+    }
+    .pattern-btn svg circle {
+      fill: currentColor;
+    }
+    .pattern-btn span {
+      font-size: 10.5px;
+    }
+    .policy-radios {
+      display: flex;
+      gap: 12px;
+      align-items: center;
+    }
+    .policy-radios label {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      cursor: pointer;
+      color: rgba(255, 255, 255, 0.75);
+    }
+    .policy-radios input[type='radio'] {
+      width: auto;
+      accent-color: #4a9eff;
+      margin: 0;
+    }
+    code {
+      font-family: ui-monospace, SFMono-Regular, monospace;
+      background: rgba(255, 255, 255, 0.08);
+      padding: 1px 4px;
+      border-radius: 3px;
+      color: #b6d4fe;
+      font-size: 11px;
+    }
+    .hint {
+      font-size: 11px;
+      color: rgba(255, 255, 255, 0.4);
+      margin-top: 2px;
+      grid-column: 2;
+    }
+    .preview {
+      font-size: 11.5px;
+      color: rgba(255, 255, 255, 0.65);
+      margin-top: 10px;
+      padding: 6px 8px;
+      background: rgba(255, 255, 255, 0.04);
+      border-radius: 4px;
+    }
+    .conflict {
+      margin-top: 8px;
+      padding: 8px 10px;
+      background: rgba(255, 100, 100, 0.12);
+      border: 1px solid rgba(255, 100, 100, 0.3);
+      border-radius: 4px;
+      color: #ffb3b3;
+      font-size: 11.5px;
+    }
+    .conflict strong {
+      color: #ff8080;
+    }
+    .conflict-hint {
+      margin-top: 4px;
+      color: rgba(255, 255, 255, 0.45);
+      font-size: 11px;
+    }
+    .actions {
+      margin-top: 16px;
+      display: flex;
+      justify-content: flex-end;
+      gap: 8px;
+    }
+    button {
+      padding: 5px 14px;
+      font: inherit;
+      font-size: 12px;
+      border: 1px solid rgba(255, 255, 255, 0.15);
+      background: rgba(255, 255, 255, 0.06);
+      color: rgba(255, 255, 255, 0.85);
+      cursor: pointer;
+      border-radius: 4px;
+    }
+    button:hover:not(:disabled) {
+      background: rgba(255, 255, 255, 0.1);
+    }
+    button:disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+    button.primary {
+      background: #4a9eff;
+      color: white;
+      border-color: #4a9eff;
+    }
+    button.primary:hover:not(:disabled) {
+      background: #6db1ff;
+    }
+  `;
+__decorate([
+    property({ type: Object })
+], BulkCreateDialog.prototype, "template", void 0);
+__decorate([
+    property({ type: Object })
+], BulkCreateDialog.prototype, "initialArea", void 0);
+__decorate([
+    property({ attribute: false })
+], BulkCreateDialog.prototype, "existingIds", void 0);
+__decorate([
+    property({ attribute: false })
+], BulkCreateDialog.prototype, "onConfirm", void 0);
+__decorate([
+    property({ attribute: false })
+], BulkCreateDialog.prototype, "onCancel", void 0);
+__decorate([
+    state()
+], BulkCreateDialog.prototype, "pattern", void 0);
+__decorate([
+    state()
+], BulkCreateDialog.prototype, "count", void 0);
+__decorate([
+    state()
+], BulkCreateDialog.prototype, "rows", void 0);
+__decorate([
+    state()
+], BulkCreateDialog.prototype, "cols", void 0);
+__decorate([
+    state()
+], BulkCreateDialog.prototype, "idPattern", void 0);
+__decorate([
+    state()
+], BulkCreateDialog.prototype, "idStart", void 0);
+__decorate([
+    state()
+], BulkCreateDialog.prototype, "idPadding", void 0);
+__decorate([
+    state()
+], BulkCreateDialog.prototype, "area", void 0);
+__decorate([
+    state()
+], BulkCreateDialog.prototype, "conflictPolicy", void 0);
+__decorate([
+    query('#count-input')
+], BulkCreateDialog.prototype, "countInput", void 0);
+BulkCreateDialog = __decorate([
+    customElement('bulk-create-dialog')
+], BulkCreateDialog);
+export { BulkCreateDialog };
+//# sourceMappingURL=bulk-create-dialog.js.map