@operato/property-panel 10.0.0-beta.57 → 10.0.0-beta.59

package/dist/src/property-panel/event-handlers/event-handlers-mapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"event-handlers-mapper.js","sourceRoot":"","sources":["../../../../src/property-panel/event-handlers/event-handlers-mapper.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n *\n * Single EventHandler editor — trigger / action / (code 또는 target+value).\n *\n * 'script' 도 action 의 한 값. action='script' 시 code 필드를, 다른 declarative\n * action 시 target+value 필드를 노출. action 미선택 (= '') 시 no-op.\n */\n\nimport '@operato/input/ox-input-code.js'\nimport '@operato/i18n/ox-i18n.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nimport type { Scene } from '@hatiolab/things-scene'\n\n/** EventHandler model — things-scene 의 EventHandler interface 와 호환. */\nexport type EventHandlerSpec = {\n  trigger: string                          // click | dblclick | mouseenter | mouseleave | longpress | mousedown | mouseup\n  action?: string                          // '' | 'script' | 'data-toggle' | 'data-set' | 'emphasize' | ...\n  code?: string                            // action='script' 시 JS 코드\n  target?: string                          // selector\n  value?: any\n  options?: Record<string, any>\n  disabled?: boolean\n}\n\nconst TRIGGERS = [\n  'click', 'dblclick',\n  'mouseenter', 'mouseleave',\n  'longpress',\n  'mousedown', 'mouseup'\n]\n\n/** 'script' 는 action 의 한 값. */\nconst ACTIONS = [\n  '',\n  'script',\n  'data-toggle',\n  'data-tristate',\n  'data-spreading',\n  'data-set',\n  'partial-data-set',\n  'value-set',\n  'partial-value-set',\n  'info-window',\n  'emphasize'\n]\n\nexport class EventHandlersMapper extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        gap: 6px;\n        padding: 10px 10px 10px 10px;\n        /* 카드 외곽 — tabs (위) + toolbar (중간) + mapper (아래) 가 하나의 카드.\n         * 위쪽 1px 는 toolbar 와의 internal divider. radius 6px 으로 통일. */\n        border: 1px solid rgba(0, 0, 0, 0.18);\n        border-radius: 0 0 6px 6px;\n        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);\n        line-height: 2;\n        background: var(--md-sys-color-surface, #fff);\n        min-width: 0;\n        width: 100%;\n        box-sizing: border-box;\n        overflow: hidden;\n        flex: 1;\n        min-height: 0;\n      }\n\n      [script-field] {\n        display: flex;\n        flex-direction: column;\n        min-height: 0;\n        flex: 1;\n        margin-top: 6px;\n        padding-top: 10px;\n        /* trigger/action/target/value 입력 묶음과 code editor 사이의 구분선.\n         * dashed 대신 solid + 옅은 opacity 로 modern. */\n        border-top: 1px solid rgba(0, 0, 0, 0.08);\n      }\n\n      [script-field] > .script-header {\n        display: flex;\n        align-items: baseline;\n        gap: 8px;\n        margin-bottom: 6px;\n        font-size: 10.5px;\n        font-weight: 700;\n        text-transform: uppercase;\n        letter-spacing: 0.6px;\n        color: var(--md-sys-color-on-surface-variant, #49454f);\n      }\n\n      [script-field] > .script-header small {\n        font-weight: 400;\n        text-transform: none;\n        letter-spacing: 0;\n        opacity: 0.65;\n        font-size: 10.5px;\n      }\n\n      .row {\n        display: grid;\n        grid-template-columns: 80px 1fr;\n        gap: 6px;\n        align-items: center;\n        min-width: 0;\n      }\n\n      .row > select,\n      .row > input[type='text'] {\n        width: 100%;\n        min-width: 0;\n        box-sizing: border-box;\n        padding: 3px 6px;\n        font-size: 13px;\n        border-radius: 4px;\n        border: 1px solid rgba(0, 0, 0, 0.15);\n        background: #fff;\n      }\n\n      ox-input-code {\n        /* display 는 *지정하지 않는다* — outside selector 가 ox-input-code 의\n         * :host { display: flex; flex-direction: column } 를 덮어쓰면, 그 안의\n         * .cm-editor { flex: 1 } 가 작동을 멈춰 텍스트 라인 1개 크기로 축소된다. */\n        width: 100%;\n        max-width: 100%;\n        min-width: 0;\n        box-sizing: border-box;\n        overflow: hidden;\n        min-height: 180px;\n        border: 1px solid rgba(0, 0, 0, 0.15);\n        border-radius: 4px;\n        /* popup 모드에서 script-field 의 남은 세로 공간을 모두 차지 — 아래 빈공간 X.\n         * inline 모드에서는 script-field 가 grow 하지 않으므로 min-height 180px 만 사용. */\n        flex: 1;\n      }\n\n      label {\n        font-size: 12px;\n        color: var(--md-sys-color-on-surface-variant, #49454f);\n      }\n    `\n  ]\n\n  @property({ type: Object }) handler: EventHandlerSpec = { trigger: 'click', action: '' }\n  @property({ type: Object }) scene?: Scene\n\n  render() {\n    const h = this.handler || { trigger: 'click', action: '' }\n    return html`\n      <div class=\"row\">\n        <label><ox-i18n msgid=\"label.trigger\">Trigger</ox-i18n></label>\n        <select\n          .value=${h.trigger || 'click'}\n          @change=${(e: Event) => this._update('trigger', (e.target as HTMLSelectElement).value)}\n        >\n          ${TRIGGERS.map(t => html`<option value=${t} ?selected=${h.trigger === t}>${t}</option>`)}\n        </select>\n      </div>\n\n      <div class=\"row\">\n        <label><ox-i18n msgid=\"label.action\">Action</ox-i18n></label>\n        <select\n          .value=${h.action ?? ''}\n          @change=${(e: Event) => this._update('action', (e.target as HTMLSelectElement).value)}\n        >\n          ${ACTIONS.map(a => html`<option value=${a} ?selected=${(h.action ?? '') === a}>${a || '(none)'}</option>`)}\n        </select>\n      </div>\n\n      ${h.action === 'script'\n        ? this._renderScriptFields(h)\n        : (h.action ? this._renderActionFields(h) : null)}\n    `\n  }\n\n  private _renderScriptFields(h: EventHandlerSpec) {\n    return html`\n      <div class=\"row\">\n        <label><ox-i18n msgid=\"label.target\">Target</ox-i18n></label>\n        <input type=\"text\"\n          placeholder=\"optional selector (#id, .class, ...)\"\n          .value=${h.target || ''}\n          @change=${(e: Event) => this._update('target', (e.target as HTMLInputElement).value)}\n        />\n      </div>\n      <div class=\"row\">\n        <label><ox-i18n msgid=\"label.value\">Value</ox-i18n></label>\n        <input type=\"text\"\n          placeholder=\"optional · script 안 value 변수로 전달\"\n          .value=${h.value !== undefined ? String(h.value) : ''}\n          @change=${(e: Event) => this._update('value', (e.target as HTMLInputElement).value)}\n        />\n      </div>\n      <div script-field>\n        <div class=\"script-header\">\n          <ox-i18n msgid=\"label.script\">Script</ox-i18n>\n          <small>vars: component, scene, event, targets, value · await 지원</small>\n        </div>\n        <ox-input-code\n          mode=\"javascript\"\n          .value=${h.code || ''}\n          @change=${(e: any) => this._update('code', e.detail?.value ?? e.target?.value ?? '')}\n        ></ox-input-code>\n      </div>\n    `\n  }\n\n  private _renderActionFields(h: EventHandlerSpec) {\n    return html`\n      <div class=\"row\">\n        <label><ox-i18n msgid=\"label.target\">Target</ox-i18n></label>\n        <input type=\"text\"\n          placeholder=\"selector (#id, .class, ...)\"\n          .value=${h.target || ''}\n          @change=${(e: Event) => this._update('target', (e.target as HTMLInputElement).value)}\n        />\n      </div>\n      <div class=\"row\">\n        <label><ox-i18n msgid=\"label.value\">Value</ox-i18n></label>\n        <input type=\"text\"\n          placeholder=\"value or accessor\"\n          .value=${h.value !== undefined ? String(h.value) : ''}\n          @change=${(e: Event) => this._update('value', (e.target as HTMLInputElement).value)}\n        />\n      </div>\n    `\n  }\n\n  private _update(key: keyof EventHandlerSpec, value: any) {\n    const next: EventHandlerSpec = { ...(this.handler || { trigger: 'click', action: '' }), [key]: value }\n    // action 전환 시 비-script 진입은 code 정리. script 진입 시 target/value 는\n    // 의미가 호환 (target=findAll selector, value=script 입력) 이라 유지.\n    if (key === 'action' && value !== 'script') {\n      delete next.code\n    }\n    this.handler = next\n    this.dispatchEvent(\n      new CustomEvent('value-change', {\n        bubbles: true,\n        composed: true,\n        detail: { handler: next, changed: { [key]: value } }\n      })\n    )\n  }\n}\n\ncustomElements.define('event-handlers-mapper', EventHandlersMapper)\n"]}

