@operato/property-editor 10.0.0-beta.7 → 10.0.0

package/dist/src/ox-property-editor-backdrop-faces.js

@@ -0,0 +1,530 @@
+import { __decorate } from "tslib";
+import '@operato/input/ox-input-fill-style.js';
+import '@operato/i18n/ox-i18n.js';
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { OxPropertyEditor } from './ox-property-editor.js';
+const OPPOSITE = {
+    east: 'west',
+    west: 'east',
+    north: 'south',
+    south: 'north',
+    ceiling: 'floor',
+    floor: 'ceiling'
+};
+const AXIS_LABEL = {
+    east: '+X',
+    west: '−X',
+    north: '−Z',
+    south: '+Z',
+    ceiling: '+Y',
+    floor: '−Y'
+};
+const DEFAULT_FACES = {
+    east: { fillStyle: '#dde2e8', visible: true, alpha: 0.35, rotation: 0, mirror: false },
+    west: { fillStyle: '#dde2e8', visible: true, alpha: 0.35, rotation: 0, mirror: false },
+    north: { fillStyle: '#dde2e8', visible: true, alpha: 0.35, rotation: 0, mirror: false },
+    south: { fillStyle: '#dde2e8', visible: true, alpha: 0.35, rotation: 0, mirror: false },
+    ceiling: { fillStyle: '#e8e8ec', visible: true, alpha: 1.0, rotation: 0, mirror: false },
+    floor: { fillStyle: '#9c9c9c', visible: true, alpha: 1.0, rotation: 0, mirror: false }
+};
+let OxInputBackdropFaces = class OxInputBackdropFaces extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.value = {};
+        this._selected = 'ceiling';
+    }
+    _face(name) {
+        var _a, _b;
+        return { ...DEFAULT_FACES[name], ...((_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a[name]) !== null && _b !== void 0 ? _b : {}) };
+    }
+    /** fillStyle 의 대표 색을 swatch 용으로 추출. 없으면 undefined → hatched 표시. */
+    _swatchColor(name) {
+        var _a;
+        const fs = this._face(name).fillStyle;
+        if (typeof fs === 'string' && fs && fs !== 'transparent')
+            return fs;
+        if (fs && typeof fs === 'object') {
+            if (fs.type === 'gradient' && Array.isArray(fs.colorStops) && ((_a = fs.colorStops[0]) === null || _a === void 0 ? void 0 : _a.color)) {
+                return fs.colorStops[0].color;
+            }
+            if (fs.color)
+                return fs.color;
+        }
+        return undefined;
+    }
+    _select(name) {
+        this._selected = name;
+    }
+    _commit(next) {
+        this.value = next;
+        this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
+    }
+    _patchFace(name, patch) {
+        const next = { ...(this.value || {}) };
+        next[name] = { ...this._face(name), ...patch };
+        this._commit(next);
+    }
+    _onFillStyleChange(e) {
+        e.stopPropagation();
+        const target = e.target;
+        this._patchFace(this._selected, { fillStyle: target.value });
+    }
+    _onVisibleChange(e) {
+        e.stopPropagation();
+        const target = e.target;
+        this._patchFace(this._selected, { visible: target.checked });
+    }
+    _onAlphaChange(e) {
+        e.stopPropagation();
+        const target = e.target;
+        const v = parseFloat(target.value);
+        const alpha = Number.isFinite(v) ? Math.max(0, Math.min(1, v)) : 1;
+        this._patchFace(this._selected, { alpha });
+    }
+    _onRotationChange(e) {
+        e.stopPropagation();
+        const target = e.target;
+        const n = parseInt(target.value, 10);
+        const rotation = n === 90 || n === 180 || n === 270 ? n : 0;
+        this._patchFace(this._selected, { rotation });
+    }
+    _onMirrorChange(e) {
+        e.stopPropagation();
+        const target = e.target;
+        this._patchFace(this._selected, { mirror: target.checked });
+    }
+    _copyToOpposite() {
+        const src = this._face(this._selected);
+        const opposite = OPPOSITE[this._selected];
+        const next = { ...(this.value || {}) };
+        next[opposite] = { ...src };
+        this._commit(next);
+    }
+    _copyToAllWalls() {
+        const src = this._face(this._selected);
+        const next = { ...(this.value || {}) };
+        for (const w of ['east', 'west', 'north', 'south']) {
+            next[w] = { ...src };
+        }
+        this._commit(next);
+    }
+    _renderLabel(name, x, y) {
+        const f = this._face(name);
+        const swatch = this._swatchColor(name);
+        const selected = this._selected === name;
+        return html `
+      <div
+        class="face-label ${selected ? 'selected' : ''}"
+        style="left: ${x}px; top: ${y}px;"
+        @click=${() => this._select(name)}
+        title=${`${name} (${AXIS_LABEL[name]})`}
+      >
+        <span
+          class="swatch"
+          style=${swatch ? `background: ${swatch};` : ''}
+          ?data-empty=${!swatch}
+        ></span>
+        <ox-i18n msgid="label.${name}">${name}</ox-i18n>
+        ${f.visible === false ? html `<span class="eye" title="hidden">⊘</span>` : nothing}
+      </div>
+    `;
+    }
+    _faceClass(name) {
+        const cls = ['face-poly'];
+        if (this._selected === name)
+            cls.push('selected');
+        if (this._face(name).visible === false)
+            cls.push('hidden-face');
+        return cls.join(' ');
+    }
+    _ghostClass(name) {
+        const cls = ['face-ghost'];
+        if (this._selected === name)
+            cls.push('selected');
+        if (this._face(name).visible === false)
+            cls.push('invisible');
+        return cls.join(' ');
+    }
+    render() {
+        var _a, _b, _c, _d, _e, _f;
+        const sel = this._face(this._selected);
+        return html `
+      <div class="cube-picker">
+        <svg viewBox="0 0 288 160" aria-label="Backdrop face picker">
+          <!-- Cabinet projection — south face 정면 1:1 (큰 사각형),
+               east axis 는 30° 위방향으로 절반 foreshortened (좁게 보임),
+               vertical 은 0.7 배로 압축해 안정감 있는 납작한 형태.
+               L=80, depth=40, yScale=0.7 → vertical edge 56.
+               south face (z=L) 좌하단을 (90,125) 로 배치. -->
+
+          <!-- Ceiling (+Y, top) — trapezoid -->
+          <polygon
+            class=${this._faceClass('ceiling')}
+            points="90,69 170,69 198,41 118,41"
+            fill="${(_a = this._swatchColor('ceiling')) !== null && _a !== void 0 ? _a : '#fff8e1'}"
+            @click=${() => this._select('ceiling')}
+          />
+          <!-- East face (+X, right) — narrow parallelogram -->
+          <polygon
+            class=${this._faceClass('east')}
+            points="170,125 198,97 198,41 170,69"
+            fill="${(_b = this._swatchColor('east')) !== null && _b !== void 0 ? _b : '#ffcdd2'}"
+            @click=${() => this._select('east')}
+          />
+          <!-- South face (+Z, front) — dominant rectangle 80×56 -->
+          <polygon
+            class=${this._faceClass('south')}
+            points="90,125 170,125 170,69 90,69"
+            fill="${(_c = this._swatchColor('south')) !== null && _c !== void 0 ? _c : '#c8e6c9'}"
+            @click=${() => this._select('south')}
+          />
+
+          <!-- Back-face ghost outlines (always faint, accent on selection). -->
+          <polygon
+            class=${this._ghostClass('north')}
+            points="118,97 198,97 198,41 118,41"
+            @click=${() => this._select('north')}
+          />
+          <polygon
+            class=${this._ghostClass('west')}
+            points="118,97 90,125 90,69 118,41"
+            @click=${() => this._select('west')}
+          />
+          <polygon
+            class=${this._ghostClass('floor')}
+            points="118,97 198,97 170,125 90,125"
+            @click=${() => this._select('floor')}
+          />
+        </svg>
+
+        ${this._renderLabel('ceiling', 144, 20)} ${this._renderLabel('floor', 144, 146)}
+        ${this._renderLabel('east', 220, 83)} ${this._renderLabel('west', 38, 83)}
+        ${this._renderLabel('north', 220, 51)} ${this._renderLabel('south', 38, 115)}
+      </div>
+
+      <div class="face-detail">
+        <div class="face-detail-title">
+          <span><ox-i18n msgid="label.${this._selected}">${this._selected}</ox-i18n></span>
+          <small>${AXIS_LABEL[this._selected]}</small>
+        </div>
+
+        <div class="row">
+          <label><ox-i18n msgid="label.visible">visible</ox-i18n></label>
+          <div class="ctl">
+            <input type="checkbox" ?checked=${sel.visible !== false} @change=${this._onVisibleChange} />
+          </div>
+        </div>
+
+        <div class="fill-row">
+          <ox-input-fill-style .value=${sel.fillStyle} fullwidth @change=${this._onFillStyleChange}>
+          </ox-input-fill-style>
+        </div>
+
+        <div class="row">
+          <label><ox-i18n msgid="label.alpha">alpha</ox-i18n></label>
+          <div class="ctl">
+            <input
+              type="range"
+              min="0"
+              max="1"
+              step="0.05"
+              .value=${String((_d = sel.alpha) !== null && _d !== void 0 ? _d : 1)}
+              @input=${this._onAlphaChange}
+            />
+            <span class="alpha-readout">${((_e = sel.alpha) !== null && _e !== void 0 ? _e : 1).toFixed(2)}</span>
+          </div>
+        </div>
+
+        <div class="row">
+          <label><ox-i18n msgid="label.rotation">rotation</ox-i18n></label>
+          <div class="ctl">
+            <select .value=${String((_f = sel.rotation) !== null && _f !== void 0 ? _f : 0)} @change=${this._onRotationChange}>
+              <option value="0">0°</option>
+              <option value="90">90°</option>
+              <option value="180">180°</option>
+              <option value="270">270°</option>
+            </select>
+            <label class="mirror-toggle">
+              <input type="checkbox" ?checked=${sel.mirror === true} @change=${this._onMirrorChange} />
+              <ox-i18n msgid="label.mirror">mirror</ox-i18n>
+            </label>
+          </div>
+        </div>
+
+        <div class="actions">
+          <button @click=${this._copyToOpposite} title="Copy current face to opposite">
+            ↔ <ox-i18n msgid="label.copy-to-opposite">opposite</ox-i18n>
+          </button>
+          <button @click=${this._copyToAllWalls} title="Copy current face to all 4 walls">
+            <ox-i18n msgid="label.copy-to-walls">all walls</ox-i18n>
+          </button>
+        </div>
+      </div>
+    `;
+    }
+};
+OxInputBackdropFaces.styles = css `
+    :host {
+      display: block;
+      font: 12px Arial, sans-serif;
+    }
+
+    .cube-picker {
+      position: relative;
+      width: 100%;
+      max-width: 260px;
+      height: 160px;
+      margin: 0 auto 8px;
+    }
+    .cube-picker svg {
+      display: block;
+      width: 100%;
+      height: 100%;
+      overflow: visible;
+    }
+
+    .face-poly {
+      cursor: pointer;
+      stroke: #3a3f4a;
+      stroke-width: 1;
+      stroke-linejoin: round;
+      transition:
+        filter 0.15s,
+        stroke 0.15s,
+        stroke-width 0.15s;
+    }
+    .face-poly:hover {
+      filter: brightness(1.15);
+    }
+    .face-poly.selected {
+      stroke: var(--md-sys-color-primary, #e15c5c);
+      stroke-width: 2.5;
+    }
+    .face-poly.hidden-face {
+      stroke-dasharray: 3 2;
+      opacity: 0.4;
+    }
+
+    /* 뒷면 3 개 (north/west/floor) — 항상 dashed 프레임으로 희미하게 표시.
+       선택되면 accent 컬러로 강조되어 라벨 highlight 와 함께 시각적 feedback. */
+    .face-ghost {
+      cursor: pointer;
+      fill: none;
+      stroke: #8a93a6;
+      stroke-width: 1;
+      stroke-dasharray: 3 3;
+      stroke-linejoin: round;
+      opacity: 0.4;
+      pointer-events: stroke;
+      transition:
+        stroke 0.15s,
+        stroke-width 0.15s,
+        opacity 0.15s;
+    }
+    .face-ghost:hover {
+      opacity: 0.85;
+      stroke: var(--md-sys-color-primary, #e15c5c);
+    }
+    .face-ghost.selected {
+      stroke: var(--md-sys-color-primary, #e15c5c);
+      stroke-width: 2;
+      opacity: 1;
+    }
+    .face-ghost.invisible {
+      opacity: 0.2;
+    }
+
+    .face-label {
+      position: absolute;
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      padding: 2px 6px 2px 4px;
+      font: 600 10px Arial, sans-serif;
+      background: var(--md-sys-color-surface, #fff);
+      border: 1px solid var(--md-sys-color-outline-variant, #d8dde6);
+      border-radius: 10px;
+      cursor: pointer;
+      user-select: none;
+      transform: translate(-50%, -50%);
+      white-space: nowrap;
+      transition:
+        border-color 0.15s,
+        background 0.15s,
+        color 0.15s;
+      text-transform: capitalize;
+    }
+    .face-label:hover {
+      border-color: var(--md-sys-color-primary, #e15c5c);
+    }
+    .face-label.selected {
+      border-color: var(--md-sys-color-primary, #e15c5c);
+      background: var(--md-sys-color-primary-container, #fde7e7);
+      color: var(--md-sys-color-on-primary-container, #b91c1c);
+    }
+    .face-label .swatch {
+      width: 12px;
+      height: 12px;
+      border-radius: 2px;
+      border: 1px solid rgba(0, 0, 0, 0.15);
+      flex: none;
+    }
+    .face-label .swatch[data-empty] {
+      background: repeating-linear-gradient(45deg, #fff, #fff 2px, #ccc 2px, #ccc 4px);
+    }
+    .face-label .eye {
+      font-size: 9px;
+      opacity: 0.55;
+      margin-left: 1px;
+    }
+
+    .face-detail {
+      border-top: 1px dashed var(--md-sys-color-outline-variant, #d8dde6);
+      padding-top: 10px;
+      margin-top: 4px;
+    }
+    .face-detail-title {
+      display: flex;
+      justify-content: space-between;
+      align-items: baseline;
+      font-weight: 600;
+      font-size: 11px;
+      color: var(--md-sys-color-primary, #e15c5c);
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      margin-bottom: 8px;
+    }
+    .face-detail-title small {
+      font-weight: 400;
+      text-transform: none;
+      letter-spacing: 0;
+      color: var(--md-sys-color-on-secondary-container, #8a93a6);
+      font: 10px monospace;
+    }
+
+    .row {
+      display: grid;
+      grid-template-columns: 60px 1fr;
+      gap: 8px;
+      align-items: center;
+      margin-bottom: 6px;
+    }
+    .row > label {
+      text-align: right;
+      font-size: 11px;
+      color: var(--md-sys-color-on-secondary-container, #6b7280);
+    }
+    .row .ctl {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+    .ctl input[type='range'] {
+      flex: 1;
+      accent-color: var(--md-sys-color-primary, #e15c5c);
+    }
+    .ctl input[type='checkbox'] {
+      accent-color: var(--md-sys-color-primary, #e15c5c);
+    }
+    .alpha-readout {
+      width: 30px;
+      text-align: right;
+      font: 11px monospace;
+    }
+
+    /* Rotation select + mirror toggle — actions 버튼과 동일한 border 스타일. */
+    .row select,
+    .row .mirror-toggle {
+      font: 10px Arial, sans-serif;
+      padding: 5px 6px;
+      border: 1px solid var(--md-sys-color-outline-variant, #d8dde6);
+      border-radius: 4px;
+      background: var(--md-sys-color-surface, #fff);
+      color: inherit;
+      cursor: pointer;
+    }
+    .row select {
+      flex: 1;
+      outline: none;
+    }
+    .row select:hover,
+    .row .mirror-toggle:hover {
+      border-color: var(--md-sys-color-primary, #e15c5c);
+      color: var(--md-sys-color-primary, #e15c5c);
+    }
+    .row .mirror-toggle {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+    }
+    .row .mirror-toggle input[type='checkbox'] {
+      margin: 0;
+    }
+
+    .fill-row {
+      margin-bottom: 6px;
+    }
+    ox-input-fill-style {
+      font: 12px Arial, sans-serif;
+      display: block;
+    }
+
+    .actions {
+      margin-top: 8px;
+      display: flex;
+      gap: 6px;
+    }
+    .actions button {
+      flex: 1;
+      font: 10px Arial, sans-serif;
+      padding: 5px 6px;
+      border: 1px solid var(--md-sys-color-outline-variant, #d8dde6);
+      border-radius: 4px;
+      background: var(--md-sys-color-surface, #fff);
+      color: inherit;
+      cursor: pointer;
+    }
+    .actions button:hover {
+      border-color: var(--md-sys-color-primary, #e15c5c);
+      color: var(--md-sys-color-primary, #e15c5c);
+    }
+  `;
+__decorate([
+    property({ type: Object })
+], OxInputBackdropFaces.prototype, "value", void 0);
+__decorate([
+    state()
+], OxInputBackdropFaces.prototype, "_selected", void 0);
+OxInputBackdropFaces = __decorate([
+    customElement('ox-input-backdrop-faces')
+], OxInputBackdropFaces);
+export { OxInputBackdropFaces };
+let OxPropertyEditorBackdropFaces = class OxPropertyEditorBackdropFaces extends OxPropertyEditor {
+    editorTemplate(value, spec) {
+        // 큐브 + detail panel 이 좁은 column 에서는 답답하므로 기본 fullwidth=true.
+        // PropertySpec.editor.fullwidth = false 로 좁게 둘 수도 있다.
+        const { fullwidth = true } = spec.editor || {};
+        return html `
+      <ox-input-backdrop-faces
+        id="editor"
+        .value=${value}
+        ?fullwidth=${fullwidth}
+        ?disabled=${this.disabled}
+      ></ox-input-backdrop-faces>
+    `;
+    }
+};
+OxPropertyEditorBackdropFaces.styles = [
+    ...OxPropertyEditor.styles,
+    css `
+      ox-input-backdrop-faces#editor {
+        font: 12px Arial, sans-serif;
+      }
+    `
+];
+OxPropertyEditorBackdropFaces = __decorate([
+    customElement('ox-property-editor-backdrop-faces')
+], OxPropertyEditorBackdropFaces);
+export { OxPropertyEditorBackdropFaces };
+//# sourceMappingURL=ox-property-editor-backdrop-faces.js.map

