@operato/property-panel 9.2.1 → 10.0.0-beta.1

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

@@ -0,0 +1,189 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { __decorate } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { PropertyGridStyles } from '@operato/styles/property-grid-styles.js';
+const PRESETS = {
+    default: { metalness: 0, roughness: 0.4 },
+    metal: { metalness: 1.0, roughness: 0.3, envMapIntensity: 1.0 },
+    glass: { metalness: 0, roughness: 0.1, opacity: 0.3, envMapIntensity: 1.5 },
+    plastic: { metalness: 0, roughness: 0.4 },
+    wood: { metalness: 0, roughness: 0.8, envMapIntensity: 0.3 },
+    ceramic: { metalness: 0.1, roughness: 0.2, envMapIntensity: 0.3 },
+    rubber: { metalness: 0, roughness: 0.9, envMapIntensity: 0.3 }
+};
+const PRESET_NAMES = Object.keys(PRESETS);
+function resolve(m) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    const preset = (_b = PRESETS[(_a = m === null || m === void 0 ? void 0 : m.preset) !== null && _a !== void 0 ? _a : 'default']) !== null && _b !== void 0 ? _b : PRESETS.default;
+    return {
+        metalness: (_c = m === null || m === void 0 ? void 0 : m.metalness) !== null && _c !== void 0 ? _c : preset.metalness,
+        roughness: (_d = m === null || m === void 0 ? void 0 : m.roughness) !== null && _d !== void 0 ? _d : preset.roughness,
+        opacity: (_f = (_e = m === null || m === void 0 ? void 0 : m.opacity) !== null && _e !== void 0 ? _e : preset.opacity) !== null && _f !== void 0 ? _f : 1,
+        envMapIntensity: (_h = (_g = m === null || m === void 0 ? void 0 : m.envMapIntensity) !== null && _g !== void 0 ? _g : preset.envMapIntensity) !== null && _h !== void 0 ? _h : 0.5,
+        side: (_j = m === null || m === void 0 ? void 0 : m.side) !== null && _j !== void 0 ? _j : 'double',
+        castShadow: (_k = m === null || m === void 0 ? void 0 : m.castShadow) !== null && _k !== void 0 ? _k : true,
+        receiveShadow: (_l = m === null || m === void 0 ? void 0 : m.receiveShadow) !== null && _l !== void 0 ? _l : false
+    };
+}
+let PropertyMaterial3d = class PropertyMaterial3d extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.value = {};
+        this.legend = 'Material 3D';
+    }
+    render() {
+        var _a, _b;
+        const r = resolve(this.value);
+        const preset = (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.preset) !== null && _b !== void 0 ? _b : 'default';
+        return html `
+      <fieldset>
+        <legend>${this.legend}</legend>
+        <div class="property-grid">
+          <label>Preset</label>
+          <select @change=${this._onPresetChange}>
+            ${PRESET_NAMES.map(name => html `<option value=${name} ?selected=${preset === name}>${name}</option>`)}
+          </select>
+
+          <label>Metalness</label>
+          <div class="range-with-value">
+            <input
+              type="range"
+              min="0"
+              max="1"
+              step="0.05"
+              .value=${String(r.metalness)}
+              @change=${(e) => this._onRange('metalness', e)}
+            />
+            <span>${r.metalness.toFixed(2)}</span>
+          </div>
+
+          <label>Roughness</label>
+          <div class="range-with-value">
+            <input
+              type="range"
+              min="0"
+              max="1"
+              step="0.05"
+              .value=${String(r.roughness)}
+              @change=${(e) => this._onRange('roughness', e)}
+            />
+            <span>${r.roughness.toFixed(2)}</span>
+          </div>
+
+          <label>Opacity</label>
+          <div class="range-with-value">
+            <input
+              type="range"
+              min="0"
+              max="1"
+              step="0.05"
+              .value=${String(r.opacity)}
+              @change=${(e) => this._onRange('opacity', e)}
+            />
+            <span>${r.opacity.toFixed(2)}</span>
+          </div>
+
+          <label>Env Map</label>
+          <div class="range-with-value">
+            <input
+              type="range"
+              min="0"
+              max="3"
+              step="0.1"
+              .value=${String(r.envMapIntensity)}
+              @change=${(e) => this._onRange('envMapIntensity', e)}
+            />
+            <span>${r.envMapIntensity.toFixed(1)}</span>
+          </div>
+
+          <label>Side</label>
+          <select @change=${this._onSideChange}>
+            ${['double', 'front', 'back'].map(s => html `<option value=${s} ?selected=${r.side === s}>${s}</option>`)}
+          </select>
+
+          <input
+            id="cb-cast"
+            type="checkbox"
+            .checked=${r.castShadow}
+            @change=${(e) => this._onCheck('castShadow', e)}
+          />
+          <label for="cb-cast">Cast Shadow</label>
+
+          <input
+            id="cb-recv"
+            type="checkbox"
+            .checked=${r.receiveShadow}
+            @change=${(e) => this._onCheck('receiveShadow', e)}
+          />
+          <label for="cb-recv">Receive Shadow</label>
+        </div>
+      </fieldset>
+    `;
+    }
+    _onPresetChange(e) {
+        var _a, _b, _c;
+        const preset = e.target.value;
+        // Preset 변경 시 PBR 값을 리셋하고 프리셋 기본값 사용 (side, shadow는 유지)
+        this._dispatch({
+            preset,
+            side: (_a = this.value) === null || _a === void 0 ? void 0 : _a.side,
+            castShadow: (_b = this.value) === null || _b === void 0 ? void 0 : _b.castShadow,
+            receiveShadow: (_c = this.value) === null || _c === void 0 ? void 0 : _c.receiveShadow
+        });
+    }
+    _onRange(key, e) {
+        this._dispatch({ ...this.value, [key]: parseFloat(e.target.value) });
+    }
+    _onSideChange(e) {
+        this._dispatch({ ...this.value, side: e.target.value });
+    }
+    _onCheck(key, e) {
+        this._dispatch({ ...this.value, [key]: e.target.checked });
+    }
+    _dispatch(material3d) {
+        this.dispatchEvent(new CustomEvent('property-change', {
+            bubbles: true,
+            composed: true,
+            detail: { material3d }
+        }));
+    }
+};
+PropertyMaterial3d.styles = [
+    PropertyGridStyles,
+    css `
+      .range-with-value {
+        grid-column: 9 / -1;
+        display: flex;
+        align-items: center;
+        gap: 4px;
+      }
+
+      .range-with-value input[type='range'] {
+        flex: 1;
+        border: none;
+        background: transparent;
+        padding: 0;
+      }
+
+      .range-with-value span {
+        min-width: 2.5em;
+        text-align: right;
+        font-size: 11px;
+        color: var(--md-sys-color-on-secondary-container);
+      }
+    `
+];
+__decorate([
+    property({ type: Object })
+], PropertyMaterial3d.prototype, "value", void 0);
+__decorate([
+    property({ type: String })
+], PropertyMaterial3d.prototype, "legend", void 0);
+PropertyMaterial3d = __decorate([
+    customElement('property-material3d')
+], PropertyMaterial3d);
+export { PropertyMaterial3d };
+//# sourceMappingURL=property-material3d.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"property-material3d.js","sourceRoot":"","sources":["../../../../src/property-panel/threed/property-material3d.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { PropertyGridStyles } from '@operato/styles/property-grid-styles.js'\n\ninterface Material3DValue {\n  preset?: string\n  metalness?: number\n  roughness?: number\n  opacity?: number\n  envMapIntensity?: number\n  side?: string\n  castShadow?: boolean\n  receiveShadow?: boolean\n  [key: string]: unknown\n}\n\nconst PRESETS: Record<string, { metalness: number; roughness: number; opacity?: number; envMapIntensity?: number }> = {\n  default: { metalness: 0, roughness: 0.4 },\n  metal: { metalness: 1.0, roughness: 0.3, envMapIntensity: 1.0 },\n  glass: { metalness: 0, roughness: 0.1, opacity: 0.3, envMapIntensity: 1.5 },\n  plastic: { metalness: 0, roughness: 0.4 },\n  wood: { metalness: 0, roughness: 0.8, envMapIntensity: 0.3 },\n  ceramic: { metalness: 0.1, roughness: 0.2, envMapIntensity: 0.3 },\n  rubber: { metalness: 0, roughness: 0.9, envMapIntensity: 0.3 }\n}\n\nconst PRESET_NAMES = Object.keys(PRESETS)\n\nfunction resolve(m?: Material3DValue) {\n  const preset = PRESETS[m?.preset ?? 'default'] ?? PRESETS.default\n  return {\n    metalness: m?.metalness ?? preset.metalness,\n    roughness: m?.roughness ?? preset.roughness,\n    opacity: m?.opacity ?? preset.opacity ?? 1,\n    envMapIntensity: m?.envMapIntensity ?? preset.envMapIntensity ?? 0.5,\n    side: m?.side ?? 'double',\n    castShadow: m?.castShadow ?? true,\n    receiveShadow: m?.receiveShadow ?? false\n  }\n}\n\n@customElement('property-material3d')\nexport class PropertyMaterial3d extends LitElement {\n  static styles = [\n    PropertyGridStyles,\n    css`\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  ]\n\n  @property({ type: Object }) value: Material3DValue = {}\n  @property({ type: String }) legend: string = 'Material 3D'\n\n  render() {\n    const r = resolve(this.value)\n    const preset = this.value?.preset ?? 'default'\n\n    return html`\n      <fieldset>\n        <legend>${this.legend}</legend>\n        <div class=\"property-grid\">\n          <label>Preset</label>\n          <select @change=${this._onPresetChange}>\n            ${PRESET_NAMES.map(name => html`<option value=${name} ?selected=${preset === name}>${name}</option>`)}\n          </select>\n\n          <label>Metalness</label>\n          <div class=\"range-with-value\">\n            <input\n              type=\"range\"\n              min=\"0\"\n              max=\"1\"\n              step=\"0.05\"\n              .value=${String(r.metalness)}\n              @change=${(e: Event) => this._onRange('metalness', e)}\n            />\n            <span>${r.metalness.toFixed(2)}</span>\n          </div>\n\n          <label>Roughness</label>\n          <div class=\"range-with-value\">\n            <input\n              type=\"range\"\n              min=\"0\"\n              max=\"1\"\n              step=\"0.05\"\n              .value=${String(r.roughness)}\n              @change=${(e: Event) => this._onRange('roughness', e)}\n            />\n            <span>${r.roughness.toFixed(2)}</span>\n          </div>\n\n          <label>Opacity</label>\n          <div class=\"range-with-value\">\n            <input\n              type=\"range\"\n              min=\"0\"\n              max=\"1\"\n              step=\"0.05\"\n              .value=${String(r.opacity)}\n              @change=${(e: Event) => this._onRange('opacity', e)}\n            />\n            <span>${r.opacity.toFixed(2)}</span>\n          </div>\n\n          <label>Env Map</label>\n          <div class=\"range-with-value\">\n            <input\n              type=\"range\"\n              min=\"0\"\n              max=\"3\"\n              step=\"0.1\"\n              .value=${String(r.envMapIntensity)}\n              @change=${(e: Event) => this._onRange('envMapIntensity', e)}\n            />\n            <span>${r.envMapIntensity.toFixed(1)}</span>\n          </div>\n\n          <label>Side</label>\n          <select @change=${this._onSideChange}>\n            ${['double', 'front', 'back'].map(\n              s => html`<option value=${s} ?selected=${r.side === s}>${s}</option>`\n            )}\n          </select>\n\n          <input\n            id=\"cb-cast\"\n            type=\"checkbox\"\n            .checked=${r.castShadow}\n            @change=${(e: Event) => this._onCheck('castShadow', e)}\n          />\n          <label for=\"cb-cast\">Cast Shadow</label>\n\n          <input\n            id=\"cb-recv\"\n            type=\"checkbox\"\n            .checked=${r.receiveShadow}\n            @change=${(e: Event) => this._onCheck('receiveShadow', e)}\n          />\n          <label for=\"cb-recv\">Receive Shadow</label>\n        </div>\n      </fieldset>\n    `\n  }\n\n  private _onPresetChange(e: Event) {\n    const preset = (e.target as HTMLSelectElement).value\n    // Preset 변경 시 PBR 값을 리셋하고 프리셋 기본값 사용 (side, shadow는 유지)\n    this._dispatch({\n      preset,\n      side: this.value?.side,\n      castShadow: this.value?.castShadow,\n      receiveShadow: this.value?.receiveShadow\n    })\n  }\n\n  private _onRange(key: string, e: Event) {\n    this._dispatch({ ...this.value, [key]: parseFloat((e.target as HTMLInputElement).value) })\n  }\n\n  private _onSideChange(e: Event) {\n    this._dispatch({ ...this.value, side: (e.target as HTMLSelectElement).value })\n  }\n\n  private _onCheck(key: string, e: Event) {\n    this._dispatch({ ...this.value, [key]: (e.target as HTMLInputElement).checked })\n  }\n\n  private _dispatch(material3d: Material3DValue) {\n    this.dispatchEvent(\n      new CustomEvent('property-change', {\n        bubbles: true,\n        composed: true,\n        detail: { material3d }\n      })\n    )\n  }\n}\n"]}

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

