@fmsim/board 2.0.0-beta.11 → 2.0.0-beta.111

package/dist/src/modeller/bulk-create.d.ts

@@ -0,0 +1,107 @@
+export type Pattern = 'grid' | 'line-h' | 'line-v';
+export interface Area {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+}
+export interface BulkCreateOptions {
+    /** 복제할 원본 컴포넌트 state. id, left, top 제외하고 모두 상속. */
+    template: Record<string, any>;
+    /** 타겟 영역 (보드 좌표). */
+    area: Area;
+    /** 분포 패턴. */
+    pattern: Pattern;
+    /**
+     * 총 개수. grid 패턴에선 rows × cols 로 분해.
+     * rows/cols 가 명시되면 그것 사용, 미명시 시 area 비율과 count 로 자동 결정.
+     */
+    count: number;
+    /** grid pattern 용 — 행 수. 미지정 시 area 비율 + count 로 자동. */
+    rows?: number;
+    /** grid pattern 용 — 열 수. 미지정 시 area 비율 + count 로 자동. */
+    cols?: number;
+    /**
+     * ID 패턴. placeholder:
+     *   `{i}` — 일련번호 (0-based + idStart)
+     *   `{r}` — 행 index (grid 만, 0-based + idStart)
+     *   `{c}` — 열 index (grid 만, 0-based + idStart)
+     * 예: "PORT_{i}", "P_{r}_{c}", "CELL{r}{c}"
+     */
+    idPattern: string;
+    /** ID 시작 번호. default 1. */
+    idStart?: number;
+    /** ID 숫자 자릿수 (zero-pad). 0 = 미적용. default 0. */
+    idPadding?: number;
+    /**
+     * 컴포넌트의 크기를 사용할지 (= template.width/height 그대로) 또는 cell 에
+     * 맞춰 자동 조정할지. default 'template' (원본 크기 유지).
+     */
+    sizeMode?: 'template' | 'fit-cell';
+    /**
+     * 생성되는 모든 컴포넌트 model 에 병합할 추가 state (도메인 무지).
+     * consumer 가 필요 시 주입 (예: fmsim 의 parentObjectId). 이 generic 생성기는
+     * 값의 의미를 모른다 — 그냥 각 model 에 spread 한다.
+     */
+    extraState?: Record<string, any>;
+}
+export interface GeneratedModel {
+    type?: string;
+    id: string;
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+    [key: string]: any;
+}
+/**
+ * 타겟 영역과 총 count 로 grid 의 (rows, cols) 자동 결정.
+ * area 의 종횡비를 가능한 한 보존.
+ */
+export declare function deriveGridShape(count: number, area: Area, rows?: number, cols?: number): {
+    rows: number;
+    cols: number;
+};
+/**
+ * 메인 헬퍼 — 옵션을 받아 새 컴포넌트 model 배열 반환.
+ *
+ * **주의**: 반환된 model 은 `scene.add(models)` 로 추가하면 된다. ID 충돌 사전
+ * 검사는 호출 측 책임 — `findIdConflicts` 와 결합 사용.
+ */
+export declare function generateBulkComponents(opts: BulkCreateOptions): GeneratedModel[];
+/**
+ * 생성될 model 의 id 중 기존 scene 의 id 와 충돌하는 것 검출.
+ * @returns 충돌하는 id 배열 (없으면 빈 배열).
+ */
+export declare function findIdConflicts(models: GeneratedModel[], existingIds: Iterable<string>): string[];
+/**
+ * 템플릿의 id 문자열로부터 다음 컴포넌트들의 ID 패턴을 자동 추론.
+ *
+ * 규칙:
+ *   - 끝에 숫자 있음: `"PORT_05"` → `{ pattern: "PORT_{i}", start: 6, padding: 2 }`
+ *   - 끝에 숫자 없음: `"abc"` → `{ pattern: "abc_{i}", start: 1, padding: 0 }`
+ *   - 빈 id: `{ pattern: "{i}", start: 1, padding: 0 }`
+ *
+ * padding 은 *leading zero* 가 있을 때만 적용:
+ *   - "05" → padding 2 (= "01", "02"... 형식 유지)
+ *   - "5" → padding 0 (= "1", "2"... 형식)
+ */
+export declare function inferIdPattern(id: string | undefined | null): {
+    pattern: string;
+    start: number;
+    padding: number;
+};
+/**
+ * 패턴이 매칭하는 기존 ID 들 중 *최대 번호 + 1* 반환 — 반복 bulk-create 시
+ * 시작 번호 자동 advance 용.
+ *
+ * 예:
+ *   pattern = "PORT_{i}", existingIds = ["PORT_05", "PORT_12", "Other_1"]
+ *   → 13 (= 12 + 1)
+ *
+ * 매칭 안 되면 fallbackStart 반환 (기본 inferIdPattern 의 start).
+ *
+ * NOTE: 현재 `{i}` placeholder 만 인식. `{r}` / `{c}` 는 grid 전용이므로 별도
+ * 처리 필요 (추후).
+ */
+export declare function nextAvailableStart(idPattern: string, existingIds: Iterable<string>, fallbackStart: number): number;

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