package/dist/src/ox-property-editor-backdrop-faces.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-property-editor-backdrop-faces.js","sourceRoot":"","sources":["../../src/ox-property-editor-backdrop-faces.ts"],"names":[],"mappings":";AAAA,OAAO,uCAAuC,CAAA;AAC9C,OAAO,0BAA0B,CAAA;AAEjC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAuB,MAAM,KAAK,CAAA;AACzE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAA;AAwB1D,MAAM,QAAQ,GAA+B;IAC3C,IAAI,EAAE,MAAM;IACZ,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,OAAO;IACd,KAAK,EAAE,OAAO;IACd,OAAO,EAAE,OAAO;IAChB,KAAK,EAAE,SAAS;CACjB,CAAA;AACD,MAAM,UAAU,GAA6B;IAC3C,IAAI,EAAE,IAAI;IACV,IAAI,EAAE,IAAI;IACV,KAAK,EAAE,IAAI;IACX,KAAK,EAAE,IAAI;IACX,OAAO,EAAE,IAAI;IACb,KAAK,EAAE,IAAI;CACZ,CAAA;AAWD,MAAM,aAAa,GAAgC;IACjD,IAAI,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE;IACtF,IAAI,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE;IACtF,KAAK,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE;IACvF,KAAK,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE;IACvF,OAAO,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE;IACxF,KAAK,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE;CACvF,CAAA;AAGM,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQ,UAAU;IAA7C;;QACuB,UAAK,GAAe,EAAE,CAAA;QACjC,cAAS,GAAa,SAAS,CAAA;IAgdlD,CAAC;IA3OS,KAAK,CAAC,IAAc;;QAC1B,OAAO,EAAE,GAAG,aAAa,CAAC,IAAI,CAAC,EAAE,GAAG,CAAC,MAAA,MAAA,IAAI,CAAC,KAAK,0CAAG,IAAI,CAAC,mCAAI,EAAE,CAAC,EAAE,CAAA;IAClE,CAAC;IAED,mEAAmE;IAC3D,YAAY,CAAC,IAAc;;QACjC,MAAM,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,SAAS,CAAA;QACrC,IAAI,OAAO,EAAE,KAAK,QAAQ,IAAI,EAAE,IAAI,EAAE,KAAK,aAAa;YAAE,OAAO,EAAE,CAAA;QACnE,IAAI,EAAE,IAAI,OAAO,EAAE,KAAK,QAAQ,EAAE,CAAC;YACjC,IAAI,EAAE,CAAC,IAAI,KAAK,UAAU,IAAI,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC,UAAU,CAAC,KAAI,MAAA,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC,0CAAE,KAAK,CAAA,EAAE,CAAC;gBACtF,OAAO,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,KAAK,CAAA;YAC/B,CAAC;YACD,IAAI,EAAE,CAAC,KAAK;gBAAE,OAAO,EAAE,CAAC,KAAK,CAAA;QAC/B,CAAC;QACD,OAAO,SAAS,CAAA;IAClB,CAAC;IAEO,OAAO,CAAC,IAAc;QAC5B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAA;IACvB,CAAC;IAEO,OAAO,CAAC,IAAgB;QAC9B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAA;QACjB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IAClF,CAAC;IAEO,UAAU,CAAC,IAAc,EAAE,KAAyB;QAC1D,MAAM,IAAI,GAAe,EAAE,GAAG,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,EAAE,CAAA;QAClD,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,GAAG,KAAK,EAAE,CAAA;QAC9C,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAA;IACpB,CAAC;IAEO,kBAAkB,CAAC,CAAQ;QACjC,CAAC,CAAC,eAAe,EAAE,CAAA;QACnB,MAAM,MAAM,GAAG,CAAC,CAAC,MAAyB,CAAA;QAC1C,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,SAAS,EAAE,EAAE,SAAS,EAAE,MAAM,CAAC,KAAK,EAAE,CAAC,CAAA;IAC9D,CAAC;IAEO,gBAAgB,CAAC,CAAQ;QAC/B,CAAC,CAAC,eAAe,EAAE,CAAA;QACnB,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAA;QAC3C,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,SAAS,EAAE,EAAE,OAAO,EAAE,MAAM,CAAC,OAAO,EAAE,CAAC,CAAA;IAC9D,CAAC;IAEO,cAAc,CAAC,CAAQ;QAC7B,CAAC,CAAC,eAAe,EAAE,CAAA;QACnB,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAA;QAC3C,MAAM,CAAC,GAAG,UAAU,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;QAClC,MAAM,KAAK,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;QAClE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,SAAS,EAAE,EAAE,KAAK,EAAE,CAAC,CAAA;IAC5C,CAAC;IAEO,iBAAiB,CAAC,CAAQ;QAChC,CAAC,CAAC,eAAe,EAAE,CAAA;QACnB,MAAM,MAAM,GAAG,CAAC,CAAC,MAA2B,CAAA;QAC5C,MAAM,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC,CAAA;QACpC,MAAM,QAAQ,GAAuB,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;QAC/E,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,SAAS,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAA;IAC/C,CAAC;IAEO,eAAe,CAAC,CAAQ;QAC9B,CAAC,CAAC,eAAe,EAAE,CAAA;QACnB,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAA;QAC3C,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,SAAS,EAAE,EAAE,MAAM,EAAE,MAAM,CAAC,OAAO,EAAE,CAAC,CAAA;IAC7D,CAAC;IAEO,eAAe;QACrB,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;QACtC,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;QACzC,MAAM,IAAI,GAAe,EAAE,GAAG,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,EAAE,CAAA;QAClD,IAAI,CAAC,QAAQ,CAAC,GAAG,EAAE,GAAG,GAAG,EAAE,CAAA;QAC3B,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAA;IACpB,CAAC;IAEO,eAAe;QACrB,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;QACtC,MAAM,IAAI,GAAe,EAAE,GAAG,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,EAAE,CAAA;QAClD,KAAK,MAAM,CAAC,IAAI,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,CAAU,EAAE,CAAC;YAC5D,IAAI,CAAC,CAAC,CAAC,GAAG,EAAE,GAAG,GAAG,EAAE,CAAA;QACtB,CAAC;QACD,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAA;IACpB,CAAC;IAEO,YAAY,CAAC,IAAc,EAAE,CAAS,EAAE,CAAS;QACvD,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;QAC1B,MAAM,MAAM,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAA;QACtC,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,KAAK,IAAI,CAAA;QACxC,OAAO,IAAI,CAAA;;4BAEa,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;uBAC/B,CAAC,YAAY,CAAC;iBACpB,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC;gBACzB,GAAG,IAAI,KAAK,UAAU,CAAC,IAAI,CAAC,GAAG;;;;kBAI7B,MAAM,CAAC,CAAC,CAAC,eAAe,MAAM,GAAG,CAAC,CAAC,CAAC,EAAE;wBAChC,CAAC,MAAM;;gCAEC,IAAI,KAAK,IAAI;UACnC,CAAC,CAAC,OAAO,KAAK,KAAK,CAAC,CAAC,CAAC,IAAI,CAAA,2CAA2C,CAAC,CAAC,CAAC,OAAO;;KAEpF,CAAA;IACH,CAAC;IAEO,UAAU,CAAC,IAAc;QAC/B,MAAM,GAAG,GAAG,CAAC,WAAW,CAAC,CAAA;QACzB,IAAI,IAAI,CAAC,SAAS,KAAK,IAAI;YAAE,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,CAAA;QACjD,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,OAAO,KAAK,KAAK;YAAE,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC,CAAA;QAC/D,OAAO,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;IACtB,CAAC;IAEO,WAAW,CAAC,IAAc;QAChC,MAAM,GAAG,GAAG,CAAC,YAAY,CAAC,CAAA;QAC1B,IAAI,IAAI,CAAC,SAAS,KAAK,IAAI;YAAE,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,CAAA;QACjD,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,OAAO,KAAK,KAAK;YAAE,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC,CAAA;QAC7D,OAAO,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;IACtB,CAAC;IAEQ,MAAM;;QACb,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;QACtC,OAAO,IAAI,CAAA;;;;;;;;;;;oBAWK,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC;;oBAE1B,MAAA,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,mCAAI,SAAS;qBACxC,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC;;;;oBAI9B,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC;;oBAEvB,MAAA,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,mCAAI,SAAS;qBACrC,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC;;;;oBAI3B,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC;;oBAExB,MAAA,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,mCAAI,SAAS;qBACtC,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC;;;;;oBAK5B,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC;;qBAExB,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC;;;oBAG5B,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC;;qBAEvB,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC;;;oBAG3B,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC;;qBAExB,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC;;;;UAItC,IAAI,CAAC,YAAY,CAAC,SAAS,EAAE,GAAG,EAAE,EAAE,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,GAAG,EAAE,GAAG,CAAC;UAC7E,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,GAAG,EAAE,EAAE,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,EAAE,EAAE,EAAE,CAAC;UACvE,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,GAAG,EAAE,EAAE,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,EAAE,EAAE,GAAG,CAAC;;;;;wCAK5C,IAAI,CAAC,SAAS,KAAK,IAAI,CAAC,SAAS;mBACtD,UAAU,CAAC,IAAI,CAAC,SAAS,CAAC;;;;;;8CAMC,GAAG,CAAC,OAAO,KAAK,KAAK,YAAY,IAAI,CAAC,gBAAgB;;;;;wCAK5D,GAAG,CAAC,SAAS,sBAAsB,IAAI,CAAC,kBAAkB;;;;;;;;;;;;uBAY3E,MAAM,CAAC,MAAA,GAAG,CAAC,KAAK,mCAAI,CAAC,CAAC;uBACtB,IAAI,CAAC,cAAc;;0CAEA,CAAC,MAAA,GAAG,CAAC,KAAK,mCAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC;;;;;;;6BAOxC,MAAM,CAAC,MAAA,GAAG,CAAC,QAAQ,mCAAI,CAAC,CAAC,YAAY,IAAI,CAAC,iBAAiB;;;;;;;gDAOxC,GAAG,CAAC,MAAM,KAAK,IAAI,YAAY,IAAI,CAAC,eAAe;;;;;;;2BAOxE,IAAI,CAAC,eAAe;;;2BAGpB,IAAI,CAAC,eAAe;;;;;KAK1C,CAAA;IACH,CAAC;;AA7cM,2BAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiOlB,AAjOY,CAiOZ;AApO2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDAAuB;AACjC;IAAhB,KAAK,EAAE;uDAAwC;AAFrC,oBAAoB;IADhC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,oBAAoB,CAkdhC;;AAGM,IAAM,6BAA6B,GAAnC,MAAM,6BAA8B,SAAQ,gBAAgB;IAUxD,cAAc,CAAC,KAAU,EAAE,IAAkB;QACpD,6DAA6D;QAC7D,sDAAsD;QACtD,MAAM,EAAE,SAAS,GAAG,IAAI,EAAE,GAAG,IAAI,CAAC,MAAM,IAAI,EAAE,CAAA;QAC9C,OAAO,IAAI,CAAA;;;iBAGE,KAAK;qBACD,SAAS;oBACV,IAAI,CAAC,QAAQ;;KAE5B,CAAA;IACH,CAAC;;AArBM,oCAAM,GAAG;IACd,GAAG,gBAAgB,CAAC,MAAM;IAC1B,GAAG,CAAA;;;;KAIF;CACF,AAPY,CAOZ;AARU,6BAA6B;IADzC,aAAa,CAAC,mCAAmC,CAAC;GACtC,6BAA6B,CAuBzC","sourcesContent":["import '@operato/input/ox-input-fill-style.js'\nimport '@operato/i18n/ox-i18n.js'\n\nimport { css, html, LitElement, nothing, type TemplateResult } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { OxPropertyEditor } from './ox-property-editor.js'\nimport type { PropertySpec } from './types.js'\n\n/**\n * Backdrop 의 6개 면 (east/west/north/south/ceiling/floor) 을 한 번에\n * 편집하는 합성 에디터.\n *\n * 면당 5개 속성 (fillStyle/visible/alpha/rotation/mirror) 을 flat NATURE 로\n * 펼치면 30+개 항목 폼이 되어 좌표 감각이 사라진다. 이 에디터는:\n *   1) cabinet projection cube 로 6면을 시각화 — 앞 3면(ceiling/east/south)\n *      은 fill polygon, 뒤 3면(north/west/floor)은 dashed ghost outline\n *   2) 각 면 라벨에 fillStyle swatch — 6면 색 분포 한 눈에\n *   3) 면/라벨 클릭 → 그 면 detail 패널만 표시\n *   4) \"반대편 복사\" / \"벽 4면 일괄\" 단축 동작\n *\n * value 형태:\n *   {\n *     east:    { fillStyle, visible, alpha, rotation, mirror },\n *     west:    { ... },\n *     ...\n *   }\n */\n\ntype FaceName = 'east' | 'west' | 'north' | 'south' | 'ceiling' | 'floor'\nconst OPPOSITE: Record<FaceName, FaceName> = {\n  east: 'west',\n  west: 'east',\n  north: 'south',\n  south: 'north',\n  ceiling: 'floor',\n  floor: 'ceiling'\n}\nconst AXIS_LABEL: Record<FaceName, string> = {\n  east: '+X',\n  west: '−X',\n  north: '−Z',\n  south: '+Z',\n  ceiling: '+Y',\n  floor: '−Y'\n}\n\ninterface FaceState {\n  fillStyle?: any\n  visible?: boolean\n  alpha?: number\n  rotation?: 0 | 90 | 180 | 270\n  mirror?: boolean\n}\ntype FacesValue = Partial<Record<FaceName, FaceState>>\n\nconst DEFAULT_FACES: Record<FaceName, FaceState> = {\n  east: { fillStyle: '#dde2e8', visible: true, alpha: 0.35, rotation: 0, mirror: false },\n  west: { fillStyle: '#dde2e8', visible: true, alpha: 0.35, rotation: 0, mirror: false },\n  north: { fillStyle: '#dde2e8', visible: true, alpha: 0.35, rotation: 0, mirror: false },\n  south: { fillStyle: '#dde2e8', visible: true, alpha: 0.35, rotation: 0, mirror: false },\n  ceiling: { fillStyle: '#e8e8ec', visible: true, alpha: 1.0, rotation: 0, mirror: false },\n  floor: { fillStyle: '#9c9c9c', visible: true, alpha: 1.0, rotation: 0, mirror: false }\n}\n\n@customElement('ox-input-backdrop-faces')\nexport class OxInputBackdropFaces extends LitElement {\n  @property({ type: Object }) value: FacesValue = {}\n  @state() private _selected: FaceName = 'ceiling'\n\n  static styles = css`\n    :host {\n      display: block;\n      font: 12px Arial, sans-serif;\n    }\n\n    .cube-picker {\n      position: relative;\n      width: 100%;\n      max-width: 260px;\n      height: 160px;\n      margin: 0 auto 8px;\n    }\n    .cube-picker svg {\n      display: block;\n      width: 100%;\n      height: 100%;\n      overflow: visible;\n    }\n\n    .face-poly {\n      cursor: pointer;\n      stroke: #3a3f4a;\n      stroke-width: 1;\n      stroke-linejoin: round;\n      transition:\n        filter 0.15s,\n        stroke 0.15s,\n        stroke-width 0.15s;\n    }\n    .face-poly:hover {\n      filter: brightness(1.15);\n    }\n    .face-poly.selected {\n      stroke: var(--md-sys-color-primary, #e15c5c);\n      stroke-width: 2.5;\n    }\n    .face-poly.hidden-face {\n      stroke-dasharray: 3 2;\n      opacity: 0.4;\n    }\n\n    /* 뒷면 3 개 (north/west/floor) — 항상 dashed 프레임으로 희미하게 표시.\n       선택되면 accent 컬러로 강조되어 라벨 highlight 와 함께 시각적 feedback. */\n    .face-ghost {\n      cursor: pointer;\n      fill: none;\n      stroke: #8a93a6;\n      stroke-width: 1;\n      stroke-dasharray: 3 3;\n      stroke-linejoin: round;\n      opacity: 0.4;\n      pointer-events: stroke;\n      transition:\n        stroke 0.15s,\n        stroke-width 0.15s,\n        opacity 0.15s;\n    }\n    .face-ghost:hover {\n      opacity: 0.85;\n      stroke: var(--md-sys-color-primary, #e15c5c);\n    }\n    .face-ghost.selected {\n      stroke: var(--md-sys-color-primary, #e15c5c);\n      stroke-width: 2;\n      opacity: 1;\n    }\n    .face-ghost.invisible {\n      opacity: 0.2;\n    }\n\n    .face-label {\n      position: absolute;\n      display: inline-flex;\n      align-items: center;\n      gap: 4px;\n      padding: 2px 6px 2px 4px;\n      font: 600 10px Arial, sans-serif;\n      background: var(--md-sys-color-surface, #fff);\n      border: 1px solid var(--md-sys-color-outline-variant, #d8dde6);\n      border-radius: 10px;\n      cursor: pointer;\n      user-select: none;\n      transform: translate(-50%, -50%);\n      white-space: nowrap;\n      transition:\n        border-color 0.15s,\n        background 0.15s,\n        color 0.15s;\n      text-transform: capitalize;\n    }\n    .face-label:hover {\n      border-color: var(--md-sys-color-primary, #e15c5c);\n    }\n    .face-label.selected {\n      border-color: var(--md-sys-color-primary, #e15c5c);\n      background: var(--md-sys-color-primary-container, #fde7e7);\n      color: var(--md-sys-color-on-primary-container, #b91c1c);\n    }\n    .face-label .swatch {\n      width: 12px;\n      height: 12px;\n      border-radius: 2px;\n      border: 1px solid rgba(0, 0, 0, 0.15);\n      flex: none;\n    }\n    .face-label .swatch[data-empty] {\n      background: repeating-linear-gradient(45deg, #fff, #fff 2px, #ccc 2px, #ccc 4px);\n    }\n    .face-label .eye {\n      font-size: 9px;\n      opacity: 0.55;\n      margin-left: 1px;\n    }\n\n    .face-detail {\n      border-top: 1px dashed var(--md-sys-color-outline-variant, #d8dde6);\n      padding-top: 10px;\n      margin-top: 4px;\n    }\n    .face-detail-title {\n      display: flex;\n      justify-content: space-between;\n      align-items: baseline;\n      font-weight: 600;\n      font-size: 11px;\n      color: var(--md-sys-color-primary, #e15c5c);\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n      margin-bottom: 8px;\n    }\n    .face-detail-title small {\n      font-weight: 400;\n      text-transform: none;\n      letter-spacing: 0;\n      color: var(--md-sys-color-on-secondary-container, #8a93a6);\n      font: 10px monospace;\n    }\n\n    .row {\n      display: grid;\n      grid-template-columns: 60px 1fr;\n      gap: 8px;\n      align-items: center;\n      margin-bottom: 6px;\n    }\n    .row > label {\n      text-align: right;\n      font-size: 11px;\n      color: var(--md-sys-color-on-secondary-container, #6b7280);\n    }\n    .row .ctl {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n    }\n    .ctl input[type='range'] {\n      flex: 1;\n      accent-color: var(--md-sys-color-primary, #e15c5c);\n    }\n    .ctl input[type='checkbox'] {\n      accent-color: var(--md-sys-color-primary, #e15c5c);\n    }\n    .alpha-readout {\n      width: 30px;\n      text-align: right;\n      font: 11px monospace;\n    }\n\n    /* Rotation select + mirror toggle — actions 버튼과 동일한 border 스타일. */\n    .row select,\n    .row .mirror-toggle {\n      font: 10px Arial, sans-serif;\n      padding: 5px 6px;\n      border: 1px solid var(--md-sys-color-outline-variant, #d8dde6);\n      border-radius: 4px;\n      background: var(--md-sys-color-surface, #fff);\n      color: inherit;\n      cursor: pointer;\n    }\n    .row select {\n      flex: 1;\n      outline: none;\n    }\n    .row select:hover,\n    .row .mirror-toggle:hover {\n      border-color: var(--md-sys-color-primary, #e15c5c);\n      color: var(--md-sys-color-primary, #e15c5c);\n    }\n    .row .mirror-toggle {\n      display: inline-flex;\n      align-items: center;\n      gap: 4px;\n    }\n    .row .mirror-toggle input[type='checkbox'] {\n      margin: 0;\n    }\n\n    .fill-row {\n      margin-bottom: 6px;\n    }\n    ox-input-fill-style {\n      font: 12px Arial, sans-serif;\n      display: block;\n    }\n\n    .actions {\n      margin-top: 8px;\n      display: flex;\n      gap: 6px;\n    }\n    .actions button {\n      flex: 1;\n      font: 10px Arial, sans-serif;\n      padding: 5px 6px;\n      border: 1px solid var(--md-sys-color-outline-variant, #d8dde6);\n      border-radius: 4px;\n      background: var(--md-sys-color-surface, #fff);\n      color: inherit;\n      cursor: pointer;\n    }\n    .actions button:hover {\n      border-color: var(--md-sys-color-primary, #e15c5c);\n      color: var(--md-sys-color-primary, #e15c5c);\n    }\n  `\n\n  private _face(name: FaceName): FaceState {\n    return { ...DEFAULT_FACES[name], ...(this.value?.[name] ?? {}) }\n  }\n\n  /** fillStyle 의 대표 색을 swatch 용으로 추출. 없으면 undefined → hatched 표시. */\n  private _swatchColor(name: FaceName): string | undefined {\n    const fs = this._face(name).fillStyle\n    if (typeof fs === 'string' && fs && fs !== 'transparent') return fs\n    if (fs && typeof fs === 'object') {\n      if (fs.type === 'gradient' && Array.isArray(fs.colorStops) && fs.colorStops[0]?.color) {\n        return fs.colorStops[0].color\n      }\n      if (fs.color) return fs.color\n    }\n    return undefined\n  }\n\n  private _select(name: FaceName) {\n    this._selected = name\n  }\n\n  private _commit(next: FacesValue) {\n    this.value = next\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n\n  private _patchFace(name: FaceName, patch: Partial<FaceState>) {\n    const next: FacesValue = { ...(this.value || {}) }\n    next[name] = { ...this._face(name), ...patch }\n    this._commit(next)\n  }\n\n  private _onFillStyleChange(e: Event) {\n    e.stopPropagation()\n    const target = e.target as { value?: any }\n    this._patchFace(this._selected, { fillStyle: target.value })\n  }\n\n  private _onVisibleChange(e: Event) {\n    e.stopPropagation()\n    const target = e.target as HTMLInputElement\n    this._patchFace(this._selected, { visible: target.checked })\n  }\n\n  private _onAlphaChange(e: Event) {\n    e.stopPropagation()\n    const target = e.target as HTMLInputElement\n    const v = parseFloat(target.value)\n    const alpha = Number.isFinite(v) ? Math.max(0, Math.min(1, v)) : 1\n    this._patchFace(this._selected, { alpha })\n  }\n\n  private _onRotationChange(e: Event) {\n    e.stopPropagation()\n    const target = e.target as HTMLSelectElement\n    const n = parseInt(target.value, 10)\n    const rotation: 0 | 90 | 180 | 270 = n === 90 || n === 180 || n === 270 ? n : 0\n    this._patchFace(this._selected, { rotation })\n  }\n\n  private _onMirrorChange(e: Event) {\n    e.stopPropagation()\n    const target = e.target as HTMLInputElement\n    this._patchFace(this._selected, { mirror: target.checked })\n  }\n\n  private _copyToOpposite() {\n    const src = this._face(this._selected)\n    const opposite = OPPOSITE[this._selected]\n    const next: FacesValue = { ...(this.value || {}) }\n    next[opposite] = { ...src }\n    this._commit(next)\n  }\n\n  private _copyToAllWalls() {\n    const src = this._face(this._selected)\n    const next: FacesValue = { ...(this.value || {}) }\n    for (const w of ['east', 'west', 'north', 'south'] as const) {\n      next[w] = { ...src }\n    }\n    this._commit(next)\n  }\n\n  private _renderLabel(name: FaceName, x: number, y: number) {\n    const f = this._face(name)\n    const swatch = this._swatchColor(name)\n    const selected = this._selected === name\n    return html`\n      <div\n        class=\"face-label ${selected ? 'selected' : ''}\"\n        style=\"left: ${x}px; top: ${y}px;\"\n        @click=${() => this._select(name)}\n        title=${`${name} (${AXIS_LABEL[name]})`}\n      >\n        <span\n          class=\"swatch\"\n          style=${swatch ? `background: ${swatch};` : ''}\n          ?data-empty=${!swatch}\n        ></span>\n        <ox-i18n msgid=\"label.${name}\">${name}</ox-i18n>\n        ${f.visible === false ? html`<span class=\"eye\" title=\"hidden\">⊘</span>` : nothing}\n      </div>\n    `\n  }\n\n  private _faceClass(name: FaceName): string {\n    const cls = ['face-poly']\n    if (this._selected === name) cls.push('selected')\n    if (this._face(name).visible === false) cls.push('hidden-face')\n    return cls.join(' ')\n  }\n\n  private _ghostClass(name: FaceName): string {\n    const cls = ['face-ghost']\n    if (this._selected === name) cls.push('selected')\n    if (this._face(name).visible === false) cls.push('invisible')\n    return cls.join(' ')\n  }\n\n  override render() {\n    const sel = this._face(this._selected)\n    return html`\n      <div class=\"cube-picker\">\n        <svg viewBox=\"0 0 288 160\" aria-label=\"Backdrop face picker\">\n          <!-- Cabinet projection — south face 정면 1:1 (큰 사각형),\n               east axis 는 30° 위방향으로 절반 foreshortened (좁게 보임),\n               vertical 은 0.7 배로 압축해 안정감 있는 납작한 형태.\n               L=80, depth=40, yScale=0.7 → vertical edge 56.\n               south face (z=L) 좌하단을 (90,125) 로 배치. -->\n\n          <!-- Ceiling (+Y, top) — trapezoid -->\n          <polygon\n            class=${this._faceClass('ceiling')}\n            points=\"90,69 170,69 198,41 118,41\"\n            fill=\"${this._swatchColor('ceiling') ?? '#fff8e1'}\"\n            @click=${() => this._select('ceiling')}\n          />\n          <!-- East face (+X, right) — narrow parallelogram -->\n          <polygon\n            class=${this._faceClass('east')}\n            points=\"170,125 198,97 198,41 170,69\"\n            fill=\"${this._swatchColor('east') ?? '#ffcdd2'}\"\n            @click=${() => this._select('east')}\n          />\n          <!-- South face (+Z, front) — dominant rectangle 80×56 -->\n          <polygon\n            class=${this._faceClass('south')}\n            points=\"90,125 170,125 170,69 90,69\"\n            fill=\"${this._swatchColor('south') ?? '#c8e6c9'}\"\n            @click=${() => this._select('south')}\n          />\n\n          <!-- Back-face ghost outlines (always faint, accent on selection). -->\n          <polygon\n            class=${this._ghostClass('north')}\n            points=\"118,97 198,97 198,41 118,41\"\n            @click=${() => this._select('north')}\n          />\n          <polygon\n            class=${this._ghostClass('west')}\n            points=\"118,97 90,125 90,69 118,41\"\n            @click=${() => this._select('west')}\n          />\n          <polygon\n            class=${this._ghostClass('floor')}\n            points=\"118,97 198,97 170,125 90,125\"\n            @click=${() => this._select('floor')}\n          />\n        </svg>\n\n        ${this._renderLabel('ceiling', 144, 20)} ${this._renderLabel('floor', 144, 146)}\n        ${this._renderLabel('east', 220, 83)} ${this._renderLabel('west', 38, 83)}\n        ${this._renderLabel('north', 220, 51)} ${this._renderLabel('south', 38, 115)}\n      </div>\n\n      <div class=\"face-detail\">\n        <div class=\"face-detail-title\">\n          <span><ox-i18n msgid=\"label.${this._selected}\">${this._selected}</ox-i18n></span>\n          <small>${AXIS_LABEL[this._selected]}</small>\n        </div>\n\n        <div class=\"row\">\n          <label><ox-i18n msgid=\"label.visible\">visible</ox-i18n></label>\n          <div class=\"ctl\">\n            <input type=\"checkbox\" ?checked=${sel.visible !== false} @change=${this._onVisibleChange} />\n          </div>\n        </div>\n\n        <div class=\"fill-row\">\n          <ox-input-fill-style .value=${sel.fillStyle} fullwidth @change=${this._onFillStyleChange}>\n          </ox-input-fill-style>\n        </div>\n\n        <div class=\"row\">\n          <label><ox-i18n msgid=\"label.alpha\">alpha</ox-i18n></label>\n          <div class=\"ctl\">\n            <input\n              type=\"range\"\n              min=\"0\"\n              max=\"1\"\n              step=\"0.05\"\n              .value=${String(sel.alpha ?? 1)}\n              @input=${this._onAlphaChange}\n            />\n            <span class=\"alpha-readout\">${(sel.alpha ?? 1).toFixed(2)}</span>\n          </div>\n        </div>\n\n        <div class=\"row\">\n          <label><ox-i18n msgid=\"label.rotation\">rotation</ox-i18n></label>\n          <div class=\"ctl\">\n            <select .value=${String(sel.rotation ?? 0)} @change=${this._onRotationChange}>\n              <option value=\"0\">0°</option>\n              <option value=\"90\">90°</option>\n              <option value=\"180\">180°</option>\n              <option value=\"270\">270°</option>\n            </select>\n            <label class=\"mirror-toggle\">\n              <input type=\"checkbox\" ?checked=${sel.mirror === true} @change=${this._onMirrorChange} />\n              <ox-i18n msgid=\"label.mirror\">mirror</ox-i18n>\n            </label>\n          </div>\n        </div>\n\n        <div class=\"actions\">\n          <button @click=${this._copyToOpposite} title=\"Copy current face to opposite\">\n            ↔ <ox-i18n msgid=\"label.copy-to-opposite\">opposite</ox-i18n>\n          </button>\n          <button @click=${this._copyToAllWalls} title=\"Copy current face to all 4 walls\">\n            <ox-i18n msgid=\"label.copy-to-walls\">all walls</ox-i18n>\n          </button>\n        </div>\n      </div>\n    `\n  }\n}\n\n@customElement('ox-property-editor-backdrop-faces')\nexport class OxPropertyEditorBackdropFaces extends OxPropertyEditor {\n  static styles = [\n    ...OxPropertyEditor.styles,\n    css`\n      ox-input-backdrop-faces#editor {\n        font: 12px Arial, sans-serif;\n      }\n    `\n  ]\n\n  override editorTemplate(value: any, spec: PropertySpec): TemplateResult {\n    // 큐브 + detail panel 이 좁은 column 에서는 답답하므로 기본 fullwidth=true.\n    // PropertySpec.editor.fullwidth = false 로 좁게 둘 수도 있다.\n    const { fullwidth = true } = spec.editor || {}\n    return html`\n      <ox-input-backdrop-faces\n        id=\"editor\"\n        .value=${value}\n        ?fullwidth=${fullwidth}\n        ?disabled=${this.disabled}\n      ></ox-input-backdrop-faces>\n    `\n  }\n}\n"]}

package/dist/src/ox-property-editor-date.js

@@ -4,7 +4,15 @@ import { customElement } from 'lit/decorators.js';
 import { OxPropertyEditor } from './ox-property-editor.js';
 let OxPropertyEditorDate = class OxPropertyEditorDate extends OxPropertyEditor {
     editorTemplate(value, spec) {
-        return html ` <input type="date" id="editor" .value=${value} ?disabled=${this.disabled} /> `;
+        return html `
+      <input
+        type="date"
+        id="editor"
+        .value=${value}
+        ?disabled=${this.disabled}
+        @click=${(e) => e.currentTarget.showPicker()}
+      />
+    `;
     }
 };
 OxPropertyEditorDate = __decorate([

package/dist/src/ox-property-editor-date.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-property-editor-date.js","sourceRoot":"","sources":["../../src/ox-property-editor-date.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAEjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAA;AAInD,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQ,gBAAgB;IACxD,cAAc,CAAC,KAAU,EAAE,IAAkB;QAC3C,OAAO,IAAI,CAAA,0CAA0C,KAAK,cAAc,IAAI,CAAC,QAAQ,MAAM,CAAA;IAC7F,CAAC;CACF,CAAA;AAJY,oBAAoB;IADhC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,oBAAoB,CAIhC","sourcesContent":["import { html, TemplateResult } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nimport { OxPropertyEditor } from './ox-property-editor.js'\nimport { PropertySpec } from './types.js'\n\n@customElement('ox-property-editor-date')\nexport class OxPropertyEditorDate extends OxPropertyEditor {\n  editorTemplate(value: any, spec: PropertySpec): TemplateResult {\n    return html` <input type=\"date\" id=\"editor\" .value=${value} ?disabled=${this.disabled} /> `\n  }\n}\n"]}
+{"version":3,"file":"ox-property-editor-date.js","sourceRoot":"","sources":["../../src/ox-property-editor-date.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAEjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAA;AAInD,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQ,gBAAgB;IACxD,cAAc,CAAC,KAAU,EAAE,IAAkB;QAC3C,OAAO,IAAI,CAAA;;;;iBAIE,KAAK;oBACF,IAAI,CAAC,QAAQ;iBAChB,CAAC,CAAQ,EAAE,EAAE,CAAE,CAAC,CAAC,aAAkC,CAAC,UAAU,EAAE;;KAE5E,CAAA;IACH,CAAC;CACF,CAAA;AAZY,oBAAoB;IADhC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,oBAAoB,CAYhC","sourcesContent":["import { html, TemplateResult } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nimport { OxPropertyEditor } from './ox-property-editor.js'\nimport { PropertySpec } from './types.js'\n\n@customElement('ox-property-editor-date')\nexport class OxPropertyEditorDate extends OxPropertyEditor {\n  editorTemplate(value: any, spec: PropertySpec): TemplateResult {\n    return html`\n      <input\n        type=\"date\"\n        id=\"editor\"\n        .value=${value}\n        ?disabled=${this.disabled}\n        @click=${(e: Event) => (e.currentTarget as HTMLInputElement).showPicker()}\n      />\n    `\n  }\n}\n"]}

package/dist/src/ox-property-editor-datetime.js

@@ -4,7 +4,15 @@ import { customElement } from 'lit/decorators.js';
 import { OxPropertyEditor } from './ox-property-editor.js';
 let OxPropertyEditorDatetime = class OxPropertyEditorDatetime extends OxPropertyEditor {
     editorTemplate(value, spec) {
-        return html ` <input type="datetime-local" id="editor" .value=${value} ?disabled=${this.disabled} /> `;
+        return html `
+      <input
+        type="datetime-local"
+        id="editor"
+        .value=${value}
+        ?disabled=${this.disabled}
+        @click=${(e) => e.currentTarget.showPicker()}
+      />
+    `;
     }
 };
 OxPropertyEditorDatetime = __decorate([

package/dist/src/ox-property-editor-datetime.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-property-editor-datetime.js","sourceRoot":"","sources":["../../src/ox-property-editor-datetime.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAEjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAA;AAInD,IAAM,wBAAwB,GAA9B,MAAM,wBAAyB,SAAQ,gBAAgB;IAC5D,cAAc,CAAC,KAAU,EAAE,IAAkB;QAC3C,OAAO,IAAI,CAAA,oDAAoD,KAAK,cAAc,IAAI,CAAC,QAAQ,MAAM,CAAA;IACvG,CAAC;CACF,CAAA;AAJY,wBAAwB;IADpC,aAAa,CAAC,6BAA6B,CAAC;GAChC,wBAAwB,CAIpC","sourcesContent":["import { html, TemplateResult } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nimport { OxPropertyEditor } from './ox-property-editor.js'\nimport { PropertySpec } from './types.js'\n\n@customElement('ox-property-editor-datetime')\nexport class OxPropertyEditorDatetime extends OxPropertyEditor {\n  editorTemplate(value: any, spec: PropertySpec): TemplateResult {\n    return html` <input type=\"datetime-local\" id=\"editor\" .value=${value} ?disabled=${this.disabled} /> `\n  }\n}\n"]}
+{"version":3,"file":"ox-property-editor-datetime.js","sourceRoot":"","sources":["../../src/ox-property-editor-datetime.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAEjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAA;AAInD,IAAM,wBAAwB,GAA9B,MAAM,wBAAyB,SAAQ,gBAAgB;IAC5D,cAAc,CAAC,KAAU,EAAE,IAAkB;QAC3C,OAAO,IAAI,CAAA;;;;iBAIE,KAAK;oBACF,IAAI,CAAC,QAAQ;iBAChB,CAAC,CAAQ,EAAE,EAAE,CAAE,CAAC,CAAC,aAAkC,CAAC,UAAU,EAAE;;KAE5E,CAAA;IACH,CAAC;CACF,CAAA;AAZY,wBAAwB;IADpC,aAAa,CAAC,6BAA6B,CAAC;GAChC,wBAAwB,CAYpC","sourcesContent":["import { html, TemplateResult } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\nimport { OxPropertyEditor } from './ox-property-editor.js'\nimport { PropertySpec } from './types.js'\n\n@customElement('ox-property-editor-datetime')\nexport class OxPropertyEditorDatetime extends OxPropertyEditor {\n  editorTemplate(value: any, spec: PropertySpec): TemplateResult {\n    return html`\n      <input\n        type=\"datetime-local\"\n        id=\"editor\"\n        .value=${value}\n        ?disabled=${this.disabled}\n        @click=${(e: Event) => (e.currentTarget as HTMLInputElement).showPicker()}\n      />\n    `\n  }\n}\n"]}

package/dist/src/ox-property-editor-fill-style.d.ts

@@ -0,0 +1,20 @@
+import '@operato/input/ox-input-fill-style.js';
+import { TemplateResult } from 'lit';
+import { OxPropertyEditor } from './ox-property-editor.js';
+import { PropertySpec } from './types.js';
+/**
+ * Property editor for the COMPOSITE `FillStyle` type — the same widget
+ * used for the standard component-level `fillStyle` (color / pattern /
+ * gradient / image). Wraps `<ox-input-fill-style>` so that NATURE
+ * properties declared with `type: 'fill-style'` get the full editor in
+ * the property panel.
+ *
+ * Use this when a component exposes MULTIPLE fillStyle slots (e.g. a
+ * Backdrop's per-face fillStyles) and each needs the same rich editor.
+ * For a simple solid-color slot, use `type: 'color'` (which uses
+ * `<ox-input-color>` — string value, no pattern/gradient/image).
+ */
+export declare class OxPropertyEditorFillStyle extends OxPropertyEditor {
+    static styles: import("lit").CSSResult[];
+    editorTemplate(value: any, spec: PropertySpec): TemplateResult;
+}