@operato/board 10.0.0-beta.46 → 10.0.0-beta.48

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 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.48](https://github.com/hatiolab/operato/compare/v10.0.0-beta.47...v10.0.0-beta.48) (2026-05-05)
+
+
+### :rocket: New Features
+
+* **property-panel:** generic-object 타입 변환 UI를 specifics 탭 전용 에디터로 이동 ([4b90f57](https://github.com/hatiolab/operato/commit/4b90f574c29f1677eb0dacc73b05e9fd10c9d2b2))
+
+
+
+## [10.0.0-beta.47](https://github.com/hatiolab/operato/compare/v10.0.0-beta.46...v10.0.0-beta.47) (2026-05-03)
+
+
+### :rocket: New Features
+
+* **modeller:** popup-container palette + inline-popup tap actions ([737b081](https://github.com/hatiolab/operato/commit/737b0819c287d7703f404db266e79b12281070d3))
+
+
+
 ## [10.0.0-beta.46](https://github.com/hatiolab/operato/compare/v10.0.0-beta.45...v10.0.0-beta.46) (2026-05-01)
 
 **Note:** Version bump only for package @operato/board

package/dist/src/component/container.js

@@ -52,6 +52,23 @@ export const container = {
                 strokeStyle: 'DarkGoldenRod',
                 hidden: true
             }
+        },
+        {
+            type: 'popup-container',
+            description: 'popup template — modeled in board, fresh instance per popup show',
+            icon: popup,
+            group: 'container',
+            model: {
+                type: 'popup-container',
+                left: 100,
+                top: 100,
+                width: 320,
+                height: 200,
+                fillStyle: '#fff',
+                strokeStyle: '#999',
+                lineWidth: 1,
+                position: 'popup'
+            }
         }
     ]
 };

package/dist/src/component/container.js.map

@@ -1 +1 @@
-{"version":3,"file":"container.js","sourceRoot":"","sources":["../../../src/component/container.ts"],"names":[],"mappings":"AAEA,MAAM,aAAa,GAAG,IAAI,GAAG,CAAC,yCAAyC,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAA;AAC9F,MAAM,KAAK,GAAG,IAAI,GAAG,CAAC,qCAAqC,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAA;AAElF,MAAM,IAAI,GAAG;;;;;;;;;;;;;CAaZ,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAmB;IACvC,IAAI,EAAE,WAAW;IACjB,WAAW,EAAE,+BAA+B;IAC5C,IAAI;IACJ,SAAS,EAAE;QACT;YACE,IAAI,EAAE,WAAW;YACjB,WAAW,EAAE,mBAAmB;YAChC,IAAI,EAAE,aAAa;YACnB,KAAK,EAAE,WAAW;YAClB,KAAK,EAAE;gBACL,IAAI,EAAE,WAAW;gBACjB,IAAI,EAAE,GAAG;gBACT,GAAG,EAAE,GAAG;gBACR,KAAK,EAAE,GAAG;gBACV,MAAM,EAAE,GAAG;gBACX,SAAS,EAAE,MAAM;gBACjB,WAAW,EAAE,MAAM;gBACnB,KAAK,EAAE,CAAC;gBACR,MAAM,EAAE,KAAK;gBACb,SAAS,EAAE,CAAC;aACb;SACF;QACD;YACE,IAAI,EAAE,OAAO;YACb,WAAW,EAAE,cAAc;YAC3B,IAAI,EAAE,KAAK;YACX,KAAK,EAAE,WAAW;YAClB,KAAK,EAAE;gBACL,IAAI,EAAE,OAAO;gBACb,IAAI,EAAE,GAAG;gBACT,GAAG,EAAE,GAAG;gBACR,KAAK,EAAE,GAAG;gBACV,MAAM,EAAE,GAAG;gBACX,SAAS,EAAE,MAAM;gBACjB,WAAW,EAAE,eAAe;gBAC5B,MAAM,EAAE,IAAI;aACb;SACF;KACF;CACF,CAAA","sourcesContent":["import { ComponentGroup } from '../types.js'\n\nconst iconContainer = new URL('../../../icons/components/container.png', import.meta.url).href\nconst popup = new URL('../../../icons/components/popup.png', import.meta.url).href\n\nconst icon = `\n<svg version=\"1.1\" id=\"Layer_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\" viewBox=\"0 0 30 30\" style=\"enable-background:new 0 0 30 30;\" xml:space=\"preserve\">\n  <style type=\"text/css\">\n    .st0{fill:{{strokeColor}};}\n    .st3{fill:none;stroke:{{strokeColor}};stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;}\n    .st9{fill:none;stroke:{{strokeColor}};stroke-miterlimit:10;}\n  </style>\n  <g>\n    <rect x=\"2.8\" y=\"10.3\" class=\"st9\" width=\"24.4\" height=\"13.8\"/>\n    <polygon class=\"st0\" points=\"27.7,9.8 2.3,9.8 7.8,5.9 22.2,5.9\"/>\n    <line class=\"st3\" x1=\"10.9\" y1=\"15.5\" x2=\"19.1\" y2=\"15.5\"/>\n  </g>\n</svg>\n`\n\nexport const container: ComponentGroup = {\n  name: 'container',\n  description: 'a group of various containers',\n  icon,\n  templates: [\n    {\n      type: 'container',\n      description: 'general container',\n      icon: iconContainer,\n      group: 'container',\n      model: {\n        type: 'container',\n        left: 100,\n        top: 100,\n        width: 100,\n        height: 100,\n        fillStyle: '#fff',\n        strokeStyle: '#999',\n        alpha: 1,\n        hidden: false,\n        lineWidth: 1\n      }\n    },\n    {\n      type: 'popup',\n      description: 'popup window',\n      icon: popup,\n      group: 'container',\n      model: {\n        type: 'popup',\n        left: 100,\n        top: 100,\n        width: 100,\n        height: 100,\n        fillStyle: '#fff',\n        strokeStyle: 'DarkGoldenRod',\n        hidden: true\n      }\n    }\n  ]\n}\n"]}
+{"version":3,"file":"container.js","sourceRoot":"","sources":["../../../src/component/container.ts"],"names":[],"mappings":"AAEA,MAAM,aAAa,GAAG,IAAI,GAAG,CAAC,yCAAyC,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAA;AAC9F,MAAM,KAAK,GAAG,IAAI,GAAG,CAAC,qCAAqC,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAA;AAElF,MAAM,IAAI,GAAG;;;;;;;;;;;;;CAaZ,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAmB;IACvC,IAAI,EAAE,WAAW;IACjB,WAAW,EAAE,+BAA+B;IAC5C,IAAI;IACJ,SAAS,EAAE;QACT;YACE,IAAI,EAAE,WAAW;YACjB,WAAW,EAAE,mBAAmB;YAChC,IAAI,EAAE,aAAa;YACnB,KAAK,EAAE,WAAW;YAClB,KAAK,EAAE;gBACL,IAAI,EAAE,WAAW;gBACjB,IAAI,EAAE,GAAG;gBACT,GAAG,EAAE,GAAG;gBACR,KAAK,EAAE,GAAG;gBACV,MAAM,EAAE,GAAG;gBACX,SAAS,EAAE,MAAM;gBACjB,WAAW,EAAE,MAAM;gBACnB,KAAK,EAAE,CAAC;gBACR,MAAM,EAAE,KAAK;gBACb,SAAS,EAAE,CAAC;aACb;SACF;QACD;YACE,IAAI,EAAE,OAAO;YACb,WAAW,EAAE,cAAc;YAC3B,IAAI,EAAE,KAAK;YACX,KAAK,EAAE,WAAW;YAClB,KAAK,EAAE;gBACL,IAAI,EAAE,OAAO;gBACb,IAAI,EAAE,GAAG;gBACT,GAAG,EAAE,GAAG;gBACR,KAAK,EAAE,GAAG;gBACV,MAAM,EAAE,GAAG;gBACX,SAAS,EAAE,MAAM;gBACjB,WAAW,EAAE,eAAe;gBAC5B,MAAM,EAAE,IAAI;aACb;SACF;QACD;YACE,IAAI,EAAE,iBAAiB;YACvB,WAAW,EAAE,kEAAkE;YAC/E,IAAI,EAAE,KAAK;YACX,KAAK,EAAE,WAAW;YAClB,KAAK,EAAE;gBACL,IAAI,EAAE,iBAAiB;gBACvB,IAAI,EAAE,GAAG;gBACT,GAAG,EAAE,GAAG;gBACR,KAAK,EAAE,GAAG;gBACV,MAAM,EAAE,GAAG;gBACX,SAAS,EAAE,MAAM;gBACjB,WAAW,EAAE,MAAM;gBACnB,SAAS,EAAE,CAAC;gBACZ,QAAQ,EAAE,OAAO;aAClB;SACF;KACF;CACF,CAAA","sourcesContent":["import { ComponentGroup } from '../types.js'\n\nconst iconContainer = new URL('../../../icons/components/container.png', import.meta.url).href\nconst popup = new URL('../../../icons/components/popup.png', import.meta.url).href\n\nconst icon = `\n<svg version=\"1.1\" id=\"Layer_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\" viewBox=\"0 0 30 30\" style=\"enable-background:new 0 0 30 30;\" xml:space=\"preserve\">\n  <style type=\"text/css\">\n    .st0{fill:{{strokeColor}};}\n    .st3{fill:none;stroke:{{strokeColor}};stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;}\n    .st9{fill:none;stroke:{{strokeColor}};stroke-miterlimit:10;}\n  </style>\n  <g>\n    <rect x=\"2.8\" y=\"10.3\" class=\"st9\" width=\"24.4\" height=\"13.8\"/>\n    <polygon class=\"st0\" points=\"27.7,9.8 2.3,9.8 7.8,5.9 22.2,5.9\"/>\n    <line class=\"st3\" x1=\"10.9\" y1=\"15.5\" x2=\"19.1\" y2=\"15.5\"/>\n  </g>\n</svg>\n`\n\nexport const container: ComponentGroup = {\n  name: 'container',\n  description: 'a group of various containers',\n  icon,\n  templates: [\n    {\n      type: 'container',\n      description: 'general container',\n      icon: iconContainer,\n      group: 'container',\n      model: {\n        type: 'container',\n        left: 100,\n        top: 100,\n        width: 100,\n        height: 100,\n        fillStyle: '#fff',\n        strokeStyle: '#999',\n        alpha: 1,\n        hidden: false,\n        lineWidth: 1\n      }\n    },\n    {\n      type: 'popup',\n      description: 'popup window',\n      icon: popup,\n      group: 'container',\n      model: {\n        type: 'popup',\n        left: 100,\n        top: 100,\n        width: 100,\n        height: 100,\n        fillStyle: '#fff',\n        strokeStyle: 'DarkGoldenRod',\n        hidden: true\n      }\n    },\n    {\n      type: 'popup-container',\n      description: 'popup template — modeled in board, fresh instance per popup show',\n      icon: popup,\n      group: 'container',\n      model: {\n        type: 'popup-container',\n        left: 100,\n        top: 100,\n        width: 320,\n        height: 200,\n        fillStyle: '#fff',\n        strokeStyle: '#999',\n        lineWidth: 1,\n        position: 'popup'\n      }\n    }\n  ]\n}\n"]}

package/dist/src/index.d.ts

@@ -4,6 +4,7 @@ export { BoardDataStorage, PlaylistStorage } from './data-storage/data-storage.j
 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

@@ -3,6 +3,7 @@ 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;AAClF,OAAO,EAAE,eAAe,EAAE,MAAM,qCAAqC,CAAA;AAGrE,cAAc,sBAAsB,CAAA;AACpC,cAAc,sBAAsB,CAAA;AACpC,cAAc,wBAAwB,CAAA;AACtC,cAAc,oBAAoB,CAAA;AAClC,cAAc,+BAA+B,CAAA","sourcesContent":["export * from './types.js'\n\nexport { registerDefaultGroups } from './component/register-default-groups.js'\nexport { BoardDataStorage, PlaylistStorage } from './data-storage/data-storage.js'\nexport { BoardModelCache } from './data-storage/board-model-cache.js'\nexport type { CachedBoard } from './data-storage/board-model-cache.js'\n\nexport * from './ox-board-viewer.js'\nexport * from './ox-board-player.js'\nexport * from './ox-board-modeller.js'\nexport * from './ox-board-list.js'\nexport * from './ox-board-template-viewer.js'\n"]}
+{"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/ox-board-preview.d.ts

@@ -0,0 +1,36 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ *
+ * `<ox-board-preview>` — boardModel JSON 을 read-only 시각으로 띄우는 lightweight 컴포넌트.
+ *
+ * 용도:
+ *   - board-import wizard 의 review 단계에서 시안 (variant) 별 썸네일 + 큰 미리보기
+ *   - 그 외 인터랙션 없이 보드를 살짝 보여주는 경우 (board card hover preview 등)
+ *
+ * 차이 (`<ox-board-viewer>` 대비):
+ *   - 데이터 바인딩 / playback / fullscreen / 검색 / popup / scenario 모두 X
+ *   - boardModel prop 직접 받음 (Board entity 가 필요 없음 — 미저장 model 도 지원)
+ *   - dataSubscription 미연결 — 정적 시각만
+ *   - 사용자 입력 미수용 (selectable, dragable 모두 비활성)
+ */
+import { LitElement, type PropertyValues } from 'lit';
+export declare class BoardPreview extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /**
+     * 보드 모델 JSON. 변경 시 Scene 재생성 (cheap operation).
+     * Object reference 가 같아도 deep 변경은 감지 못 하므로, 호출자가 새 객체로 갱신.
+     */
+    boardModel: any;
+    /** 사용자 클릭 / 휠 등 인터랙션 차단 (썸네일 모드용). */
+    interactive: boolean;
+    private _target;
+    private _scene;
+    render(): import("lit-html").TemplateResult<1>;
+    firstUpdated(): void;
+    updated(changes: PropertyValues<this>): void;
+    disconnectedCallback(): void;
+    /** Scene 새로 만들고 target 에 부착. 기존 Scene 은 dispose. */
+    private _rebuild;
+    /** Scene release + target 분리. */
+    private _dispose;
+}

package/dist/src/ox-board-preview.js

@@ -0,0 +1,114 @@
+import { __decorate } from "tslib";
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ *
+ * `<ox-board-preview>` — boardModel JSON 을 read-only 시각으로 띄우는 lightweight 컴포넌트.
+ *
+ * 용도:
+ *   - board-import wizard 의 review 단계에서 시안 (variant) 별 썸네일 + 큰 미리보기
+ *   - 그 외 인터랙션 없이 보드를 살짝 보여주는 경우 (board card hover preview 등)
+ *
+ * 차이 (`<ox-board-viewer>` 대비):
+ *   - 데이터 바인딩 / playback / fullscreen / 검색 / popup / scenario 모두 X
+ *   - boardModel prop 직접 받음 (Board entity 가 필요 없음 — 미저장 model 도 지원)
+ *   - dataSubscription 미연결 — 정적 시각만
+ *   - 사용자 입력 미수용 (selectable, dragable 모두 비활성)
+ */
+import { css, html, LitElement } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { create, SCENE_MODE } from '@hatiolab/things-scene';
+let BoardPreview = class BoardPreview extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * 보드 모델 JSON. 변경 시 Scene 재생성 (cheap operation).
+         * Object reference 가 같아도 deep 변경은 감지 못 하므로, 호출자가 새 객체로 갱신.
+         */
+        this.boardModel = null;
+        /** 사용자 클릭 / 휠 등 인터랙션 차단 (썸네일 모드용). */
+        this.interactive = false;
+        this._scene = null;
+    }
+    render() {
+        return html `<div
+      id="target"
+      style=${this.interactive ? '' : 'pointer-events: none;'}
+    ></div>`;
+    }
+    firstUpdated() {
+        this._rebuild();
+    }
+    updated(changes) {
+        if (changes.has('boardModel') && this._target) {
+            this._rebuild();
+        }
+    }
+    disconnectedCallback() {
+        this._dispose();
+        super.disconnectedCallback();
+    }
+    /** Scene 새로 만들고 target 에 부착. 기존 Scene 은 dispose. */
+    _rebuild() {
+        var _a, _b;
+        this._dispose();
+        if (!this.boardModel || !this._target)
+            return;
+        try {
+            this._scene = create({
+                model: { ...this.boardModel },
+                mode: SCENE_MODE.VIEW,
+                handlers: []
+            });
+            // 컴포넌트 모두 보이도록 fit
+            (_b = (_a = this._scene).fit) === null || _b === void 0 ? void 0 : _b.call(_a, this._scene.fitMode);
+            this._scene.target = this._target;
+        }
+        catch (e) {
+            console.warn('[ox-board-preview] failed to render boardModel:', e);
+        }
+    }
+    /** Scene release + target 분리. */
+    _dispose() {
+        var _a, _b;
+        if (!this._scene)
+            return;
+        try {
+            this._scene.target = null;
+            (_b = (_a = this._scene).release) === null || _b === void 0 ? void 0 : _b.call(_a);
+        }
+        catch (_c) {
+            /* swallow — preview 정리는 best effort */
+        }
+        this._scene = null;
+    }
+};
+BoardPreview.styles = [
+    css `
+      :host {
+        display: block;
+        position: relative;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+      }
+      #target {
+        position: absolute;
+        inset: 0;
+        outline: 0;
+      }
+    `
+];
+__decorate([
+    property({ type: Object })
+], BoardPreview.prototype, "boardModel", void 0);
+__decorate([
+    property({ type: Boolean })
+], BoardPreview.prototype, "interactive", void 0);
+__decorate([
+    query('#target')
+], BoardPreview.prototype, "_target", void 0);
+BoardPreview = __decorate([
+    customElement('ox-board-preview')
+], BoardPreview);
+export { BoardPreview };
+//# sourceMappingURL=ox-board-preview.js.map