@@ -0,0 +1,201 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ *
+ * Bulk-create — 단일 템플릿 컴포넌트로부터 N개의 컴포넌트 model 을 일괄 생성
+ * 하는 순수 헬퍼 모음.
+ *
+ * 설계 원칙:
+ *   - 순수 함수 (UI / scene side-effect 없음)
+ *   - 도메인 중립 (factory, board-ai, fmsim, operato-* 등 모든 consumer 가 동일하게 사용)
+ *   - 의존성 0 (Three.js / Lit 불필요)
+ *
+ * 사용 패턴:
+ *   1. consumer 가 template (= 컴포넌트 model state) + area + 옵션 수집
+ *   2. generateBulkComponents() → 새 컴포넌트 model 배열 반환
+ *   3. scene.undoableChange(() => scene.add(models)) — 단일 undo 단위로 추가
+ *
+ * 결합 사용:
+ *   - deriveGridShape: 격자 패턴의 (rows, cols) 자동 결정
+ *   - inferIdPattern: 템플릿의 id 로부터 ID 패턴/시작/padding 자동 추출
+ *   - nextAvailableStart: 반복 호출 시 시작번호 자동 advance (existingIds 스캔)
+ *   - findIdConflicts: 생성될 ID 가 scene 의 기존 ID 와 충돌하는지 검출
+ */
+/**
+ * 타겟 영역과 총 count 로 grid 의 (rows, cols) 자동 결정.
+ * area 의 종횡비를 가능한 한 보존.
+ */
+export function deriveGridShape(count, area, rows, cols) {
+    if (rows && cols)
+        return { rows, cols };
+    if (rows)
+        return { rows, cols: Math.ceil(count / rows) };
+    if (cols)
+        return { rows: Math.ceil(count / cols), cols };
+    // 자동: area 의 종횡비와 비슷한 grid 도출.
+    // cols / rows ≈ width / height → cols ≈ sqrt(count × width / height)
+    const aspect = area.width / Math.max(area.height, 1);
+    const c = Math.max(1, Math.round(Math.sqrt(count * aspect)));
+    const r = Math.max(1, Math.ceil(count / c));
+    return { rows: r, cols: c };
+}
+/**
+ * ID 패턴 치환 — {i}, {r}, {c} placeholder.
+ */
+function formatId(pattern, i, r, c, start, padding) {
+    const pad = (n) => {
+        const v = n + start;
+        return padding > 0 ? String(v).padStart(padding, '0') : String(v);
+    };
+    return pattern
+        .replace(/\{i\}/g, pad(i))
+        .replace(/\{r\}/g, pad(r))
+        .replace(/\{c\}/g, pad(c));
+}
+/**
+ * 메인 헬퍼 — 옵션을 받아 새 컴포넌트 model 배열 반환.
+ *
+ * **주의**: 반환된 model 은 `scene.add(models)` 로 추가하면 된다. ID 충돌 사전
+ * 검사는 호출 측 책임 — `findIdConflicts` 와 결합 사용.
+ */
+export function generateBulkComponents(opts) {
+    const { template, area, pattern, count, idPattern, idStart = 1, idPadding = 0, sizeMode = 'template' } = opts;
+    if (count <= 0)
+        return [];
+    if (!template || typeof template !== 'object')
+        return [];
+    // template 에서 제외할 필드. id/위치 는 새로 생성. (width/height 는 sizeMode 에 따라 처리)
+    const { id: _id, left: _l, top: _t, width: _w, height: _h, ...restRaw } = template;
+    // consumer 가 주입한 extraState 를 병합 (예: parentObjectId). 각 model 에 그대로 상속된다.
+    const rest = opts.extraState ? { ...restRaw, ...opts.extraState } : restRaw;
+    const tplW = typeof template.width === 'number' ? template.width : 50;
+    const tplH = typeof template.height === 'number' ? template.height : 50;
+    const result = [];
+    if (pattern === 'grid') {
+        const { rows, cols } = deriveGridShape(count, area, opts.rows, opts.cols);
+        const cellW = area.width / cols;
+        const cellH = area.height / rows;
+        const itemW = sizeMode === 'fit-cell' ? Math.min(cellW, cellH) * 0.8 : tplW;
+        const itemH = sizeMode === 'fit-cell' ? Math.min(cellW, cellH) * 0.8 : tplH;
+        let i = 0;
+        outer: for (let r = 0; r < rows; r++) {
+            for (let c = 0; c < cols; c++) {
+                if (i >= count)
+                    break outer;
+                const cx = area.left + cellW * (c + 0.5);
+                const cy = area.top + cellH * (r + 0.5);
+                result.push({
+                    ...rest,
+                    id: formatId(idPattern, i, r, c, idStart, idPadding),
+                    left: cx - itemW / 2,
+                    top: cy - itemH / 2,
+                    width: itemW,
+                    height: itemH
+                });
+                i++;
+            }
+        }
+    }
+    else if (pattern === 'line-h' || pattern === 'line-v') {
+        const isH = pattern === 'line-h';
+        const span = isH ? area.width : area.height;
+        const cellSize = span / count;
+        const itemW = sizeMode === 'fit-cell' && isH ? cellSize * 0.8 : tplW;
+        const itemH = sizeMode === 'fit-cell' && !isH ? cellSize * 0.8 : tplH;
+        for (let i = 0; i < count; i++) {
+            const along = (i + 0.5) * cellSize;
+            const cx = isH ? area.left + along : area.left + area.width / 2;
+            const cy = isH ? area.top + area.height / 2 : area.top + along;
+            result.push({
+                ...rest,
+                id: formatId(idPattern, i, 0, i, idStart, idPadding),
+                left: cx - itemW / 2,
+                top: cy - itemH / 2,
+                width: itemW,
+                height: itemH
+            });
+        }
+    }
+    return result;
+}
+/**
+ * 생성될 model 의 id 중 기존 scene 의 id 와 충돌하는 것 검출.
+ * @returns 충돌하는 id 배열 (없으면 빈 배열).
+ */
+export function findIdConflicts(models, existingIds) {
+    const set = existingIds instanceof Set ? existingIds : new Set(existingIds);
+    const conflicts = [];
+    for (const m of models) {
+        if (set.has(m.id))
+            conflicts.push(m.id);
+    }
+    return conflicts;
+}
+/**
+ * 템플릿의 id 문자열로부터 다음 컴포넌트들의 ID 패턴을 자동 추론.
+ *
+ * 규칙:
+ *   - 끝에 숫자 있음: `"PORT_05"` → `{ pattern: "PORT_{i}", start: 6, padding: 2 }`
+ *   - 끝에 숫자 없음: `"abc"` → `{ pattern: "abc_{i}", start: 1, padding: 0 }`
+ *   - 빈 id: `{ pattern: "{i}", start: 1, padding: 0 }`
+ *
+ * padding 은 *leading zero* 가 있을 때만 적용:
+ *   - "05" → padding 2 (= "01", "02"... 형식 유지)
+ *   - "5" → padding 0 (= "1", "2"... 형식)
+ */
+export function inferIdPattern(id) {
+    if (!id || typeof id !== 'string') {
+        return { pattern: '{i}', start: 1, padding: 0 };
+    }
+    const m = id.match(/^(.*?)(\d+)$/);
+    if (m) {
+        const prefix = m[1];
+        const numStr = m[2];
+        const num = parseInt(numStr, 10);
+        const padding = numStr.length > 1 && numStr.startsWith('0') ? numStr.length : 0;
+        return {
+            pattern: `${prefix}{i}`,
+            start: num + 1,
+            padding
+        };
+    }
+    return {
+        pattern: `${id}_{i}`,
+        start: 1,
+        padding: 0
+    };
+}
+/**
+ * 패턴이 매칭하는 기존 ID 들 중 *최대 번호 + 1* 반환 — 반복 bulk-create 시
+ * 시작 번호 자동 advance 용.
+ *
+ * 예:
+ *   pattern = "PORT_{i}", existingIds = ["PORT_05", "PORT_12", "Other_1"]
+ *   → 13 (= 12 + 1)
+ *
+ * 매칭 안 되면 fallbackStart 반환 (기본 inferIdPattern 의 start).
+ *
+ * NOTE: 현재 `{i}` placeholder 만 인식. `{r}` / `{c}` 는 grid 전용이므로 별도
+ * 처리 필요 (추후).
+ */
+export function nextAvailableStart(idPattern, existingIds, fallbackStart) {
+    if (!idPattern.includes('{i}'))
+        return fallbackStart;
+    // pattern → regex. {i} → 캡쳐, {r}/{c} → 그냥 숫자, 특수문자 escape.
+    const escaped = idPattern.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    const re = new RegExp('^' +
+        escaped
+            .replace(/\\\{i\\\}/g, '(\\d+)')
+            .replace(/\\\{[rc]\\\}/g, '\\d+') +
+        '$');
+    let max = -1;
+    for (const id of existingIds) {
+        const m = id.match(re);
+        if (m) {
+            const n = parseInt(m[1], 10);
+            if (!Number.isNaN(n) && n > max)
+                max = n;
+        }
+    }
+    return max >= 0 ? max + 1 : fallbackStart;
+}
+//# sourceMappingURL=bulk-create.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"bulk-create.js","sourceRoot":"","sources":["../../../src/modeller/bulk-create.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n *\n * Bulk-create — 단일 템플릿 컴포넌트로부터 N개의 컴포넌트 model 을 일괄 생성\n * 하는 순수 헬퍼 모음.\n *\n * 설계 원칙:\n *   - 순수 함수 (UI / scene side-effect 없음)\n *   - 도메인 중립 (factory, board-ai, fmsim, operato-* 등 모든 consumer 가 동일하게 사용)\n *   - 의존성 0 (Three.js / Lit 불필요)\n *\n * 사용 패턴:\n *   1. consumer 가 template (= 컴포넌트 model state) + area + 옵션 수집\n *   2. generateBulkComponents() → 새 컴포넌트 model 배열 반환\n *   3. scene.undoableChange(() => scene.add(models)) — 단일 undo 단위로 추가\n *\n * 결합 사용:\n *   - deriveGridShape: 격자 패턴의 (rows, cols) 자동 결정\n *   - inferIdPattern: 템플릿의 id 로부터 ID 패턴/시작/padding 자동 추출\n *   - nextAvailableStart: 반복 호출 시 시작번호 자동 advance (existingIds 스캔)\n *   - findIdConflicts: 생성될 ID 가 scene 의 기존 ID 와 충돌하는지 검출\n */\n\nexport type Pattern = 'grid' | 'line-h' | 'line-v'\n\nexport interface Area {\n  left: number\n  top: number\n  width: number\n  height: number\n}\n\nexport interface BulkCreateOptions {\n  /** 복제할 원본 컴포넌트 state. id, left, top 제외하고 모두 상속. */\n  template: Record<string, any>\n  /** 타겟 영역 (보드 좌표). */\n  area: Area\n  /** 분포 패턴. */\n  pattern: Pattern\n  /**\n   * 총 개수. grid 패턴에선 rows × cols 로 분해.\n   * rows/cols 가 명시되면 그것 사용, 미명시 시 area 비율과 count 로 자동 결정.\n   */\n  count: number\n  /** grid pattern 용 — 행 수. 미지정 시 area 비율 + count 로 자동. */\n  rows?: number\n  /** grid pattern 용 — 열 수. 미지정 시 area 비율 + count 로 자동. */\n  cols?: number\n  /**\n   * ID 패턴. placeholder:\n   *   `{i}` — 일련번호 (0-based + idStart)\n   *   `{r}` — 행 index (grid 만, 0-based + idStart)\n   *   `{c}` — 열 index (grid 만, 0-based + idStart)\n   * 예: \"PORT_{i}\", \"P_{r}_{c}\", \"CELL{r}{c}\"\n   */\n  idPattern: string\n  /** ID 시작 번호. default 1. */\n  idStart?: number\n  /** ID 숫자 자릿수 (zero-pad). 0 = 미적용. default 0. */\n  idPadding?: number\n  /**\n   * 컴포넌트의 크기를 사용할지 (= template.width/height 그대로) 또는 cell 에\n   * 맞춰 자동 조정할지. default 'template' (원본 크기 유지).\n   */\n  sizeMode?: 'template' | 'fit-cell'\n  /**\n   * 생성되는 모든 컴포넌트 model 에 병합할 추가 state (도메인 무지).\n   * consumer 가 필요 시 주입 (예: fmsim 의 parentObjectId). 이 generic 생성기는\n   * 값의 의미를 모른다 — 그냥 각 model 에 spread 한다.\n   */\n  extraState?: Record<string, any>\n}\n\nexport interface GeneratedModel {\n  type?: string\n  id: string\n  left: number\n  top: number\n  width: number\n  height: number\n  [key: string]: any\n}\n\n/**\n * 타겟 영역과 총 count 로 grid 의 (rows, cols) 자동 결정.\n * area 의 종횡비를 가능한 한 보존.\n */\nexport function deriveGridShape(\n  count: number,\n  area: Area,\n  rows?: number,\n  cols?: number\n): { rows: number; cols: number } {\n  if (rows && cols) return { rows, cols }\n  if (rows) return { rows, cols: Math.ceil(count / rows) }\n  if (cols) return { rows: Math.ceil(count / cols), cols }\n\n  // 자동: area 의 종횡비와 비슷한 grid 도출.\n  // cols / rows ≈ width / height → cols ≈ sqrt(count × width / height)\n  const aspect = area.width / Math.max(area.height, 1)\n  const c = Math.max(1, Math.round(Math.sqrt(count * aspect)))\n  const r = Math.max(1, Math.ceil(count / c))\n  return { rows: r, cols: c }\n}\n\n/**\n * ID 패턴 치환 — {i}, {r}, {c} placeholder.\n */\nfunction formatId(\n  pattern: string,\n  i: number,\n  r: number,\n  c: number,\n  start: number,\n  padding: number\n): string {\n  const pad = (n: number) => {\n    const v = n + start\n    return padding > 0 ? String(v).padStart(padding, '0') : String(v)\n  }\n  return pattern\n    .replace(/\\{i\\}/g, pad(i))\n    .replace(/\\{r\\}/g, pad(r))\n    .replace(/\\{c\\}/g, pad(c))\n}\n\n/**\n * 메인 헬퍼 — 옵션을 받아 새 컴포넌트 model 배열 반환.\n *\n * **주의**: 반환된 model 은 `scene.add(models)` 로 추가하면 된다. ID 충돌 사전\n * 검사는 호출 측 책임 — `findIdConflicts` 와 결합 사용.\n */\nexport function generateBulkComponents(opts: BulkCreateOptions): GeneratedModel[] {\n  const {\n    template,\n    area,\n    pattern,\n    count,\n    idPattern,\n    idStart = 1,\n    idPadding = 0,\n    sizeMode = 'template'\n  } = opts\n\n  if (count <= 0) return []\n  if (!template || typeof template !== 'object') return []\n\n  // template 에서 제외할 필드. id/위치 는 새로 생성. (width/height 는 sizeMode 에 따라 처리)\n  const { id: _id, left: _l, top: _t, width: _w, height: _h, ...restRaw } = template\n  // consumer 가 주입한 extraState 를 병합 (예: parentObjectId). 각 model 에 그대로 상속된다.\n  const rest = opts.extraState ? { ...restRaw, ...opts.extraState } : restRaw\n\n  const tplW = typeof template.width === 'number' ? template.width : 50\n  const tplH = typeof template.height === 'number' ? template.height : 50\n\n  const result: GeneratedModel[] = []\n\n  if (pattern === 'grid') {\n    const { rows, cols } = deriveGridShape(count, area, opts.rows, opts.cols)\n    const cellW = area.width / cols\n    const cellH = area.height / rows\n    const itemW = sizeMode === 'fit-cell' ? Math.min(cellW, cellH) * 0.8 : tplW\n    const itemH = sizeMode === 'fit-cell' ? Math.min(cellW, cellH) * 0.8 : tplH\n\n    let i = 0\n    outer: for (let r = 0; r < rows; r++) {\n      for (let c = 0; c < cols; c++) {\n        if (i >= count) break outer\n        const cx = area.left + cellW * (c + 0.5)\n        const cy = area.top + cellH * (r + 0.5)\n        result.push({\n          ...rest,\n          id: formatId(idPattern, i, r, c, idStart, idPadding),\n          left: cx - itemW / 2,\n          top: cy - itemH / 2,\n          width: itemW,\n          height: itemH\n        })\n        i++\n      }\n    }\n  } else if (pattern === 'line-h' || pattern === 'line-v') {\n    const isH = pattern === 'line-h'\n    const span = isH ? area.width : area.height\n    const cellSize = span / count\n    const itemW = sizeMode === 'fit-cell' && isH ? cellSize * 0.8 : tplW\n    const itemH = sizeMode === 'fit-cell' && !isH ? cellSize * 0.8 : tplH\n\n    for (let i = 0; i < count; i++) {\n      const along = (i + 0.5) * cellSize\n      const cx = isH ? area.left + along : area.left + area.width / 2\n      const cy = isH ? area.top + area.height / 2 : area.top + along\n      result.push({\n        ...rest,\n        id: formatId(idPattern, i, 0, i, idStart, idPadding),\n        left: cx - itemW / 2,\n        top: cy - itemH / 2,\n        width: itemW,\n        height: itemH\n      })\n    }\n  }\n\n  return result\n}\n\n/**\n * 생성될 model 의 id 중 기존 scene 의 id 와 충돌하는 것 검출.\n * @returns 충돌하는 id 배열 (없으면 빈 배열).\n */\nexport function findIdConflicts(\n  models: GeneratedModel[],\n  existingIds: Iterable<string>\n): string[] {\n  const set = existingIds instanceof Set ? existingIds : new Set(existingIds)\n  const conflicts: string[] = []\n  for (const m of models) {\n    if (set.has(m.id)) conflicts.push(m.id)\n  }\n  return conflicts\n}\n\n/**\n * 템플릿의 id 문자열로부터 다음 컴포넌트들의 ID 패턴을 자동 추론.\n *\n * 규칙:\n *   - 끝에 숫자 있음: `\"PORT_05\"` → `{ pattern: \"PORT_{i}\", start: 6, padding: 2 }`\n *   - 끝에 숫자 없음: `\"abc\"` → `{ pattern: \"abc_{i}\", start: 1, padding: 0 }`\n *   - 빈 id: `{ pattern: \"{i}\", start: 1, padding: 0 }`\n *\n * padding 은 *leading zero* 가 있을 때만 적용:\n *   - \"05\" → padding 2 (= \"01\", \"02\"... 형식 유지)\n *   - \"5\" → padding 0 (= \"1\", \"2\"... 형식)\n */\nexport function inferIdPattern(id: string | undefined | null): {\n  pattern: string\n  start: number\n  padding: number\n} {\n  if (!id || typeof id !== 'string') {\n    return { pattern: '{i}', start: 1, padding: 0 }\n  }\n  const m = id.match(/^(.*?)(\\d+)$/)\n  if (m) {\n    const prefix = m[1]\n    const numStr = m[2]\n    const num = parseInt(numStr, 10)\n    const padding = numStr.length > 1 && numStr.startsWith('0') ? numStr.length : 0\n    return {\n      pattern: `${prefix}{i}`,\n      start: num + 1,\n      padding\n    }\n  }\n  return {\n    pattern: `${id}_{i}`,\n    start: 1,\n    padding: 0\n  }\n}\n\n/**\n * 패턴이 매칭하는 기존 ID 들 중 *최대 번호 + 1* 반환 — 반복 bulk-create 시\n * 시작 번호 자동 advance 용.\n *\n * 예:\n *   pattern = \"PORT_{i}\", existingIds = [\"PORT_05\", \"PORT_12\", \"Other_1\"]\n *   → 13 (= 12 + 1)\n *\n * 매칭 안 되면 fallbackStart 반환 (기본 inferIdPattern 의 start).\n *\n * NOTE: 현재 `{i}` placeholder 만 인식. `{r}` / `{c}` 는 grid 전용이므로 별도\n * 처리 필요 (추후).\n */\nexport function nextAvailableStart(\n  idPattern: string,\n  existingIds: Iterable<string>,\n  fallbackStart: number\n): number {\n  if (!idPattern.includes('{i}')) return fallbackStart\n  // pattern → regex. {i} → 캡쳐, {r}/{c} → 그냥 숫자, 특수문자 escape.\n  const escaped = idPattern.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&')\n  const re = new RegExp(\n    '^' +\n      escaped\n        .replace(/\\\\\\{i\\\\\\}/g, '(\\\\d+)')\n        .replace(/\\\\\\{[rc]\\\\\\}/g, '\\\\d+') +\n      '$'\n  )\n  let max = -1\n  for (const id of existingIds) {\n    const m = id.match(re)\n    if (m) {\n      const n = parseInt(m[1], 10)\n      if (!Number.isNaN(n) && n > max) max = n\n    }\n  }\n  return max >= 0 ? max + 1 : fallbackStart\n}\n"]}

