@operato/property-panel 10.0.0-beta.6 → 10.0.0-beta.60

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

@@ -1,22 +1,30 @@
 /**
  * @license Copyright © HatioLab Inc. All rights reserved.
+ *
+ * PropertyEvent — effects tab 안의 이벤트 핸들러 진입점.
+ *
+ * data-binding 패턴 동일 — inline `<property-event-handlers>` (기본 UI: tabs +
+ * mapper + add/delete/copy/paste) 를 host. inline panel 의 우상단 `open_in_new`
+ * 클릭 시 *큰 popup* 으로 펼침.
+ *
+ * 자동 마이그레이션 — things-scene 의 Component constructor 가 legacy
+ * `state.event = { tap, hover, ... }` 를 *load 시점* 에 `state.eventHandlers[]`
+ * 로 변환. UI 는 항상 `eventHandlers` 만 read/write.
+ *
+ * Legacy 컴포넌트 (PropertyEventHover / PropertyEventTap) 파일은 *코드 유지*
+ * (rollback 안전망). UI 진입점만 끊음.
  */
-import '@operato/help/ox-title-with-help.js';
 import { LitElement } from 'lit';
 import { Properties, Scene } from '@hatiolab/things-scene';
-import { PropertyEventHover } from './property-event-hover.js';
-import { PropertyEventTap } from './property-event-tap.js';
+import { PropertyEventHandlers } from '../event-handlers/event-handlers.js';
 declare const PropertyEvent_base: typeof LitElement & import("@open-wc/dedupe-mixin").Constructor<import("@open-wc/scoped-elements/types.js").ScopedElementsHost>;
 export declare class PropertyEvent extends PropertyEvent_base {
     static styles: import("lit").CSSResult[];
     value?: Properties;
     scene?: Scene;
-    firstUpdated(): void;
     static get scopedElements(): {
-        'property-event-hover': typeof PropertyEventHover;
-        'property-event-tap': typeof PropertyEventTap;
+        'property-event-handlers': typeof PropertyEventHandlers;
     };
     render(): import("lit-html").TemplateResult<1>;
-    onValueChange(e: Event): void;
 }
 export {};

package/dist/src/property-panel/effects/property-event.js

@@ -1,58 +1,37 @@
 /**
  * @license Copyright © HatioLab Inc. All rights reserved.
+ *
+ * PropertyEvent — effects tab 안의 이벤트 핸들러 진입점.
+ *
+ * data-binding 패턴 동일 — inline `<property-event-handlers>` (기본 UI: tabs +
+ * mapper + add/delete/copy/paste) 를 host. inline panel 의 우상단 `open_in_new`
+ * 클릭 시 *큰 popup* 으로 펼침.
+ *
+ * 자동 마이그레이션 — things-scene 의 Component constructor 가 legacy
+ * `state.event = { tap, hover, ... }` 를 *load 시점* 에 `state.eventHandlers[]`
+ * 로 변환. UI 는 항상 `eventHandlers` 만 read/write.
+ *
+ * Legacy 컴포넌트 (PropertyEventHover / PropertyEventTap) 파일은 *코드 유지*
+ * (rollback 안전망). UI 진입점만 끊음.
  */
 import { __decorate } from "tslib";