package/dist/src/property-panel/event-handlers/event-handlers-popup.d.ts

@@ -0,0 +1,42 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ *
+ * EventHandlers popup — N 핸들러 large editor. data-binding-popup 의 형제.
+ *
+ * 2-column layout:
+ *   Left:  handler list — add / duplicate / disable / reorder / delete
+ *   Right: 선택된 handler 의 mapper (큰 code editor 영역)
+ */
+import '@material/web/icon/icon.js';
+import '@operato/i18n/ox-i18n.js';
+import { LitElement } from 'lit';
+import type { Scene } from '@hatiolab/things-scene';
+import { EventHandlersMapper, type EventHandlerSpec } from './event-handlers-mapper.js';
+import { EventHandlersHelp } from './event-handlers-help.js';
+declare const EventHandlersPopup_base: typeof LitElement & import("@open-wc/dedupe-mixin").Constructor<import("@open-wc/scoped-elements/types.js").ScopedElementsHost>;
+export declare class EventHandlersPopup extends EventHandlersPopup_base {
+    static get scopedElements(): {
+        'event-handlers-mapper': typeof EventHandlersMapper;
+        'event-handlers-help': typeof EventHandlersHelp;
+    };
+    static styles: import("lit").CSSResult[];
+    handlers: EventHandlerSpec[];
+    scene?: Scene;
+    selectedIndex: number;
+    render(): import("lit-html").TemplateResult<1>;
+    private _renderListItem;
+    private _summarize;
+    private _addHandler;
+    private _duplicateHandler;
+    private _toggleDisabled;
+    private _moveHandler;
+    private _removeHandler;
+    private _onHandlerChanged;
+    /**
+     * help pane 의 snippet 버튼 → 현재 선택 handler 의 code 에 *append* (덮어쓰지
+     * 않음). action 이 script 가 아니면 자동으로 script 로 전환 + code 초기화.
+     */
+    private _onInsertSnippet;
+    private _dispatch;
+}
+export {};