package/dist/src/modeller/component-toolbar/component-menu.d.ts

@@ -5,7 +5,7 @@ import { LitElement, PropertyValues } from 'lit';
 import { Scene } from '@hatiolab/things-scene';
 import { Pallet, PalletItem } from '../../types';
 import { ComponentDetail } from './component-detail';
-declare const ComponentMenu_base: typeof LitElement & import("@open-wc/dedupe-mixin").Constructor<import("@open-wc/scoped-elements/types/src/types").ScopedElementsHost>;
+declare const ComponentMenu_base: typeof LitElement & import("@open-wc/dedupe-mixin").Constructor<import("@open-wc/scoped-elements/types.js").ScopedElementsHost>;
 export declare class ComponentMenu extends ComponentMenu_base {
     static styles: import("lit").CSSResult[];
     groups: Pallet[];

package/dist/src/modeller/component-toolbar/component-toolbar.d.ts

@@ -5,7 +5,7 @@ import { LitElement, PropertyValues } from 'lit';
 import { Scene, SceneMode } from '@hatiolab/things-scene';
 import { ComponentGroup } from '../../types';
 import { ComponentMenu } from './component-menu.js';
-declare const ComponentToolbar_base: typeof LitElement & import("@open-wc/dedupe-mixin").Constructor<import("@open-wc/scoped-elements/types/src/types").ScopedElementsHost>;
+declare const ComponentToolbar_base: typeof LitElement & import("@open-wc/dedupe-mixin").Constructor<import("@open-wc/scoped-elements/types.js").ScopedElementsHost>;
 export declare class ComponentToolbar extends ComponentToolbar_base {
     static styles: import("lit").CSSResult[];
     componentGroupList: ComponentGroup[];
@@ -21,6 +21,12 @@ export declare class ComponentToolbar extends ComponentToolbar_base {
     static get scopedElements(): {
         'component-menu': typeof ComponentMenu;
     };
+    /**
+     * 3D 비활성(전역 isThreedEnabled()=false)에서는 3D 전용 컴포넌트 타입
+     * (requires3d — decal/backdrop/floor-plate 등)을 팔레트에서 제외하고, 비게 된 그룹도 숨긴다.
+     * 3D 활성(기본)이면 원본 목록 그대로.
+     */
+    private get _visibleGroupList();
     render(): import("lit-html").TemplateResult<1>;
     onWheelEvent(e: Event): void;
     _setMode(mode: SceneMode): void;

package/dist/src/modeller/component-toolbar/component-toolbar.js

@@ -4,7 +4,7 @@
 import { __decorate } from "tslib";
 import { css, html, LitElement } from 'lit';
 import { property, query, queryAll } from 'lit/decorators.js';
-import { SCENE_MODE } from '@hatiolab/things-scene';
+import { Component, SCENE_MODE, isThreedEnabled } from '@hatiolab/things-scene';
 import { ScopedElementsMixin } from '@open-wc/scoped-elements';
 import { ComponentMenu } from './component-menu.js';
 import { ICON_EDIT_MODE, ICON_SHIFT_MODE } from './mode-icons';
@@ -44,8 +44,24 @@ export class ComponentToolbar extends ScopedElementsMixin(LitElement) {
             'component-menu': ComponentMenu
         };
     }
+    /**
+     * 3D 비활성(전역 isThreedEnabled()=false)에서는 3D 전용 컴포넌트 타입
+     * (requires3d — decal/backdrop/floor-plate 등)을 팔레트에서 제외하고, 비게 된 그룹도 숨긴다.
+     * 3D 활성(기본)이면 원본 목록 그대로.
+     */
+    get _visibleGroupList() {
+        const list = this.componentGroupList || [];
+        if (isThreedEnabled())
+            return list;
+        return list
+            .map(group => ({
+            ...group,
+            templates: (group.templates || []).filter(t => { var _a; return !((_a = Component.register(t.type)) === null || _a === void 0 ? void 0 : _a.requires3d); })
+        }))
+            .filter(group => group.templates.length > 0);
+    }
     render() {
-        const componentList = this.componentGroupList || [];
+        const componentList = this._visibleGroupList;
         const modeIcon = this.icons[this.mode === SCENE_MODE.SHIFT ? 'mode-shift' : 'mode-edit'];
         return html `
       <div components @mousewheel=${(e) => this.onWheelEvent(e)}>

package/dist/src/modeller/component-toolbar/component-toolbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"component-toolbar.js","sourceRoot":"","sources":["../../../../src/modeller/component-toolbar/component-toolbar.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { property, query, queryAll } from 'lit/decorators.js'\n\nimport { Scene, SCENE_MODE, SceneMode } from '@hatiolab/things-scene'\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements'\n\nimport { ComponentGroup } from '../../types'\nimport { ComponentMenu } from './component-menu.js'\nimport { ICON_EDIT_MODE, ICON_SHIFT_MODE } from './mode-icons'\n\nexport class ComponentToolbar extends ScopedElementsMixin(LitElement) {\n  static styles = [\n    css`\n      :host {\n        left: 0;\n        display: block;\n        position: relative;\n\n        width: var(--component-toolbar-icon-size);\n        background-color: var(--component-toolbar-background-color);\n      }\n\n      [components] {\n        display: block;\n        padding: 0;\n        margin: 0;\n\n        width: 100%;\n        height: 100%;\n        overflow: hidden;\n      }\n\n      [components] > img {\n        display: flex;\n        flex-direction: row;\n\n        width: var(--component-toolbar-icon-size);\n        height: var(--component-toolbar-icon-size);\n        min-width: 50%;\n\n        border-bottom: var(--component-toolbar-border);\n        margin: 0;\n        padding: 6px;\n        box-sizing: border-box;\n      }\n\n      #shift[active] {\n        background-color: #beb9b3;\n      }\n\n      component-menu {\n        position: absolute;\n        top: 0;\n        left: var(--component-toolbar-icon-size);\n        height: 100%;\n        outline: none;\n      }\n\n      component-menu[hidden] {\n        display: none;\n      }\n    `\n  ]\n\n  @property({ type: Array }) componentGroupList: ComponentGroup[] = []\n  @property({ type: String }) group?: string | null\n  @property({ type: Object }) scene!: Scene\n  @property({ type: Number }) mode: SceneMode = SCENE_MODE.EDIT\n\n  @query('#shift') shift!: HTMLImageElement\n  @query('component-menu') private menu!: HTMLElement\n  @query('div[components]') private componentsContainer!: HTMLElement\n  @queryAll('[data-group]') private groups!: NodeListOf<HTMLElement>\n\n  private icons: { [name: string]: string } = {}\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('componentGroupList')) {\n      const color = getComputedStyle(this, null).getPropertyValue('--primary-color')\n\n      this.icons = (this.componentGroupList || [])\n        .filter(group => group.templates?.length > 0)\n        .reduce((sum, group: ComponentGroup) => {\n          sum[group.name] =\n            'data:image/svg+xml;charset=UTF-8;base64,' + btoa(group.icon.replace(/{{strokeColor}}/g, color))\n          return sum\n        }, {} as { [name: string]: string })\n\n      this.icons['mode-edit'] =\n        'data:image/svg+xml;charset=UTF-8;base64,' + btoa(ICON_EDIT_MODE.replace(/{{strokeColor}}/g, color))\n      this.icons['mode-shift'] =\n        'data:image/svg+xml;charset=UTF-8;base64,' + btoa(ICON_SHIFT_MODE.replace(/{{strokeColor}}/g, color))\n    }\n\n    if (changes.has('group')) {\n      this.groups.forEach(group => {\n        group.getAttribute('data-group') === this.group\n          ? group.setAttribute('active', '')\n          : group.removeAttribute('active')\n      })\n\n      this.group ? this.menu.removeAttribute('hidden') : this.menu.setAttribute('hidden', '')\n    }\n  }\n\n  static get scopedElements() {\n    return {\n      'component-menu': ComponentMenu\n    }\n  }\n\n  render() {\n    const componentList = this.componentGroupList || []\n    const modeIcon = this.icons[this.mode === SCENE_MODE.SHIFT ? 'mode-shift' : 'mode-edit']\n\n    return html`\n      <div components @mousewheel=${(e: MouseEvent) => this.onWheelEvent(e)}>\n        <img id=\"shift\" .src=${modeIcon} @click=${(e: MouseEvent) => this._onClickShift(e)} />\n\n        ${componentList\n          .filter(group => group.templates?.length > 0)\n          .map(\n            group => html`\n              <img\n                data-group=${group.name}\n                @click=${(e: MouseEvent) => this._onClickGroup(e)}\n                .src=${this.icons[group.name]}\n              />\n            `\n          )}\n      </div>\n\n      <component-menu\n        tabindex=\"-1\"\n        @focusout=${() => {\n          this.group = null\n        }}\n        .scene=${this.scene}\n        .group=${this.group}\n        .groups=${componentList}\n        hidden\n      >\n      </component-menu>\n    `\n  }\n\n  onWheelEvent(e: Event) {\n    var delta = Math.max(-1, Math.min(1, (e as WheelEvent).deltaY || -(e as WheelEvent).detail))\n    this.componentsContainer.scrollTop += delta * 10\n\n    e.preventDefault()\n  }\n\n  _setMode(mode: SceneMode) {\n    this.mode = mode\n\n    this.dispatchEvent(\n      new CustomEvent('mode-changed', {\n        bubbles: true,\n        composed: true,\n        detail: { value: mode }\n      })\n    )\n  }\n\n  _onClickShift(e: MouseEvent) {\n    const shift = this.shift\n\n    if (shift.hasAttribute('active')) {\n      shift.removeAttribute('active')\n      this._setMode(SCENE_MODE.EDIT)\n    } else {\n      shift.setAttribute('active', '')\n      this._setMode(SCENE_MODE.SHIFT)\n    }\n  }\n\n  async _onClickGroup(e: MouseEvent) {\n    var button = e.target as HTMLElement\n\n    this.group = button!.closest('[data-group]')?.getAttribute('data-group')\n\n    if (!this.group) return\n\n    await this.updateComplete\n\n    this.menu?.focus()\n  }\n}\n"]}
+{"version":3,"file":"component-toolbar.js","sourceRoot":"","sources":["../../../../src/modeller/component-toolbar/component-toolbar.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { property, query, queryAll } from 'lit/decorators.js'\n\nimport { Component, Scene, SCENE_MODE, SceneMode, isThreedEnabled } from '@hatiolab/things-scene'\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements'\n\nimport { ComponentGroup } from '../../types'\nimport { ComponentMenu } from './component-menu.js'\nimport { ICON_EDIT_MODE, ICON_SHIFT_MODE } from './mode-icons'\n\nexport class ComponentToolbar extends ScopedElementsMixin(LitElement) {\n  static styles = [\n    css`\n      :host {\n        left: 0;\n        display: block;\n        position: relative;\n\n        width: var(--component-toolbar-icon-size);\n        background-color: var(--component-toolbar-background-color);\n      }\n\n      [components] {\n        display: block;\n        padding: 0;\n        margin: 0;\n\n        width: 100%;\n        height: 100%;\n        overflow: hidden;\n      }\n\n      [components] > img {\n        display: flex;\n        flex-direction: row;\n\n        width: var(--component-toolbar-icon-size);\n        height: var(--component-toolbar-icon-size);\n        min-width: 50%;\n\n        border-bottom: var(--component-toolbar-border);\n        margin: 0;\n        padding: 6px;\n        box-sizing: border-box;\n      }\n\n      #shift[active] {\n        background-color: #beb9b3;\n      }\n\n      component-menu {\n        position: absolute;\n        top: 0;\n        left: var(--component-toolbar-icon-size);\n        height: 100%;\n        outline: none;\n      }\n\n      component-menu[hidden] {\n        display: none;\n      }\n    `\n  ]\n\n  @property({ type: Array }) componentGroupList: ComponentGroup[] = []\n  @property({ type: String }) group?: string | null\n  @property({ type: Object }) scene!: Scene\n  @property({ type: Number }) mode: SceneMode = SCENE_MODE.EDIT\n\n  @query('#shift') shift!: HTMLImageElement\n  @query('component-menu') private menu!: HTMLElement\n  @query('div[components]') private componentsContainer!: HTMLElement\n  @queryAll('[data-group]') private groups!: NodeListOf<HTMLElement>\n\n  private icons: { [name: string]: string } = {}\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('componentGroupList')) {\n      const color = getComputedStyle(this, null).getPropertyValue('--primary-color')\n\n      this.icons = (this.componentGroupList || [])\n        .filter(group => group.templates?.length > 0)\n        .reduce((sum, group: ComponentGroup) => {\n          sum[group.name] =\n            'data:image/svg+xml;charset=UTF-8;base64,' + btoa(group.icon.replace(/{{strokeColor}}/g, color))\n          return sum\n        }, {} as { [name: string]: string })\n\n      this.icons['mode-edit'] =\n        'data:image/svg+xml;charset=UTF-8;base64,' + btoa(ICON_EDIT_MODE.replace(/{{strokeColor}}/g, color))\n      this.icons['mode-shift'] =\n        'data:image/svg+xml;charset=UTF-8;base64,' + btoa(ICON_SHIFT_MODE.replace(/{{strokeColor}}/g, color))\n    }\n\n    if (changes.has('group')) {\n      this.groups.forEach(group => {\n        group.getAttribute('data-group') === this.group\n          ? group.setAttribute('active', '')\n          : group.removeAttribute('active')\n      })\n\n      this.group ? this.menu.removeAttribute('hidden') : this.menu.setAttribute('hidden', '')\n    }\n  }\n\n  static get scopedElements() {\n    return {\n      'component-menu': ComponentMenu\n    }\n  }\n\n  /**\n   * 3D 비활성(전역 isThreedEnabled()=false)에서는 3D 전용 컴포넌트 타입\n   * (requires3d — decal/backdrop/floor-plate 등)을 팔레트에서 제외하고, 비게 된 그룹도 숨긴다.\n   * 3D 활성(기본)이면 원본 목록 그대로.\n   */\n  private get _visibleGroupList(): ComponentGroup[] {\n    const list = this.componentGroupList || []\n    if (isThreedEnabled()) return list\n\n    return list\n      .map(group => ({\n        ...group,\n        templates: (group.templates || []).filter(t => !Component.register(t.type)?.requires3d)\n      }))\n      .filter(group => group.templates.length > 0)\n  }\n\n  render() {\n    const componentList = this._visibleGroupList\n    const modeIcon = this.icons[this.mode === SCENE_MODE.SHIFT ? 'mode-shift' : 'mode-edit']\n\n    return html`\n      <div components @mousewheel=${(e: MouseEvent) => this.onWheelEvent(e)}>\n        <img id=\"shift\" .src=${modeIcon} @click=${(e: MouseEvent) => this._onClickShift(e)} />\n\n        ${componentList\n          .filter(group => group.templates?.length > 0)\n          .map(\n            group => html`\n              <img\n                data-group=${group.name}\n                @click=${(e: MouseEvent) => this._onClickGroup(e)}\n                .src=${this.icons[group.name]}\n              />\n            `\n          )}\n      </div>\n\n      <component-menu\n        tabindex=\"-1\"\n        @focusout=${() => {\n          this.group = null\n        }}\n        .scene=${this.scene}\n        .group=${this.group}\n        .groups=${componentList}\n        hidden\n      >\n      </component-menu>\n    `\n  }\n\n  onWheelEvent(e: Event) {\n    var delta = Math.max(-1, Math.min(1, (e as WheelEvent).deltaY || -(e as WheelEvent).detail))\n    this.componentsContainer.scrollTop += delta * 10\n\n    e.preventDefault()\n  }\n\n  _setMode(mode: SceneMode) {\n    this.mode = mode\n\n    this.dispatchEvent(\n      new CustomEvent('mode-changed', {\n        bubbles: true,\n        composed: true,\n        detail: { value: mode }\n      })\n    )\n  }\n\n  _onClickShift(e: MouseEvent) {\n    const shift = this.shift\n\n    if (shift.hasAttribute('active')) {\n      shift.removeAttribute('active')\n      this._setMode(SCENE_MODE.EDIT)\n    } else {\n      shift.setAttribute('active', '')\n      this._setMode(SCENE_MODE.SHIFT)\n    }\n  }\n\n  async _onClickGroup(e: MouseEvent) {\n    var button = e.target as HTMLElement\n\n    this.group = button!.closest('[data-group]')?.getAttribute('data-group')\n\n    if (!this.group) return\n\n    await this.updateComplete\n\n    this.menu?.focus()\n  }\n}\n"]}

package/dist/src/modeller/edit-toolbar.d.ts

@@ -3,6 +3,7 @@
  */
 import { LitElement, PropertyValues } from 'lit';
 import { Component, Scene } from '@hatiolab/things-scene';
+import './bulk-create-dialog.js';
 export declare class EditToolbar extends LitElement {
     static styles: import("lit").CSSResult[];
     scene?: Scene;
@@ -36,6 +37,18 @@ export declare class EditToolbar extends LitElement {
     onTapCopy(): Promise<void>;
     onTapPaste(): void;
     onTapDelete(): void;
+    /**
+     * 멀티 컴포넌트 일괄 붙여넣기 — Ctrl+Shift+V 진입점.
+     *
+     * 흐름:
+     *   1. 클립보드 (this.cliped) 검증 — *단일* 컴포넌트만 허용
+     *   2. scene.startBulkCreateMode → AddLayer 가 캔버스 위에 드래그 박스 그림
+     *   3. 사용자가 영역 드래그 → Promise resolve({area, template})
+     *      ESC/취소 → Promise resolve(null)
+     *   4. 영역이 결정되면 dialog 오픈
+     */
+    onBulkPaste(): Promise<void>;
+    private _openBulkCreateDialog;
     onTapSelectAll(): void;
     onTapFontIncrease(e: TouchEvent): void;
     onTapFontDecrease(e: TouchEvent): void;