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

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":"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","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.d.ts

@@ -0,0 +1,31 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ *
+ * Single EventHandler editor — trigger / action / (code 또는 target+value).
+ *
+ * 'script' 도 action 의 한 값. action='script' 시 code 필드를, 다른 declarative
+ * action 시 target+value 필드를 노출. action 미선택 (= '') 시 no-op.
+ */
+import '@operato/input/ox-input-code.js';
+import '@operato/i18n/ox-i18n.js';
+import { LitElement } from 'lit';
+import type { Scene } from '@hatiolab/things-scene';
+/** EventHandler model — things-scene 의 EventHandler interface 와 호환. */
+export type EventHandlerSpec = {
+    trigger: string;
+    action?: string;
+    code?: string;
+    target?: string;
+    value?: any;
+    options?: Record<string, any>;
+    disabled?: boolean;
+};
+export declare class EventHandlersMapper extends LitElement {
+    static styles: import("lit").CSSResult[];
+    handler: EventHandlerSpec;
+    scene?: Scene;
+    render(): import("lit-html").TemplateResult<1>;
+    private _renderScriptFields;
+    private _renderActionFields;
+    private _update;
+}

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

@@ -0,0 +1,238 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ *
+ * Single EventHandler editor — trigger / action / (code 또는 target+value).
+ *
+ * 'script' 도 action 의 한 값. action='script' 시 code 필드를, 다른 declarative
+ * action 시 target+value 필드를 노출. action 미선택 (= '') 시 no-op.
+ */
+import { __decorate } from "tslib";
+import '@operato/input/ox-input-code.js';
+import '@operato/i18n/ox-i18n.js';
+import { css, html, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+const TRIGGERS = [
+    'click', 'dblclick',
+    'mouseenter', 'mouseleave',
+    'longpress',
+    'mousedown', 'mouseup'
+];
+/** 'script' 는 action 의 한 값. */
+const ACTIONS = [
+    '',
+    'script',
+    'data-toggle',
+    'data-tristate',
+    'data-spreading',
+    'data-set',
+    'partial-data-set',
+    'value-set',
+    'partial-value-set',
+    'info-window',
+    'emphasize'
+];
+export class EventHandlersMapper extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.handler = { trigger: 'click', action: '' };
+    }
+    render() {
+        var _a;
+        const h = this.handler || { trigger: 'click', action: '' };
+        return html `
+      <div class="row">
+        <label><ox-i18n msgid="label.trigger">Trigger</ox-i18n></label>
+        <select
+          .value=${h.trigger || 'click'}
+          @change=${(e) => this._update('trigger', e.target.value)}
+        >
+          ${TRIGGERS.map(t => html `<option value=${t} ?selected=${h.trigger === t}>${t}</option>`)}
+        </select>
+      </div>
+
+      <div class="row">
+        <label><ox-i18n msgid="label.action">Action</ox-i18n></label>
+        <select
+          .value=${(_a = h.action) !== null && _a !== void 0 ? _a : ''}
+          @change=${(e) => this._update('action', e.target.value)}
+        >
+          ${ACTIONS.map(a => { var _a; return html `<option value=${a} ?selected=${((_a = h.action) !== null && _a !== void 0 ? _a : '') === a}>${a || '(none)'}</option>`; })}
+        </select>
+      </div>
+
+      ${h.action === 'script'
+            ? this._renderScriptFields(h)
+            : (h.action ? this._renderActionFields(h) : null)}
+    `;
+    }
+    _renderScriptFields(h) {
+        return html `
+      <div class="row">
+        <label><ox-i18n msgid="label.target">Target</ox-i18n></label>
+        <input type="text"
+          placeholder="optional selector (#id, .class, ...)"
+          .value=${h.target || ''}
+          @change=${(e) => this._update('target', e.target.value)}
+        />
+      </div>
+      <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>
+          <small>vars: component, scene, event, targets, value · await 지원</small>
+        </div>
+        <ox-input-code
+          mode="javascript"
+          .value=${h.code || ''}
+          @change=${(e) => { var _a, _b, _c, _d; return this._update('code', (_d = (_b = (_a = e.detail) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : (_c = e.target) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : ''); }}
+        ></ox-input-code>
+      </div>
+    `;
+    }
+    _renderActionFields(h) {
+        return html `
+      <div class="row">
+        <label><ox-i18n msgid="label.target">Target</ox-i18n></label>
+        <input type="text"
+          placeholder="selector (#id, .class, ...)"
+          .value=${h.target || ''}
+          @change=${(e) => this._update('target', e.target.value)}
+        />
+      </div>
+      <div class="row">
+        <label><ox-i18n msgid="label.value">Value</ox-i18n></label>
+        <input type="text"
+          placeholder="value or accessor"
+          .value=${h.value !== undefined ? String(h.value) : ''}
+          @change=${(e) => this._update('value', e.target.value)}
+        />
+      </div>
+    `;
+    }
+    _update(key, value) {
+        const next = { ...(this.handler || { trigger: 'click', action: '' }), [key]: value };
+        // action 전환 시 비-script 진입은 code 정리. script 진입 시 target/value 는
+        // 의미가 호환 (target=findAll selector, value=script 입력) 이라 유지.
+        if (key === 'action' && value !== 'script') {
+            delete next.code;
+        }
+        this.handler = next;
+        this.dispatchEvent(new CustomEvent('value-change', {
+            bubbles: true,
+            composed: true,
+            detail: { handler: next, changed: { [key]: value } }
+        }));
+    }
+}
+EventHandlersMapper.styles = [
+    css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+        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 {
+        display: grid;
+        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;
+        border-radius: 4px;
+        border: 1px solid rgba(0, 0, 0, 0.15);
+        background: #fff;
+      }
+
+      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 {
+        font-size: 12px;
+        color: var(--md-sys-color-on-surface-variant, #49454f);
+      }
+    `
+];
+__decorate([
+    property({ type: Object })
+], EventHandlersMapper.prototype, "handler", void 0);
+__decorate([
+    property({ type: Object })
+], EventHandlersMapper.prototype, "scene", void 0);
+customElements.define('event-handlers-mapper', EventHandlersMapper);
+//# sourceMappingURL=event-handlers-mapper.js.map