@@ -0,0 +1,26 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import '@operato/input/ox-input-color.js';
+import './property-material3d.js';
+import { Properties, Scene } from '@hatiolab/things-scene';
+import { AbstractProperty } from '../abstract-property.js';
+/**
+ * Scene-level 3D settings for model-layer.
+ * Includes 3D mode, camera, renderer, lighting, presets, and floor configuration.
+ */
+export declare class PropertyScene3D extends AbstractProperty {
+    static styles: import("lit").CSSResult[];
+    value?: Properties;
+    scene: Scene | null;
+    render(): import("lit-html").TemplateResult<1>;
+    private _renderMode;
+    private _renderCamera;
+    private _renderRenderer;
+    private _renderHemisphereLight;
+    private _renderKeyLight;
+    private _renderLightingPresets;
+    private _renderFloor;
+    private _applyLightingPreset;
+    private _onFloorMaterialChange;
+}

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

@@ -0,0 +1,314 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { __decorate } from "tslib";
+import '@operato/input/ox-input-color.js';
+import './property-material3d.js';
+import { css, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { PropertyGridStyles } from '@operato/styles/property-grid-styles.js';
+import { AbstractProperty } from '../abstract-property.js';
+const LIGHTING_PRESETS = {
+    Neutral: {
+        hemiSkyColor: '#ffffff',
+        hemiGroundColor: '#444444',
+        hemiIntensity: 0.6,
+        dirLightEnabled: true,
+        dirLightColor: '#ffffff',
+        dirLightIntensity: 0.5
+    },
+    Studio: {
+        hemiSkyColor: '#ffffff',
+        hemiGroundColor: '#555555',
+        hemiIntensity: 0.5,
+        dirLightEnabled: true,
+        dirLightColor: '#ffffff',
+        dirLightIntensity: 0.6
+    },
+    Bright: {
+        hemiSkyColor: '#ffffff',
+        hemiGroundColor: '#888888',
+        hemiIntensity: 0.8,
+        dirLightEnabled: true,
+        dirLightColor: '#ffffff',
+        dirLightIntensity: 0.7
+    },
+    Warm: {
+        hemiSkyColor: '#ffe8d0',
+        hemiGroundColor: '#6b4226',
+        hemiIntensity: 0.5,
+        dirLightEnabled: true,
+        dirLightColor: '#ffcc88',
+        dirLightIntensity: 0.4
+    },
+    Cool: {
+        hemiSkyColor: '#e0e8ff',
+        hemiGroundColor: '#334455',
+        hemiIntensity: 0.5,
+        dirLightEnabled: true,
+        dirLightColor: '#cce0ff',
+        dirLightIntensity: 0.4
+    },
+    Flat: {
+        hemiSkyColor: '#ffffff',
+        hemiGroundColor: '#ffffff',
+        hemiIntensity: 0.8,
+        dirLightEnabled: false,
+        dirLightColor: '#ffffff',
+        dirLightIntensity: 0
+    }
+};
+/**
+ * Scene-level 3D settings for model-layer.
+ * Includes 3D mode, camera, renderer, lighting, presets, and floor configuration.
+ */
+export class PropertyScene3D extends AbstractProperty {
+    constructor() {
+        super(...arguments);
+        this.scene = null;
+    }
+    render() {
+        const value = this.value || {};
+        return html `
+      ${this._renderMode(value)} ${this._renderCamera(value)} ${this._renderRenderer(value)}
+      ${this._renderHemisphereLight(value)} ${this._renderKeyLight(value)} ${this._renderLightingPresets()}
+      ${this._renderFloor(value)}
+    `;
+    }
+    _renderMode(value) {
+        return html `
+      <fieldset>
+        <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>
+
+          <input id="cb-autorotate" type="checkbox" value-key="autoRotate" .checked=${!!value.autoRotate} />
+          <label for="cb-autorotate">Auto Rotate</label>
+        </div>
+      </fieldset>
+    `;
+    }
+    _renderCamera(value) {
+        var _a, _b, _c, _d;
+        return html `
+      <fieldset>
+        <legend>Camera</legend>
+        <div class="property-grid">
+          <label>View</label>
+          <select value-key="initialCameraView">
+            ${['perspective', 'top', 'front', 'back', 'right', 'left'].map(v => html `<option value=${v} ?selected=${(value.initialCameraView || 'perspective') === v}>
+                  ${v.charAt(0).toUpperCase() + v.slice(1)}
+                </option>`)}
+          </select>
+
+          <label class="onethird-label">FOV</label>
+          <input
+            class="onethird-editor"
+            type="number"
+            value-key="fov"
+            min="10"
+            max="120"
+            .value=${String((_a = value.fov) !== null && _a !== void 0 ? _a : 45)}
+          />
+          <label class="onethird-label">Near</label>
+          <input
+            class="onethird-editor"
+            type="number"
+            value-key="near"
+            min="0.01"
+            step="0.01"
+            .value=${String((_b = value.near) !== null && _b !== void 0 ? _b : 0.1)}
+          />
+          <label class="onethird-label">Far</label>
+          <input class="onethird-editor" type="number" value-key="far" .value=${String((_c = value.far) !== null && _c !== void 0 ? _c : 20000)} />
+
+          <label class="onethird-label">Zoom</label>
+          <input
+            class="onethird-editor"
+            type="number"
+            value-key="zoom"
+            min="100"
+            .value=${String((_d = value.zoom) !== null && _d !== void 0 ? _d : 100)}
+          />
+        </div>
+      </fieldset>
+    `;
+    }
+    _renderRenderer(value) {
+        return html `
+      <fieldset>
+        <legend>Renderer</legend>
+        <div class="property-grid">
+          <input id="cb-antialias" type="checkbox" value-key="antialias" .checked=${value.antialias !== false} />
+          <label for="cb-antialias">Anti-alias</label>
+
+          <label>Precision</label>
+          <select value-key="precision">
+            ${[
+            { value: 'highp', label: 'High' },
+            { value: 'mediump', label: 'Medium' },
+            { value: 'lowp', label: 'Low' }
+        ].map(o => html `<option value=${o.value} ?selected=${(value.precision || 'highp') === o.value}>
+                  ${o.label}
+                </option>`)}
+          </select>
+        </div>
+      </fieldset>
+    `;
+    }
+    _renderHemisphereLight(value) {
+        var _a, _b;
+        return html `
+      <fieldset>
+        <legend>Hemisphere Light</legend>
+        <div class="property-grid">
+          <label>Sky</label>
+          <ox-input-color value-key="hemiSkyColor" .value=${value.hemiSkyColor || '#ffffff'}> </ox-input-color>
+
+          <label>Ground</label>
+          <ox-input-color value-key="hemiGroundColor" .value=${value.hemiGroundColor || '#444444'}> </ox-input-color>
+
+          <label>Intensity</label>
+          <div class="range-with-value">
+            <input
+              type="range"
+              min="0"
+              max="3"
+              step="0.1"
+              value-key="hemiIntensity"
+              .value=${String((_a = value.hemiIntensity) !== null && _a !== void 0 ? _a : 0.6)}
+            />
+            <span>${((_b = value.hemiIntensity) !== null && _b !== void 0 ? _b : 0.6).toFixed(1)}</span>
+          </div>
+        </div>
+      </fieldset>
+    `;
+    }
+    _renderKeyLight(value) {
+        var _a, _b;
+        return html `
+      <fieldset>
+        <legend>Key Light</legend>
+        <div class="property-grid">
+          <input
+            id="cb-dirlight"
+            type="checkbox"
+            value-key="dirLightEnabled"
+            .checked=${value.dirLightEnabled !== false}
+          />
+          <label for="cb-dirlight">Enabled</label>
+
+          <label>Color</label>
+          <ox-input-color value-key="dirLightColor" .value=${value.dirLightColor || '#ffffff'}> </ox-input-color>
+
+          <label>Intensity</label>
+          <div class="range-with-value">
+            <input
+              type="range"
+              min="0"
+              max="3"
+              step="0.1"
+              value-key="dirLightIntensity"
+              .value=${String((_a = value.dirLightIntensity) !== null && _a !== void 0 ? _a : 0.5)}
+            />
+            <span>${((_b = value.dirLightIntensity) !== null && _b !== void 0 ? _b : 0.5).toFixed(1)}</span>
+          </div>
+        </div>
+      </fieldset>
+    `;
+    }
+    _renderLightingPresets() {
+        return html `
+      <fieldset>
+        <legend>Lighting Presets</legend>
+        <div class="property-grid">
+          <div class="preset-buttons">
+            ${Object.entries(LIGHTING_PRESETS).map(([name, values]) => html `<button @click=${() => this._applyLightingPreset(values)}>${name}</button>`)}
+          </div>
+        </div>
+      </fieldset>
+    `;
+    }
+    _renderFloor(value) {
+        return html `
+      <property-material3d
+        legend="Floor Material"
+        .value=${value.floorMaterial3d || { receiveShadow: true }}
+        @property-change=${this._onFloorMaterialChange}
+      >
+      </property-material3d>
+    `;
+    }
+    _applyLightingPreset(values) {
+        this.dispatchEvent(new CustomEvent('property-change', {
+            bubbles: true,
+            composed: true,
+            detail: values
+        }));
+    }
+    _onFloorMaterialChange(e) {
+        e.stopPropagation();
+        this.dispatchEvent(new CustomEvent('property-change', {
+            bubbles: true,
+            composed: true,
+            detail: { floorMaterial3d: e.detail.material3d }
+        }));
+    }
+}
+PropertyScene3D.styles = [
+    PropertyGridStyles,
+    css `
+      .preset-buttons {
+        grid-column: 1 / -1;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 4px;
+        padding: 2px 0;
+      }
+
+      .preset-buttons button {
+        flex: 1;
+        min-width: 60px;
+        padding: 4px 6px;
+        border: 1px solid var(--md-sys-color-outline, #ccc);
+        border-radius: 4px;
+        background: var(--md-sys-color-surface, #fff);
+        color: var(--md-sys-color-on-surface, #333);
+        font-size: 11px;
+        cursor: pointer;
+      }
+
+      .preset-buttons button:hover {
+        background: var(--md-sys-color-primary-container, #e0e0e0);
+      }
+
+      .range-with-value {
+        grid-column: 9 / -1;
+        display: flex;
+        align-items: center;
+        gap: 4px;
+      }
+
+      .range-with-value input[type='range'] {
+        flex: 1;
+        border: none;
+        background: transparent;
+        padding: 0;
+      }
+
+      .range-with-value span {
+        min-width: 2.5em;
+        text-align: right;
+        font-size: 11px;
+        color: var(--md-sys-color-on-secondary-container);
+      }
+    `
+];
+__decorate([
+    property({ type: Object })
+], PropertyScene3D.prototype, "value", void 0);
+__decorate([
+    property({ type: Object })
+], PropertyScene3D.prototype, "scene", void 0);
+//# sourceMappingURL=property-scene3d.js.map

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

@@ -0,0 +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    hemiSkyColor: '#ffffff',\n    hemiGroundColor: '#444444',\n    hemiIntensity: 0.6,\n    dirLightEnabled: true,\n    dirLightColor: '#ffffff',\n    dirLightIntensity: 0.5\n  },\n  Studio: {\n    hemiSkyColor: '#ffffff',\n    hemiGroundColor: '#555555',\n    hemiIntensity: 0.5,\n    dirLightEnabled: true,\n    dirLightColor: '#ffffff',\n    dirLightIntensity: 0.6\n  },\n  Bright: {\n    hemiSkyColor: '#ffffff',\n    hemiGroundColor: '#888888',\n    hemiIntensity: 0.8,\n    dirLightEnabled: true,\n    dirLightColor: '#ffffff',\n    dirLightIntensity: 0.7\n  },\n  Warm: {\n    hemiSkyColor: '#ffe8d0',\n    hemiGroundColor: '#6b4226',\n    hemiIntensity: 0.5,\n    dirLightEnabled: true,\n    dirLightColor: '#ffcc88',\n    dirLightIntensity: 0.4\n  },\n  Cool: {\n    hemiSkyColor: '#e0e8ff',\n    hemiGroundColor: '#334455',\n    hemiIntensity: 0.5,\n    dirLightEnabled: true,\n    dirLightColor: '#cce0ff',\n    dirLightIntensity: 0.4\n  },\n  Flat: {\n    hemiSkyColor: '#ffffff',\n    hemiGroundColor: '#ffffff',\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  ]\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._renderCamera(value)} ${this._renderRenderer(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          <input id=\"cb-autorotate\" type=\"checkbox\" value-key=\"autoRotate\" .checked=${!!value.autoRotate} />\n          <label for=\"cb-autorotate\">Auto Rotate</label>\n        </div>\n      </fieldset>\n    `\n  }\n\n  private _renderCamera(value: Properties) {\n    return html`\n      <fieldset>\n        <legend>Camera</legend>\n        <div class=\"property-grid\">\n          <label>View</label>\n          <select value-key=\"initialCameraView\">\n            ${['perspective', 'top', 'front', 'back', 'right', 'left'].map(\n              v =>\n                html`<option value=${v} ?selected=${(value.initialCameraView || 'perspective') === v}>\n                  ${v.charAt(0).toUpperCase() + v.slice(1)}\n                </option>`\n            )}\n          </select>\n\n          <label class=\"onethird-label\">FOV</label>\n          <input\n            class=\"onethird-editor\"\n            type=\"number\"\n            value-key=\"fov\"\n            min=\"10\"\n            max=\"120\"\n            .value=${String(value.fov ?? 45)}\n          />\n          <label class=\"onethird-label\">Near</label>\n          <input\n            class=\"onethird-editor\"\n            type=\"number\"\n            value-key=\"near\"\n            min=\"0.01\"\n            step=\"0.01\"\n            .value=${String(value.near ?? 0.1)}\n          />\n          <label class=\"onethird-label\">Far</label>\n          <input class=\"onethird-editor\" type=\"number\" value-key=\"far\" .value=${String(value.far ?? 20000)} />\n\n          <label class=\"onethird-label\">Zoom</label>\n          <input\n            class=\"onethird-editor\"\n            type=\"number\"\n            value-key=\"zoom\"\n            min=\"100\"\n            .value=${String(value.zoom ?? 100)}\n          />\n        </div>\n      </fieldset>\n    `\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 _renderHemisphereLight(value: Properties) {\n    return html`\n      <fieldset>\n        <legend>Hemisphere Light</legend>\n        <div class=\"property-grid\">\n          <label>Sky</label>\n          <ox-input-color value-key=\"hemiSkyColor\" .value=${value.hemiSkyColor || '#ffffff'}> </ox-input-color>\n\n          <label>Ground</label>\n          <ox-input-color value-key=\"hemiGroundColor\" .value=${value.hemiGroundColor || '#444444'}> </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=\"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"]}

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

@@ -0,0 +1,17 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import '@operato/input/ox-input-angle.js';
+import '@operato/i18n/ox-i18n.js';
+import './property-material3d.js';
+import { BOUNDS, Component, Properties } from '@hatiolab/things-scene';
+import { AbstractProperty } from '../abstract-property.js';
+export declare class Property3D extends AbstractProperty {
+    static styles: import("lit").CSSResult[];
+    value?: Properties;
+    bounds: BOUNDS | null;
+    selected: Component[];
+    firstUpdated(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    onValueChange(e: Event): void;
+}