@fmsim/board 2.0.0-beta.64 → 2.0.0-beta.67

package/dist/src/component/index.d.ts

@@ -1,3 +1,4 @@
 export * from './restful-attachment-selector.js';
 export * from './restful-input-fill-style.js';
+export * from './restful-property-editor-backdrop-faces.js';
 export * from './etc.js';

package/dist/src/component/index.js

@@ -1,4 +1,5 @@
 export * from './restful-attachment-selector.js';
 export * from './restful-input-fill-style.js';
+export * from './restful-property-editor-backdrop-faces.js';
 export * from './etc.js';
 //# sourceMappingURL=index.js.map

package/dist/src/component/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/component/index.ts"],"names":[],"mappings":"AAAA,cAAc,kCAAkC,CAAA;AAChD,cAAc,+BAA+B,CAAA;AAC7C,cAAc,UAAU,CAAA","sourcesContent":["export * from './restful-attachment-selector.js'\nexport * from './restful-input-fill-style.js'\nexport * from './etc.js'\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/component/index.ts"],"names":[],"mappings":"AAAA,cAAc,kCAAkC,CAAA;AAChD,cAAc,+BAA+B,CAAA;AAC7C,cAAc,6CAA6C,CAAA;AAC3D,cAAc,UAAU,CAAA","sourcesContent":["export * from './restful-attachment-selector.js'\nexport * from './restful-input-fill-style.js'\nexport * from './restful-property-editor-backdrop-faces.js'\nexport * from './etc.js'\n"]}

package/dist/src/component/restful-property-editor-backdrop-faces.d.ts

@@ -0,0 +1,50 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ *
+ * fmsim-restful 환경에서는 GraphQL/attachment 의존이 있는 ox-input-fill-style 대신
+ * restful-input-fill-style 을 사용해야 한다. ox-property-editor-backdrop-faces 와
+ * 동일한 cube-picker UI 를 유지하되 fillStyle 에디터만 restful 버전으로 교체.
+ *
+ * 양쪽 동기화 시 주의: ox-property-editor-backdrop-faces.ts (operato/property-editor)
+ * 변경 시 이 파일도 함께 업데이트.
+ */
+import './restful-input-fill-style.js';
+import '@operato/i18n/ox-i18n.js';
+import { LitElement, type TemplateResult } from 'lit';
+import { OxPropertyEditor } from '@operato/property-editor';
+import type { PropertySpec } from '@operato/property-editor';
+type FaceName = 'east' | 'west' | 'north' | 'south' | 'ceiling' | 'floor';
+interface FaceState {
+    fillStyle?: any;
+    visible?: boolean;
+    alpha?: number;
+    rotation?: 0 | 90 | 180 | 270;
+    mirror?: boolean;
+}
+type FacesValue = Partial<Record<FaceName, FaceState>>;
+export declare class RestfulInputBackdropFaces extends LitElement {
+    value: FacesValue;
+    private _selected;
+    static styles: import("lit").CSSResult;
+    private _face;
+    private _swatchColor;
+    private _select;
+    private _commit;
+    private _patchFace;
+    private _onFillStyleChange;
+    private _onVisibleChange;
+    private _onAlphaChange;
+    private _onRotationChange;
+    private _onMirrorChange;
+    private _copyToOpposite;
+    private _copyToAllWalls;
+    private _renderLabel;
+    private _faceClass;
+    private _ghostClass;
+    render(): TemplateResult<1>;
+}
+export declare class RestfulPropertyEditorBackdropFaces extends OxPropertyEditor {
+    static styles: import("lit").CSSResult[];
+    editorTemplate(value: any, spec: PropertySpec): TemplateResult;
+}
+export {};

package/dist/src/component/restful-property-editor-backdrop-faces.js