package/dist/src/ox-board-preview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-board-preview.js","sourceRoot":"","sources":["../../src/ox-board-preview.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;GAcG;AACH,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAuB,MAAM,KAAK,CAAA;AAChE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAGpD,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;IAArC;;QAkBL;;;WAGG;QACyB,eAAU,GAAQ,IAAI,CAAA;QAElD,sCAAsC;QACT,gBAAW,GAAY,KAAK,CAAA;QAGjD,WAAM,GAAQ,IAAI,CAAA;IAqD5B,CAAC;IAnDC,MAAM;QACJ,OAAO,IAAI,CAAA;;cAED,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,uBAAuB;YACjD,CAAA;IACV,CAAC;IAED,YAAY;QACV,IAAI,CAAC,QAAQ,EAAE,CAAA;IACjB,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,IAAI,OAAO,CAAC,GAAG,CAAC,YAAY,CAAC,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YAC9C,IAAI,CAAC,QAAQ,EAAE,CAAA;QACjB,CAAC;IACH,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,QAAQ,EAAE,CAAA;QACf,KAAK,CAAC,oBAAoB,EAAE,CAAA;IAC9B,CAAC;IAED,oDAAoD;IAC5C,QAAQ;;QACd,IAAI,CAAC,QAAQ,EAAE,CAAA;QACf,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,OAAO;YAAE,OAAM;QAC7C,IAAI,CAAC;YACH,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;gBACnB,KAAK,EAAE,EAAE,GAAG,IAAI,CAAC,UAAU,EAAE;gBAC7B,IAAI,EAAE,UAAU,CAAC,IAAI;gBACrB,QAAQ,EAAE,EAAE;aACN,CAAC,CAAA;YACT,mBAAmB;YACnB,MAAA,MAAA,IAAI,CAAC,MAAM,EAAC,GAAG,mDAAG,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA;YACtC,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,IAAI,CAAC,OAAO,CAAA;QACnC,CAAC;QAAC,OAAO,CAAC,EAAE,CAAC;YACX,OAAO,CAAC,IAAI,CAAC,iDAAiD,EAAE,CAAC,CAAC,CAAA;QACpE,CAAC;IACH,CAAC;IAED,iCAAiC;IACzB,QAAQ;;QACd,IAAI,CAAC,IAAI,CAAC,MAAM;YAAE,OAAM;QACxB,IAAI,CAAC;YACH,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,IAAI,CAAA;YACzB,MAAA,MAAA,IAAI,CAAC,MAAM,EAAC,OAAO,kDAAI,CAAA;QACzB,CAAC;QAAC,WAAM,CAAC;YACP,uCAAuC;QACzC,CAAC;QACD,IAAI,CAAC,MAAM,GAAG,IAAI,CAAA;IACpB,CAAC;;AA/EM,mBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;KAaF;CACF,AAfY,CAeZ;AAM2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAAuB;AAGrB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iDAA6B;AAE/B;IAAzB,KAAK,CAAC,SAAS,CAAC;6CAA8B;AA3BpC,YAAY;IADxB,aAAa,CAAC,kBAAkB,CAAC;GACrB,YAAY,CAiFxB","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n *\n * `<ox-board-preview>` — boardModel JSON 을 read-only 시각으로 띄우는 lightweight 컴포넌트.\n *\n * 용도:\n *   - board-import wizard 의 review 단계에서 시안 (variant) 별 썸네일 + 큰 미리보기\n *   - 그 외 인터랙션 없이 보드를 살짝 보여주는 경우 (board card hover preview 등)\n *\n * 차이 (`<ox-board-viewer>` 대비):\n *   - 데이터 바인딩 / playback / fullscreen / 검색 / popup / scenario 모두 X\n *   - boardModel prop 직접 받음 (Board entity 가 필요 없음 — 미저장 model 도 지원)\n *   - dataSubscription 미연결 — 정적 시각만\n *   - 사용자 입력 미수용 (selectable, dragable 모두 비활성)\n */\nimport { css, html, LitElement, type PropertyValues } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { create, SCENE_MODE } from '@hatiolab/things-scene'\n\n@customElement('ox-board-preview')\nexport class BoardPreview extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: block;\n        position: relative;\n        width: 100%;\n        height: 100%;\n        overflow: hidden;\n      }\n      #target {\n        position: absolute;\n        inset: 0;\n        outline: 0;\n      }\n    `\n  ]\n\n  /**\n   * 보드 모델 JSON. 변경 시 Scene 재생성 (cheap operation).\n   * Object reference 가 같아도 deep 변경은 감지 못 하므로, 호출자가 새 객체로 갱신.\n   */\n  @property({ type: Object }) boardModel: any = null\n\n  /** 사용자 클릭 / 휠 등 인터랙션 차단 (썸네일 모드용). */\n  @property({ type: Boolean }) interactive: boolean = false\n\n  @query('#target') private _target!: HTMLElement\n  private _scene: any = null\n\n  render() {\n    return html`<div\n      id=\"target\"\n      style=${this.interactive ? '' : 'pointer-events: none;'}\n    ></div>`\n  }\n\n  firstUpdated() {\n    this._rebuild()\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('boardModel') && this._target) {\n      this._rebuild()\n    }\n  }\n\n  disconnectedCallback() {\n    this._dispose()\n    super.disconnectedCallback()\n  }\n\n  /** Scene 새로 만들고 target 에 부착. 기존 Scene 은 dispose. */\n  private _rebuild() {\n    this._dispose()\n    if (!this.boardModel || !this._target) return\n    try {\n      this._scene = create({\n        model: { ...this.boardModel },\n        mode: SCENE_MODE.VIEW,\n        handlers: []\n      } as any)\n      // 컴포넌트 모두 보이도록 fit\n      this._scene.fit?.(this._scene.fitMode)\n      this._scene.target = this._target\n    } catch (e) {\n      console.warn('[ox-board-preview] failed to render boardModel:', e)\n    }\n  }\n\n  /** Scene release + target 분리. */\n  private _dispose() {\n    if (!this._scene) return\n    try {\n      this._scene.target = null\n      this._scene.release?.()\n    } catch {\n      /* swallow — preview 정리는 best effort */\n    }\n    this._scene = null\n  }\n}\n"]}