package/dist/src/property-panel/event-handlers/event-handlers-popup.js

@@ -0,0 +1,375 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ *
+ * EventHandlers popup — N 핸들러 large editor. data-binding-popup 의 형제.
+ *
+ * 2-column layout:
+ *   Left:  handler list — add / duplicate / disable / reorder / delete
+ *   Right: 선택된 handler 의 mapper (큰 code editor 영역)
+ */
+import { __decorate } from "tslib";
+import '@material/web/icon/icon.js';
+import '@operato/i18n/ox-i18n.js';
+import { css, html, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { ScopedElementsMixin } from '@open-wc/scoped-elements';
+import { ScrollbarStyles } from '@operato/styles';
+import { EventHandlersMapper } from './event-handlers-mapper.js';
+import { EventHandlersHelp } from './event-handlers-help.js';
+let EventHandlersPopup = class EventHandlersPopup extends ScopedElementsMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.handlers = [];
+        this.selectedIndex = 0;
+    }
+    static get scopedElements() {
+        return {
+            'event-handlers-mapper': EventHandlersMapper,
+            'event-handlers-help': EventHandlersHelp
+        };
+    }
+    render() {
+        var _a;
+        const handlers = (_a = this.handlers) !== null && _a !== void 0 ? _a : [];
+        const current = handlers[this.selectedIndex];
+        return html `
+      <div handler-list>
+        <header>
+          <span><ox-i18n msgid="label.handlers">Handlers</ox-i18n> (${handlers.length})</span>
+          <md-icon @click=${() => this._addHandler()} title="add">add</md-icon>
+        </header>
+        ${handlers.length === 0
+            ? html `<div empty><ox-i18n msgid="label.no-handlers">No handlers — add one</ox-i18n></div>`
+            : html `<ul>${handlers.map((h, i) => this._renderListItem(h, i, handlers.length))}</ul>`}
+      </div>
+
+      <div editor>
+        ${current
+            ? html `
+              <event-handlers-mapper
+                .handler=${current}
+                .scene=${this.scene}
+                @value-change=${(e) => this._onHandlerChanged(e)}
+              ></event-handlers-mapper>
+            `
+            : html `<div empty><ox-i18n msgid="label.select-or-add-handler">Select or add a handler</ox-i18n></div>`}
+      </div>
+
+      <div help>
+        <event-handlers-help
+          .handler=${current}
+          @insert-snippet=${(e) => this._onInsertSnippet(e)}
+        ></event-handlers-help>
+      </div>
+    `;
+    }
+    _renderListItem(h, i, total) {
+        return html `
+      <li
+        ?active=${i === this.selectedIndex}
+        ?disabled=${h.disabled}
+        @click=${() => (this.selectedIndex = i)}
+      >
+        <div class="meta">
+          <span class="trigger">${h.trigger}${h.disabled ? ' (off)' : ''}</span>
+          <span class="summary">${this._summarize(h)}</span>
+        </div>
+        <md-icon
+          @click=${(e) => this._toggleDisabled(i, e)}
+          title=${h.disabled ? 'enable' : 'disable'}
+        >${h.disabled ? 'toggle_off' : 'toggle_on'}</md-icon>
+        <md-icon
+          @click=${(e) => this._duplicateHandler(i, e)}
+          title="duplicate"
+        >content_copy</md-icon>
+        <md-icon
+          @click=${(e) => this._moveHandler(i, -1, e)}
+          title="move up"
+          ?style=${i === 0 ? 'opacity:0.2;pointer-events:none' : ''}
+        >arrow_upward</md-icon>
+        <md-icon
+          @click=${(e) => this._moveHandler(i, +1, e)}
+          title="move down"
+          ?style=${i === total - 1 ? 'opacity:0.2;pointer-events:none' : ''}
+        >arrow_downward</md-icon>
+        <md-icon
+          class="danger"
+          @click=${(e) => this._removeHandler(i, e)}
+          title="delete"
+        >delete</md-icon>
+      </li>
+    `;
+    }
+    _summarize(h) {
+        if (h.action === 'script') {
+            const c = (h.code || '').replace(/\s+/g, ' ').trim();
+            return 'script · ' + (c.length > 60 ? c.slice(0, 60) + '…' : (c || '(empty)'));
+        }
+        return [h.action || '(none)', h.target ? `→${h.target}` : ''].filter(Boolean).join(' ');
+    }
+    _addHandler() {
+        const next = { trigger: 'click', action: '' };
+        this.handlers = [...(this.handlers || []), next];
+        this.selectedIndex = this.handlers.length - 1;
+        this._dispatch();
+    }
+    _duplicateHandler(idx, e) {
+        e.stopPropagation();
+        const original = this.handlers[idx];
+        if (!original)
+            return;
+        const copy = JSON.parse(JSON.stringify(original));
+        const next = [...(this.handlers || [])];
+        next.splice(idx + 1, 0, copy);
+        this.handlers = next;
+        this.selectedIndex = idx + 1;
+        this._dispatch();
+    }
+    _toggleDisabled(idx, e) {
+        e.stopPropagation();
+        const next = [...(this.handlers || [])];
+        next[idx] = { ...next[idx], disabled: !next[idx].disabled };
+        this.handlers = next;
+        this._dispatch();
+    }
+    _moveHandler(idx, delta, e) {
+        e.stopPropagation();
+        const next = [...(this.handlers || [])];
+        const newIdx = idx + delta;
+        if (newIdx < 0 || newIdx >= next.length)
+            return;
+        const [m] = next.splice(idx, 1);
+        next.splice(newIdx, 0, m);
+        this.handlers = next;
+        if (this.selectedIndex === idx)
+            this.selectedIndex = newIdx;
+        this._dispatch();
+    }
+    _removeHandler(idx, e) {
+        e.stopPropagation();
+        const next = [...(this.handlers || [])];
+        next.splice(idx, 1);
+        this.handlers = next;
+        this.selectedIndex = Math.max(0, Math.min(this.selectedIndex, next.length - 1));
+        this._dispatch();
+    }
+    _onHandlerChanged(e) {
+        var _a;
+        const handler = (_a = e.detail) === null || _a === void 0 ? void 0 : _a.handler;
+        if (!handler)
+            return;
+        const next = [...(this.handlers || [])];
+        next[this.selectedIndex] = handler;
+        this.handlers = next;
+        this._dispatch();
+    }
+    /**
+     * help pane 의 snippet 버튼 → 현재 선택 handler 의 code 에 *append* (덮어쓰지
+     * 않음). action 이 script 가 아니면 자동으로 script 로 전환 + code 초기화.
+     */
+    _onInsertSnippet(e) {
+        var _a;
+        const snippet = (_a = e.detail) === null || _a === void 0 ? void 0 : _a.code;
+        if (typeof snippet !== 'string' || !snippet)
+            return;
+        const cur = this.handlers[this.selectedIndex];
+        if (!cur)
+            return;
+        const isScript = cur.action === 'script';
+        const baseCode = isScript ? (cur.code || '') : '';
+        const nextCode = baseCode ? baseCode.replace(/\s*$/, '') + '\n\n' + snippet : snippet;
+        const nextHandler = {
+            ...cur,
+            action: 'script',
+            code: nextCode
+        };
+        const next = [...this.handlers];
+        next[this.selectedIndex] = nextHandler;
+        this.handlers = next;
+        this._dispatch();
+    }
+    _dispatch() {
+        // action 이 (none) — 즉 빈 문자열 — 인 핸들러는 외부 모델에 포함하지 않는다.
+        // UI 안에서는 placeholder 로 남겨두고, 사용자가 action 을 선택하면 그제서야
+        // 저장 모델에 포함된다.
+        const valid = (this.handlers || []).filter(h => !!h && !!h.action);
+        this.dispatchEvent(new CustomEvent('handlers-change', {
+            bubbles: true,
+            composed: true,
+            detail: { handlers: valid }
+        }));
+    }
+};
+EventHandlersPopup.styles = [
+    ScrollbarStyles,
+    css `
+      :host {
+        display: flex;
+        width: 1400px;
+        height: 680px;
+        overflow: hidden;
+        font-family: 'Roboto', Arial, sans-serif;
+        font-size: 13px;
+        color: var(--md-sys-color-on-surface, #1c1b1f);
+        background: var(--md-sys-color-surface, #fff);
+      }
+
+      [handler-list] {
+        width: 240px;
+        min-width: 240px;
+        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);
+      }
+
+      [handler-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));
+      }
+
+      [handler-list] header md-icon {
+        cursor: pointer;
+        --md-icon-size: 18px;
+        border-radius: 4px;
+        padding: 2px;
+      }
+
+      [handler-list] header md-icon:hover {
+        background: rgba(0, 0, 0, 0.05);
+      }
+
+      [handler-list] ul {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        overflow-y: auto;
+        flex: 1;
+      }
+
+      [handler-list] li {
+        padding: 8px 10px;
+        cursor: pointer;
+        border-bottom: 1px solid var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.08));
+        display: flex;
+        align-items: center;
+        gap: 6px;
+      }
+
+      [handler-list] li[active] {
+        background: var(--md-sys-color-secondary-container, #e8def8);
+        color: var(--md-sys-color-on-secondary-container, #1d192b);
+      }
+
+      [handler-list] li[disabled] {
+        opacity: 0.5;
+        font-style: italic;
+      }
+
+      [handler-list] li:hover {
+        background: rgba(0, 0, 0, 0.04);
+      }
+
+      [handler-list] li .meta {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        min-width: 0;
+      }
+
+      [handler-list] li .trigger {
+        font-weight: 600;
+        font-size: 12px;
+      }
+
+      [handler-list] li .summary {
+        font-size: 11px;
+        opacity: 0.7;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        margin-top: 2px;
+      }
+
+      [handler-list] li md-icon {
+        --md-icon-size: 16px;
+        opacity: 0.5;
+        cursor: pointer;
+        padding: 3px;
+        border-radius: 4px;
+        flex-shrink: 0;
+      }
+
+      [handler-list] li md-icon:hover {
+        opacity: 1;
+        background: rgba(0, 0, 0, 0.05);
+      }
+
+      [handler-list] li md-icon.danger:hover {
+        color: var(--md-sys-color-error, #b3261e);
+      }
+
+      [handler-list] [empty] {
+        padding: 24px 12px;
+        text-align: center;
+        color: var(--md-sys-color-on-surface-variant, #49454f);
+        opacity: 0.6;
+        font-size: 12px;
+      }
+
+      [editor] {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        overflow-y: auto;
+        padding: 16px 20px;
+        background: var(--md-sys-color-surface, #fff);
+      }
+
+      [editor] [empty] {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex: 1;
+        color: var(--md-sys-color-on-surface-variant, #49454f);
+        font-size: 13px;
+        opacity: 0.6;
+      }
+
+      [editor] event-handlers-mapper {
+        min-height: 100%;
+        /* popup 에서는 위에 toolbar 가 없다 — 상하 모두 둥근 모서리로 균형. */
+        border-radius: 6px;
+      }
+
+      [help] {
+        width: 320px;
+        min-width: 320px;
+        max-width: 320px;
+        display: flex;
+        flex-direction: column;
+      }
+    `
+];
+__decorate([
+    property({ type: Array })
+], EventHandlersPopup.prototype, "handlers", void 0);
+__decorate([
+    property({ type: Object })
+], EventHandlersPopup.prototype, "scene", void 0);
+__decorate([
+    state()
+], EventHandlersPopup.prototype, "selectedIndex", void 0);
+EventHandlersPopup = __decorate([
+    customElement('event-handlers-popup')
+], EventHandlersPopup);
+export { EventHandlersPopup };
+//# sourceMappingURL=event-handlers-popup.js.map