@@ -0,0 +1,524 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ *
+ * fmsim-restful 환경에서는 GraphQL/attachment 의존이 있는 ox-input-fill-style 대신
+ * restful-input-fill-style 을 사용해야 한다. ox-property-editor-backdrop-faces 와
+ * 동일한 cube-picker UI 를 유지하되 fillStyle 에디터만 restful 버전으로 교체.
+ *
+ * 양쪽 동기화 시 주의: ox-property-editor-backdrop-faces.ts (operato/property-editor)
+ * 변경 시 이 파일도 함께 업데이트.
+ */
+import { __decorate } from "tslib";
+import './restful-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 '@operato/property-editor';
+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 RestfulInputBackdropFaces = class RestfulInputBackdropFaces 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 : {}) };
+    }
+    _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">
+          <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')}
+          />
+          <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')}
+          />
+          <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')}
+          />
+
+          <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">
+          <restful-input-fill-style .value=${sel.fillStyle} @change=${this._onFillStyleChange}>
+          </restful-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>
+    `;
+    }
+};
+RestfulInputBackdropFaces.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;
+    }
+
+    .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;
+    }
+
+    .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;
+    }
+    restful-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 })
+], RestfulInputBackdropFaces.prototype, "value", void 0);
+__decorate([
+    state()
+], RestfulInputBackdropFaces.prototype, "_selected", void 0);
+RestfulInputBackdropFaces = __decorate([
+    customElement('restful-input-backdrop-faces')
+], RestfulInputBackdropFaces);
+export { RestfulInputBackdropFaces };
+let RestfulPropertyEditorBackdropFaces = class RestfulPropertyEditorBackdropFaces extends OxPropertyEditor {
+    editorTemplate(value, spec) {
+        const { fullwidth = true } = spec.editor || {};
+        return html `
+      <restful-input-backdrop-faces
+        id="editor"
+        .value=${value}
+        ?fullwidth=${fullwidth}
+        ?disabled=${this.disabled}
+      ></restful-input-backdrop-faces>
+    `;
+    }
+};
+RestfulPropertyEditorBackdropFaces.styles = [
+    ...OxPropertyEditor.styles,
+    css `
+      restful-input-backdrop-faces#editor {
+        font: 12px Arial, sans-serif;
+      }
+    `
+];
+RestfulPropertyEditorBackdropFaces = __decorate([
+    customElement('restful-property-editor-backdrop-faces')
+], RestfulPropertyEditorBackdropFaces);
+export { RestfulPropertyEditorBackdropFaces };
+//# sourceMappingURL=restful-property-editor-backdrop-faces.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"restful-property-editor-backdrop-faces.js","sourceRoot":"","sources":["../../../src/component/restful-property-editor-backdrop-faces.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n *\n * fmsim-restful 환경에서는 GraphQL/attachment 의존이 있는 ox-input-fill-style 대신\n * restful-input-fill-style 을 사용해야 한다. ox-property-editor-backdrop-faces 와\n * 동일한 cube-picker UI 를 유지하되 fillStyle 에디터만 restful 버전으로 교체.\n *\n * 양쪽 동기화 시 주의: ox-property-editor-backdrop-faces.ts (operato/property-editor)\n * 변경 시 이 파일도 함께 업데이트.\n */\n\nimport './restful-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 '@operato/property-editor'\nimport type { PropertySpec } from '@operato/property-editor'\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('restful-input-backdrop-faces')\nexport class RestfulInputBackdropFaces 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    .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    .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    restful-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  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          <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          <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          <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          <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          <restful-input-fill-style .value=${sel.fillStyle} @change=${this._onFillStyleChange}>\n          </restful-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('restful-property-editor-backdrop-faces')\nexport class RestfulPropertyEditorBackdropFaces extends OxPropertyEditor {\n  static styles = [\n    ...OxPropertyEditor.styles,\n    css`\n      restful-input-backdrop-faces#editor {\n        font: 12px Arial, sans-serif;\n      }\n    `\n  ]\n\n  override editorTemplate(value: any, spec: PropertySpec): TemplateResult {\n    const { fullwidth = true } = spec.editor || {}\n    return html`\n      <restful-input-backdrop-faces\n        id=\"editor\"\n        .value=${value}\n        ?fullwidth=${fullwidth}\n        ?disabled=${this.disabled}\n      ></restful-input-backdrop-faces>\n    `\n  }\n}\n"]}