@operato/property-panel 10.0.0-beta.22 → 10.0.0-beta.23

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 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.23](https://github.com/hatiolab/operato/compare/v10.0.0-beta.22...v10.0.0-beta.23) (2026-04-06)
+
+
+### :bug: Bug Fix
+
+* **property-panel:** 3D 모드 라벨 변경 — Enable 3D → Start in 3D ([044f29d](https://github.com/hatiolab/operato/commit/044f29de76e30e9457cd575bc5a8b567b4ba535a))
+* **property-panel:** 3D 탭을 컴포넌트 전환 시에도 유지 ([002b30c](https://github.com/hatiolab/operato/commit/002b30c6768ff059707dc9c0236ea0852d66349f))
+* **property-panel:** floor constraint label to keep above ground ([239d9c9](https://github.com/hatiolab/operato/commit/239d9c980a586bdc70bd0a2cee423074a30e2109))
+
+
+### :rocket: New Features
+
+* **property-panel:** 3D mode labels i18n + keep above ground label fix ([57bbefc](https://github.com/hatiolab/operato/commit/57bbefc6dfe0b08ed10b23abc76735594c967404))
+
+
+
 ## [10.0.0-beta.22](https://github.com/hatiolab/operato/compare/v10.0.0-beta.21...v10.0.0-beta.22) (2026-04-02)
 
 

package/dist/src/ox-property-panel.d.ts

@@ -37,6 +37,7 @@ export declare class OxPropertyPanel extends OxPropertyPanel_base {
         'property-data-binding': typeof PropertyDataBinding;
         'scene-inspector': typeof SceneInspector;
     };
+    private hasGroup;
     render(): import("lit-html").TemplateResult<1>;
     private onPropertyChanged;
     private onBoundsChanged;

package/dist/src/ox-property-panel.js

@@ -50,8 +50,28 @@ let OxPropertyPanel = class OxPropertyPanel extends ScopedElementsMixin(LitEleme
             'scene-inspector': SceneInspector
         };
     }
+    hasGroup(selected) {
+        return selected.some(c => { var _a; return ((_a = c === null || c === void 0 ? void 0 : c.model) === null || _a === void 0 ? void 0 : _a.type) === 'group'; });
+    }
     render() {
         var tabName = this.tabName ? this.tabName : 'shape';
+        const isGroupSelected = this.hasGroup(this.selected);
+        if (isGroupSelected) {
+            return html `
+        <div tab style="opacity:0.3;pointer-events:none;">
+          <md-icon name="shape">format_shapes</md-icon>
+          <md-icon name="style">palette</md-icon>
+          <md-icon name="threed">view_in_ar</md-icon>
+          <md-icon name="effect">movie_filter</md-icon>
+          <md-icon name="specific">tune</md-icon>
+          <md-icon name="data-binding">share</md-icon>
+          <md-icon name="inspector">visibility</md-icon>
+        </div>
+        <div content style="display:flex;align-items:center;justify-content:center;color:var(--md-sys-color-on-surface-variant,#666);font-size:12px;opacity:0.7;">
+          Group has no editable properties
+        </div>
+      `;
+        }
         return html `
       <div
         tab
@@ -61,9 +81,7 @@ let OxPropertyPanel = class OxPropertyPanel extends ScopedElementsMixin(LitEleme
       >
         <md-icon name="shape" ?selected=${tabName == 'shape'}>format_shapes</md-icon>
         <md-icon name="style" ?selected=${tabName == 'style'}>palette</md-icon>
-        ${this.is3dish(this.selected)
-            ? html `<md-icon name="threed" ?selected=${tabName == 'threed'}>view_in_ar</md-icon>`
-            : html ``}
+        <md-icon name="threed" ?selected=${tabName == 'threed'}>view_in_ar</md-icon>
         <md-icon name="effect" ?selected=${tabName == 'effect'}>movie_filter</md-icon>
         <md-icon name="specific" ?selected=${tabName == 'specific'}>tune</md-icon>
         <md-icon name="data-binding" ?selected=${tabName == 'data-binding'}>share</md-icon>
@@ -92,24 +110,30 @@ let OxPropertyPanel = class OxPropertyPanel extends ScopedElementsMixin(LitEleme
               >
               </property-style>
             `,
-            threed: this.isRootModel(this.selected)
+            threed: !this.is3dish(this.selected)
                 ? html `
-                  <property-scene3d
-                    .value=${this.model}
-                    .scene=${this.scene}
-                    ?active=${tabName == 'threed'}
-                  >
-                  </property-scene3d>
+                  <div style="display:flex;align-items:center;justify-content:center;height:100%;color:var(--md-sys-color-on-surface-variant,#666);font-size:12px;opacity:0.7;padding:16px;text-align:center;">
+                    Selected component(s) do not support 3D properties
+                  </div>
                 `
-                : html `
-                  <property-3d
-                    .value=${this.model}
-                    .bounds=${this.bounds}
-                    .selected=${this.selected}
-                    ?active=${tabName == 'threed'}
-                  >
-                  </property-3d>
-                `,
+                : this.isRootModel(this.selected)
+                    ? html `
+                    <property-scene3d
+                      .value=${this.model}
+                      .scene=${this.scene}
+                      ?active=${tabName == 'threed'}
+                    >
+                    </property-scene3d>
+                  `
+                    : html `
+                    <property-3d
+                      .value=${this.model}
+                      .bounds=${this.bounds}
+                      .selected=${this.selected}
+                      ?active=${tabName == 'threed'}
+                    >
+                    </property-3d>
+                  `,
             effect: html `
               <property-effect .value=${this.model} .scene=${this.scene} ?active=${tabName == 'effect'}>
               </property-effect>
@@ -204,11 +228,6 @@ let OxPropertyPanel = class OxPropertyPanel extends ScopedElementsMixin(LitEleme
     }
     async onSelectedChanged(after) {
         await this.updateComplete;
-        // 3D 탭 선택 중 비-3D 컴포넌트로 전환 시 shape 탭으로 복귀
-        // (model-layer는 항상 3D 탭 표시 가능)
-        if (this.tabName === 'threed' && !this.is3dish(after)) {
-            this.tabName = 'shape';
-        }
         if (after.length == 1) {
             this.setPropertyTarget(after[0]);
             // 컴포넌트 특성 속성(specific properties)을 먼저 바꾸고, 모델을 바꾸어준다.

package/dist/src/ox-property-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-property-panel.js","sourceRoot":"","sources":["../../src/ox-property-panel.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC3D,OAAO,SAAS,MAAM,wBAAwB,CAAA;AAG9C,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAEjD,OAAO,EAAE,mBAAmB,EAAE,MAAM,+CAA+C,CAAA;AACnF,OAAO,EAAE,eAAe,EAAE,MAAM,qCAAqC,CAAA;AACrE,OAAO,EAAE,cAAc,EAAE,MAAM,yCAAyC,CAAA;AACxE,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAA;AAClE,OAAO,EAAE,gBAAgB,EAAE,MAAM,yCAAyC,CAAA;AAC1E,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAA;AAClE,OAAO,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAA;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,6CAA6C,CAAA;AAGtE,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,mBAAmB,CAAC,UAAU,CAAC;IAA7D;;QAwDuB,UAAK,GAAiB,IAAI,CAAA;QAC1B,WAAM,GAAQ,EAAE,CAAA;QAChB,UAAK,GAAiB,EAAE,CAAA;QACzB,aAAQ,GAAgB,EAAE,CAAA;QAEzB,YAAO,GAAkB,OAAO,CAAA;QAC/B,cAAS,GAAY,KAAK,CAAA;QAC5B,UAAK,GAAU,EAAE,CAAA;QACjB,mBAAc,GAAU,EAAE,CAAA;QAErD,mBAAc,GAAqB,IAAI,CAAA;IAwRzC,CAAC;IAtRC,YAAY;QACV,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAkB,CAAC,CAAA;QACvG,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,eAAe,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAkB,CAAC,CAAA;IACrG,CAAC;IAED,OAAO,CAAC,MAA4B;QAClC,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,cAAc,EAAE,CAAA;QAC5C,MAAM,CAAC,GAAG,CAAC,UAAU,CAAC,IAAI,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;QAC/D,MAAM,CAAC,GAAG,CAAC,WAAW,CAAC,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;IAC7D,CAAC;IAED,MAAM,KAAK,cAAc;QACvB,OAAO;YACL,gBAAgB,EAAE,cAAc;YAChC,gBAAgB,EAAE,cAAc;YAChC,iBAAiB,EAAE,eAAe;YAClC,mBAAmB,EAAE,gBAAgB;YACrC,aAAa,EAAE,UAAU;YACzB,kBAAkB,EAAE,eAAe;YACnC,uBAAuB,EAAE,mBAAmB;YAC5C,iBAAiB,EAAE,cAAc;SAClC,CAAA;IACH,CAAC;IAED,MAAM;QACJ,IAAI,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAA;QAEnD,OAAO,IAAI,CAAA;;;iBAGE,CAAC,CAAa,EAAE,EAAE;YACzB,IAAI,CAAC,OAAO,GAAI,CAAC,CAAC,MAAsB,CAAC,YAAY,CAAC,MAAM,CAAC,CAAA;QAC/D,CAAC;;0CAEiC,OAAO,IAAI,OAAO;0CAClB,OAAO,IAAI,OAAO;UAClD,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC;YAC3B,CAAC,CAAC,IAAI,CAAA,oCAAoC,OAAO,IAAI,QAAQ,uBAAuB;YACpF,CAAC,CAAC,IAAI,CAAA,EAAE;2CACyB,OAAO,IAAI,QAAQ;6CACjB,OAAO,IAAI,UAAU;iDACjB,OAAO,IAAI,cAAc;8CAC5B,OAAO,IAAI,WAAW;;;;UAI1D,IAAI,CAAA;YACF;YACA,KAAK,EAAE,IAAI,CAAA;;yBAEE,IAAI,CAAC,KAAK;0BACT,IAAI,CAAC,MAAM;4BACT,IAAI,CAAC,QAAQ;0BACf,OAAO,IAAI,OAAO;;;aAG/B;YACD,KAAK,EAAE,IAAI,CAAA;;yBAEE,IAAI,CAAC,KAAK;4BACP,IAAI,CAAC,QAAQ;yBAChB,IAAI,CAAC,KAAK;0BACT,OAAO,IAAI,OAAO;2BACjB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC;;;aAGxC;YACD,MAAM,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC;gBACrC,CAAC,CAAC,IAAI,CAAA;;6BAES,IAAI,CAAC,KAAK;6BACV,IAAI,CAAC,KAAK;8BACT,OAAO,IAAI,QAAQ;;;iBAGhC;gBACH,CAAC,CAAC,IAAI,CAAA;;6BAES,IAAI,CAAC,KAAK;8BACT,IAAI,CAAC,MAAM;gCACT,IAAI,CAAC,QAAQ;8BACf,OAAO,IAAI,QAAQ;;;iBAGhC;YACL,MAAM,EAAE,IAAI,CAAA;wCACgB,IAAI,CAAC,KAAK,WAAW,IAAI,CAAC,KAAK,YAAY,OAAO,IAAI,QAAQ;;aAEzF;YACD,QAAQ,EAAE,IAAI,CAAA;;yBAED,IAAI,CAAC,KAAK;yBACV,IAAI,CAAC,KAAK;4BACP,IAAI,CAAC,QAAQ;yBAChB,IAAI,CAAC,aAAa;kCACT,IAAI,CAAC,cAAc;0BAC3B,OAAO,IAAI,UAAU;;;aAGlC;YACD,cAAc,EAAE,IAAI,CAAA;8CACc,IAAI,CAAC,KAAK,WAAW,IAAI,CAAC,KAAK,YAAY,OAAO,IAAI,cAAc;;aAErG;YACD,SAAS,EAAE,IAAI,CAAA;wCACa,IAAI,CAAC,KAAK,YAAY,OAAO,IAAI,WAAW;aACvE;SACF,CAAC,IAAI,CAAC,OAAQ,CAAC;SACjB;;KAEJ,CAAA;IACH,CAAC;IAEO,iBAAiB,CAAC,CAAc;QACtC,IAAI,MAAM,GAAG,CAAC,CAAC,MAAM,CAAA;QAErB,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;YACxB,qBAAqB;YACrB,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,cAAe,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAA;QACjF,CAAC;aAAM,CAAC;YACN,qBAAqB;YACrB,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAA;QAC1G,CAAC;IACH,CAAC;IAEO,eAAe,CAAC,CAAc;QACpC,IAAI,MAAM,GAAG,CAAC,CAAC,MAAM,CAAA;QAErB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;YAChB,OAAM;QACR,CAAC;QAED,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;YACxB,qBAAqB;YACrB,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,GAAG,EAAE;gBAC7B,IAAI,CAAC,cAAe,CAAC,MAAM,GAAG;oBAC5B,GAAG,IAAI,CAAC,cAAe,CAAC,MAAM;oBAC9B,GAAG,MAAM;iBACV,CAAA;YACH,CAAC,CAAC,CAAA;QACJ,CAAC;aAAM,CAAC;YACN,qBAAqB;YACrB,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,GAAG,EAAE;gBAC7B,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE;oBAChC,SAAS,CAAC,MAAM,GAAG;wBACjB,GAAG,SAAS,CAAC,MAAM;wBACnB,GAAG,MAAM;qBACV,CAAA;gBACH,CAAC,CAAC,CAAA;YACJ,CAAC,CAAC,CAAA;QACJ,CAAC;IACH,CAAC;IAEO,gBAAgB;QACtB,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;YACxB,IAAI,CAAC,KAAK,GAAG;gBACX,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK;aAC7B,CAAA;YACD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,CAAA;QAC5C,CAAC;IACH,CAAC;IAEO,0BAA0B;QAChC,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;YAChB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAA;YAC5B,IAAI,CAAC,aAAa,GAAG,EAAE,CAAA;YACvB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAA;YACjB,IAAI,CAAC,MAAM,GAAG,EAAE,CAAA;QAClB,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,aAAa,CAAC,CAAA;QAClC,CAAC;IACH,CAAC;IAEO,WAAW,CAAC,SAAkB;QACpC,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAA;QAC5C,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;IACpC,CAAC;IAEO,KAAK,CAAC,cAAc;QAC1B,MAAM,IAAI,CAAC,cAAc,CAAA;QAEzB,IAAI,IAAI,CAAC,KAAK;YAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,aAAa,CAAC,CAAA;IAClE,CAAC;IAEO,KAAK,CAAC,iBAAiB,CAAC,KAAkB;QAChD,MAAM,IAAI,CAAC,cAAc,CAAA;QAEzB,yCAAyC;QACzC,+BAA+B;QAC/B,IAAI,IAAI,CAAC,OAAO,KAAK,QAAQ,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;YACtD,IAAI,CAAC,OAAO,GAAG,OAAO,CAAA;QACxB,CAAC;QAED,IAAI,KAAK,CAAC,MAAM,IAAI,CAAC,EAAE,CAAC;YACtB,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAA;YAChC,sDAAsD;YACtD,sDAAsD;YACtD,IAAI,CAAC,aAAa,GAAG,SAAS,CAAC,IAAI,CAAC,cAAe,CAAC,MAAM,CAAC,UAAU,CAAC,CAAA;YACtE,IAAI,CAAC,KAAK,GAAG;gBACX,GAAG,IAAI,CAAC,cAAe,CAAC,KAAK;aAC9B,CAAA;YACD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,cAAe,CAAC,MAAM,CAAC,CAAA;QAC7C,CAAC;aAAM,IAAI,KAAK,CAAC,MAAM,IAAI,CAAC,EAAE,CAAC;YAC7B,YAAY;YAEZ,IAAI,CAAC,0BAA0B,EAAE,CAAA;QACnC,CAAC;aAAM,CAAC;YACN,YAAY;YAEZ,IAAI,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAA;YAC9B,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;gBACtC,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,IAAI,IAAI,EAAE,CAAC;oBAChC,IAAI,GAAG,SAAS,CAAA;oBAChB,MAAK;gBACP,CAAC;YACH,CAAC;YAED,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAA;YAE5B,IAAI,IAAI;gBAAE,IAAI,CAAC,aAAa,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CAAA;;gBAC/D,IAAI,CAAC,aAAa,GAAG,IAAI,CAAA;YAE9B,IAAI,CAAC,KAAK,GAAG;gBACX,IAAI,EAAE,IAAI;gBACV,KAAK,EAAE,CAAC;aACT,CAAA;YACD,IAAI,CAAC,MAAM,GAAG,EAAE,CAAA;QAClB,CAAC;IACH,CAAC;IAEO,iBAAiB,CAAC,SAA2B;QACnD,IAAI,SAAS,GAAG,IAAI,CAAC,cAAc,CAAA;QAEnC,IAAI,SAAS,EAAE,CAAC;YACd,SAAS,CAAC,GAAG,CAAC,QAAQ,EAAE,IAAI,CAAC,gBAAgB,EAAE,IAAI,CAAC,CAAA;QACtD,CAAC;QACD,IAAI,SAAS,EAAE,CAAC;YACd,SAAS,CAAC,EAAE,CAAC,QAAQ,EAAE,IAAI,CAAC,gBAAgB,EAAE,IAAI,CAAC,CAAA;QACrD,CAAC;QAED,IAAI,CAAC,cAAc,GAAG,SAAS,CAAA;IACjC,CAAC;IAEO,SAAS,CAAC,MAAc;QAC9B,IAAI,CAAC,MAAM,GAAG;YACZ,IAAI,EAAE,MAAM,CAAC,IAAI;YACjB,GAAG,EAAE,MAAM,CAAC,GAAG;YACf,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;YAC/B,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC;SAClC,CAAA;IACH,CAAC;IAEO,OAAO,CAAC,QAAqB;;QACnC,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO,KAAK,CAAA;QACvC,MAAM,KAAK,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAA;QACzB,OAAO,CAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,qDAAI,MAAI,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,WAAW,qDAAI,CAAA,CAAA;IACrD,CAAC;IAEO,WAAW,CAAC,QAAqB;;QACvC,OAAO,QAAQ,CAAC,MAAM,GAAG,CAAC,KAAI,MAAA,MAAA,QAAQ,CAAC,CAAC,CAAC,0CAAE,WAAW,kDAAI,CAAA,CAAA;IAC5D,CAAC;IAEO,MAAM,CAAC,QAAqB;QAClC,IAAI,MAAM,GAAG,KAAK,CAAA;QAElB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YACzC,IAAI,IAAI,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAA;YAEtB,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,EAAE,CAAC;gBACnC,MAAM,GAAG,KAAK,CAAA;gBACd,OAAO,MAAM,CAAA;YACf,CAAC;YAED,MAAM,GAAG,IAAI,CAAA;QACf,CAAC;QAED,OAAO,MAAM,CAAA;IACf,CAAC;;AAxVM,sBAAM,GAAG;IACd,eAAe;IACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkDF;CACF,AArDY,CAqDZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAA2B;AAC1B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAiB;AAChB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAyB;AACzB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;iDAA2B;AAC1B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;sDAAmB;AACjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAAiC;AAC/B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kDAA2B;AAC5B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;8CAAkB;AACjB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;uDAA2B;AAhE1C,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CA0V3B","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/web/icon/icon.js'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport deepClone from 'lodash-es/cloneDeep.js'\n\nimport { BOUNDS, Component, Model, Scene } from '@hatiolab/things-scene'\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements'\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { PropertyDataBinding } from './property-panel/data-binding/data-binding.js'\nimport { PropertyEffects } from './property-panel/effects/effects.js'\nimport { SceneInspector } from './property-panel/inspector/inspector.js'\nimport { PropertyShapes } from './property-panel/shapes/shapes.js'\nimport { PropertySpecific } from './property-panel/specifics/specifics.js'\nimport { PropertyStyles } from './property-panel/styles/styles.js'\nimport { Property3D } from './property-panel/threed/threed.js'\nimport { PropertyScene3D } from './property-panel/threed/property-scene3d.js'\n\n@customElement('ox-property-panel')\nexport class OxPropertyPanel extends ScopedElementsMixin(LitElement) {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        border-left: 1px solid var(--md-sys-color-border, #ccc);\n        width: 270px;\n        display: flex;\n        flex-direction: column;\n        background-color: var(--property-sidebar-background-color, var(--md-sys-color-secondary-container));\n        color: var(--property-sidebar-color, var(--md-sys-color-on-secondary-container));\n        user-select: none;\n\n        --input-padding: var(--spacing-small);\n        --label-font: var(--property-sidebar-fieldset-label, roboto);\n      }\n\n      [tab] {\n        display: flex;\n        background-color: rgba(0, 0, 0, 0.08);\n        opacity: 0.85;\n      }\n\n      [tab] md-icon {\n        flex: 1;\n\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        color: var(--property-sidebar-tab-icon-color);\n        height: 40px;\n      }\n\n      [tab] [selected] {\n        background-color: var(--property-sidebar-background-color, var(--md-sys-color-secondary-container));\n        border-left: 1px solid rgba(255, 255, 255, 0.5);\n        border-right: 1px solid rgba(0, 0, 0, 0.15);\n        opacity: 1;\n      }\n\n      [content] {\n        flex: 1;\n\n        overflow: hidden;\n        overflow-y: auto;\n\n        --md-icon-size: 22px;\n      }\n\n      [content] > :not([active]) {\n        display: none;\n      }\n    `\n  ]\n\n  @property({ type: Object }) scene: Scene | null = null\n  @property({ type: Object }) bounds: any = {}\n  @property({ type: Object }) model: Model | null = {}\n  @property({ type: Array }) selected: Component[] = []\n  @property({ type: Array }) specificProps: any\n  @property({ type: String }) tabName: string | null = 'shape'\n  @property({ type: Boolean }) collapsed: boolean = false\n  @property({ type: Array }) fonts: any[] = []\n  @property({ type: Array }) propertyEditor: any[] = []\n\n  propertyTarget: Component | null = null\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('property-change', this.onPropertyChanged.bind(this) as EventListener)\n    this.renderRoot.addEventListener('bounds-change', this.onBoundsChanged.bind(this) as EventListener)\n  }\n\n  updated(change: PropertyValues<this>) {\n    change.has('scene') && this.onSceneChanged()\n    change.has('selected') && this.onSelectedChanged(this.selected)\n    change.has('collapsed') && this.onCollapsed(this.collapsed)\n  }\n\n  static get scopedElements() {\n    return {\n      'property-shape': PropertyShapes,\n      'property-style': PropertyStyles,\n      'property-effect': PropertyEffects,\n      'property-specific': PropertySpecific,\n      'property-3d': Property3D,\n      'property-scene3d': PropertyScene3D,\n      'property-data-binding': PropertyDataBinding,\n      'scene-inspector': SceneInspector\n    }\n  }\n\n  render() {\n    var tabName = this.tabName ? this.tabName : 'shape'\n\n    return html`\n      <div\n        tab\n        @click=${(e: MouseEvent) => {\n          this.tabName = (e.target as HTMLElement).getAttribute('name')\n        }}\n      >\n        <md-icon name=\"shape\" ?selected=${tabName == 'shape'}>format_shapes</md-icon>\n        <md-icon name=\"style\" ?selected=${tabName == 'style'}>palette</md-icon>\n        ${this.is3dish(this.selected)\n          ? html`<md-icon name=\"threed\" ?selected=${tabName == 'threed'}>view_in_ar</md-icon>`\n          : html``}\n        <md-icon name=\"effect\" ?selected=${tabName == 'effect'}>movie_filter</md-icon>\n        <md-icon name=\"specific\" ?selected=${tabName == 'specific'}>tune</md-icon>\n        <md-icon name=\"data-binding\" ?selected=${tabName == 'data-binding'}>share</md-icon>\n        <md-icon name=\"inspector\" ?selected=${tabName == 'inspector'}>visibility</md-icon>\n      </div>\n\n      <div content>\n        ${html`\n          ${{\n            shape: html`\n              <property-shape\n                .value=${this.model}\n                .bounds=${this.bounds}\n                .selected=${this.selected}\n                ?active=${tabName == 'shape'}\n              >\n              </property-shape>\n            `,\n            style: html`\n              <property-style\n                .value=${this.model}\n                .selected=${this.selected}\n                .fonts=${this.fonts}\n                ?active=${tabName == 'style'}\n                ?is-line=${this.isLine(this.selected)}\n              >\n              </property-style>\n            `,\n            threed: this.isRootModel(this.selected)\n              ? html`\n                  <property-scene3d\n                    .value=${this.model}\n                    .scene=${this.scene}\n                    ?active=${tabName == 'threed'}\n                  >\n                  </property-scene3d>\n                `\n              : html`\n                  <property-3d\n                    .value=${this.model}\n                    .bounds=${this.bounds}\n                    .selected=${this.selected}\n                    ?active=${tabName == 'threed'}\n                  >\n                  </property-3d>\n                `,\n            effect: html`\n              <property-effect .value=${this.model} .scene=${this.scene} ?active=${tabName == 'effect'}>\n              </property-effect>\n            `,\n            specific: html`\n              <property-specific\n                .value=${this.model}\n                .scene=${this.scene}\n                .selected=${this.selected}\n                .props=${this.specificProps}\n                .propertyEditor=${this.propertyEditor}\n                ?active=${tabName == 'specific'}\n              >\n              </property-specific>\n            `,\n            'data-binding': html`\n              <property-data-binding .scene=${this.scene} .value=${this.model} ?active=${tabName == 'data-binding'}>\n              </property-data-binding>\n            `,\n            inspector: html`\n              <scene-inspector .scene=${this.scene} ?active=${tabName == 'inspector'}></scene-inspector>\n            `\n          }[this.tabName!]}\n        `}\n      </div>\n    `\n  }\n\n  private onPropertyChanged(e: CustomEvent) {\n    var detail = e.detail\n\n    if (this.propertyTarget) {\n      /* 단일 컴포넌트의 경우에 적용 */\n      this.scene && this.scene.undoableChange(() => this.propertyTarget!.set(detail))\n    } else {\n      /* 여러 컴포넌트의 경우에 적용 */\n      this.scene && this.scene.undoableChange(() => this.selected.forEach(component => component.set(detail)))\n    }\n  }\n\n  private onBoundsChanged(e: CustomEvent) {\n    var detail = e.detail\n\n    if (!this.scene) {\n      return\n    }\n\n    if (this.propertyTarget) {\n      /* 단일 컴포넌트의 경우에 적용 */\n      this.scene.undoableChange(() => {\n        this.propertyTarget!.bounds = {\n          ...this.propertyTarget!.bounds,\n          ...detail\n        }\n      })\n    } else {\n      /* 여러 컴포넌트의 경우에 적용 */\n      this.scene.undoableChange(() => {\n        this.selected.forEach(component => {\n          component.bounds = {\n            ...component.bounds,\n            ...detail\n          }\n        })\n      })\n    }\n  }\n\n  private onChangedByScene() {\n    if (this.propertyTarget) {\n      this.model = {\n        ...this.propertyTarget.model\n      }\n      this.setBounds(this.propertyTarget.bounds)\n    }\n  }\n\n  private setPropertyTargetAsDefault() {\n    if (!this.scene) {\n      this.setPropertyTarget(null)\n      this.specificProps = []\n      this.model = null\n      this.bounds = {}\n    } else {\n      this.scene.select('model-layer')\n    }\n  }\n\n  private onCollapsed(collapsed: boolean) {\n    this.style.display = collapsed ? 'none' : ''\n    dispatchEvent(new Event('resize'))\n  }\n\n  private async onSceneChanged() {\n    await this.updateComplete\n\n    if (this.scene) this.selected = this.scene.select('model-layer')\n  }\n\n  private async onSelectedChanged(after: Component[]) {\n    await this.updateComplete\n\n    // 3D 탭 선택 중 비-3D 컴포넌트로 전환 시 shape 탭으로 복귀\n    // (model-layer는 항상 3D 탭 표시 가능)\n    if (this.tabName === 'threed' && !this.is3dish(after)) {\n      this.tabName = 'shape'\n    }\n\n    if (after.length == 1) {\n      this.setPropertyTarget(after[0])\n      // 컴포넌트 특성 속성(specific properties)을 먼저 바꾸고, 모델을 바꾸어준다.\n      // 컴포넌트 속성에 따라 UI 컴포넌트가 준비되고, 이후에 모델값을 보여주도록 하기 위해서이다.\n      this.specificProps = deepClone(this.propertyTarget!.nature.properties)\n      this.model = {\n        ...this.propertyTarget!.model\n      }\n      this.setBounds(this.propertyTarget!.bounds)\n    } else if (after.length == 0) {\n      // 선택이 안된 경우\n\n      this.setPropertyTargetAsDefault()\n    } else {\n      // 다중 선택된 경우\n\n      var type = after[0].model.type\n      for (let i = 1; i < after.length; i++) {\n        if (after[i].model.type != type) {\n          type = undefined\n          break\n        }\n      }\n\n      this.setPropertyTarget(null)\n\n      if (type) this.specificProps = deepClone(after[0].nature.properties)\n      else this.specificProps = null\n\n      this.model = {\n        type: type,\n        alpha: 1\n      }\n      this.bounds = {}\n    }\n  }\n\n  private setPropertyTarget(newTarget: Component | null) {\n    var oldTarget = this.propertyTarget\n\n    if (oldTarget) {\n      oldTarget.off('change', this.onChangedByScene, this)\n    }\n    if (newTarget) {\n      newTarget.on('change', this.onChangedByScene, this)\n    }\n\n    this.propertyTarget = newTarget\n  }\n\n  private setBounds(bounds: BOUNDS) {\n    this.bounds = {\n      left: bounds.left,\n      top: bounds.top,\n      width: Math.round(bounds.width),\n      height: Math.round(bounds.height)\n    }\n  }\n\n  private is3dish(selected: Component[]) {\n    if (selected.length === 0) return false\n    const first = selected[0]\n    return first?.is3dish?.() || first?.isRootModel?.()\n  }\n\n  private isRootModel(selected: Component[]) {\n    return selected.length > 0 && selected[0]?.isRootModel?.()\n  }\n\n  private isLine(selected: Component[]) {\n    var isLine = false\n\n    for (var i = 0; i < selected.length; i++) {\n      var comp = selected[i]\n\n      if (!comp.isLine || !comp.isLine()) {\n        isLine = false\n        return isLine\n      }\n\n      isLine = true\n    }\n\n    return isLine\n  }\n}\n"]}
+{"version":3,"file":"ox-property-panel.js","sourceRoot":"","sources":["../../src/ox-property-panel.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/web/icon/icon.js'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport deepClone from 'lodash-es/cloneDeep.js'\n\nimport { BOUNDS, Component, Model, Scene } from '@hatiolab/things-scene'\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements'\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { PropertyDataBinding } from './property-panel/data-binding/data-binding.js'\nimport { PropertyEffects } from './property-panel/effects/effects.js'\nimport { SceneInspector } from './property-panel/inspector/inspector.js'\nimport { PropertyShapes } from './property-panel/shapes/shapes.js'\nimport { PropertySpecific } from './property-panel/specifics/specifics.js'\nimport { PropertyStyles } from './property-panel/styles/styles.js'\nimport { Property3D } from './property-panel/threed/threed.js'\nimport { PropertyScene3D } from './property-panel/threed/property-scene3d.js'\n\n@customElement('ox-property-panel')\nexport class OxPropertyPanel extends ScopedElementsMixin(LitElement) {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        border-left: 1px solid var(--md-sys-color-border, #ccc);\n        width: 270px;\n        display: flex;\n        flex-direction: column;\n        background-color: var(--property-sidebar-background-color, var(--md-sys-color-secondary-container));\n        color: var(--property-sidebar-color, var(--md-sys-color-on-secondary-container));\n        user-select: none;\n\n        --input-padding: var(--spacing-small);\n        --label-font: var(--property-sidebar-fieldset-label, roboto);\n      }\n\n      [tab] {\n        display: flex;\n        background-color: rgba(0, 0, 0, 0.08);\n        opacity: 0.85;\n      }\n\n      [tab] md-icon {\n        flex: 1;\n\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        color: var(--property-sidebar-tab-icon-color);\n        height: 40px;\n      }\n\n      [tab] [selected] {\n        background-color: var(--property-sidebar-background-color, var(--md-sys-color-secondary-container));\n        border-left: 1px solid rgba(255, 255, 255, 0.5);\n        border-right: 1px solid rgba(0, 0, 0, 0.15);\n        opacity: 1;\n      }\n\n      [content] {\n        flex: 1;\n\n        overflow: hidden;\n        overflow-y: auto;\n\n        --md-icon-size: 22px;\n      }\n\n      [content] > :not([active]) {\n        display: none;\n      }\n    `\n  ]\n\n  @property({ type: Object }) scene: Scene | null = null\n  @property({ type: Object }) bounds: any = {}\n  @property({ type: Object }) model: Model | null = {}\n  @property({ type: Array }) selected: Component[] = []\n  @property({ type: Array }) specificProps: any\n  @property({ type: String }) tabName: string | null = 'shape'\n  @property({ type: Boolean }) collapsed: boolean = false\n  @property({ type: Array }) fonts: any[] = []\n  @property({ type: Array }) propertyEditor: any[] = []\n\n  propertyTarget: Component | null = null\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('property-change', this.onPropertyChanged.bind(this) as EventListener)\n    this.renderRoot.addEventListener('bounds-change', this.onBoundsChanged.bind(this) as EventListener)\n  }\n\n  updated(change: PropertyValues<this>) {\n    change.has('scene') && this.onSceneChanged()\n    change.has('selected') && this.onSelectedChanged(this.selected)\n    change.has('collapsed') && this.onCollapsed(this.collapsed)\n  }\n\n  static get scopedElements() {\n    return {\n      'property-shape': PropertyShapes,\n      'property-style': PropertyStyles,\n      'property-effect': PropertyEffects,\n      'property-specific': PropertySpecific,\n      'property-3d': Property3D,\n      'property-scene3d': PropertyScene3D,\n      'property-data-binding': PropertyDataBinding,\n      'scene-inspector': SceneInspector\n    }\n  }\n\n  private hasGroup(selected: Component[]) {\n    return selected.some(c => c?.model?.type === 'group')\n  }\n\n  render() {\n    var tabName = this.tabName ? this.tabName : 'shape'\n    const isGroupSelected = this.hasGroup(this.selected)\n\n    if (isGroupSelected) {\n      return html`\n        <div tab style=\"opacity:0.3;pointer-events:none;\">\n          <md-icon name=\"shape\">format_shapes</md-icon>\n          <md-icon name=\"style\">palette</md-icon>\n          <md-icon name=\"threed\">view_in_ar</md-icon>\n          <md-icon name=\"effect\">movie_filter</md-icon>\n          <md-icon name=\"specific\">tune</md-icon>\n          <md-icon name=\"data-binding\">share</md-icon>\n          <md-icon name=\"inspector\">visibility</md-icon>\n        </div>\n        <div content style=\"display:flex;align-items:center;justify-content:center;color:var(--md-sys-color-on-surface-variant,#666);font-size:12px;opacity:0.7;\">\n          Group has no editable properties\n        </div>\n      `\n    }\n\n    return html`\n      <div\n        tab\n        @click=${(e: MouseEvent) => {\n          this.tabName = (e.target as HTMLElement).getAttribute('name')\n        }}\n      >\n        <md-icon name=\"shape\" ?selected=${tabName == 'shape'}>format_shapes</md-icon>\n        <md-icon name=\"style\" ?selected=${tabName == 'style'}>palette</md-icon>\n        <md-icon name=\"threed\" ?selected=${tabName == 'threed'}>view_in_ar</md-icon>\n        <md-icon name=\"effect\" ?selected=${tabName == 'effect'}>movie_filter</md-icon>\n        <md-icon name=\"specific\" ?selected=${tabName == 'specific'}>tune</md-icon>\n        <md-icon name=\"data-binding\" ?selected=${tabName == 'data-binding'}>share</md-icon>\n        <md-icon name=\"inspector\" ?selected=${tabName == 'inspector'}>visibility</md-icon>\n      </div>\n\n      <div content>\n        ${html`\n          ${{\n            shape: html`\n              <property-shape\n                .value=${this.model}\n                .bounds=${this.bounds}\n                .selected=${this.selected}\n                ?active=${tabName == 'shape'}\n              >\n              </property-shape>\n            `,\n            style: html`\n              <property-style\n                .value=${this.model}\n                .selected=${this.selected}\n                .fonts=${this.fonts}\n                ?active=${tabName == 'style'}\n                ?is-line=${this.isLine(this.selected)}\n              >\n              </property-style>\n            `,\n            threed: !this.is3dish(this.selected)\n              ? html`\n                  <div style=\"display:flex;align-items:center;justify-content:center;height:100%;color:var(--md-sys-color-on-surface-variant,#666);font-size:12px;opacity:0.7;padding:16px;text-align:center;\">\n                    Selected component(s) do not support 3D properties\n                  </div>\n                `\n              : this.isRootModel(this.selected)\n                ? html`\n                    <property-scene3d\n                      .value=${this.model}\n                      .scene=${this.scene}\n                      ?active=${tabName == 'threed'}\n                    >\n                    </property-scene3d>\n                  `\n                : html`\n                    <property-3d\n                      .value=${this.model}\n                      .bounds=${this.bounds}\n                      .selected=${this.selected}\n                      ?active=${tabName == 'threed'}\n                    >\n                    </property-3d>\n                  `,\n            effect: html`\n              <property-effect .value=${this.model} .scene=${this.scene} ?active=${tabName == 'effect'}>\n              </property-effect>\n            `,\n            specific: html`\n              <property-specific\n                .value=${this.model}\n                .scene=${this.scene}\n                .selected=${this.selected}\n                .props=${this.specificProps}\n                .propertyEditor=${this.propertyEditor}\n                ?active=${tabName == 'specific'}\n              >\n              </property-specific>\n            `,\n            'data-binding': html`\n              <property-data-binding .scene=${this.scene} .value=${this.model} ?active=${tabName == 'data-binding'}>\n              </property-data-binding>\n            `,\n            inspector: html`\n              <scene-inspector .scene=${this.scene} ?active=${tabName == 'inspector'}></scene-inspector>\n            `\n          }[this.tabName!]}\n        `}\n      </div>\n    `\n  }\n\n  private onPropertyChanged(e: CustomEvent) {\n    var detail = e.detail\n\n    if (this.propertyTarget) {\n      /* 단일 컴포넌트의 경우에 적용 */\n      this.scene && this.scene.undoableChange(() => this.propertyTarget!.set(detail))\n    } else {\n      /* 여러 컴포넌트의 경우에 적용 */\n      this.scene && this.scene.undoableChange(() => this.selected.forEach(component => component.set(detail)))\n    }\n  }\n\n  private onBoundsChanged(e: CustomEvent) {\n    var detail = e.detail\n\n    if (!this.scene) {\n      return\n    }\n\n    if (this.propertyTarget) {\n      /* 단일 컴포넌트의 경우에 적용 */\n      this.scene.undoableChange(() => {\n        this.propertyTarget!.bounds = {\n          ...this.propertyTarget!.bounds,\n          ...detail\n        }\n      })\n    } else {\n      /* 여러 컴포넌트의 경우에 적용 */\n      this.scene.undoableChange(() => {\n        this.selected.forEach(component => {\n          component.bounds = {\n            ...component.bounds,\n            ...detail\n          }\n        })\n      })\n    }\n  }\n\n  private onChangedByScene() {\n    if (this.propertyTarget) {\n      this.model = {\n        ...this.propertyTarget.model\n      }\n      this.setBounds(this.propertyTarget.bounds)\n    }\n  }\n\n  private setPropertyTargetAsDefault() {\n    if (!this.scene) {\n      this.setPropertyTarget(null)\n      this.specificProps = []\n      this.model = null\n      this.bounds = {}\n    } else {\n      this.scene.select('model-layer')\n    }\n  }\n\n  private onCollapsed(collapsed: boolean) {\n    this.style.display = collapsed ? 'none' : ''\n    dispatchEvent(new Event('resize'))\n  }\n\n  private async onSceneChanged() {\n    await this.updateComplete\n\n    if (this.scene) this.selected = this.scene.select('model-layer')\n  }\n\n  private async onSelectedChanged(after: Component[]) {\n    await this.updateComplete\n\n\n    if (after.length == 1) {\n      this.setPropertyTarget(after[0])\n      // 컴포넌트 특성 속성(specific properties)을 먼저 바꾸고, 모델을 바꾸어준다.\n      // 컴포넌트 속성에 따라 UI 컴포넌트가 준비되고, 이후에 모델값을 보여주도록 하기 위해서이다.\n      this.specificProps = deepClone(this.propertyTarget!.nature.properties)\n      this.model = {\n        ...this.propertyTarget!.model\n      }\n      this.setBounds(this.propertyTarget!.bounds)\n    } else if (after.length == 0) {\n      // 선택이 안된 경우\n\n      this.setPropertyTargetAsDefault()\n    } else {\n      // 다중 선택된 경우\n\n      var type = after[0].model.type\n      for (let i = 1; i < after.length; i++) {\n        if (after[i].model.type != type) {\n          type = undefined\n          break\n        }\n      }\n\n      this.setPropertyTarget(null)\n\n      if (type) this.specificProps = deepClone(after[0].nature.properties)\n      else this.specificProps = null\n\n      this.model = {\n        type: type,\n        alpha: 1\n      }\n      this.bounds = {}\n    }\n  }\n\n  private setPropertyTarget(newTarget: Component | null) {\n    var oldTarget = this.propertyTarget\n\n    if (oldTarget) {\n      oldTarget.off('change', this.onChangedByScene, this)\n    }\n    if (newTarget) {\n      newTarget.on('change', this.onChangedByScene, this)\n    }\n\n    this.propertyTarget = newTarget\n  }\n\n  private setBounds(bounds: BOUNDS) {\n    this.bounds = {\n      left: bounds.left,\n      top: bounds.top,\n      width: Math.round(bounds.width),\n      height: Math.round(bounds.height)\n    }\n  }\n\n  private is3dish(selected: Component[]) {\n    if (selected.length === 0) return false\n    const first = selected[0]\n    return first?.is3dish?.() || first?.isRootModel?.()\n  }\n\n  private isRootModel(selected: Component[]) {\n    return selected.length > 0 && selected[0]?.isRootModel?.()\n  }\n\n  private isLine(selected: Component[]) {\n    var isLine = false\n\n    for (var i = 0; i < selected.length; i++) {\n      var comp = selected[i]\n\n      if (!comp.isLine || !comp.isLine()) {\n        isLine = false\n        return isLine\n      }\n\n      isLine = true\n    }\n\n    return isLine\n  }\n}\n"]}

package/dist/src/property-panel/threed/property-scene3d.d.ts

@@ -2,6 +2,7 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 import '@operato/input/ox-input-color.js';
+import '@operato/i18n/ox-i18n.js';
 import './property-material3d.js';
 import { Properties, Scene } from '@hatiolab/things-scene';
 import { AbstractProperty } from '../abstract-property.js';

package/dist/src/property-panel/threed/property-scene3d.js

@@ -3,6 +3,7 @@
  */
 import { __decorate } from "tslib";
 import '@operato/input/ox-input-color.js';
+import '@operato/i18n/ox-i18n.js';
 import './property-material3d.js';
 import { css, html } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -70,7 +71,7 @@ export class PropertyScene3D extends AbstractProperty {
         <legend>3D Mode</legend>
         <div class="property-grid">
           <input id="cb-threed" type="checkbox" value-key="threed" .checked=${!!value.threed} />
-          <label for="cb-threed">Enable 3D</label>
+          <label for="cb-threed"><ox-i18n msgid="label.start-in-3d">Start in 3D</ox-i18n></label>
 
           <label>Viewer Auto</label>
           <select value-key="cameraAutoPlay">
@@ -89,7 +90,7 @@ export class PropertyScene3D extends AbstractProperty {
             value-key="cameraFloorConstraint"
             .checked=${!!value.cameraFloorConstraint}
           />
-          <label for="cb-floor-constraint">Floor Constraint (Viewer)</label>
+          <label for="cb-floor-constraint"><ox-i18n msgid="label.keep-above-ground">Keep Above Ground</ox-i18n></label>
         </div>
       </fieldset>
     `;

package/dist/src/property-panel/threed/property-scene3d.js.map

@@ -1 +1 @@
-{"version":3,"file":"property-scene3d.js","sourceRoot":"","sources":["../../../../src/property-panel/threed/property-scene3d.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/input/ox-input-color.js'\n\nimport './property-material3d.js'\n\nimport { css, html } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nimport { Properties, Scene } from '@hatiolab/things-scene'\nimport { PropertyGridStyles } from '@operato/styles/property-grid-styles.js'\n\nimport { AbstractProperty } from '../abstract-property.js'\n\nconst LIGHTING_PRESETS: Record<string, Record<string, unknown>> = {\n  Neutral: {\n    hemiIntensity: 0.6,\n    dirLightEnabled: true,\n    dirLightColor: '#ffffff',\n    dirLightIntensity: 0.5\n  },\n  Studio: {\n    hemiIntensity: 0.5,\n    dirLightEnabled: true,\n    dirLightColor: '#ffffff',\n    dirLightIntensity: 0.6\n  },\n  Bright: {\n    hemiIntensity: 0.8,\n    dirLightEnabled: true,\n    dirLightColor: '#ffffff',\n    dirLightIntensity: 0.7\n  },\n  Warm: {\n    hemiIntensity: 0.5,\n    dirLightEnabled: true,\n    dirLightColor: '#ffcc88',\n    dirLightIntensity: 0.4\n  },\n  Cool: {\n    hemiIntensity: 0.5,\n    dirLightEnabled: true,\n    dirLightColor: '#cce0ff',\n    dirLightIntensity: 0.4\n  },\n  Flat: {\n    hemiIntensity: 0.8,\n    dirLightEnabled: false,\n    dirLightColor: '#ffffff',\n    dirLightIntensity: 0\n  }\n}\n\n/**\n * Scene-level 3D settings for model-layer.\n * Includes 3D mode, camera, renderer, lighting, presets, and floor configuration.\n */\nexport class PropertyScene3D extends AbstractProperty {\n  static styles = [\n    PropertyGridStyles,\n    css`\n      .preset-buttons {\n        grid-column: 1 / -1;\n        display: flex;\n        flex-wrap: wrap;\n        gap: 4px;\n        padding: 2px 0;\n      }\n\n      .preset-buttons button {\n        flex: 1;\n        min-width: 60px;\n        padding: 4px 6px;\n        border: 1px solid var(--md-sys-color-outline, #ccc);\n        border-radius: 4px;\n        background: var(--md-sys-color-surface, #fff);\n        color: var(--md-sys-color-on-surface, #333);\n        font-size: 11px;\n        cursor: pointer;\n      }\n\n      .preset-buttons button:hover {\n        background: var(--md-sys-color-primary-container, #e0e0e0);\n      }\n\n      .range-with-value {\n        grid-column: 9 / -1;\n        display: flex;\n        align-items: center;\n        gap: 4px;\n      }\n\n      .range-with-value input[type='range'] {\n        flex: 1;\n        border: none;\n        background: transparent;\n        padding: 0;\n      }\n\n      .range-with-value span {\n        min-width: 2.5em;\n        text-align: right;\n        font-size: 11px;\n        color: var(--md-sys-color-on-secondary-container);\n      }\n\n      .bookmark-slots {\n        grid-column: 1 / -1;\n        display: grid;\n        grid-template-columns: repeat(9, 1fr);\n        gap: 2px;\n        padding: 4px 0 0;\n      }\n\n      .bookmark-slot {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        height: 24px;\n        border-radius: 3px;\n        font-size: 11px;\n        font-weight: 600;\n        cursor: pointer;\n        color: var(--md-sys-color-outline, #999);\n        background: var(--md-sys-color-surface-variant, #f0f0f0);\n        border: 1px solid transparent;\n        user-select: none;\n        transition: all 0.12s ease;\n      }\n\n      .bookmark-slot:hover {\n        background: var(--md-sys-color-secondary-container, #e0e0e0);\n      }\n\n      .bookmark-slot.filled {\n        color: var(--md-sys-color-primary, #6750A4);\n        background: var(--md-sys-color-primary-container, #EADDFF);\n        border-color: var(--md-sys-color-primary, #6750A4);\n        font-weight: 700;\n      }\n\n      .bookmark-slot:active {\n        transform: scale(0.9);\n      }\n\n      .bookmark-slot.saving {\n        animation: bookmark-fill 0.6s linear forwards;\n      }\n\n      @keyframes bookmark-fill {\n        from { box-shadow: inset 24px 0 0 0 transparent; }\n        to { box-shadow: inset 24px 0 0 0 var(--md-sys-color-primary-container, #EADDFF); }\n      }\n\n      .bookmark-slot.saved {\n        animation: bookmark-saved 0.3s ease;\n      }\n\n      @keyframes bookmark-saved {\n        0% { transform: scale(1); }\n        50% { transform: scale(1.2); }\n        100% { transform: scale(1); }\n      }\n    `\n  ]\n\n  @property({ type: Object }) value?: Properties\n  @property({ type: Object }) scene: Scene | null = null\n\n  render() {\n    const value = this.value || {}\n\n    return html`\n      ${this._renderMode(value)} ${this._renderBookmarks(value)} ${this._renderRenderer(value)}\n      ${this._renderSky(value)}\n      ${this._renderHemisphereLight(value)} ${this._renderKeyLight(value)} ${this._renderLightingPresets()}\n      ${this._renderFloor(value)}\n    `\n  }\n\n  private _renderMode(value: Properties) {\n    return html`\n      <fieldset>\n        <legend>3D Mode</legend>\n        <div class=\"property-grid\">\n          <input id=\"cb-threed\" type=\"checkbox\" value-key=\"threed\" .checked=${!!value.threed} />\n          <label for=\"cb-threed\">Enable 3D</label>\n\n          <label>Viewer Auto</label>\n          <select value-key=\"cameraAutoPlay\">\n            ${[\n              { value: '', label: 'None' },\n              { value: 'orbit', label: 'Orbit' },\n              { value: 'play', label: 'Play Bookmarks' }\n            ].map(\n              o =>\n                html`<option value=${o.value} ?selected=${(value.cameraAutoPlay || '') === o.value}>\n                  ${o.label}\n                </option>`\n            )}\n          </select>\n\n          <input\n            id=\"cb-floor-constraint\"\n            type=\"checkbox\"\n            value-key=\"cameraFloorConstraint\"\n            .checked=${!!value.cameraFloorConstraint}\n          />\n          <label for=\"cb-floor-constraint\">Floor Constraint (Viewer)</label>\n        </div>\n      </fieldset>\n    `\n  }\n\n  private _renderBookmarks(value: Properties) {\n    const bookmarks: (any | null)[] = value.cameraBookmarks || []\n\n    return html`\n      <fieldset>\n        <legend>Bookmarks</legend>\n        <div class=\"property-grid\">\n          <div class=\"bookmark-slots\">\n        ${[1, 2, 3, 4, 5, 6, 7, 8, 9].map(i => {\n          const filled = !!bookmarks[i]\n          return html`\n            <div\n              class=\"bookmark-slot ${filled ? 'filled' : ''}\"\n              title=${filled ? 'Click: Go / Long-click: Overwrite / Right-click: Delete' : 'Long-click: Save current camera'}\n              @click=${(e: MouseEvent) => { if (filled) { this._bookmarkAction('navigate', i); const t = e.currentTarget as HTMLElement; t.classList.add('saved'); setTimeout(() => t.classList.remove('saved'), 300) } }}\n              @contextmenu=${(e: Event) => { e.preventDefault(); if (filled) this._bookmarkAction('clear', i) }}\n              @mousedown=${(e: MouseEvent) => this._onBookmarkMouseDown(e, i)}\n              @mouseup=${() => this._onBookmarkMouseUp()}\n              @mouseleave=${() => this._onBookmarkMouseUp()}\n            >${i}</div>\n          `\n        })}\n          </div>\n        </div>\n      </fieldset>\n    `\n  }\n\n  private _longPressTimer?: ReturnType<typeof setTimeout>\n  private _pressTarget?: HTMLElement\n\n  private _onBookmarkMouseDown(e: MouseEvent, index: number) {\n    if (e.button !== 0) return\n    const target = e.currentTarget as HTMLElement\n    this._pressTarget = target\n\n    // 롱클릭 시작: filling 애니메이션\n    target.classList.add('saving')\n\n    this._longPressTimer = setTimeout(() => {\n      this._longPressTimer = undefined\n      target.classList.remove('saving')\n      this._bookmarkAction('save', index)\n\n      // 저장 완료 피드백\n      target.classList.add('saved')\n      setTimeout(() => target.classList.remove('saved'), 300)\n    }, 600)\n  }\n\n  private _onBookmarkMouseUp() {\n    if (this._longPressTimer) {\n      clearTimeout(this._longPressTimer)\n      this._longPressTimer = undefined\n    }\n    if (this._pressTarget) {\n      this._pressTarget.classList.remove('saving')\n      this._pressTarget = undefined\n    }\n  }\n\n  private _bookmarkAction(action: 'save' | 'navigate' | 'clear', index: number) {\n    const root = this.scene?.root as any\n    const cap = root?._threeCapability\n    if (!cap) return\n\n    if (action === 'save') {\n      cap.saveCameraToSlot(index)\n    } else if (action === 'navigate') {\n      cap.animateToSlot(index)\n    } else if (action === 'clear') {\n      cap.bookmarkManager.clearSlot(index)\n      root.set('cameraBookmarks', cap.bookmarkManager.exportSlots())\n    }\n\n    this.requestUpdate()\n  }\n\n  private _renderRenderer(value: Properties) {\n    return html`\n      <fieldset>\n        <legend>Renderer</legend>\n        <div class=\"property-grid\">\n          <input id=\"cb-antialias\" type=\"checkbox\" value-key=\"antialias\" .checked=${value.antialias !== false} />\n          <label for=\"cb-antialias\">Anti-alias</label>\n\n          <label>Precision</label>\n          <select value-key=\"precision\">\n            ${[\n              { value: 'highp', label: 'High' },\n              { value: 'mediump', label: 'Medium' },\n              { value: 'lowp', label: 'Low' }\n            ].map(\n              o =>\n                html`<option value=${o.value} ?selected=${(value.precision || 'highp') === o.value}>\n                  ${o.label}\n                </option>`\n            )}\n          </select>\n        </div>\n      </fieldset>\n    `\n  }\n\n  private _renderSky(value: Properties) {\n    const skyOptions = [\n      { value: '', label: 'None' },\n      { value: 'color', label: 'Color' },\n      { value: 'studio', label: 'Studio' },\n      { value: 'warehouse', label: 'Warehouse' },\n      { value: 'factory', label: 'Factory' },\n      { value: 'office', label: 'Office' },\n      { value: 'home', label: 'Home' },\n    ]\n\n    return html`\n      <fieldset>\n        <legend>Sky</legend>\n        <div class=\"property-grid\">\n          <label>Preset</label>\n          <select value-key=\"sky\">\n            ${skyOptions.map(\n              o => html`<option value=${o.value} ?selected=${(value.sky || '') === o.value}>${o.label}</option>`\n            )}\n          </select>\n\n          ${value.sky === 'color'\n            ? html`\n                <label>Color</label>\n                <ox-input-color value-key=\"skyColor\" .value=${value.skyColor || '#87ceeb'}> </ox-input-color>\n              `\n            : ''}\n        </div>\n      </fieldset>\n    `\n  }\n\n  private _renderHemisphereLight(value: Properties) {\n    return html`\n      <fieldset>\n        <legend>Hemisphere Light</legend>\n        <div class=\"property-grid\">\n          <label>Intensity</label>\n          <div class=\"range-with-value\">\n            <input\n              type=\"range\"\n              min=\"0\"\n              max=\"3\"\n              step=\"0.1\"\n              value-key=\"hemiIntensity\"\n              .value=${String(value.hemiIntensity ?? 0.6)}\n            />\n            <span>${(value.hemiIntensity ?? 0.6).toFixed(1)}</span>\n          </div>\n        </div>\n      </fieldset>\n    `\n  }\n\n  private _renderKeyLight(value: Properties) {\n    return html`\n      <fieldset>\n        <legend>Key Light</legend>\n        <div class=\"property-grid\">\n          <input\n            id=\"cb-dirlight\"\n            type=\"checkbox\"\n            value-key=\"dirLightEnabled\"\n            .checked=${value.dirLightEnabled !== false}\n          />\n          <label for=\"cb-dirlight\">Enabled</label>\n\n          <label>Color</label>\n          <ox-input-color value-key=\"dirLightColor\" .value=${value.dirLightColor || '#ffffff'}> </ox-input-color>\n\n          <label>Intensity</label>\n          <div class=\"range-with-value\">\n            <input\n              type=\"range\"\n              min=\"0\"\n              max=\"3\"\n              step=\"0.1\"\n              value-key=\"dirLightIntensity\"\n              .value=${String(value.dirLightIntensity ?? 0.5)}\n            />\n            <span>${(value.dirLightIntensity ?? 0.5).toFixed(1)}</span>\n          </div>\n        </div>\n      </fieldset>\n    `\n  }\n\n  private _renderLightingPresets() {\n    return html`\n      <fieldset>\n        <legend>Lighting Presets</legend>\n        <div class=\"property-grid\">\n          <div class=\"preset-buttons\">\n            ${Object.entries(LIGHTING_PRESETS).map(\n              ([name, values]) =>\n                html`<button @click=${() => this._applyLightingPreset(values)}>${name}</button>`\n            )}\n          </div>\n        </div>\n      </fieldset>\n    `\n  }\n\n  private _renderFloor(value: Properties) {\n    return html`\n      <property-material3d\n        legend=\"Floor Material\"\n        .value=${value.floorMaterial3d || { receiveShadow: true }}\n        @property-change=${this._onFloorMaterialChange}\n      >\n      </property-material3d>\n    `\n  }\n\n  private _applyLightingPreset(values: Record<string, unknown>) {\n    this.dispatchEvent(\n      new CustomEvent('property-change', {\n        bubbles: true,\n        composed: true,\n        detail: values\n      })\n    )\n  }\n\n  private _onFloorMaterialChange(e: CustomEvent) {\n    e.stopPropagation()\n    this.dispatchEvent(\n      new CustomEvent('property-change', {\n        bubbles: true,\n        composed: true,\n        detail: { floorMaterial3d: e.detail.material3d }\n      })\n    )\n  }\n\n}\n"]}
+{"version":3,"file":"property-scene3d.js","sourceRoot":"","sources":["../../../../src/property-panel/threed/property-scene3d.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/input/ox-input-color.js'\nimport '@operato/i18n/ox-i18n.js'\n\nimport './property-material3d.js'\n\nimport { css, html } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nimport { Properties, Scene } from '@hatiolab/things-scene'\nimport { PropertyGridStyles } from '@operato/styles/property-grid-styles.js'\n\nimport { AbstractProperty } from '../abstract-property.js'\n\nconst LIGHTING_PRESETS: Record<string, Record<string, unknown>> = {\n  Neutral: {\n    hemiIntensity: 0.6,\n    dirLightEnabled: true,\n    dirLightColor: '#ffffff',\n    dirLightIntensity: 0.5\n  },\n  Studio: {\n    hemiIntensity: 0.5,\n    dirLightEnabled: true,\n    dirLightColor: '#ffffff',\n    dirLightIntensity: 0.6\n  },\n  Bright: {\n    hemiIntensity: 0.8,\n    dirLightEnabled: true,\n    dirLightColor: '#ffffff',\n    dirLightIntensity: 0.7\n  },\n  Warm: {\n    hemiIntensity: 0.5,\n    dirLightEnabled: true,\n    dirLightColor: '#ffcc88',\n    dirLightIntensity: 0.4\n  },\n  Cool: {\n    hemiIntensity: 0.5,\n    dirLightEnabled: true,\n    dirLightColor: '#cce0ff',\n    dirLightIntensity: 0.4\n  },\n  Flat: {\n    hemiIntensity: 0.8,\n    dirLightEnabled: false,\n    dirLightColor: '#ffffff',\n    dirLightIntensity: 0\n  }\n}\n\n/**\n * Scene-level 3D settings for model-layer.\n * Includes 3D mode, camera, renderer, lighting, presets, and floor configuration.\n */\nexport class PropertyScene3D extends AbstractProperty {\n  static styles = [\n    PropertyGridStyles,\n    css`\n      .preset-buttons {\n        grid-column: 1 / -1;\n        display: flex;\n        flex-wrap: wrap;\n        gap: 4px;\n        padding: 2px 0;\n      }\n\n      .preset-buttons button {\n        flex: 1;\n        min-width: 60px;\n        padding: 4px 6px;\n        border: 1px solid var(--md-sys-color-outline, #ccc);\n        border-radius: 4px;\n        background: var(--md-sys-color-surface, #fff);\n        color: var(--md-sys-color-on-surface, #333);\n        font-size: 11px;\n        cursor: pointer;\n      }\n\n      .preset-buttons button:hover {\n        background: var(--md-sys-color-primary-container, #e0e0e0);\n      }\n\n      .range-with-value {\n        grid-column: 9 / -1;\n        display: flex;\n        align-items: center;\n        gap: 4px;\n      }\n\n      .range-with-value input[type='range'] {\n        flex: 1;\n        border: none;\n        background: transparent;\n        padding: 0;\n      }\n\n      .range-with-value span {\n        min-width: 2.5em;\n        text-align: right;\n        font-size: 11px;\n        color: var(--md-sys-color-on-secondary-container);\n      }\n\n      .bookmark-slots {\n        grid-column: 1 / -1;\n        display: grid;\n        grid-template-columns: repeat(9, 1fr);\n        gap: 2px;\n        padding: 4px 0 0;\n      }\n\n      .bookmark-slot {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        height: 24px;\n        border-radius: 3px;\n        font-size: 11px;\n        font-weight: 600;\n        cursor: pointer;\n        color: var(--md-sys-color-outline, #999);\n        background: var(--md-sys-color-surface-variant, #f0f0f0);\n        border: 1px solid transparent;\n        user-select: none;\n        transition: all 0.12s ease;\n      }\n\n      .bookmark-slot:hover {\n        background: var(--md-sys-color-secondary-container, #e0e0e0);\n      }\n\n      .bookmark-slot.filled {\n        color: var(--md-sys-color-primary, #6750A4);\n        background: var(--md-sys-color-primary-container, #EADDFF);\n        border-color: var(--md-sys-color-primary, #6750A4);\n        font-weight: 700;\n      }\n\n      .bookmark-slot:active {\n        transform: scale(0.9);\n      }\n\n      .bookmark-slot.saving {\n        animation: bookmark-fill 0.6s linear forwards;\n      }\n\n      @keyframes bookmark-fill {\n        from { box-shadow: inset 24px 0 0 0 transparent; }\n        to { box-shadow: inset 24px 0 0 0 var(--md-sys-color-primary-container, #EADDFF); }\n      }\n\n      .bookmark-slot.saved {\n        animation: bookmark-saved 0.3s ease;\n      }\n\n      @keyframes bookmark-saved {\n        0% { transform: scale(1); }\n        50% { transform: scale(1.2); }\n        100% { transform: scale(1); }\n      }\n    `\n  ]\n\n  @property({ type: Object }) value?: Properties\n  @property({ type: Object }) scene: Scene | null = null\n\n  render() {\n    const value = this.value || {}\n\n    return html`\n      ${this._renderMode(value)} ${this._renderBookmarks(value)} ${this._renderRenderer(value)}\n      ${this._renderSky(value)}\n      ${this._renderHemisphereLight(value)} ${this._renderKeyLight(value)} ${this._renderLightingPresets()}\n      ${this._renderFloor(value)}\n    `\n  }\n\n  private _renderMode(value: Properties) {\n    return html`\n      <fieldset>\n        <legend>3D Mode</legend>\n        <div class=\"property-grid\">\n          <input id=\"cb-threed\" type=\"checkbox\" value-key=\"threed\" .checked=${!!value.threed} />\n          <label for=\"cb-threed\"><ox-i18n msgid=\"label.start-in-3d\">Start in 3D</ox-i18n></label>\n\n          <label>Viewer Auto</label>\n          <select value-key=\"cameraAutoPlay\">\n            ${[\n              { value: '', label: 'None' },\n              { value: 'orbit', label: 'Orbit' },\n              { value: 'play', label: 'Play Bookmarks' }\n            ].map(\n              o =>\n                html`<option value=${o.value} ?selected=${(value.cameraAutoPlay || '') === o.value}>\n                  ${o.label}\n                </option>`\n            )}\n          </select>\n\n          <input\n            id=\"cb-floor-constraint\"\n            type=\"checkbox\"\n            value-key=\"cameraFloorConstraint\"\n            .checked=${!!value.cameraFloorConstraint}\n          />\n          <label for=\"cb-floor-constraint\"><ox-i18n msgid=\"label.keep-above-ground\">Keep Above Ground</ox-i18n></label>\n        </div>\n      </fieldset>\n    `\n  }\n\n  private _renderBookmarks(value: Properties) {\n    const bookmarks: (any | null)[] = value.cameraBookmarks || []\n\n    return html`\n      <fieldset>\n        <legend>Bookmarks</legend>\n        <div class=\"property-grid\">\n          <div class=\"bookmark-slots\">\n        ${[1, 2, 3, 4, 5, 6, 7, 8, 9].map(i => {\n          const filled = !!bookmarks[i]\n          return html`\n            <div\n              class=\"bookmark-slot ${filled ? 'filled' : ''}\"\n              title=${filled ? 'Click: Go / Long-click: Overwrite / Right-click: Delete' : 'Long-click: Save current camera'}\n              @click=${(e: MouseEvent) => { if (filled) { this._bookmarkAction('navigate', i); const t = e.currentTarget as HTMLElement; t.classList.add('saved'); setTimeout(() => t.classList.remove('saved'), 300) } }}\n              @contextmenu=${(e: Event) => { e.preventDefault(); if (filled) this._bookmarkAction('clear', i) }}\n              @mousedown=${(e: MouseEvent) => this._onBookmarkMouseDown(e, i)}\n              @mouseup=${() => this._onBookmarkMouseUp()}\n              @mouseleave=${() => this._onBookmarkMouseUp()}\n            >${i}</div>\n          `\n        })}\n          </div>\n        </div>\n      </fieldset>\n    `\n  }\n\n  private _longPressTimer?: ReturnType<typeof setTimeout>\n  private _pressTarget?: HTMLElement\n\n  private _onBookmarkMouseDown(e: MouseEvent, index: number) {\n    if (e.button !== 0) return\n    const target = e.currentTarget as HTMLElement\n    this._pressTarget = target\n\n    // 롱클릭 시작: filling 애니메이션\n    target.classList.add('saving')\n\n    this._longPressTimer = setTimeout(() => {\n      this._longPressTimer = undefined\n      target.classList.remove('saving')\n      this._bookmarkAction('save', index)\n\n      // 저장 완료 피드백\n      target.classList.add('saved')\n      setTimeout(() => target.classList.remove('saved'), 300)\n    }, 600)\n  }\n\n  private _onBookmarkMouseUp() {\n    if (this._longPressTimer) {\n      clearTimeout(this._longPressTimer)\n      this._longPressTimer = undefined\n    }\n    if (this._pressTarget) {\n      this._pressTarget.classList.remove('saving')\n      this._pressTarget = undefined\n    }\n  }\n\n  private _bookmarkAction(action: 'save' | 'navigate' | 'clear', index: number) {\n    const root = this.scene?.root as any\n    const cap = root?._threeCapability\n    if (!cap) return\n\n    if (action === 'save') {\n      cap.saveCameraToSlot(index)\n    } else if (action === 'navigate') {\n      cap.animateToSlot(index)\n    } else if (action === 'clear') {\n      cap.bookmarkManager.clearSlot(index)\n      root.set('cameraBookmarks', cap.bookmarkManager.exportSlots())\n    }\n\n    this.requestUpdate()\n  }\n\n  private _renderRenderer(value: Properties) {\n    return html`\n      <fieldset>\n        <legend>Renderer</legend>\n        <div class=\"property-grid\">\n          <input id=\"cb-antialias\" type=\"checkbox\" value-key=\"antialias\" .checked=${value.antialias !== false} />\n          <label for=\"cb-antialias\">Anti-alias</label>\n\n          <label>Precision</label>\n          <select value-key=\"precision\">\n            ${[\n              { value: 'highp', label: 'High' },\n              { value: 'mediump', label: 'Medium' },\n              { value: 'lowp', label: 'Low' }\n            ].map(\n              o =>\n                html`<option value=${o.value} ?selected=${(value.precision || 'highp') === o.value}>\n                  ${o.label}\n                </option>`\n            )}\n          </select>\n        </div>\n      </fieldset>\n    `\n  }\n\n  private _renderSky(value: Properties) {\n    const skyOptions = [\n      { value: '', label: 'None' },\n      { value: 'color', label: 'Color' },\n      { value: 'studio', label: 'Studio' },\n      { value: 'warehouse', label: 'Warehouse' },\n      { value: 'factory', label: 'Factory' },\n      { value: 'office', label: 'Office' },\n      { value: 'home', label: 'Home' },\n    ]\n\n    return html`\n      <fieldset>\n        <legend>Sky</legend>\n        <div class=\"property-grid\">\n          <label>Preset</label>\n          <select value-key=\"sky\">\n            ${skyOptions.map(\n              o => html`<option value=${o.value} ?selected=${(value.sky || '') === o.value}>${o.label}</option>`\n            )}\n          </select>\n\n          ${value.sky === 'color'\n            ? html`\n                <label>Color</label>\n                <ox-input-color value-key=\"skyColor\" .value=${value.skyColor || '#87ceeb'}> </ox-input-color>\n              `\n            : ''}\n        </div>\n      </fieldset>\n    `\n  }\n\n  private _renderHemisphereLight(value: Properties) {\n    return html`\n      <fieldset>\n        <legend>Hemisphere Light</legend>\n        <div class=\"property-grid\">\n          <label>Intensity</label>\n          <div class=\"range-with-value\">\n            <input\n              type=\"range\"\n              min=\"0\"\n              max=\"3\"\n              step=\"0.1\"\n              value-key=\"hemiIntensity\"\n              .value=${String(value.hemiIntensity ?? 0.6)}\n            />\n            <span>${(value.hemiIntensity ?? 0.6).toFixed(1)}</span>\n          </div>\n        </div>\n      </fieldset>\n    `\n  }\n\n  private _renderKeyLight(value: Properties) {\n    return html`\n      <fieldset>\n        <legend>Key Light</legend>\n        <div class=\"property-grid\">\n          <input\n            id=\"cb-dirlight\"\n            type=\"checkbox\"\n            value-key=\"dirLightEnabled\"\n            .checked=${value.dirLightEnabled !== false}\n          />\n          <label for=\"cb-dirlight\">Enabled</label>\n\n          <label>Color</label>\n          <ox-input-color value-key=\"dirLightColor\" .value=${value.dirLightColor || '#ffffff'}> </ox-input-color>\n\n          <label>Intensity</label>\n          <div class=\"range-with-value\">\n            <input\n              type=\"range\"\n              min=\"0\"\n              max=\"3\"\n              step=\"0.1\"\n              value-key=\"dirLightIntensity\"\n              .value=${String(value.dirLightIntensity ?? 0.5)}\n            />\n            <span>${(value.dirLightIntensity ?? 0.5).toFixed(1)}</span>\n          </div>\n        </div>\n      </fieldset>\n    `\n  }\n\n  private _renderLightingPresets() {\n    return html`\n      <fieldset>\n        <legend>Lighting Presets</legend>\n        <div class=\"property-grid\">\n          <div class=\"preset-buttons\">\n            ${Object.entries(LIGHTING_PRESETS).map(\n              ([name, values]) =>\n                html`<button @click=${() => this._applyLightingPreset(values)}>${name}</button>`\n            )}\n          </div>\n        </div>\n      </fieldset>\n    `\n  }\n\n  private _renderFloor(value: Properties) {\n    return html`\n      <property-material3d\n        legend=\"Floor Material\"\n        .value=${value.floorMaterial3d || { receiveShadow: true }}\n        @property-change=${this._onFloorMaterialChange}\n      >\n      </property-material3d>\n    `\n  }\n\n  private _applyLightingPreset(values: Record<string, unknown>) {\n    this.dispatchEvent(\n      new CustomEvent('property-change', {\n        bubbles: true,\n        composed: true,\n        detail: values\n      })\n    )\n  }\n\n  private _onFloorMaterialChange(e: CustomEvent) {\n    e.stopPropagation()\n    this.dispatchEvent(\n      new CustomEvent('property-change', {\n        bubbles: true,\n        composed: true,\n        detail: { floorMaterial3d: e.detail.material3d }\n      })\n    )\n  }\n\n}\n"]}