-import '@operato/help/ox-title-with-help.js';
 import { html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 import { ScopedElementsMixin } from '@open-wc/scoped-elements';
 import { PropertyGridStyles } from '@operato/styles/property-grid-styles.js';
-import { PropertyEventHover } from './property-event-hover.js';
-import { PropertyEventTap } from './property-event-tap.js';
-import { convert } from './value-converter.js';
+import { PropertyEventHandlers } from '../event-handlers/event-handlers.js';
 export class PropertyEvent extends ScopedElementsMixin(LitElement) {
-    firstUpdated() {
-        this.renderRoot.addEventListener('change', this.onValueChange.bind(this));
-    }
     static get scopedElements() {
         return {
-            'property-event-hover': PropertyEventHover,
-            'property-event-tap': PropertyEventTap
+            'property-event-handlers': PropertyEventHandlers
         };
     }
     render() {
-        const value = this.value || {};
         return html `
-      <fieldset>
-        <legend>
-          <ox-title-with-help msgid="label.hover-event" topic="board-modeller/effects/hover-event"></ox-title-with-help>
-        </legend>
-
-        <property-event-hover value-key="hover" .scene=${this.scene} .value=${value.hover || {}}>
-        </property-event-hover>
-      </fieldset>
-
-      <fieldset>
-        <legend>
-          <ox-title-with-help msgid="label.tap-event" topic="board-modeller/effects/tap-event"></ox-title-with-help>
-        </legend>
-
-        <property-event-tap value-key="tap" .scene=${this.scene} .value=${value.tap || {}}> </property-event-tap>
-      </fieldset>
+      <property-event-handlers .value=${this.value} .scene=${this.scene}>
+      </property-event-handlers>
     `;
     }
-    onValueChange(e) {
-        var element = e.target;
-        var key = element.getAttribute('value-key');
-        if (!key) {
-            return;
-        }
-        this.value = {
-            ...this.value,
-            [key]: convert(element)
-        };
-        this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
-    }
 }
 PropertyEvent.styles = [PropertyGridStyles];
 __decorate([

package/dist/src/property-panel/effects/property-event.js.map

@@ -1 +1 @@
-{"version":3,"file":"property-event.js","sourceRoot":"","sources":["../../../../src/property-panel/effects/property-event.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,qCAAqC,CAAA;AAE5C,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAG5C,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AAC9D,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAA;AAE5E,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAA;AAC9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAA;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA;AAE9C,MAAM,OAAO,aAAc,SAAQ,mBAAmB,CAAC,UAAU,CAAC;IAMhE,YAAY;QACV,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IAC3E,CAAC;IAED,MAAM,KAAK,cAAc;QACvB,OAAO;YACL,sBAAsB,EAAE,kBAAkB;YAC1C,oBAAoB,EAAE,gBAAgB;SACvC,CAAA;IACH,CAAC;IAED,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAA;QAE9B,OAAO,IAAI,CAAA;;;;;;yDAM0C,IAAI,CAAC,KAAK,WAAW,KAAK,CAAC,KAAK,IAAI,EAAE;;;;;;;;;qDAS1C,IAAI,CAAC,KAAK,WAAW,KAAK,CAAC,GAAG,IAAI,EAAE;;KAEpF,CAAA;IACH,CAAC;IAED,aAAa,CAAC,CAAQ;QACpB,IAAI,OAAO,GAAG,CAAC,CAAC,MAAqB,CAAA;QACrC,IAAI,GAAG,GAAG,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,CAAA;QAE3C,IAAI,CAAC,GAAG,EAAE,CAAC;YACT,OAAM;QACR,CAAC;QAED,IAAI,CAAC,KAAK,GAAG;YACX,GAAG,IAAI,CAAC,KAAK;YACb,CAAC,GAAG,CAAC,EAAE,OAAO,CAAC,OAAO,CAAC;SACxB,CAAA;QAED,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IAClF,CAAC;;AArDM,oBAAM,GAAG,CAAC,kBAAkB,CAAC,CAAA;AAER;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAmB;AAClB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAc","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/help/ox-title-with-help.js'\n\nimport { html, LitElement } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nimport { Properties, Scene } from '@hatiolab/things-scene'\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements'\nimport { PropertyGridStyles } from '@operato/styles/property-grid-styles.js'\n\nimport { PropertyEventHover } from './property-event-hover.js'\nimport { PropertyEventTap } from './property-event-tap.js'\nimport { convert } from './value-converter.js'\n\nexport class PropertyEvent extends ScopedElementsMixin(LitElement) {\n  static styles = [PropertyGridStyles]\n\n  @property({ type: Object }) value?: Properties\n  @property({ type: Object }) scene?: Scene\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', this.onValueChange.bind(this))\n  }\n\n  static get scopedElements() {\n    return {\n      'property-event-hover': PropertyEventHover,\n      'property-event-tap': PropertyEventTap\n    }\n  }\n\n  render() {\n    const value = this.value || {}\n\n    return html`\n      <fieldset>\n        <legend>\n          <ox-title-with-help msgid=\"label.hover-event\" topic=\"board-modeller/effects/hover-event\"></ox-title-with-help>\n        </legend>\n\n        <property-event-hover value-key=\"hover\" .scene=${this.scene} .value=${value.hover || {}}>\n        </property-event-hover>\n      </fieldset>\n\n      <fieldset>\n        <legend>\n          <ox-title-with-help msgid=\"label.tap-event\" topic=\"board-modeller/effects/tap-event\"></ox-title-with-help>\n        </legend>\n\n        <property-event-tap value-key=\"tap\" .scene=${this.scene} .value=${value.tap || {}}> </property-event-tap>\n      </fieldset>\n    `\n  }\n\n  onValueChange(e: Event) {\n    var element = e.target as HTMLElement\n    var key = element.getAttribute('value-key')\n\n    if (!key) {\n      return\n    }\n\n    this.value = {\n      ...this.value,\n      [key]: convert(element)\n    }\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n}\n"]}
+{"version":3,"file":"property-event.js","sourceRoot":"","sources":["../../../../src/property-panel/effects/property-event.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;;AAEH,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAG5C,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AAC9D,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAA;AAE5E,OAAO,EAAE,qBAAqB,EAAE,MAAM,qCAAqC,CAAA;AAE3E,MAAM,OAAO,aAAc,SAAQ,mBAAmB,CAAC,UAAU,CAAC;IAMhE,MAAM,KAAK,cAAc;QACvB,OAAO;YACL,yBAAyB,EAAE,qBAAqB;SACjD,CAAA;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;wCACyB,IAAI,CAAC,KAAK,WAAW,IAAI,CAAC,KAAK;;KAElE,CAAA;IACH,CAAC;;AAhBM,oBAAM,GAAG,CAAC,kBAAkB,CAAC,CAAA;AAER;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAmB;AAClB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAc","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n *\n * PropertyEvent — effects tab 안의 이벤트 핸들러 진입점.\n *\n * data-binding 패턴 동일 — inline `<property-event-handlers>` (기본 UI: tabs +\n * mapper + add/delete/copy/paste) 를 host. inline panel 의 우상단 `open_in_new`\n * 클릭 시 *큰 popup* 으로 펼침.\n *\n * 자동 마이그레이션 — things-scene 의 Component constructor 가 legacy\n * `state.event = { tap, hover, ... }` 를 *load 시점* 에 `state.eventHandlers[]`\n * 로 변환. UI 는 항상 `eventHandlers` 만 read/write.\n *\n * Legacy 컴포넌트 (PropertyEventHover / PropertyEventTap) 파일은 *코드 유지*\n * (rollback 안전망). UI 진입점만 끊음.\n */\n\nimport { html, LitElement } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nimport { Properties, Scene } from '@hatiolab/things-scene'\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements'\nimport { PropertyGridStyles } from '@operato/styles/property-grid-styles.js'\n\nimport { PropertyEventHandlers } from '../event-handlers/event-handlers.js'\n\nexport class PropertyEvent extends ScopedElementsMixin(LitElement) {\n  static styles = [PropertyGridStyles]\n\n  @property({ type: Object }) value?: Properties\n  @property({ type: Object }) scene?: Scene\n\n  static get scopedElements() {\n    return {\n      'property-event-handlers': PropertyEventHandlers\n    }\n  }\n\n  render() {\n    return html`\n      <property-event-handlers .value=${this.value} .scene=${this.scene}>\n      </property-event-handlers>\n    `\n  }\n}\n"]}

package/dist/src/property-panel/effects/property-shadow.js

@@ -22,17 +22,23 @@ export class PropertyShadow extends LitElement {
         this.renderRoot.addEventListener('change', this.onValueChange.bind(this));
     }
     render() {
-        const value = this.value || {};
+        var _a, _b, _c;
+        const value = (this.value || {});
+        // 옛 모델 (left/top/blurSize) 도 표시 가능하도록 fallback 으로 읽는다.
+        // 새 키 우선, 없으면 옛 키 — drawer (things-scene/effect/shadow.ts) 와 동일 규칙.
+        const offsetX = (_a = value.offsetX) !== null && _a !== void 0 ? _a : value.left;
+        const offsetY = (_b = value.offsetY) !== null && _b !== void 0 ? _b : value.top;
+        const blur = (_c = value.blur) !== null && _c !== void 0 ? _c : value.blurSize;
         return html `
       <div class="property-grid">
         <label> <ox-i18n msgid="label.shadowOffsetX">offset-X</ox-i18n> </label>
-        <input type="number" value-key="left" .value=${value.left} />
+        <input type="number" value-key="offsetX" .value=${offsetX} />
 
         <label> <ox-i18n msgid="label.shadowOffsetY">offset-Y</ox-i18n> </label>
-        <input type="number" value-key="top" .value=${value.top} />
+        <input type="number" value-key="offsetY" .value=${offsetY} />
 
         <label> <ox-i18n msgid="label.shadowSize">Size</ox-i18n> </label>
-        <input type="number" value-key="blurSize" .value=${value.blurSize} />
+        <input type="number" value-key="blur" .value=${blur} />
 
         <label class="icon-only-label color"><md-icon>format_color_fill</md-icon></label>
         <ox-input-color value-key="color" .value=${value.color}> </ox-input-color>
@@ -45,8 +51,11 @@ export class PropertyShadow extends LitElement {
         if (!key) {
             return;
         }
+        // 새 키로 통일해 저장하면서 옛 키 (left/top/blurSize) 는 제거 — 양쪽이
+        // 동시에 남아있으면 drawer fallback 우선순위 때문에 가시값과 어긋날 수 있다.
+        const { left, top, blurSize, ...rest } = (this.value || {});
         this.value = {
-            ...this.value,
+            ...rest,
             [key]: convert(element)
         };
         this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));

package/dist/src/property-panel/effects/property-shadow.js.map

@@ -1 +1 @@
-{"version":3,"file":"property-shadow.js","sourceRoot":"","sources":["../../../../src/property-panel/effects/property-shadow.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,0BAA0B,CAAA;AACjC,OAAO,kCAAkC,CAAA;AAEzC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAG5C,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAA;AAE5E,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA;AAE9C;;;;;;;;GAQG;AAEH,MAAM,OAAO,cAAe,SAAQ,UAAU;IAY5C,YAAY;QACV,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IAC3E,CAAC;IAED,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAA;QAE9B,OAAO,IAAI,CAAA;;;uDAGwC,KAAK,CAAC,IAAI;;;sDAGX,KAAK,CAAC,GAAG;;;2DAGJ,KAAK,CAAC,QAAQ;;;mDAGtB,KAAK,CAAC,KAAK;;KAEzD,CAAA;IACH,CAAC;IAED,aAAa,CAAC,CAAQ;QACpB,IAAI,OAAO,GAAG,CAAC,CAAC,MAAqB,CAAA;QACrC,IAAI,GAAG,GAAG,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,CAAA;QAE3C,IAAI,CAAC,GAAG,EAAE,CAAC;YACT,OAAM;QACR,CAAC;QAED,IAAI,CAAC,KAAK,GAAG;YACX,GAAG,IAAI,CAAC,KAAK;YACb,CAAC,GAAG,CAAC,EAAE,OAAO,CAAC,OAAO,CAAC;SACxB,CAAA;QAED,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IAClF,CAAC;;AAjDM,qBAAM,GAAG;IACd,kBAAkB;IAClB,GAAG,CAAA;;;;KAIF;CACF,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAmB","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/i18n/ox-i18n.js'\nimport '@operato/input/ox-input-color.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nimport { Properties } from '@hatiolab/things-scene'\nimport { PropertyGridStyles } from '@operato/styles/property-grid-styles.js'\n\nimport { convert } from './value-converter.js'\n\n/**\n * 컴포넌트의 그림자 속성을 편집하는 element\n *\n * Example:\n *  <property-shadow\n *    @change=\"${e => { this.shadow = e.target.value }}\"\n *    value=\"${this.shadow}\"\n *  ></property-shadow>\n */\n\nexport class PropertyShadow extends LitElement {\n  static styles = [\n    PropertyGridStyles,\n    css`\n      :host {\n        display: flex;\n      }\n    `\n  ]\n\n  @property({ type: Object }) value?: Properties\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', this.onValueChange.bind(this))\n  }\n\n  render() {\n    const value = this.value || {}\n\n    return html`\n      <div class=\"property-grid\">\n        <label> <ox-i18n msgid=\"label.shadowOffsetX\">offset-X</ox-i18n> </label>\n        <input type=\"number\" value-key=\"left\" .value=${value.left} />\n\n        <label> <ox-i18n msgid=\"label.shadowOffsetY\">offset-Y</ox-i18n> </label>\n        <input type=\"number\" value-key=\"top\" .value=${value.top} />\n\n        <label> <ox-i18n msgid=\"label.shadowSize\">Size</ox-i18n> </label>\n        <input type=\"number\" value-key=\"blurSize\" .value=${value.blurSize} />\n\n        <label class=\"icon-only-label color\"><md-icon>format_color_fill</md-icon></label>\n        <ox-input-color value-key=\"color\" .value=${value.color}> </ox-input-color>\n      </div>\n    `\n  }\n\n  onValueChange(e: Event) {\n    var element = e.target as HTMLElement\n    var key = element.getAttribute('value-key')\n\n    if (!key) {\n      return\n    }\n\n    this.value = {\n      ...this.value,\n      [key]: convert(element)\n    }\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n}\n"]}
+{"version":3,"file":"property-shadow.js","sourceRoot":"","sources":["../../../../src/property-panel/effects/property-shadow.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,0BAA0B,CAAA;AACjC,OAAO,kCAAkC,CAAA;AAEzC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAG5C,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAA;AAE5E,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA;AAE9C;;;;;;;;GAQG;AAEH,MAAM,OAAO,cAAe,SAAQ,UAAU;IAY5C,YAAY;QACV,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IAC3E,CAAC;IAED,MAAM;;QACJ,MAAM,KAAK,GAAG,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAO9B,CAAA;QAED,uDAAuD;QACvD,oEAAoE;QACpE,MAAM,OAAO,GAAG,MAAA,KAAK,CAAC,OAAO,mCAAI,KAAK,CAAC,IAAI,CAAA;QAC3C,MAAM,OAAO,GAAG,MAAA,KAAK,CAAC,OAAO,mCAAI,KAAK,CAAC,GAAG,CAAA;QAC1C,MAAM,IAAI,GAAG,MAAA,KAAK,CAAC,IAAI,mCAAI,KAAK,CAAC,QAAQ,CAAA;QAEzC,OAAO,IAAI,CAAA;;;0DAG2C,OAAO;;;0DAGP,OAAO;;;uDAGV,IAAI;;;mDAGR,KAAK,CAAC,KAAK;;KAEzD,CAAA;IACH,CAAC;IAED,aAAa,CAAC,CAAQ;QACpB,IAAI,OAAO,GAAG,CAAC,CAAC,MAAqB,CAAA;QACrC,IAAI,GAAG,GAAG,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,CAAA;QAE3C,IAAI,CAAC,GAAG,EAAE,CAAC;YACT,OAAM;QACR,CAAC;QAED,oDAAoD;QACpD,oDAAoD;QACpD,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,GAAG,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAIzD,CAAA;QAED,IAAI,CAAC,KAAK,GAAG;YACX,GAAG,IAAI;YACP,CAAC,GAAG,CAAC,EAAE,OAAO,CAAC,OAAO,CAAC;SACxB,CAAA;QAED,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IAClF,CAAC;;AAtEM,qBAAM,GAAG;IACd,kBAAkB;IAClB,GAAG,CAAA;;;;KAIF;CACF,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAmB","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/i18n/ox-i18n.js'\nimport '@operato/input/ox-input-color.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nimport { Properties } from '@hatiolab/things-scene'\nimport { PropertyGridStyles } from '@operato/styles/property-grid-styles.js'\n\nimport { convert } from './value-converter.js'\n\n/**\n * 컴포넌트의 그림자 속성을 편집하는 element\n *\n * Example:\n *  <property-shadow\n *    @change=\"${e => { this.shadow = e.target.value }}\"\n *    value=\"${this.shadow}\"\n *  ></property-shadow>\n */\n\nexport class PropertyShadow extends LitElement {\n  static styles = [\n    PropertyGridStyles,\n    css`\n      :host {\n        display: flex;\n      }\n    `\n  ]\n\n  @property({ type: Object }) value?: Properties\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', this.onValueChange.bind(this))\n  }\n\n  render() {\n    const value = (this.value || {}) as Properties & {\n      offsetX?: number\n      offsetY?: number\n      blur?: number\n      left?: number\n      top?: number\n      blurSize?: number\n    }\n\n    // 옛 모델 (left/top/blurSize) 도 표시 가능하도록 fallback 으로 읽는다.\n    // 새 키 우선, 없으면 옛 키 — drawer (things-scene/effect/shadow.ts) 와 동일 규칙.\n    const offsetX = value.offsetX ?? value.left\n    const offsetY = value.offsetY ?? value.top\n    const blur = value.blur ?? value.blurSize\n\n    return html`\n      <div class=\"property-grid\">\n        <label> <ox-i18n msgid=\"label.shadowOffsetX\">offset-X</ox-i18n> </label>\n        <input type=\"number\" value-key=\"offsetX\" .value=${offsetX} />\n\n        <label> <ox-i18n msgid=\"label.shadowOffsetY\">offset-Y</ox-i18n> </label>\n        <input type=\"number\" value-key=\"offsetY\" .value=${offsetY} />\n\n        <label> <ox-i18n msgid=\"label.shadowSize\">Size</ox-i18n> </label>\n        <input type=\"number\" value-key=\"blur\" .value=${blur} />\n\n        <label class=\"icon-only-label color\"><md-icon>format_color_fill</md-icon></label>\n        <ox-input-color value-key=\"color\" .value=${value.color}> </ox-input-color>\n      </div>\n    `\n  }\n\n  onValueChange(e: Event) {\n    var element = e.target as HTMLElement\n    var key = element.getAttribute('value-key')\n\n    if (!key) {\n      return\n    }\n\n    // 새 키로 통일해 저장하면서 옛 키 (left/top/blurSize) 는 제거 — 양쪽이\n    // 동시에 남아있으면 drawer fallback 우선순위 때문에 가시값과 어긋날 수 있다.\n    const { left, top, blurSize, ...rest } = (this.value || {}) as Properties & {\n      left?: number\n      top?: number\n      blurSize?: number\n    }\n\n    this.value = {\n      ...rest,\n      [key]: convert(element)\n    }\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n}\n"]}

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.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;
+}