package/dist/src/property-panel/event-handlers/event-handlers-popup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"event-handlers-popup.js","sourceRoot":"","sources":["../../../../src/property-panel/event-handlers/event-handlers-popup.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n *\n * EventHandlers popup — N 핸들러 large editor. data-binding-popup 의 형제.\n *\n * 2-column layout:\n *   Left:  handler list — add / duplicate / disable / reorder / delete\n *   Right: 선택된 handler 의 mapper (큰 code editor 영역)\n */\n\nimport '@material/web/icon/icon.js'\nimport '@operato/i18n/ox-i18n.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport type { Scene } from '@hatiolab/things-scene'\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements'\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { EventHandlersMapper, type EventHandlerSpec } from './event-handlers-mapper.js'\nimport { EventHandlersHelp } from './event-handlers-help.js'\n\n@customElement('event-handlers-popup')\nexport class EventHandlersPopup extends ScopedElementsMixin(LitElement) {\n  static get scopedElements() {\n    return {\n      'event-handlers-mapper': EventHandlersMapper,\n      'event-handlers-help': EventHandlersHelp\n    }\n  }\n\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        width: 1400px;\n        height: 680px;\n        overflow: hidden;\n        font-family: 'Roboto', Arial, sans-serif;\n        font-size: 13px;\n        color: var(--md-sys-color-on-surface, #1c1b1f);\n        background: var(--md-sys-color-surface, #fff);\n      }\n\n      [handler-list] {\n        width: 240px;\n        min-width: 240px;\n        border-right: 1px solid var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.12));\n        display: flex;\n        flex-direction: column;\n        background: var(--md-sys-color-surface-container-low, #f7f2fa);\n      }\n\n      [handler-list] header {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        padding: 10px 12px;\n        font-weight: 600;\n        font-size: 12px;\n        text-transform: uppercase;\n        letter-spacing: 0.5px;\n        color: var(--md-sys-color-on-surface-variant, #49454f);\n        border-bottom: 1px solid var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.12));\n      }\n\n      [handler-list] header md-icon {\n        cursor: pointer;\n        --md-icon-size: 18px;\n        border-radius: 4px;\n        padding: 2px;\n      }\n\n      [handler-list] header md-icon:hover {\n        background: rgba(0, 0, 0, 0.05);\n      }\n\n      [handler-list] ul {\n        list-style: none;\n        margin: 0;\n        padding: 0;\n        overflow-y: auto;\n        flex: 1;\n      }\n\n      [handler-list] li {\n        padding: 8px 10px;\n        cursor: pointer;\n        border-bottom: 1px solid var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.08));\n        display: flex;\n        align-items: center;\n        gap: 6px;\n      }\n\n      [handler-list] li[active] {\n        background: var(--md-sys-color-secondary-container, #e8def8);\n        color: var(--md-sys-color-on-secondary-container, #1d192b);\n      }\n\n      [handler-list] li[disabled] {\n        opacity: 0.5;\n        font-style: italic;\n      }\n\n      [handler-list] li:hover {\n        background: rgba(0, 0, 0, 0.04);\n      }\n\n      [handler-list] li .meta {\n        display: flex;\n        flex-direction: column;\n        flex: 1;\n        min-width: 0;\n      }\n\n      [handler-list] li .trigger {\n        font-weight: 600;\n        font-size: 12px;\n      }\n\n      [handler-list] li .summary {\n        font-size: 11px;\n        opacity: 0.7;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        margin-top: 2px;\n      }\n\n      [handler-list] li md-icon {\n        --md-icon-size: 16px;\n        opacity: 0.5;\n        cursor: pointer;\n        padding: 3px;\n        border-radius: 4px;\n        flex-shrink: 0;\n      }\n\n      [handler-list] li md-icon:hover {\n        opacity: 1;\n        background: rgba(0, 0, 0, 0.05);\n      }\n\n      [handler-list] li md-icon.danger:hover {\n        color: var(--md-sys-color-error, #b3261e);\n      }\n\n      [handler-list] [empty] {\n        padding: 24px 12px;\n        text-align: center;\n        color: var(--md-sys-color-on-surface-variant, #49454f);\n        opacity: 0.6;\n        font-size: 12px;\n      }\n\n      [editor] {\n        flex: 1;\n        display: flex;\n        flex-direction: column;\n        overflow-y: auto;\n        padding: 16px 20px;\n        background: var(--md-sys-color-surface, #fff);\n      }\n\n      [editor] [empty] {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex: 1;\n        color: var(--md-sys-color-on-surface-variant, #49454f);\n        font-size: 13px;\n        opacity: 0.6;\n      }\n\n      [editor] event-handlers-mapper {\n        min-height: 100%;\n        /* popup 에서는 위에 toolbar 가 없다 — 상하 모두 둥근 모서리로 균형. */\n        border-radius: 6px;\n      }\n\n      [help] {\n        width: 320px;\n        min-width: 320px;\n        max-width: 320px;\n        display: flex;\n        flex-direction: column;\n      }\n    `\n  ]\n\n  @property({ type: Array }) handlers: EventHandlerSpec[] = []\n  @property({ type: Object }) scene?: Scene\n  @state() selectedIndex: number = 0\n\n  render() {\n    const handlers = this.handlers ?? []\n    const current = handlers[this.selectedIndex]\n\n    return html`\n      <div handler-list>\n        <header>\n          <span><ox-i18n msgid=\"label.handlers\">Handlers</ox-i18n> (${handlers.length})</span>\n          <md-icon @click=${() => this._addHandler()} title=\"add\">add</md-icon>\n        </header>\n        ${handlers.length === 0\n          ? html`<div empty><ox-i18n msgid=\"label.no-handlers\">No handlers — add one</ox-i18n></div>`\n          : html`<ul>${handlers.map((h, i) => this._renderListItem(h, i, handlers.length))}</ul>`}\n      </div>\n\n      <div editor>\n        ${current\n          ? html`\n              <event-handlers-mapper\n                .handler=${current}\n                .scene=${this.scene}\n                @value-change=${(e: CustomEvent) => this._onHandlerChanged(e)}\n              ></event-handlers-mapper>\n            `\n          : html`<div empty><ox-i18n msgid=\"label.select-or-add-handler\">Select or add a handler</ox-i18n></div>`}\n      </div>\n\n      <div help>\n        <event-handlers-help\n          .handler=${current}\n          @insert-snippet=${(e: CustomEvent) => this._onInsertSnippet(e)}\n        ></event-handlers-help>\n      </div>\n    `\n  }\n\n  private _renderListItem(h: EventHandlerSpec, i: number, total: number) {\n    return html`\n      <li\n        ?active=${i === this.selectedIndex}\n        ?disabled=${h.disabled}\n        @click=${() => (this.selectedIndex = i)}\n      >\n        <div class=\"meta\">\n          <span class=\"trigger\">${h.trigger}${h.disabled ? ' (off)' : ''}</span>\n          <span class=\"summary\">${this._summarize(h)}</span>\n        </div>\n        <md-icon\n          @click=${(e: Event) => this._toggleDisabled(i, e)}\n          title=${h.disabled ? 'enable' : 'disable'}\n        >${h.disabled ? 'toggle_off' : 'toggle_on'}</md-icon>\n        <md-icon\n          @click=${(e: Event) => this._duplicateHandler(i, e)}\n          title=\"duplicate\"\n        >content_copy</md-icon>\n        <md-icon\n          @click=${(e: Event) => this._moveHandler(i, -1, e)}\n          title=\"move up\"\n          ?style=${i === 0 ? 'opacity:0.2;pointer-events:none' : ''}\n        >arrow_upward</md-icon>\n        <md-icon\n          @click=${(e: Event) => this._moveHandler(i, +1, e)}\n          title=\"move down\"\n          ?style=${i === total - 1 ? 'opacity:0.2;pointer-events:none' : ''}\n        >arrow_downward</md-icon>\n        <md-icon\n          class=\"danger\"\n          @click=${(e: Event) => this._removeHandler(i, e)}\n          title=\"delete\"\n        >delete</md-icon>\n      </li>\n    `\n  }\n\n  private _summarize(h: EventHandlerSpec): string {\n    if (h.action === 'script') {\n      const c = (h.code || '').replace(/\\s+/g, ' ').trim()\n      return 'script · ' + (c.length > 60 ? c.slice(0, 60) + '…' : (c || '(empty)'))\n    }\n    return [h.action || '(none)', h.target ? `→${h.target}` : ''].filter(Boolean).join(' ')\n  }\n\n  private _addHandler() {\n    const next: EventHandlerSpec = { trigger: 'click', action: '' }\n    this.handlers = [...(this.handlers || []), next]\n    this.selectedIndex = this.handlers.length - 1\n    this._dispatch()\n  }\n\n  private _duplicateHandler(idx: number, e: Event) {\n    e.stopPropagation()\n    const original = this.handlers[idx]\n    if (!original) return\n    const copy: EventHandlerSpec = JSON.parse(JSON.stringify(original))\n    const next = [...(this.handlers || [])]\n    next.splice(idx + 1, 0, copy)\n    this.handlers = next\n    this.selectedIndex = idx + 1\n    this._dispatch()\n  }\n\n  private _toggleDisabled(idx: number, e: Event) {\n    e.stopPropagation()\n    const next = [...(this.handlers || [])]\n    next[idx] = { ...next[idx], disabled: !next[idx].disabled }\n    this.handlers = next\n    this._dispatch()\n  }\n\n  private _moveHandler(idx: number, delta: -1 | 1, e: Event) {\n    e.stopPropagation()\n    const next = [...(this.handlers || [])]\n    const newIdx = idx + delta\n    if (newIdx < 0 || newIdx >= next.length) return\n    const [m] = next.splice(idx, 1)\n    next.splice(newIdx, 0, m)\n    this.handlers = next\n    if (this.selectedIndex === idx) this.selectedIndex = newIdx\n    this._dispatch()\n  }\n\n  private _removeHandler(idx: number, e: Event) {\n    e.stopPropagation()\n    const next = [...(this.handlers || [])]\n    next.splice(idx, 1)\n    this.handlers = next\n    this.selectedIndex = Math.max(0, Math.min(this.selectedIndex, next.length - 1))\n    this._dispatch()\n  }\n\n  private _onHandlerChanged(e: CustomEvent) {\n    const handler = e.detail?.handler as EventHandlerSpec\n    if (!handler) return\n    const next = [...(this.handlers || [])]\n    next[this.selectedIndex] = handler\n    this.handlers = next\n    this._dispatch()\n  }\n\n  /**\n   * help pane 의 snippet 버튼 → 현재 선택 handler 의 code 에 *append* (덮어쓰지\n   * 않음). action 이 script 가 아니면 자동으로 script 로 전환 + code 초기화.\n   */\n  private _onInsertSnippet(e: CustomEvent) {\n    const snippet = e.detail?.code\n    if (typeof snippet !== 'string' || !snippet) return\n    const cur = this.handlers[this.selectedIndex]\n    if (!cur) return\n    const isScript = cur.action === 'script'\n    const baseCode = isScript ? (cur.code || '') : ''\n    const nextCode = baseCode ? baseCode.replace(/\\s*$/, '') + '\\n\\n' + snippet : snippet\n    const nextHandler: EventHandlerSpec = {\n      ...cur,\n      action: 'script',\n      code: nextCode\n    }\n    const next = [...this.handlers]\n    next[this.selectedIndex] = nextHandler\n    this.handlers = next\n    this._dispatch()\n  }\n\n  private _dispatch() {\n    // action 이 (none) — 즉 빈 문자열 — 인 핸들러는 외부 모델에 포함하지 않는다.\n    // UI 안에서는 placeholder 로 남겨두고, 사용자가 action 을 선택하면 그제서야\n    // 저장 모델에 포함된다.\n    const valid = (this.handlers || []).filter(h => !!h && !!h.action)\n    this.dispatchEvent(\n      new CustomEvent('handlers-change', {\n        bubbles: true,\n        composed: true,\n        detail: { handlers: valid }\n      })\n    )\n  }\n}\n"]}

