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

package/CHANGELOG.md

@@ -3,6 +3,30 @@
 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.50](https://github.com/hatiolab/operato/compare/v10.0.0-beta.49...v10.0.0-beta.50) (2026-05-12)
+
+
+### :rocket: New Features
+
+* **board:** bulk-paste (Ctrl+Shift+V) + zorder Photoshop 컨벤션 ([9a1bb03](https://github.com/hatiolab/operato/commit/9a1bb031e157b15cabff0403ad27fbdeb559fa55)), closes [#4a9](https://github.com/hatiolab/operato/issues/4a9)
+
+
+### :mega: Other
+
+* **board:** bulk-paste dialog 디버깅 console.log 제거 ([e1b88d5](https://github.com/hatiolab/operato/commit/e1b88d511ebdc106a1cda77ee6893f79775afd99))
+
+
+### :house: Code Refactoring
+
+* **board:** bulk-paste 영역 드래그를 things-scene AddLayer 로 위임 ([9efdac7](https://github.com/hatiolab/operato/commit/9efdac7831a47072a81e5d4122ecf321de47c378)), closes [#2964c2](https://github.com/hatiolab/operato/issues/2964c2)
+
+
+### :bug: Bug Fix
+
+* **board:** bulk-create-dialog 4꼭지점 흰색 사각형 제거 ([e8bd653](https://github.com/hatiolab/operato/commit/e8bd653a81a1c2c4886546a9c9a261bfb0159795))
+
+
+
 ## [10.0.0-beta.49](https://github.com/hatiolab/operato/compare/v10.0.0-beta.48...v10.0.0-beta.49) (2026-05-07)
 
 **Note:** Version bump only for package @operato/board

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;
+    }
+}

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 '@hatiolab/things-scene';
+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

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

@@ -0,0 +1 @@
+{"version":3,"file":"bulk-create-dialog.js","sourceRoot":"","sources":["../../../src/modeller/bulk-create-dialog.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAEzE,OAAO,EACL,sBAAsB,EACtB,eAAe,EACf,cAAc,EACd,kBAAkB,EAClB,eAAe,EAIhB,MAAM,wBAAwB,CAAA;AAkBxB,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU;IAAzC;;QAgM2B,gBAAW,GAAgB,IAAI,GAAG,EAAE,CAAA;QAInD,YAAO,GAAY,MAAM,CAAA;QACzB,UAAK,GAAG,EAAE,CAAA;QACV,SAAI,GAAuB,SAAS,CAAA;QACpC,SAAI,GAAuB,SAAS,CAAA;QACpC,cAAS,GAAG,KAAK,CAAA;QACjB,YAAO,GAAG,CAAC,CAAA;QACX,cAAS,GAAG,CAAC,CAAA;QAEb,mBAAc,GAAmB,MAAM,CAAA;QAqFhD,SAAI,GAAG,GAAG,EAAE;YAClB,MAAM,MAAM,GAAG,IAAI,CAAC,eAAe,CAAA;YACnC,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC;gBAAE,OAAM;YAC/B,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAA;QACxB,CAAC,CAAA;QAEO,kBAAa,GAAG,GAAG,EAAE;;YAC3B,MAAA,IAAI,CAAC,QAAQ,oDAAI,CAAA;QACnB,CAAC,CAAA;IAyLH,CAAC;IAlRC,iBAAiB;;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAA;QACzB,kEAAkE;QAClE,+CAA+C;QAC/C,6BAA6B;QAC7B,MAAM,MAAM,GAAG,IAAI,CAAC,aAAmC,CAAA;QACvD,IAAI,MAAM,EAAE,CAAC;YACX,MAAM,CAAC,KAAK,CAAC,UAAU,GAAG,aAAa,CAAA;YACvC,MAAM,CAAC,KAAK,CAAC,SAAS,GAAG,MAAM,CAAA;YAC/B,MAAM,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAA;QAC9B,CAAC;QACD,IAAI,CAAC,IAAI,GAAG,EAAE,GAAG,IAAI,CAAC,WAAW,EAAE,CAAA;QAEnC,yBAAyB;QACzB,8DAA8D;QAC9D,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAA;QACtC,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,CAAA;QACvC,MAAM,MAAM,GAAG,CAAC,GAAG,CAAC,CAAA;QACpB,IAAI,MAAM,IAAI,GAAG;YAAE,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAA;aACrC,IAAI,MAAM,IAAI,GAAG;YAAE,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAA;;YAC1C,IAAI,CAAC,OAAO,GAAG,MAAM,CAAA;QAE1B,uCAAuC;QACvC,MAAM,QAAQ,GAAG,cAAc,CAAC,MAAA,IAAI,CAAC,QAAQ,0CAAE,EAAE,CAAC,CAAA;QAClD,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC,OAAO,CAAA;QACjC,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC,OAAO,CAAA;QAEjC,gDAAgD;QAChD,mDAAmD;QACnD,kEAAkE;QAClE,IAAI,CAAC,OAAO,GAAG,kBAAkB,CAAC,QAAQ,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,KAAK,CAAC,CAAA;IACvF,CAAC;IAED,iEAAiE;IACjE,IAAY,WAAW;QACrB,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI;YAAE,OAAO,IAAI,CAAC,IAAI,CAAA;QACvC,OAAO,eAAe,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,IAAI,EAAE,SAAS,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,CAAA;IAC1E,CAAC;IAED,IAAY,WAAW;QACrB,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI;YAAE,OAAO,IAAI,CAAC,IAAI,CAAA;QACvC,OAAO,eAAe,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,IAAI,CAAA;IAC1E,CAAC;IAED,YAAY;;QACV,MAAA,IAAI,CAAC,UAAU,0CAAE,KAAK,EAAE,CAAA;QACxB,MAAA,IAAI,CAAC,UAAU,0CAAE,MAAM,EAAE,CAAA;IAC3B,CAAC;IAEO,UAAU,CAAC,KAAiB,EAAE,KAAa;QACjD,IAAI,CAAC,IAAI,GAAG,EAAE,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,CAAA;IAC9C,CAAC;IAED,IAAY,aAAa;;QACvB,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,OAAO,EAAE,CAAA;QAC7B,OAAO,sBAAsB,CAAC;YAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,WAAW,EAAE,MAAM,CAAC,MAAA,MAAA,IAAI,CAAC,QAAQ,0CAAE,IAAI,mCAAI,GAAG,CAAC,CAAC;YAClF,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,SAAS,EAAE,IAAI,CAAC,SAAS;SAC1B,CAAC,CAAA;IACJ,CAAC;IAED,IAAY,SAAS;QACnB,OAAO,eAAe,CAAC,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC,WAAW,CAAC,CAAA;IAC9D,CAAC;IAED,kCAAkC;IAClC,IAAY,eAAe;QACzB,MAAM,GAAG,GAAG,IAAI,CAAC,aAAa,CAAA;QAC9B,IAAI,IAAI,CAAC,cAAc,KAAK,MAAM,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,GAAG,CAAC,EAAE,CAAC;YAChE,OAAO,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;QACrD,CAAC;QACD,OAAO,GAAG,CAAA;IACZ,CAAC;IAYD,MAAM;;QACJ,MAAM,OAAO,GAAG,MAAA,MAAA,IAAI,CAAC,QAAQ,0CAAE,IAAI,mCAAI,GAAG,CAAA;QAC1C,MAAM,KAAK,GAAG,MAAA,MAAA,IAAI,CAAC,QAAQ,0CAAE,EAAE,mCAAI,GAAG,CAAA;QACtC,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,CAAA;QAEjC,OAAO,IAAI,CAAA;yBACU,OAAO;;;;uCAIO,KAAK,gDAAgD,OAAO;;;;;;;;iCAQlE,IAAI,CAAC,OAAO,KAAK,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;qBACnD,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC;;;;;;;;;;;;iCAYjB,IAAI,CAAC,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;qBACrD,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC;;;;;;;;;;;iCAWnB,IAAI,CAAC,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;qBACrD,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC;;;;;;;;;;;;;;;;;;mBAkBjC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC;mBAClB,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAC;;;;QAI1F,IAAI,CAAC,OAAO,KAAK,MAAM;YACvB,CAAC,CAAC,IAAI,CAAA;;;;;;;2BAOa,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC;2BACxB,CAAC,CAAQ,EAAE,EAAE;gBACpB,MAAM,CAAC,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAA;gBAC9C,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;YAC7C,CAAC;;;;;;2BAMQ,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC;2BACxB,CAAC,CAAQ,EAAE,EAAE;gBACpB,MAAM,CAAC,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAA;gBAC9C,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;YAC7C,CAAC;;;;WAIR;YACH,CAAC,CAAC,EAAE;;;;;;mBAMO,IAAI,CAAC,SAAS;mBACd,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC;;;;;;;;;;;;mBAYrE,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC;mBACpB,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,GAAG,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC;;;;;;;;;mBASpE,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC;mBACtB,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAC;;;;;UAK5F,MAAM,CAAC,MAAM,GAAG,CAAC;YACjB,CAAC,CAAC,IAAI,CAAA,KAAK,MAAM,CAAC,MAAM,gBAAgB,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,qBAAqB,MAAM,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,EAAE,SAAS;YAC9G,CAAC,CAAC,IAAI,CAAA,iDAAiD;;;QAGzD,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC;YACzB,CAAC,CAAC,IAAI,CAAA;;8BAEgB,IAAI,CAAC,SAAS,CAAC,MAAM;sBAC7B,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;;;;;;;;iCAQrE,IAAI,CAAC,cAAc,KAAK,MAAM;gCAC/B,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,cAAc,GAAG,MAAM,CAAC;;;;;;;;;iCASnC,IAAI,CAAC,cAAc,KAAK,WAAW;gCACpC,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,cAAc,GAAG,WAAW,CAAC;;;;;;;WAO9D;YACH,CAAC,CAAC,EAAE;;;yBAGa,IAAI,CAAC,aAAa;;;mBAGxB,IAAI,CAAC,IAAI;sBACN,IAAI,CAAC,eAAe,CAAC,MAAM,KAAK,CAAC;;gBAEvC,IAAI,CAAC,eAAe,CAAC,MAAM,GAC/B,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,cAAc,KAAK,MAAM;YACzD,CAAC,CAAC,IAAI,CAAA,iCAAiC,MAAM,CAAC,MAAM,SAAS;YAC7D,CAAC,CAAC,EACN;;;KAGL,CAAA;IACH,CAAC;;AAheM,uBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2LlB,AA3LY,CA2LZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAA+B;AAC9B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDAAmB;AACd;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;qDAAqC;AACpC;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;mDAA+C;AAC9C;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;kDAA6C;AAE3D;IAAhB,KAAK,EAAE;iDAAkC;AACzB;IAAhB,KAAK,EAAE;+CAAmB;AACV;IAAhB,KAAK,EAAE;8CAA6C;AACpC;IAAhB,KAAK,EAAE;8CAA6C;AACpC;IAAhB,KAAK,EAAE;mDAA0B;AACjB;IAAhB,KAAK,EAAE;iDAAoB;AACX;IAAhB,KAAK,EAAE;mDAAsB;AACb;IAAhB,KAAK,EAAE;8CAAoB;AACX;IAAhB,KAAK,EAAE;wDAAgD;AAEjC;IAAtB,KAAK,CAAC,cAAc,CAAC;oDAA8B;AA9MzC,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CAke5B","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n *\n * 멀티 컴포넌트 생성 dialog — 템플릿 + 영역 + 옵션 입력 → OK 시 콜백 호출.\n */\n\nimport { LitElement, css, html } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport {\n  generateBulkComponents,\n  findIdConflicts,\n  inferIdPattern,\n  nextAvailableStart,\n  deriveGridShape,\n  type BulkCreateOptions,\n  type BulkCreatePattern as Pattern,\n  type BulkCreateArea as Area\n} from '@hatiolab/things-scene'\n\nexport type ConflictPolicy = 'skip' | 'duplicate'\n\nexport interface BulkCreateDialogProps {\n  /** 템플릿 컴포넌트 state (read-only 표시용). */\n  template: Record<string, any>\n  /** 초기 영역 (보드 좌표). 사용자가 dialog 내에서 조정 가능. */\n  initialArea: Area\n  /** 기존 scene 의 모든 ID — 충돌 검사. */\n  existingIds?: Set<string>\n  /** OK 클릭 시 콜백 — 생성할 model 배열 전달. */\n  onConfirm: (models: ReturnType<typeof generateBulkComponents>) => void\n  /** 취소 / 닫기 콜백. */\n  onCancel?: () => void\n}\n\n@customElement('bulk-create-dialog')\nexport class BulkCreateDialog extends LitElement {\n  static styles = css`\n    :host {\n      display: block;\n      padding: 16px 20px;\n      min-width: 340px;\n      max-width: 480px;\n      background: rgba(30, 30, 30, 0.94);\n      border: 1px solid rgba(255, 255, 255, 0.08);\n      border-radius: 10px;\n      backdrop-filter: blur(8px);\n      -webkit-backdrop-filter: blur(8px);\n      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);\n      color: rgba(255, 255, 255, 0.85);\n      font: 12px/1.6 -apple-system, BlinkMacSystemFont, sans-serif;\n    }\n    h3 {\n      margin: 0 0 12px;\n      font-size: 13px;\n      font-weight: 600;\n      color: #4a9eff;\n    }\n    .row {\n      display: grid;\n      grid-template-columns: 100px 1fr;\n      align-items: center;\n      gap: 8px;\n      margin: 6px 0;\n    }\n    label {\n      font-size: 12px;\n      color: rgba(255, 255, 255, 0.55);\n    }\n    input,\n    select {\n      padding: 4px 6px;\n      font: inherit;\n      font-size: 12px;\n      background: rgba(255, 255, 255, 0.06);\n      border: 1px solid rgba(255, 255, 255, 0.12);\n      border-radius: 3px;\n      width: 100%;\n      box-sizing: border-box;\n      color: rgba(255, 255, 255, 0.9);\n      outline: none;\n    }\n    input:focus,\n    select:focus {\n      border-color: #4a9eff;\n      background: rgba(74, 158, 255, 0.08);\n    }\n    select option {\n      background: rgb(30, 30, 30);\n      color: rgba(255, 255, 255, 0.9);\n    }\n    .grid-shape {\n      display: grid;\n      grid-template-columns: 1fr 20px 1fr;\n      gap: 4px;\n      align-items: center;\n    }\n    .grid-shape > span {\n      text-align: center;\n      color: rgba(255, 255, 255, 0.35);\n    }\n    .pattern-picker {\n      display: flex;\n      gap: 6px;\n    }\n    .pattern-btn {\n      flex: 1;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      gap: 2px;\n      padding: 6px 4px;\n      background: rgba(255, 255, 255, 0.04);\n      border: 1px solid rgba(255, 255, 255, 0.1);\n      border-radius: 4px;\n      cursor: pointer;\n      color: rgba(255, 255, 255, 0.6);\n      transition: background 0.1s, border-color 0.1s;\n    }\n    .pattern-btn:hover {\n      background: rgba(255, 255, 255, 0.08);\n    }\n    .pattern-btn.active {\n      border-color: #4a9eff;\n      background: rgba(74, 158, 255, 0.15);\n      color: rgba(255, 255, 255, 0.95);\n    }\n    .pattern-btn svg {\n      width: 28px;\n      height: 28px;\n    }\n    .pattern-btn svg circle {\n      fill: currentColor;\n    }\n    .pattern-btn span {\n      font-size: 10.5px;\n    }\n    .policy-radios {\n      display: flex;\n      gap: 12px;\n      align-items: center;\n    }\n    .policy-radios label {\n      display: flex;\n      align-items: center;\n      gap: 4px;\n      cursor: pointer;\n      color: rgba(255, 255, 255, 0.75);\n    }\n    .policy-radios input[type='radio'] {\n      width: auto;\n      accent-color: #4a9eff;\n      margin: 0;\n    }\n    code {\n      font-family: ui-monospace, SFMono-Regular, monospace;\n      background: rgba(255, 255, 255, 0.08);\n      padding: 1px 4px;\n      border-radius: 3px;\n      color: #b6d4fe;\n      font-size: 11px;\n    }\n    .hint {\n      font-size: 11px;\n      color: rgba(255, 255, 255, 0.4);\n      margin-top: 2px;\n      grid-column: 2;\n    }\n    .preview {\n      font-size: 11.5px;\n      color: rgba(255, 255, 255, 0.65);\n      margin-top: 10px;\n      padding: 6px 8px;\n      background: rgba(255, 255, 255, 0.04);\n      border-radius: 4px;\n    }\n    .conflict {\n      margin-top: 8px;\n      padding: 8px 10px;\n      background: rgba(255, 100, 100, 0.12);\n      border: 1px solid rgba(255, 100, 100, 0.3);\n      border-radius: 4px;\n      color: #ffb3b3;\n      font-size: 11.5px;\n    }\n    .conflict strong {\n      color: #ff8080;\n    }\n    .conflict-hint {\n      margin-top: 4px;\n      color: rgba(255, 255, 255, 0.45);\n      font-size: 11px;\n    }\n    .actions {\n      margin-top: 16px;\n      display: flex;\n      justify-content: flex-end;\n      gap: 8px;\n    }\n    button {\n      padding: 5px 14px;\n      font: inherit;\n      font-size: 12px;\n      border: 1px solid rgba(255, 255, 255, 0.15);\n      background: rgba(255, 255, 255, 0.06);\n      color: rgba(255, 255, 255, 0.85);\n      cursor: pointer;\n      border-radius: 4px;\n    }\n    button:hover:not(:disabled) {\n      background: rgba(255, 255, 255, 0.1);\n    }\n    button:disabled {\n      opacity: 0.4;\n      cursor: not-allowed;\n    }\n    button.primary {\n      background: #4a9eff;\n      color: white;\n      border-color: #4a9eff;\n    }\n    button.primary:hover:not(:disabled) {\n      background: #6db1ff;\n    }\n  `\n\n  @property({ type: Object }) template!: Record<string, any>\n  @property({ type: Object }) initialArea!: Area\n  @property({ attribute: false }) existingIds: Set<string> = new Set()\n  @property({ attribute: false }) onConfirm!: BulkCreateDialogProps['onConfirm']\n  @property({ attribute: false }) onCancel?: BulkCreateDialogProps['onCancel']\n\n  @state() private pattern: Pattern = 'grid'\n  @state() private count = 12\n  @state() private rows: number | undefined = undefined\n  @state() private cols: number | undefined = undefined\n  @state() private idPattern = '{i}'\n  @state() private idStart = 1\n  @state() private idPadding = 0\n  @state() private area!: Area\n  @state() private conflictPolicy: ConflictPolicy = 'skip'\n\n  @query('#count-input') countInput!: HTMLInputElement\n\n  connectedCallback() {\n    super.connectedCallback()\n    // OxPopup wrapper (ox-popup) 의 흰색 배경 + box-shadow 가 dialog 라운드 코너\n    // 밖으로 비쳐서 4 꼭지점에 흰색 사각형이 보임. 부모를 투명/그림자 없이 만들어\n    // dialog 자체의 라운드 + 그림자만 보이게.\n    const parent = this.parentElement as HTMLElement | null\n    if (parent) {\n      parent.style.background = 'transparent'\n      parent.style.boxShadow = 'none'\n      parent.style.border = 'none'\n    }\n    this.area = { ...this.initialArea }\n\n    // 1) 영역 종횡비로 레이아웃 기본 선택:\n    //    너비 ≫ 높이 → line-h (가로), 높이 ≫ 너비 → line-v (세로), 비슷하면 grid.\n    const w = Math.max(this.area.width, 1)\n    const h = Math.max(this.area.height, 1)\n    const aspect = w / h\n    if (aspect >= 2.5) this.pattern = 'line-h'\n    else if (aspect <= 0.4) this.pattern = 'line-v'\n    else this.pattern = 'grid'\n\n    // 2) 템플릿 id 로부터 ID 패턴 / padding 자동 추론.\n    const inferred = inferIdPattern(this.template?.id)\n    this.idPattern = inferred.pattern\n    this.idPadding = inferred.padding\n\n    // 3) 시작 번호 = existingIds 에 패턴 매칭되는 *최대 번호 + 1*.\n    //    반복 bulk-paste 시 이전 batch 의 끝 다음으로 자동 advance.\n    //    매칭 ID 가 없으면 inferIdPattern 의 fallback (= template num+1) 사용.\n    this.idStart = nextAvailableStart(inferred.pattern, this.existingIds, inferred.start)\n  }\n\n  /** rows/cols 가 미입력 (undefined) 이면 영역 종횡비 + count 로 자동 계산해 표시. */\n  private get displayRows(): number {\n    if (this.rows != null) return this.rows\n    return deriveGridShape(this.count, this.area, undefined, this.cols).rows\n  }\n\n  private get displayCols(): number {\n    if (this.cols != null) return this.cols\n    return deriveGridShape(this.count, this.area, this.rows, undefined).cols\n  }\n\n  firstUpdated() {\n    this.countInput?.focus()\n    this.countInput?.select()\n  }\n\n  private updateArea(field: keyof Area, value: number) {\n    this.area = { ...this.area, [field]: value }\n  }\n\n  private get previewModels() {\n    if (!this.template) return []\n    return generateBulkComponents({\n      template: this.template,\n      area: this.area,\n      pattern: this.pattern,\n      count: this.count,\n      rows: this.rows,\n      cols: this.cols,\n      idPattern: this.idPattern.replace(/\\{type\\}/g, String(this.template?.type ?? 'C')),\n      idStart: this.idStart,\n      idPadding: this.idPadding\n    })\n  }\n\n  private get conflicts(): string[] {\n    return findIdConflicts(this.previewModels, this.existingIds)\n  }\n\n  /** 충돌 정책 적용 후 실제 생성될 model 배열. */\n  private get effectiveModels() {\n    const all = this.previewModels\n    if (this.conflictPolicy === 'skip' && this.existingIds.size > 0) {\n      return all.filter(m => !this.existingIds.has(m.id))\n    }\n    return all\n  }\n\n  private onOk = () => {\n    const models = this.effectiveModels\n    if (models.length === 0) return\n    this.onConfirm(models)\n  }\n\n  private onCancelClick = () => {\n    this.onCancel?.()\n  }\n\n  render() {\n    const tplType = this.template?.type ?? '?'\n    const tplId = this.template?.id ?? '?'\n    const models = this.previewModels\n\n    return html`\n      <h3>Bulk Paste — ${tplType}</h3>\n\n      <div class=\"row\">\n        <label>템플릿</label>\n        <span style=\"color:#b6d4fe;\">${tplId} <span style=\"color:rgba(255,255,255,0.4);\">(${tplType})</span></span>\n      </div>\n\n      <div class=\"row\">\n        <label>레이아웃</label>\n        <div class=\"pattern-picker\">\n          <button\n            type=\"button\"\n            class=\"pattern-btn ${this.pattern === 'grid' ? 'active' : ''}\"\n            @click=${() => (this.pattern = 'grid')}\n            title=\"격자\"\n          >\n            <svg viewBox=\"0 0 24 24\">\n              <circle cx=\"6\" cy=\"6\" r=\"1.6\" /><circle cx=\"12\" cy=\"6\" r=\"1.6\" /><circle cx=\"18\" cy=\"6\" r=\"1.6\" />\n              <circle cx=\"6\" cy=\"12\" r=\"1.6\" /><circle cx=\"12\" cy=\"12\" r=\"1.6\" /><circle cx=\"18\" cy=\"12\" r=\"1.6\" />\n              <circle cx=\"6\" cy=\"18\" r=\"1.6\" /><circle cx=\"12\" cy=\"18\" r=\"1.6\" /><circle cx=\"18\" cy=\"18\" r=\"1.6\" />\n            </svg>\n            <span>격자</span>\n          </button>\n          <button\n            type=\"button\"\n            class=\"pattern-btn ${this.pattern === 'line-h' ? 'active' : ''}\"\n            @click=${() => (this.pattern = 'line-h')}\n            title=\"가로 1줄\"\n          >\n            <svg viewBox=\"0 0 24 24\">\n              <circle cx=\"3\" cy=\"12\" r=\"1.6\" /><circle cx=\"8\" cy=\"12\" r=\"1.6\" /><circle cx=\"13\" cy=\"12\" r=\"1.6\" />\n              <circle cx=\"18\" cy=\"12\" r=\"1.6\" /><circle cx=\"22\" cy=\"12\" r=\"1.4\" />\n            </svg>\n            <span>가로</span>\n          </button>\n          <button\n            type=\"button\"\n            class=\"pattern-btn ${this.pattern === 'line-v' ? 'active' : ''}\"\n            @click=${() => (this.pattern = 'line-v')}\n            title=\"세로 1줄\"\n          >\n            <svg viewBox=\"0 0 24 24\">\n              <circle cx=\"12\" cy=\"3\" r=\"1.6\" /><circle cx=\"12\" cy=\"8\" r=\"1.6\" /><circle cx=\"12\" cy=\"13\" r=\"1.6\" />\n              <circle cx=\"12\" cy=\"18\" r=\"1.6\" /><circle cx=\"12\" cy=\"22\" r=\"1.4\" />\n            </svg>\n            <span>세로</span>\n          </button>\n        </div>\n      </div>\n\n      <div class=\"row\">\n        <label>개수</label>\n        <input\n          id=\"count-input\"\n          type=\"number\"\n          min=\"1\"\n          .value=${String(this.count)}\n          @input=${(e: Event) => (this.count = Math.max(1, +(e.target as HTMLInputElement).value))}\n        />\n      </div>\n\n      ${this.pattern === 'grid'\n        ? html`\n            <div class=\"row\">\n              <label>행 × 열</label>\n              <div class=\"grid-shape\">\n                <input\n                  type=\"number\"\n                  min=\"1\"\n                  .value=${String(this.displayRows)}\n                  @input=${(e: Event) => {\n                    const v = (e.target as HTMLInputElement).value\n                    this.rows = v ? Math.max(1, +v) : undefined\n                  }}\n                />\n                <span>×</span>\n                <input\n                  type=\"number\"\n                  min=\"1\"\n                  .value=${String(this.displayCols)}\n                  @input=${(e: Event) => {\n                    const v = (e.target as HTMLInputElement).value\n                    this.cols = v ? Math.max(1, +v) : undefined\n                  }}\n                />\n              </div>\n            </div>\n          `\n        : ''}\n\n      <div class=\"row\">\n        <label>ID 패턴</label>\n        <input\n          type=\"text\"\n          .value=${this.idPattern}\n          @input=${(e: Event) => (this.idPattern = (e.target as HTMLInputElement).value)}\n        />\n      </div>\n      <div class=\"row\">\n        <span></span>\n        <div class=\"hint\">placeholder: <code>{i}</code> 일련번호, <code>{r}</code> 행, <code>{c}</code> 열 (grid)</div>\n      </div>\n\n      <div class=\"row\">\n        <label>시작 번호</label>\n        <input\n          type=\"number\"\n          .value=${String(this.idStart)}\n          @input=${(e: Event) => (this.idStart = +(e.target as HTMLInputElement).value)}\n        />\n      </div>\n\n      <div class=\"row\">\n        <label>Zero-pad 자릿수</label>\n        <input\n          type=\"number\"\n          min=\"0\"\n          .value=${String(this.idPadding)}\n          @input=${(e: Event) => (this.idPadding = Math.max(0, +(e.target as HTMLInputElement).value))}\n        />\n      </div>\n\n      <div class=\"preview\">\n        ${models.length > 0\n          ? html`총 ${models.length}개 — 예: <code>${models[0].id}</code> ... <code>${models[models.length - 1].id}</code>`\n          : html`<span style=\"color:#ff8080;\">생성될 컴포넌트 없음</span>`}\n      </div>\n\n      ${this.conflicts.length > 0\n        ? html`\n            <div class=\"conflict\">\n              <strong>ID 충돌 ${this.conflicts.length}개</strong>\n              <code>${this.conflicts.slice(0, 5).join(', ')}${this.conflicts.length > 5 ? ', ...' : ''}</code>\n              <div class=\"conflict-hint\" style=\"margin-top:6px;\">\n                <div class=\"policy-radios\">\n                  <label>\n                    <input\n                      type=\"radio\"\n                      name=\"conflict-policy\"\n                      value=\"skip\"\n                      .checked=${this.conflictPolicy === 'skip'}\n                      @change=${() => (this.conflictPolicy = 'skip')}\n                    />\n                    충돌 ID 스킵 (기본)\n                  </label>\n                  <label>\n                    <input\n                      type=\"radio\"\n                      name=\"conflict-policy\"\n                      value=\"duplicate\"\n                      .checked=${this.conflictPolicy === 'duplicate'}\n                      @change=${() => (this.conflictPolicy = 'duplicate')}\n                    />\n                    중복 그대로 생성\n                  </label>\n                </div>\n              </div>\n            </div>\n          `\n        : ''}\n\n      <div class=\"actions\">\n        <button @click=${this.onCancelClick}>취소</button>\n        <button\n          class=\"primary\"\n          @click=${this.onOk}\n          ?disabled=${this.effectiveModels.length === 0}\n        >\n          생성 (${this.effectiveModels.length}${\n            this.conflicts.length > 0 && this.conflictPolicy === 'skip'\n              ? html`<span style=\"opacity:0.6;\"> / ${models.length}</span>`\n              : ''\n          })\n        </button>\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bulk-create-dialog': BulkCreateDialog\n  }\n}\n"]}