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

package/CHANGELOG.md

@@ -3,6 +3,26 @@
 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.59](https://github.com/hatiolab/operato/compare/v10.0.0-beta.58...v10.0.0-beta.59) (2026-06-03)
+
+
+### :bug: Bug Fix
+
+* **property-panel/event-handlers:** popup 폭 / 높이 레이아웃 회귀 정리 ([799a2f2](https://github.com/hatiolab/operato/commit/799a2f2b5713fc6d56748f5ef8887e55c0eab8ab))
+
+
+### :rocket: New Features
+
+* **property-panel/event-handlers:** help pane + UX 개선 + (none) 핸들러 제외 ([8c23f62](https://github.com/hatiolab/operato/commit/8c23f62008aea1dcbf4b305cce432eeda7807dd5))
+
+
+### :sparkles: Styling
+
+* **property-panel/event-handlers:** popup + help pane 에 표준 ScrollbarStyles 적용 ([e11f4a6](https://github.com/hatiolab/operato/commit/e11f4a64a1a223498f02b9f02cdfedd441cef869))
+* **property-panel/event-handlers:** popup 안 mapper 의 상단 모서리도 둥글림 ([717422c](https://github.com/hatiolab/operato/commit/717422cb96b698ae151293dcdf106c1b52a3f9e1))
+
+
+
 ## [10.0.0-beta.58](https://github.com/hatiolab/operato/compare/v10.0.0-beta.57...v10.0.0-beta.58) (2026-05-28)
 
 

package/dist/src/index.d.ts

@@ -3,6 +3,7 @@ export * from './property-panel/data-binding/data-binding.js';
 export * from './property-panel/event-handlers/event-handlers-mapper.js';
 export * from './property-panel/event-handlers/event-handlers.js';
 export * from './property-panel/event-handlers/event-handlers-popup.js';
+export * from './property-panel/event-handlers/event-handlers-help.js';
 export * from './property-panel/effects/effects.js';
 export * from './property-panel/inspector/inspector.js';
 export * from './property-panel/shapes/shapes.js';

package/dist/src/index.js

@@ -5,6 +5,7 @@ export * from './property-panel/data-binding/data-binding.js';
 export * from './property-panel/event-handlers/event-handlers-mapper.js';
 export * from './property-panel/event-handlers/event-handlers.js';
 export * from './property-panel/event-handlers/event-handlers-popup.js';
+export * from './property-panel/event-handlers/event-handlers-help.js';
 export * from './property-panel/effects/effects.js';
 export * from './property-panel/inspector/inspector.js';
 export * from './property-panel/shapes/shapes.js';

package/dist/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAA;AAExD,cAAc,+CAA+C,CAAA;AAC7D,0EAA0E;AAC1E,sEAAsE;AACtE,cAAc,0DAA0D,CAAA;AACxE,cAAc,mDAAmD,CAAA;AACjE,cAAc,yDAAyD,CAAA;AACvE,cAAc,qCAAqC,CAAA;AACnD,cAAc,yCAAyC,CAAA;AACvD,cAAc,mCAAmC,CAAA;AACjD,cAAc,yCAAyC,CAAA;AACvD,cAAc,mCAAmC,CAAA;AACjD,cAAc,mCAAmC,CAAA","sourcesContent":["export { OxPropertyPanel } from './ox-property-panel.js'\n\nexport * from './property-panel/data-binding/data-binding.js'\n// Event handlers — inline panel + popup (data-binding 패턴 동일). effects tab\n// 의 PropertyEvent fieldset 에서 inline 으로 host. open_in_new 클릭 시 popup.\nexport * from './property-panel/event-handlers/event-handlers-mapper.js'\nexport * from './property-panel/event-handlers/event-handlers.js'\nexport * from './property-panel/event-handlers/event-handlers-popup.js'\nexport * from './property-panel/effects/effects.js'\nexport * from './property-panel/inspector/inspector.js'\nexport * from './property-panel/shapes/shapes.js'\nexport * from './property-panel/specifics/specifics.js'\nexport * from './property-panel/styles/styles.js'\nexport * from './property-panel/threed/threed.js'\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAA;AAExD,cAAc,+CAA+C,CAAA;AAC7D,0EAA0E;AAC1E,sEAAsE;AACtE,cAAc,0DAA0D,CAAA;AACxE,cAAc,mDAAmD,CAAA;AACjE,cAAc,yDAAyD,CAAA;AACvE,cAAc,wDAAwD,CAAA;AACtE,cAAc,qCAAqC,CAAA;AACnD,cAAc,yCAAyC,CAAA;AACvD,cAAc,mCAAmC,CAAA;AACjD,cAAc,yCAAyC,CAAA;AACvD,cAAc,mCAAmC,CAAA;AACjD,cAAc,mCAAmC,CAAA","sourcesContent":["export { OxPropertyPanel } from './ox-property-panel.js'\n\nexport * from './property-panel/data-binding/data-binding.js'\n// Event handlers — inline panel + popup (data-binding 패턴 동일). effects tab\n// 의 PropertyEvent fieldset 에서 inline 으로 host. open_in_new 클릭 시 popup.\nexport * from './property-panel/event-handlers/event-handlers-mapper.js'\nexport * from './property-panel/event-handlers/event-handlers.js'\nexport * from './property-panel/event-handlers/event-handlers-popup.js'\nexport * from './property-panel/event-handlers/event-handlers-help.js'\nexport * from './property-panel/effects/effects.js'\nexport * from './property-panel/inspector/inspector.js'\nexport * from './property-panel/shapes/shapes.js'\nexport * from './property-panel/specifics/specifics.js'\nexport * from './property-panel/styles/styles.js'\nexport * from './property-panel/threed/threed.js'\n"]}

package/dist/src/property-panel/effects/property-event-hover.d.ts

@@ -17,7 +17,7 @@ export declare class PropertyEventHover extends PropertyEventHover_base {
     };
     firstUpdated(): void;
     render(): import("lit-html").TemplateResult<1>;
-    _getPlaceHoder(action: string): "" | "SCENE-100" | "http://www.hatiolab.com/";
+    _getPlaceHoder(action: string): "" | "http://www.hatiolab.com/" | "SCENE-100";
     _getTargetList(action: string): {
         value: string;
         description?: string;

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

@@ -0,0 +1,23 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ *
+ * EventHandlers help pane — popup 의 우측 docs 컬럼.
+ *
+ * 현재 선택된 handler 의 trigger / action / target / value (또는 script vars)
+ * 의미를 *동적으로* 안내. script 모드에서는 자주 쓰는 코드 snippet 을
+ * 삽입할 수 있는 버튼도 제공.
+ *
+ * 다국어 — 1차안은 한국어 hard-code (5 언어 동시 유지 부담 회피).
+ * 추후 안정화 후 i18n 키로 분리.
+ */
+import '@material/web/icon/icon.js';
+import { LitElement } from 'lit';
+import type { EventHandlerSpec } from './event-handlers-mapper.js';
+export declare class EventHandlersHelp extends LitElement {
+    static styles: import("lit").CSSResult[];
+    handler?: EventHandlerSpec;
+    render(): import("lit-html").TemplateResult<1>;
+    private _renderDeclarativeHelp;
+    private _renderScriptHelp;
+    private _emitSnippet;
+}

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

@@ -0,0 +1,356 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ *
+ * EventHandlers help pane — popup 의 우측 docs 컬럼.
+ *
+ * 현재 선택된 handler 의 trigger / action / target / value (또는 script vars)
+ * 의미를 *동적으로* 안내. script 모드에서는 자주 쓰는 코드 snippet 을
+ * 삽입할 수 있는 버튼도 제공.
+ *
+ * 다국어 — 1차안은 한국어 hard-code (5 언어 동시 유지 부담 회피).
+ * 추후 안정화 후 i18n 키로 분리.
+ */
+import { __decorate } from "tslib";
+import '@material/web/icon/icon.js';
+import { css, html, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import { ScrollbarStyles } from '@operato/styles';
+const TRIGGER_DESC = {
+    click: {
+        summary: '마우스 클릭 (터치 환경에선 tap 과 동일).',
+        example: '가장 일반적인 버튼/아이콘 액션에 사용.'
+    },
+    tap: {
+        summary: 'click 의 alias (legacy 호환). 신규 등록은 click 권장.'
+    },
+    dblclick: {
+        summary: '더블 클릭. 빠른 연속 2회 클릭으로만 발화.'
+    },
+    mouseenter: {
+        summary: '포인터가 컴포넌트 영역에 *진입* 한 순간 1회.',
+        example: 'hover 강조 / tooltip 표시에 사용.'
+    },
+    hover: {
+        summary: 'mouseenter 의 alias (legacy). 신규 등록은 mouseenter 권장.'
+    },
+    mouseleave: {
+        summary: '포인터가 컴포넌트 영역을 *이탈* 한 순간 1회.',
+        example: 'mouseenter 와 짝지어 강조 해제에 사용.'
+    },
+    longpress: {
+        summary: '약 500ms 이상 누름. 클릭과 별개로 발화.'
+    },
+    mousedown: {
+        summary: '버튼 누름 시작 시점. mouseup 과 짝지어 pressed 패턴 가능.'
+    },
+    mouseup: {
+        summary: '버튼 누름 해제 시점.'
+    },
+    pressed: {
+        summary: 'mousedown ↔ mouseup 페어 자동 매핑 (legacy 호환).'
+    }
+};
+const ACTION_DESC = {
+    '': {
+        summary: '액션이 선택되지 않음. 핸들러는 등록되지만 아무 동작도 하지 않는다.'
+    },
+    script: {
+        summary: '자유 JavaScript 코드. component / scene / event / targets / value 를 변수로 받아 임의 동작을 수행.',
+        example: 'await 사용 가능 — 비동기 동작도 그대로 작성.'
+    },
+    'data-toggle': {
+        summary: 'target 컴포넌트의 data 값을 truthy ↔ falsy 로 토글.',
+        example: 'value 필드는 무시. target 미설정 시 자기 자신.'
+    },
+    'data-tristate': {
+        summary: 'target 의 data 값을 0 → 1 → 2 → 0 순환.',
+        example: '세 상태 토글 (off / on / mixed 같은) 용.'
+    },
+    'data-spreading': {
+        summary: 'target 들에 value 를 분배 (배열 또는 매핑).',
+        example: 'value 가 배열이면 target N개에 각각 매칭.'
+    },
+    'data-set': {
+        summary: 'target 의 data 를 value 로 설정. value 는 정적 값 또는 accessor.',
+        example: '예) value=1 / value=accessor.someField'
+    },
+    'partial-data-set': {
+        summary: 'target.data 가 객체일 때, value 의 키들만 partial merge.',
+        example: 'value 는 객체 또는 객체를 가리키는 accessor.'
+    },
+    'value-set': {
+        summary: 'target 의 value 속성을 value 로 설정.',
+        example: 'data 가 아니라 value 속성을 다루는 컴포넌트용.'
+    },
+    'partial-value-set': {
+        summary: 'target.value 가 객체일 때, partial merge.'
+    },
+    'info-window': {
+        summary: 'target 의 info-window (팝업) 를 띄움.',
+        example: 'target 컴포넌트의 popup 정보가 미리 정의되어 있어야 함.'
+    },
+    emphasize: {
+        summary: 'target 을 시각적으로 강조 (애니메이션).',
+        example: 'mouseenter / mouseleave 와 짝지어 emphasize/restore 패턴 자주 사용.'
+    }
+};
+const SCRIPT_VARS = [
+    { name: 'component', desc: '핸들러가 등록된 현재 컴포넌트.' },
+    { name: 'scene', desc: '루트 scene. scene.root 로 다른 컴포넌트 검색.' },
+    { name: 'event', desc: '원본 DOM 이벤트 (또는 합성 이벤트) 객체.' },
+    { name: 'targets', desc: 'target selector 로 찾은 컴포넌트 배열. target 비면 빈 배열.' },
+    { name: 'value', desc: '핸들러의 value 필드 (정적 또는 accessor).' }
+];
+const SNIPPETS = [
+    {
+        label: 'console.log',
+        code: `console.log('event handler', { component, event })`
+    },
+    {
+        label: 'data 토글',
+        code: `component.data = !component.data`
+    },
+    {
+        label: 'targets 에 값 세팅',
+        code: `targets.forEach(t => { t.data = value })`
+    },
+    {
+        label: 'findById 로 특정 컴포넌트 변경',
+        code: `// '#someId' 는 대상 컴포넌트의 id 로 바꿔 쓴다.
+const target = scene.root.findAll('#someId', component)[0]
+if (target) {
+  target.data = component.data
+}`
+    },
+    {
+        label: 'async fetch + data 반영',
+        code: `const res = await fetch('/api/something')
+const json = await res.json()
+component.data = json`
+    }
+];
+export class EventHandlersHelp extends LitElement {
+    render() {
+        var _a;
+        const h = this.handler || { trigger: 'click', action: '' };
+        const trigDesc = TRIGGER_DESC[h.trigger] || { summary: '(unknown trigger)' };
+        const actDesc = ACTION_DESC[(_a = h.action) !== null && _a !== void 0 ? _a : ''] || { summary: '(unknown action)' };
+        const isScript = h.action === 'script';
+        return html `
+      <section>
+        <h4>Trigger</h4>
+        <div class="name">${h.trigger}</div>
+        <p class="summary">${trigDesc.summary}</p>
+        ${trigDesc.example ? html `<div class="example">${trigDesc.example}</div>` : ''}
+      </section>
+
+      <section>
+        <h4>Action</h4>
+        <div class="name">${h.action || '(none)'}</div>
+        <p class="summary">${actDesc.summary}</p>
+        ${actDesc.example ? html `<div class="example">${actDesc.example}</div>` : ''}
+      </section>
+
+      ${isScript ? this._renderScriptHelp() : this._renderDeclarativeHelp()}
+    `;
+    }
+    _renderDeclarativeHelp() {
+        return html `
+      <section>
+        <h4>Target selector</h4>
+        <div class="selector-grid">
+          <code>#id</code><span>id 일치</span>
+          <code>.class</code><span>class 일치 (공백 구분 다중)</span>
+          <code>&lt;타입&gt;</code><span>type 일치 (예: rect, button)</span>
+          <code>(self)</code><span>현재 컴포넌트 자기 자신</span>
+          <code>(all)</code><span>모든 컴포넌트</span>
+          <code>(root)</code><span>루트 컴포넌트</span>
+          <code>(parent)</code><span>부모</span>
+          <code>(children)</code><span>직접 자식들</span>
+          <code>(siblings)</code><span>형제들 (자기 제외)</span>
+        </div>
+        <div class="example" style="margin-top:6px">
+          비워두면 매칭 없음 — 자기 자신을 대상으로 하려면 <code style="background:transparent;padding:0">(self)</code>.
+        </div>
+      </section>
+
+      <section>
+        <h4>Value</h4>
+        <p class="summary">정적 값 또는 accessor 표현식. accessor 인 경우 component.access(value) 로 평가되어 컴포넌트 컨텍스트의 데이터를 참조한다.</p>
+      </section>
+    `;
+    }
+    _renderScriptHelp() {
+        return html `
+      <section>
+        <h4>Script 변수</h4>
+        <ul class="vars">
+          ${SCRIPT_VARS.map(v => html `
+              <li><code>${v.name}</code>${v.desc}</li>
+            `)}
+        </ul>
+        <div class="example" style="margin-top:8px">
+          <code style="background:transparent;padding:0">await</code> 키워드 사용 시 스크립트는 비동기로 실행. 결과 wait 후 다음 핸들러가 영향 받지는 않는다 (각 핸들러는 독립 실행).
+        </div>
+      </section>
+
+      <section>
+        <h4>Snippet 삽입</h4>
+        <div class="snippet-list">
+          ${SNIPPETS.map(s => html `
+              <button
+                type="button"
+                class="snippet-btn"
+                @click=${() => this._emitSnippet(s.code)}
+                title="현재 스크립트 영역에 삽입 (덮어쓰지 않고 끝에 추가)"
+              >
+                <span>${s.label}</span>
+                <md-icon>add</md-icon>
+              </button>
+            `)}
+        </div>
+      </section>
+    `;
+    }
+    _emitSnippet(code) {
+        this.dispatchEvent(new CustomEvent('insert-snippet', {
+            bubbles: true,
+            composed: true,
+            detail: { code }
+        }));
+    }
+}
+EventHandlersHelp.styles = [
+    ScrollbarStyles,
+    css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+        background: var(--md-sys-color-surface-container-lowest, #fffbfe);
+        border-left: 1px solid var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.12));
+        padding: 16px 18px;
+        overflow-y: auto;
+        font-family: 'Roboto', Arial, sans-serif;
+        font-size: 12.5px;
+        color: var(--md-sys-color-on-surface, #1c1b1f);
+        line-height: 1.5;
+        min-width: 0;
+      }
+
+      h4 {
+        margin: 0 0 6px 0;
+        font-size: 11px;
+        font-weight: 700;
+        letter-spacing: 0.5px;
+        text-transform: uppercase;
+        color: var(--md-sys-color-on-surface-variant, #49454f);
+      }
+
+      section {
+        margin-bottom: 18px;
+      }
+
+      .name {
+        display: inline-block;
+        padding: 2px 6px;
+        margin-bottom: 6px;
+        background: var(--md-sys-color-secondary-container, #e8def8);
+        color: var(--md-sys-color-on-secondary-container, #1d192b);
+        border-radius: 4px;
+        font-weight: 600;
+        font-size: 11.5px;
+      }
+
+      .summary {
+        margin: 0 0 6px 0;
+      }
+
+      .example {
+        margin: 4px 0 0 0;
+        padding: 6px 8px;
+        background: rgba(0, 0, 0, 0.04);
+        border-left: 2px solid var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.2));
+        font-size: 11.5px;
+        color: var(--md-sys-color-on-surface-variant, #49454f);
+      }
+
+      ul.vars {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+      }
+
+      ul.vars li {
+        padding: 4px 0;
+        border-bottom: 1px dashed var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.08));
+      }
+
+      ul.vars li:last-child {
+        border-bottom: none;
+      }
+
+      ul.vars code {
+        display: inline-block;
+        padding: 1px 5px;
+        margin-right: 6px;
+        background: var(--md-sys-color-surface-container-high, #ede7f6);
+        border-radius: 3px;
+        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+        font-size: 11px;
+        color: var(--md-sys-color-on-surface, #1c1b1f);
+      }
+
+      .snippet-list {
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+      }
+
+      .snippet-btn {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 6px;
+        padding: 6px 10px;
+        border: 1px solid var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.18));
+        border-radius: 4px;
+        background: var(--md-sys-color-surface, #fff);
+        color: var(--md-sys-color-on-surface, #1c1b1f);
+        font-size: 12px;
+        cursor: pointer;
+        text-align: left;
+      }
+
+      .snippet-btn:hover {
+        background: var(--md-sys-color-surface-container-low, #f7f2fa);
+      }
+
+      .snippet-btn md-icon {
+        --md-icon-size: 16px;
+        opacity: 0.7;
+      }
+
+      .selector-grid {
+        display: grid;
+        grid-template-columns: max-content 1fr;
+        column-gap: 10px;
+        row-gap: 4px;
+        font-size: 11.5px;
+      }
+
+      .selector-grid code {
+        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+        background: var(--md-sys-color-surface-container-high, #ede7f6);
+        padding: 1px 5px;
+        border-radius: 3px;
+      }
+    `
+];
+__decorate([
+    property({ type: Object })
+], EventHandlersHelp.prototype, "handler", void 0);
+customElements.define('event-handlers-help', EventHandlersHelp);
+//# sourceMappingURL=event-handlers-help.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"event-handlers-help.js","sourceRoot":"","sources":["../../../../src/property-panel/event-handlers/event-handlers-help.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;;AAEH,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE5C,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAMjD,MAAM,YAAY,GAA8B;IAC9C,KAAK,EAAE;QACL,OAAO,EAAE,4BAA4B;QACrC,OAAO,EAAE,wBAAwB;KAClC;IACD,GAAG,EAAE;QACH,OAAO,EAAE,6CAA6C;KACvD;IACD,QAAQ,EAAE;QACR,OAAO,EAAE,2BAA2B;KACrC;IACD,UAAU,EAAE;QACV,OAAO,EAAE,6BAA6B;QACtC,OAAO,EAAE,4BAA4B;KACtC;IACD,KAAK,EAAE;QACL,OAAO,EAAE,oDAAoD;KAC9D;IACD,UAAU,EAAE;QACV,OAAO,EAAE,6BAA6B;QACtC,OAAO,EAAE,6BAA6B;KACvC;IACD,SAAS,EAAE;QACT,OAAO,EAAE,4BAA4B;KACtC;IACD,SAAS,EAAE;QACT,OAAO,EAAE,2CAA2C;KACrD;IACD,OAAO,EAAE;QACP,OAAO,EAAE,cAAc;KACxB;IACD,OAAO,EAAE;QACP,OAAO,EAAE,2CAA2C;KACrD;CACF,CAAA;AAED,MAAM,WAAW,GAA8B;IAC7C,EAAE,EAAE;QACF,OAAO,EAAE,wCAAwC;KAClD;IACD,MAAM,EAAE;QACN,OAAO,EAAE,mFAAmF;QAC5F,OAAO,EAAE,+BAA+B;KACzC;IACD,aAAa,EAAE;QACb,OAAO,EAAE,2CAA2C;QACpD,OAAO,EAAE,mCAAmC;KAC7C;IACD,eAAe,EAAE;QACf,OAAO,EAAE,oCAAoC;QAC7C,OAAO,EAAE,kCAAkC;KAC5C;IACD,gBAAgB,EAAE;QAChB,OAAO,EAAE,kCAAkC;QAC3C,OAAO,EAAE,gCAAgC;KAC1C;IACD,UAAU,EAAE;QACV,OAAO,EAAE,uDAAuD;QAChE,OAAO,EAAE,uCAAuC;KACjD;IACD,kBAAkB,EAAE;QAClB,OAAO,EAAE,iDAAiD;QAC1D,OAAO,EAAE,kCAAkC;KAC5C;IACD,WAAW,EAAE;QACX,OAAO,EAAE,gCAAgC;QACzC,OAAO,EAAE,iCAAiC;KAC3C;IACD,mBAAmB,EAAE;QACnB,OAAO,EAAE,sCAAsC;KAChD;IACD,aAAa,EAAE;QACb,OAAO,EAAE,iCAAiC;QAC1C,OAAO,EAAE,uCAAuC;KACjD;IACD,SAAS,EAAE;QACT,OAAO,EAAE,4BAA4B;QACrC,OAAO,EAAE,2DAA2D;KACrE;CACF,CAAA;AAED,MAAM,WAAW,GAAG;IAClB,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,mBAAmB,EAAE;IAChD,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,oCAAoC,EAAE;IAC7D,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,4BAA4B,EAAE;IACrD,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,+CAA+C,EAAE;IAC1E,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,iCAAiC,EAAE;CAC3D,CAAA;AAED,MAAM,QAAQ,GAAsC;IAClD;QACE,KAAK,EAAE,aAAa;QACpB,IAAI,EAAE,oDAAoD;KAC3D;IACD;QACE,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,kCAAkC;KACzC;IACD;QACE,KAAK,EAAE,gBAAgB;QACvB,IAAI,EAAE,0CAA0C;KACjD;IACD;QACE,KAAK,EAAE,uBAAuB;QAC9B,IAAI,EAAE;;;;EAIR;KACC;IACD;QACE,KAAK,EAAE,uBAAuB;QAC9B,IAAI,EAAE;;sBAEY;KACnB;CACF,CAAA;AAED,MAAM,OAAO,iBAAkB,SAAQ,UAAU;IAqI/C,MAAM;;QACJ,MAAM,CAAC,GAAG,IAAI,CAAC,OAAO,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,EAAE,CAAA;QAC1D,MAAM,QAAQ,GAAG,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,EAAE,OAAO,EAAE,mBAAmB,EAAE,CAAA;QAC5E,MAAM,OAAO,GAAG,WAAW,CAAC,MAAA,CAAC,CAAC,MAAM,mCAAI,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,kBAAkB,EAAE,CAAA;QAC9E,MAAM,QAAQ,GAAG,CAAC,CAAC,MAAM,KAAK,QAAQ,CAAA;QAEtC,OAAO,IAAI,CAAA;;;4BAGa,CAAC,CAAC,OAAO;6BACR,QAAQ,CAAC,OAAO;UACnC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAA,wBAAwB,QAAQ,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,EAAE;;;;;4BAK1D,CAAC,CAAC,MAAM,IAAI,QAAQ;6BACnB,OAAO,CAAC,OAAO;UAClC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAA,wBAAwB,OAAO,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,EAAE;;;QAG5E,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,sBAAsB,EAAE;KACtE,CAAA;IACH,CAAC;IAEO,sBAAsB;QAC5B,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;KAuBV,CAAA;IACH,CAAC;IAEO,iBAAiB;QACvB,OAAO,IAAI,CAAA;;;;YAIH,WAAW,CAAC,GAAG,CACf,CAAC,CAAC,EAAE,CAAC,IAAI,CAAA;0BACK,CAAC,CAAC,IAAI,UAAU,CAAC,CAAC,IAAI;aACnC,CACF;;;;;;;;;;YAUC,QAAQ,CAAC,GAAG,CACZ,CAAC,CAAC,EAAE,CAAC,IAAI,CAAA;;;;yBAII,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC;;;wBAGhC,CAAC,CAAC,KAAK;;;aAGlB,CACF;;;KAGN,CAAA;IACH,CAAC;IAEO,YAAY,CAAC,IAAY;QAC/B,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,gBAAgB,EAAE;YAChC,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE,EAAE,IAAI,EAAE;SACjB,CAAC,CACH,CAAA;IACH,CAAC;;AArOM,wBAAM,GAAG;IACd,eAAe;IACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6HF;CACF,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAA2B;AAsGxD,cAAc,CAAC,MAAM,CAAC,qBAAqB,EAAE,iBAAiB,CAAC,CAAA","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n *\n * EventHandlers help pane — popup 의 우측 docs 컬럼.\n *\n * 현재 선택된 handler 의 trigger / action / target / value (또는 script vars)\n * 의미를 *동적으로* 안내. script 모드에서는 자주 쓰는 코드 snippet 을\n * 삽입할 수 있는 버튼도 제공.\n *\n * 다국어 — 1차안은 한국어 hard-code (5 언어 동시 유지 부담 회피).\n * 추후 안정화 후 i18n 키로 분리.\n */\n\nimport '@material/web/icon/icon.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport type { EventHandlerSpec } from './event-handlers-mapper.js'\n\ntype DescEntry = { summary: string; example?: string }\n\nconst TRIGGER_DESC: Record<string, DescEntry> = {\n  click: {\n    summary: '마우스 클릭 (터치 환경에선 tap 과 동일).',\n    example: '가장 일반적인 버튼/아이콘 액션에 사용.'\n  },\n  tap: {\n    summary: 'click 의 alias (legacy 호환). 신규 등록은 click 권장.'\n  },\n  dblclick: {\n    summary: '더블 클릭. 빠른 연속 2회 클릭으로만 발화.'\n  },\n  mouseenter: {\n    summary: '포인터가 컴포넌트 영역에 *진입* 한 순간 1회.',\n    example: 'hover 강조 / tooltip 표시에 사용.'\n  },\n  hover: {\n    summary: 'mouseenter 의 alias (legacy). 신규 등록은 mouseenter 권장.'\n  },\n  mouseleave: {\n    summary: '포인터가 컴포넌트 영역을 *이탈* 한 순간 1회.',\n    example: 'mouseenter 와 짝지어 강조 해제에 사용.'\n  },\n  longpress: {\n    summary: '약 500ms 이상 누름. 클릭과 별개로 발화.'\n  },\n  mousedown: {\n    summary: '버튼 누름 시작 시점. mouseup 과 짝지어 pressed 패턴 가능.'\n  },\n  mouseup: {\n    summary: '버튼 누름 해제 시점.'\n  },\n  pressed: {\n    summary: 'mousedown ↔ mouseup 페어 자동 매핑 (legacy 호환).'\n  }\n}\n\nconst ACTION_DESC: Record<string, DescEntry> = {\n  '': {\n    summary: '액션이 선택되지 않음. 핸들러는 등록되지만 아무 동작도 하지 않는다.'\n  },\n  script: {\n    summary: '자유 JavaScript 코드. component / scene / event / targets / value 를 변수로 받아 임의 동작을 수행.',\n    example: 'await 사용 가능 — 비동기 동작도 그대로 작성.'\n  },\n  'data-toggle': {\n    summary: 'target 컴포넌트의 data 값을 truthy ↔ falsy 로 토글.',\n    example: 'value 필드는 무시. target 미설정 시 자기 자신.'\n  },\n  'data-tristate': {\n    summary: 'target 의 data 값을 0 → 1 → 2 → 0 순환.',\n    example: '세 상태 토글 (off / on / mixed 같은) 용.'\n  },\n  'data-spreading': {\n    summary: 'target 들에 value 를 분배 (배열 또는 매핑).',\n    example: 'value 가 배열이면 target N개에 각각 매칭.'\n  },\n  'data-set': {\n    summary: 'target 의 data 를 value 로 설정. value 는 정적 값 또는 accessor.',\n    example: '예) value=1 / value=accessor.someField'\n  },\n  'partial-data-set': {\n    summary: 'target.data 가 객체일 때, value 의 키들만 partial merge.',\n    example: 'value 는 객체 또는 객체를 가리키는 accessor.'\n  },\n  'value-set': {\n    summary: 'target 의 value 속성을 value 로 설정.',\n    example: 'data 가 아니라 value 속성을 다루는 컴포넌트용.'\n  },\n  'partial-value-set': {\n    summary: 'target.value 가 객체일 때, partial merge.'\n  },\n  'info-window': {\n    summary: 'target 의 info-window (팝업) 를 띄움.',\n    example: 'target 컴포넌트의 popup 정보가 미리 정의되어 있어야 함.'\n  },\n  emphasize: {\n    summary: 'target 을 시각적으로 강조 (애니메이션).',\n    example: 'mouseenter / mouseleave 와 짝지어 emphasize/restore 패턴 자주 사용.'\n  }\n}\n\nconst SCRIPT_VARS = [\n  { name: 'component', desc: '핸들러가 등록된 현재 컴포넌트.' },\n  { name: 'scene', desc: '루트 scene. scene.root 로 다른 컴포넌트 검색.' },\n  { name: 'event', desc: '원본 DOM 이벤트 (또는 합성 이벤트) 객체.' },\n  { name: 'targets', desc: 'target selector 로 찾은 컴포넌트 배열. target 비면 빈 배열.' },\n  { name: 'value', desc: '핸들러의 value 필드 (정적 또는 accessor).' }\n]\n\nconst SNIPPETS: { label: string; code: string }[] = [\n  {\n    label: 'console.log',\n    code: `console.log('event handler', { component, event })`\n  },\n  {\n    label: 'data 토글',\n    code: `component.data = !component.data`\n  },\n  {\n    label: 'targets 에 값 세팅',\n    code: `targets.forEach(t => { t.data = value })`\n  },\n  {\n    label: 'findById 로 특정 컴포넌트 변경',\n    code: `// '#someId' 는 대상 컴포넌트의 id 로 바꿔 쓴다.\nconst target = scene.root.findAll('#someId', component)[0]\nif (target) {\n  target.data = component.data\n}`\n  },\n  {\n    label: 'async fetch + data 반영',\n    code: `const res = await fetch('/api/something')\nconst json = await res.json()\ncomponent.data = json`\n  }\n]\n\nexport class EventHandlersHelp extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        width: 100%;\n        height: 100%;\n        box-sizing: border-box;\n        background: var(--md-sys-color-surface-container-lowest, #fffbfe);\n        border-left: 1px solid var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.12));\n        padding: 16px 18px;\n        overflow-y: auto;\n        font-family: 'Roboto', Arial, sans-serif;\n        font-size: 12.5px;\n        color: var(--md-sys-color-on-surface, #1c1b1f);\n        line-height: 1.5;\n        min-width: 0;\n      }\n\n      h4 {\n        margin: 0 0 6px 0;\n        font-size: 11px;\n        font-weight: 700;\n        letter-spacing: 0.5px;\n        text-transform: uppercase;\n        color: var(--md-sys-color-on-surface-variant, #49454f);\n      }\n\n      section {\n        margin-bottom: 18px;\n      }\n\n      .name {\n        display: inline-block;\n        padding: 2px 6px;\n        margin-bottom: 6px;\n        background: var(--md-sys-color-secondary-container, #e8def8);\n        color: var(--md-sys-color-on-secondary-container, #1d192b);\n        border-radius: 4px;\n        font-weight: 600;\n        font-size: 11.5px;\n      }\n\n      .summary {\n        margin: 0 0 6px 0;\n      }\n\n      .example {\n        margin: 4px 0 0 0;\n        padding: 6px 8px;\n        background: rgba(0, 0, 0, 0.04);\n        border-left: 2px solid var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.2));\n        font-size: 11.5px;\n        color: var(--md-sys-color-on-surface-variant, #49454f);\n      }\n\n      ul.vars {\n        list-style: none;\n        margin: 0;\n        padding: 0;\n      }\n\n      ul.vars li {\n        padding: 4px 0;\n        border-bottom: 1px dashed var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.08));\n      }\n\n      ul.vars li:last-child {\n        border-bottom: none;\n      }\n\n      ul.vars code {\n        display: inline-block;\n        padding: 1px 5px;\n        margin-right: 6px;\n        background: var(--md-sys-color-surface-container-high, #ede7f6);\n        border-radius: 3px;\n        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n        font-size: 11px;\n        color: var(--md-sys-color-on-surface, #1c1b1f);\n      }\n\n      .snippet-list {\n        display: flex;\n        flex-direction: column;\n        gap: 6px;\n      }\n\n      .snippet-btn {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        gap: 6px;\n        padding: 6px 10px;\n        border: 1px solid var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.18));\n        border-radius: 4px;\n        background: var(--md-sys-color-surface, #fff);\n        color: var(--md-sys-color-on-surface, #1c1b1f);\n        font-size: 12px;\n        cursor: pointer;\n        text-align: left;\n      }\n\n      .snippet-btn:hover {\n        background: var(--md-sys-color-surface-container-low, #f7f2fa);\n      }\n\n      .snippet-btn md-icon {\n        --md-icon-size: 16px;\n        opacity: 0.7;\n      }\n\n      .selector-grid {\n        display: grid;\n        grid-template-columns: max-content 1fr;\n        column-gap: 10px;\n        row-gap: 4px;\n        font-size: 11.5px;\n      }\n\n      .selector-grid code {\n        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n        background: var(--md-sys-color-surface-container-high, #ede7f6);\n        padding: 1px 5px;\n        border-radius: 3px;\n      }\n    `\n  ]\n\n  @property({ type: Object }) handler?: EventHandlerSpec\n\n  render() {\n    const h = this.handler || { trigger: 'click', action: '' }\n    const trigDesc = TRIGGER_DESC[h.trigger] || { summary: '(unknown trigger)' }\n    const actDesc = ACTION_DESC[h.action ?? ''] || { summary: '(unknown action)' }\n    const isScript = h.action === 'script'\n\n    return html`\n      <section>\n        <h4>Trigger</h4>\n        <div class=\"name\">${h.trigger}</div>\n        <p class=\"summary\">${trigDesc.summary}</p>\n        ${trigDesc.example ? html`<div class=\"example\">${trigDesc.example}</div>` : ''}\n      </section>\n\n      <section>\n        <h4>Action</h4>\n        <div class=\"name\">${h.action || '(none)'}</div>\n        <p class=\"summary\">${actDesc.summary}</p>\n        ${actDesc.example ? html`<div class=\"example\">${actDesc.example}</div>` : ''}\n      </section>\n\n      ${isScript ? this._renderScriptHelp() : this._renderDeclarativeHelp()}\n    `\n  }\n\n  private _renderDeclarativeHelp() {\n    return html`\n      <section>\n        <h4>Target selector</h4>\n        <div class=\"selector-grid\">\n          <code>#id</code><span>id 일치</span>\n          <code>.class</code><span>class 일치 (공백 구분 다중)</span>\n          <code>&lt;타입&gt;</code><span>type 일치 (예: rect, button)</span>\n          <code>(self)</code><span>현재 컴포넌트 자기 자신</span>\n          <code>(all)</code><span>모든 컴포넌트</span>\n          <code>(root)</code><span>루트 컴포넌트</span>\n          <code>(parent)</code><span>부모</span>\n          <code>(children)</code><span>직접 자식들</span>\n          <code>(siblings)</code><span>형제들 (자기 제외)</span>\n        </div>\n        <div class=\"example\" style=\"margin-top:6px\">\n          비워두면 매칭 없음 — 자기 자신을 대상으로 하려면 <code style=\"background:transparent;padding:0\">(self)</code>.\n        </div>\n      </section>\n\n      <section>\n        <h4>Value</h4>\n        <p class=\"summary\">정적 값 또는 accessor 표현식. accessor 인 경우 component.access(value) 로 평가되어 컴포넌트 컨텍스트의 데이터를 참조한다.</p>\n      </section>\n    `\n  }\n\n  private _renderScriptHelp() {\n    return html`\n      <section>\n        <h4>Script 변수</h4>\n        <ul class=\"vars\">\n          ${SCRIPT_VARS.map(\n            v => html`\n              <li><code>${v.name}</code>${v.desc}</li>\n            `\n          )}\n        </ul>\n        <div class=\"example\" style=\"margin-top:8px\">\n          <code style=\"background:transparent;padding:0\">await</code> 키워드 사용 시 스크립트는 비동기로 실행. 결과 wait 후 다음 핸들러가 영향 받지는 않는다 (각 핸들러는 독립 실행).\n        </div>\n      </section>\n\n      <section>\n        <h4>Snippet 삽입</h4>\n        <div class=\"snippet-list\">\n          ${SNIPPETS.map(\n            s => html`\n              <button\n                type=\"button\"\n                class=\"snippet-btn\"\n                @click=${() => this._emitSnippet(s.code)}\n                title=\"현재 스크립트 영역에 삽입 (덮어쓰지 않고 끝에 추가)\"\n              >\n                <span>${s.label}</span>\n                <md-icon>add</md-icon>\n              </button>\n            `\n          )}\n        </div>\n      </section>\n    `\n  }\n\n  private _emitSnippet(code: string) {\n    this.dispatchEvent(\n      new CustomEvent('insert-snippet', {\n        bubbles: true,\n        composed: true,\n        detail: { code }\n      })\n    )\n  }\n}\n\ncustomElements.define('event-handlers-help', EventHandlersHelp)\n"]}

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

@@ -75,11 +75,19 @@ export class EventHandlersMapper extends LitElement {
           @change=${(e) => this._update('target', e.target.value)}
         />
       </div>
-      <div>
-        <label style="display:block;margin-bottom:4px">
+      <div class="row">
+        <label><ox-i18n msgid="label.value">Value</ox-i18n></label>
+        <input type="text"
+          placeholder="optional · script 안 value 변수로 전달"
+          .value=${h.value !== undefined ? String(h.value) : ''}
+          @change=${(e) => this._update('value', e.target.value)}
+        />
+      </div>
+      <div script-field>
+        <div class="script-header">
           <ox-i18n msgid="label.script">Script</ox-i18n>
-          &nbsp;<small style="opacity:0.7">vars: component, scene, event, targets, value · await 지원</small>
-        </label>
+          <small>vars: component, scene, event, targets, value · await 지원</small>
+        </div>
         <ox-input-code
           mode="javascript"
           .value=${h.code || ''}
@@ -129,11 +137,52 @@ EventHandlersMapper.styles = [
         display: flex;
         flex-direction: column;
         gap: 6px;
-        padding: 7px;
-        border: 1px solid rgba(0, 0, 0, 0.2);
-        border-width: 0 1px 1px 1px;
+        padding: 10px 10px 10px 10px;
+        /* 카드 외곽 — tabs (위) + toolbar (중간) + mapper (아래) 가 하나의 카드.
+         * 위쪽 1px 는 toolbar 와의 internal divider. radius 6px 으로 통일. */
+        border: 1px solid rgba(0, 0, 0, 0.18);
+        border-radius: 0 0 6px 6px;
+        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
         line-height: 2;
         background: var(--md-sys-color-surface, #fff);
+        min-width: 0;
+        width: 100%;
+        box-sizing: border-box;
+        overflow: hidden;
+        flex: 1;
+        min-height: 0;
+      }
+
+      [script-field] {
+        display: flex;
+        flex-direction: column;
+        min-height: 0;
+        flex: 1;
+        margin-top: 6px;
+        padding-top: 10px;
+        /* trigger/action/target/value 입력 묶음과 code editor 사이의 구분선.
+         * dashed 대신 solid + 옅은 opacity 로 modern. */
+        border-top: 1px solid rgba(0, 0, 0, 0.08);
+      }
+
+      [script-field] > .script-header {
+        display: flex;
+        align-items: baseline;
+        gap: 8px;
+        margin-bottom: 6px;
+        font-size: 10.5px;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: 0.6px;
+        color: var(--md-sys-color-on-surface-variant, #49454f);
+      }
+
+      [script-field] > .script-header small {
+        font-weight: 400;
+        text-transform: none;
+        letter-spacing: 0;
+        opacity: 0.65;
+        font-size: 10.5px;
       }
 
       .row {
@@ -141,11 +190,13 @@ EventHandlersMapper.styles = [
         grid-template-columns: 80px 1fr;
         gap: 6px;
         align-items: center;
+        min-width: 0;
       }
 
       .row > select,
       .row > input[type='text'] {
         width: 100%;
+        min-width: 0;
         box-sizing: border-box;
         padding: 3px 6px;
         font-size: 13px;
@@ -155,9 +206,20 @@ EventHandlersMapper.styles = [
       }
 
       ox-input-code {
+        /* display 는 *지정하지 않는다* — outside selector 가 ox-input-code 의
+         * :host { display: flex; flex-direction: column } 를 덮어쓰면, 그 안의
+         * .cm-editor { flex: 1 } 가 작동을 멈춰 텍스트 라인 1개 크기로 축소된다. */
+        width: 100%;
+        max-width: 100%;
+        min-width: 0;
+        box-sizing: border-box;
+        overflow: hidden;
         min-height: 180px;
         border: 1px solid rgba(0, 0, 0, 0.15);
         border-radius: 4px;
+        /* popup 모드에서 script-field 의 남은 세로 공간을 모두 차지 — 아래 빈공간 X.
+         * inline 모드에서는 script-field 가 grow 하지 않으므로 min-height 180px 만 사용. */
+        flex: 1;
       }
 
       label {

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

@@ -1 +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: 7px;\n        border: 1px solid rgba(0, 0, 0, 0.2);\n        border-width: 0 1px 1px 1px;\n        line-height: 2;\n        background: var(--md-sys-color-surface, #fff);\n      }\n\n      .row {\n        display: grid;\n        grid-template-columns: 80px 1fr;\n        gap: 6px;\n        align-items: center;\n      }\n\n      .row > select,\n      .row > input[type='text'] {\n        width: 100%;\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        min-height: 180px;\n        border: 1px solid rgba(0, 0, 0, 0.15);\n        border-radius: 4px;\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>\n        <label style=\"display:block;margin-bottom:4px\">\n          <ox-i18n msgid=\"label.script\">Script</ox-i18n>\n          &nbsp;<small style=\"opacity:0.7\">vars: component, scene, event, targets, value · await 지원</small>\n        </label>\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"]}
+{"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"]}