package/dist/src/ox-board-template-list.d.ts

@@ -6,6 +6,7 @@ export declare class OxBoardTemplateList extends LitElement {
     static styles: import("lit").CSSResult[];
     withoutSearch: boolean;
     grist: DataGrist;
+    constructor();
     render(): import("lit-html").TemplateResult<1>;
     fetchHandler({ page, limit, sortings, filters }: FetchOption): Promise<{
         total: any;

package/dist/src/ox-board-template-list.js

@@ -39,8 +39,26 @@ const FETCH_BOARD_TEMPLATE_GQL = (id) => {
 };
 let OxBoardTemplateList = class OxBoardTemplateList extends LitElement {
     constructor() {
-        super(...arguments);
+        super();
         this.withoutSearch = false;
+        this.addEventListener('select-record-change', async (e) => {
+            var _a, _b;
+            const { added = [], removed = [] } = e.detail;
+            if (added.length > 0) {
+                const templateId = (_a = added[0]) === null || _a === void 0 ? void 0 : _a.id;
+                if (!templateId)
+                    return;
+                const response = await client.query({ query: FETCH_BOARD_TEMPLATE_GQL(templateId) });
+                let template = (_b = response.data) === null || _b === void 0 ? void 0 : _b.boardTemplate;
+                if (template) {
+                    template = { ...template, model: JSON.parse(template.model) };
+                }
+                this.dispatchEvent(new CustomEvent('selection-changed', { bubbles: true, composed: true, detail: template || null }));
+            }
+            else if (removed.length > 0) {
+                this.dispatchEvent(new CustomEvent('selection-changed', { bubbles: true, composed: true, detail: null }));
+            }
+        });
     }
     render() {
         return html `

package/dist/src/ox-board-template-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-board-template-list.js","sourceRoot":"","sources":["../../src/ox-board-template-list.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/data-grist'\nimport '@operato/input/ox-input-file.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { DataGrist, FetchOption, FilterValue, PaginationConfig, SortersConfig } from '@operato/data-grist'\nimport { buildArgs, client } from '@operato/graphql'\nimport { ScrollbarStyles } from '@operato/styles'\nimport { i18next } from '@operato/i18n'\n\nconst FETCH_BOARD_TEMPLATE_LIST_GQL = (listParam: any) => {\n  return gql`\n  {\n    boardTemplates(${buildArgs(listParam)}) {\n      items {\n        id\n        name\n        description\n        visibility\n        thumbnail\n      }\n      total\n    }\n  }\n`\n}\n\nconst FETCH_BOARD_TEMPLATE_GQL = (id: string) => {\n  return gql`\n  {\n    boardTemplate(id: \"${id}\") {\n      id\n      name\n      description\n      visibility\n      model\n      thumbnail\n    }\n  }\n`\n}\n\n@customElement('ox-board-template-list')\nexport class OxBoardTemplateList extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n\n        width: 100%;\n      }\n\n      ox-grist {\n        flex: 1;\n        overflow-y: auto;\n      }\n\n      #headroom {\n        align-items: center;\n        padding: var(--padding-default) var(--spacing-large);\n        border-top: 2px solid rgba(0, 0, 0, 0.2);\n        color: var(--md-sys-color-on-surface-variant);\n        background-color: var(--md-sys-color-surface-variant);\n        box-shadow: var(--box-shadow);\n      }\n\n      #filters {\n        display: flex;\n        flex-direction: row;\n        place-content: space-between;\n        margin: var(--margin-default) 0;\n      }\n\n      select {\n        border: 0;\n        outline: none;\n        text-align: right;\n      }\n\n      @media only screen and (max-width: 460px) {\n        #filters {\n          flex-direction: column;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Boolean, attribute: 'without-search' }) withoutSearch: boolean = false\n\n  @query('ox-grist') grist!: DataGrist\n\n  render() {\n    return html`\n      <ox-grist .config=${this.gristConfig} .mode=${'CARD'} auto-fetch .fetchHandler=${this.fetchHandler.bind(this)}>\n        <div slot=\"headroom\" id=\"headroom\">\n          <div id=\"filters\">\n            <ox-filters-form autofocus .withoutSearch=${this.withoutSearch}></ox-filters-form>\n          </div>\n        </div>\n      </ox-grist>\n    `\n  }\n\n  async fetchHandler({ page = 1, limit = 100, sortings = [], filters = [] }: FetchOption) {\n    const { items: records, total } = await this.getBoardTemplates({ page, limit, filters, sortings })\n\n    return {\n      total,\n      records\n    }\n  }\n\n  get gristConfig() {\n    const PRIVATE = i18next.t('label.visibility-private')\n    const DOMAIN = i18next.t('label.visibility-domain')\n    const PUBLIC = i18next.t('label.visibility-public')\n\n    const visibilities = window.location.pathname.startsWith('/domain/')\n      ? [\n          { display: PRIVATE, value: 'private' },\n          { display: DOMAIN, value: 'domain' },\n          { display: PUBLIC, value: 'public' }\n        ]\n      : [\n          { display: PRIVATE, value: 'private' },\n          { display: PUBLIC, value: 'public' }\n        ]\n\n    return {\n      list: {\n        thumbnail: 'thumbnail',\n        fields: ['name'],\n        details: ['description']\n      },\n      columns: [\n        {\n          type: 'string',\n          name: 'id',\n          hidden: true\n        },\n        {\n          type: 'string',\n          name: 'name',\n          header: 'name',\n          record: {\n            editable: true,\n            align: 'left'\n          },\n          width: 200,\n          filter: 'search',\n          sortable: true\n        },\n        {\n          type: 'string',\n          name: 'description',\n          header: 'description',\n          record: {\n            editable: true,\n            align: 'left'\n          },\n          width: 200,\n          filter: 'search'\n        },\n        {\n          type: 'select-buttons',\n          name: 'visibility',\n          header: 'visibility',\n          record: {\n            editable: false\n          },\n          hidden: true,\n          filter: {\n            operator: 'in',\n            options: visibilities,\n            label: ''\n          }\n        },\n        {\n          type: 'image',\n          name: 'thumbnail',\n          hidden: true,\n          record: {\n            editable: false\n          },\n          width: 120\n        }\n      ],\n      rows: {\n        appendable: false,\n        selectable: {\n          multiple: false\n        },\n        handlers: {\n          click: 'select-row-toggle'\n        }\n      },\n      sorters: [\n        {\n          name: 'name',\n          desc: false\n        }\n      ],\n      pagination: {\n        pages: [20, 30, 50, 100, 200]\n      }\n    }\n  }\n\n  async firstUpdated() {\n    this.refreshBoardTemplates()\n  }\n\n  async getSelected() {\n    const selected = this.grist.selected\n    const templateId = selected && selected[0]?.id\n\n    if (!templateId) {\n      return\n    }\n\n    var boardTemplateResponse = await client.query({\n      query: FETCH_BOARD_TEMPLATE_GQL(templateId)\n    })\n\n    var template = boardTemplateResponse.data?.boardTemplate\n\n    if (template) {\n      template = {\n        ...template,\n        model: JSON.parse(template.model)\n      }\n    }\n\n    return template\n  }\n\n  async refreshBoardTemplates() {\n    this.grist.fetch()\n  }\n\n  async getBoardTemplates({\n    page = 1,\n    limit = 30,\n    filters = [],\n    sortings = []\n  }: { page?: number; limit?: number; filters?: FilterValue[]; sortings?: SortersConfig } = {}) {\n    var pagination: PaginationConfig = {\n      limit,\n      page\n    }\n\n    var params = {\n      filters,\n      sortings,\n      pagination\n    }\n\n    var boardTemplateListResponse = await client.query({\n      query: FETCH_BOARD_TEMPLATE_LIST_GQL(params)\n    })\n\n    return boardTemplateListResponse?.data?.boardTemplates || {}\n  }\n}\n"]}
+{"version":3,"file":"ox-board-template-list.js","sourceRoot":"","sources":["../../src/ox-board-template-list.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/data-grist'\nimport '@operato/input/ox-input-file.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { DataGrist, FetchOption, FilterValue, PaginationConfig, SortersConfig } from '@operato/data-grist'\nimport { buildArgs, client } from '@operato/graphql'\nimport { ScrollbarStyles } from '@operato/styles'\nimport { i18next } from '@operato/i18n'\n\nconst FETCH_BOARD_TEMPLATE_LIST_GQL = (listParam: any) => {\n  return gql`\n  {\n    boardTemplates(${buildArgs(listParam)}) {\n      items {\n        id\n        name\n        description\n        visibility\n        thumbnail\n      }\n      total\n    }\n  }\n`\n}\n\nconst FETCH_BOARD_TEMPLATE_GQL = (id: string) => {\n  return gql`\n  {\n    boardTemplate(id: \"${id}\") {\n      id\n      name\n      description\n      visibility\n      model\n      thumbnail\n    }\n  }\n`\n}\n\n@customElement('ox-board-template-list')\nexport class OxBoardTemplateList extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n\n        width: 100%;\n      }\n\n      ox-grist {\n        flex: 1;\n        overflow-y: auto;\n      }\n\n      #headroom {\n        align-items: center;\n        padding: var(--padding-default) var(--spacing-large);\n        border-top: 2px solid rgba(0, 0, 0, 0.2);\n        color: var(--md-sys-color-on-surface-variant);\n        background-color: var(--md-sys-color-surface-variant);\n        box-shadow: var(--box-shadow);\n      }\n\n      #filters {\n        display: flex;\n        flex-direction: row;\n        place-content: space-between;\n        margin: var(--margin-default) 0;\n      }\n\n      select {\n        border: 0;\n        outline: none;\n        text-align: right;\n      }\n\n      @media only screen and (max-width: 460px) {\n        #filters {\n          flex-direction: column;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Boolean, attribute: 'without-search' }) withoutSearch: boolean = false\n\n  @query('ox-grist') grist!: DataGrist\n\n  constructor() {\n    super()\n    this.addEventListener('select-record-change', async (e: Event) => {\n      const { added = [], removed = [] } = (e as CustomEvent).detail as { added?: any[]; removed?: any[] }\n      if (added.length > 0) {\n        const templateId = added[0]?.id\n        if (!templateId) return\n        const response = await client.query({ query: FETCH_BOARD_TEMPLATE_GQL(templateId) })\n        let template = response.data?.boardTemplate\n        if (template) {\n          template = { ...template, model: JSON.parse(template.model) }\n        }\n        this.dispatchEvent(new CustomEvent('selection-changed', { bubbles: true, composed: true, detail: template || null }))\n      } else if (removed.length > 0) {\n        this.dispatchEvent(new CustomEvent('selection-changed', { bubbles: true, composed: true, detail: null }))\n      }\n    })\n  }\n\n  render() {\n    return html`\n      <ox-grist .config=${this.gristConfig} .mode=${'CARD'} auto-fetch .fetchHandler=${this.fetchHandler.bind(this)}>\n        <div slot=\"headroom\" id=\"headroom\">\n          <div id=\"filters\">\n            <ox-filters-form autofocus .withoutSearch=${this.withoutSearch}></ox-filters-form>\n          </div>\n        </div>\n      </ox-grist>\n    `\n  }\n\n  async fetchHandler({ page = 1, limit = 100, sortings = [], filters = [] }: FetchOption) {\n    const { items: records, total } = await this.getBoardTemplates({ page, limit, filters, sortings })\n\n    return {\n      total,\n      records\n    }\n  }\n\n  get gristConfig() {\n    const PRIVATE = i18next.t('label.visibility-private')\n    const DOMAIN = i18next.t('label.visibility-domain')\n    const PUBLIC = i18next.t('label.visibility-public')\n\n    const visibilities = window.location.pathname.startsWith('/domain/')\n      ? [\n          { display: PRIVATE, value: 'private' },\n          { display: DOMAIN, value: 'domain' },\n          { display: PUBLIC, value: 'public' }\n        ]\n      : [\n          { display: PRIVATE, value: 'private' },\n          { display: PUBLIC, value: 'public' }\n        ]\n\n    return {\n      list: {\n        thumbnail: 'thumbnail',\n        fields: ['name'],\n        details: ['description']\n      },\n      columns: [\n        {\n          type: 'string',\n          name: 'id',\n          hidden: true\n        },\n        {\n          type: 'string',\n          name: 'name',\n          header: 'name',\n          record: {\n            editable: true,\n            align: 'left'\n          },\n          width: 200,\n          filter: 'search',\n          sortable: true\n        },\n        {\n          type: 'string',\n          name: 'description',\n          header: 'description',\n          record: {\n            editable: true,\n            align: 'left'\n          },\n          width: 200,\n          filter: 'search'\n        },\n        {\n          type: 'select-buttons',\n          name: 'visibility',\n          header: 'visibility',\n          record: {\n            editable: false\n          },\n          hidden: true,\n          filter: {\n            operator: 'in',\n            options: visibilities,\n            label: ''\n          }\n        },\n        {\n          type: 'image',\n          name: 'thumbnail',\n          hidden: true,\n          record: {\n            editable: false\n          },\n          width: 120\n        }\n      ],\n      rows: {\n        appendable: false,\n        selectable: {\n          multiple: false\n        },\n        handlers: {\n          click: 'select-row-toggle'\n        }\n      },\n      sorters: [\n        {\n          name: 'name',\n          desc: false\n        }\n      ],\n      pagination: {\n        pages: [20, 30, 50, 100, 200]\n      }\n    }\n  }\n\n  async firstUpdated() {\n    this.refreshBoardTemplates()\n  }\n\n  async getSelected() {\n    const selected = this.grist.selected\n    const templateId = selected && selected[0]?.id\n\n    if (!templateId) {\n      return\n    }\n\n    var boardTemplateResponse = await client.query({\n      query: FETCH_BOARD_TEMPLATE_GQL(templateId)\n    })\n\n    var template = boardTemplateResponse.data?.boardTemplate\n\n    if (template) {\n      template = {\n        ...template,\n        model: JSON.parse(template.model)\n      }\n    }\n\n    return template\n  }\n\n  async refreshBoardTemplates() {\n    this.grist.fetch()\n  }\n\n  async getBoardTemplates({\n    page = 1,\n    limit = 30,\n    filters = [],\n    sortings = []\n  }: { page?: number; limit?: number; filters?: FilterValue[]; sortings?: SortersConfig } = {}) {\n    var pagination: PaginationConfig = {\n      limit,\n      page\n    }\n\n    var params = {\n      filters,\n      sortings,\n      pagination\n    }\n\n    var boardTemplateListResponse = await client.query({\n      query: FETCH_BOARD_TEMPLATE_LIST_GQL(params)\n    })\n\n    return boardTemplateListResponse?.data?.boardTemplates || {}\n  }\n}\n"]}