@operato/property-panel 10.0.0-beta.2 → 10.0.0-beta.21

package/dist/src/property-panel/data-binding/data-binding-popup.js

@@ -0,0 +1,1411 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { __decorate } from "tslib";
+import '@material/web/icon/icon.js';
+import '@operato/input/ox-buttons-radio.js';
+import '@operato/input/ox-input-code.js';
+import '@operato/i18n/ox-i18n.js';
+import '@operato/help/ox-help-icon.js';
+import './data-binding-value-map.js';
+import './data-binding-value-range.js';
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { ScopedElementsMixin } from '@open-wc/scoped-elements';
+import { DataBindingMapper } from './data-binding-mapper.js';
+function buildDataTree(data, prefix = '') {
+    if (data == null || typeof data !== 'object')
+        return [];
+    return Object.keys(data).map(key => {
+        const value = data[key];
+        const path = prefix ? `${prefix}.${key}` : key;
+        const type = Array.isArray(value) ? 'array' : typeof value;
+        return {
+            key,
+            path,
+            value,
+            type,
+            children: type === 'object' || type === 'array' ? buildDataTree(value, path) : undefined
+        };
+    });
+}
+function typeIcon(type) {
+    switch (type) {
+        case 'string':
+            return 'abc';
+        case 'number':
+            return 'tag';
+        case 'boolean':
+            return 'toggle_on';
+        case 'object':
+            return 'data_object';
+        case 'array':
+            return 'data_array';
+        default:
+            return 'help_outline';
+    }
+}
+function truncate(val, max = 24) {
+    if (val == null)
+        return 'null';
+    const s = typeof val === 'object' ? JSON.stringify(val) : String(val);
+    return s.length > max ? s.slice(0, max) + '…' : s;
+}
+let DataBindingPopup = class DataBindingPopup extends ScopedElementsMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.mappings = [];
+        this.properties = [];
+        this._viewMode = 'mappings';
+        this._selectedIndex = 0;
+        this._inspectorMode = 'source-select';
+        this._sourceTree = [];
+        this._expandedPaths = new Set();
+        this._previewInput = undefined;
+        this._previewOutput = undefined;
+    }
+    static get scopedElements() {
+        return {
+            'data-binding-mapper': DataBindingMapper
+        };
+    }
+    get _selected() {
+        return this.selected;
+    }
+    get _root() {
+        var _a;
+        return (_a = this._selected) === null || _a === void 0 ? void 0 : _a.root;
+    }
+    get _currentMapping() {
+        return this._selectedIndex < this.mappings.length ? this.mappings[this._selectedIndex] : null;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._refreshPreview();
+    }
+    render() {
+        const mapping = this._currentMapping;
+        return html `
+      ${this._renderLeftPanel()}
+
+      ${this._viewMode === 'mappings'
+            ? html `
+            <div flow-editor>
+              ${mapping ? this._renderFlowCards(mapping) : html `<div class="empty-state">Select or add a mapping</div>`}
+              ${mapping ? this._renderRuleConfig(mapping) : nothing}
+            </div>
+            ${this._renderInspector(mapping)}
+          `
+            : html `
+            <div flow-view>
+              ${this._renderFlowOverview()}
+            </div>
+          `}
+    `;
+    }
+    /* ── Left Panel: Tab Header + Mapping List or Flow ── */
+    _renderLeftPanel() {
+        return html `
+      <div mapping-list>
+        <div tab-header>
+          <div ?active=${this._viewMode === 'mappings'} @click=${() => (this._viewMode = 'mappings')}>Mappings</div>
+          <div ?active=${this._viewMode === 'flow'} @click=${() => (this._viewMode = 'flow')}>Flow</div>
+        </div>
+        ${this._viewMode === 'mappings' ? this._renderMappingItems() : nothing}
+      </div>
+    `;
+    }
+    _renderMappingItems() {
+        return html `
+      <header>
+        <span>${this.mappings.length} mappings</span>
+        <md-icon @click=${() => this._addMapping()} title="Add mapping">add</md-icon>
+      </header>
+      <div mapping-items>
+        ${this.mappings.map((m, i) => html `
+            <div mapping-item ?selected=${i === this._selectedIndex} @click=${() => this._selectMapping(i)}>
+              <span class="status-dot ${this._mappingStatus(m)}"></span>
+              <span class="summary">${this._mappingSummary(m, i)}</span>
+              <md-icon
+                class="delete-btn"
+                @click=${(e) => {
+            e.stopPropagation();
+            this._deleteMapping(i);
+        }}
+                title="Delete"
+                >close</md-icon
+              >
+            </div>
+          `)}
+      </div>
+    `;
+    }
+    /* ── Column 2: Flow Cards ── */
+    _renderFlowCards(mapping) {
+        return html `
+      <div flow-cards>
+        <!-- Source Card -->
+        <div class="flow-card">
+          <div class="flow-card-header"><md-icon>input</md-icon> SOURCE</div>
+          <input
+            type="text"
+            placeholder="(self)"
+            .value=${mapping.source || ''}
+            @focus=${() => {
+            this._inspectorMode = 'source-select';
+        }}
+            @change=${(e) => this._updateMapping({ source: e.target.value })}
+          />
+          <input
+            id="accessor-input"
+            type="text"
+            placeholder="accessor"
+            .value=${mapping.accessor || ''}
+            @focus=${() => {
+            this._inspectorMode = 'source-data';
+            this._refreshSourceTree();
+        }}
+            @change=${(e) => this._updateMapping({ accessor: e.target.value })}
+          />
+        </div>
+
+
+        <!-- Arrow -->
+        <div class="flow-arrow">→</div>
+
+        <!-- Rule Card -->
+        <div class="flow-card" @click=${() => (this._inspectorMode = 'rule-help')}>
+          <div class="flow-card-header"><md-icon>tune</md-icon> RULE</div>
+          <div style="display:flex;flex-wrap:wrap;gap:4px">
+            ${['value', 'map', 'range', 'eval'].map(r => html `
+                <span
+                  class="rule-badge"
+                  ?active=${mapping.rule === r}
+                  @click=${(e) => { e.stopPropagation(); this._changeRule(r); }}
+                  >${r}</span
+                >
+              `)}
+          </div>
+          ${mapping.rule !== 'value' && mapping.param
+            ? html `<div style="font-size:10px;color:var(--md-sys-color-on-surface-variant,#49454f);margin-top:2px">${this._ruleSummary(mapping)}</div>`
+            : nothing}
+        </div>
+
+        <!-- Arrow -->
+        <div class="flow-arrow">→</div>
+
+        <!-- Target Card -->
+        <div class="flow-card">
+          <div class="flow-card-header"><md-icon>output</md-icon> TARGET</div>
+          <input
+            type="text"
+            placeholder="(self)"
+            .value=${mapping.target || ''}
+            @focus=${() => (this._inspectorMode = 'target-select')}
+            @change=${(e) => this._updateMapping({ target: e.target.value })}
+          />
+          <input
+            id="property-input"
+            type="text"
+            placeholder="property"
+            .value=${mapping.property || ''}
+            @focus=${() => (this._inspectorMode = 'target-prop')}
+            @change=${(e) => this._updateMapping({ property: e.target.value })}
+          />
+        </div>
+
+      </div>
+    `;
+    }
+    /* ── Rule Config ── */
+    _renderRuleConfig(mapping) {
+        return html `
+      <div rule-config @focusin=${() => (this._inspectorMode = 'rule-help')}>
+        ${mapping.rule === 'map'
+            ? html `
+              <data-binding-value-map
+                .value=${mapping.param || {}}
+                .valuetype=${'string'}
+                active
+                @change=${(e) => this._updateMapping({ param: e.target.value })}
+              ></data-binding-value-map>
+            `
+            : nothing}
+        ${mapping.rule === 'range'
+            ? html `
+              <data-binding-value-range
+                .value=${mapping.param || {}}
+                .valuetype=${'string'}
+                active
+                @change=${(e) => this._updateMapping({ param: e.target.value })}
+              ></data-binding-value-range>
+            `
+            : nothing}
+        ${mapping.rule === 'eval'
+            ? html `
+              <ox-input-code
+                .value=${mapping.param || ''}
+                language="javascript"
+                active
+                @change=${(e) => this._updateMapping({ param: e.target.value })}
+              ></ox-input-code>
+            `
+            : nothing}
+
+        <div class="options-row">
+          <label>
+            <input type="checkbox" .checked=${mapping.partial === true} @change=${(e) => this._updateMapping({ partial: e.target.checked })} />
+            Partial
+          </label>
+          <label>
+            <input type="checkbox" .checked=${mapping.ndnsp === true} @change=${(e) => this._updateMapping({ ndnsp: e.target.checked })} />
+            No Data No Spreading
+          </label>
+        </div>
+      </div>
+    `;
+    }
+    /* ── Column 3: Inspector ── */
+    _renderInspector(mapping) {
+        const modeLabel = {
+            'source-select': 'Source Components',
+            'source-data': 'Source Data',
+            'target-select': 'Target Selector',
+            'target-prop': 'Target Properties',
+            'rule-help': 'Rule Guide'
+        };
+        const modeIcon = {
+            'source-select': 'list',
+            'source-data': 'input',
+            'target-select': 'list',
+            'target-prop': 'output',
+            'rule-help': 'help_outline'
+        };
+        return html `
+      <div inspector>
+        <header>
+          <md-icon>${modeIcon[this._inspectorMode]}</md-icon>
+          ${modeLabel[this._inspectorMode]}
+        </header>
+
+        <div tree-content>
+          ${this._inspectorMode === 'source-select' ? this._renderComponentList('source') : nothing}
+          ${this._inspectorMode === 'source-data' ? this._renderSourceTree() : nothing}
+          ${this._inspectorMode === 'target-select' ? this._renderComponentList('target') : nothing}
+          ${this._inspectorMode === 'target-prop' ? this._renderTargetTree() : nothing}
+          ${this._inspectorMode === 'rule-help' ? this._renderRuleHelp() : nothing}
+        </div>
+
+        ${this._renderPreviewBar(mapping)}
+      </div>
+    `;
+    }
+    _renderComponentList(mode) {
+        var _a;
+        // root의 indexMap(Map)에서 직접 컴포넌트 ID 목록을 가져온다
+        let ids = [];
+        try {
+            const root = this._root;
+            if (root === null || root === void 0 ? void 0 : root.indexMap) {
+                for (const [id, components] of root.indexMap.entries()) {
+                    const comp = Array.isArray(components) ? components[0] : components;
+                    ids.push({ value: `#${id}`, description: ((_a = comp === null || comp === void 0 ? void 0 : comp.model) === null || _a === void 0 ? void 0 : _a.type) || '' });
+                }
+                ids.sort((a, b) => a.value.localeCompare(b.value));
+            }
+        }
+        catch (_b) {
+            /* ignore */
+        }
+        const selectHandler = (value) => {
+            if (mode === 'source') {
+                this._updateMapping({ source: value === '(self)' ? '' : value });
+                this._inspectorMode = 'source-data';
+                this._refreshSourceTree();
+                // accessor input에 자동 포커스
+                this.updateComplete.then(() => {
+                    var _a;
+                    (_a = this.renderRoot.querySelector('#accessor-input')) === null || _a === void 0 ? void 0 : _a.focus();
+                });
+            }
+            else {
+                this._updateMapping({ target: value });
+                this._inspectorMode = 'target-prop';
+                // property input에 자동 포커스
+                this.updateComplete.then(() => {
+                    var _a;
+                    (_a = this.renderRoot.querySelector('#property-input')) === null || _a === void 0 ? void 0 : _a.focus();
+                });
+            }
+        };
+        // target 전용 특수 셀렉터
+        const targetSpecials = [
+            { value: '(self)', icon: 'person', label: '(self)', desc: '자기 자신' },
+            { value: '(children)', icon: 'account_tree', label: '(children)', desc: '자식 컴포넌트' },
+            { value: '(key)', icon: 'key', label: '(key)', desc: '키 기반 매핑' },
+            { value: '[propkey]', icon: 'dynamic_feed', label: '[propkey]', desc: '속성-키 매핑' }
+        ];
+        const sourceSpecials = [{ value: '(self)', icon: 'person', label: '(self)', desc: '자기 자신' }];
+        const specials = mode === 'target' ? targetSpecials : sourceSpecials;
+        return html `
+      ${specials.map(s => html `
+          <div class="tree-node">
+            <div class="tree-row" @click=${() => selectHandler(s.value)}>
+              <md-icon style="--md-icon-size:14px">${s.icon}</md-icon>
+              <span class="tree-key">${s.label}</span>
+              <span class="tree-value">${s.desc}</span>
+            </div>
+          </div>
+        `)}
+      ${ids.length
+            ? html `
+            <div style="padding:6px 8px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;color:var(--md-sys-color-on-surface-variant,#49454f);border-top:1px solid var(--md-sys-color-outline-variant,rgba(0,0,0,0.1));margin-top:4px">
+              Components
+            </div>
+            ${ids.map(({ value, description }) => html `
+                <div class="tree-node">
+                  <div class="tree-row" @click=${() => selectHandler(value)}>
+                    <md-icon style="--md-icon-size:14px">widgets</md-icon>
+                    <span class="tree-key">${value}</span>
+                    <span class="tree-value">${description}</span>
+                  </div>
+                </div>
+              `)}
+          `
+            : nothing}
+    `;
+    }
+    _renderSourceTree() {
+        return html `
+      ${this._sourceTree.length > 0
+            ? this._renderTreeNodes(this._sourceTree, 'accessor')
+            : html `<div class="empty-state" style="font-size:12px;height:auto;padding:12px">No data available</div>`}
+      ${this._renderJsonataHelp()}
+    `;
+    }
+    _renderJsonataHelp() {
+        const examples = [
+            { syntax: 'name', desc: '단일 속성' },
+            { syntax: 'address.city', desc: '중첩 속성' },
+            { syntax: '$[0]', desc: '루트 배열 첫 번째' },
+            { syntax: '$[0].name', desc: '루트 배열 요소의 속성' },
+            { syntax: 'orders[0]', desc: '배열 첫 번째' },
+            { syntax: 'orders[-1]', desc: '배열 마지막' },
+            { syntax: 'orders[price>100]', desc: '필터' },
+            { syntax: 'orders.price', desc: '배열 내 속성 추출' },
+            { syntax: '$sum(orders.price)', desc: '합계' },
+            { syntax: '$count(items)', desc: '개수' },
+            { syntax: '$string(value)', desc: '문자열 변환' },
+            { syntax: '$number(text)', desc: '숫자 변환' },
+            { syntax: '$now()', desc: '현재 시각 (ISO)' },
+            { syntax: 'a ? a : b', desc: '조건식' }
+        ];
+        return html `
+      <div style="border-top:1px solid var(--md-sys-color-outline-variant,rgba(0,0,0,0.1));margin-top:8px;padding:8px">
+        <div style="font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;color:var(--md-sys-color-on-surface-variant,#49454f);margin-bottom:4px">
+          JSONata Syntax
+          <a href="https://docs.jsonata.org/overview" target="_blank" rel="noopener"
+            style="font-size:10px;font-weight:400;text-decoration:none;color:var(--md-sys-color-primary,#6750a4);margin-left:6px"
+          >docs ↗</a>
+        </div>
+        ${examples.map(ex => html `
+            <div style="display:flex;gap:6px;padding:2px 0;font-size:11px;cursor:pointer;border-radius:3px"
+              @click=${() => this._updateMapping({ accessor: ex.syntax })}>
+              <code style="color:var(--md-sys-color-primary,#6750a4);min-width:110px;font-size:11px">${ex.syntax}</code>
+              <span style="color:var(--md-sys-color-on-surface-variant,#49454f)">${ex.desc}</span>
+            </div>
+          `)}
+      </div>
+    `;
+    }
+    _renderTargetTree() {
+        var _a, _b, _c, _d, _e;
+        const nodes = this.properties.map(p => ({
+            key: p.name || p.label,
+            path: p.name || p.label,
+            value: null,
+            type: 'property'
+        }));
+        // GLTF 컴포넌트: nodes, animations 항상 표시
+        const isGltf = ((_b = (_a = this._selected) === null || _a === void 0 ? void 0 : _a.model) === null || _b === void 0 ? void 0 : _b.type) === 'gltf-object';
+        if (isGltf) {
+            // nodes (Mesh만 표시)
+            const allNodeNames = ((_c = this._selected) === null || _c === void 0 ? void 0 : _c.nodeNames) || [];
+            const realObject = (_d = this._selected) === null || _d === void 0 ? void 0 : _d.realObject;
+            const meshNames = realObject
+                ? allNodeNames.filter(name => { var _a, _b; return (_b = (_a = realObject.getNode) === null || _a === void 0 ? void 0 : _a.call(realObject, name)) === null || _b === void 0 ? void 0 : _b.isMesh; })
+                : allNodeNames;
+            const nodeChildren = meshNames.map(name => ({
+                key: name,
+                path: `nodes.${name}`,
+                value: null,
+                type: 'object',
+                children: ['color', 'visible', 'opacity', 'emissive', 'emissiveIntensity', 'scale'].map(prop => ({
+                    key: prop,
+                    path: `nodes.${name}.${prop}`,
+                    value: null,
+                    type: 'property'
+                }))
+            }));
+            nodes.push({
+                key: 'nodes',
+                path: 'nodes',
+                value: null,
+                type: 'object',
+                children: nodeChildren
+            });
+            // animations (애니메이션 제어)
+            const animNames = ((_e = this._selected) === null || _e === void 0 ? void 0 : _e.animationNames) || [];
+            const animChildren = animNames.map(name => ({
+                key: name,
+                path: `animations.${name}`,
+                value: null,
+                type: 'object',
+                children: ['play', 'speed', 'weight', 'loop'].map(prop => ({
+                    key: prop,
+                    path: `animations.${name}.${prop}`,
+                    value: null,
+                    type: 'property'
+                }))
+            }));
+            nodes.push({
+                key: 'animations',
+                path: 'animations',
+                value: null,
+                type: 'object',
+                children: animChildren
+            });
+        }
+        return html `${this._renderTreeNodes(nodes, 'property')}`;
+    }
+    _renderTreeNodes(nodes, targetField) {
+        var _a, _b;
+        const currentPath = targetField === 'accessor'
+            ? (_a = this._currentMapping) === null || _a === void 0 ? void 0 : _a.accessor
+            : (_b = this._currentMapping) === null || _b === void 0 ? void 0 : _b.property;
+        return nodes.map(node => html `
+        <div class="tree-node">
+          <div
+            class="tree-row"
+            ?selected=${currentPath === node.path}
+            @click=${() => {
+            if (node.children) {
+                const newSet = new Set(this._expandedPaths);
+                newSet.has(node.path) ? newSet.delete(node.path) : newSet.add(node.path);
+                this._expandedPaths = newSet;
+            }
+            else {
+                this._selectTreePath(node.path, targetField);
+            }
+        }}
+          >
+            ${node.children
+            ? html `<md-icon>${this._expandedPaths.has(node.path) ? 'expand_more' : 'chevron_right'}</md-icon>`
+            : html `<md-icon style="--md-icon-size:14px">${typeIcon(node.type)}</md-icon>`}
+            <span class="tree-key">${node.key}</span>
+            ${node.value != null && !node.children ? html `<span class="tree-value">${truncate(node.value)}</span>` : nothing}
+          </div>
+          ${node.children && this._expandedPaths.has(node.path)
+            ? html `<div class="tree-children">
+                ${node.children.length > 0
+                ? this._renderTreeNodes(node.children, targetField)
+                : html `<div style="padding:4px 8px;font-size:11px;color:var(--md-sys-color-on-surface-variant,#49454f)">(empty)</div>`}
+              </div>`
+            : nothing}
+        </div>
+      `);
+    }
+    _renderPreviewBar(mapping) {
+        if (!mapping)
+            return nothing;
+        this._refreshPreview();
+        return html `
+      <div preview-section>
+        <div class="preview-label">Preview</div>
+        ${this._previewInput !== undefined
+            ? html `
+              <div class="preview-row">
+                <md-icon style="--md-icon-size:12px;color:var(--md-sys-color-tertiary,#7d5260)">input</md-icon>
+                <span class="preview-input">${truncate(this._previewInput, 32)}</span>
+                <span class="flow-arrow" style="font-size:12px;padding:0 4px">→</span>
+                <span class="preview-output">${truncate(this._previewOutput, 32)}</span>
+              </div>
+            `
+            : html `<div style="font-size:11px;color:var(--md-sys-color-on-surface-variant,#49454f)">No data</div>`}
+      </div>
+    `;
+    }
+    /* ── Actions ── */
+    _selectMapping(index) {
+        this._selectedIndex = index;
+        this._inspectorMode = 'source-select';
+    }
+    _addMapping() {
+        this.mappings = [...this.mappings, { rule: 'value' }];
+        this._selectedIndex = this.mappings.length - 1;
+        this._dispatchChange();
+    }
+    _deleteMapping(index) {
+        this.mappings = this.mappings.filter((_, i) => i !== index);
+        if (this._selectedIndex >= this.mappings.length) {
+            this._selectedIndex = Math.max(0, this.mappings.length - 1);
+        }
+        this._dispatchChange();
+    }
+    _updateMapping(patch) {
+        const mapping = this._currentMapping;
+        if (!mapping)
+            return;
+        const updated = { ...mapping, ...patch };
+        const mappings = [...this.mappings];
+        mappings[this._selectedIndex] = updated;
+        this.mappings = mappings;
+        this._dispatchChange();
+        this._refreshPreview();
+    }
+    _changeRule(rule) {
+        const mapping = this._currentMapping;
+        if (!mapping)
+            return;
+        // 기존 param 보존
+        this._updateMapping({ rule, param: rule === mapping.rule ? mapping.param : undefined });
+    }
+    _selectTreePath(path, targetField) {
+        if (targetField === 'accessor') {
+            this._updateMapping({ accessor: path });
+        }
+        else {
+            this._updateMapping({ property: path });
+        }
+    }
+    _findComponent(idOrSelector) {
+        var _a;
+        if (!idOrSelector || idOrSelector === '(self)')
+            return this._selected;
+        const id = idOrSelector.startsWith('#') ? idOrSelector.substring(1) : idOrSelector;
+        return (_a = this._root) === null || _a === void 0 ? void 0 : _a.findById(id);
+    }
+    _refreshSourceTree() {
+        const mapping = this._currentMapping;
+        if (!mapping) {
+            this._sourceTree = [];
+            return;
+        }
+        const sourceComponent = this._findComponent(mapping.source || '');
+        const data = sourceComponent === null || sourceComponent === void 0 ? void 0 : sourceComponent.data;
+        this._sourceTree = data ? buildDataTree(data) : [];
+    }
+    _refreshPreview() {
+        var _a, _b;
+        const mapping = this._currentMapping;
+        if (!mapping) {
+            this._previewInput = undefined;
+            this._previewOutput = undefined;
+            return;
+        }
+        try {
+            const sourceComponent = this._findComponent(mapping.source || '');
+            const data = sourceComponent === null || sourceComponent === void 0 ? void 0 : sourceComponent.data;
+            if (data == null) {
+                this._previewInput = undefined;
+                this._previewOutput = undefined;
+                return;
+            }
+            // Simple accessor extraction
+            let input = data;
+            if (mapping.accessor) {
+                const keys = mapping.accessor.split('.');
+                for (const k of keys) {
+                    if (input == null)
+                        break;
+                    input = input[k];
+                }
+            }
+            this._previewInput = input;
+            // Simple rule preview (no full evaluator import for now)
+            if (mapping.rule === 'value') {
+                this._previewOutput = input;
+            }
+            else if (mapping.rule === 'map' && mapping.param) {
+                this._previewOutput = (_b = (_a = mapping.param[String(input)]) !== null && _a !== void 0 ? _a : mapping.param['default']) !== null && _b !== void 0 ? _b : input;
+            }
+            else if (mapping.rule === 'range' && mapping.param) {
+                this._previewOutput = undefined;
+                for (const [range, val] of Object.entries(mapping.param)) {
+                    if (range === 'default')
+                        continue;
+                    const [from, to] = range.split('~').map(Number);
+                    const num = Number(input);
+                    if (!isNaN(num) && num >= from && (isNaN(to) || to === 0 || num < to)) {
+                        this._previewOutput = val;
+                        break;
+                    }
+                }
+                if (this._previewOutput === undefined) {
+                    this._previewOutput = mapping.param['default'];
+                }
+            }
+            else {
+                this._previewOutput = '(eval)';
+            }
+        }
+        catch (_c) {
+            this._previewInput = undefined;
+            this._previewOutput = '(error)';
+        }
+    }
+    _renderRuleHelp() {
+        var _a;
+        const rule = ((_a = this._currentMapping) === null || _a === void 0 ? void 0 : _a.rule) || 'value';
+        const helpContent = {
+            value: {
+                title: 'Value (Pass-through)',
+                desc: '소스 데이터를 그대로 타겟 속성에 전달합니다. 타입 변환 없이 원본 값이 설정됩니다.',
+                examples: [
+                    { code: 'source.data.name → target.text', desc: '텍스트 전달' },
+                    { code: 'source.data → target.data', desc: '객체 전체 전달' },
+                    { code: 'source.data.active → target.hidden', desc: '불리언 전달' }
+                ]
+            },
+            map: {
+                title: 'Map (Key-Value Mapping)',
+                desc: '입력 값을 키로 사용하여 미리 정의된 값으로 변환합니다. 일치하는 키가 없으면 default 값을 사용합니다.',
+                examples: [
+                    { code: 'active → "green"', desc: '상태값 → 색상' },
+                    { code: 'true → "운전중"', desc: '불리언 → 텍스트' },
+                    { code: 'default → "gray"', desc: '미매칭 시 기본값' }
+                ]
+            },
+            range: {
+                title: 'Range (범위 매핑)',
+                desc: '숫자 입력값이 어떤 범위에 속하는지에 따라 값을 변환합니다. from~to 형식으로 범위를 지정합니다 (from 이상, to 미만).',
+                examples: [
+                    { code: '0~50 → "blue"', desc: '0 이상 50 미만' },
+                    { code: '50~80 → "green"', desc: '50 이상 80 미만' },
+                    { code: '80~ → "red"', desc: '80 이상 (상한 없음)' },
+                    { code: 'default → "gray"', desc: '범위 밖 기본값' }
+                ]
+            },
+            eval: {
+                title: 'Eval (JavaScript)',
+                desc: 'JavaScript 코드로 값을 변환합니다. value 변수로 입력값에 접근하고, return으로 결과를 반환합니다. targets[0]으로 타겟 컴포넌트에 접근 가능합니다.',
+                examples: [
+                    { code: 'return value * 100', desc: '숫자 변환' },
+                    { code: 'return value > 80 ? "red" : "green"', desc: '조건 분기' },
+                    { code: 'return `${value}%`', desc: '문자열 포맷팅' },
+                    { code: 'return Math.round(value * 10) / 10', desc: '소수점 반올림' },
+                    { code: 'return targets[0].get("text")', desc: '타겟 속성 참조' }
+                ]
+            }
+        };
+        const help = helpContent[rule];
+        return html `
+      <div style="padding:8px">
+        <div style="font-size:13px;font-weight:600;color:var(--md-sys-color-primary,#6750a4);margin-bottom:6px">
+          ${help.title}
+        </div>
+        <div style="font-size:12px;color:var(--md-sys-color-on-surface,#1c1b1f);line-height:1.5;margin-bottom:10px">
+          ${help.desc}
+        </div>
+        <div style="font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;color:var(--md-sys-color-on-surface-variant,#49454f);margin-bottom:4px">
+          Examples
+        </div>
+        ${help.examples.map(ex => html `
+            <div style="padding:3px 0;font-size:11px;display:flex;gap:6px">
+              <code style="color:var(--md-sys-color-primary,#6750a4);min-width:50%;font-size:11px">${ex.code}</code>
+              <span style="color:var(--md-sys-color-on-surface-variant,#49454f)">${ex.desc}</span>
+            </div>
+          `)}
+      </div>
+    `;
+    }
+    /* ── Flow Overview ── */
+    _renderFlowOverview() {
+        const root = this._root;
+        if (!root)
+            return html `<div class="empty-state">No scene</div>`;
+        const bindings = [];
+        const allIds = new Set();
+        const sourcesUsed = new Set();
+        // 모든 컴포넌트 순회
+        const traverse = (component) => {
+            var _a, _b, _c;
+            const id = (_a = component.model) === null || _a === void 0 ? void 0 : _a.id;
+            if (id)
+                allIds.add(id);
+            const mappings = (_b = component.model) === null || _b === void 0 ? void 0 : _b.mappings;
+            if (mappings && Array.isArray(mappings)) {
+                for (const m of mappings) {
+                    if (!m || !m.target || !m.property)
+                        continue;
+                    const source = m.source || '(self)';
+                    const sourceKey = source === '(self)' ? (id || '(self)') : source.replace(/^#/, '');
+                    sourcesUsed.add(sourceKey);
+                    bindings.push({
+                        ownerID: id || '(anonymous)',
+                        ownerType: ((_c = component.model) === null || _c === void 0 ? void 0 : _c.type) || '',
+                        source: sourceKey,
+                        accessor: m.accessor || '',
+                        target: m.target,
+                        property: m.property,
+                        rule: m.rule || 'value'
+                    });
+                }
+            }
+            if (component.components) {
+                for (const child of component.components) {
+                    traverse(child);
+                }
+            }
+        };
+        traverse(root);
+        // 소스별 그룹핑
+        const bySource = new Map();
+        for (const b of bindings) {
+            const key = b.source;
+            if (!bySource.has(key))
+                bySource.set(key, []);
+            bySource.get(key).push(b);
+        }
+        // 소스별 기대 스키마 추출
+        const schemaBySource = new Map();
+        for (const [source, bs] of bySource.entries()) {
+            const fields = new Map();
+            for (const b of bs) {
+                if (!b.accessor)
+                    continue;
+                const usages = fields.get(b.accessor) || [];
+                usages.push(`${b.target}.${b.property}`);
+                fields.set(b.accessor, usages);
+            }
+            if (fields.size > 0)
+                schemaBySource.set(source, fields);
+        }
+        // 바인딩 없는 ID 컴포넌트
+        const unboundIds = [...allIds].filter(id => {
+            const isSource = sourcesUsed.has(id);
+            const isTarget = bindings.some(b => b.target === `#${id}` || b.ownerID === id);
+            return !isSource && !isTarget;
+        });
+        return html `
+      ${bySource.size === 0
+            ? html `<div class="empty-state" style="height:auto;padding:20px">No data bindings in this board</div>`
+            : nothing}
+
+      ${[...bySource.entries()].map(([source, bs]) => html `
+          <div class="flow-source-group">
+            <div class="flow-source-header">
+              <md-icon>sensors</md-icon>
+              ${source}
+            </div>
+
+            ${bs.map(b => html `
+                <div class="flow-binding-row">
+                  <span class="flow-accessor">${b.accessor || '(all)'}</span>
+                  <span style="color:var(--md-sys-color-outline,#79747e)">→</span>
+                  <span class="flow-target">${b.target}</span>
+                  <span class="flow-property">.${b.property}</span>
+                  <span class="flow-rule-tag">${b.rule}</span>
+                </div>
+              `)}
+
+            ${schemaBySource.has(source)
+            ? html `
+                  <div style="padding:4px 12px 2px 32px;font-size:10px;font-weight:600;color:var(--md-sys-color-on-surface-variant,#49454f)">
+                    Expected Fields
+                  </div>
+                  ${[...schemaBySource.get(source).entries()].map(([field, usages]) => html `
+                      <div class="flow-schema-field">
+                        <code>${field}</code>
+                        <span class="usages">(${usages.length} usage${usages.length > 1 ? 's' : ''})</span>
+                      </div>
+                    `)}
+                `
+            : nothing}
+          </div>
+        `)}
+
+      ${unboundIds.length > 0
+            ? html `
+            <div class="flow-section-label">Unbound Components</div>
+            ${unboundIds.map(id => html `
+                <div class="flow-issue">
+                  <md-icon>info</md-icon>
+                  <span>#${id} — no bindings</span>
+                </div>
+              `)}
+          `
+            : nothing}
+    `;
+    }
+    _ruleSummary(mapping) {
+        if (mapping.rule === 'map' && mapping.param) {
+            const keys = Object.keys(mapping.param);
+            return `${keys.length} entries`;
+        }
+        if (mapping.rule === 'range' && mapping.param) {
+            const keys = Object.keys(mapping.param).filter(k => k !== 'default');
+            return `${keys.length} ranges`;
+        }
+        if (mapping.rule === 'eval' && mapping.param) {
+            return `${String(mapping.param).length} chars`;
+        }
+        return '';
+    }
+    _mappingStatus(m) {
+        if (!m || (!m.target && !m.property))
+            return 'empty';
+        if (m.target && m.property && m.rule)
+            return 'complete';
+        return 'partial';
+    }
+    _mappingSummary(m, i) {
+        if (!m || (!m.target && !m.property))
+            return `#${i + 1} (empty)`;
+        const parts = [];
+        if (m.accessor)
+            parts.push(m.accessor);
+        parts.push('→');
+        if (m.property)
+            parts.push(m.property);
+        return parts.join(' ');
+    }
+    _dispatchChange() {
+        this.dispatchEvent(new CustomEvent('mappings-change', {
+            bubbles: true,
+            composed: true,
+            detail: { mappings: this.mappings.filter(m => m && m.property) }
+        }));
+    }
+};
+DataBindingPopup.styles = [
+    css `
+      :host {
+        display: flex;
+        width: 1000px;
+        height: 600px;
+        overflow: hidden;
+        font-family: 'Roboto', Arial, sans-serif;
+        font-size: 13px;
+        color: var(--md-sys-color-on-surface, #1c1b1f);
+      }
+
+      /* ── Column 1: Mapping List ── */
+      [mapping-list] {
+        width: 170px;
+        min-width: 170px;
+        border-right: 1px solid var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.12));
+        display: flex;
+        flex-direction: column;
+        background: var(--md-sys-color-surface-container-low, #f7f2fa);
+      }
+
+      [mapping-list] header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 10px 12px;
+        font-weight: 600;
+        font-size: 12px;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        color: var(--md-sys-color-on-surface-variant, #49454f);
+        border-bottom: 1px solid var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.12));
+      }
+
+      [mapping-list] header md-icon {
+        cursor: pointer;
+        --md-icon-size: 18px;
+        border-radius: 50%;
+        padding: 2px;
+      }
+
+      [mapping-list] header md-icon:hover {
+        background: var(--md-sys-color-primary-container, rgba(0, 100, 200, 0.12));
+      }
+
+      [mapping-items] {
+        flex: 1;
+        overflow-y: auto;
+      }
+
+      [mapping-item] {
+        padding: 8px 12px;
+        cursor: pointer;
+        border-bottom: 1px solid var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.06));
+        font-size: 11px;
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        transition: background 0.15s;
+      }
+
+      [mapping-item]:hover {
+        background: var(--md-sys-color-surface-container-highest, rgba(0, 0, 0, 0.08));
+      }
+
+      [mapping-item][selected] {
+        background: var(--md-sys-color-secondary-container, rgba(0, 100, 200, 0.15));
+        color: var(--md-sys-color-on-secondary-container, #1d192b);
+      }
+
+      .status-dot {
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        flex-shrink: 0;
+      }
+
+      .status-dot.complete {
+        background: var(--md-sys-color-primary, #6750a4);
+      }
+
+      .status-dot.partial {
+        background: var(--md-sys-color-tertiary, #7d5260);
+      }
+
+      .status-dot.empty {
+        background: var(--md-sys-color-outline, #79747e);
+      }
+
+      .summary {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        flex: 1;
+      }
+
+      [mapping-item] md-icon.delete-btn {
+        --md-icon-size: 14px;
+        opacity: 0;
+        transition: opacity 0.15s;
+        cursor: pointer;
+      }
+
+      [mapping-item]:hover md-icon.delete-btn {
+        opacity: 0.6;
+      }
+
+      [mapping-item] md-icon.delete-btn:hover {
+        opacity: 1;
+      }
+
+      /* ── Column 2: Flow Editor ── */
+      [flow-editor] {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+      }
+
+      [flow-cards] {
+        display: flex;
+        align-items: stretch;
+        gap: 0;
+        padding: 16px;
+        border-bottom: 1px solid var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.12));
+      }
+
+      .flow-card {
+        flex: 1;
+        border: 1px solid var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.15));
+        border-radius: 8px;
+        padding: 10px;
+        background: var(--md-sys-color-surface-container, #f3edf7);
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+      }
+
+      .flow-card-header {
+        font-size: 10px;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.8px;
+        color: var(--md-sys-color-on-surface-variant, #49454f);
+        display: flex;
+        align-items: center;
+        gap: 4px;
+      }
+
+      .flow-card-header md-icon {
+        --md-icon-size: 14px;
+      }
+
+      .flow-arrow {
+        display: flex;
+        align-items: center;
+        padding: 0 6px;
+        color: var(--md-sys-color-primary, #6750a4);
+        font-size: 18px;
+        flex-shrink: 0;
+      }
+
+      .flow-card input,
+      .flow-card select {
+        width: 100%;
+        box-sizing: border-box;
+        padding: 4px 6px;
+        border: 1px solid var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.2));
+        border-radius: 4px;
+        font-size: 12px;
+        background: var(--md-sys-color-surface, #fffbfe);
+        color: var(--md-sys-color-on-surface, #1c1b1f);
+        outline: none;
+      }
+
+      .flow-card input:focus {
+        border-color: var(--md-sys-color-primary, #6750a4);
+        box-shadow: 0 0 0 1px var(--md-sys-color-primary, #6750a4);
+      }
+
+      .rule-badge {
+        display: inline-flex;
+        align-items: center;
+        gap: 3px;
+        padding: 2px 8px;
+        border-radius: 12px;
+        font-size: 11px;
+        font-weight: 500;
+        cursor: pointer;
+        transition: background 0.15s;
+      }
+
+      .rule-badge[active] {
+        background: var(--md-sys-color-primary-container, #eaddff);
+        color: var(--md-sys-color-on-primary-container, #21005d);
+      }
+
+      .rule-badge:not([active]) {
+        background: var(--md-sys-color-surface-container-highest, #e6e0e9);
+        color: var(--md-sys-color-on-surface-variant, #49454f);
+      }
+
+      .rule-badge:hover {
+        filter: brightness(0.95);
+      }
+
+      /* ── Rule Config Area ── */
+      [rule-config] {
+        flex: 1;
+        overflow-y: auto;
+        padding: 12px 16px;
+        display: flex;
+        flex-direction: column;
+      }
+
+      [rule-config] ox-input-code {
+        flex: 1;
+        min-height: 100px;
+      }
+
+      [rule-config] .options-row {
+        display: flex;
+        gap: 16px;
+        margin-top: 8px;
+        font-size: 12px;
+        align-items: center;
+      }
+
+      [rule-config] .options-row label {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        cursor: pointer;
+      }
+
+      /* ── Column 3: Inspector ── */
+      [inspector] {
+        width: 260px;
+        min-width: 260px;
+        border-left: 1px solid var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.12));
+        display: flex;
+        flex-direction: column;
+        background: var(--md-sys-color-surface-container-low, #f7f2fa);
+      }
+
+      [inspector] header {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        padding: 10px 12px;
+        font-weight: 600;
+        font-size: 12px;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        color: var(--md-sys-color-on-surface-variant, #49454f);
+        border-bottom: 1px solid var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.12));
+      }
+
+      [inspector] header md-icon {
+        --md-icon-size: 16px;
+      }
+
+      [tree-content] {
+        flex: 1;
+        overflow-y: auto;
+        padding: 4px 0;
+      }
+
+      .tree-node {
+        cursor: pointer;
+        user-select: none;
+      }
+
+      .tree-row {
+        display: flex;
+        align-items: center;
+        gap: 2px;
+        padding: 3px 8px;
+        transition: background 0.1s;
+      }
+
+      .tree-row:hover {
+        background: var(--md-sys-color-surface-container-highest, rgba(0, 0, 0, 0.06));
+      }
+
+      .tree-row[selected] {
+        background: var(--md-sys-color-secondary-container, rgba(0, 100, 200, 0.15));
+        font-weight: 600;
+      }
+
+      .tree-row md-icon {
+        --md-icon-size: 14px;
+        color: var(--md-sys-color-on-surface-variant, #49454f);
+      }
+
+      .tree-key {
+        font-weight: 500;
+        font-size: 12px;
+        color: var(--md-sys-color-on-surface, #1c1b1f);
+      }
+
+      .tree-value {
+        font-size: 11px;
+        color: var(--md-sys-color-on-surface-variant, #49454f);
+        margin-left: 4px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .tree-children {
+        padding-left: 16px;
+      }
+
+      /* ── Preview ── */
+      [preview-section] {
+        border-top: 1px solid var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.12));
+        padding: 10px 12px;
+      }
+
+      .preview-label {
+        font-size: 10px;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        color: var(--md-sys-color-on-surface-variant, #49454f);
+        margin-bottom: 6px;
+      }
+
+      .preview-row {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        font-size: 12px;
+        padding: 2px 0;
+      }
+
+      .preview-input {
+        color: var(--md-sys-color-tertiary, #7d5260);
+        font-family: monospace;
+      }
+
+      .preview-output {
+        color: var(--md-sys-color-primary, #6750a4);
+        font-family: monospace;
+        font-weight: 600;
+      }
+
+      /* ── Tab Header ── */
+      [tab-header] {
+        display: flex;
+        border-bottom: 1px solid var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.12));
+      }
+
+      [tab-header] > div {
+        flex: 1;
+        text-align: center;
+        padding: 8px 0;
+        font-size: 11px;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        cursor: pointer;
+        color: var(--md-sys-color-on-surface-variant, #49454f);
+        transition: all 0.15s;
+      }
+
+      [tab-header] > div[active] {
+        color: var(--md-sys-color-primary, #6750a4);
+        border-bottom: 2px solid var(--md-sys-color-primary, #6750a4);
+      }
+
+      [tab-header] > div:not([active]):hover {
+        background: var(--md-sys-color-surface-container-highest, rgba(0, 0, 0, 0.05));
+      }
+
+      /* ── Flow View ── */
+      [flow-view] {
+        flex: 1;
+        overflow-y: auto;
+        padding: 8px 0;
+      }
+
+      .flow-source-group {
+        margin-bottom: 12px;
+      }
+
+      .flow-source-header {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        padding: 6px 12px;
+        font-size: 12px;
+        font-weight: 600;
+        color: var(--md-sys-color-primary, #6750a4);
+      }
+
+      .flow-source-header md-icon {
+        --md-icon-size: 16px;
+      }
+
+      .flow-binding-row {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        padding: 3px 12px 3px 32px;
+        font-size: 11px;
+        cursor: pointer;
+        transition: background 0.1s;
+      }
+
+      .flow-binding-row:hover {
+        background: var(--md-sys-color-surface-container-highest, rgba(0, 0, 0, 0.06));
+      }
+
+      .flow-accessor {
+        color: var(--md-sys-color-tertiary, #7d5260);
+        font-family: monospace;
+        min-width: 80px;
+      }
+
+      .flow-target {
+        color: var(--md-sys-color-on-surface, #1c1b1f);
+        font-weight: 500;
+      }
+
+      .flow-property {
+        color: var(--md-sys-color-primary, #6750a4);
+        font-family: monospace;
+      }
+
+      .flow-rule-tag {
+        font-size: 9px;
+        padding: 1px 5px;
+        border-radius: 8px;
+        background: var(--md-sys-color-surface-container-highest, #e6e0e9);
+        color: var(--md-sys-color-on-surface-variant, #49454f);
+        font-weight: 500;
+        text-transform: uppercase;
+      }
+
+      .flow-section-label {
+        padding: 8px 12px 4px;
+        font-size: 10px;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        color: var(--md-sys-color-on-surface-variant, #49454f);
+        border-top: 1px solid var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.1));
+        margin-top: 4px;
+      }
+
+      .flow-issue {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        padding: 3px 12px;
+        font-size: 11px;
+        color: var(--md-sys-color-error, #b3261e);
+      }
+
+      .flow-issue md-icon {
+        --md-icon-size: 14px;
+        color: var(--md-sys-color-error, #b3261e);
+      }
+
+      .flow-schema-field {
+        padding: 2px 12px 2px 32px;
+        font-size: 11px;
+        display: flex;
+        align-items: center;
+        gap: 4px;
+      }
+
+      .flow-schema-field code {
+        color: var(--md-sys-color-tertiary, #7d5260);
+        font-size: 11px;
+      }
+
+      .flow-schema-field .usages {
+        color: var(--md-sys-color-on-surface-variant, #49454f);
+        font-size: 10px;
+      }
+
+      /* ── Empty state ── */
+      .empty-state {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        color: var(--md-sys-color-on-surface-variant, rgba(0, 0, 0, 0.4));
+        font-size: 13px;
+      }
+    `
+];
+__decorate([
+    property({ type: Array })
+], DataBindingPopup.prototype, "mappings", void 0);
+__decorate([
+    property({ type: Array })
+], DataBindingPopup.prototype, "properties", void 0);
+__decorate([
+    property({ type: Object })
+], DataBindingPopup.prototype, "selected", void 0);
+__decorate([
+    state()
+], DataBindingPopup.prototype, "_viewMode", void 0);
+__decorate([
+    state()
+], DataBindingPopup.prototype, "_selectedIndex", void 0);
+__decorate([
+    state()
+], DataBindingPopup.prototype, "_inspectorMode", void 0);
+__decorate([
+    state()
+], DataBindingPopup.prototype, "_sourceTree", void 0);
+__decorate([
+    state()
+], DataBindingPopup.prototype, "_expandedPaths", void 0);
+__decorate([
+    state()
+], DataBindingPopup.prototype, "_previewInput", void 0);
+__decorate([
+    state()
+], DataBindingPopup.prototype, "_previewOutput", void 0);
+DataBindingPopup = __decorate([
+    customElement('data-binding-popup')
+], DataBindingPopup);
+export { DataBindingPopup };
+//# sourceMappingURL=data-binding-popup.js.map