package/dist/src/property-panel/event-handlers/event-handlers.d.ts

@@ -0,0 +1,54 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ *
+ * EventHandlers panel — 컴포넌트의 `state.eventHandlers[]` 편집기.
+ *
+ * 데이터바인딩 panel 의 형제로 *완전 분리*. 데이터바인딩은 데이터 흐름 전용,
+ * eventHandlers 는 사용자 액션 (tap / hover / 등) 의 first-class 핸들러 등록.
+ *
+ * data-binding 패턴 그대로 — tabs (N handlers) + handler mapper + add/delete/copy/paste.
+ */
+import '@material/web/icon/icon.js';
+import '@operato/help/ox-title-with-help.js';
+import '@operato/input/ox-buttons-radio.js';
+import '@operato/i18n/ox-i18n.js';
+import { PropertyValues } from 'lit';
+import type { Properties, Scene } from '@hatiolab/things-scene';
+import { AbstractProperty } from '../abstract-property.js';
+import { EventHandlersMapper, type EventHandlerSpec } from './event-handlers-mapper.js';
+declare const PropertyEventHandlers_base: typeof AbstractProperty & import("@open-wc/dedupe-mixin").Constructor<import("@open-wc/scoped-elements/types.js").ScopedElementsHost>;
+export declare class PropertyEventHandlers extends PropertyEventHandlers_base {
+    static styles: import("lit").CSSResult[];
+    value?: Properties;
+    scene?: Scene;
+    handlerIndex: number;
+    _afterRender?: Function | null;
+    tabs: HTMLElement;
+    tabNavLeftButton: HTMLElement;
+    tabNavRightButton: HTMLElement;
+    /**
+     * 두 속성 통합 — 신규 `eventHandlers` 우선, 없으면 legacy `event` 객체를
+     * *read-only* 변환해 표시. 사용자가 수정 시 `eventHandlers` 에만 저장 — legacy
+     * 는 손대지 않음 (옛 코드 호환 / rollback 안전망).
+     */
+    get handlers(): EventHandlerSpec[];
+    firstUpdated(): void;
+    updated(changes: PropertyValues<this>): void;
+    static get scopedElements(): {
+        'event-handlers-mapper': typeof EventHandlersMapper;
+    };
+    render(): import("lit-html").TemplateResult<1>;
+    _setHandlerIndex(idx: number): void;
+    _clearHandler(): void;
+    _copyHandler(): void;
+    _pasteHandler(): void;
+    _onHandlerChanged(e: CustomEvent): void;
+    private _dispatchHandlersChange;
+    onValueChanged(): Promise<void>;
+    _openHandlersPopup(): Promise<void>;
+    get tabContainer(): HTMLElement;
+    _onTabScroll(): void;
+    _onTabScrollNavLeft(): void;
+    _onTabScrollNavRight(): void;
+}
+export {};